diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index faa9100..aeb54eb 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -16,7 +16,7 @@
         "locomotive-scroll": "^4.1.4",
         "lucide-react": "^0.553.0",
         "motion": "^12.23.24",
-        "react": "^19.1.1",
+        "react": "^19.2.0",
         "react-dom": "^19.1.1",
         "react-parallax-tilt": "^1.7.313",
         "react-router-dom": "^7.9.5",
diff --git a/Frontend/package.json b/Frontend/package.json
index f56db63..0848f23 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -18,7 +18,7 @@
     "locomotive-scroll": "^4.1.4",
     "lucide-react": "^0.553.0",
     "motion": "^12.23.24",
-    "react": "^19.1.1",
+    "react": "^19.2.0",
     "react-dom": "^19.1.1",
     "react-parallax-tilt": "^1.7.313",
     "react-router-dom": "^7.9.5",
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 16de99e..f96a38f 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
+import { ThemeProvider } from "./context/ThemeContext";
 
 import Home from "./pages/Home";
 import Signup from "./pages/SignupLoginPage";
@@ -14,11 +15,13 @@ export default function App() {
   }, []);
   
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/signup" element={<Signup />} />
-      </Routes>
-    </Router>
+    <ThemeProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/signup" element={<Signup />} />
+        </Routes>
+      </Router>
+    </ThemeProvider>
   );
 }
diff --git a/Frontend/src/components/LoginForm.jsx b/Frontend/src/components/LoginForm.jsx
index 9bd989d..7e7793b 100644
--- a/Frontend/src/components/LoginForm.jsx
+++ b/Frontend/src/components/LoginForm.jsx
@@ -1,8 +1,11 @@
 import React, { useState } from "react";
 import axios from "axios";
+import { Chrome } from "lucide-react";
+import { useTheme } from "../context/ThemeContext";
 
 export default function LoginForm() {
   const API_URL = import.meta.env.VITE_Backend_API_URL;
+  const { isDark } = useTheme();
 
   const [data, setData] = useState({
     email: "",
@@ -29,7 +32,11 @@ export default function LoginForm() {
         name="email"
         onChange={handle}
         placeholder="Enter your email"
-        className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+        className={`w-full px-4 py-3 rounded-lg border transition ${
+          isDark
+            ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+            : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+        }`}
         required
       />
 
@@ -38,37 +45,41 @@ export default function LoginForm() {
         name="password"
         onChange={handle}
         placeholder="Password"
-        className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+        className={`w-full px-4 py-3 rounded-lg border transition ${
+          isDark
+            ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+            : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+        }`}
         required
       />
 
-      <button className="w-full py-3 bg-white text-black rounded-lg font-medium">
+      <button className={`w-full py-3 rounded-lg font-medium transition-colors ${
+        isDark
+          ? 'bg-white text-black hover:bg-neutral-200'
+          : 'bg-blue-600 text-white hover:bg-blue-700'
+      }`}>
         Sign in
       </button>
 
-      <div className="flex items-center gap-4 my-4 text-neutral-400">
-        <div className="flex-1 h-px bg-white/10" />
-        OR SIGN IN WITH
-        <div className="flex-1 h-px bg-white/10" />
+      <div className={`flex items-center gap-4 my-4 text-sm uppercase font-semibold ${
+        isDark ? 'text-neutral-400' : 'text-gray-600'
+      }`}>
+        <div className={`flex-1 h-px ${isDark ? 'bg-white/10' : 'bg-blue-200/30'}`} />
+        OR CONTINUE WITH
+        <div className={`flex-1 h-px ${isDark ? 'bg-white/10' : 'bg-blue-200/30'}`} />
       </div>
 
-      <div className="grid grid-cols-2 gap-4">
-        <button
-          type="button"
-          className="py-3 rounded-lg bg-black/40 border border-white/10 text-white flex items-center justify-center gap-2"
-        >
-          <img src="/google-icon.png" className="h-5" />
-          Google
-        </button>
-
-        <button
-          type="button"
-          className="py-3 rounded-lg bg-black/40 border border-white/10 text-white flex items-center justify-center gap-2"
-        >
-          <img src="/apple-icon.png" className="h-5" />
-          Apple
-        </button>
-      </div>
+      <button
+        type="button"
+        className={`w-full py-3 rounded-lg border transition flex items-center justify-center gap-2 font-medium ${
+          isDark
+            ? 'bg-black/40 border-white/10 text-white hover:bg-white/5'
+            : 'bg-white/50 border-blue-200/30 text-black hover:bg-blue-50'
+        }`}
+      >
+        <Chrome size={18} />
+        Google
+      </button>
     </form>
   );
 }
diff --git a/Frontend/src/components/Navbar.jsx b/Frontend/src/components/Navbar.jsx
index 636f5ce..602eaa4 100644
--- a/Frontend/src/components/Navbar.jsx
+++ b/Frontend/src/components/Navbar.jsx
@@ -1,16 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { Menu, X, ShieldCheck } from "lucide-react";
 import { Classic } from "@theme-toggles/react";
 import "@theme-toggles/react/css/Classic.css";
 import { LiquidButton } from "@/components/ui/shadcn-io/liquid-button";
+import { useTheme } from "@/context/ThemeContext";
 
 export default function Navbar({ locoScrollRef }) {
   const [isOpen, setIsOpen] = useState(false);
-  const [isDark, setIsDark] = useState(() => {
-    const savedTheme = localStorage.getItem("theme");
-    return savedTheme === "dark";
-  });
+  const { isDark, toggleTheme } = useTheme();
 
   const navLinks = [
     { name: "Features", target: "#features" },
@@ -25,18 +23,8 @@ export default function Navbar({ locoScrollRef }) {
     }
   };
 
-  useEffect(() => {
-    if (isDark) {
-      document.body.setAttribute("data-theme", "dark");
-      localStorage.setItem("theme", "dark");
-    } else {
-      document.body.setAttribute("data-theme", "light");
-      localStorage.setItem("theme", "light");
-    }
-  }, [isDark]);
-
   function handleTheme() {
-    setIsDark((prev) => !prev);
+    toggleTheme();
   }
 
   return (
diff --git a/Frontend/src/components/RoleSelector.jsx b/Frontend/src/components/RoleSelector.jsx
index 1a96d7f..20f1d33 100644
--- a/Frontend/src/components/RoleSelector.jsx
+++ b/Frontend/src/components/RoleSelector.jsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { User, BriefcaseMedical, Hospital } from "lucide-react";
+import { useTheme } from "../context/ThemeContext";
 
 export default function RoleSelector({ role, setRole }) {
+  const { isDark } = useTheme();
   const items = [
     { key: "patient", label: "Patient", icon: <User size={26} /> },
     { key: "doctor", label: "Doctor", icon: <BriefcaseMedical size={26} /> },
@@ -14,16 +16,17 @@ export default function RoleSelector({ role, setRole }) {
         <div
           key={r.key}
           onClick={() => setRole(r.key)}
-          className={`cursor-pointer px-4 py-5 rounded-xl flex flex-col items-center gap-2
-            backdrop-blur-lg border transition-all
-            ${
-              role === r.key
+          className={`cursor-pointer px-4 py-5 rounded-xl flex flex-col items-center gap-2 backdrop-blur-lg border transition-all ${
+            role === r.key
+              ? isDark
                 ? "bg-white/10 border-white/30 text-white shadow-lg scale-[1.02]"
-                : "bg-black/40 border-white/10 text-neutral-300 hover:bg-black/50"
-            }
-          `}
+                : "bg-blue-600/20 border-blue-400/50 text-blue-700 shadow-lg scale-[1.02]"
+              : isDark
+              ? "bg-black/40 border-white/10 text-neutral-300 hover:bg-black/50"
+              : "bg-white/40 border-blue-200/30 text-gray-700 hover:bg-white/60"
+          }`}
         >
-          <div className="text-blue-400">{r.icon}</div>
+          <div className={isDark ? "text-blue-400" : "text-blue-600"}>{r.icon}</div>
           <div className="text-sm font-medium">{r.label}</div>
         </div>
       ))}
diff --git a/Frontend/src/components/SignupForm.jsx b/Frontend/src/components/SignupForm.jsx
index a1600cc..87d8a68 100644
--- a/Frontend/src/components/SignupForm.jsx
+++ b/Frontend/src/components/SignupForm.jsx
@@ -1,11 +1,14 @@
 import React, { useState } from "react";
 import axios from "axios";
 import RoleSelector from "./RoleSelector";
+import { Loader2, Chrome } from "lucide-react"; // Icons
+import { useTheme } from "../context/ThemeContext";
 
 export default function SignupForm() {
   const API_URL = import.meta.env.VITE_Backend_API_URL;
-
+  const { isDark } = useTheme();
   const [role, setRole] = useState("patient");
+  const [loading, setLoading] = useState(false); // Add loading state
 
   const [data, setData] = useState({
     firstName: "",
@@ -24,6 +27,7 @@ export default function SignupForm() {
 
   const submit = async (e) => {
     e.preventDefault();
+    setLoading(true); // Start loading
 
     const payload = {
       name: `${data.firstName} ${data.lastName}`.trim(),
@@ -33,139 +37,165 @@ export default function SignupForm() {
       gender: data.gender,
       role,
       ...(role === "doctor"
-        ? {
-            specialization: data.specialization,
-            licenseNumber: data.licenseNumber,
-          }
+        ? { specialization: data.specialization, licenseNumber: data.licenseNumber }
         : {}),
     };
 
     try {
       await axios.post(`${API_URL}/auth/signup`, payload);
       alert("Account created!");
+      // You might want to redirect here: window.location.href = '/dashboard';
     } catch (err) {
       alert(err?.response?.data?.message || "Signup failed");
+    } finally {
+      setLoading(false); // Stop loading
     }
   };
 
   return (
     <>
-      {/* Role Selector (only once!) */}
       <RoleSelector role={role} setRole={setRole} />
 
-      <form onSubmit={submit} className="space-y-4">
-        {/* Name */}
+      <form onSubmit={submit} className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
         <div className="grid grid-cols-2 gap-4">
           <input
             name="firstName"
             onChange={handle}
             placeholder="First name"
-            className="px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+            className={`px-4 py-3 rounded-xl border transition ${
+              isDark
+                ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+                : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+            }`}
             required
           />
           <input
             name="lastName"
             onChange={handle}
             placeholder="Last name"
-            className="px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+            className={`px-4 py-3 rounded-xl border transition ${
+              isDark
+                ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+                : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+            }`}
             required
           />
         </div>
 
-        {/* Email */}
         <input
           name="email"
           type="email"
           onChange={handle}
           placeholder="Enter your email"
-          className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+          className={`w-full px-4 py-3 rounded-xl border transition ${
+            isDark
+              ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+              : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+          }`}
           required
         />
 
-        {/* DOB + Gender */}
         <div className="grid grid-cols-2 gap-4">
           <input
             name="dob"
             type="date"
             onChange={handle}
-            className="px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+            className={`px-4 py-3 rounded-xl border transition ${
+              isDark
+                ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+                : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+            }`}
             required
           />
           <select
             name="gender"
             onChange={handle}
-            className="px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+            className={`px-4 py-3 rounded-xl border transition ${
+              isDark
+                ? 'bg-black/30 border-white/10 text-white focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+                : 'bg-white/60 border-blue-200/50 text-black focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+            }`}
             required
           >
-            <option value="">Select Gender</option>
-            <option>Male</option>
-            <option>Female</option>
-            <option>Other</option>
+            <option value="" className={isDark ? 'bg-neutral-800' : 'bg-white'}>Select Gender</option>
+            <option value="Male" className={isDark ? 'bg-neutral-800' : 'bg-white'}>Male</option>
+            <option value="Female" className={isDark ? 'bg-neutral-800' : 'bg-white'}>Female</option>
+            <option value="Other" className={isDark ? 'bg-neutral-800' : 'bg-white'}>Other</option>
           </select>
         </div>
 
-        {/* Password */}
         <input
           name="password"
           type="password"
           onChange={handle}
           placeholder="Password"
-          className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+          className={`w-full px-4 py-3 rounded-xl border transition ${
+            isDark
+              ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+              : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+          }`}
           required
         />
 
-        {/* Doctor-only fields */}
         {role === "doctor" && (
-          <div className="space-y-3">
+          <div className="space-y-4 animate-in fade-in zoom-in-95 duration-300">
             <input
               name="specialization"
               onChange={handle}
               placeholder="Specialization"
-              className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+              className={`w-full px-4 py-3 rounded-xl border transition ${
+                isDark
+                  ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+                  : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+              }`}
               required
             />
             <input
               name="licenseNumber"
               onChange={handle}
               placeholder="License Number"
-              className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
+              className={`w-full px-4 py-3 rounded-xl border transition ${
+                isDark
+                  ? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+                  : 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
+              }`}
               required
             />
           </div>
         )}
 
-        {/* Submit button */}
-        <button className="w-full py-3 bg-white text-black rounded-lg font-medium">
-          Create an account
+        <button 
+          disabled={loading}
+          className={`w-full py-3.5 rounded-xl font-bold transition-colors disabled:opacity-70 flex justify-center items-center gap-2 ${
+            isDark
+              ? 'bg-white hover:bg-neutral-200 text-black'
+              : 'bg-blue-600 hover:bg-blue-700 text-white'
+          }`}
+        >
+          {loading && <Loader2 className="animate-spin" size={18} />}
+          {loading ? "Creating..." : "Create an account"}
         </button>
 
-        {/* Divider */}
-        <div className="flex items-center gap-4 my-4 text-neutral-400">
-          <div className="flex-1 h-px bg-white/10" />
-          OR SIGN IN WITH
-          <div className="flex-1 h-px bg-white/10" />
+        <div className={`flex items-center gap-4 my-4 text-xs uppercase tracking-widest font-semibold ${
+          isDark ? 'text-neutral-500' : 'text-gray-600'
+        }`}>
+          <div className={`flex-1 h-px ${isDark ? 'bg-white/10' : 'bg-blue-200/30'}`} />
+          Or continue with
+          <div className={`flex-1 h-px ${isDark ? 'bg-white/10' : 'bg-blue-200/30'}`} />
         </div>
 
-        {/* Social */}
-        <div className="grid grid-cols-2 gap-4">
-          <button
-            type="button"
-            className="py-3 rounded-lg bg-black/40 border border-white/10 text-white flex items-center justify-center gap-2"
-          >
-            <img src="/google-icon.png" className="h-5" />
-            Google
-          </button>
-
-          <button
-            type="button"
-            className="py-3 rounded-lg bg-black/40 border border-white/10 text-white flex items-center justify-center gap-2"
-          >
-            <img src="/apple-icon.png" className="h-5" />
-            Apple
-          </button>
-        </div>
+        <button
+          type="button"
+          className={`w-full py-3 rounded-xl border transition flex items-center justify-center gap-2 font-medium ${
+            isDark
+              ? 'bg-black/40 border-white/10 text-white hover:bg-white/5'
+              : 'bg-white/50 border-blue-200/30 text-black hover:bg-blue-50'
+          }`}
+        >
+          <Chrome size={18} />
+          Google
+        </button>
       </form>
     </>
   );
-}
-
+}
\ No newline at end of file
diff --git a/Frontend/src/context/ThemeContext.jsx b/Frontend/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..c6e2eba
--- /dev/null
+++ b/Frontend/src/context/ThemeContext.jsx
@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [isDark, setIsDark] = useState(() => {
+    const savedTheme = localStorage.getItem("theme");
+    return savedTheme === "dark";
+  });
+
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.setAttribute("data-theme", "dark");
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-theme", "light");
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDark]);
+
+  const toggleTheme = () => {
+    setIsDark((prev) => !prev);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+};
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index 36db0da..a7f5c74 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -9,6 +9,37 @@
   --color-greenish: #00c6ad;
 }
 
+/* Slide animations for form switching */
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-left {
+  animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
 .reveal {
   opacity: 0;
   visibility: hidden;
diff --git a/Frontend/src/pages/SignUp/RoleSelector.jsx b/Frontend/src/pages/SignUp/RoleSelector.jsx
deleted file mode 100644
index dd4f1cf..0000000
--- a/Frontend/src/pages/SignUp/RoleSelector.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { User, Hospital, BriefcaseMedical } from "lucide-react";
-
-export default function RoleSelector({ role, setRole }) {
-  const roles = [
-    { key: "patient", icon: <User size={28} />, label: "Patient" },
-    { key: "doctor", icon: <BriefcaseMedical size={28} />, label: "Doctor" },
-    { key: "hospital", icon: <Hospital size={28} />, label: "Hospital" },
-  ];
-
-  return (
-    <div className="grid grid-cols-3 gap-4 mb-8">
-      {roles.map((r) => (
-        <div
-          key={r.key}
-          onClick={() => setRole(r.key)}
-          className={`cursor-pointer text-center p-6 rounded-xl border transition-all duration-300 transform ${
-            role === r.key
-              ? "bg-blue-100 border-blue-500 scale-110 shadow-md"
-              : "bg-white/10 border-transparent hover:bg-white/20 hover:scale-105"
-          }`}
-        >
-          <div className="flex flex-col items-center space-y-2">
-            <div className="text-blue-600">{r.icon}</div>
-            <h3 className="font-semibold text-sm text-gray-800">{r.label}</h3>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/Frontend/src/pages/SignUp/SignupForm.jsx b/Frontend/src/pages/SignUp/SignupForm.jsx
deleted file mode 100644
index d167c6b..0000000
--- a/Frontend/src/pages/SignUp/SignupForm.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-export default function SignupForm({
-  role,
-  formData,
-  setFormData,
-  handleSubmit,
-}) {
-  const handleChange = (e) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value });
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="space-y-5 p-6 bg-white/40 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 max-w-md mx-auto"
-    >
-      <h2 className="text-2xl font-semibold text-gray-800 text-center mb-4">
-        {role
-          ? `Sign up as a ${role.charAt(0).toUpperCase() + role.slice(1)}`
-          : "Create Account"}
-      </h2>
-
-      <div className="space-y-3">
-        <input
-          name="name"
-          onChange={handleChange}
-          placeholder="Full Name"
-          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 placeholder-gray-500 transition"
-          required
-        />
-        <input
-          type="email"
-          name="email"
-          onChange={handleChange}
-          placeholder="Email Address"
-          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 placeholder-gray-500 transition"
-          required
-        />
-        <input
-          type="password"
-          name="password"
-          onChange={handleChange}
-          placeholder="Password"
-          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 placeholder-gray-500 transition"
-          required
-        />
-      </div>
-
-      {/* Patient and Doctor Fields*/}
-      {(role === "patient" || role === "doctor") && (
-        <div className="flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
-          <input
-            type="date"
-            name="dob"
-            onChange={handleChange}
-            className="w-full sm:w-1/2 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 text-gray-700 transition cursor-text"
-            required
-          />
-          <select
-            name="gender"
-            onChange={handleChange}
-            className="w-full sm:w-1/2 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 text-gray-700 transition cursor-pointer"
-            required
-          >
-            <option value="">Select Gender</option>
-            <option>Male</option>
-            <option>Female</option>
-            <option>Other</option>
-          </select>
-        </div>
-      )}
-
-      {/* Doctor Fields */}
-      {role === "doctor" && (
-        <div className="space-y-3">
-          <input
-            name="specialization"
-            onChange={handleChange}
-            placeholder="Specialization"
-            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 placeholder-gray-500 transition"
-            required
-          />
-          <input
-            name="licenseNumber"
-            onChange={handleChange}
-            placeholder="License Number"
-            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/70 placeholder-gray-500 transition"
-            required
-          />
-        </div>
-      )}
-
-      <button
-        type="submit"
-        className="w-full py-3 mt-2 bg-linear-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg shadow-md hover:from-blue-700 hover:to-blue-800 transition-all duration-300 transform hover:scale-[1.02] cursor-pointer"
-      >
-        Create Account
-      </button>
-    </form>
-  );
-}
diff --git a/Frontend/src/pages/SignUp/SignupPage.jsx b/Frontend/src/pages/SignUp/SignupPage.jsx
deleted file mode 100644
index f6c1cd7..0000000
--- a/Frontend/src/pages/SignUp/SignupPage.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useState, useEffect } from "react";
-import axios from "axios";
-import RoleSelector from "./RoleSelector";
-import SignupForm from "./SignupForm";
-import Typewriter from "typewriter-effect";
-
-export default function SignupPage() {
-  const [role, setRole] = useState("");
-  const [formData, setFormData] = useState({});
-  const API_URL = import.meta.env.VITE_Backend_API_URL;
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    try {
-      await axios.post(`${API_URL}/auth/signup`, { ...formData, role });
-      alert("Signup successful!");
-    } catch (err) {
-      alert(err.response?.data?.message || "Signup failed");
-    }
-  };
-
-  return (
-    <div className="relative min-h-screen flex flex-col items-center justify-center px-4 py-12">
-      {/* Header */}
-      <header className="fixed top-0 left-0 w-full bg-opacity-70 backdrop-blur-md z-50 px-6 py-4 flex justify-between items-center">
-        <a href="/" className="flex items-center text-white font-bold text-xl">
-          <img
-            src="/medichain Icon.png"
-            alt="Logo"
-            className="h-8 mr-2"
-          />
-          MediChain
-        </a>
-      </header>
-
-      {/* Card */}
-      <div className="relative z-10 w-full max-w-lg rounded-2xl backdrop-blur-xl bg-white/20 shadow-lg p-8 mt-20 border-5 border-gray-200 ">
-        <h1 className="text-4xl font-black text-center mb-3">Create Account</h1>
-        <div className="text-center text-gray-400 mb-6">
-          <Typewriter
-            options={{
-              strings: [
-                "Join the future of healthcare. Start by selecting your role.",
-                "Secure your medical journey with MediChain.",
-                "Developed with ❤️ by Adarsh Abhinav²",
-              ],
-              delay: 50,
-              deleteSpeed: 15,
-              autoStart: true,
-              loop: true,
-              pauseFor: 2000,
-            }}
-          />
-        </div>
-
-        <RoleSelector role={role} setRole={setRole} />
-
-        {role && (
-          <SignupForm
-            role={role}
-            formData={formData}
-            setFormData={setFormData}
-            handleSubmit={handleSubmit}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/Frontend/src/pages/SignupLoginPage.jsx b/Frontend/src/pages/SignupLoginPage.jsx
index 490e947..375cfba 100644
--- a/Frontend/src/pages/SignupLoginPage.jsx
+++ b/Frontend/src/pages/SignupLoginPage.jsx
@@ -3,65 +3,126 @@ import SignupForm from "../components/SignupForm";
 import LoginForm from "../components/LoginForm";
 import BackgroundDNA from "../components/BackgroundDNA";
 import Navbar from "../components/Navbar";
+import { useTheme } from "../context/ThemeContext";
 
-/**
- * SignupLoginPage.jsx
- * - Uses BackgroundDNA for extreme DNA lab animation
- * - Modal card sits on top (z-10)
- */
 export default function SignupLoginPage() {
   const [mode, setMode] = useState("signup");
-  const [open, setOpen] = useState(true);
-
-  if (!open) return null;
+  const { isDark } = useTheme();
 
   return (
-    <div className="fixed inset-0 z-50">
-    <Navbar />
-
-      {/* Animated background */}
-      <BackgroundDNA />
+    // Change 1: Allow scrolling. We use min-h-screen instead of fixed inset-0 for the container content
+    <div className={`relative min-h-screen w-full transition-colors duration-300 ${isDark ? 'dark bg-slate-950 text-white' : 'bg-gradient-to-br from-blue-50 via-white to-purple-50 text-black'}`}>
+      
+      <Navbar />
 
-      {/* subtle dim overlay to increase contrast on modal */}
-      <div className="absolute inset-0 bg-black/55 z-0" />
+      {/* Background stays fixed so it doesn't scroll with the form */}
+      <div className="fixed inset-0 z-0">
+        {isDark && <BackgroundDNA />}
+        {/* Overlay */}
+        <div className={`absolute inset-0 transition-colors duration-300 ${isDark ? 'bg-black/60 backdrop-blur-[2px]' : 'bg-gradient-to-br from-blue-100/20 to-purple-100/20 backdrop-blur-[1px]'}`} />
+      </div>
 
-      {/* modal container */}
-      <div className="relative w-full max-w-lg mx-auto z-10">
-        <div className="relative bg-gradient-to-b from-neutral-900/80 to-neutral-900/70 backdrop-blur-2xl border border-white/10 p-7 rounded-2xl shadow-2xl">
-          {/* Header row: tabs + optional vector logo */}
-          <div className="flex items-center justify-between mb-6">
+      {/* Modal Container - Centered but allows scrolling if height is too big */}
+      <div className="relative z-10 flex min-h-screen items-center justify-center p-4 py-20">
+        
+        {/* The Card */}
+        <div className={`w-full max-w-lg relative backdrop-blur-xl border p-8 rounded-3xl transition-colors duration-300 ${
+          isDark 
+            ? 'bg-neutral-900/80 border-white/10 shadow-2xl' 
+            : 'bg-white border-blue-200/50 shadow-2xl drop-shadow-xl'
+        }`}>
+          
+          {/* Header row */}
+          <div className="flex items-center justify-between mb-8">
             <div className="flex items-center gap-3">
-              <div className="rounded-full px-3 py-1 bg-white text-black font-medium">MediChain</div>
             </div>
 
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => setMode("signup")}
-                className={`px-4 py-2 rounded-full text-sm transition ${mode === "signup" ? "bg-white text-black font-medium" : "bg-transparent text-white/70"}`}
-              >
-                Sign up
-              </button>
-              <button
-                onClick={() => setMode("signin")}
-                className={`px-4 py-2 rounded-full text-sm transition ${mode === "signin" ? "bg-white text-black font-medium" : "bg-transparent text-white/70"}`}
-              >
-                Sign in
-              </button>
-              <button onClick={() => setOpen(false)} className="text-white/60 ml-2">✕</button>
+            <div className="flex items-center gap-2">
+              {/* Toggle Buttons */}
+              <div className={`rounded-full p-1 flex border transition-colors duration-300 ${
+                isDark 
+                  ? 'bg-black/40 border-white/5' 
+                  : 'bg-gray-200/60 border-blue-300/30'
+              }`}>
+                <button
+                  onClick={() => setMode("signup")}
+                  className={`px-4 py-1.5 rounded-full text-xs font-medium transition-all duration-300 ${
+                    mode === "signup" 
+                      ? isDark
+                        ? "bg-white text-black shadow-lg"
+                        : "bg-blue-600 text-white shadow-lg"
+                      : isDark
+                      ? "text-neutral-400 hover:text-white"
+                      : "text-gray-700 hover:text-gray-900"
+                  }`}
+                >
+                  Sign up
+                </button>
+                <button
+                  onClick={() => setMode("signin")}
+                  className={`px-4 py-1.5 rounded-full text-xs font-medium transition-all duration-300 ${
+                    mode === "signin" 
+                      ? isDark
+                        ? "bg-white text-black shadow-lg"
+                        : "bg-blue-600 text-white shadow-lg"
+                      : isDark
+                      ? "text-neutral-400 hover:text-white"
+                      : "text-gray-700 hover:text-gray-900"
+                  }`}
+                >
+                  Sign in
+                </button>
+              </div>
             </div>
           </div>
 
-          <h1 className="text-3xl font-extrabold text-white mb-6">
+          {/* Dynamic Title */}
+          <h1 className={`text-3xl font-bold mb-2 transition-colors duration-300 ${
+            isDark ? 'text-white' : 'text-black'
+          }`}>
             {mode === "signup" ? "Create an account" : "Welcome back"}
           </h1>
+          <p className={`text-sm mb-6 transition-colors duration-300 ${
+            isDark ? 'text-neutral-400' : 'text-gray-700'
+          }`}>
+             {mode === "signup" ? "Enter your details to get started." : "Please enter your details to sign in."}
+          </p>
 
-          {mode === "signup" ? <SignupForm /> : <LoginForm />}
-        </div>
+          {/* Render Form */}
+          <div className={`transition-all duration-500 overflow-hidden ${
+            mode === "signup" 
+              ? 'slide-in-left' 
+              : 'slide-in-right'
+          }`}>
+             {mode === "signup" ? <SignupForm /> : <LoginForm />}
+          </div>
 
-        <div className="mt-4 text-center text-neutral-400 text-sm">
-          {mode === "signup" ? "By creating an account, you agree to our Terms & Service" : "Don't have an account? Switch to Sign up"}
+          {/* Footer Toggle Text */}
+          <div className={`mt-6 text-center text-sm transition-colors duration-300 ${
+            isDark ? 'text-neutral-500' : 'text-gray-700'
+          }`}>
+            {mode === "signup" ? (
+              <>
+                Already have an account?{" "}
+                <button onClick={() => setMode("signin")} className={`font-semibold hover:underline ${
+                  isDark ? 'text-blue-400' : 'text-blue-600'
+                }`}>
+                  Sign in
+                </button>
+              </>
+            ) : (
+              <>
+                Don't have an account?{" "}
+                <button onClick={() => setMode("signup")} className={`font-semibold hover:underline ${
+                  isDark ? 'text-blue-400' : 'text-blue-600'
+                }`}>
+                  Sign up
+                </button>
+              </>
+            )}
+          </div>
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file