diff --git a/frontend/src/components/pages/dashboard/changePassword/index.tsx b/frontend/src/components/pages/dashboard/changePassword/index.tsx
new file mode 100644
index 0000000..437d5d1
--- /dev/null
+++ b/frontend/src/components/pages/dashboard/changePassword/index.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { IoMdEye, IoMdEyeOff } from "react-icons/io";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+type FormData = {
+  newPassword: string;
+  oldPassword: string;
+};
+
+const ChangePassword = () => {
+  const [togglePassword, setTogglePassword] = useState<{
+    newPassword: boolean;
+    oldPassword: boolean;
+  }>({
+    newPassword: false,
+    oldPassword: false,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormData>({ mode: "onChange" });
+
+  const handleChangePassword: SubmitHandler<FormData> = async (data) => {
+    console.log(data);
+  };
+
+  const handleTogglePassword = (type: string) => {
+    setTogglePassword((prev: any) => ({
+      ...prev,
+      [type]: !prev[type],
+    }));
+  };
+
+  const oldPassword = watch("oldPassword");
+  const newPassword = watch("newPassword");
+
+  const isFormValid =
+    oldPassword &&
+    newPassword &&
+    newPassword.length >= 6 &&
+    newPassword !== oldPassword;
+
+  return (
+    <div className="flex items-center justify-center p-5">
+      <div className="dark:bg-gray-700 bg-gray-100 p-8 rounded shadow-md w-full max-w-md">
+        <h1 className="text-2xl font-bold mb-2">Change Password</h1>
+        <p className="mb-2">Change your password carefully</p>
+        <form onSubmit={handleSubmit(handleChangePassword)}>
+          <div className="-mt-px relative mb-4">
+            <label htmlFor="oldPassword">Old Password</label>
+            <input
+              autoFocus
+              aria-label="Old Password"
+              type={togglePassword.oldPassword ? "text" : "password"}
+              {...register("oldPassword", {
+                required: "Old Password is required",
+              })}
+              className={`appearance-none dark:text-white rounded-md relative block w-full px-3 py-2 border ${
+                errors.oldPassword ? "border-red-500" : "border-gray-300"
+              } placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm`}
+              placeholder="Enter your old password"
+            />
+            {errors.oldPassword && (
+              <p className="mt-2 text-sm text-red-500">
+                {errors.oldPassword.message}
+              </p>
+            )}
+            <button
+              type="button"
+              className="absolute top-9 right-2 z-50"
+              onClick={() => handleTogglePassword("oldPassword")}
+            >
+              {togglePassword.oldPassword ? <IoMdEye /> : <IoMdEyeOff />}
+            </button>
+          </div>
+          <div className="-mt-px relative mb-4">
+            <label htmlFor="newPassword">New Password</label>
+            <input
+              id="newPassword"
+              aria-label="New Password"
+              type={togglePassword.newPassword ? "text" : "password"}
+              {...register("newPassword", {
+                required: "New Password is required",
+                minLength: {
+                  value: 6,
+                  message: "New Password must be at least 6 characters",
+                },
+                validate: (value) =>
+                  value !== oldPassword ||
+                  "New Password cannot be the same as the Old Password",
+              })}
+              className={`appearance-none dark:text-white rounded-md relative block w-full px-3 py-2 border ${
+                errors.newPassword ? "border-red-500" : "border-gray-300"
+              } placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm`}
+              placeholder="Enter a new password"
+            />
+            {errors.newPassword && (
+              <p className="mt-2 text-sm text-red-500">
+                {errors.newPassword.message}
+              </p>
+            )}
+            <button
+              type="button"
+              className="absolute top-9 right-2 z-50"
+              onClick={() => handleTogglePassword("newPassword")}
+            >
+              {togglePassword.newPassword ? <IoMdEye /> : <IoMdEyeOff />}
+            </button>
+          </div>
+          <button
+            disabled={!isFormValid}
+            type="submit"
+            className={`w-full text-white py-2 px-4 rounded ${
+              isFormValid
+                ? "bg-blue-500 hover:bg-blue-600"
+                : "bg-gray-500 cursor-not-allowed"
+            } `}
+          >
+            Save changes
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ChangePassword;
diff --git a/frontend/src/components/pages/dashboard/index.tsx b/frontend/src/components/pages/dashboard/index.tsx
index b2f09e3..89bdd4a 100644
--- a/frontend/src/components/pages/dashboard/index.tsx
+++ b/frontend/src/components/pages/dashboard/index.tsx
@@ -8,6 +8,7 @@ import PendingInvitation from "./invitation/PendingInvitation";
 import { useRouter } from "next/router";
 import LeaveRequests from "./leaveRequest/LeaveRequests";
 import TopBar from "./navigationBars/TopBar";
+import ChangePassword from "./changePassword";
 
 const Dashboard = () => {
   const [activeView, setActiveView] = useState("");
@@ -35,6 +36,7 @@ const Dashboard = () => {
           {activeView === "leave-requests" && <LeaveRequests />}
           {activeView === "profile" && <ProfilePage />}
           {activeView === "payments" && <PaymentPage />}
+          {activeView === "change-password" && <ChangePassword />}
         </main>
       </div>
     </div>
diff --git a/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx b/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx
index 81c2990..0e828c6 100644
--- a/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx
+++ b/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx
@@ -9,6 +9,7 @@ import { useLoggedInUserQuery, useLogoutUserMutation } from "@/features/user";
 import { IUser } from "@/interfaces/user.interface";
 import { CgProfile } from "react-icons/cg";
 import { TbBrandTeams } from "react-icons/tb";
+import { RiLockPasswordFill } from "react-icons/ri";
 import {
   MdInsertInvitation,
   MdOutlineLogout,
@@ -124,6 +125,15 @@ const Sidebar = ({ setActiveView, activeView }: any) => {
         <MdOutlinePayment />
         <small>Payments</small>
       </button>
+      <button
+        className={`py-2 px-4 flex items-center gap-2 text-xl w-full hover:bg-gray-100 dark:hover:bg-gray-600  rounded-md text-left focus:outline-none ${
+          activeView === "change-password" && "bg-gray-100 dark:bg-gray-600"
+        }`}
+        onClick={() => handleSidebarNavigate("change-password")}
+      >
+        <RiLockPasswordFill />
+        <small>Change Password</small>
+      </button>
       <button
         className="py-2 px-4 flex items-center gap-2 text-xl w-full hover:bg-gray-100 dark:hover:bg-gray-600  rounded-md  text-left focus:outline-none"
         onClick={handleLogOut}
diff --git a/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx b/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx
index 54625f0..a16703d 100644
--- a/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx
+++ b/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx
@@ -141,6 +141,19 @@ const TopBar = ({ setActiveView, activeView }: any) => {
             <small>Payments</small>
           </button>
         </option>
+        <option
+          selected={activeView === "change-password"}
+          value="change-password"
+        >
+          <button
+            className={`py-2 px-4 flex items-center gap-2 text-xl w-full hover:bg-gray-100 dark:hover:bg-gray-600  rounded-md text-left focus:outline-none ${
+              activeView === "change-password" && "bg-gray-100 dark:bg-gray-600"
+            }`}
+            onClick={() => handleSidebarNavigate("change-password")}
+          >
+            <small>Change Password</small>
+          </button>
+        </option>
         <option value="logout">
           <button
             className="py-2 px-4 flex items-center gap-2 text-xl w-full hover:bg-gray-100 dark:hover:bg-gray-600  rounded-md  text-left focus:outline-none"
diff --git a/frontend/src/components/pages/resetPassword/index.tsx b/frontend/src/components/pages/resetPassword/index.tsx
index 12c1bc4..1144a14 100644
--- a/frontend/src/components/pages/resetPassword/index.tsx
+++ b/frontend/src/components/pages/resetPassword/index.tsx
@@ -74,7 +74,6 @@ const ResetPasswordPage = () => {
     const params = new URLSearchParams(paths.split("?")[1]);
     const userId = params.get("userId");
     const token = params.get("token") as string;
-    console.log({ userId, token });
     if (token) {
       try {
         jwt.verify(
@@ -92,8 +91,6 @@ const ResetPasswordPage = () => {
     }
   }, [router]);
 
-  console.log({ tokenError });
-
   const password = watch("password");
 
   if (tokenError) {