diff --git a/backend/student/serializers.py b/backend/student/serializers.py
index af9d6cf..eae82d7 100644
--- a/backend/student/serializers.py
+++ b/backend/student/serializers.py
@@ -30,10 +30,5 @@ class StudentDetailsSerializer(serializers.ModelSerializer):
     class Meta:
         model = StudentDetails
         fields = '__all__'
-
-    
-    # def update(self, instance, validated_data):
-    #     print("update called")
-    #     return super().update(instance, validated_data)
     
     
diff --git a/backend/student/views.py b/backend/student/views.py
index 7a40f03..6a13e23 100644
--- a/backend/student/views.py
+++ b/backend/student/views.py
@@ -159,13 +159,13 @@ def msteams(self, request, *args, **kwargs):
 
         
 class StudentDetailsView(APIView):
-# only authenticated users can access this view
+
+    # only authenticated users can access this view
     permission_classes = (IsAuthenticated,)
+
     # For submitting personal details of student
     def post(self, request):
 
-        student_instance = StudentDetails.objects.filter(enrollment_number=request.user.user_id).first()
-
         # appending the enrollment_number to request data for saving
         request.data._mutable = True
         request.data['enrollment_number'] = request.user.user_id
@@ -175,15 +175,15 @@ def post(self, request):
         # print(request.data)
         # Serialize using StudentDetailsSerializer for validation and saving
 
-        if student_instance:
+        student = StudentDetails.objects.filter(enrollment_number=request.user.user_id).first()
+
+        if student:
             # If the record exists, update it with the new data
-            student_serializer = StudentDetailsSerializer(student_instance, data=request.data)
+            student_serializer = StudentDetailsSerializer(student, data=request.data)
         else:
             # If the record doesn't exist, create a new record
             student_serializer = StudentDetailsSerializer(data=request.data)
 
-        # print(student_serializer.errors)
-
         if student_serializer.is_valid():
             student_serializer.save()
             return Response({'message': 'Details Submitted Successfully'}, status=status.HTTP_200_OK)
@@ -195,6 +195,10 @@ def post(self, request):
     def get(self, request):
 
         enrollment_number = request.user.user_id
-        serializer = StudentDetailsSerializer(StudentDetails.objects.get(enrollment_number=enrollment_number))
-        # print(serializer.data)
-        return Response(serializer.data, status=status.HTTP_200_OK)
\ No newline at end of file
+        student = StudentDetails.objects.filter(enrollment_number=enrollment_number).first()
+
+        if student:
+            serializer = StudentDetailsSerializer(student)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        else:
+            return Response({'message': 'Student details not found'}, status=status.HTTP_204_NO_CONTENT)
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 79930cf..98ac658 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,8 @@
             "version": "0.1.0",
             "dependencies": {
                 "@babel/traverse": ">=7.23.2",
+                "@heroicons/react": "^2.0.18",
+                "@tailwindcss/forms": "^0.5.6",
                 "@testing-library/jest-dom": "^5.17.0",
                 "@testing-library/react": "^13.4.0",
                 "@testing-library/user-event": "^13.5.0",
@@ -2370,6 +2372,14 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
+        "node_modules/@heroicons/react": {
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+            "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+            "peerDependencies": {
+                "react": ">= 16"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -3574,6 +3584,17 @@
                 "url": "https://github.com/sponsors/gregberge"
             }
         },
+        "node_modules/@tailwindcss/forms": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
+            "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
+            "dependencies": {
+                "mini-svg-data-uri": "^1.2.3"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+            }
+        },
         "node_modules/@testing-library/dom": {
             "version": "9.3.1",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -12538,6 +12559,14 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "node_modules/mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+            "bin": {
+                "mini-svg-data-uri": "cli.js"
+            }
+        },
         "node_modules/minimalistic-assert": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -19454,6 +19483,12 @@
             "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
             "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw=="
         },
+        "@heroicons/react": {
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+            "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+            "requires": {}
+        },
         "@humanwhocodes/config-array": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -20286,6 +20321,14 @@
                 "loader-utils": "^2.0.0"
             }
         },
+        "@tailwindcss/forms": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
+            "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
+            "requires": {
+                "mini-svg-data-uri": "^1.2.3"
+            }
+        },
         "@testing-library/dom": {
             "version": "9.3.1",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -26877,6 +26920,11 @@
                 }
             }
         },
+        "mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="
+        },
         "minimalistic-assert": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7eded2e..c16f33f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,6 +4,8 @@
     "private": true,
     "dependencies": {
         "@babel/traverse": ">=7.23.2",
+        "@heroicons/react": "^2.0.18",
+        "@tailwindcss/forms": "^0.5.6",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74b5e05..19b2643 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,38 +1,34 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+/* Tailwind.css or App.css */
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.sidebar {
+  width: 0;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #333;
+  overflow-x: hidden;
+  transition: 0.3s;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  padding-top: 60px;
+  z-index: 1;
+}
+
+.sidebar.open {
+  width: 250px;
 }
 
-.App-link {
-  color: #61dafb;
+.hamburger {
+  cursor: pointer;
+  margin-left: 15px;
+  margin-top: 15px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.line {
+  width: 30px;
+  height: 3px;
+  background-color: white;
+  margin: 6px 0;
 }
diff --git a/frontend/src/components/Student Portal/DetailsForm.js b/frontend/src/components/Student Portal/DetailsForm.js
index 21284ed..77b9887 100644
--- a/frontend/src/components/Student Portal/DetailsForm.js	
+++ b/frontend/src/components/Student Portal/DetailsForm.js	
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import ErrorPage from '../standard/ErrorPage';
 import bgForm from "../../assets/bg_forms.jpg";
 import { useNavigate } from 'react-router-dom';
-
+import { PhotoIcon, UserCircleIcon } from '@heroicons/react/24/solid'
 const DetailsForm = () => {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -274,7 +274,7 @@ const DetailsForm = () => {
     switch (step) {
       case 1:
         return (
-          <div className="bg-gray-100 p-4 rounded-lg">
+          <div className=" p-4 rounded-lg">
             <h2 className="text-2xl font-bold mb-4">Step 1: Personal Details</h2>
             <form onSubmit={nextStep} encType='multipart/form-data'>
               <div>
@@ -284,7 +284,7 @@ const DetailsForm = () => {
                   placeholder="Name"
                   value={studentDetails.name}
                   onChange={handleInputChange}
-                  className="w-full p-2 mb-2 rounded border border-gray-300"
+                  className="w-full p-2 mb-2 rounded border border-gray-300 outline-none"
                 />
               </div>
               {formErrors.username && <p className="error text-red-600">{formErrors.username}</p>}
@@ -363,6 +363,366 @@ const DetailsForm = () => {
                   Next
                 </button>
               </div>
+              <form>
+                <div className="space-y-12">
+                  <div className="border-b border-gray-900/10 pb-12">
+                    <h2 className="text-base font-semibold leading-7 text-gray-900">Profile</h2>
+                    <p className="mt-1 text-sm leading-6 text-gray-600">
+                      This information will be displayed publicly so be careful what you share.
+                    </p>
+
+                    <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                      <div className="sm:col-span-4">
+                        <label htmlFor="username" className="block text-sm font-medium leading-6 text-gray-900">
+                          Username
+                        </label>
+                        <div className="mt-2">
+                          <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
+                            <span className="flex select-none items-center pl-3 text-gray-500 sm:text-sm">workcation.com/</span>
+                            <input
+                              type="text"
+                              name="username"
+                              id="username"
+                              autoComplete="username"
+                              className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+                              placeholder="janesmith"
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="col-span-full">
+                        <label htmlFor="about" className="block text-sm font-medium leading-6 text-gray-900">
+                          About
+                        </label>
+                        <div className="mt-2">
+                          <textarea
+                            id="about"
+                            name="about"
+                            rows={3}
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            defaultValue={''}
+                          />
+                        </div>
+                        <p className="mt-3 text-sm leading-6 text-gray-600">Write a few sentences about yourself.</p>
+                      </div>
+
+                      <div className="col-span-full">
+                        <label htmlFor="photo" className="block text-sm font-medium leading-6 text-gray-900">
+                          Photo
+                        </label>
+                        <div className="mt-2 flex items-center gap-x-3">
+                          <UserCircleIcon className="h-12 w-12 text-gray-300" aria-hidden="true" />
+                          <button
+                            type="button"
+                            className="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                          >
+                            Change
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="col-span-full">
+                        <label htmlFor="cover-photo" className="block text-sm font-medium leading-6 text-gray-900">
+                          Cover photo
+                        </label>
+                        <div className="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
+                          <div className="text-center">
+                            <PhotoIcon className="mx-auto h-12 w-12 text-gray-300" aria-hidden="true" />
+                            <div className="mt-4 flex text-sm leading-6 text-gray-600">
+                              <label
+                                htmlFor="file-upload"
+                                className="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
+                              >
+                                <span>Upload a file</span>
+                                <input id="file-upload" name="file-upload" type="file" className="sr-only" />
+                              </label>
+                              <p className="pl-1">or drag and drop</p>
+                            </div>
+                            <p className="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-b border-gray-900/10 pb-12">
+                    <h2 className="text-base font-semibold leading-7 text-gray-900">Personal Information</h2>
+                    <p className="mt-1 text-sm leading-6 text-gray-600">Please double check and make sure your information is correct</p>
+
+                    <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                      <div className="sm:col-span-3">
+                        <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-gray-900">
+                          Name (As registered with the college)
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="text"
+                            name="first-name"
+                            id="first-name"
+                            value={studentDetails.name}
+                            onChange={handleInputChange}
+                            autoComplete="given-name"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                          />
+                        </div>
+                        {formErrors.username && <p className="error text-red-600 text-sm font-semibold">{formErrors.username}</p>}
+                      </div>
+
+                      <div className="sm:col-span-3">
+                        <label htmlFor="last-name" className="block text-sm font-medium leading-6 text-gray-900">
+                          Date
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="date"
+                            name="dob"
+                            placeholder="Date of Birth"
+                            value={studentDetails.dob}
+                            onChange={handleInputChange}
+                            id="date"
+                            autoComplete="family-name"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="sm:col-span-4">
+                        <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
+                          Email address
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            id="email"
+                            type="email"
+                            name="email"
+                            placeholder="Email"
+                            value={studentDetails.email}
+                            onChange={handleInputChange}
+                            autoComplete="email"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="col-span-full">
+                        <label htmlFor="street-address" className="block text-sm font-medium leading-6 text-gray-900">
+                          Full Adress
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="text"
+                            name="full_address"
+                            placeholder="Full Address"
+                            value={studentDetails.full_address}
+                            onChange={handleInputChange}
+                            id="street-address"
+                            autoComplete="street-address"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                          />
+                        </div>
+                      </div>
+                      <div className="col-span-full">
+                        <label htmlFor="street-address" className="block text-sm font-medium leading-6 text-gray-900">
+                          Mobile Number
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="text"
+                            name="mobile_number"
+                            placeholder="Mobile Number"
+                            value={studentDetails.mobile_number}
+                            onChange={handleInputChange}
+                            id="street-address"
+                            autoComplete="street-address"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                          />
+                        </div>
+                      </div>
+                      <div className="sm:col-span-3">
+                        <label htmlFor="country" className="block text-sm font-medium leading-6 text-gray-900">
+                          Gender
+                        </label>
+                        <div className="mt-2">
+                          <select
+                            id="country"
+                            type="text"
+                            name="gender"
+                            placeholder="Gender"
+                            value={studentDetails.gender}
+                            onChange={handleInputChange}
+                            autoComplete="country-name"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
+                          >
+                            <option>MALE</option>
+                            <option>FEMALE</option>
+                            <option>OTHERS</option>
+                          </select>
+                        </div>
+                      </div>
+
+                      <div className="sm:col-span-3">
+                        <label htmlFor="country" className="block text-sm font-medium leading-6 text-gray-900">
+                          Country
+                        </label>
+                        <div className="mt-2">
+                          <select
+                            type="text"
+                            name="category"
+                            placeholder="Category"
+                            value={studentDetails.category}
+                            onChange={handleInputChange}
+                            autoComplete="country-name"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
+                          >
+                            <option>SC</option>
+                            <option>ST</option>
+                            <option>OBC</option>
+                            <option>UR/Gen</option>
+                            <option>PH</option>
+                            <option>DEFENCE</option>
+                            <option>J & K Migrant</option>
+                          </select>
+                        </div>
+                      </div>
+                      <div className="sm:col-span-3">
+                        <label htmlFor="country" className="block text-sm font-medium leading-6 text-gray-900">
+                          Region
+                        </label>
+                        <div className="mt-2">
+                          <select
+                            type="text"
+                            name="region"
+                            placeholder="Region"
+                            value={studentDetails.region}
+                            onChange={handleInputChange}
+                            autoComplete="country-name"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
+                          >
+                            <option>Delhi</option>
+                            <option>Outside Delhi</option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-b border-gray-900/10 pb-12">
+                    <h2 className="text-base font-semibold leading-7 text-gray-900">Notifications</h2>
+                    <p className="mt-1 text-sm leading-6 text-gray-600">
+                      We'll always let you know about important changes, but you pick what else you want to hear about.
+                    </p>
+
+                    <div className="mt-10 space-y-10">
+                      <fieldset>
+                        <legend className="text-sm font-semibold leading-6 text-gray-900">By Email</legend>
+                        <div className="mt-6 space-y-6">
+                          <div className="relative flex gap-x-3">
+                            <div className="flex h-6 items-center">
+                              <input
+                                id="comments"
+                                name="comments"
+                                type="checkbox"
+                                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                              />
+                            </div>
+                            <div className="text-sm leading-6">
+                              <label htmlFor="comments" className="font-medium text-gray-900">
+                                Comments
+                              </label>
+                              <p className="text-gray-500">Get notified when someones posts a comment on a posting.</p>
+                            </div>
+                          </div>
+                          <div className="relative flex gap-x-3">
+                            <div className="flex h-6 items-center">
+                              <input
+                                id="candidates"
+                                name="candidates"
+                                type="checkbox"
+                                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                              />
+                            </div>
+                            <div className="text-sm leading-6">
+                              <label htmlFor="candidates" className="font-medium text-gray-900">
+                                Candidates
+                              </label>
+                              <p className="text-gray-500">Get notified when a candidate applies for a job.</p>
+                            </div>
+                          </div>
+                          <div className="relative flex gap-x-3">
+                            <div className="flex h-6 items-center">
+                              <input
+                                id="offers"
+                                name="offers"
+                                type="checkbox"
+                                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                              />
+                            </div>
+                            <div className="text-sm leading-6">
+                              <label htmlFor="offers" className="font-medium text-gray-900">
+                                Offers
+                              </label>
+                              <p className="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
+                            </div>
+                          </div>
+                        </div>
+                      </fieldset>
+                      <fieldset>
+                        <legend className="text-sm font-semibold leading-6 text-gray-900">Push Notifications</legend>
+                        <p className="mt-1 text-sm leading-6 text-gray-600">These are delivered via SMS to your mobile phone.</p>
+                        <div className="mt-6 space-y-6">
+                          <div className="flex items-center gap-x-3">
+                            <input
+                              id="push-everything"
+                              name="push-notifications"
+                              type="radio"
+                              className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                            />
+                            <label htmlFor="push-everything" className="block text-sm font-medium leading-6 text-gray-900">
+                              Everything
+                            </label>
+                          </div>
+                          <div className="flex items-center gap-x-3">
+                            <input
+                              id="push-email"
+                              name="push-notifications"
+                              type="radio"
+                              className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                            />
+                            <label htmlFor="push-email" className="block text-sm font-medium leading-6 text-gray-900">
+                              Same as email
+                            </label>
+                          </div>
+                          <div className="flex items-center gap-x-3">
+                            <input
+                              id="push-nothing"
+                              name="push-notifications"
+                              type="radio"
+                              className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                            />
+                            <label htmlFor="push-nothing" className="block text-sm font-medium leading-6 text-gray-900">
+                              No push notifications
+                            </label>
+                          </div>
+                        </div>
+                      </fieldset>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-6 flex items-center justify-end gap-x-6">
+                  <button type="button" className="text-sm font-semibold leading-6 text-gray-900">
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  >
+                    Save
+                  </button>
+                </div>
+              </form>
+
             </form>
           </div>
         );
@@ -1149,8 +1509,8 @@ const DetailsForm = () => {
   };
 
   return (
-    <div className="bg-cover bg-center" style={{ backgroundImage: `url(${bgForm})` }}>
-      <div className="w-1/2 p-4 mx-auto bg-green-100">
+    <div className="">
+      <div className="p-4 w-[90%] mx-auto">
         <h1 className="text-3xl font-bold text-indigo-900 mb-4">Student Details Form</h1>
         {renderStep()}
       </div>
diff --git a/frontend/src/components/Student Portal/StudentDashboard.js b/frontend/src/components/Student Portal/StudentDashboard.js
index 25b5a8f..b2f0c26 100644
--- a/frontend/src/components/Student Portal/StudentDashboard.js	
+++ b/frontend/src/components/Student Portal/StudentDashboard.js	
@@ -1,8 +1,38 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import StudentNavbar from './StudentNavbar';
 import { Link } from 'react-router-dom';
+import axios from 'axios';
 
 const StudentDashboard = ({ user }) => {
+  const accessToken = localStorage.getItem('accessToken');
+  const [formFilled, setFormFilled] = useState(false);
+  useEffect(() => {
+    axios.get('http://localhost:8000/student/personal-details/', {
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      }
+    })
+      .then((response) => {
+        if (response.status === 204) {
+          // If status is 204, set formFilled to false
+          setFormFilled(false);
+        } else if (response.data.pancard !== null) {
+          // If response.data.pancard is not null, set formFilled to true
+          setFormFilled(true);
+        } else {
+          // In all other cases, set formFilled to false
+          setFormFilled(false);
+        }
+        // Now you can use the formFilled value as needed
+        // For example, you can log it or use it in your application logic
+        console.log('formFilled:', formFilled);
+      })
+
+      .catch((error) => {
+        console.error('Error fetching user data:', error);
+      });
+  }, [accessToken , formFilled]);
   return (
     <div className="p-5 bg-slate-300">
       <div className="mb-8">
@@ -27,11 +57,15 @@ const StudentDashboard = ({ user }) => {
           To proceed further and fill the form, please share your details.
         </h1>
       </div>
-      <Link to={'/student-details-form'}>
+      {formFilled ? (
+      <p>You have already filled the details form. Please wait until further notice.</p>
+    ) : (
+      <Link to="/student-details-form">
         <button className="border-2 p-1 border-indigo-700 font-mono shadow rounded my-2 text-lg">
           Click Here
         </button>
       </Link>
+    )}
 
       {/* You can add more student details and components as needed */}
     </div>
diff --git a/frontend/src/components/Student Portal/StudentNavbar.jsx b/frontend/src/components/Student Portal/StudentNavbar.jsx
index 34a95ef..aa7abc2 100644
--- a/frontend/src/components/Student Portal/StudentNavbar.jsx	
+++ b/frontend/src/components/Student Portal/StudentNavbar.jsx	
@@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FaBars } from 'react-icons/fa'; // Import the hamburger icon
+import { FaTimes } from 'react-icons/fa'; // Import the close icon
 import AuthContext from '../../context/auth/authContext';
 
 const StudentNavbar = ({ user }) => {
@@ -14,28 +15,54 @@ const StudentNavbar = ({ user }) => {
 
   return (
     <nav className="bg-gray-900 p-2 shadow-md">
-      <div className="container mx-auto flex flex-col sm:flex-row justify-between items-center">
+      <div className="container mx-auto flex justify-between items-center">
         <div className="flex items-center">
           <Link to="/" className="text-white text-xl font-bold mr-4">MAIT</Link>
           <p className="text-white text-base">Welcome, {user.email}</p>
         </div>
         <div className="mt-4 sm:mt-0">
           {/* Hamburger menu icon */}
-          <button onClick={toggleMenu} className="text-white sm:hidden">
-            <FaBars />
-          </button>
-          {/* Responsive menu */}
+          {menuOpen ? (
+            <button onClick={toggleMenu} className="text-white">
+              <FaTimes />
+            </button>
+          ) : (
+            <button onClick={toggleMenu} className="text-white ">
+              <FaBars />
+            </button>
+          )}
+          {/* Dropdown menu */}
           {menuOpen && (
-            <div className="sm:flex space-y-4 sm:space-y-0 sm:space-x-4">
-              <Link to="/timetable" className="text-white hover:underline">Timetable</Link>
-              <Link to="/schedule" className="text-white hover:underline">Schedule</Link>
-              <Link to="/results" className="text-white hover:underline">Results</Link>
-              <Link to="/cms" className="text-white hover:underline">CMS/LMS</Link>
-              <Link to="/help" className="text-white hover:underline">Help/Support</Link>
-              <Link to="/attendance" className="text-white hover:underline">Attendance</Link>
-              <button onClick={logoutUser} className="bg-red-500 text-white py-1 px-4 rounded hover:bg-red-600">
-                Logout
-              </button>
+            <div className="relative ">
+              
+              <div className="bg-gray-900 text-white absolute  top-0 right-0 w-48 rounded-md shadow-lg">
+                <ul className="p-4 space-y-2">
+                  <li>
+                    <Link to="/timetable" className="hover:underline">Timetable</Link>
+                  </li>
+                  <li>
+                    <Link to="/schedule" className="hover:underline">Schedule</Link>
+                  </li>
+                  <li>
+                    <Link to="/results" className="hover:underline">Results</Link>
+                  </li>
+                  <li>
+                    <Link to="/cms" className="hover:underline">CMS/LMS</Link>
+                  </li>
+                  <li>
+                    <Link to="/help" className="hover:underline">Help/Support</Link>
+                  </li>
+                  <li>
+                    <Link to="/attendance" className="hover:underline">Attendance</Link>
+                  </li>
+                </ul>
+                <button
+                  onClick={logoutUser}
+                  className="bg-red-500 text-white w-full py-2 px-4 rounded-b-md hover:bg-red-600"
+                >
+                  Logout
+                </button>
+              </div>
             </div>
           )}
         </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 767fde7..9755683 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -23,5 +23,7 @@ module.exports = {
         xl: "1700px",
       },
     },
-    plugins: [],
+    plugins: [
+      require('@tailwindcss/forms'),
+    ],
   };
\ No newline at end of file