diff --git a/README.md b/README.md
index 371027c..52be28e 100644
--- a/README.md
+++ b/README.md
@@ -154,6 +154,10 @@ This will start the development server and you can view the application in your
     <td>Denied</td>
     <td><a href="./src/pages/Denied.jsx">/denied</a></td>
   </tr>
+  <tr>
+    <td>Denied</td>
+    <td>/denied</td>
+  </tr>
 </table>
 
 
diff --git a/src/App.jsx b/src/App.jsx
index 928dbe5..a2cc2ad 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -100,7 +100,6 @@ const App = () => {
                 )
               }
             />
-
             <Route
               path="/chatbot"
               element={
@@ -113,6 +112,8 @@ const App = () => {
                 )
               }
             />
+
+            <Route path="/denied" element={<Denied />} />
           </Routes>
         </ExtraContextProvider>
       </AIChatContextProvider>
diff --git a/src/components/DarkModeToggle.jsx b/src/components/DarkModeToggle.jsx
new file mode 100644
index 0000000..4b08bda
--- /dev/null
+++ b/src/components/DarkModeToggle.jsx
@@ -0,0 +1,49 @@
+import React, {useState,useEffect} from 'react'
+
+const DarkModeToggle = () => {
+    const [theme, setTheme] = useState('dark');
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+          setTheme(savedTheme);
+        } else {
+          setTheme('dark'); 
+          localStorage.setItem('theme', 'dark'); 
+        }
+      }, []);
+
+    useEffect(() => {
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      localStorage.setItem('theme', theme);
+    }, [theme]);
+  
+    const toggleTheme = () => {
+      const newTheme = theme === 'dark' ? 'light' : 'dark';
+      setTheme(newTheme);
+    };
+  
+  return (
+    <div>
+        <div
+        onClick={toggleTheme}
+        className={`w-14 h-8 flex items-center bg-gray-300 dark:bg-gray-600 rounded-full p-1 cursor-pointer transition-colors duration-300 ${
+          theme === 'dark' ? 'bg-gray-700' : 'bg-gray-400'
+        }`}
+      >
+        {/* Circle inside the switch */}
+        <div
+          className={` w-6 h-6 rounded-full shadow-md transform transition-transform duration-300 ${
+            theme === 'dark' ? 'translate-x-6 bg-[#ff0059da]' : 'translate-x-0 bg-white'
+          }`}
+        ></div>
+      </div>
+    </div>
+  )
+}
+
+export default DarkModeToggle
diff --git a/src/components/FormStep1.jsx b/src/components/FormStep1.jsx
index 2082cea..f34f11e 100644
--- a/src/components/FormStep1.jsx
+++ b/src/components/FormStep1.jsx
@@ -4,6 +4,7 @@ import { AuthContext } from '../context/AuthContext';
 import { Link } from 'react-router-dom';
 import { validations } from '../utils/formValidations'; 
 
+
 const FormStep1 = ({ onNext }) => {
   const { updateRegisterInfo, registerInfo } = useContext(AuthContext);
   const [errors, setErrors] = useState({});
@@ -36,70 +37,71 @@ const FormStep1 = ({ onNext }) => {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className="p-6 rounded-lg shadow-lg h-full "
+      className="p-6 rounded-lg shadow-lg h-full bg-white dark:bg-neutral-900"
     >
-      <h2 className="text-lg font-bold text-[#ff0059] text-neutral-700 mb-4">START FOR FREE</h2>
-      <h1 className='text-white text-5xl font-bold mb-6'>Create your account</h1>
-      <p className='text-neutral-400 font-bold mb-14'>Already a member ? <span className='text-yellow-500'><Link to="/login">Log in</Link></span></p>
+      <h2 className="text-lg font-bold text-[#ff0059] dark:text-yellow-400 mb-4">START FOR FREE</h2>
+      <h1 className='text-gray-800 dark:text-white text-5xl font-bold mb-6'>Create your account</h1>
+      <p className='text-neutral-600 dark:text-neutral-400 font-bold mb-14'>
+        Already a member? 
+        <span className='text-yellow-500'>
+          <Link to="/login"> Log in</Link>
+        </span>
+      </p>
       <form className="space-y-4">
         <div className='flex flex-row gap-10'>
-        <label className="w-1/2">
-          <span className="text-gray-400">First Name:</span>
-          <input 
-            type="text" 
-            name="first_name" 
-            value={registerInfo.first_name}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, first_name: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
-          />
-          {errors.first_name && <p className="text-[#ff0059]">{errors.first_name}</p>}
-        </label>
-        <label className="w-1/2">
-          <span className="text-gray-400">Last Name:</span>
-          <input 
-            type="text" 
-            name="last_name" 
-            value={registerInfo.last_name}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, last_name: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
-          />
-          {errors.last_name && <p className="text-[#ff0059]">{errors.last_name}</p>} 
-        </label>
+          <label className="w-1/2">
+            <span className="text-gray-800 dark:text-gray-300">First Name:</span>
+            <input 
+              type="text" 
+              name="first_name" 
+              value={registerInfo.first_name}
+              onChange={(e) => updateRegisterInfo({ ...registerInfo, first_name: e.target.value })}
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
+            />
+            {errors.first_name && <p className="text-[#ff0059]">{errors.first_name}</p>}
+          </label>
+          <label className="w-1/2">
+            <span className="text-gray-800 dark:text-gray-300">Last Name:</span>
+            <input 
+              type="text" 
+              name="last_name" 
+              value={registerInfo.last_name}
+              onChange={(e) => updateRegisterInfo({ ...registerInfo, last_name: e.target.value })}
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
+            />
+            {errors.last_name && <p className="text-[#ff0059]">{errors.last_name}</p>} 
+          </label>
         </div>
         <label className="block">
-          <span className="text-gray-400">Email:</span>
+          <span className="text-gray-800 dark:text-gray-300">Email:</span>
           <input 
             type="email" 
             name="email" 
             value={registerInfo.email}
             onChange={(e) => updateRegisterInfo({ ...registerInfo, email: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
           />
-           {errors.email && <p className="text-[#ff0059]">{errors.email}</p>}
+          {errors.email && <p className="text-[#ff0059]">{errors.email}</p>}
         </label>
-       
-
-        <label className="block ">
-          <span className="text-gray-400">Password:</span>
+        <label className="block">
+          <span className="text-gray-800 dark:text-gray-300">Password:</span>
           <input 
             type="password" 
             name="password" 
             value={registerInfo.password}
             onChange={(e) => updateRegisterInfo({ ...registerInfo, password: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
           />
             {errors.password && <p className="text-[#ff0059]">{errors.password}</p>}
         </label>
-
-        
       </form>
       <button 
-          type="button" 
-          onClick={handleNext} 
-          className="w-1/3 mt-14 mb-10 bg-[#ff0059] hover:bg-red-500 text-white py-4 rounded-md"
-        >
-          Lets Move to Next
-        </button>
+        type="button" 
+        onClick={handleNext} 
+        className="w-1/3 mt-14 mb-10 bg-[#ff0059] hover:bg-red-500 text-white py-4 rounded-md"
+      >
+        Let's Move to Next
+      </button>
     </motion.div>
   );
 };
diff --git a/src/components/FormStep2.jsx b/src/components/FormStep2.jsx
index 95e135e..9c97a4f 100644
--- a/src/components/FormStep2.jsx
+++ b/src/components/FormStep2.jsx
@@ -33,76 +33,85 @@ const FormStep2 = ({ onNext, onBack }) => {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-around"
+      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-around bg-white dark:bg-neutral-900"
     >
       <div>
-      <h2 className="text-4xl text-white  font-bold text-[#ff0059] text-neutral-700 mb-4">Contact Information</h2>
-      <p className='text-neutral-400  font-bold mb-8'>Don't worry we will keep it to  <span className='text-yellow-600'>ourselves</span> only !</p>
+        <h2 className="text-4xl font-bold text-[#ff0059] dark:text-yellow-400 mb-4">
+          Contact Information
+        </h2>
+        <p className="text-neutral-600 dark:text-neutral-400 font-bold mb-8">
+          Don't worry, we will keep it to <span className="text-yellow-600">ourselves</span> only!
+        </p>
       </div>
-      
+
       <form className="space-y-4">
-        <div className='flex flex-row gap-4 '>
+        <div className="flex flex-row gap-4">
           <label className="w-1/3">
-            <span className="text-gray-400">Gender:</span>
+            <span className="text-gray-800 dark:text-gray-300">Gender:</span>
             <div className="flex mt-1 flex-row gap-4">
-              {['Male', 'Female'].map(gender => (
+              {['Male', 'Female'].map((gender) => (
                 <button
                   key={gender}
                   type="button"
                   name="gender"
                   value={gender}
                   onClick={() => updateRegisterInfo({ ...registerInfo, gender })}
-                  className={`p-2 h-10 rounded-md ${registerInfo.gender === gender ? 'bg-[#ff0059]' : 'bg-neutral-800'} text-white border border-gray-600`}
+                  className={`p-2 h-10 rounded-md ${
+                    registerInfo.gender === gender ? 'bg-[#ff0059] text-gray-200 dark:text-gray-800' : 'bg-gray-200 dark:bg-neutral-800'
+                  } text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600`}
                 >
-                  {gender.charAt(0).toUpperCase() + gender.slice(1)}
+                   {gender.charAt(0).toUpperCase() + gender.slice(1)}
                 </button>
               ))}
             </div>
             {errors.gender && <p className="text-[#ff0059]">{errors.gender}</p>}
           </label>
+
           <label className="w-1/3">
-            <span className="text-gray-400">Age:</span>
+            <span className="text-gray-800 dark:text-gray-300">Age:</span>
             <input
               type="age"
               name="age"
               value={registerInfo.age}
               onChange={(e) => updateRegisterInfo({ ...registerInfo, age: e.target.value })}
-              className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
             />
             {errors.age && <p className="text-[#ff0059]">{errors.age}</p>}
           </label>
+
           <label className="w-1/3">
-          <span className="text-gray-400">Username:</span>
-          <input
-            type="text"
-            name="username"
-            value={registerInfo.username}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, username: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
-          />
-          {errors.username && <p className="text-[#ff0059]">{errors.username}</p>}
-        </label>
+            <span className="text-gray-800 dark:text-gray-300">Username:</span>
+            <input
+              type="text"
+              name="username"
+              value={registerInfo.username}
+              onChange={(e) => updateRegisterInfo({ ...registerInfo, username: e.target.value })}
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
+            />
+            {errors.username && <p className="text-[#ff0059]">{errors.username}</p>}
+          </label>
         </div>
 
         <label className="block">
-          <span className="text-gray-400">Location:</span>
+          <span className="text-gray-800 dark:text-gray-300">Location:</span>
           <input
             type="text"
             name="location"
             value={registerInfo.location}
             onChange={(e) => updateRegisterInfo({ ...registerInfo, location: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
           />
           {errors.location && <p className="text-[#ff0059]">{errors.location}</p>}
         </label>
-        <div className='flex flex-row gap-10'>
+
+        <div className="flex flex-row gap-10">
           <label className="w-1/2">
-            <span className="text-gray-400">Openness:</span>
+            <span className="text-gray-800 dark:text-gray-300">Openness:</span>
             <select
               name="openness"
               value={registerInfo.openness}
               onChange={(e) => updateRegisterInfo({ ...registerInfo, openness: e.target.value })}
-              className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
             >
               <option value="">Select</option>
               <option value="introvert">Introvert</option>
@@ -110,13 +119,14 @@ const FormStep2 = ({ onNext, onBack }) => {
               <option value="ambivert">Ambivert</option>
             </select>
           </label>
+
           <label className="w-1/2">
-            <span className="text-gray-400">Relation Type:</span>
+            <span className="text-gray-800 dark:text-gray-300">Relation Type:</span>
             <select
               name="relation_type"
               value={registerInfo.relation_type}
               onChange={(e) => updateRegisterInfo({ ...registerInfo, relation_type: e.target.value })}
-              className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
             >
               <option value="">Select</option>
               <option value="casual">Casual</option>
@@ -124,30 +134,28 @@ const FormStep2 = ({ onNext, onBack }) => {
               <option value="longTerm">Long Term</option>
             </select>
           </label>
-          
         </div>
-         <label className="block">
-          <span className="text-gray-400">Expected Qualities</span>
+
+        <label className="block">
+          <span className="text-gray-800 dark:text-gray-300">Expected Qualities:</span>
           <input
             type="text"
             name="exp_qual"
             value={registerInfo.exp_qual}
-            onChange={(e) =>
-              updateRegisterInfo({ ...registerInfo, exp_qual: e.target.value })
-            }
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+            onChange={(e) => updateRegisterInfo({ ...registerInfo, exp_qual: e.target.value })}
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
           />
         </label>
-       
       </form>
-      <div className="flex justify-start  gap-4 items-end mt-10 pb-5">
-          <button type="button" onClick={onBack} className="bg-neutral-800 hover:bg-gray-600 text-white py-2 px-4 rounded-md">
-            Back
-          </button>
-          <button type="button" onClick={handleNext} className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md">
-            Next
-          </button>
-        </div>
+
+      <div className="flex justify-start gap-4 items-end mt-10 pb-5">
+        <button type="button" onClick={onBack} className="bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 text-black dark:text-white py-2 px-4 rounded-md">
+          Back
+        </button>
+        <button type="button" onClick={handleNext} className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md">
+          Next
+        </button>
+      </div>
     </motion.div>
   );
 };
diff --git a/src/components/FormStep21.jsx b/src/components/FormStep21.jsx
index 70262ef..dda9849 100644
--- a/src/components/FormStep21.jsx
+++ b/src/components/FormStep21.jsx
@@ -34,15 +34,17 @@ const FormStep21 = ({ onNext, onBack }) => {
       const file = e.target.files[0];
       const filename = file.name;
 
-      const response = await axios.post(`http://ec2-3-111-34-89.ap-south-1.compute.amazonaws.com:4000/v1/user/presignedUrl`, {
-        filename,
-      });
+      const response = await axios.post(
+        `http://ec2-3-111-34-89.ap-south-1.compute.amazonaws.com:4000/v1/user/presignedUrl`,
+        {
+          filename,
+        }
+      );
 
       const presignedUrl = response.data.preSignedUrl;
       const fields = response.data.fields;
       const formData = new FormData();
 
-      // Correctly append each field key-value pair to the FormData
       Object.entries(fields).forEach(([key, value]) => {
         formData.append(key, value);
       });
@@ -53,7 +55,6 @@ const FormStep21 = ({ onNext, onBack }) => {
 
       const imageUrl = `https://soundscorebucket.s3.ap-south-1.amazonaws.com/${fields["key"]}`;
       updateRegisterInfo({ ...registerInfo, image_url: imageUrl });
-
     } catch (e) {
       console.log(e);
     }
@@ -65,41 +66,51 @@ const FormStep21 = ({ onNext, onBack }) => {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-around"
+      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-around bg-white dark:bg-neutral-900"
     >
       <div>
-        <h2 className="text-4xl text-white font-bold text-[#ff0059] mb-4">More About You</h2>
-        <p className='text-neutral-400 font-bold mb-8'>Let's get to know you better <span className='text-yellow-600'>!</span></p>
+        <h2 className="text-4xl font-bold text-[#ff0059] mb-4 dark:text-yellow-400">
+          More About You
+        </h2>
+        <p className="text-neutral-700 font-bold mb-8 dark:text-neutral-400">
+          Let's get to know you better <span className="text-yellow-600">!</span>
+        </p>
       </div>
 
       <form className="space">
         <label className="block">
-          <span className="text-gray-400">Interests:</span>
+          <span className="text-gray-800 dark:text-gray-300">Interests:</span>
           <input
             ref={interestsInputRef}
             type="text"
             name="interests"
             defaultValue={registerInfo.interests}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, interests: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+            onChange={(e) =>
+              updateRegisterInfo({ ...registerInfo, interests: e.target.value })
+            }
+            className="mt-1 block w-full p-2 rounded-md bg-gray-100 dark:bg-neutral-800 outline-none text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600"
           />
-          {errors.interests && <p className="text-[#ff0059]">{errors.interests}</p>}
+          {errors.interests && (
+            <p className="text-[#ff0059] dark:text-red-400">{errors.interests}</p>
+          )}
         </label>
 
         <label className="block">
-          <span className="text-gray-400">Social Habits:</span>
+          <span className="text-gray-800 dark:text-gray-300">Social Habits:</span>
           <input
             ref={socialHabitsInputRef}
             type="text"
             name="social_habits"
             defaultValue={registerInfo.social_habits}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, social_habits: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+            onChange={(e) =>
+              updateRegisterInfo({ ...registerInfo, social_habits: e.target.value })
+            }
+            className="mt-1 block w-full p-2 rounded-md bg-gray-100 dark:bg-neutral-800 outline-none text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600"
           />
         </label>
 
         <div className="block">
-          <span className="text-gray-400">Past Relationships:</span>
+          <span className="text-gray-800 dark:text-gray-300">Past Relationships:</span>
           <div className="flex items-center mt-2">
             <label className="inline-flex items-center mr-4">
               <input
@@ -108,9 +119,9 @@ const FormStep21 = ({ onNext, onBack }) => {
                 value="Yes"
                 checked={registerInfo.past_relations === "Yes"}
                 onChange={() => updateRegisterInfo({ ...registerInfo, past_relations: "Yes" })}
-                className="form-radio text-[#ff0059]"
+                className="form-radio text-[#ff0059] dark:text-red-500"
               />
-              <span className="ml-2 text-gray-400">Yes</span>
+              <span className="ml-2 text-gray-800 dark:text-gray-300">Yes</span>
             </label>
             <label className="inline-flex items-center">
               <input
@@ -119,27 +130,29 @@ const FormStep21 = ({ onNext, onBack }) => {
                 value="No"
                 checked={registerInfo.past_relations === "No"}
                 onChange={() => updateRegisterInfo({ ...registerInfo, past_relations: "No" })}
-                className="form-radio text-[#ff0059]"
+                className="form-radio text-[#ff0059] dark:text-red-500"
               />
-              <span className="ml-2 text-gray-400">No</span>
+              <span className="ml-2 text-gray-800 dark:text-gray-430">No</span>
             </label>
           </div>
-          {errors.past_relationships && <p className="text-[#ff0059]">{errors.past_relationships}</p>}
+          {errors.past_relationships && (
+            <p className="text-[#ff0059] dark:text-red-400">{errors.past_relationships}</p>
+          )}
         </div>
 
         <div className="mt-4">
-          <span className="text-gray-400">Profile Picture:</span>
-          <div className='mt-2 relative h-28 flex flex-col items-center justify-center bg-neutral-800 border border-gray-600 rounded-md overflow-hidden'>
+          <span className="text-gray-800 dark:text-gray-300">Profile Picture:</span>
+          <div className="mt-2 relative h-28 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
             <input
               type="file"
               onChange={onFileSelect}
               id="fileInput"
-              className='absolute h-full w-full opacity-0 cursor-pointer'
+              className="absolute h-full w-full opacity-0 cursor-pointer"
             />
             {registerInfo.image_url ? (
               <img src={registerInfo.image_url} alt="Profile" className="h-full w-full object-cover" />
             ) : (
-              <div className='text-white text-xl font-bold'>
+              <div className="text-neutral-900 dark:text-white text-xl font-bold">
                 Upload Image
               </div>
             )}
@@ -148,10 +161,18 @@ const FormStep21 = ({ onNext, onBack }) => {
       </form>
 
       <div className="flex justify-start gap-4 items-end mt-10 pb-6">
-        <button type="button" onClick={onBack} className="bg-neutral-800 hover:bg-gray-600 text-white py-2 px-4 rounded-md">
+        <button
+          type="button"
+          onClick={onBack}
+          className="bg-gray-100 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-gray-800 text-gray-800 dark:text-white py-2 px-4 rounded-md"
+        >
           Back
         </button>
-        <button type="button" onClick={handleNext} className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md">
+        <button
+          type="button"
+          onClick={handleNext}
+          className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md"
+        >
           Next
         </button>
       </div>
diff --git a/src/components/FormStep3.jsx b/src/components/FormStep3.jsx
index 9fa28e6..29c515c 100644
--- a/src/components/FormStep3.jsx
+++ b/src/components/FormStep3.jsx
@@ -7,8 +7,8 @@ const FormStep3 = ({ onBack }) => {
 
   const renderField = (label, value) => (
     <div className="mb-2">
-      <span className="text-gray-400 font-semibold">{label}:</span>
-      <span className="ml-2 text-white">{value || 'Not provided'}</span>
+      <span className="text-gray-800 dark:text-gray-300 font-semibold">{label}:</span>
+      <span className="ml-2 text-black dark:text-white">{value || 'Not provided'}</span>
     </div>
   );
 
@@ -18,14 +18,14 @@ const FormStep3 = ({ onBack }) => {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-between"
+      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-between bg-white dark:bg-neutral-800"
     >
       <div>
-        <h2 className="text-4xl text-white font-bold text-[#ff0059] mb-4">Review and Submit</h2>
-        <p className="text-neutral-400 font-bold mb-4">Take a final look before you <span className="text-yellow-600">join us!</span></p>
+        <h2 className="text-4xl text-black dark:text-white font-bold text-[#ff0059] mb-4">Review and Submit</h2>
+        <p className="text-gray-600 dark:text-neutral-400 font-bold mb-4">Take a final look before you <span className="text-yellow-600">join us!</span></p>
       </div>
 
-      <div className="bg-neutral-800 p-4 rounded-lg shadow-inner text-xs">
+      <div className="bg-gray-100 dark:bg-neutral-700 p-4 rounded-lg shadow-inner text-xs">
         <div className="grid grid-cols-2 gap-4">
           {renderField('First Name', registerInfo.first_name)}
           {renderField('Last Name', registerInfo.last_name)}
@@ -40,37 +40,35 @@ const FormStep3 = ({ onBack }) => {
           {renderField('Interests', registerInfo.interests)}
           {renderField('Social Habits', registerInfo.social_habits)}
           {renderField('Past Relationships', registerInfo.past_relations)}
-          
-        {registerInfo.image_url && (
-          <div className="mt-4 flex">
-            <span className="text-gray-400 font-semibold">Profile Picture:</span>
-            <div className="mt-2 w-32 h-32 rounded-full overflow-hidden">
-              <img src={registerInfo.image_url} alt="Profile" className="w-full h-full object-cover" />
+
+          {registerInfo.image_url && (
+            <div className="mt-4 flex">
+              <span className="text-gray-6800 dark:text-gray-300 font-semibold">Profile Picture:</span>
+              <div className="mt-2 w-32 h-32 rounded-full overflow-hidden">
+                <img src={registerInfo.image_url} alt="Profile" className="w-full h-full object-cover" />
+              </div>
             </div>
-          </div>
-        )}
-        </div>
-        <form onSubmit={registerUser} className="space-y-4">
-        <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={onBack}
-            className="bg-neutral-900 hover:bg-gray-600 text-white py-2 px-4 rounded-md"
-          >
-            Back
-          </button>
-          <button
-            type="submit"
-            className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md"
-          >
-            Submit
-          </button>
+          )}
         </div>
-      </form>
 
+        <form onSubmit={registerUser} className="space-y-4 mt-4">
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onBack}
+              className="bg-gray-300 dark:bg-neutral-900 hover:bg-gray-400 dark:hover:bg-gray-600 text-black dark:text-white py-2 px-4 rounded-md"
+            >
+              Back
+            </button>
+            <button
+              type="submit"
+              className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md"
+            >
+              Submit
+            </button>
+          </div>
+        </form>
       </div>
-
-     
     </motion.div>
   );
 };
diff --git a/src/pages/Landing.jsx b/src/pages/Landing.jsx
index 519c820..dcc1f72 100644
--- a/src/pages/Landing.jsx
+++ b/src/pages/Landing.jsx
@@ -4,40 +4,43 @@ import img1 from "../assets/img1.jpg";
 import img2 from "../assets/img2.jpg";
 import { motion } from "framer-motion";
 import { Typewriter } from "react-simple-typewriter";
-import { FaInstagram } from "react-icons/fa";
-import { FaTwitter } from "react-icons/fa";
-import { FaLinkedin } from "react-icons/fa";
-import { FaFacebook } from "react-icons/fa";
+import { FaInstagram, FaTwitter, FaLinkedin, FaFacebook } from "react-icons/fa";
 import { Link } from "react-router-dom";
+import DarkModeToggle from "../components/darkModeToggle";
+
 const Landing = () => {
   return (
-    <div className="bg-black text-gray-200 w-full h-screen flex flex-col px-6 py-4">
-      <div className="min-h-12 text-gray-400 h-auto flex flex-row items-center justify-between">
-        <div className="text-2xl font-extrabold text-decoration-uppercase ">
-          <Link to="/">
-          AFFINITY</Link>
-       
+    <div className="w-full h-screen flex flex-col px-6 py-4 bg-white dark:bg-black text-gray-800 dark:text-gray-200">
+      {/* Header Section */}
+      <div className="min-h-12 h-auto flex flex-row items-center justify-between">
+        <div className="text-2xl font-extrabold">
+          <Link to="/" className="text-black dark:text-white">AFFINITY</Link>
         </div>
         <div className="flex flex-row gap-4">
+          <DarkModeToggle />
           <Link to="/login">
-          <button className="bg-stone-700 w-24 hover:bg-stone-600 text-white px-4 py-2 rounded-md">
-            Login
-          </button></Link>
-         <Link to="/register">
-         <button className="bg-[#ff0059] w-24 hover:bg-red-500 text-white px-4 py-2 rounded-md">
-            Register
-          </button></Link>
-          
+            <button className="bg-stone-700 hover:bg-stone-600 text-white px-4 py-2 rounded-md">
+              Login
+            </button>
+          </Link>
+          <Link to="/register">
+            <button className="bg-[#ff0059] hover:bg-red-500 text-white px-4 py-2 rounded-md">
+              Register
+            </button>
+          </Link>
         </div>
       </div>
+
+      {/* Main Content Section */}
       <div className="flex flex-row h-full">
-        <div className="w-1/2 pr-12 flex flex-col h-[100%] justify-center text-gray-100 gap-5 relative">
+        {/* Text Content */}
+        <div className="w-1/2 pr-12 flex flex-col justify-center gap-5 relative">
           <h1 className="text-5xl font-extrabold">
             <Typewriter
               words={[
                 "Find love in the dark... it’s less awkward that way.",
                 "Swipe right... because love at first sight is overrated.",
-                "Heartbreak? There’s an website for that.",
+                "Heartbreak? There’s a website for that.",
                 "Single? There's someone out there as twisted as you.",
                 "Swipe left on loneliness... you deserve better.",
               ]}
@@ -49,39 +52,38 @@ const Landing = () => {
               delaySpeed={1500}
             />
           </h1>
-          <p className="text-gray-400 text-xl">
+          <p className="text-gray-500 dark:text-gray-400 text-xl">
             Meet your match in a world that understands you.
           </p>
-          <button className="w-1/3 text-xl  bg-[#ff0059] hover:bg-red-500 text-white px-4 py-2 rounded-md mt-4">
-         
-            <Link to="/register">
-            Get Started
-            </Link>
-          </button>
-
-          <div className="flex flex-row text-4xl opacity-70 gap-5  cursor-pointer absolute bottom-10">
-          <FaInstagram />
-          <FaTwitter />
-          <FaLinkedin />
-          <FaFacebook />
+          <Link to="/register">
+            <button className="w-1/3 text-xl bg-[#ff0059] hover:bg-red-500 text-white px-4 py-2 rounded-md mt-4">
+              Get Started
+            </button>
+          </Link>
+          <div className="flex flex-row text-4xl opacity-70 gap-5 cursor-pointer absolute bottom-10">
+            <FaInstagram />
+            <FaTwitter />
+            <FaLinkedin />
+            <FaFacebook />
           </div>
         </div>
 
+        {/* Card Section */}
         <motion.div
-          className="w-1/2 h-full relative flex items-center justify-center parent "
+          className="w-1/2 h-full relative flex items-center justify-center"
           initial={{ opacity: 0, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 1 }}
         >
           <motion.div
-            className="max-w-[22rem] max-h-[28rem] w-[22rem] h-[28rem] z-20 transform -rotate-12 child1 "
+            className="max-w-[22rem] max-h-[28rem] w-[22rem] h-[28rem] z-20 transform -rotate-12"
             transition={{ type: "spring", stiffness: 300, damping: 20 }}
           >
             <Card image={img1} name={"Emily"} age={25} />
           </motion.div>
 
           <motion.div
-            className="max-w-[22rem] max-h-[28rem]  w-[22rem] h-[28rem] z-10 transform rotate-6 child2"
+            className="max-w-[22rem] max-h-[28rem] w-[22rem] h-[28rem] z-10 transform rotate-6"
             transition={{ type: "spring", stiffness: 300, damping: 20 }}
           >
             <Card image={img2} />
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index bb444d1..dfcdf95 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -10,7 +10,6 @@ const Login = () => {
 
     const handleSubmit = (e) => {
         e.preventDefault();
-        // audioRef.current.play();
         loginUser(e);
     };
 
@@ -28,42 +27,42 @@ const Login = () => {
 
     return (
         <motion.div 
-            className="bg-black text-gray-200 w-full h-screen flex items-center justify-center overflow-hidden"
+            className="w-full h-screen flex items-center justify-center overflow-hidden bg-gray-50 text-gray-900 dark:bg-black dark:text-gray-200"
             variants={backgroundVariants}
             animate="animate"
             style={{
-                backgroundImage: 'radial-gradient(circle, #1a1a1a 10%, transparent 10%)',
-                backgroundSize: '50px 50px'
+                backgroundImage: 'radial-gradient(circle, #d4d4d4 10%, transparent 10%)',
+                backgroundSize: '50px 50px',
             }}
         >
             <motion.div 
-                className="bg-neutral-900 p-8 rounded-2xl shadow-2xl h-auto max-h-[90vh] flex max-w-4xl w-full relative overflow-hidden"
+                className="bg-white dark:bg-neutral-900 p-8 rounded-2xl shadow-2xl dark:shadow-black h-auto max-h-[90vh] flex max-w-4xl w-full relative overflow-hidden"
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ duration: 0.5 }}
             >
                 <motion.div
-                    className="w-1/2 pr-8 border-r border-gray-700"
+                    className="w-1/2 pr-8 border-r border-gray-300 dark:border-gray-700"
                     initial={{ opacity: 0, x: -50 }}
                     animate={{ opacity: 1, x: 0 }}
                     transition={{ duration: 0.8, ease: 'easeOut', delay: 0.2 }}
                 >
                     <h2 className="text-4xl font-extrabold mb-2 text-[#ff0059]">Welcome Back</h2>
-                    <p className="text-gray-400 mb-8">Log in to continue your journey</p>
+                    <p className="text-gray-600 dark:text-gray-400 mb-8">Log in to continue your journey</p>
                     <form onSubmit={handleSubmit} className="space-y-6">
                         <motion.div
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: 0.3 }}
                         >
-                            <label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1">Email</label>
+                            <label htmlFor="email" className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Email</label>
                             <input
                                 id="email"
                                 type="email"
                                 placeholder="Enter your email"
                                 value={loginInfo.email || ''}
                                 onChange={(e) => updateLoginInfo({ ...loginInfo, email: e.target.value })}
-                                className="w-full px-4 py-2 rounded-md bg-neutral-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#ff0059] text-gray-200 transition duration-300"
+                                className="w-full px-4 py-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#ff0059] text-gray-900 dark:text-gray-200 transition duration-300"
                             />
                         </motion.div>
                         <motion.div
@@ -71,14 +70,14 @@ const Login = () => {
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: 0.4 }}
                         >
-                            <label htmlFor="password" className="block text-sm font-medium text-gray-400 mb-1">Password</label>
+                            <label htmlFor="password" className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Password</label>
                             <input
                                 id="password"
                                 type="password"
                                 placeholder="Enter your password"
                                 value={loginInfo.password || ''}
                                 onChange={(e) => updateLoginInfo({ ...loginInfo, password: e.target.value })}
-                                className="w-full px-4 py-2 rounded-md bg-neutral-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#ff0059] text-gray-200 transition duration-300"
+                                className="w-full px-4 py-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#ff0059] text-gray-900 dark:text-gray-200 transition duration-300"
                             />
                         </motion.div>
                         <motion.button
@@ -129,4 +128,4 @@ const Login = () => {
     );
 };
 
-export default Login;
\ No newline at end of file
+export default Login; 
\ No newline at end of file
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
index 7d0154a..c5d717d 100644
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -18,16 +18,15 @@ function Register() {
 
   return (
     <motion.div 
-      className="w-full flex flex-row h-screen justify-center items-center overflow-hidden"
+      className="w-full h-screen flex items-center justify-center overflow-hidden bg-gray-100 dark:bg-black text-black dark:text-gray-200"
       variants={backgroundVariants}
       animate="animate"
       style={{
-        backgroundImage: 'radial-gradient(circle, #1a1a1a 10%, transparent 10%)',
+        backgroundImage: 'radial-gradient(circle, #e5e5e5 10%, transparent 10%)',
         backgroundSize: '50px 50px',
-        backgroundColor: 'black'
       }}
     >
-      <div className="flex flex-row bg-neutral-900 rounded-[30px] w-[85rem] h-[40rem] p-7 relative ">
+      <div className="flex flex-row bg-white dark:bg-neutral-900 rounded-[30px] w-[85rem] h-[40rem] p-7 shadow-lg relative">
         <div className="w-3/5 h-full overflow-y-scroll">
           <MultiStepForm />
         </div>
@@ -53,6 +52,7 @@ function Register() {
           <path
             d="M50 90 C75 65, 95 33, 50 10 C5 33, 25 65, 50 90Z"
             fill="#ff0059"
+            className="dark:fill-[#ff0059]" 
           />
         </motion.svg>
       </div>
diff --git a/src/utils/formValidations.js b/src/utils/formValidations.js
index 25f70f2..a6fcfef 100644
--- a/src/utils/formValidations.js
+++ b/src/utils/formValidations.js
@@ -36,10 +36,10 @@ export const validations = (name, value) => {
         regex: /^.{1,}$/, 
         message: '*Required',
       },
-      past_relationships: {
-        regex: /^(Yes|No)$/, 
-        message: '*Required',
-      },
+      // past_relationships: {
+      //   regex: /^(Yes|No)$/, 
+      //   message: '*Required',
+      // },
     };
   
     if (rules[name]) {
diff --git a/tailwind.config.js b/tailwind.config.js
index d37737f..d96ffd6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,6 @@ export default {
   theme: {
     extend: {},
   },
+  darkMode: 'class',
   plugins: [],
 }
-