diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index b7e1c3e..adc45d1 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -1,10 +1,12 @@
 "use client";
 import React from 'react';
 import Sidebar from '@/components/Sidebar';
+import { Toaster } from 'react-hot-toast';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
     return (
         <div className="flex flex-col min-h-screen w-full">
+            <Toaster></Toaster>
             {/* Mobile Header*/}
             <div className="md:hidden h-14 bg-panelColor w-full flex items-center px-4 shadow-md">
                 <div className="md:hidden">
@@ -14,7 +16,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                     <div className="text-white font-jetbrains text-lg">Home</div>
                 </div>
             </div>
-            
             <div className="flex flex-1 relative">
                 {/* Desktop Sidebar*/}
                 <div className="hidden md:block md:w-[180px] lg:w-[200px] h-[calc(100vh-0px)] top-0 sticky">
diff --git a/src/app/(dashboard)/profile/components/EditProfileComponent.tsx b/src/app/(dashboard)/profile/components/EditProfileComponent.tsx
index 95e1181..3878bed 100644
--- a/src/app/(dashboard)/profile/components/EditProfileComponent.tsx
+++ b/src/app/(dashboard)/profile/components/EditProfileComponent.tsx
@@ -1,14 +1,10 @@
 "use client";
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { GetProfileService } from '@/services/profile-services';
+import { MemberProfileDetails } from '@/types/types';
+import toast from 'react-hot-toast';
 
-type ProfileData = {
-  name: string;
-  email: string;
-  username: string;
-  bio: string;
-  profileImage: string;
-}
 
 type EditProfileProps = {
   onCancel: () => void;
@@ -16,17 +12,29 @@ type EditProfileProps = {
 
 export default function EditProfileComponent({ onCancel }: EditProfileProps) {
   const router = useRouter();
-  
-  const [profileData, setProfileData] = useState<ProfileData>({
-    name: "John Doe",
-    email: "johndoe@example.com",
-    username: "johndoe",
-    bio: "just a random code to have a profile structure to later code on",
-    profileImage: "/placeholder.webp"
+
+  const [profileData, setProfileData] = useState<MemberProfileDetails>({
+    memberId:0,
+    groupId:1,
+    githubUser:"",
+    year:1,
+    name: "",
+    rollNo: "",
+    sex: "",
+    track: "",
+    email: "",
+    hostel: '',
+    discordId: '',
+    macAddress: '',
   });
-  
+  const tracks = ['Web', 'Systems', 'AI', 'Mobile'];
+
+
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [previewUrl, setPreviewUrl] = useState<string>(profileData.profileImage);
+  const [isLoading, setIsLoading] = useState(true);
+  const [GenToggle, setGenToggle] = useState([false, false]);
+  const [previewUrl, setPreviewUrl] = useState<string>("/placeholder.webp");
+  const [isUserEnrolling, setUserEnrolling] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
@@ -36,32 +44,57 @@ export default function EditProfileComponent({ onCancel }: EditProfileProps) {
     });
   };
 
-  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      const file = e.target.files[0];
-      const fileUrl = URL.createObjectURL(file);
-      setPreviewUrl(fileUrl);
-      
-      // You would typically upload the image to your server here
-      // and then update the profileData with the returned URL
-      // For this demo, we'll just update the preview
+  useEffect(()=>{
+    async function getProfileDetails() {
+      const member = await GetProfileService.getProfileDetails();
+     if(member){
+        setProfileData(member);
+        const url = await GetProfileService.HandleProfileImage(member);
+        if(url != "") setPreviewUrl(url);
+        setGenToggle([member?.sex == "M",member?.sex == "F"]);
+        setIsLoading(false);
+     }
+     else {
+      setIsLoading(false);
+      setUserEnrolling(true);
+     }
     }
-  };
+    getProfileDetails();
+  },[])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
-    
-    // Simulate API call
-    setTimeout(() => {
+    async function Update() {
+      let data = await GetProfileService.UpdateProfileDetails(profileData);
+      if(data){
+        setProfileData(data);
+        handleCancel();
+      }
+      else{
+        toast.error("Error in Updating User");
+      }
       setIsSubmitting(false);
-      // Always redirect back to the main profile page after successful update
-      router.push('/profile');
-    }, 1000);
+    }
+
+    async function Create() {
+      let data = await GetProfileService.CreateProfileDetails(profileData);
+      if(data){
+        setProfileData(data);
+        handleCancel();
+      }
+      else{
+        toast.error("Error in Creating User");
+      }
+      setIsSubmitting(false);
+    }
+
+    !isUserEnrolling ? Update() : Create();
   };
 
   const handleCancel = () => {
     if (onCancel) {
+      console.log(profileData);
       onCancel();
     } else {
       // Always navigate to the main profile route
@@ -69,103 +102,207 @@ export default function EditProfileComponent({ onCancel }: EditProfileProps) {
     }
   };
 
-  return (
+  const trackUi: JSX.Element[] = tracks.map((track) => (
+    <option key={track} value={track}>
+      {track}
+    </option>
+  ));
+
+  if(!isLoading){
+      return (
     <div className="container mx-auto px-4 py-8">
-      <div className="bg-panelColor rounded-lg shadow-md p-6">
-        <h1 className="text-2xl font-bold text-white mb-6">Edit Profile</h1>
-        
-        <form onSubmit={handleSubmit}>
-          <div className="flex flex-col md:flex-row gap-6 mb-6">
-            <div className="flex-shrink-0">
-              <div className="relative">
-                <img 
-                  src={previewUrl} 
-                  alt={profileData.name} 
-                  className="w-32 h-32 rounded-full object-cover border-2 border-primaryYellow"
-                />
-                <label 
-                  htmlFor="profileImage"
-                  className="absolute bottom-0 right-0 bg-primaryYellow p-2 rounded-full cursor-pointer"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                  </svg>
-                  <input 
-                    id="profileImage"
-                    type="file"
-                    accept="image/*"
-                    onChange={handleImageChange}
-                    className="hidden"
-                  />
-                </label>
-              </div>
+      {isUserEnrolling ? (
+      <h1 className="text-2xl font-bold text-white mb-2">SetUp Profile</h1>
+      ) : (
+      <h1 className="text-2xl font-bold text-white mb-2">Update Profile</h1>
+      )}
+      <hr />
+      <form onSubmit={handleSubmit}>
+      <div className="bg-panelColor rounded-lg mt-6 shadow-md p-6">
+        <h1 className="text-2xl font-bold text-white mb-6">Personal Details</h1>
+        <div className="flex flex-col md:flex-row gap-6 mb-6">
+        <div className="flex-shrink-0">
+          <div className="relative">
+          <img
+            src={previewUrl}
+            alt={profileData.name}
+            className={`w-32 h-32 rounded-full object-cover border-2 border-primaryYellow`}
+          />
+          </div>
+        </div>
+
+        <div className="flex-grow">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Name</label>
+            <input
+            type="text"
+            name="name"
+            disabled={!isUserEnrolling}
+            value={profileData.name}
+            onChange={handleChange}
+            className={`w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow ${!isUserEnrolling ? 'opacity-50 cursor-not-allowed' : ''}`}
+            />
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Gender</label>
+            <div className="grid grid-cols-2  gap-3 mt-2 w-full">
+            {['Male', 'Female'].map((label, idx) => (
+              <button
+              key={label}
+              type="button"
+              disabled={!isUserEnrolling}
+              className={`w-full px-4 py-2 h-10 rounded-full transition-colors border border-gray-700 font-semibold truncate
+              ${GenToggle[idx] ? 'bg-primaryYellow text-black shadow-lg' : 'bg-bgMainColor text-white hover:bg-gray-800'}
+              ${!isUserEnrolling ? 'opacity-50 cursor-not-allowed' : ''}
+              `}
+              onClick={() => {
+                setGenToggle([idx === 0, idx === 1]);
+                setProfileData({ ...profileData, sex: label == 'Male' ? 'M' : 'F' });
+              }}
+              >
+              {label}
+              </button>
+            ))}
+          </div>
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Track</label>
+            <select
+            name="track"
+            value={profileData.track}
+            onChange={(e) => setProfileData({ ...profileData, track: e.target.value })}
+            className={`w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow`}
+            >
+            {trackUi}
+            </select>
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Roll Number</label>
+            <input
+            type="text"
+            disabled={!isUserEnrolling}
+            name="rollNo"
+            value={profileData.rollNo}
+            onChange={handleChange}
+            className={`w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow ${!isUserEnrolling ? 'opacity-50 cursor-not-allowed' : ''}`}
+            />
+          </div>
+          <div className='flex w-full justify-evenly'>
+            <div className='w-full'>
+              <label className="block text-gray-400 text-sm mb-1">Year</label>
+              <button
+                type="button"
+                disabled={!isUserEnrolling}
+                className={`px-4 w-full py-2 h-10  bg-bgMainColor hover:bg-primaryYellow hover:text-black rounded-md transition-colors border border-gray-700 font-semibold 
+                ${!isUserEnrolling ? 'opacity-50 cursor-not-allowed' : ''}`}
+                onClick={() => {
+                const nextYear = (profileData.year % 4) + 1; // Increment year and wrap around
+                setProfileData({ ...profileData, year: nextYear });
+                }}
+              >
+                {profileData.year === 1 ? '1st Year' : profileData.year === 2 ? '2nd Year' : profileData.year === 3 ? '3rd Year' : '4th Year'}
+              </button>
+            </div>
+            <div className='w-10'></div>
+            <div className='w-full'>
+              <label className="block text-gray-400 text-sm mb-1">Group</label>
+              <button
+                type="button"
+                disabled={!isUserEnrolling}
+                className={`px-4 py-2 w-full h-10 bg-bgMainColor hover:bg-primaryYellow hover:text-black rounded-md transition-colors border border-gray-700 font-semibold 
+                ${!isUserEnrolling ? 'opacity-50 cursor-not-allowed' : ''}`}
+                onClick={() => {
+                const nextGroup = (profileData.groupId % 4) + 1; // Increment year and wrap around
+                setProfileData({ ...profileData, groupId: nextGroup });
+                }}
+              >
+                {profileData.groupId === 1 ? 'Group 1' : profileData.groupId === 2 ? 'Group 2' : profileData.groupId === 3 ? 'Group 3' : 'Group 4'}
+              </button>
             </div>
-            
+          </div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+        <div className="bg-panelColor rounded-lg lg:mt-16 sm:mt-8 shadow-md p-6">
+          <h1 className="text-2xl font-bold text-white mb-6">Additional Details</h1>
+          <div className="flex flex-col md:flex-row gap-6 mb-6">
             <div className="flex-grow">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                 <div>
-                  <label className="block text-gray-400 text-sm mb-1">Name</label>
-                  <input 
+                  <label className="block text-gray-400 text-sm mb-1">Hostel</label>
+                  <input
                     type="text"
-                    name="name"
-                    value={profileData.name}
+                    name="hostel"
+                    value={profileData.hostel}
                     onChange={handleChange}
                     className="w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow"
                   />
                 </div>
+
                 <div>
-                  <label className="block text-gray-400 text-sm mb-1">Username</label>
-                  <input 
+                  <label className="block text-gray-400 text-sm mb-1">Email</label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={profileData.email}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow"
+                  />
+                </div>
+                <div>
+                  <label className="block text-gray-400 text-sm mb-1">Discord Id</label>
+                  <input
                     type="text"
-                    name="username"
-                    value={profileData.username}
+                    name="discordId"
+                    value={profileData.discordId}
                     onChange={handleChange}
                     className="w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow"
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-400 text-sm mb-1">Email</label>
-                  <input 
-                    type="email"
-                    name="email"
-                    value={profileData.email}
+                  <label className="block text-gray-400 text-sm mb-1">Mac Address</label>
+                  <input
+                    type="text"
+                    name="macAddress"
+                    value={profileData.macAddress}
                     onChange={handleChange}
                     className="w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow"
                   />
                 </div>
               </div>
-              
-              <div>
-                <label className="block text-gray-400 text-sm mb-1">Bio</label>
-                <textarea 
-                  name="bio"
-                  value={profileData.bio}
-                  onChange={handleChange}
-                  rows={4}
-                  className="w-full px-3 py-2 bg-bgMainColor text-white border border-gray-700 rounded-md focus:outline-none focus:border-primaryYellow"
-                />
-              </div>
             </div>
           </div>
-          
+
           <div className="flex justify-end space-x-4">
-            <button 
+            <button
               onClick={handleCancel}
               type="button"
               className="px-4 py-2 border border-gray-600 text-white rounded-md hover:bg-gray-800 transition-colors"
             >
               Cancel
             </button>
-            <button 
-              type="submit" 
+            <button
+              type="submit"
               className="px-4 py-2 bg-primaryYellow text-black rounded-md hover:bg-opacity-90 transition-colors"
               disabled={isSubmitting}
             >
               {isSubmitting ? "Saving..." : "Save Changes"}
             </button>
           </div>
-        </form>
-      </div>
+        </div>
+      </form>
+
     </div>
   );
+  }else{
+    return(
+      <div className="flex items-center justify-center w-full min-h-screen">
+        <h1 className="text-white text-lg font-medium">Loading...</h1>
+      </div>
+    )
+  }
+
 }
diff --git a/src/services/profile-services.ts b/src/services/profile-services.ts
new file mode 100644
index 0000000..506bbd3
--- /dev/null
+++ b/src/services/profile-services.ts
@@ -0,0 +1,172 @@
+"use client";
+import client from "@/lib/apollo-client";
+import { gql, ApolloError } from "@apollo/client";
+import toast from "react-hot-toast";
+import { MemberProfileDetails } from "@/types/types";
+
+const GET_PROFILE_DETAILS = gql`
+  query getuser($id: Int) {
+    member(memberId: $id) {
+      memberId
+      name
+      track
+      year
+      groupId
+      sex
+      githubUser
+      rollNo
+      hostel
+      email
+      discordId
+      macAddress
+    }
+  }
+`;
+
+const UPDATE_PROFILE_QUERY = gql`
+  mutation ($member: UpdateMemberInput!) {
+    updateMember(input: $member) {
+      memberId
+      name
+      track
+      year
+      groupId
+      sex
+      rollNo
+      hostel
+      email
+      githubUser
+      discordId
+      macAddress
+    }
+  }
+`;
+
+const CREATE_PROFILE_QUERY = gql`
+  mutation ($member: CreateMemberInput!) {
+    createMember(input: $member) {
+      memberId
+      name
+      track
+      year
+      sex
+      rollNo
+      hostel
+      githubUser
+      groupId
+      email
+      discordId
+      macAddress
+    }
+  }
+`;
+
+type MemberResponse = {
+  member: MemberProfileDetails;
+};
+
+type MemberUpdateResponse = {
+  updateMember: MemberProfileDetails;
+};
+
+type MemberCreateResponse = {
+  createMember: MemberProfileDetails;
+};
+
+function cleanInput(obj: any) {
+  const cleaned: any = {};
+  Object.keys(obj).forEach((key) => {
+    if (key !== "__typename") cleaned[key] = obj[key];
+  });
+  return cleaned;
+}
+
+// Temporary until auth integration
+const test_user = 47;
+
+function handleApolloError(error: unknown, context: string) {
+  if (error instanceof ApolloError) {
+    if (error.graphQLErrors.length > 0) {
+      const gqlMessage = error.graphQLErrors.map(e => e.message).join(", ");
+      console.error(`[GraphQL Error] (${context}):`, gqlMessage);
+      toast.error(`GraphQL Error: ${gqlMessage}`);
+    }
+    if (error.networkError) {
+      console.error(`[Network Error] (${context}):`, error.networkError);
+      toast.error("Network error. Please check your internet connection.");
+    }
+  } else {
+    console.error(`[Unknown Error] (${context}):`, error);
+    toast.error("An unexpected error occurred.");
+  }
+}
+
+export const GetProfileService = {
+  async getProfileDetails(): Promise<MemberProfileDetails | null> {
+    try {
+      const response = await client.query<MemberResponse>({
+        query: GET_PROFILE_DETAILS,
+        variables: { id: test_user },
+        fetchPolicy: "no-cache",
+      });
+      return response.data.member;
+    } catch (error) {
+      handleApolloError(error, "getProfileDetails");
+      return null;
+    }
+  },
+  async HandleProfileImage(member:MemberProfileDetails): Promise<string> {
+  type githubRes = {
+    avatar_url:string,
+  }
+  if(!member.githubUser || member?.githubUser != "") return "";
+  try{
+    const response = await fetch("https://api.github.com/users/"+member.githubUser);
+    if(response.ok){
+      const data:githubRes =  await response.json();
+      return data.avatar_url;
+    }else{
+      console.log("Error fetching Profile Image!"+ response.status);
+      return "";
+    }
+  }catch(e){
+      console.log("Error has Occured while fetching image:",e);
+      return "";
+  }
+  },
+
+
+  async UpdateProfileDetails(
+    member: MemberProfileDetails
+  ): Promise<MemberProfileDetails | null> {
+    const cleanedMember = cleanInput({ ...member, memberId: test_user });
+    try {
+      const response = await client.mutate<MemberUpdateResponse>({
+        mutation: UPDATE_PROFILE_QUERY,
+        variables: { member: cleanedMember },
+      });
+      return response.data ? response.data.updateMember : null;
+    } catch (error) {
+      handleApolloError(error, "UpdateProfileDetails");
+      return null;
+    }
+  },
+
+  async CreateProfileDetails(
+    member: MemberProfileDetails
+  ): Promise<MemberProfileDetails | null> {
+    const { memberId, ...rest } = member;
+    const cleanedMember = cleanInput(rest);
+
+    try {
+      const response = await client.mutate<MemberCreateResponse>({
+        mutation: CREATE_PROFILE_QUERY,
+        variables: { member: cleanedMember },
+      });
+      return response.data ? response.data.createMember : null;
+    } catch (error) {
+      handleApolloError(error, "CreateProfileDetails");
+      return null;
+    }
+  },
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index 6cdcc7e..fc4d1c5 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -92,6 +92,23 @@ export type MemberCountDetails = {
   statusUpdateCountByDate: number;
 }
 
+export type MemberProfileDetails = {
+    memberId: number,
+    year:number,
+    name:string,
+    track:string,
+    groupId:number,
+    sex: string,
+    rollNo:string,
+    hostel:string,
+    githubUser:string,
+    email:string,
+    discordId:string,
+    macAddress:string
+}
+
+
+
 export type MemberCountQueryResult = {
   allMembers: {
     memberId: string;