diff --git a/public/index.html b/public/index.html
index 6dbc037..25712f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,42 +14,40 @@
 
 <body ng-app="bookmarkApp">
     <div class="ui container ">
-        <div id="header">
-            <div class="wrap">
-                <div class="ui small menu js-logged-in">
-                    <a class="item active" ui-sref="bookmarks">我的书签</a>
-                    <a class="item" ui-sref="tags">书签分类</a>
-                    <a class="item" ui-sref="advice">建议</a>
-                    <a class="item" ui-sref="settings">设置</a>
-                    <div class="right menu">
-                        <div class="ui dropdown item">
-                            <div class="text">搜索设置</div>
-                            <i class="dropdown icon"></i>
-                            <div class="menu">
-                                <div class="item">自己书签</div>
-                                <div class="item">全站书签</div>
-                            </div>
-                        </div>
-                        <div class="ui category right search item">
-                            <div class="ui transparent icon input">
-                                <input class="prompt" type="text" placeholder="请输入书签的Url...">
-                                <i class="search link icon"></i>
-                            </div>
-                            <div class="results"></div>
-                        </div>
-                        <div class="item">
-                            <div class="ui button">添加书签</div>
-                        </div>
-                        <div class="item">
-                            <div class="ui button">退出</div>
+        <div id="header" class="js-menu" ng-controller="menuCtr">
+            <div class="ui small menu js-login-in" ng-show="login">
+                <a class="item" ng-class="{active:$index==selectLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in loginMenus">{{ menu.title}}</a>
+                <div class="right menu">
+                    <div class="ui dropdown item">
+                        <div class="text">搜索设置</div>
+                        <i class="dropdown icon"></i>
+                        <div class="menu">
+                            <div class="item">自己书签</div>
+                            <div class="item">全站书签</div>
                         </div>
                     </div>
+                    <div class="ui category right search item">
+                        <div class="ui transparent icon input">
+                            <input class="prompt" type="text" placeholder="请输入书签的Url...">
+                            <i class="search link icon"></i>
+                        </div>
+                        <div class="results"></div>
+                    </div>
+                    <div class="item">
+                        <div class="ui button">添加书签</div>
+                    </div>
+                    <div class="item">
+                        <div class="ui button">退出</div>
+                    </div>
                 </div>
-                <!-- <div class="ui horizontal list">
-                    <div class="item"><a href="/login" id="btn-login">登陆</a></div>
+            </div>
+            <div class="ui small menu js-not-login-in" ng-hide="login">
+                <a class="item" ng-class="{active:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
+                <div class="right menu">
+                    <div class="item">
+                        <div class="ui button">登陆</div>
+                    </div>
                 </div>
-
-                <a href="/" id="btn-home"><img src="/images/logo.png" alt="bookmarkly" /></a> -->
             </div>
         </div>
         <div class="ui container" style="width:100%;height:20px"> </div>
@@ -64,6 +62,7 @@
     <script src="/scripts/app-angular.js"></script>
     <script src="/scripts/services/bookmark-services.js"></script>
     <script src="/scripts/controllers/bookmarks-controller.js"></script>
+    <script src="/scripts/controllers/menu-controller.js"></script>
     <script src="/scripts/externe/semantic.min.js"></script>
     <script src="/scripts/semantic-init.js"></script>
 </body>
diff --git a/public/scripts/app-angular.js b/public/scripts/app-angular.js
index 5665631..299bb55 100644
--- a/public/scripts/app-angular.js
+++ b/public/scripts/app-angular.js
@@ -9,7 +9,7 @@ app.config(function ($stateProvider, $urlRouterProvider) {
         url:'/bookmarks',
         templateUrl: '/views/bookmarks.html',
         // controllerAs: 'bookmarksCtrl',
-        controller: 'bookmarksController'
+        controller: 'bookmarksCtr'
     })
     .state('tags', {
         url:'/tags',
@@ -23,6 +23,14 @@ app.config(function ($stateProvider, $urlRouterProvider) {
         url:'/settings',
         templateUrl: '/views/settings.html',
     })
+    .state('register', {
+            url:'/register',
+            templateUrl: '/views/register.html'
+    })
+    .state('intro', {
+            url:'/intro',
+            templateUrl: '/views/intro.html'
+    })
     .state('/', {
         url:'/',
         templateUrl: '/views/intro.html'
diff --git a/public/scripts/controllers/bookmarks-controller.js b/public/scripts/controllers/bookmarks-controller.js
index 5ebd0c2..07cfad9 100644
--- a/public/scripts/controllers/bookmarks-controller.js
+++ b/public/scripts/controllers/bookmarks-controller.js
@@ -1,18 +1,14 @@
-app.controller('bookmarksController', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
-    'use strict';
-
-    // var todoList = this;
-    //
-    // // Retrieve data from mongodb, by angular service.
-    // var todos = todoList.todos = [];
-    $scope.bookmarks = []
-    bookmarkService.getBookmarks()
-        .then(function(data) {
-                console.log(data);
-                $scope.bookmarks = data;
-            },
-            function(errorMsg) {
-                console.log(errorMsg);
-            });
+app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
+    $scope.bookmarks = [];  // 书签数据
 
+    // 获取书签数据
+    bookmarkService.getBookmarks().then(
+        function(data) {
+            console.log(data);
+            $scope.bookmarks = data;
+        },
+        function(errorMsg) {
+            console.log(errorMsg);
+        }
+    );
 }]);
diff --git a/public/scripts/controllers/menu-controller.js b/public/scripts/controllers/menu-controller.js
new file mode 100644
index 0000000..7cb92d8
--- /dev/null
+++ b/public/scripts/controllers/menu-controller.js
@@ -0,0 +1,34 @@
+app.controller('menuCtr', ['$scope', '$state', function($scope, $state) {
+    $scope.login = true;               /**< 是否登陆 */
+    $scope.selectLoginIndex = 0;        /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
+    $scope.selectNotLoginIndex = 0;     /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
+
+    // 登陆之后显示的菜单数据。uiSerf：内部跳转链接。
+    $scope.loginMenus = [
+        {uiSref:'bookmarks', title:'我的书签'},
+        {uiSref:'tags', title:'书签分类'},
+        {uiSref:'advice', title:'建议'},
+        {uiSref:'settings', title:'设置'},
+        {uiSref:'intro', title:'说明'}
+    ];
+
+    // 未登陆显示的菜单数据
+    $scope.notLoginMenus = [
+        {uiSref:'intro', title:'说明'},
+        {uiSref:'register', title:'注册'}
+    ];
+
+    /**
+     * @func
+     * @desc 根据点击的菜单，更新选择的索引
+     * @param {number} index - 点击的索引
+     * @param {bool} login - 登陆标志
+     */
+    $scope.selectMenu = function(index, login){
+        if (login) {
+            $scope.selectLoginIndex = index;
+        } else {
+            $scope.selectNotLoginIndex = index;
+        }
+    }
+}]);
diff --git a/public/scripts/services/bookmark-services.js b/public/scripts/services/bookmark-services.js
index 0d67330..787fa5c 100644
--- a/public/scripts/services/bookmark-services.js
+++ b/public/scripts/services/bookmark-services.js
@@ -1,31 +1,31 @@
-app.factory('bookmarkService', ['$http', '$q', function($http, $q){
-	'use strict';
+app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
+    'use strict';
 
-	// service interface
-	var service = {
-		getBookmarks: getBookmarks,
-		// addBookmark: addBookmark,
-		// delBookmark: delBookmark,
-		// editBookmark: editBookmark,
-		// register: register
-	};
+    // service interface
+    var service = {
+        getBookmarks: getBookmarks,
+        // addBookmark: addBookmark,
+        // delBookmark: delBookmark,
+        // editBookmark: editBookmark,
+        // register: register
+    };
 
-	// Return a promise object.
-	function getBookmarks(){
-		var def = $q.defer();
+    // Return a promise object.
+    function getBookmarks() {
+        var def = $q.defer();
 
-		$http.get('/api/bookmarks')
-			.success(function(data){
-				def.resolve(data);
-			})
-			.error(function(data){
-				console.log('Error: ' + data);
-				def.reject('Failed to get todos');
-			});
+        $http.get('/api/bookmarks')
+            .success(function(data) {
+                def.resolve(data);
+            })
+            .error(function(data) {
+                console.log('Error: ' + data);
+                def.reject('Failed to get todos');
+            });
 
-		return def.promise;
-	}
+        return def.promise;
+    }
 
 
-	return service;
+    return service;
 }]);
diff --git a/public/views/register.html b/public/views/register.html
new file mode 100644
index 0000000..ef30dad
--- /dev/null
+++ b/public/views/register.html
@@ -0,0 +1 @@
+<p> 这是注册界面 </p>
