diff --git a/src/stores/Auth.js b/src/stores/Auth.js
index d8cac0a..2ca2fd1 100644
--- a/src/stores/Auth.js
+++ b/src/stores/Auth.js
@@ -50,6 +50,23 @@ class Auth {
       });
   }
 
+  changeUserPassword(password, newPassword) {
+    const fetchUrl = prepareUrl(HT_HOST + '/service-Cooperate/Cooperate/SetPassword')
+      .append('UserID', this.login.userId)
+      .append('password', password)
+      .append('NewPassword', newPassword)
+      .build();
+
+    return fetchJSON(fetchUrl)
+      .then(json => {
+        if (json.errcode == 0) {
+          console.info(json);
+        } else {
+          throw new Error(json.errmsg + ': ' + json.errcode);
+        }
+      });
+  }
+
   login = {
     userId: 1,
     username: 'Vu Xuan Giang',
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
index c76a5a7..095ff0a 100644
--- a/src/views/Login.jsx
+++ b/src/views/Login.jsx
@@ -8,6 +8,7 @@ function Login() {
   const { authStore } = useStore();
   const { notification } = App.useApp();
   const navigate = useNavigate();
+  const [form] = Form.useForm();
 
   const onFinish = (values) => {
     authStore.valdateUserPassword(values.username, values.password)
@@ -44,6 +45,9 @@ function Login() {
     <Row justify="center" align="middle" style={{ minHeight: 500 }}>
       <Form
         name="basic"
+        // layout="vertical"
+        form={form}
+        size="large"
         labelCol={{
           span: 8,
         }}
@@ -100,7 +104,7 @@ function Login() {
             span: 16,
           }}
         >
-          <Button type="primary" htmlType="submit">
+          <Button type="primary" htmlType="submit" style={{width: "100%"}}>
             Submit
           </Button>
         </Form.Item>
diff --git a/src/views/account/ChangePassword.jsx b/src/views/account/ChangePassword.jsx
index 84de94a..f22420a 100644
--- a/src/views/account/ChangePassword.jsx
+++ b/src/views/account/ChangePassword.jsx
@@ -1,5 +1,4 @@
-import { useNavigate } from "react-router-dom";
-import { Button, Checkbox, Form, Input, Row, Typography, App } from 'antd';
+import { Button, Space, Form, Input, Row, Typography, App } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -8,29 +7,23 @@ function ChangePassword() {
 
   const { authStore } = useStore();
   const { notification } = App.useApp();
-  const navigate = useNavigate();
+  const [form] = Form.useForm();
 
   const onFinish = (values) => {
-    authStore.valdateUserPassword(values.username, values.password)
-      .then((userId) => {
-        authStore.fetchUserDetail(userId)
-          .then((user) => {
-            // navigate(-1) is equivalent to hitting the back button.
-            navigate("/reservation/newest");
-          })
-          .catch(ex => {
-            notification.error({
-              message: `Notification`,
-              description: ex.message,
-              placement: 'top',
-              duration: 4,
-            });
-          });
+    console.info(values);
+    authStore.changeUserPassword(values.currentPassword, values.newPassword)
+      .then(() => {
+        notification.success({
+          message: `Notification`,
+          description: 'Your password has been successfully updated.',
+          placement: 'top',
+          duration: 4,
+        });
       })
-      .catch(ex => {
+      .catch(() => {
         notification.error({
           message: `Notification`,
-          description: ex.message,
+          description: 'Failed to change password. Please try again.',
           placement: 'top',
           duration: 4,
         });
@@ -39,36 +32,32 @@ function ChangePassword() {
   
   const onFinishFailed = (errorInfo) => {
     console.log('Failed:', errorInfo);
+    // form.resetFields();
   };
 
   return (
-    <Row justify="center" align="middle" style={{ minHeight: 500 }}>
-      <Title level={3}>Change your password</Title>
+    <>
+    <Row justify="center" align="middle" style={{ minHeight: 500 }}>    
       <Form
         name="basic"
-        labelCol={{
-          span: 8,
-        }}
-        wrapperCol={{
-          span: 16,
-        }}
+        form={form}
+        layout="vertical"
+        size="large"
         style={{
           maxWidth: 600,
         }}
-        initialValues={{
-          remember: true,
-        }}
         onFinish={onFinish}
         onFinishFailed={onFinishFailed}
         autoComplete="off"
       >
+        <Form.Item><Title level={3}>Change your password</Title></Form.Item>
         <Form.Item
           label="Current password"
-          name="username"
+          name="currentPassword"
           rules={[
             {
               required: true,
-              message: 'Please input your username!',
+              message: 'Please input your password!',
             },
           ]}
         >
@@ -76,7 +65,7 @@ function ChangePassword() {
         </Form.Item>
         <Form.Item
           label="New password"
-          name="password"
+          name="newPassword"
           rules={[
             {
               required: true,
@@ -88,38 +77,29 @@ function ChangePassword() {
         </Form.Item>
         <Form.Item
           label="Reenter password"
-          name="password"
+          name="reenterPassword"
           rules={[
             {
               required: true,
-              message: 'Please input your password!',
+              message: 'Please reenter your password!',
             },
           ]}
         >
           <Input.Password />
         </Form.Item>
-        <Form.Item
-          wrapperCol={{
-            offset: 8,
-            span: 16,
-          }}
-        >
+        <Form.Item>
+        <Space size="middle">
           <Button type="primary" htmlType="submit">
             Save
           </Button>
-        </Form.Item>
-        <Form.Item
-          wrapperCol={{
-            offset: 8,
-            span: 16,
-          }}
-        >
           <Button htmlType="submit">
             Cancel
           </Button>
+        </Space>
         </Form.Item>
       </Form>
     </Row>
+    </>
   );
 }