diff --git a/src/app/pages/alerts/alerts.module.js b/src/app/pages/alerts/alerts.module.js
index 77a0010..9df7bf3 100644
--- a/src/app/pages/alerts/alerts.module.js
+++ b/src/app/pages/alerts/alerts.module.js
@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('alerts', {
+        .state('ui.alerts', {
           url: '/alerts',
-          templateUrl: 'app/pages/alerts/alerts.html'
+          templateUrl: 'app/pages/alerts/alerts.html',
+          title: 'Modals',
+          sidebarMeta: {
+            order: 500,
+          },
         });
   }
 
diff --git a/src/app/pages/buttons/buttons.module.js b/src/app/pages/buttons/buttons.module.js
index dcbd250..dc7098c 100644
--- a/src/app/pages/buttons/buttons.module.js
+++ b/src/app/pages/buttons/buttons.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('buttons', {
+        .state('ui.buttons', {
           url: '/buttons',
           templateUrl: 'app/pages/buttons/buttons.html',
-          controller: 'ButtonPageCtrl'
+          controller: 'ButtonPageCtrl',
+          title: 'Buttons',
+          sidebarMeta: {
+            order: 100,
+          },
         });
   }
 
diff --git a/src/app/pages/charts/amCharts/amCharts.module.js b/src/app/pages/charts/amCharts/amCharts.module.js
index bdf28b9..13600b5 100644
--- a/src/app/pages/charts/amCharts/amCharts.module.js
+++ b/src/app/pages/charts/amCharts/amCharts.module.js
@@ -13,7 +13,11 @@
     $stateProvider
         .state('charts.amCharts', {
           url: '/amCharts',
-          templateUrl: 'app/pages/charts/amCharts/charts.html'
+          templateUrl: 'app/pages/charts/amCharts/charts.html',
+          title: 'amCharts',
+          sidebarMeta: {
+            order: 0,
+          },
         });
   }
 
diff --git a/src/app/pages/charts/chartJs/chartJs.module.js b/src/app/pages/charts/chartJs/chartJs.module.js
index e594703..32c5d34 100644
--- a/src/app/pages/charts/chartJs/chartJs.module.js
+++ b/src/app/pages/charts/chartJs/chartJs.module.js
@@ -13,7 +13,11 @@
     $stateProvider
         .state('charts.chartJs', {
           url: '/chartJs',
-          templateUrl: 'app/pages/charts/chartJs/chartJs.html'
+          templateUrl: 'app/pages/charts/chartJs/chartJs.html',
+          title: 'Chart.js',
+          sidebarMeta: {
+            order: 200,
+          },
         });
   }
 
diff --git a/src/app/pages/charts/chartist/chartist.module.js b/src/app/pages/charts/chartist/chartist.module.js
index ce6f74a..19eba7f 100644
--- a/src/app/pages/charts/chartist/chartist.module.js
+++ b/src/app/pages/charts/chartist/chartist.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-      .state('charts.chartist', {
-        url: '/chartist',
-        templateUrl: 'app/pages/charts/chartist/chartist.html'
-      });
+        .state('charts.chartist', {
+          url: '/chartist',
+          templateUrl: 'app/pages/charts/chartist/chartist.html',
+          title: 'Chartist',
+          sidebarMeta: {
+            order: 100,
+          },
+        });
   }
 
 })();
\ No newline at end of file
diff --git a/src/app/pages/charts/charts.module.js b/src/app/pages/charts/charts.module.js
index 800c7ad..f81eb59 100644
--- a/src/app/pages/charts/charts.module.js
+++ b/src/app/pages/charts/charts.module.js
@@ -19,7 +19,12 @@
         .state('charts', {
           url: '/charts',
           abstract: true,
-          template: '<div ui-view></div>'
+          template: '<div ui-view></div>',
+          title: 'Charts',
+          sidebarMeta: {
+            icon: 'ion-stats-bars',
+            order: 100,
+          },
         });
   }
 
diff --git a/src/app/pages/charts/morris/morris.module.js b/src/app/pages/charts/morris/morris.module.js
index 7254865..8b178b7 100644
--- a/src/app/pages/charts/morris/morris.module.js
+++ b/src/app/pages/charts/morris/morris.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-      .state('charts.morris', {
-        url: '/morris',
-        templateUrl: 'app/pages/charts/morris/morris.html'
-      });
+        .state('charts.morris', {
+          url: '/morris',
+          templateUrl: 'app/pages/charts/morris/morris.html',
+          title: 'Morris',
+          sidebarMeta: {
+            order: 300,
+          }
+        });
   }
 
 })();
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dashboard.module.js b/src/app/pages/dashboard/dashboard.module.js
index 71ff34c..51eedb2 100644
--- a/src/app/pages/dashboard/dashboard.module.js
+++ b/src/app/pages/dashboard/dashboard.module.js
@@ -13,7 +13,12 @@
     $stateProvider
         .state('dashboard', {
           url: '/dashboard',
-          templateUrl: 'app/pages/dashboard/dashboard.html'
+          templateUrl: 'app/pages/dashboard/dashboard.html',
+          title: 'Dashboard',
+          sidebarMeta: {
+            icon: 'ion-android-home',
+            order: 0,
+          },
         });
   }
 
diff --git a/src/app/pages/form/form.module.js b/src/app/pages/form/form.module.js
index fe236df..99b4468 100644
--- a/src/app/pages/form/form.module.js
+++ b/src/app/pages/form/form.module.js
@@ -11,21 +11,42 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('form-inputs', {
-          url: '/form-inputs',
-          templateUrl: 'app/pages/form/inputs/inputs.html'
+        .state('form', {
+          url: '/form',
+          template : '<ui-view></ui-view>',
+          abstract: true,
+          title: 'Form Elements',
+          sidebarMeta: {
+            icon: 'ion-compose',
+            order: 300,
+          },
         })
-        .state('form-layouts', {
-          url: '/form-layouts',
-          templateUrl: 'app/pages/form/layouts/layouts.html'
+        .state('form.inputs', {
+          url: '/inputs',
+          templateUrl: 'app/pages/form/inputs/inputs.html',
+          title: 'Form Inputs',
+          sidebarMeta: {
+            order: 0,
+          },
         })
-        .state('form-wizard',
+        .state('form.layouts', {
+          url: '/layouts',
+          templateUrl: 'app/pages/form/layouts/layouts.html',
+          title: 'Form Layouts',
+          sidebarMeta: {
+            order: 100,
+          },
+        })
+        .state('form.wizard',
         {
-          url: '/form-wizard',
+          url: '/wizard',
           templateUrl: 'app/pages/form/wizard/wizard.html',
           controller: 'WizardCtrl',
-          controllerAs: 'vm'
-        })
+          controllerAs: 'vm',
+          title: 'Form Wizard',
+          sidebarMeta: {
+            order: 200,
+          },
+        });
   }
-
 })();
diff --git a/src/app/pages/grid/grid.module.js b/src/app/pages/grid/grid.module.js
index 1365b8e..6659856 100644
--- a/src/app/pages/grid/grid.module.js
+++ b/src/app/pages/grid/grid.module.js
@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('grid', {
+        .state('ui.grid', {
           url: '/grid',
-          templateUrl: 'app/pages/grid/grid.html'
+          templateUrl: 'app/pages/grid/grid.html',
+          title: 'Grid',
+          sidebarMeta: {
+            order: 400,
+          },
         });
   }
 
diff --git a/src/app/pages/icons/icons.module.js b/src/app/pages/icons/icons.module.js
index 3d732bb..fb85f90 100644
--- a/src/app/pages/icons/icons.module.js
+++ b/src/app/pages/icons/icons.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('icons', {
+        .state('ui.icons', {
           url: '/icons',
           templateUrl: 'app/pages/icons/icons.html',
-          controller: 'IconsPageCtrl'
+          controller: 'IconsPageCtrl',
+          title: 'Icons',
+          sidebarMeta: {
+            order: 200,
+          },
         });
   }
 
diff --git a/src/app/pages/mail/mail.module.js b/src/app/pages/mail/mail.module.js
index 43aabae..11ba237 100644
--- a/src/app/pages/mail/mail.module.js
+++ b/src/app/pages/mail/mail.module.js
@@ -11,24 +11,29 @@
   /** @ngInject */
   function routeConfig($stateProvider,$urlRouterProvider) {
     $stateProvider
-      .state('mail', {
-        url: '/mail',
-        abstract: true,
-        templateUrl: 'app/pages/mail/mail.html',
-        controller: "MailTabCtrl",
-        controllerAs: "tabCtrl"
-      }).state('mail.label', {
-        url: '/:label',
-        templateUrl: 'app/pages/mail/list/mailList.html',
-        controller: "MailListCtrl",
-        controllerAs: "listCtrl"
-      }).state('mail.detail', {
-        url: '/:label/:id',
-        templateUrl: 'app/pages/mail/detail/mailDetail.html',
-        controller: "MailDetailCtrl",
-        controllerAs: "detailCtrl"
-      });
-      $urlRouterProvider.when('/mail','/mail/inbox');
+        .state('mail', {
+          url: '/mail',
+          abstract: true,
+          templateUrl: 'app/pages/mail/mail.html',
+          controller: "MailTabCtrl",
+          controllerAs: "tabCtrl",
+          title: 'Mail',
+          sidebarMeta: {
+            icon: 'ion-ios-email-outline',
+            order: 500,
+          },
+        }).state('mail.label', {
+          url: '/:label',
+          templateUrl: 'app/pages/mail/list/mailList.html',
+          controller: "MailListCtrl",
+          controllerAs: "listCtrl"
+        }).state('mail.detail', {
+          url: '/:label/:id',
+          templateUrl: 'app/pages/mail/detail/mailDetail.html',
+          controller: "MailDetailCtrl",
+          controllerAs: "detailCtrl"
+        });
+    $urlRouterProvider.when('/mail','/mail/inbox');
   }
 
 })();
diff --git a/src/app/pages/maps/maps.module.js b/src/app/pages/maps/maps.module.js
index 74c37b3..de15488 100644
--- a/src/app/pages/maps/maps.module.js
+++ b/src/app/pages/maps/maps.module.js
@@ -14,27 +14,48 @@
         .state('maps', {
           url: '/maps',
           templateUrl: 'app/pages/maps/maps.html',
-          abstract: true
+          abstract: true,
+          title: 'Maps',
+          sidebarMeta: {
+            icon: 'ion-ios-location-outline',
+            order: 600,
+          },
         })
         .state('maps.gmap', {
           url: '/gmap',
           templateUrl: 'app/pages/maps/google-maps/google-maps.html',
-          controller: 'GmapPageCtrl'
+          controller: 'GmapPageCtrl',
+          title: 'Google Maps',
+          sidebarMeta: {
+            order: 0,
+          },
         })
         .state('maps.leaflet', {
           url: '/leaflet',
           templateUrl: 'app/pages/maps/leaflet/leaflet.html',
-          controller: 'LeafletPageCtrl'
+          controller: 'LeafletPageCtrl',
+          title: 'Leaflet Maps',
+          sidebarMeta: {
+            order: 100,
+          },
         })
         .state('maps.bubble', {
           url: '/bubble',
           templateUrl: 'app/pages/maps/map-bubbles/map-bubbles.html',
-          controller: 'MapBubblePageCtrl'
+          controller: 'MapBubblePageCtrl',
+          title: 'Bubble Maps',
+          sidebarMeta: {
+            order: 200,
+          },
         })
         .state('maps.line', {
           url: '/line',
           templateUrl: 'app/pages/maps/map-lines/map-lines.html',
-          controller: 'MapLinesPageCtrl'
+          controller: 'MapLinesPageCtrl',
+          title: 'Line Maps',
+          sidebarMeta: {
+            order: 300,
+          },
         });
   }
 
diff --git a/src/app/pages/modals/modals.module.js b/src/app/pages/modals/modals.module.js
index 45d53ca..9e1feed 100644
--- a/src/app/pages/modals/modals.module.js
+++ b/src/app/pages/modals/modals.module.js
@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('modals', {
+        .state('ui.modals', {
           url: '/modals',
-          templateUrl: 'app/pages/modals/modals.html'
+          templateUrl: 'app/pages/modals/modals.html',
+          title: 'Modals',
+          sidebarMeta: {
+            order: 300,
+          },
         });
   }
 
diff --git a/src/app/pages/notifications/notifications.module.js b/src/app/pages/notifications/notifications.module.js
index d12b33e..1bf17a7 100644
--- a/src/app/pages/notifications/notifications.module.js
+++ b/src/app/pages/notifications/notifications.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('notifications', {
+        .state('ui.notifications', {
           url: '/notifications',
           templateUrl: 'app/pages/notifications/notifications.html',
-          controller: 'NotificationsPageCtrl'
+          controller: 'NotificationsPageCtrl',
+          title: 'Notifications',
+          sidebarMeta: {
+            order: 700,
+          },
         });
   }
 
diff --git a/src/app/pages/pages.module.js b/src/app/pages/pages.module.js
index 326453b..79fa154 100644
--- a/src/app/pages/pages.module.js
+++ b/src/app/pages/pages.module.js
@@ -26,7 +26,8 @@
     'BlurAdmin.pages.tables',
     'BlurAdmin.pages.tree',
     'BlurAdmin.pages.tabs',
-    'BlurAdmin.pages.typography'
+    'BlurAdmin.pages.typography',
+    'BlurAdmin.pages.ui',
   ])
       .config(routeConfig);
 
diff --git a/src/app/pages/panels/panels.module.js b/src/app/pages/panels/panels.module.js
index 4606a4c..7924ae3 100644
--- a/src/app/pages/panels/panels.module.js
+++ b/src/app/pages/panels/panels.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('panels', {
+        .state('ui.panels', {
           url: '/panels',
           templateUrl: 'app/pages/panels/panels.html',
-          controller: 'NotificationsPageCtrl'
+          controller: 'NotificationsPageCtrl',
+          title: 'Panels',
+          sidebarMeta: {
+            order: 1100,
+          },
         });
   }
 
diff --git a/src/app/pages/profile/profile.module.js b/src/app/pages/profile/profile.module.js
index f5ff39e..1da0097 100644
--- a/src/app/pages/profile/profile.module.js
+++ b/src/app/pages/profile/profile.module.js
@@ -14,7 +14,12 @@
         .state('profile', {
           url: '/profile',
           templateUrl: 'app/pages/profile/profile.html',
-          controller: 'ProfilePageCtrl'
+          controller: 'ProfilePageCtrl',
+          title: 'User Profile',
+          sidebarMeta: {
+            icon: 'ion-person',
+            order: 700,
+          },
         });
   }
 
diff --git a/src/app/pages/progressBars/progressBars.module.js b/src/app/pages/progressBars/progressBars.module.js
index a29112d..6d1c6aa 100644
--- a/src/app/pages/progressBars/progressBars.module.js
+++ b/src/app/pages/progressBars/progressBars.module.js
@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('progressBars', {
+        .state('ui.progressBars', {
           url: '/progressBars',
-          templateUrl: 'app/pages/progressBars/progressBars.html'
+          templateUrl: 'app/pages/progressBars/progressBars.html',
+          title: 'Progress Bars',
+          sidebarMeta: {
+            order: 600,
+          },
         });
   }
 
diff --git a/src/app/pages/slider/slider.module.js b/src/app/pages/slider/slider.module.js
index d2366d7..6728305 100644
--- a/src/app/pages/slider/slider.module.js
+++ b/src/app/pages/slider/slider.module.js
@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-      .state('slider', {
-        url: '/slider',
-        templateUrl: 'app/pages/slider/slider.html'
-      });
+        .state('ui.slider', {
+          url: '/slider',
+          templateUrl: 'app/pages/slider/slider.html',
+          title: 'Sliders',
+          sidebarMeta: {
+            order: 1000,
+          },
+        });
   }
 
 })();
diff --git a/src/app/pages/tables/tables.module.js b/src/app/pages/tables/tables.module.js
index 5bccca7..7590917 100644
--- a/src/app/pages/tables/tables.module.js
+++ b/src/app/pages/tables/tables.module.js
@@ -11,19 +11,32 @@
   /** @ngInject */
   function routeConfig($stateProvider, $urlRouterProvider) {
     $stateProvider
-      .state('tables', {
-        url: '/tables',
-        template : '<ui-view></ui-view>',
-        abstract: true,
-        controller: 'TablesPageCtrl'
-      }).state('tables.basic', {
-        url: '/basic',
-        templateUrl: 'app/pages/tables/basic/tables.html'
-      }).state('tables.smart', {
-        url: '/smart',
-        templateUrl: 'app/pages/tables/smart/tables.html'
-      });
-      $urlRouterProvider.when('/tables','/tables/basic');
+        .state('tables', {
+          url: '/tables',
+          template : '<ui-view></ui-view>',
+          abstract: true,
+          controller: 'TablesPageCtrl',
+          title: 'Tables',
+          sidebarMeta: {
+            icon: 'ion-grid',
+            order: 200,
+          },
+        }).state('tables.basic', {
+          url: '/basic',
+          templateUrl: 'app/pages/tables/basic/tables.html',
+          title: 'Basic Tables',
+          sidebarMeta: {
+            order: 0,
+          },
+        }).state('tables.smart', {
+          url: '/smart',
+          templateUrl: 'app/pages/tables/smart/tables.html',
+          title: 'Smart Tables',
+          sidebarMeta: {
+            order: 100,
+          },
+        });
+    $urlRouterProvider.when('/tables','/tables/basic');
   }
 
 })();
diff --git a/src/app/pages/tabs/tabs.module.js b/src/app/pages/tabs/tabs.module.js
index 7f9e78e..8e0d99d 100644
--- a/src/app/pages/tabs/tabs.module.js
+++ b/src/app/pages/tabs/tabs.module.js
@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('tabs', {
+        .state('ui.tabs', {
           url: '/tabs',
-          templateUrl: 'app/pages/tabs/tabs.html'
+          templateUrl: 'app/pages/tabs/tabs.html',
+          title: 'Tabs and Accordions',
+          sidebarMeta: {
+            order: 800,
+          },
         });
   }
 
diff --git a/src/app/pages/tree/tree.module.js b/src/app/pages/tree/tree.module.js
index e50f457..795da6b 100644
--- a/src/app/pages/tree/tree.module.js
+++ b/src/app/pages/tree/tree.module.js
@@ -10,10 +10,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-      .state('tree', {
-        url: '/tree',
-        templateUrl: 'app/pages/tree/tree.html'
-      });
+        .state('ui.tree', {
+          url: '/tree',
+          templateUrl: 'app/pages/tree/tree.html',
+          title: 'Tree View',
+          sidebarMeta: {
+            order: 900,
+          },
+        });
   }
 
 })();
diff --git a/src/app/pages/typography/typography.module.js b/src/app/pages/typography/typography.module.js
index 71f7bc2..f00703b 100644
--- a/src/app/pages/typography/typography.module.js
+++ b/src/app/pages/typography/typography.module.js
@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('typography', {
+        .state('ui.typography', {
           url: '/typography',
-          templateUrl: 'app/pages/typography/typography.html'
+          templateUrl: 'app/pages/typography/typography.html',
+          title: 'Typography',
+          sidebarMeta: {
+            order: 0,
+          },
         });
   }
 
diff --git a/src/app/pages/ui/ui.module.js b/src/app/pages/ui/ui.module.js
new file mode 100644
index 0000000..ebb286b
--- /dev/null
+++ b/src/app/pages/ui/ui.module.js
@@ -0,0 +1,26 @@
+/**
+ * @author k.danovsky
+ * created on 12.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.ui', [])
+      .config(routeConfig);
+
+  /** @ngInject */
+  function routeConfig($stateProvider) {
+    $stateProvider
+        .state('ui', {
+          url: '/ui',
+          template : '<ui-view></ui-view>',
+          abstract: true,
+          title: 'UI Elements',
+          sidebarMeta: {
+            icon: 'ion-android-laptop',
+            order: 400,
+          },
+        });
+  }
+
+})();
diff --git a/src/app/theme/components/contentTop/contentTop.directive.js b/src/app/theme/components/contentTop/contentTop.directive.js
index 3a05287..6c2deae 100644
--- a/src/app/theme/components/contentTop/contentTop.directive.js
+++ b/src/app/theme/components/contentTop/contentTop.directive.js
@@ -9,46 +9,13 @@
       .directive('contentTop', contentTop);
 
   /** @ngInject */
-  function contentTop($location) {
+  function contentTop($location, $state) {
     return {
       restrict: 'E',
       templateUrl: 'app/theme/components/contentTop/contentTop.html',
       link: function($scope) {
-        $scope.pages = {
-          '/dashboard': 'Dashboard',
-          '/page': 'Default Page',
-          '/404': 'Page Not Found',
-          '/buttons': 'Buttons',
-          '/charts/amCharts': 'amCharts',
-          '/charts/chartJs': 'Chart.js',
-          '/charts/chartist': 'Chartist.js',
-          '/charts/morris': 'Morris',
-          '/grid': 'Grid',
-          '/alerts': 'Alerts',
-          '/progressBars': 'Progress Bars',
-          '/notifications': 'Notifications',
-          '/icons': 'Icons',
-          '/login': 'Authentication',
-          '/maps': 'Maps',
-          '/mail': 'Mail Box',
-          '/modals': 'Modals',
-          '/profile': 'User Profile',
-          '/tables/basic': 'Basic Tables',
-          '/tables/smart': 'Smart Tables',
-          '/tree': 'Tree View',
-          '/slider': 'Sliders',
-          '/typography': 'Typography',
-          '/form-layouts': 'Form Layouts',
-          '/form-inputs': 'Form Inputs',
-          '/maps/gmap': 'Google Map',
-          '/maps/leaflet': 'Leaflet Map',
-          '/maps/line': 'Line Map',
-          '/maps/bubble': 'Bubble Map',
-          '/panels': 'Panels'
-        };
-
         $scope.$watch(function () {
-          $scope.activePageTitle = $scope.pages[$location.$$url];
+          $scope.activePageTitle = $state.current.title;
         });
       }
     };
diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js
index 6d007d1..2497749 100644
--- a/src/app/theme/components/sidebar/SidebarCtrl.js
+++ b/src/app/theme/components/sidebar/SidebarCtrl.js
@@ -9,153 +9,37 @@
     .controller('SidebarCtrl', SidebarCtrl);
 
   /** @ngInject */
-  function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes) {
-    $scope.menuItems = [
-      {
-        title: 'Dashboard',
-        icon: 'ion-android-home',
-        root: '#/dashboard'
-      },
-      {
-        icon: 'ion-stats-bars',
-        title: 'Charts',
-        subMenu: [
-          {
-            title: 'amCharts',
-            root: '#/charts/amCharts'
-          },
-          {
-            title: 'Chart.js',
-            root: '#/charts/chartJs'
-          },
-          {
-            title: 'Chartist',
-            root: '#/charts/chartist'
-          },
-          {
-            title: 'Morris',
-            root: '#/charts/morris'
-          }
-        ]
-      },
-      {
-        title: 'Tables',
-        icon: 'ion-grid',
-        subMenu: [
-          {
-            title: "Basic Tables",
-            root: '#/tables/basic'
-          },
-          {
-            title: "Smart Tables",
-            root: '#/tables/smart'
-          }
-        ]
-      },
-      {
-        title: 'Form Elements',
-        icon: 'ion-compose',
-        subMenu: [
-          {
-            title: 'Inputs',
-            root: '#/form-inputs'
-          },
-          {
-            title: 'Form Layouts',
-            root: '#/form-layouts'
-          },
-          {
-            title: 'Form Wizard',
-            root: '#/form-wizard'
-          }
-        ]
-      },
-      {
-        title: 'UI Elements',
-        icon: 'ion-android-laptop',
-        subMenu: [
-          {
-            title: 'Typography',
-            root: '#/typography'
-          },
-          {
-            title: 'Buttons',
-            root: '#/buttons'
-          },
-          {
-            title: 'Icons',
-            root: '#/icons'
-          },
-          {
-            title: 'Modals',
-            root: '#/modals'
-          },
-          {
-            title: 'Grid',
-            root: '#/grid'
-          },
-          {
-            title: 'Alerts',
-            root: '#/alerts'
-          },
-          {
-            title: 'Progress Bars',
-            root: '#/progressBars'
-          },
-          {
-            title: 'Notifications',
-            root: '#/notifications'
-          },
-          {
-            title: 'Tabs and Accordions',
-            root: '#/tabs'
-          },
-          {
-            title: 'Tree View',
-            root: '#/tree'
-          },
-          {
-            title: 'Sliders',
-            root: '#/slider'
-          },
-          {
-            title: 'Panels',
-            root: '#/panels'
-          }
-        ]
-      },
-      {
-        title: 'Mail',
-        icon: 'ion-ios-email-outline',
-        root: '#/mail/inbox'
-      },
-      {
-        title: 'Maps',
-        icon: 'ion-ios-location-outline',
-        subMenu: [
-          {
-            title: 'Google Maps',
-            root: '#/maps/gmap'
-          },
-          {
-            title: 'Leaflet',
-            root: '#/maps/leaflet'
-          },
-          {
-            title: 'Bubble Map',
-            root: '#/maps/bubble'
-          },
-          {
-            title: 'Line Map',
-            root: '#/maps/line'
-          }
-        ]
-      },
-      {
-        title: 'User Profile',
-        icon: 'ion-person',
-        root: '#/profile'
-      },
+  function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes, $state) {
+
+    var states = $state.get().filter(function(s) {
+          return s.sidebarMeta;
+        })
+        .map(function(s) {
+          var meta = s.sidebarMeta;
+          return {
+            name: s.name,
+            title: s.title,
+            level: (s.name.match(/\./g) || []).length,
+            order: meta.order,
+            icon: meta.icon,
+            root: '#/' + s.name.replace('.', '/'),
+          };
+        })
+        .sort(function(a, b) {
+          return (a.level - b.level) * 100 + a.order - b.order;
+        });
+
+    var menuItems = states.filter(function(item) {
+      return item.level == 0;
+    });
+    menuItems.forEach(function(item) {
+       var children = states.filter(function(child) {
+        return child.level == 1 && child.name.indexOf(item.name) == 0;
+      });
+      item.subMenu = children.length ? children : null;
+    });
+
+    var staticMenuItems = [
       {
         title: 'Login Page',
         icon: 'ion-log-out',
@@ -185,6 +69,8 @@
       }
     ];
 
+    $scope.menuItems = menuItems.concat(staticMenuItems);
+
     function changeSelectElemTopValue() {
       $timeout(function () {
         var selectedItem = $('.al-sidebar-list-item.selected');