diff --git a/src/main.jsx b/src/main.jsx
index e41d24e..9d03202 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -18,6 +18,7 @@ import ReservationNewest from "@/views/reservation/Newest";
 import ReservationDetail from "@/views/reservation/Detail";
 import ReservationPrint from "@/views/reservation/Print";
 import ReservationNameCard from "@/views/reservation/NameCard";
+import ChangePassword from "@/views/account/ChangePassword";
 import FeedbackIndex from "@/views/feedback/Index";
 import FeedbackDetail from "@/views/feedback/Detail";
 import NoticeIndex from "@/views/notice/Index";
@@ -45,6 +46,7 @@ const router = createBrowserRouter([
       { path: "reservation/:reservationId", element: <ReservationDetail />},
       { path: "reservation/:reservationId/print", element: <ReservationPrint />},
       { path: "reservation/:reservationId/name-card", element: <ReservationNameCard />},
+      { path: "account/change-password", element: <ChangePassword />},
       { path: "feedback", element: <FeedbackIndex />},
       { path: "feedback/:GRI_SN", element: <FeedbackDetail />},
       { path: "notice", element: <NoticeIndex />},
diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index 7c02b8d..4f5081a 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -113,8 +113,8 @@ class Reservation {
     let formData = new FormData();
     formData.append('GRI_SN', this.selectedReservation.reservationId);
     formData.append('VEI_SN', this.root.authStore.login.travelAgencyId);
-    formData.append('TGI_SN', cityId);
-    formData.append('CII_SN', guideId);
+    formData.append('TGI_SN', guideId);
+    formData.append('CII_SN', cityId);
     formData.append('GetDate', this.selectedReservation.reservationDate);
     formData.append('LMI_SN', this.root.authStore.login.userId);
     const postUrl = HT_HOST + '/service-cusservice/PTAddGuide';
diff --git a/src/views/App.jsx b/src/views/App.jsx
index ff1765d..0737f51 100644
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@@ -11,9 +11,7 @@ const { Header, Content, Footer } = Layout;
 const items = [
 	{
 		label: (
-			<a target="_blank" rel="noopener noreferrer" href="#">
-				Profile
-			</a>
+      <Link to="/account/change-password">Change password</Link>
 		),
 		key: "0",
 	},
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
index f28c6e2..c76a5a7 100644
--- a/src/views/Login.jsx
+++ b/src/views/Login.jsx
@@ -4,9 +4,10 @@ import { useStore } from '@/stores/StoreContext.js';
 
 
 function Login() {
+
   const { authStore } = useStore();
-  const navigate = useNavigate();
   const { notification } = App.useApp();
+  const navigate = useNavigate();
 
   const onFinish = (values) => {
     authStore.valdateUserPassword(values.username, values.password)
diff --git a/src/views/account/ChangePassword.jsx b/src/views/account/ChangePassword.jsx
new file mode 100644
index 0000000..84de94a
--- /dev/null
+++ b/src/views/account/ChangePassword.jsx
@@ -0,0 +1,126 @@
+import { useNavigate } from "react-router-dom";
+import { Button, Checkbox, Form, Input, Row, Typography, App } from 'antd';
+import { useStore } from '@/stores/StoreContext.js';
+
+const { Title } = Typography;
+
+function ChangePassword() {
+
+  const { authStore } = useStore();
+  const { notification } = App.useApp();
+  const navigate = useNavigate();
+
+  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,
+            });
+          });
+      })
+      .catch(ex => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      });
+  };
+  
+  const onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <Row justify="center" align="middle" style={{ minHeight: 500 }}>
+      <Title level={3}>Change your password</Title>
+      <Form
+        name="basic"
+        labelCol={{
+          span: 8,
+        }}
+        wrapperCol={{
+          span: 16,
+        }}
+        style={{
+          maxWidth: 600,
+        }}
+        initialValues={{
+          remember: true,
+        }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="Current password"
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your username!',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label="New password"
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+            },
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+        <Form.Item
+          label="Reenter password"
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+            },
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+        <Form.Item
+          wrapperCol={{
+            offset: 8,
+            span: 16,
+          }}
+        >
+          <Button type="primary" htmlType="submit">
+            Save
+          </Button>
+        </Form.Item>
+        <Form.Item
+          wrapperCol={{
+            offset: 8,
+            span: 16,
+          }}
+        >
+          <Button htmlType="submit">
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Row>
+  );
+}
+
+export default ChangePassword;
\ No newline at end of file
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index 4fcfa87..368fbc4 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -72,10 +72,6 @@ function Newest() {
         placeholder="Select a guide"
         optionFilterProp="children"
         onChange={(guideId) => {
-          console.log(`selected:`);
-          console.log(guideId);
-          console.log(`city:`);
-          console.log(city);
           reservationStore.setupCityGuide(city.cityId, guideId);
         }}
         onSearch={(value) => {