diff --git a/controllers/changepassword.go b/controllers/changepassword.go
new file mode 100644
index 0000000000..0ecddb29c1
--- /dev/null
+++ b/controllers/changepassword.go
@@ -0,0 +1,11 @@
+package controllers
+
+// ChangePasswordController handles request to /change_password
+type ChangePasswordController struct {
+	BaseController
+}
+
+// Get renders the change password page
+func (asc *ChangePasswordController) Get() {
+	asc.Forward("page_title_change_password", "change-password.htm")
+}
diff --git a/static/resources/js/harbor.module.js b/static/resources/js/harbor.module.js
index d92272c75d..8fe5eda2a4 100644
--- a/static/resources/js/harbor.module.js
+++ b/static/resources/js/harbor.module.js
@@ -13,6 +13,7 @@
       'harbor.layout.sign.up',
       'harbor.layout.add.new',
       'harbor.layout.account.setting',
+      'harbor.layout.change.password',
       'harbor.layout.forgot.password',
       'harbor.layout.reset.password',
       'harbor.layout.index',
@@ -48,4 +49,4 @@
       'harbor.inline.help',
       'harbor.dismissable.alerts'
     ]);
-})();
\ No newline at end of file
+})();
diff --git a/static/resources/js/layout/account-setting/account-setting.controller.js b/static/resources/js/layout/account-setting/account-setting.controller.js
index 6a8a0a46f3..fbbcd53bea 100644
--- a/static/resources/js/layout/account-setting/account-setting.controller.js
+++ b/static/resources/js/layout/account-setting/account-setting.controller.js
@@ -17,7 +17,6 @@
     vm.errorMessage = '';
     
     vm.reset = reset;    
-    vm.toggleChangePassword = toggleChangePassword;
     vm.confirm = confirm;
     vm.updateUser = updateUser;
     vm.cancel = cancel;
@@ -52,14 +51,6 @@
       vm.errorMessage = '';
     }
      
-    function toggleChangePassword() {
-      if(vm.isOpen) {
-        vm.isOpen = false;
-      }else{
-        vm.isOpen = true;
-      }     
-    }
-    
     function confirm() {     
       $window.location.href = '/dashboard';
     }    
@@ -67,37 +58,14 @@
     function updateUser(user) {
       vm.confirmOnly = true;
       vm.action = vm.confirm;
-      if(vm.isOpen){
-        if(user && angular.isDefined(user.oldPassword) && angular.isDefined(user.password)) {
-          ChangePasswordService(userId, user.oldPassword, user.password)
-            .success(changePasswordSuccess)
-            .error(changePasswordFailed);
-        }
-      }else{
-        if(user && angular.isDefined(user.username) && angular.isDefined(user.password) && 
-            angular.isDefined(user.realname)) {
-          UpdateUserService(userId, user)
-            .success(updateUserSuccess)
-            .error(updateUserFailed); 
-          currentUser.set(user);        
-        }
+      if(user && angular.isDefined(user.username) && angular.isDefined(user.realname)) {
+        UpdateUserService(userId, user)
+          .success(updateUserSuccess)
+          .error(updateUserFailed); 
+        currentUser.set(user);        
       }
     }
-    
-    function changePasswordSuccess(data, status) {
-      vm.modalTitle = $filter('tr')('change_password', []);
-      vm.modalMessage = $filter('tr')('successful_changed_password', []);
-      $scope.$broadcast('showDialog', true);
-    }
-    
-    function changePasswordFailed(data, status) {
-      console.log('Failed to changed password:' + data);
-      if(data == 'old_password_is_not_correct') {
-        vm.hasError = true;
-        vm.errorMessage = 'old_password_is_incorrect';
-      }
-    }
-    
+        
     function updateUserSuccess(data, status) {
       vm.modalTitle = $filter('tr')('change_profile', []);
       vm.modalMessage = $filter('tr')('successful_changed_profile', []);
@@ -123,4 +91,4 @@
     
   }
   
-})();
\ No newline at end of file
+})();
diff --git a/static/resources/js/layout/change-password/change-password.controller.js b/static/resources/js/layout/change-password/change-password.controller.js
new file mode 100644
index 0000000000..b4d07c5d82
--- /dev/null
+++ b/static/resources/js/layout/change-password/change-password.controller.js
@@ -0,0 +1,96 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.change.password')
+    .controller('ChangePasswordController', ChangePasswordController);
+  
+  ChangePasswordController.$inject = ['ChangePasswordService', 'UpdateUserService', '$filter', 'trFilter', '$scope', '$window', 'currentUser'];
+  
+  function ChangePasswordController(ChangePasswordService, UpdateUserService, $filter, trFilter, $scope, $window, currentUser) {
+
+    var vm = this;
+    vm.isOpen = false;
+ 
+    vm.hasError = false;
+    vm.errorMessage = '';
+    
+    vm.reset = reset;    
+    
+    vm.confirm = confirm;
+    vm.updatePassword = updatePassword;
+    vm.cancel = cancel;
+    
+    $scope.user = currentUser.get();
+    var userId = $scope.user.user_id;
+
+    //Error message dialog handler for account setting.
+    $scope.$on('modalTitle', function(e, val) {
+      vm.modalTitle = val;
+    });
+    
+    $scope.$on('modalMessage', function(e, val) {
+      vm.modalMessage = val;
+    });
+       
+    $scope.$on('raiseError', function(e, val) {
+      if(val) {   
+        vm.action = function() {
+          $scope.$broadcast('showDialog', false);
+        };
+        vm.contentType = 'text/plain';    
+        vm.confirmOnly = true;  
+        $scope.$broadcast('showDialog', true);
+      }
+    });
+        
+    function reset() {
+      $scope.form.$setUntouched();
+      $scope.form.$setPristine();
+      vm.hasError = false;
+      vm.errorMessage = '';
+    }
+     
+    function confirm() {     
+      $window.location.href = '/dashboard';
+    }    
+                
+    function updatePassword(user) {
+      if(user && angular.isDefined(user.oldPassword) && angular.isDefined(user.password)) {
+        vm.action = vm.confirm;
+        ChangePasswordService(userId, user.oldPassword, user.password)
+          .success(changePasswordSuccess)
+          .error(changePasswordFailed);
+      }
+     
+    }
+    
+    function changePasswordSuccess(data, status) {
+      vm.modalTitle = $filter('tr')('change_password', []);
+      vm.modalMessage = $filter('tr')('successful_changed_password', []);
+      $scope.$broadcast('showDialog', true);
+    }
+    
+    function changePasswordFailed(data, status) {
+
+      var message;
+      $scope.$emit('modalTitle', $filter('tr')('error'));
+      console.log('Failed to change password:' + data);
+      if(data == 'old_password_is_not_correct') {
+        message = $filter('tr')('old_password_is_incorrect');
+      }else{
+        message = $filter('tr')('failed_to_change_password');
+      }
+
+      $scope.$emit('modalMessage', message);
+      $scope.$emit('raiseError', true);
+    }
+    
+    function cancel(form) {
+      $window.location.href = '/dashboard';
+    }
+    
+  }
+  
+})();
diff --git a/static/resources/js/layout/change-password/change-password.module.js b/static/resources/js/layout/change-password/change-password.module.js
new file mode 100644
index 0000000000..c0655b3248
--- /dev/null
+++ b/static/resources/js/layout/change-password/change-password.module.js
@@ -0,0 +1,9 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.change.password', [
+    'harbor.services.user']);
+  
+})();
\ No newline at end of file
diff --git a/static/resources/js/services/i18n/locale_messages_en-US.js b/static/resources/js/services/i18n/locale_messages_en-US.js
index f72d492230..820ff46d26 100644
--- a/static/resources/js/services/i18n/locale_messages_en-US.js
+++ b/static/resources/js/services/i18n/locale_messages_en-US.js
@@ -47,6 +47,7 @@ var locale_messages = {
   'forgot_password_description': 'Please input the Email used when you signed up, a reset password Email will be sent to you.',
   'reset_password': 'Reset Password',
   'successful_reset_password': 'Password has been reset successfully.',
+  'failed_to_change_password': 'Failed to change password.',
   'summary': 'Summary',
   'projects': 'Projects',
   'public_projects': 'Public Projects', 
@@ -252,4 +253,4 @@ var locale_messages = {
   'inline_help_publicity': 'Setting the project as public.',
   'alert_job_contains_error': 'Found errors in the current replication jobs, please look into it.',
   'caution': 'Caution'
-};
\ No newline at end of file
+};
diff --git a/static/resources/js/services/i18n/locale_messages_zh-CN.js b/static/resources/js/services/i18n/locale_messages_zh-CN.js
index 895d9596e9..0dca7e3488 100644
--- a/static/resources/js/services/i18n/locale_messages_zh-CN.js
+++ b/static/resources/js/services/i18n/locale_messages_zh-CN.js
@@ -47,6 +47,7 @@ var locale_messages = {
   'forgot_password_description': '重置邮件将发送到此邮箱。',
   'reset_password': '重置密码',
   'successful_reset_password': '重置密码成功。',
+  'failed_to_change_password': '修改密码失败。',
   'summary': '摘要',
   'projects': '项目',
   'public_projects': '公开项目',
@@ -251,4 +252,4 @@ var locale_messages = {
   'inline_help_publicity': '设置该项目为公开。',
   'alert_job_contains_error': '当前复制任务中包含错误，请检查。',
   'caution': '注意'
-};
\ No newline at end of file
+};
diff --git a/ui/router.go b/ui/router.go
index 4fe8a41848..b35d53229c 100644
--- a/ui/router.go
+++ b/ui/router.go
@@ -37,6 +37,7 @@ func initRouters() {
 	beego.Router("/sign_up", &controllers.SignUpController{})
 	beego.Router("/add_new", &controllers.AddNewController{})
 	beego.Router("/account_setting", &controllers.AccountSettingController{})
+	beego.Router("/change_password", &controllers.ChangePasswordController{})
 	beego.Router("/admin_option", &controllers.AdminOptionController{})
 	beego.Router("/forgot_password", &controllers.ForgotPasswordController{})
 	beego.Router("/reset_password", &controllers.ResetPasswordController{})
diff --git a/views/account-settings.htm b/views/account-settings.htm
index bf5d38c549..1f16c147ec 100644
--- a/views/account-settings.htm
+++ b/views/account-settings.htm
@@ -15,8 +15,8 @@
             <div class="form-group">
               <label for="email" class="col-sm-3 control-label">// 'email' | tr //:</label>
               <div class="col-sm-7">
-                <input type="email" class="form-control" id="email" ng-model="user.email" name="uEmail"  ng-disabled="vm.isOpen" required>
-                <div ng-messages="form.$submitted && form.uEmail.$error">
+                <input type="email" class="form-control" id="email" ng-model="user.email" name="uEmail"  required>
+                <div class="error-message" ng-messages="form.uEmail.$touched && form.uEmail.$error">
                   <span ng-message="required">// 'email_is_required' | tr //</span>
                   <span ng-message="email">// 'email_content_illegal' | tr //</span>
                 </div>
@@ -28,8 +28,8 @@
             <div class="form-group">
               <label for="fullName" class="col-sm-3 control-label">// 'full_name' | tr //:</label>
               <div class="col-sm-7"> 
-                <input type="text" class="form-control" id="fullName" ng-model="user.realname" name="uFullName" ng-disabled="vm.isOpen" required maxlength="20" invalid-chars>
-                <div ng-messages="form.$submitted && form.uFullName.$error">
+                <input type="text" class="form-control" id="fullName" ng-model="user.realname" name="uFullName" required maxlength="20" invalid-chars>
+                <div class="error-message" ng-messages="form.uFullName.$touched && form.uFullName.$error">
                   <span ng-message="required">// 'full_name_is_required' | tr //</span>
                   <span ng-message="invalidChars">// 'full_name_contains_illegal_chars' | tr //</span>
                   <span ng-message="maxlength">// 'full_name_is_too_long' | tr //</span>
@@ -42,59 +42,19 @@
             <div class="form-group">
               <label for="comments" class="col-sm-3 control-label">// 'comments' | tr //:</label>
               <div class="col-sm-7">
-                <input type="text" class="form-control" id="comments" ng-model="user.comment" name="uComments" ng-disabled="vm.isOpen" maxlength="20">
-                <div ng-messages="form.$submitted && form.uComments.$error">
+                <input type="text" class="form-control" id="comments" ng-model="user.comment" name="uComments" maxlength="20">
+                <div class="error-message" ng-messages="form.uComments.$touched && form.uComments.$error">
                   <span ng-show="maxlength">// 'comment_is_too_long' | tr //</span>
                 </div>
               </div>
             </div>          
             <div class="form-group">
-              <label for="toggleChangePassword" class="col-sm-3 control-label"><a id="toggleChangePassword" href="#" ng-click="vm.toggleChangePassword()">// 'change_password' | tr //</a></label>
-            </div>
-            <div ng-show="vm.isOpen">
-              <hr/>
-              <div class="form-group">
-                <label for="oldPassword" class="col-sm-3 control-label">// 'old_password' | tr //:</label>
-                <div class="col-sm-7">
-                  <input type="password" class="form-control" id="oldPassword" ng-model="user.oldPassword" ng-change="vm.reset()" name="uOldPassword" required>
-                  <div class="error-message" ng-messages="vm.isOpen && form.$submitted && form.uOldPassword.$touched && form.uOldPassword.$error">
-                    <span ng-message="required">// 'old_password_is_required' | tr //</span>
-                  </div> 
-                </div>
-                <div class="col-sm-2">
-                  <span class="asterisk">*</span>
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="password" class="col-sm-3 control-label">// 'new_password' | tr //:</label>
-                <div class="col-sm-7">
-                  <input type="password" class="form-control" id="password" ng-model="user.password" ng-change="vm.reset()" name="uPassword" required password>
-                  <div class="error-message" ng-messages="vm.isOpen && form.$submitted && form.uPassword.$touched && form.uPassword.$error">
-                    <span ng-message="required">// 'password_is_required' | tr //</span>
-                    <span ng-message="password">// 'password_is_invalid' | tr //</span>
-                  </div>
-                  <p class="help-block small-size-fonts">// 'password_desc' | tr //</p>
-                </div>
-                <div class="col-sm-2">
-                  <span class="asterisk">*</span>
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="confirmPassword" class="col-sm-3 control-label">// 'confirm_password' | tr //:</label>
-                <div class="col-sm-7">
-                  <input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-change="vm.reset()" name="uConfirmPassword" ng-model-options="{ updateOn: 'blur' }" compare-to="user.password">
-                  <div class="error-message" ng-messages="vm.isOpen && form.$submitted && form.uConfirmPassword.$touched && form.uConfirmPassword.$error">
-                    <span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
-                  </div>
-                </div>
-                <div class="col-sm-2">
-                  <span class="asterisk">*</span>
-                </div>
-              </div>
+              <label for="toggleChangePassword" class="col-sm-3 control-label"><a id="toggleChangePassword" href="/change_password" >// 'change_password' | tr //</a></label>
             </div>
+            
             <div class="form-group">
               <div class="col-md-offset-7 col-md-10">
-                <input type="submit" class="btn btn-primary" ng-click="vm.updateUser(user)" value="// 'save' | tr //">                    
+                <input type="submit" class="btn btn-primary" ng-click="form.$valid && vm.updateUser(user)" value="// 'save' | tr //">                    
                 <input type="button" class="btn btn-default" ng-click="vm.cancel(form)" value="// 'cancel' | tr //">
               </div>
             </div>  
@@ -106,4 +66,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/change-password.htm b/views/change-password.htm
new file mode 100644
index 0000000000..62267f08d7
--- /dev/null
+++ b/views/change-password.htm
@@ -0,0 +1,63 @@
+<div class="container-fluid container-fluid-custom" element-height ng-controller="ChangePasswordController as vm">
+  <modal-dialog modal-title="// vm.modalTitle //" modal-message="// vm.modalMessage //" confirm-only="vm.confirmOnly" action="vm.action()"></modal-dialog>
+  <div class="container container-custom">
+    <div class="row extend-height">
+	    <div class="section">
+		    <h1 class="col-md-12 col-md-offset-2 main-title title-color">// 'change_password' | tr //</h1>
+        <div class="col-md-12 col-md-offset-2 main-content">
+          <form name="form" class="css-form form-horizontal" novalidate>              
+            <div>
+              <div class="form-group">
+                <label for="oldPassword" class="col-sm-3 control-label">// 'old_password' | tr //:</label>
+                <div class="col-sm-7">
+                  <input type="password" class="form-control" id="oldPassword" ng-model="user.oldPassword" ng-change="vm.reset()" name="uOldPassword" required>
+                  <div class="error-message" ng-messages="form.uOldPassword.$touched && form.uOldPassword.$error">
+                    <span ng-message="required">// 'old_password_is_required' | tr //</span>
+                  </div> 
+                </div>
+                <div class="col-sm-2">
+                  <span class="asterisk">*</span>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="password" class="col-sm-3 control-label">// 'new_password' | tr //:</label>
+                <div class="col-sm-7">
+                  <input type="password" class="form-control" id="password" ng-model="user.password" ng-change="vm.reset()" name="uPassword" required password>
+                  <div class="error-message" ng-messages="form.uPassword.$touched && form.uPassword.$error">
+                    <span ng-message="required">// 'password_is_required' | tr //</span>
+                    <span ng-message="password">// 'password_is_invalid' | tr //</span>
+                  </div>
+                  <p class="help-block small-size-fonts">// 'password_desc' | tr //</p>
+                </div>
+                <div class="col-sm-2">
+                  <span class="asterisk">*</span>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="confirmPassword" class="col-sm-3 control-label">// 'confirm_password' | tr //:</label>
+                <div class="col-sm-7">
+                  <input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-change="vm.reset()" name="uConfirmPassword" ng-model-options="{ updateOn: 'blur' }" compare-to="user.password">
+                  <div class="error-message" ng-messages="form.uConfirmPassword.$touched && form.uConfirmPassword.$error">
+                    <span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
+                  </div>
+                </div>
+                <div class="col-sm-2">
+                  <span class="asterisk">*</span>
+                </div>
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-md-offset-7 col-md-10">
+                <input type="submit" class="btn btn-primary" ng-click="form.$valid && vm.updatePassword(user)" value="// 'save' | tr //">                    
+                <input type="button" class="btn btn-default" ng-click="vm.cancel(form)" value="// 'cancel' | tr //">
+              </div>
+            </div>  
+            <div class="error-message">
+              <span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/views/sections/header-include.htm b/views/sections/header-include.htm
index a78d61c1b9..f24ad0041a 100644
--- a/views/sections/header-include.htm
+++ b/views/sections/header-include.htm
@@ -66,6 +66,9 @@
 <script src="/static/resources/js/layout/forgot-password/forgot-password.module.js"></script>
 <script src="/static/resources/js/layout/forgot-password/forgot-password.controller.js"></script>
 
+<script src="/static/resources/js/layout/change-password/change-password.module.js"></script>
+<script src="/static/resources/js/layout/change-password/change-password.controller.js"></script>
+
 <script src="/static/resources/js/layout/reset-password/reset-password.module.js"></script>
 <script src="/static/resources/js/layout/reset-password/reset-password.controller.js"></script>
 
@@ -243,4 +246,4 @@
 <script src="/static/resources/js/components/inline-help/inline-help.directive.js"></script>
 
 <script src="/static/resources/js/components/dismissable-alerts/dismissable-alerts.module.js"></script>
-<script src="/static/resources/js/components/dismissable-alerts/dismissable-alerts.directive.js"></script>
\ No newline at end of file
+<script src="/static/resources/js/components/dismissable-alerts/dismissable-alerts.directive.js"></script>