diff --git a/package-lock.json b/package-lock.json
index ba40274..5ac22f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axion": "^0.1.0",
         "bootstrap": "^5.3.3",
         "date-fns": "^3.6.0",
         "mdast-util-from-markdown": "^2.0.1",
@@ -5575,6 +5576,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/axion": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/axion/-/axion-0.1.0.tgz",
+      "integrity": "sha512-KvigipUy1Ntp1GiCHAl3GjqD5KMr/PndPVYF+qeFbl/t3dUx3//iYVHND7wUkr1O2Cmh94k/PM+yTc0sv6Lvqw==",
+      "license": "MIT"
+    },
     "node_modules/axios": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
diff --git a/package.json b/package.json
index 16e6df3..1b94c06 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axion": "^0.1.0",
     "bootstrap": "^5.3.3",
     "date-fns": "^3.6.0",
     "mdast-util-from-markdown": "^2.0.1",
diff --git a/src/Profile/profile.css b/src/Profile/profile.css
index f151b02..41412fb 100644
--- a/src/Profile/profile.css
+++ b/src/Profile/profile.css
@@ -1,3 +1,6 @@
+
+
+
 /* Profile container */
 .profile-card {
   background-color: #282828;
@@ -7,7 +10,7 @@
   margin: 100px auto;
   text-align: center;
   padding: 20px;
-  position: relative; /* Added to position the edit button relative to the container */
+  position: relative;
 }
 
 .profile-header {
@@ -25,7 +28,7 @@
   box-shadow: 10px 15px 60px rgba(255, 255, 255, .1);
 }
 
-.plus-icon {
+.profile-plus-icon {
   position: absolute;
   bottom: 0;
   right: 0;
@@ -56,112 +59,92 @@
 .profile-mob {
   font-size: 18px;
   color: gray;
-  margin-bottom: 15px;
 }
 
-/* Edit button */
-.edit-button {
-  background-color: #4CAF50; 
+.profile-edit-button {
+  background-color: #4CAF50;
+  color: black;
   border: none;
-  color: white;
   padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 20px 2px;
-  cursor: pointer;
   border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 20px;
 }
 
-.edit-button:hover {
-  background-color: #45a049;
+.profile-edit-button:hover {
+  background-color: #4caf4fcb;
 }
 
-/* Modal styles */
-.modal {
+.profile-modal {
   background-color: #282828;
   padding: 20px;
   border-radius: 10px;
-  width: 500px;
+  width: 400px;
+  max-width: 90%;
   margin: auto;
-  align-items: center;
 }
 
-.overlay {
-  background-color: rgba(0, 0, 0, 0.75);
+.profile-overlay {
+  background-color: rgba(0, 0, 0, 0.7);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  display: grid;
+  display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/* Modal form styles */
-.modal-form {
-  display: grid;
-  flex-direction: column;
+.profile-modal h2 {
+  font-size: 22px;
+  margin-bottom: 20px;
 }
 
-.modal-form label {
+.profile-modal-form label {
+  display: block;
   margin-bottom: 10px;
-  color: white;
-  display: inline-grid;
+  font-size: 16px;
 }
 
-.modal-form input {
-  padding: 10px;
+.profile-modal-form input {
+  width: calc(100% - 10px);
+  padding: 8px;
+  font-size: 14px;
   margin-top: 5px;
+  border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #1a1a1a;
-  border: 1px solid #fffdfd;
   color: white;
-  width: 90%; 
-  padding-right: 40px; 
 }
 
-.modal-buttons {
-  gap: 5px;
-  display: flex;
-  justify-content: flex-end;
+.profile-modal-buttons {
   margin-top: 20px;
+  text-align: right;
 }
 
-.modal-buttons button {
+.profile-modal-buttons button {
   background-color: #4CAF50;
+  color: black;
   border: none;
-  color: white;
   padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  cursor: pointer;
   border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: 10px;
 }
 
-.modal-buttons button:hover {
-  background-color: #45a049;
-}
-
-.input-faded {
-  opacity: 0.5;
-  border: 1px solid red;
+.profile-modal-buttons button:hover {
+  background-color: #4caf4fba;
 }
 
-.input-normal {
-  opacity: 1;
-  border: 1px solid #ccc;
-}
-.password-field {
+.profile-password-field {
   position: relative;
-  width: 100%; /* Set width to be the same as other inputs */
+  width: 100%;
 }
 
-.eye-icon {
+.profile-eye-icon {
   position: absolute;
   right: 10px;
   top: 50%;
@@ -169,4 +152,61 @@
   cursor: pointer;
 }
 
+.profile-input-normal {
+  border: 1px solid #ccc;
+}
 
+.profile-input-faded {
+  border: 1px solid red;
+}
+
+/* Alert Modal Styles */
+.profile-alert-modal {
+  background-color: white;
+  color: black;
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.profile-alert-message {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.profile-alert-buttons button {
+  background-color: #f5b921;
+  color: black;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.profile-alert-buttons button:hover {
+  background-color: #e09e1a;
+}
+
+.profile-alert-buttons .profile-close-button {
+  background-color: #d9534f;
+  margin-left: 10px;
+}
+
+.profile-alert-buttons .profile-close-button:hover {
+  background-color: #c9302c;
+}
+
+.profile-edit-password-button{
+  background-color: #4CAF50;
+  color: black;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+.profile-edit-password-button:hover {
+  background-color: #4caf4fba;
+}
\ No newline at end of file
diff --git a/src/Profile/profile.jsx b/src/Profile/profile.jsx
index 657e517..00a8684 100644
--- a/src/Profile/profile.jsx
+++ b/src/Profile/profile.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import './profile.css';
 import Navbar from '../Navbar/Navbar';
 import { FaPlus, FaEye, FaEyeSlash } from 'react-icons/fa';
@@ -11,11 +12,11 @@ Modal.setAppElement('#root');
 const Profile = () => {
   const [profileData, setProfileData] = useState({
     photo: defaultPhoto,
-    name: "Niko",
-    email: "niko@gmail.com",
-    mobile_no: "1234567890",
-    password: "Qwerty@123",
-    confirmPassword: "Qwerty@123"
+    name: "",
+    email: "",
+    mobile_no: "",
+    password: "",
+    confirmPassword: ""
   });
 
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -25,6 +26,28 @@ const Profile = () => {
   const [newProfileData, setNewProfileData] = useState(profileData);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [editPassword, setEditPassword] = useState(false);
+  const [teacher, setTeacher] = useState();
+
+  useEffect(() => {
+    axios.post('http://localhost:5000/teacher/getteacherDetails', { teacherId: localStorage.getItem("teacherId") })
+      .then((response) => {
+        setTeacher(response?.data?.teacher);
+        if (teacher) {
+          setProfileData(prevData => ({
+            ...prevData,
+            name: teacher?.name,
+            email: teacher?.email,
+            mobile_no: teacher?.mobileNumber,
+            password: teacher?.password,
+            confirmPassword: teacher?.password,
+          }));
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, );
 
   const openModal = () => {
     setNewProfileData(profileData);
@@ -55,20 +78,39 @@ const Profile = () => {
       return;
     }
 
-    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
-    if (!passwordRegex.test(password)) {
-      openAlertModal("Password must be at least 8 characters, contain one uppercase letter, one number, and one special character.", true);
-      return;
-    }
-
-    if (password !== confirmPassword) {
-      openAlertModal("Passwords do not match.", true);
-      return;
+    if (editPassword) {
+      const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+      if (!passwordRegex.test(password)) {
+        openAlertModal("Password must be at least 8 characters, contain one uppercase letter, one number, and one special character.", true);
+        return;
+      }
+
+      if (password !== confirmPassword) {
+        openAlertModal("Passwords do not match.", true);
+        return;
+      }
     }
 
-    setProfileData(newProfileData);
-    setModalIsOpen(false);
-    openAlertModal("Profile updated successfully!");
+    // Merging /edit API call
+    axios.post('http://localhost:5000/teacher/edit', {
+      teacherId: localStorage.getItem("teacherId"),
+      ...newProfileData,
+    })
+      .then((response) => {
+        console.log(teacher);
+        setProfileData({
+          ...profileData,
+          name: response?.data?.teacher?.name,
+          email: response?.data?.teacher?.email,
+          mobile_no: response?.data?.teacher?.mobileNumber,
+        });
+        openAlertModal("Profile updated successfully!");
+        closeModal();
+      })
+      .catch((error) => {
+        openAlertModal("An error occurred while updating the profile.", true);
+        console.log(error);
+      });
   };
 
   const handleImageChange = (event) => {
@@ -96,7 +138,7 @@ const Profile = () => {
       <div className="profile-card">
         <div className="profile-header">
           <img src={profileData.photo} alt="Profile" className="profile-image" />
-          <label htmlFor="file-input" className="plus-icon">
+          <label htmlFor="file-input" className="profile-plus-icon">
             <FaPlus />
           </label>
           <input
@@ -112,18 +154,18 @@ const Profile = () => {
           <p className="profile-email">Email: {profileData.email}</p>
           <p className="profile-mob">Mobile: {profileData.mobile_no}</p>
         </div>
-        <button className="edit-button" onClick={openModal}>Edit Profile</button>
+        <button className="profile-edit-button" onClick={openModal}>Edit Profile</button>
       </div>
 
       <Modal
         isOpen={modalIsOpen}
         onRequestClose={closeModal}
         contentLabel="Edit Profile"
-        className="modal"
-        overlayClassName="overlay"
+        className="profile-modal"
+        overlayClassName="profile-overlay"
       >
         <h2>Edit Profile</h2>
-        <form className="modal-form">
+        <form className="profile-modal-form">
           <label>
             Name:
             <input
@@ -148,42 +190,51 @@ const Profile = () => {
               onChange={(e) => setNewProfileData({ ...newProfileData, mobile_no: e.target.value })}
             />
           </label>
-          <label>
-            Password:
-            <div className="password-field">
-              <input
-                type={showPassword ? "text" : "password"}
-                className={passwordsMatch ? 'input-normal' : 'input-faded'}
-                value={newProfileData.password}
-                onChange={(e) => setNewProfileData({ ...newProfileData, password: e.target.value })}
-              />
-              <span onClick={togglePasswordVisibility} className="eye-icon">
-                {showPassword ? <FaEyeSlash /> : <FaEye />}
-              </span>
-            </div>
-          </label>
-          <label>
-            Confirm Password:
-            <div className="password-field">
-              <input
-                type={showConfirmPassword ? "text" : "password"}
-                className={passwordsMatch ? 'input-normal' : 'input-faded'}
-                value={newProfileData.confirmPassword}
-                onChange={(e) => setNewProfileData({ ...newProfileData, confirmPassword: e.target.value })}
-              />
-              <span onClick={toggleConfirmPasswordVisibility} className="eye-icon">
-                {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
-              </span>
-            </div>
-          </label>
-          <div className="modal-buttons">
+
+          <button type="button" className="profile-edit-password-button" onClick={() => setEditPassword(!editPassword)}>
+            {editPassword ? "Cancel Edit Password" : "Edit Password"}
+          </button>
+
+          {editPassword && (
+            <>
+              <label>
+                Password:
+                <div className="profile-password-field">
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    className={passwordsMatch ? 'profile-input-normal' : 'profile-input-faded'}
+                    value={newProfileData.password}
+                    onChange={(e) => setNewProfileData({ ...newProfileData, password: e.target.value })}
+                  />
+                  <span onClick={togglePasswordVisibility} className="profile-eye-icon">
+                    {showPassword ? <FaEyeSlash /> : <FaEye />}
+                  </span>
+                </div>
+              </label>
+              <label>
+                Confirm Password:
+                <div className="profile-password-field">
+                  <input
+                    type={showConfirmPassword ? "text" : "password"}
+                    className={passwordsMatch ? 'profile-input-normal' : 'profile-input-faded'}
+                    value={newProfileData.confirmPassword}
+                    onChange={(e) => setNewProfileData({ ...newProfileData, confirmPassword: e.target.value })}
+                  />
+                  <span onClick={toggleConfirmPasswordVisibility} className="profile-eye-icon">
+                    {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
+                  </span>
+                </div>
+              </label>
+            </>
+          )}
+
+          <div className="profile-modal-buttons">
             <button type="button" onClick={handleSave}>Save</button>
             <button type="button" onClick={closeModal}>Cancel</button>
           </div>
         </form>
       </Modal>
 
-      {/* Alert Modal for Success or Error Messages */}
       <AlertModal
         isOpen={alertIsOpen}
         onClose={() => setAlertIsOpen(false)}