diff --git a/frontend/src/components/organisms/ChangePasswordForm.tsx b/frontend/src/components/organisms/ChangePasswordForm.tsx
new file mode 100644
index 00000000..7c9d807c
--- /dev/null
+++ b/frontend/src/components/organisms/ChangePasswordForm.tsx
@@ -0,0 +1,207 @@
+import React, { useState } from "react";
+import Button from "../atoms/Button";
+import TextField from "../atoms/TextField";
+import { auth } from "@/utils/firebase";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";
+import Snackbar from "../atoms/Snackbar";
+import { useMutation } from "@tanstack/react-query";
+import { updatePassword } from "firebase/auth";
+import { User } from "firebase/auth";
+
+type FormValues = {
+  email: string;
+  oldPassword: string;
+  newPassword: string;
+  confirmNewPassword: string;
+};
+
+type formData = {
+  id: string;
+  email: string;
+  role?: string;
+  status?: string;
+  createdAt?: string;
+  verified?: boolean;
+  disciplinaryNotices?: number;
+  imageUrl?: string;
+};
+
+interface ChangePasswordFormProps {
+  userDetails: formData;
+}
+
+const ChangePasswordForm = ({ userDetails }: ChangePasswordFormProps) => {
+  /** State variables for the notification popups for profile update */
+  const [successNotificationOpen, setSuccessNotificationOpen] = useState(false);
+  const [errorNotificationOpen, setErrorNotificationOpen] = useState(false);
+
+  /** Handles form errors */
+  const [errorMessage, setErrorMessage] = React.useState<string>("");
+  const handleErrors = (errors: any) => {
+    const errorParsed = errors?.split("/")[1]?.slice(0, -2);
+    switch (errorParsed) {
+      case "invalid-email":
+        return "Invalid email address format.";
+      case "user-disabled":
+        return "User with this email has been disabled.";
+      case "user-not-found":
+        return "There is no user with this email address.";
+      case "wrong-password":
+        return "Old password is incorrect.";
+      case "weak-password":
+        return "Password must be at least 6 characters.";
+      case "invalid-password":
+        return "Invalid password.";
+      case "requires-recent-login":
+        return "Please reauthenticate to change your password.";
+      case "too-many-requests":
+        return "You have made too many requests to change your password. Please try again later.";
+      default:
+        return "Something went wrong. Please try again.";
+    }
+  };
+
+  /** React hook form */
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<FormValues>({
+    defaultValues: {
+      email: userDetails.email,
+      oldPassword: "",
+      newPassword: "",
+      confirmNewPassword: "",
+    },
+  });
+
+  /** Tanstack query mutation to reauthenticate the user session */
+  const ReAuthenticateUserSession = useMutation({
+    mutationFn: async (data: any) => {
+      const currentUser = auth.currentUser;
+      if (currentUser != null) {
+        const credentials = EmailAuthProvider.credential(
+          data.email,
+          data.oldPassword
+        );
+        return reauthenticateWithCredential(currentUser, credentials);
+      }
+    },
+    retry: false,
+  });
+
+  /** Tanstack query mutation to update user password in Firebase */
+  const updateUserPasswordInFirebase = useMutation({
+    mutationFn: async (data: any) => {
+      const user = auth.currentUser as User;
+      return updatePassword(user, data.newPassword);
+    },
+    retry: false,
+  });
+
+  /** Handles form submit for profile changes */
+  const handleChanges: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await ReAuthenticateUserSession.mutateAsync(data);
+      await updateUserPasswordInFirebase.mutateAsync(data);
+      setSuccessNotificationOpen(true);
+    } catch (error: any) {
+      setErrorNotificationOpen(true);
+      setErrorMessage(error.message);
+    }
+  };
+
+  return (
+    <>
+      {/* Profile update error snackbar */}
+      <Snackbar
+        variety="error"
+        open={errorNotificationOpen}
+        onClose={() => setErrorNotificationOpen(false)}
+      >
+        Error: {handleErrors(errorMessage)}
+      </Snackbar>
+
+      {/* Profile update success snackbar */}
+      <Snackbar
+        variety="success"
+        open={successNotificationOpen}
+        onClose={() => setSuccessNotificationOpen(false)}
+      >
+        Success: Password update was successful!
+      </Snackbar>
+
+      {/* Profile form */}
+      <form onSubmit={handleSubmit(handleChanges)} className="space-y-4">
+        <TextField
+          type="password"
+          label="Old password"
+          error={errors.oldPassword?.message}
+          {...register("oldPassword", {
+            required: { value: true, message: "Required" },
+          })}
+        />
+        <TextField
+          type="password"
+          label="New password "
+          error={errors.newPassword?.message}
+          {...register("newPassword", {
+            required: { value: true, message: "Required" },
+            minLength: {
+              value: 6,
+              message: "Password must be at least 6 characters",
+            },
+            validate: {
+              hasUpper: (value) =>
+                /.*[A-Z].*/.test(value) ||
+                "Password must contain at least one uppercase letter",
+              hasLower: (value) =>
+                /.*[a-z].*/.test(value) ||
+                "Password must contain at least one lowercase letter",
+              hasNumber: (value) =>
+                /.*[0-9].*/.test(value) ||
+                "Password must contain at least one number",
+              hasSpecialChar: (value) =>
+                /.*[\W_].*/.test(value) ||
+                "Password must contain at least one special character",
+            },
+          })}
+        />
+        <TextField
+          type="password"
+          error={errors.confirmNewPassword?.message}
+          label="Confirm password"
+          {...register("confirmNewPassword", {
+            required: { value: true, message: "Required" },
+            validate: {
+              matchPassword: (value) =>
+                value === watch("newPassword") || "Passwords do not match",
+            },
+          })}
+        />
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 pt-2">
+          <div className="order-1 sm:order-2">
+            <Button type="submit">Change password</Button>
+          </div>
+          <div className="order-2 sm:order-1">
+            <Button
+              type="button"
+              variety="secondary"
+              onClick={() => {
+                reset(undefined, { keepDefaultValues: true });
+              }}
+              disabled={!isDirty}
+            >
+              Reset changes
+            </Button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default ChangePasswordForm;
diff --git a/frontend/src/components/organisms/ProfileForm.tsx b/frontend/src/components/organisms/ProfileForm.tsx
index d4b7ef9a..eb4f3df2 100644
--- a/frontend/src/components/organisms/ProfileForm.tsx
+++ b/frontend/src/components/organisms/ProfileForm.tsx
@@ -2,9 +2,7 @@ import React, { useState } from "react";
 import Button from "../atoms/Button";
 import TextField from "../atoms/TextField";
 import Checkbox from "../atoms/Checkbox";
-import { auth } from "@/utils/firebase";
 import { useForm, SubmitHandler } from "react-hook-form";
-import { reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";
 import Snackbar from "../atoms/Snackbar";
 import { api } from "@/utils/api";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -16,10 +14,8 @@ type FormValues = {
   email: string;
   firstName: string;
   lastName: string;
+  phoneNumber: string;
   // preferredName: string;
-  oldPassword: string;
-  newPassword: string;
-  confirmNewPassword: string;
   emailNotifications: boolean;
 };
 
@@ -28,6 +24,7 @@ type formData = {
   email: string;
   firstName: string;
   lastName: string;
+  phoneNumber: string;
   nickname: string;
   role?: string;
   status?: string;
@@ -45,7 +42,7 @@ interface ProfileFormProps {
 const ProfileForm = ({ userDetails }: ProfileFormProps) => {
   const queryClient = useQueryClient();
 
-  /** State variables for the notification popups */
+  /** State variables for the notification popups for profile update */
   const [successNotificationOpen, setSuccessNotificationOpen] = useState(false);
   const [errorNotificationOpen, setErrorNotificationOpen] = useState(false);
 
@@ -54,24 +51,8 @@ const ProfileForm = ({ userDetails }: ProfileFormProps) => {
   const handleErrors = (errors: any) => {
     const errorParsed = errors?.split("/")[1]?.slice(0, -2);
     switch (errorParsed) {
-      case "invalid-email":
-        return "Invalid email address format.";
-      case "user-disabled":
-        return "User with this email has been disabled.";
-      case "user-not-found":
-        return "There is no user with this email address.";
-      case "wrong-password":
-        return "Old password is incorrect.";
-      case "weak-password":
-        return "Password must be at least 6 characters.";
-      case "invalid-password":
-        return "Invalid password.";
-      case "requires-recent-login":
-        return "Please reauthenticate to change your password.";
-      case "too-many-requests":
-        return "You have made too many requests to change your password. Please try again later.";
       default:
-        return "Something went wrong. Please try again";
+        return "Something went wrong. Please try again.";
     }
   };
 
@@ -88,46 +69,19 @@ const ProfileForm = ({ userDetails }: ProfileFormProps) => {
       email: userDetails.email,
       firstName: userDetails.firstName,
       lastName: userDetails.lastName,
+      phoneNumber: userDetails.phoneNumber,
       // preferredName: userDetails.nickname,
-      oldPassword: "",
-      newPassword: "",
-      confirmNewPassword: "",
       emailNotifications: userDetails.sendEmailNotification,
     },
   });
 
-  /** Handles checkbox */
-
-  /** Tanstack query mutation to reauthenticate the user session */
-  const ReAuthenticateUserSession = useMutation({
-    mutationFn: async (data: any) => {
-      const currentUser = auth.currentUser;
-      if (currentUser != null) {
-        const credentials = EmailAuthProvider.credential(
-          data.email,
-          data.oldPassword
-        );
-        return reauthenticateWithCredential(currentUser, credentials);
-      }
-    },
-    retry: false,
-  });
-
-  /** Tanstack query mutation to update user password in Firebase */
-  const updateUserPasswordInFirebase = useMutation({
-    mutationFn: async (data: any) => {
-      const user = auth.currentUser as User;
-      return updatePassword(user, data.newPassword);
-    },
-    retry: false,
-  });
-
   /** Tanstack query mutation to update the user profile */
   const updateProfileInDB = useMutation({
     mutationFn: async (data: any) => {
       return api.put(`/users/${userDetails.id}/profile`, {
         firstName: data.firstName,
         lastName: data.lastName,
+        phoneNumber: data.phoneNumber,
         // nickname: data.preferredName,
       });
     },
@@ -153,8 +107,6 @@ const ProfileForm = ({ userDetails }: ProfileFormProps) => {
   /** Handles form submit */
   const handleChanges: SubmitHandler<FormValues> = async (data) => {
     try {
-      await ReAuthenticateUserSession.mutateAsync(data);
-      await updateUserPasswordInFirebase.mutateAsync(data);
       await updateProfileInDB.mutateAsync(data);
       await updatePreferencesInDB.mutateAsync(data.emailNotifications);
       setSuccessNotificationOpen(true);
@@ -186,18 +138,6 @@ const ProfileForm = ({ userDetails }: ProfileFormProps) => {
 
       {/* Profile form */}
       <form onSubmit={handleSubmit(handleChanges)} className="space-y-4">
-        <TextField
-          error={errors.email?.message}
-          label="Email"
-          {...register("email", {
-            required: { value: true, message: "Required" },
-            pattern: {
-              value:
-                /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
-              message: "Invalid email address",
-            },
-          })}
-        />
         <TextField
           error={errors.firstName?.message}
           label="First name"
@@ -212,59 +152,37 @@ const ProfileForm = ({ userDetails }: ProfileFormProps) => {
             required: { value: true, message: "Required" },
           })}
         />
-        {/* <TextField
-          label="Preferred name"
-          error={errors.preferredName?.message}
-          {...register("preferredName", {
-            required: { value: true, message: "Required" },
-          })}
-        /> */}
         <TextField
-          type="password"
-          label="Old password"
-          error={errors.oldPassword?.message}
-          {...register("oldPassword", {
+          error={errors.email?.message}
+          label="Email"
+          {...register("email", {
             required: { value: true, message: "Required" },
+            pattern: {
+              value:
+                /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
+              message: "Invalid email address",
+            },
           })}
         />
         <TextField
-          type="password"
-          label="New password "
-          error={errors.newPassword?.message}
-          {...register("newPassword", {
+          error={errors.phoneNumber?.message}
+          label="Phone number"
+          {...register("phoneNumber", {
             required: { value: true, message: "Required" },
-            minLength: {
-              value: 6,
-              message: "Password must be at least 6 characters",
-            },
-            validate: {
-              hasUpper: (value) =>
-                /.*[A-Z].*/.test(value) ||
-                "Password must contain at least one uppercase letter",
-              hasLower: (value) =>
-                /.*[a-z].*/.test(value) ||
-                "Password must contain at least one lowercase letter",
-              hasNumber: (value) =>
-                /.*[0-9].*/.test(value) ||
-                "Password must contain at least one number",
-              hasSpecialChar: (value) =>
-                /.*[\W_].*/.test(value) ||
-                "Password must contain at least one special character",
+            pattern: {
+              value:
+                /^\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/,
+              message: "Invalid phone number",
             },
           })}
         />
-        <TextField
-          type="password"
-          error={errors.confirmNewPassword?.message}
-          label="Confirm password"
-          {...register("confirmNewPassword", {
+        {/* <TextField
+          label="Preferred name"
+          error={errors.preferredName?.message}
+          {...register("preferredName", {
             required: { value: true, message: "Required" },
-            validate: {
-              matchPassword: (value) =>
-                value === watch("newPassword") || "Passwords do not match",
-            },
           })}
-        />
+        /> */}
         <Controller
           name="emailNotifications"
           control={control}
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
index ed9fabe2..ac567801 100644
--- a/frontend/src/pages/profile.tsx
+++ b/frontend/src/pages/profile.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import ProfileForm from "@/components/organisms/ProfileForm";
+import ChangePasswordForm from "@/components/organisms/ChangePasswordForm";
 import CenteredTemplate from "@/components/templates/CenteredTemplate";
 import Banner from "@/components/molecules/Banner";
 import { useAuth } from "@/utils/AuthContext";
@@ -97,7 +98,7 @@ const Profile = () => {
           </div>
         )}
       </Card>
-      <h3 className="text-xl font-normal">My Profile</h3>
+      <h3 className="text-xl font-normal mt-12">My Profile</h3>
       <Card size="medium">
         <ProfileForm
           userDetails={{
@@ -107,6 +108,15 @@ const Profile = () => {
           }}
         />
       </Card>
+      <h3 className="text-xl font-normal mt-12">My Account</h3>
+      <Card size="medium">
+        <ChangePasswordForm
+          userDetails={{
+            ...data.profile,
+            ...data,
+          }}
+        />
+      </Card>
     </CenteredTemplate>
   );
 };