Added breadcrumb to TPS UI.

The TPS UI has been modified to use Backbone.Router to assign a
unique path for each page. This way the browser's Back button will
work properly and the page can be bookmarked.

A home page has been added for the UI. Currently it provide links
to all available pages. In the future it might be changed to
display more useful information.

A breadcrumb has been added to the top of each page to provide
links back to the home page.

Some new font files have been added from PatternFly library.

The EntryWithPropertiesPage has been renamed to ConfigEntryPage.
The Navigation class is no longer used so it has been removed.

Ticket #959

37 files changed, 619 insertions, 435 deletions

diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index 5b636b69e..1d029c86e 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -70,15 +70,6 @@ var ActivityPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         ActivityPage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            ActivityPage.__super__.close.call(self);
-        }
     }
 });
 
@@ -86,18 +77,6 @@ var ActivitiesTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         ActivitiesTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item, column) {
-        var self = this;
-
-        var page = new ActivityPage({
-            el: self.parentPage.$el,
-            url: "activity.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     }
 });
 
@@ -107,8 +86,7 @@ var ActivitiesPage = Page.extend({
 
         var table = new ActivitiesTable({
             el: $("table[name='activities']"),
-            collection: new ActivityCollection(),
-            parentPage: self
+            collection: new ActivityCollection()
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/audit.js b/base/tps-tomcat/shared/webapps/tps/js/audit.js
index b5de110ba..986596e1d 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/audit.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/audit.js
@@ -77,22 +77,56 @@ var AuditTableItem = TableItem.extend({
         var self = this;
         AuditTableItem.__super__.initialize.call(self, options);
     },
-    open: function(td) {
+    renderColumn: function(td, templateTD) {
         var self = this;
 
-        // in view mode all events are read-only
-        if (self.table.mode == "view") {
-            return;
-        }
+        AuditTableItem.__super__.renderColumn.call(self, td, templateTD);
+
+        $("a", td).click(function(e) {
+            e.preventDefault();
+            self.open();
+        });
+    },
+    open: function() {
+        var self = this;
 
-        // mandatory events are read-only
         var value = self.get("value");
-        if (value == "mandatory") {
-            return;
+        var dialog;
+
+        if (self.table.mode == "view" || value == "mandatory") {
+            // In view mode all events are read-only.
+            // Mandatory events are always read-only.
+            dialog = new Dialog({
+                el: self.table.parent.$("#event-dialog"),
+                title: "Event",
+                readonly: ["name", "value"],
+                actions: ["close"]
+            });
+
+        } else if (self.table.mode == "edit" && value != "mandatory") {
+            // Optional events are editable in edit mode.
+            dialog = new Dialog({
+                el: self.table.parent.$("#event-dialog"),
+                title: "Edit Event",
+                readonly: ["name"],
+                actions: ["cancel", "save"]
+            });
+
+            dialog.handler("save", function() {
+
+                // save changes
+                dialog.save();
+                _.extend(self.entry, dialog.entry);
+
+                // redraw table
+                self.table.render();
+                dialog.close();
+            });
         }
 
-        // optional events are editable in edit mode
-        AuditTableItem.__super__.open.call(self, td);
+        dialog.entry = _.clone(self.entry);
+
+        dialog.open();
     }
 });
 
@@ -112,6 +146,9 @@ var AuditPage = EntryPage.extend({
         self.disableLink = $("a[name='disable']", self.menu);
 
         self.enableLink.click(function(e) {
+
+            e.preventDefault();
+
             var message = "Are you sure you want to enable this entry?";
             if (!confirm(message)) return;
             self.model.enable({
@@ -130,6 +167,9 @@ var AuditPage = EntryPage.extend({
         });
 
         self.disableLink.click(function(e) {
+
+            e.preventDefault();
+
             var message = "Are you sure you want to disable this entry?";
             if (!confirm(message)) return;
             self.model.disable({
@@ -147,31 +187,14 @@ var AuditPage = EntryPage.extend({
             });
         });
 
-        var eventDialog = self.$("#event-dialog");
-
-        var eventEditDialog = new Dialog({
-            el: eventDialog,
-            title: "Edit Event",
-            readonly: ["name"],
-            actions: ["cancel", "save"]
-        });
-
-        var eventViewDialog = new Dialog({
-            el: eventDialog,
-            title: "Event",
-            readonly: ["name", "value"],
-            actions: ["close"]
-        });
-
         self.eventsTable = new Table({
             el: self.$("table[name='events']"),
             columnMappings: {
                 id: "name"
             },
-            editDialog: eventEditDialog,
-            viewDialog: eventViewDialog,
             pageSize: 10,
-            tableItem: AuditTableItem
+            tableItem: AuditTableItem,
+            parent: self
         });
     },
     renderContent: function() {
@@ -183,6 +206,7 @@ var AuditPage = EntryPage.extend({
         if (status == "Disabled") {
             self.enableLink.show();
             self.disableLink.hide();
+
         } else if (status == "Enabled") {
             self.enableLink.hide();
             self.disableLink.show();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index 1996acb42..f91cf6bfe 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -86,32 +86,11 @@ var AuthenticatorsTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         AuthenticatorsTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item) {
-        var self = this;
-
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "authenticator.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     },
     add: function() {
         var self = this;
 
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "authenticator.html",
-            model: new AuthenticatorModel(),
-            mode: "add",
-            editable: ["authenticatorID"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-authenticator";
     }
 });
 
@@ -122,7 +101,7 @@ var AuthenticatorsPage = Page.extend({
         var table = new AuthenticatorsTable({
             el: $("table[name='authenticators']"),
             collection: new AuthenticatorCollection(),
-            parentPage: self
+            parent: self
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index 6754b3b53..016b56ee0 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -76,15 +76,6 @@ var CertificatePage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         CertificatePage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            CertificatePage.__super__.close.call(self);
-        }
     }
 });
 
@@ -92,18 +83,6 @@ var CertificatesTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         CertificatesTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item, column) {
-        var self = this;
-
-        var page = new CertificatePage({
-            el: self.parentPage.$el,
-            url: "cert.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     }
 });
 
@@ -113,8 +92,7 @@ var CertificatesPage = Page.extend({
 
         var table = new CertificatesTable({
             el: $("table[name='certificates']"),
-            collection: new CertificateCollection(),
-            parentPage: self
+            collection: new CertificateCollection()
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/config.js b/base/tps-tomcat/shared/webapps/tps/js/config.js
index cbbd0affb..5b651a09d 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/config.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/config.js
@@ -40,7 +40,7 @@ var ConfigModel = Model.extend({
     }
 });
 
-var ConfigPage = EntryWithPropertiesPage.extend({
+var ConfigPage = ConfigEntryPage.extend({
     initialize: function(options) {
         var self = this;
         options.model = new ConfigModel();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 771d8f50f..020b9e57b 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -86,32 +86,11 @@ var ConnectionsTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         ConnectionsTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item) {
-        var self = this;
-
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "connection.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     },
     add: function() {
         var self = this;
 
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "connection.html",
-            model: new ConnectionModel(),
-            mode: "add",
-            editable: ["connectionID"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-connection";
     }
 });
 
@@ -122,7 +101,7 @@ var ConnectionsPage = Page.extend({
         var table = new ConnectionsTable({
             el: $("table[name='connections']"),
             collection: new ConnectionCollection(),
-            parentPage: self
+            parent: self
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index 81812b370..71f1e25e8 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -59,15 +59,6 @@ var GroupPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         GroupPage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            GroupPage.__super__.close.call(self);
-        }
     }
 });
 
@@ -75,33 +66,11 @@ var GroupsTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         GroupsTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item, column) {
-        var self = this;
-
-        var page = new GroupPage({
-            el: self.parentPage.$el,
-            url: "group.html",
-            model: self.collection.get(item.entry.id),
-            editable: ["description"]
-        });
-
-        page.open();
     },
     add: function() {
         var self = this;
 
-        var page = new GroupPage({
-            el: self.parentPage.$el,
-            url: "group.html",
-            model: new GroupModel(),
-            mode: "add",
-            editable: ["groupID", "description"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-group";
     }
 });
 
@@ -111,8 +80,7 @@ var GroupsPage = Page.extend({
 
         var table = new GroupsTable({
             el: $("table[name='groups']"),
-            collection: new GroupCollection(),
-            parentPage: self
+            collection: new GroupCollection()
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js b/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js
index 26cafdedb..54c042562 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js
@@ -86,32 +86,11 @@ var ProfileMappingsTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         ProfileMappingsTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item) {
-        var self = this;
-
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "profile-mapping.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     },
     add: function() {
         var self = this;
 
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "profile-mapping.html",
-            model: new ProfileMappingModel(),
-            mode: "add",
-            editable: ["profileMappingID"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-profile-mapping";
     }
 });
 
@@ -122,7 +101,7 @@ var ProfileMappingsPage = Page.extend({
         var table = new ProfileMappingsTable({
             el: $("table[name='profile-mappings']"),
             collection: new ProfileMappingCollection(),
-            parentPage: self
+            parent: self
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 17aa26104..0454686a9 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -86,32 +86,11 @@ var ProfilesTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         ProfilesTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item, column) {
-        var self = this;
-
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "profile.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     },
     add: function() {
         var self = this;
 
-        var page = new EntryWithPropertiesPage({
-            el: self.parentPage.$el,
-            url: "profile.html",
-            model: new ProfileModel(),
-            mode: "add",
-            editable: ["profileID"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-profile";
     }
 });
 
@@ -122,7 +101,7 @@ var ProfilesPage = Page.extend({
         var table = new ProfilesTable({
             el: $("table[name='profiles']"),
             collection: new ProfileCollection(),
-            parentPage: self
+            parent: self
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index df8204e71..d28907817 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -64,15 +64,6 @@ var SelfTestPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         SelfTestPage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            GroupPage.__super__.close.call(self);
-        }
     }
 });
 
@@ -80,18 +71,6 @@ var SelfTestsTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         SelfTestsTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item, column) {
-        var self = this;
-
-        var page = new SelfTestPage({
-            el: self.parentPage.$el,
-            url: "selftest.html",
-            model: self.collection.get(item.entry.id)
-        });
-
-        page.open();
     }
 });
 
@@ -101,8 +80,7 @@ var SelfTestsPage = Page.extend({
 
         var table = new SelfTestsTable({
             el: $("table[name='selftests']"),
-            collection: new SelfTestCollection(),
-            parentPage: self
+            collection: new SelfTestCollection()
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index c3b1f21c6..085003a1e 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -101,7 +101,6 @@ var TokenPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         TokenPage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
     },
     setup: function() {
         var self = this;
@@ -112,6 +111,8 @@ var TokenPage = EntryPage.extend({
 
         self.changeStatusLink.click(function(e) {
 
+            e.preventDefault();
+
             var dialog = new Dialog({
                 el: $("#token-status-dialog"),
                 title: "Change Token Status",
@@ -160,40 +161,31 @@ var TokenPage = EntryPage.extend({
         } else {
             self.changeStatusLink.show();
         }
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            TokenPage.__super__.close.call(self);
-        }
     }
 });
 
-var TokensTable = ModelTable.extend({
+var TokenTableItem = TableItem.extend({
     initialize: function(options) {
         var self = this;
-        TokensTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
+        TokenTableItem.__super__.initialize.call(self, options);
     },
-    open: function(item, column) {
+    renderColumn: function(td, templateTD) {
         var self = this;
 
-        var model = self.collection.get(item.entry.id);
+        TokenTableItem.__super__.renderColumn.call(self, td, templateTD);
 
-        if (column == "id") {
-            var page = new TokenPage({
-                el: self.parentPage.$el,
-                url: "token.html",
-                model: model,
-                editable: ["userID", "type", "appletID", "keyInfo"]
+        var name = td.attr("name");
+        if (name == "status") {
+            $("a", td).click(function(e) {
+                e.preventDefault();
+                self.editStatus();
             });
-
-            page.open();
-
-            return;
         }
+    },
+    editStatus: function() {
+        var self = this;
+
+        var model = self.table.collection.get(self.entry.id);
 
         var dialog = new Dialog({
             el: $("#token-status-dialog"),
@@ -216,7 +208,7 @@ var TokensTable = ModelTable.extend({
                 model.changeStatus({
                     status: dialog.entry.status,
                     success: function(data, textStatus, jqXHR) {
-                        self.render();
+                        self.table.render();
                     },
                     error: function(jqXHR, textStatus, errorThrow) {
                         new ErrorDialog({
@@ -232,20 +224,19 @@ var TokensTable = ModelTable.extend({
         });
 
         dialog.open();
+    }
+});
+
+var TokensTable = ModelTable.extend({
+    initialize: function(options) {
+        var self = this;
+        options.tableItem = TokenTableItem;
+        TokensTable.__super__.initialize.call(self, options);
     },
     add: function() {
         var self = this;
 
-        var page = new TokenPage({
-            el: self.parentPage.$el,
-            url: "token.html",
-            model: new TokenModel(),
-            mode: "add",
-            editable: ["tokenID", "userID", "type", "appletID", "keyInfo"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-token";
     }
 });
 
@@ -255,8 +246,7 @@ var TokensPage = Page.extend({
 
         var table = new TokensTable({
             el: $("table[name='tokens']"),
-            collection: new TokenCollection(),
-            parentPage: self
+            collection: new TokenCollection()
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/tps.js b/base/tps-tomcat/shared/webapps/tps/js/tps.js
index bd18538a4..476533759 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/tps.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/tps.js
@@ -34,16 +34,54 @@ var PropertiesTableItem = TableItem.extend({
 
         return PropertiesTableItem.__super__.get.call(self, name);
     },
-    open: function(td) {
+    renderColumn: function(td, templateTD) {
         var self = this;
 
-        // in view mode all properties are read-only
+        PropertiesTableItem.__super__.renderColumn.call(self, td, templateTD);
+
+        $("a", td).click(function(e) {
+            e.preventDefault();
+            self.open();
+        });
+    },
+    open: function() {
+        var self = this;
+
+        var dialog;
+
         if (self.table.mode == "view") {
-            return;
+            // In view mode all properties are read-only.
+            dialog = new Dialog({
+                el: self.table.parent.$("#property-dialog"),
+                title: "Property",
+                readonly: ["name", "value"],
+                actions: ["close"]
+            });
+
+        } else {
+            // In edit mode all properties are editable.
+            dialog = new Dialog({
+                el: self.table.parent.$("#property-dialog"),
+                title: "Edit Property",
+                readonly: ["name"],
+                actions: ["cancel", "save"]
+            });
+
+            dialog.handler("save", function() {
+
+                // save changes
+                dialog.save();
+                _.extend(self.entry, dialog.entry);
+
+                // redraw table
+                self.table.render();
+                dialog.close();
+            });
         }
 
-        // in edit mode all properties are editable
-        PropertiesTableItem.__super__.open.call(self, td);
+        dialog.entry = _.clone(self.entry);
+
+        dialog.open();
     }
 });
 
@@ -76,23 +114,25 @@ var PropertiesTable = Table.extend({
     }
 });
 
-var EntryWithPropertiesPage = EntryPage.extend({
+var ConfigEntryPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
-        EntryWithPropertiesPage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
+        ConfigEntryPage.__super__.initialize.call(self, options);
         self.tableItem = options.tableItem || PropertiesTableItem;
         self.tableSize = options.tableSize || 10;
     },
     setup: function() {
         var self = this;
 
-        EntryWithPropertiesPage.__super__.setup.call(self);
+        ConfigEntryPage.__super__.setup.call(self);
 
         self.enableLink = $("a[name='enable']", self.menu);
         self.disableLink = $("a[name='disable']", self.menu);
 
         self.enableLink.click(function(e) {
+
+            e.preventDefault();
+
             var message = "Are you sure you want to enable this entry?";
             if (!confirm(message)) return;
             self.model.enable({
@@ -111,6 +151,9 @@ var EntryWithPropertiesPage = EntryPage.extend({
         });
 
         self.disableLink.click(function(e) {
+
+            e.preventDefault();
+
             var message = "Are you sure you want to disable this entry?";
             if (!confirm(message)) return;
             self.model.disable({
@@ -136,20 +179,6 @@ var EntryWithPropertiesPage = EntryPage.extend({
             actions: ["cancel", "add"]
         });
 
-        var editDialog = new Dialog({
-            el: dialog,
-            title: "Edit Property",
-            readonly: ["name"],
-            actions: ["cancel", "save"]
-        });
-
-        var viewDialog = new Dialog({
-            el: dialog,
-            title: "Property",
-            readonly: ["name", "value"],
-            actions: ["close"]
-        });
-
         var table = self.$("table[name='properties']");
         self.addButton = $("button[name='add']", table);
         self.removeButton = $("button[name='remove']", table);
@@ -157,8 +186,6 @@ var EntryWithPropertiesPage = EntryPage.extend({
         self.propertiesTable = new PropertiesTable({
             el: table,
             addDialog: addDialog,
-            editDialog: editDialog,
-            viewDialog: viewDialog,
             tableItem: self.tableItem,
             pageSize: self.tableSize,
             parent: self
@@ -167,12 +194,13 @@ var EntryWithPropertiesPage = EntryPage.extend({
     renderContent: function() {
         var self = this;
 
-        EntryWithPropertiesPage.__super__.renderContent.call(self);
+        ConfigEntryPage.__super__.renderContent.call(self);
 
         var status = self.entry.status;
         if (status == "Disabled") {
             self.enableLink.show();
             self.disableLink.hide();
+
         } else if (status == "Enabled") {
             self.enableLink.hide();
             self.disableLink.show();
@@ -196,16 +224,8 @@ var EntryWithPropertiesPage = EntryPage.extend({
     saveFields: function() {
         var self = this;
 
-        EntryWithPropertiesPage.__super__.saveFields.call(self);
+        ConfigEntryPage.__super__.saveFields.call(self);
 
         self.entry.properties = self.propertiesTable.entries;
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            EntryWithPropertiesPage.__super__.close.call(self);
-        }
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index 310a49b71..3a29f1dd1 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -90,7 +90,6 @@ var UserPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         UserPage.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
     },
     loadField: function(input) {
         var self = this;
@@ -122,14 +121,6 @@ var UserPage = EntryPage.extend({
             self.entry.attributes = attributes;
         }
         attributes.tpsProfiles = input.val();
-    },
-    close: function() {
-        var self = this;
-        if (self.parentPage) {
-            self.parentPage.open();
-        } else {
-            UserPage.__super__.close.call(self);
-        }
     }
 });
 
@@ -137,33 +128,11 @@ var UsersTable = ModelTable.extend({
     initialize: function(options) {
         var self = this;
         UsersTable.__super__.initialize.call(self, options);
-        self.parentPage = options.parentPage;
-    },
-    open: function(item, column) {
-        var self = this;
-
-        var page = new UserPage({
-            el: self.parentPage.$el,
-            url: "user.html",
-            model: self.collection.get(item.entry.id),
-            editable: ["fullName", "email", "tpsProfiles"]
-        });
-
-        page.open();
     },
     add: function() {
         var self = this;
 
-        var page = new UserPage({
-            el: self.parentPage.$el,
-            url: "user.html",
-            model: new UserModel(),
-            mode: "add",
-            editable: ["userID", "fullName", "email", "tpsProfiles"],
-            parentPage: self.parentPage
-        });
-
-        page.open();
+        window.location.hash = "#new-user";
     }
 });
 
@@ -173,8 +142,7 @@ var UsersPage = Page.extend({
 
         var table = new UsersTable({
             el: $("table[name='users']"),
-            collection: new UserCollection(),
-            parentPage: self
+            collection: new UserCollection()
         });
 
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activities.html b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
index 51cc3b105..0762401fd 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Activities</strong></li>
+</ol>
+
 <span class="pki-title">Activities</span>
 </div>
 
@@ -44,7 +49,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="activity_select" type="checkbox"><label for="activity_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/activities/${id}">${id}</a></td>
+        <td name="id"><a href="#activities/${id}">${id}</a></td>
         <td name="tokenID">${tokenID}</td>
         <td name="userID">${userID}</td>
         <td name="ip">${ip}</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activity.html b/base/tps-tomcat/shared/webapps/tps/ui/activity.html
index 5845d0458..262e00c08 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activity.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activity.html
@@ -16,7 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
-<span class="pki-title">Activity <span name="id"></span></span>
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#activities">Activity</a></li>
+    <li class="active"><strong><span name="title">Activity ${id}</span></strong></li>
+</ol>
+
+<span name="title" class="pki-title">Activity ${id}</span>
 </div>
 
 <div name="activity" class="pki-fields">
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/audit.html b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
index 08c5b49d2..3e5662e16 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/audit.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
@@ -16,6 +16,10 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Audit Logging</strong></li>
+</ol>
 
 <span class="pki-title">Audit Logging</span>
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
index 02a97c233..866dab10c 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#authenticators">Authentication Sources</a></li>
+    <li class="active"><strong><span name="title">Authentication Source ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Authentication Source <span name="id"></span></span>
+<span name="title" class="pki-title">Authentication Source ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
index 02b6042e7..f9b0b0a28 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
@@ -16,6 +16,10 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Authentication Sources</strong></li>
+</ol>
 <span class="pki-title">Authentication Sources</span>
 </div>
 
@@ -41,7 +45,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="authenticator_select" type="checkbox"><label for="authenticator_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/authenticators/${id}">${id}</a></td>
+        <td name="id"><a href="#authenticators/${id}">${id}</a></td>
         <td name="status">${status}</td>
     </tr>
 </tbody>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/cert.html b/base/tps-tomcat/shared/webapps/tps/ui/cert.html
index e750527b1..456f23355 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/cert.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/cert.html
@@ -16,7 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
-<span class="pki-title">Certificate <span name="id"></span></span>
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#certs">Certificates</a></li>
+    <li class="active"><strong><span name="title">Certificate ${id}</span></strong></li>
+</ol>
+
+<span name="title" class="pki-title">Certificate ${id}</span>
 </div>
 
 <div name="certificate" class="pki-fields">
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/certs.html b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
index f4b052009..a87c2dd32 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Certificates</strong></li>
+</ol>
+
 <span class="pki-title">Certificates</span>
 </div>
 
@@ -46,7 +51,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="cert_select" type="checkbox"><label for="cert_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/certs/${id}">${id}</a></td>
+        <td name="id"><a href="#certs/${id}">${id}</a></td>
         <td name="serialNumber">${serialNumber}</td>
         <td name="subject">${subject}</td>
         <td name="tokenID">${tokenID}</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/config.html b/base/tps-tomcat/shared/webapps/tps/ui/config.html
index 79f16dd20..3d838bd6f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/config.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/config.html
@@ -16,8 +16,12 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>General Configuration</strong></li>
+</ol>
 
-<span class="pki-title">General</span></span>
+<span class="pki-title">General Configuration</span></span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connection.html b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
index 293488396..68a759e95 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connection.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#connections">Subsystem Connections</a></li>
+    <li class="active"><strong><span name="title">Subsystem Connection ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Subsystem Connection <span name="id"></span></span>
+<span name="title" class="pki-title">Subsystem Connection ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connections.html b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
index 170fcab31..d700e1f3c 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Subsystem Connections</strong></li>
+</ol>
+
 <span class="pki-title">Subsystem Connections</span>
 </div>
 
@@ -41,7 +46,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="connection_select" type="checkbox"><label for="connection_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/connections/${id}">${id}</a></td>
+        <td name="id"><a href="#connections/${id}">${id}</a></td>
         <td name="status">${status}</td>
     </tr>
 </tbody>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/group.html b/base/tps-tomcat/shared/webapps/tps/ui/group.html
index a33969185..9e612c2c6 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/group.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/group.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#groups">Groups</a></li>
+    <li class="active"><strong><span name="title">Group ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Group <span name="id"></span></span>
+<span name="title" class="pki-title">Group ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/groups.html b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
index 34dacbc9b..9f4239db8 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Groups</strong></li>
+</ol>
+
 <span class="pki-title">Groups</span>
 </div>
 
@@ -41,7 +46,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="group_select" type="checkbox"><label for="group_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/groups/${id}">${id}</a></td>
+        <td name="id"><a href="#groups/${id}">${id}</a></td>
         <td name="description">${description}</td>
     </tr>
 </tbody>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/home.html b/base/tps-tomcat/shared/webapps/tps/ui/home.html
new file mode 100644
index 000000000..89fb26061
--- /dev/null
+++ b/base/tps-tomcat/shared/webapps/tps/ui/home.html
@@ -0,0 +1,58 @@
+<!-- --- BEGIN COPYRIGHT BLOCK ---
+     This program is free software; you can redistribute it and/or modify
+     it under the terms of the GNU General Public License as published by
+     the Free Software Foundation; version 2 of the License.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License along
+     with this program; if not, write to the Free Software Foundation, Inc.,
+     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+     Copyright (C) 2014 Red Hat, Inc.
+     All rights reserved.
+     --- END COPYRIGHT BLOCK --- -->
+<div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+</ol>
+
+<span name="title" class="pki-title">Token Processing Service</span>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Token Management</h3>
+    </div>
+    <div class="panel-body">
+        <a href="#tokens">Tokens</a><br>
+        <a href="#certs">Certificates</a><br>
+        <a href="#activities">Activities</a><br>
+    </div>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Account Management</h3>
+    </div>
+    <div class="panel-body">
+        <a href="#users">Users</a><br>
+        <a href="#groups">Groups</a><br>
+    </div>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">System Management</h3>
+    </div>
+    <div class="panel-body">
+        <a href="#config">General Configuration</a><br>
+        <a href="#authenticators">Authentication Sources</a><br>
+        <a href="#connections">Subsystem Connections</a><br>
+        <a href="#audit">Audit Logging</a><br>
+        <a href="#selftests">Self Tests</a><br>
+    </div>
+</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/index.html b/base/tps-tomcat/shared/webapps/tps/ui/index.html
index a0a265a21..77145dfb0 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/index.html
@@ -41,87 +41,283 @@
     <script src="/tps/js/user.js"></script>
     <script>
 $(function() {
-    var account = new Account();
-
-    var navigation = new Navigation({
-        el: $("#navigation"),
-        logout: function() {
-            account.logout({
-                success: function() {
-                    if (window.crypto) window.crypto.logout();
-                    window.location.href = "/tps";
-                },
-                error: function() {
-                    alert("Logout failed");
-                }
-            });
-        },
-        homePage: "tokens"
-    });
 
     var content = $("#content");
 
-    navigation.page("activities", new ActivitiesPage({
-        el: content,
-        url: "activities.html"
-    }));
-
-    navigation.page("audit", new AuditPage({
-        el: content,
-        url: "audit.html"
-    }));
-
-    navigation.page("authenticators", new AuthenticatorsPage({
-        el: content,
-        url: "authenticators.html"
-    }));
-
-    navigation.page("certs", new CertificatesPage({
-        el: content,
-        url: "certs.html"
-    }));
-
-    navigation.page("config", new ConfigPage({
-        el: content,
-        url: "config.html"
-    }));
-
-    navigation.page("connections", new ConnectionsPage({
-        el: content,
-        url: "connections.html"
-    }));
-
-    navigation.page("groups", new GroupsPage({
-        el: content,
-        url: "groups.html"
-    }));
-
-    navigation.page("profiles", new ProfilesPage({
-        el: content,
-        url: "profiles.html"
-    }));
-
-    navigation.page("profileMappings", new ProfileMappingsPage({
-        el: content,
-        url: "profile-mappings.html"
-    }));
-
-    navigation.page("selftests", new SelfTestsPage({
-        el: content,
-        url: "selftests.html"
-    }));
-
-    navigation.page("tokens", new TokensPage({
-        el: content,
-        url: "tokens.html"
-    }));
-
-    navigation.page("users", new UsersPage({
-        el: content,
-        url: "users.html"
-    }));
-
-    navigation.render();
+    var router = new Backbone.Router();
+
+    router.route("", "home", function() {
+        new Page({
+            el: content,
+            url: "home.html"
+        }).open();
+    });
+
+    router.route("activities", "activities", function() {
+        new ActivitiesPage({
+            el: content,
+            url: "activities.html"
+        }).open();
+    });
+
+    router.route("activities/:id", "activity", function(id) {
+        new ActivityPage({
+            el: content,
+            url: "activity.html",
+            model: new ActivityModel({ id: id })
+        }).open();
+    });
+
+    router.route("audit", "audit", function() {
+        new AuditPage({
+            el: content,
+            url: "audit.html"
+        }).open();
+    });
+
+    router.route("authenticators", "authenticators", function() {
+        new AuthenticatorsPage({
+            el: content,
+            url: "authenticators.html"
+        }).open();
+    });
+
+    router.route("authenticators/:id", "authenticator", function(id) {
+        new ConfigEntryPage({
+            el: content,
+            url: "authenticator.html",
+            model: new AuthenticatorModel({ id: id })
+        }).open();
+    });
+
+    router.route("new-authenticator", "new-authenticator", function() {
+        new ConfigEntryPage({
+            el: content,
+            url: "authenticator.html",
+            model: new AuthenticatorModel(),
+            mode: "add",
+            title: "New Authenticator",
+            editable: ["authenticatorID"],
+            parentHash: "#authenticators"
+        }).open();
+    });
+
+    router.route("certs", "certs", function() {
+        new CertificatesPage({
+            el: content,
+            url: "certs.html"
+        }).open();
+    });
+
+    router.route("certs/:id", "cert", function(id) {
+        new CertificatePage({
+            el: content,
+            url: "cert.html",
+            model: new CertificateModel({ id: id })
+        }).open();
+    });
+
+    router.route("config", "config", function() {
+        new ConfigPage({
+            el: content,
+            url: "config.html"
+        }).open();
+    });
+
+    router.route("connections", "connections", function() {
+        new ConnectionsPage({
+            el: content,
+            url: "connections.html"
+        }).open();
+    });
+
+    router.route("connections/:id", "connection", function(id) {
+        new ConfigEntryPage({
+            el: content,
+            url: "connection.html",
+            model: new ConnectionModel({ id: id })
+        }).open();
+    });
+
+    router.route("new-connection", "new-connection", function() {
+        new ConfigEntryPage({
+            el: content,
+            url: "connection.html",
+            model: new ConnectionModel(),
+            mode: "add",
+            title: "New Connection",
+            editable: ["connectionID"],
+            parentHash: "#connections"
+        }).open();
+    });
+
+    router.route("groups", "groups", function() {
+        new GroupsPage({
+            el: content,
+            url: "groups.html"
+        }).open();
+    });
+
+    router.route("groups/:id", "group", function(id) {
+        new GroupPage({
+            el: content,
+            url: "group.html",
+            model: new GroupModel({ id: id }),
+            editable: ["description"]
+        }).open();
+    });
+
+    router.route("new-group", "new-group", function() {
+        new GroupPage({
+            el: content,
+            url: "group.html",
+            model: new GroupModel(),
+            mode: "add",
+            title: "New Group",
+            editable: ["groupID", "description"],
+            parentHash: "#groups"
+        }).open();
+    });
+
+    router.route("profiles", "profiles", function() {
+        new ProfilesPage({
+            el: content,
+            url: "profiles.html"
+        }).open();
+    });
+
+    router.route("profiles/:id", "profile", function(id) {
+        new ConfigEntryPage({
+            el: content,
+            url: "profile.html",
+            model: new ProfileModel({ id: id })
+        }).open();
+    });
+
+    router.route("new-profile", "new-profile", function() {
+        new ConfigEntryPage({
+            el: content,
+            url: "profile.html",
+            model: new ProfileModel(),
+            mode: "add",
+            title: "New Profile",
+            editable: ["profileID"],
+            parentHash: "#profiles"
+        }).open();
+    });
+
+    router.route("profile-mappings", "profile-mappings", function() {
+        new ProfileMappingsPage({
+            el: content,
+            url: "profile-mappings.html"
+        }).open();
+    });
+
+    router.route("profile-mappings/:id", "profile-mapping", function(id) {
+        new ConfigEntryPage({
+            el: content,
+            url: "profile-mapping.html",
+            model: new ProfileMappingModel({ id: id }),
+        }).open();
+    });
+
+    router.route("new-profile-mapping", "new-profile-mapping", function() {
+        new ConfigEntryPage({
+            el: content,
+            url: "profile-mapping.html",
+            model: new ProfileMappingModel(),
+            mode: "add",
+            title: "New Profile Mapping",
+            editable: ["profileMappingID"],
+            parentHash: "#profile-mappings"
+        }).open();
+    });
+
+    router.route("selftests", "selftests", function() {
+        new SelfTestsPage({
+            el: content,
+            url: "selftests.html"
+        }).open();
+    });
+
+    router.route("selftests/:id", "selftest", function(id) {
+        new SelfTestPage({
+            el: content,
+            url: "selftest.html",
+            model: new SelfTestModel({ id: id })
+        }).open();
+    });
+
+    router.route("tokens", "tokens", function() {
+        new TokensPage({
+            el: content,
+            url: "tokens.html"
+        }).open();
+    });
+
+    router.route("tokens/:id", "token", function(id) {
+        new TokenPage({
+            el: content,
+            url: "token.html",
+            model: new TokenModel({ id: id }),
+            editable: ["userID", "type", "appletID", "keyInfo"]
+        }).open();
+    });
+
+    router.route("new-token", "new-token", function() {
+        new TokenPage({
+            el: content,
+            url: "token.html",
+            model: new TokenModel(),
+            mode: "add",
+            title: "New Token",
+            editable: ["tokenID", "userID", "type", "appletID", "keyInfo"],
+            parentHash: "#tokens"
+        }).open();
+    });
+
+    router.route("users", "users", function() {
+        new UsersPage({
+            el: content,
+            url: "users.html"
+        }).open();
+    });
+
+    router.route("users/:id", "user", function(id) {
+        new UserPage({
+            el: content,
+            url: "user.html",
+            model: new UserModel({ id: id }),
+            editable: ["fullName", "email", "tpsProfiles"]
+        }).open();
+    });
+
+    router.route("new-user", "new-user", function() {
+        new UserPage({
+            el: content,
+            url: "user.html",
+            model: new UserModel(),
+            mode: "add",
+            title: "New User",
+            editable: ["userID", "fullName", "email", "tpsProfiles"],
+            parentHash: "#users"
+        }).open();
+    });
+
+    router.route("logout", "logout", function() {
+        var account = new Account();
+        account.logout({
+            success: function() {
+                if (window.crypto) window.crypto.logout();
+                window.location.href = "/tps";
+            },
+            error: function() {
+                alert("Logout failed");
+            }
+        });
+    });
+
+    Backbone.history.start();
 });
     </script>
 </head>
@@ -153,10 +349,10 @@ $(function() {
     </li>
     </ul>
     <ul class="nav navbar-nav navbar-primary">
+    <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
     <li><a href="#tokens">Tokens</a></li>
     <li><a href="#certs">Certificates</a></li>
     <li><a href="#activities">Activities</a></li>
-    <li><a href="#selftests">SelfTests</a></li>
     <li class="dropdown context">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">
         Accounts
@@ -169,16 +365,17 @@ $(function() {
     </li>
     <li class="dropdown context">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-        Configuration
+        System
         <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
-        <li><a href="#config">General</a></li>
+        <li><a href="#config">General Configuration</a></li>
         <li><a href="#authenticators">Authentication Sources</a></li>
         <li><a href="#connections">Subsystem Connections</a></li>
         <li><a href="#profiles">Profiles</a></li>
-        <li><a href="#profileMappings">Profile Mappings</a></li>
+        <li><a href="#profile-mappings">Profile Mappings</a></li>
         <li><a href="#audit">Audit Logging</a></li>
+        <li><a href="#selftests">Self Tests</a></li>
       </ul>
     </li>
     </ul>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
index 15066b052..9f0a214e0 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#profile-mappings">Profile Mappings</a></li>
+    <li class="active"><strong><span name="title">Profile Mapping ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Profile Mapping <span name="id"></span></span>
+<span name="title" class="pki-title">Profile Mapping ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile-mappings.html b/base/tps-tomcat/shared/webapps/tps/ui/profile-mappings.html
index fe651f218..dc797bc18 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile-mappings.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile-mappings.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Profile Mappings</strong></li>
+</ol>
+
 <span class="pki-title">Profile Mappings</span>
 </div>
 
@@ -41,7 +46,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="profile_mapping_select" type="checkbox"><label for="profile_mapping_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/profile-mappings/${id}">${id}</a></td>
+        <td name="id"><a href="#profile-mappings/${id}">${id}</a></td>
         <td name="status">${status}</td>
     </tr>
 </tbody>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile.html b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
index 52c4284f7..e41444c9d 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#profiles">Profiles</a></li>
+    <li class="active"><strong><span name="title">Profile ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Profile <span name="id"></span></span>
+<span name="title" class="pki-title">Profile ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
index 2bcc3e04c..00218e5f7 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Profiles</strong></li>
+</ol>
+
 <span class="pki-title">Profiles</span>
 </div>
 
@@ -41,7 +46,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="profile_select" type="checkbox"><label for="profile_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/profiles/${id}">${id}</a></td>
+        <td name="id"><a href="#profiles/${id}">${id}</a></td>
         <td name="status">${status}</td>
     </tr>
 </tbody>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftest.html b/base/tps-tomcat/shared/webapps/tps/ui/selftest.html
index d61f056aa..8a680355a 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftest.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftest.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#selftests">Self Tests</a></li>
+    <li class="active"><strong><span name="title">Self Test ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Self Test <span name="id"></span></span>
+<span name="title" class="pki-title">Self Test ${id}</span>
 
 </div>
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
index 60796ca60..2b428e2d2 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Self Tests</strong></li>
+</ol>
+
 <span class="pki-title">Self Tests</span>
 </div>
 
@@ -42,7 +47,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="selftest_select" type="checkbox"><label for="selftest_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/selftest/${id}">${id}</a></td>
+        <td name="id"><a href="#selftests/${id}">${id}</a></td>
         <td name="enabledAtStartup">${enabledAtStartup}</td>
         <td name="criticalAtStartup">${criticalAtStartup}</td>
         <td name="enabledOnDemand">${enabledOnDemand}</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/token.html b/base/tps-tomcat/shared/webapps/tps/ui/token.html
index 6f869a631..247300af4 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/token.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/token.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#tokens">Tokens</a></li>
+    <li class="active"><strong><span name="title">Token ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">Token <span name="id"></span></span>
+<span name="title" class="pki-title">Token ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index 803b39196..e5f52105f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Tokens</strong></li>
+</ol>
+
 <span class="pki-title">Tokens</span>
 </div>
 
@@ -47,10 +52,10 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="token_select" type="checkbox"><label for="token_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/tokens/${id}">${id}</a></td>
+        <td name="id"><a href="#tokens/${id}">${id}</a></td>
         <td name="userID">${userID}</td>
         <td name="type">${type}</td>
-        <td name="status"><a href="/tps/ui/tokens/${id}/status">${statusLabel}</a></td>
+        <td name="status"><a href="#tokens/${id}/status">${statusLabel}</a></td>
         <td name="appletID">${appletID}</td>
         <td name="keyInfo">${keyInfo}</td>
         <td name="created">${createTimestamp}</td>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/user.html b/base/tps-tomcat/shared/webapps/tps/ui/user.html
index 459f3ee36..8463d0bef 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/user.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/user.html
@@ -16,8 +16,13 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#users">Users</a></li>
+    <li class="active"><strong><span name="title">User ${id}</span></strong></li>
+</ol>
 
-<span class="pki-title">User <span name="id"></span></span>
+<span name="title" class="pki-title">User ${id}</span>
 
 <span class="pki-actions">
 
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/users.html b/base/tps-tomcat/shared/webapps/tps/ui/users.html
index 9c9450a70..18d59c9de 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/users.html
@@ -16,6 +16,11 @@
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
 <div class="pki-header">
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li class="active"><strong>Users</strong></li>
+</ol>
+
 <span class="pki-title">Users</span>
 </div>
 
@@ -41,7 +46,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="user_select" type="checkbox"><label for="user_select">&nbsp;</label></td>
-        <td name="id"><a href="/tps/ui/users/${id}">${id}</a></td>
+        <td name="id"><a href="#users/${id}">${id}</a></td>
         <td name="fullName">${fullName}</td>
     </tr>
 </tbody>