diff --git a/backend/Migrations/001_initial.up.sql b/backend/Migrations/001_initial.up.sql
index 97ce03ca..bc464b76 100644
--- a/backend/Migrations/001_initial.up.sql
+++ b/backend/Migrations/001_initial.up.sql
@@ -171,15 +171,15 @@ VALUES
         'awaismadad12@gmail.com',
         '$2a$10$RoehRLxjbt1jHUT2j9Gihu6QYeRRa3xuycKs0GGDxpEb3dJFzo6ga',
         'female',
-        'Awais Madad',
+        'Awais Madad 2',
         '1995-03-15',
         'tutor'
     ),
     (
-        'awaismadad@gmail.com',
+        'awaismadad123@gmail.com',
         '$2a$10$RoehRLxjbt1jHUT2j9Gihu6QYeRRa3xuycKs0GGDxpEb3dJFzo6ga',
         'female',
-        'Awais Madad',
+        'Awais Madad 3',
         '1995-03-15',
         'tutor'
     );
diff --git a/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.css b/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.css
index fae24f77..19f7dff1 100644
--- a/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.css
+++ b/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.css
@@ -1,91 +1,85 @@
 .profile-settings {
-    display: flex;
-    justify-content: space-between;
-  }
-  
-  .profile-settings-left {
-    flex: 1;
-    padding: 20px;
-    margin-left: 50px;
-  }
-  
-  .profile-settings-left h2 {
-    margin-bottom: 1rem;
-  }
-  
-  .form-group {
-    margin-bottom: 1.5rem;
-  }
-  
-  .form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-  }
-  
-  .form-group input {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
-  .update-btn {
-    padding: 0.5rem 1rem;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .upload-button {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  
-  .file-input {
-    display: none;
-  }
-  .profile-settings-right {
-    flex: 1;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .profile-photo {
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    background-color: #ccc;
-    margin-bottom: 20px;
-    overflow: hidden;
-  }
-  
-  .profile-photo img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .photo-upload {
-    margin-top: 1rem;
-    text-align: center;
-  }
-  
-  .photo-upload label {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    width: 150px; /* Adjust the width as needed */
-    text-align: center;
-  }
\ No newline at end of file
+  display: flex;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  margin: 0 auto;
+}
+.field{
+  text-align: left;
+}
+.profile-settings-left {
+  flex: 1;
+  padding: 30px;
+}
+
+.profile-settings-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+  background-color: #f5f5f5;
+  border-right: 1px solid #e0e0e0;
+}
+
+.profile-photo-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.upload-button {
+  cursor: pointer;
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.upload-button:hover {
+  background-color: #0056b3;
+}
+
+.file-input {
+  display: none;
+}
+
+.form-group {
+  margin-bottom: 40px;
+  width: 70%;;
+}
+
+.form-input {
+  width: calc(100% );
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+}
+
+.update-btn,
+.edit-btn {
+  background-color: #007bff;
+  color: #ffffff;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.update-btn:hover,
+.edit-btn:hover {
+  background-color: #0056b3;
+}
+
+.profile-settings-left h2 {
+  margin-bottom: 20px;
+  font-size: 1.5em;
+  color: #333;
+}
diff --git a/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.jsx b/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.jsx
index 09728e72..a71ed6c8 100644
--- a/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.jsx
+++ b/frontend/src/Components/TeacherDashboard/ContentArea/Settings/Settings.jsx
@@ -1,83 +1,206 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import "./Settings.css";
 
 function Settings() {
-  const [fullName, setFullName] = useState("");
-  const [password, setPassword] = useState("");
-  const [email, setEmail] = useState("");
+  const [userInfo, setUserInfo] = useState({});
+  const [isEditing, setIsEditing] = useState(false);
 
-  const handleFullNameChange = (e) => {
-    setFullName(e.target.value);
+  const GetUserData = async () => {
+    try {
+      const response = await fetch(
+        "http://localhost:4000/user/GetProfileFromToken",
+        {
+          method: "GET",
+          credentials: "include",
+        }
+      );
+      const data = await response.json();
+      if (data.status === "success") {
+        setUserInfo(data.user);
+      } else {
+        console.log("Failed to load user data");
+      }
+    } catch (error) {
+      console.error("Error loading user data:", error);
+    }
   };
 
-  const handlePasswordChange = (e) => {
-    setPassword(e.target.value);
+  const handleUpdateInfo = async () => {
+    try {
+      const response = await fetch(
+        "http://localhost:4000/user/UpdateProfileFromToken",
+        {
+          method: "PUT",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            User: {
+              Name: userInfo.name,
+              Dob: userInfo.dob,
+              Gender: userInfo.gender,
+              About: userInfo.about
+            },
+          }),
+        }
+      );
+      const data = await response.json();
+      if (data.status === "success") {
+        setIsEditing(false);
+        localStorage.username = userInfo.name
+      } else {
+        console.error("Error Updating user data:", data.message);
+      }
+    } catch (error) {
+      console.error("Error Updating user data:", error);
+    }
   };
 
-  const handleEmailChange = (e) => {
-    setEmail(e.target.value);
+  const handleEditClick = () => {
+    setIsEditing(true);
   };
 
-  const handleUpdateInfo = () => {
-    // Handle update info logic here, e.g., make API request to update user info
-    console.log("Full Name:", fullName);
-    console.log("Password:", password);
-    console.log("Email:", email);
+  useEffect(() => {
+    GetUserData();
+  }, []);
+
+  const handleDateChange = (date) => {
+    setUserInfo((prevUserInfo) => ({
+      ...prevUserInfo,
+      dob: date.toISOString(), // Save the date in ISO format
+    }));
   };
-  const handleProfilePictureUpload = (e) => {
-    const file = e.target.files[0];
-    // Handle the file upload logic here, e.g., make API request to upload the file
-    console.log("Uploaded file:", file);
+
+  const handleInputChange = (e) => {
+    const { id, value } = e.target;
+    setUserInfo((prevUserInfo) => ({
+      ...prevUserInfo,
+      [id]: value,
+    }));
   };
 
   return (
     <div className="profile-settings">
       <div className="profile-settings-right">
-        <div className="profile-photo">{/* Photo display */}</div>
+        <div className="profile-photo">
+          <img
+            src="https://avatars.githubusercontent.com/u/68877880?v=4"
+            alt="Profile"
+            className="profile-photo-img"
+          />
+        </div>
+
         <div className="photo-upload">
           <label htmlFor="profilePictureInput" className="upload-button">
             Upload New Picture
           </label>
-          <input
-            type="file"
-            id="profilePictureInput"
-            className="file-input"
-            onChange={handleProfilePictureUpload}
-          />
+          <input type="file" id="profilePictureInput" className="file-input" />
+        </div>
+        <br />
+        <br />
+        <div>
+          <label>
+            <b>About me</b>
+          </label>
+          {isEditing ? (
+            <input
+              type="text"
+              id="about"
+              defaultValue={userInfo.about}
+              onChange={handleInputChange}
+              className="form-input"
+            />
+          ) : (
+            <p className="field" id="aboutme">
+              {userInfo.about}
+            </p>
+          )}
         </div>
       </div>
+
       <div className="profile-settings-left">
         <h2>Profile Settings</h2>
+
         <div className="form-group">
-          <label htmlFor="fullName">Full Name</label>
-          <input
-            type="text"
-            id="fullName"
-            value={fullName}
-            onChange={handleFullNameChange}
-          />
+          <label>
+            <b>Name</b>
+          </label>
+          {isEditing ? (
+            <input
+              type="text"
+              id="name"
+              value={userInfo.name}
+              onChange={handleInputChange}
+              className="form-input"
+            />
+          ) : (
+            <p className="field" id="name">
+              {userInfo.name}
+            </p>
+          )}
         </div>
+
         <div className="form-group">
-          <label htmlFor="password">Password</label>
-          <input
-            type="password"
-            id="password"
-            value={password}
-            onChange={handlePasswordChange}
-          />
+          <label>
+            <b>Date of Birth</b>
+          </label>
+          {isEditing ? (
+            <DatePicker
+              selected={new Date(userInfo.dob)}
+              onChange={(date) => handleDateChange(date)}
+              className="form-input"
+            />
+          ) : (
+            <p className="field" id="DOB">
+              {new Date(userInfo.dob).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </p>
+          )}
         </div>
+
         <div className="form-group">
-          <label htmlFor="email">Email Address</label>
-          <input
-            type="email"
-            id="email"
-            value={email}
-            onChange={handleEmailChange}
-          />
+          <label>
+            <b>Email Address</b>
+          </label>
+          <p className="field">{userInfo.email}</p>
         </div>
-        <button className="update-btn" onClick={handleUpdateInfo}>
-          Update Info
-        </button>
+
+        <div className="form-group">
+          <label>
+            <b>Gender</b>
+          </label>
+          {isEditing ? (
+            <select
+              id="gender"
+              value={userInfo.gender}
+              onChange={handleInputChange}
+              className="form-input"
+            >
+              <option value="Male">Male</option>
+              <option value="Female">Female</option>
+            </select>
+          ) : (
+            <p className="field" id="gender">
+              {userInfo.gender}
+            </p>
+          )}
+        </div>
+
+        {isEditing ? (
+          <button className="update-btn" onClick={handleUpdateInfo}>
+            Update Information
+          </button>
+        ) : (
+          <button className="edit-btn" onClick={handleEditClick}>
+            Edit
+          </button>
+        )}
       </div>
     </div>
   );