diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 05a89537..c421233e 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -2,12 +2,9 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 
 import {Dashboard} from './dashboard';
+import {Ui} from './ui';
 import {PageTop, Sidebar} from '../theme';
 
-/*
- * App Component
- * Top Level Component
- */
 @Component({
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
@@ -17,20 +14,34 @@ import {PageTop, Sidebar} from '../theme';
 })
 @RouteConfig([
   {
-    path: '/dashboard',
     name: 'Dashboard',
     component: Dashboard,
+    path: '/dashboard',
     useAsDefault: true,
     data: {
       title: 'Dashboard',
-      selected: true,
-      expanded: true,
+      selected: false,
+      expanded: false,
       sidebarMeta: {
         icon: 'ion-android-home',
         order: 0,
       }
     }
   },
+  {
+    name: 'Ui',
+    component: Ui,
+    path: '/ui/...',
+    data: {
+      title: 'UI Features',
+      selected: false,
+      expanded: false,
+      sidebarMeta: {
+        icon: 'ion-android-laptop',
+        order: 200,
+      }
+    }
+  },
 ])
 export class Pages {
 
diff --git a/src/app/pages/ui/components/typography/index.ts b/src/app/pages/ui/components/typography/index.ts
new file mode 100644
index 00000000..8873f4d7
--- /dev/null
+++ b/src/app/pages/ui/components/typography/index.ts
@@ -0,0 +1 @@
+export * from './typography.component';
diff --git a/src/app/pages/ui/components/typography/typography.component.ts b/src/app/pages/ui/components/typography/typography.component.ts
new file mode 100644
index 00000000..6c80005d
--- /dev/null
+++ b/src/app/pages/ui/components/typography/typography.component.ts
@@ -0,0 +1,19 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+@Component({
+  selector: 'typography',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: 'typography'
+})
+export class Typography {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    console.log('typography');
+  }
+
+}
diff --git a/src/app/pages/ui/index.ts b/src/app/pages/ui/index.ts
new file mode 100644
index 00000000..55d230b8
--- /dev/null
+++ b/src/app/pages/ui/index.ts
@@ -0,0 +1 @@
+export * from './ui.component';
diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts
new file mode 100644
index 00000000..8599b37a
--- /dev/null
+++ b/src/app/pages/ui/ui.component.ts
@@ -0,0 +1,37 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+
+import {Typography} from './components/typography';
+
+@Component({
+  selector: 'ui',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'Typography',
+    component: Typography,
+    path: '/typography',
+    useAsDefault: true,
+    data: {
+      title: 'Typography',
+      selected: false,
+      expanded: false,
+      sidebarMeta: {
+        order: 0,
+      }
+    }
+  },
+])
+export class Ui {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}