diff --git a/app/api/profile/route.ts b/app/api/profile/route.ts
index 2bdbf4e..1670b16 100644
--- a/app/api/profile/route.ts
+++ b/app/api/profile/route.ts
@@ -16,24 +16,23 @@ export async function PUT(request: Request) {
     // Parse the request body as JSON
     const body = await request.json();
 
-    // Destructure the image URL from the request body
-    const { image } = body;
+    // Destructure the fields from the request body
+    const { username, name, surname, email, tel, dateOfBirth, gender } = body;
 
-    // Update the user's profile image in the database
+    // Update the user's profile in the database
     const user = await prisma.user.update({
       where: { id: currentUser.id },
-      data: { image },
+      data: { username, name, surname, email, tel, dateOfBirth, gender },
     });
 
     // Return the updated user profile as a JSON response
     return NextResponse.json(user);
   } catch (error) {
-    console.error('Error updating profile image:', error);
+    console.error('Error updating profile:', error);
     return NextResponse.error();
   }
 }
 
-
 // Handler for the GET request
 export async function GET(request: Request) {
   try {
@@ -50,7 +49,7 @@ export async function GET(request: Request) {
         name: true,
         surname: true,
         email: true,
-        telephone: true,
+        tel: true,
         dateOfBirth: true,
         gender: true,
         createdAt: true,
@@ -68,6 +67,7 @@ export async function GET(request: Request) {
     return NextResponse.error();
   }
 }
+
 // Handler for the DELETE request
 export async function DELETE(request: Request) {
   try {
@@ -91,4 +91,4 @@ export async function DELETE(request: Request) {
     console.error('Error deleting profile image:', error);
     return NextResponse.error();
   }
-}
+}
\ No newline at end of file
diff --git a/app/components/profile/PersonalInfo.tsx b/app/components/profile/PersonalInfo.tsx
index 5893bfe..e945fff 100644
--- a/app/components/profile/PersonalInfo.tsx
+++ b/app/components/profile/PersonalInfo.tsx
@@ -1,61 +1,176 @@
+import { useState, useEffect } from "react";
 import ProfileFrameElement from "./profileFrame";
+import { toast } from "react-hot-toast";
 
-interface UserProfileCardProps {
-  user: {
-    name: string | null;
-    email: string | null;
-  }
+interface UserProfile {
+  username: string;
+  name: string;
+  surname: string;
+  email: string;
+  tel: string;
+  dateOfBirth: string;
+  gender: string;
 }
 
 const PersonalInfo = () => {
+  const [userData, setUserData] = useState<UserProfile>({
+    username: "",
+    name: "",
+    surname: "",
+    email: "",
+    tel: "",
+    dateOfBirth: "",
+    gender: ""
+  });
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      const response = await fetch('../api/profile');
+      const data = await response.json();
+      setUserData(data);
+    };
+
+    fetchUserData();
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setUserData({
+      ...userData,
+      [name]: value
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const response = await fetch('../api/profile', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(userData),
+    });
+
+    if (response.ok) {
+      const updatedUser = await response.json();
+      setUserData(updatedUser);
+      toast.success('Profile updated successfully');
+    } else {
+      toast.error('Failed to update profile');
+    }
+  };
+
   return (
     <ProfileFrameElement text="Personal information">
-    <form className="space-y-4 m-4 px-8">
-            <div className="flex flex-col">
-                <label className="mb-1 font-medium">Username</label>
-                <input type="text" placeholder="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
-            </div>
-
-            <div className="grid grid-cols-2">
-                <div className="flex flex-col mr-2">
-                    <label className="mb-1 font-medium">Name</label>
-                    <input type="text" value="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
-                </div>
-                <div className="flex flex-col ml-2">
-                    <label className="mb-1 font-medium">Surname</label>
-                    <input type="text" placeholder="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
-                </div>
-            </div>
-
-            <div className="flex flex-col">
-                <label className="mb-1 font-medium">Email</label>
-                <input type="email" value="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
-            </div>
-            <div className="flex flex-col">
-                <label className="mb-1 font-medium">Contact Number</label>
-                <input type="text" placeholder="+212 123456789" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
-            </div>
-            <div className="grid grid-cols-2 mr-2">
-                <div className="flex flex-col">
-                    <label className="mb-1 font-medium">Date of Birth</label>
-                    <input type="date" value="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
-                </div>
-                <div className="flex flex-col ml-2">
-                    <label className="mb-1 font-medium">Gender</label>
-                    <select className="p-2 border rounded focus:border-pink-500 focus:outline-none">
-                    <option>Female</option>
-                    <option>Male</option>
-                    </select>
-                </div>
-            </div>
-            <div className="flex justify-end mt-8 space-x-2 ">
-                <button type="reset" className="border border-pink-500 text-pink-500 px-4 py-1 rounded">
-                    cancel
-                </button>
-                <button type="submit" className="bg-pink-500 text-white px-5 py-1 rounded">save</button>
-            </div>
-    </form>
+      <form className="space-y-4 m-4 px-8" onSubmit={handleSubmit}>
+        <div className="flex flex-col">
+          <label className="mb-1 font-medium">Username</label>
+          <input 
+            type="text" 
+            name="username"
+            value={userData.username || ''} 
+            onChange={handleChange} 
+            className="p-2 border rounded focus:border-pink-500 focus:outline-none" 
+          />
+        </div>
+
+        <div className="grid grid-cols-2">
+          <div className="flex flex-col mr-2">
+            <label className="mb-1 font-medium">Name</label>
+            <input 
+              type="text" 
+              name="name"
+              value={userData.name || ''} 
+              onChange={handleChange} 
+              className="p-2 border rounded focus:border-pink-500 focus:outline-none" 
+            />
+          </div>
+          <div className="flex flex-col ml-2">
+            <label className="mb-1 font-medium">Surname</label>
+            <input 
+              type="text" 
+              name="surname"
+              value={userData.surname || ''} 
+              onChange={handleChange} 
+              className="p-2 border rounded focus:border-pink-500 focus:outline-none" 
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col">
+          <label className="mb-1 font-medium">Email</label>
+          <input 
+            type="email" 
+            name="email"
+            value={userData.email || ''} 
+            onChange={handleChange} 
+            className="p-2 border rounded focus:border-pink-500 focus:outline-none" 
+          />
+        </div>
+
+        <div className="flex flex-col">
+          <label className="mb-1 font-medium">Contact Number</label>
+          <input 
+            type="number" 
+            name="tel"
+            value={userData.tel || ''} 
+            onChange={handleChange} 
+            className="p-2 border rounded focus:border-pink-500 focus:outline-none" 
+          />
+        </div>
+
+        <div className="grid grid-cols-2 mr-2">
+          <div className="flex flex-col">
+            <label className="mb-1 font-medium">Date of Birth</label>
+            <input 
+              type="date" 
+              name="dateOfBirth"
+              value={userData.dateOfBirth || ''} 
+              onChange={handleChange} 
+              className="p-2 border rounded focus:border-pink-500 focus:outline-none" 
+            />
+          </div>
+          <div className="flex flex-col ml-2">
+            <label className="mb-1 font-medium">Gender</label>
+            <select 
+              name="gender"
+              value={userData.gender || ''} 
+              onChange={handleChange} 
+              className="p-2 border rounded focus:border-pink-500 focus:outline-none"
+            >
+              <option value="Female">Female</option>
+              <option value="Male">Male</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="flex justify-end mt-8 space-x-2">
+          <button 
+            type="reset" 
+            className="border border-pink-500 text-pink-500 px-4 py-1 rounded"
+            onClick={() => setUserData({
+              username: "",
+              name: "",
+              surname: "",
+              email: "",
+              tel: "",
+              dateOfBirth: "",
+              gender: ""
+            })}
+          >
+            Cancel
+          </button>
+          <button 
+            type="submit" 
+            className="bg-pink-500 text-white px-5 py-1 rounded"
+          >
+            Save
+          </button>
+        </div>
+      </form>
     </ProfileFrameElement>
   );
-}
-export default PersonalInfo;
+};
+
+export default PersonalInfo;
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index fedc3ac..553d0b1 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,5 +1,3 @@
-
-
 generator client {
   provider = "prisma-client-js"
 }
@@ -17,7 +15,7 @@ model User {
   dateOfBirth     String?
   email           String?   @unique
   emailVerified   DateTime?
-  telephone       Int? 
+  tel             String?    
   recoveryEmail   String? 
   gender          String?
   image           String?
@@ -43,7 +41,7 @@ model Account {
   providerAccountId  String
   refresh_token      String?  @db.String
   access_token       String?  @db.String
-  expires_at         Int?
+  expires_at         String?
   token_type         String?
   scope              String?
   id_token           String?  @db.String