diff --git a/UI/Templates/AdministrationUI/UIxAdministration.wox b/UI/Templates/AdministrationUI/UIxAdministration.wox
index 887efd5b6..18713a063 100644
--- a/UI/Templates/AdministrationUI/UIxAdministration.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministration.wox
@@ -7,34 +7,51 @@
   xmlns:label="OGo:label"
   className="UIxPageFrame"
   title="title"
-  const:toolbar="UIxAdministration.toolbar"
-  const:jsFiles="dtree.js">
+  const:jsFiles="Common.js, Administration.js, Administration.services.js, Contacts.services.js">
 
-  <div id="helpDialog" style="display: none" class="dialog left">
+  <main class="view layout-fill" ui-view="administration" layout="row" ng-controller="navController">
+    <!-- administration -->
+  </main>
+
+  <script type="text/ng-template" id="administration.html">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
+      <var:component className="UIxSidenavToolbarTemplate" />
+      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
+        <md-list>
+          <md-list-item ng-click="app.go('rights')"
+                        ui-sref="administration.rights"
+                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+            <md-icon>security</md-icon>
+            <p class="sg-item-name"><var:string label:value="Rights"/></p>
+          </md-list-item>
+        </md-list>
+      </md-content>
+    </md-sidenav>
+
+    <section  layout="column" class="layout-fill">
+
+      <!-- TOP RIGHT TOOLBAR -->
+      <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
+        <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
+          <var:component className="UIxTopnavToolbarTemplate" />
+        </div>
+      </md-toolbar>
+      <md-content>
+        <div ui-view="module"><!-- view --></div>
+      </md-content>
+    </section>
+
+  </script>
+
+  <!--
+      RIGHTS ADMINISTRATION PANEL
+  -->
+  <script type="text/ng-template" id="rights.html">
     <div>
-      <h3><!-- module title --></h3>
-      <div><!-- module description --></div>
-      <a href="#" class="button" id="helpDialogClose"><span><var:string label:value="Close"/></span></a>
+      <label>TODO!</label>
     </div>
-  </div>
+  </script>
 
-  <div id="leftPanel">
-    <div class="titlediv"><var:string label:value="Modules" /></div>
-    <div id="administrationModules">
-      <ul>
-	<li id="ACLs" class="_selected"><var:string label:value="ACLs"/></li>
-      </ul>
-    </div>
-  </div>
 
-  <div class="dragHandle" id="verticalDragHandle"><!-- space --></div>
-
-  <div id="rightPanel">
-    <span><h1 id="moduleTitle"><var:string label:value="ACLs_title"/></h1>
-    <div id="moduleDescription" style="display: none"><var:string label:value="ACLs_description" const:escapeHTML="NO"/></div></span>
-    <var:component className="UIxAdministrationFilterPanel" qualifier="qualifier" />
-    <div id="administrationContent"><!-- space --></div>
-  </div>
-
-  <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
 </var:component>
+
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index bdfea0d52..9d6b58879 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -10,7 +10,10 @@ module.exports = function(grunt) {
     'js/Mailer.js': ['js/Mailer/Mailer.app.js'],
     'js/Mailer.app.popup.js': ['js/Mailer/Mailer.popup.js'],
     'js/Preferences.services.js': ['js/Preferences/*.service.js'],
-    'js/Preferences.js': ['js/Preferences/Preferences.app.js', 'js/Preferences/*Controller.js']
+    'js/Preferences.js': ['js/Preferences/Preferences.app.js', 'js/Preferences/*Controller.js'],
+    'js/Administration.services.js': ['js/Administration/*.service.js'],
+    'js/Administration.js': ['js/Administration/Administration.app.js', 'js/Administration/*Controller.js']
+
   };
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
diff --git a/UI/WebServerResources/js/Administration/Administration.app.js b/UI/WebServerResources/js/Administration/Administration.app.js
new file mode 100644
index 000000000..f5cd609fd
--- /dev/null
+++ b/UI/WebServerResources/js/Administration/Administration.app.js
@@ -0,0 +1,61 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* JavaScript for SOGoAdministration */
+
+(function() {
+  'use strict';
+
+  angular.module('SOGo.AdministrationUI', ['ngSanitize', 'ui.router', 'SOGo.Common', 'SOGo.ContactsUI', 'SOGo.Authentication'])
+    .config(configure)
+    .run(runBlock);
+
+  /**
+   * @ngInject
+   */
+  configure.$inject = ['$stateProvider', '$urlRouterProvider'];
+  function configure($stateProvider, $urlRouterProvider) {
+    $stateProvider
+      .state('administration', {
+        abstract: true,
+        views: {
+          administration: {
+            templateUrl: 'administration.html',
+            controller: 'AdministrationController',
+            controllerAs: 'app'
+          }
+        },
+        resolve: {
+          stateAdministration: stateAdministration
+        }
+      })
+      .state('administration.rights', {
+        url: '/rights',
+        views: {
+          module: {
+            templateUrl: 'rights.html'
+          }
+        }
+      });
+
+    // if none of the above states are matched, use this as the fallback
+    $urlRouterProvider.otherwise('/rights');
+  }
+
+  /**
+   * @ngInject
+   */
+  stateAdministration.$inject = ['Administration'];
+  function stateAdministration(Administration) {
+    return Administration;
+  }
+
+  /**
+   * @ngInject
+   */
+  runBlock.$inject = ['$rootScope'];
+  function runBlock($rootScope) {
+    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
+      console.error(event, current, previous, rejection);
+    });
+  }
+
+})();
diff --git a/UI/WebServerResources/js/Administration/Administration.service.js b/UI/WebServerResources/js/Administration/Administration.service.js
new file mode 100644
index 000000000..ac009f072
--- /dev/null
+++ b/UI/WebServerResources/js/Administration/Administration.service.js
@@ -0,0 +1,44 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * @name Administration
+   * @constructor
+   */
+  function Administration() {
+
+  }
+
+  /**
+   * @memberof Administration
+   * @desc The factory we'll use to register with Angular
+   * @returns the Administration constructor
+   */
+  Administration.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'Resource', 'User', function($q, $timeout, $log, Settings, Resource, User) {
+    angular.extend(Administration, {
+      $q: $q,
+      $timeout: $timeout,
+      $log: $log,
+      $$resource: new Resource(Settings.activeUser('folderURL'), Settings.activeUser()),
+      activeUser: Settings.activeUser(),
+      $User: User
+    });
+
+    return new Administration(); // return unique instance
+  }];
+
+  /* Initialize module if necessary */
+  try {
+    angular.module('SOGo.AdministrationUI');
+  }
+  catch(e) {
+    angular.module('SOGo.AdministrationUI', ['SOGo.Common']);
+  }
+
+  /* Factory registration in Angular module */
+  angular.module('SOGo.AdministrationUI')
+    .factory('Administration', Administration.$factory);
+
+})();
diff --git a/UI/WebServerResources/js/Administration/AdministrationController.js b/UI/WebServerResources/js/Administration/AdministrationController.js
new file mode 100644
index 000000000..675335423
--- /dev/null
+++ b/UI/WebServerResources/js/Administration/AdministrationController.js
@@ -0,0 +1,28 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* JavaScript for SOGoAdministration */
+
+(function() {
+  'use strict';
+  
+  /**
+   * @ngInject
+   */
+  AdministrationController.$inject = ['$state', '$mdDialog', '$mdToast', 'Dialog', 'User', 'stateAdministration', 'Authentication'];
+  function AdministrationController($state, $mdDialog, $mdToast, Dialog, User, stateAdministration, Authentication) {
+    var vm = this;
+
+    vm.administration = stateAdministration;
+
+    vm.go = go;
+  
+    function go(module) {
+      $state.go('administration.' + module);
+    }
+
+  }
+
+  angular
+    .module('SOGo.AdministrationUI')
+    .controller('AdministrationController', AdministrationController);
+
+})();