diff --git a/client/package-lock.json b/client/package-lock.json
index 165d073..6ef5bd4 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18,6 +18,7 @@
         "react": "^19.1.0",
         "react-chartjs-2": "^5.3.0",
         "react-dom": "^19.1.0",
+        "react-hot-toast": "^2.6.0",
         "react-icons": "^5.5.0",
         "react-router-dom": "^6.30.1",
         "recharts": "^3.0.2",
@@ -2727,8 +2728,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -3468,6 +3468,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4342,6 +4351,23 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
+      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
diff --git a/client/package.json b/client/package.json
index 9ef6783..eb54292 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,6 +20,7 @@
     "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^6.30.1",
     "recharts": "^3.0.2",
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 7ebc50c..8e4b4fe 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,31 +1,70 @@
-// import Header from "./components/Header";
-// import Home from "./pages/Home";
-// import Footer from "./components/Footer";
-
-// function App() {
-// 	return (
-// 		<div className="min-h-screen bg-white">
-// 			<Header />
-// 			<Home />
-// 			<Footer />
-// 		</div>
-// 	);
-// }
-// export default App;
 import { Outlet } from "react-router-dom";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import ScrollToTop from "./components/ScrollToTop";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   return (
     <div className="min-h-screen bg-white flex flex-col">
       <ScrollToTop />
       <Header />
+
       <main className="flex-grow">
         <Outlet /> {/* This will render the current page */}
       </main>
+
       <Footer />
+
+      {/* Global Toast container */}
+      <Toaster
+        position="top-right"
+        toastOptions={{
+          duration: 4000,
+          style: {
+            fontSize: "15px",
+            fontWeight: "600",
+            borderRadius: "14px",
+            padding: "14px 20px",
+            color: "#fff",
+            boxShadow: "0 6px 18px rgba(0,0,0,0.15)",
+            backgroundSize: "200% 200%",
+            animation: "gradientShift 3s ease infinite",
+          },
+          success: {
+            style: {
+              background: "linear-gradient(135deg, #34d399, #3b82f6)", // teal → blue
+            },
+            iconTheme: {
+              primary: "#10b981",
+              secondary: "#fff",
+            },
+          },
+          error: {
+            style: {
+              background: "linear-gradient(135deg, #f472b6, #a78bfa)", // pink → purple
+            },
+            iconTheme: {
+              primary: "#8b5cf6",
+              secondary: "#fff",
+            },
+          },
+          loading: {
+            style: {
+              background: "linear-gradient(135deg, #06b6d4, #3b82f6)", // cyan → blue
+            },
+          },
+        }}
+      />
+
+      {/* Gradient animation keyframes */}
+      <style>{`
+        @keyframes gradientShift {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/client/src/components/ContactForm.jsx b/client/src/components/ContactForm.jsx
index be022ad..a6e7e0d 100644
--- a/client/src/components/ContactForm.jsx
+++ b/client/src/components/ContactForm.jsx
@@ -3,209 +3,184 @@ import axios from "axios";
 import { FaPaperPlane } from "react-icons/fa";
 
 export default function ContactForm() {
-	const [formData, setFormData] = useState({
-		name: "",
-		email: "",
-		subject: "",
-		category: "general",
-		message: "",
-	});
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    subject: "",
+    category: "general",
+    message: "",
+  });
 
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-	const categories = [
-		{ value: "general", label: "General Inquiry" },
-		{ value: "feature", label: "Feature Request" },
-		{ value: "bug", label: "Bug Report" },
-		{ value: "collaboration", label: "Collaboration" },
-	];
+  const categories = [
+    { value: "general", label: "General Inquiry" },
+    { value: "feature", label: "Feature Request" },
+    { value: "bug", label: "Bug Report" },
+    { value: "collaboration", label: "Collaboration" },
+  ];
 
-	const handleChange = (e) => {
-		const { name, value } = e.target;
-		setFormData((prev) => ({ ...prev, [name]: value }));
-	};
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
 
-	const handleSubmit = async (e) => {
-		e.preventDefault();
-		setIsSubmitting(true);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
 
-		try {
-			const response = await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/contact`,
-				formData,
-				{
-					headers: {
-						"Content-Type": "application/json",
-					},
-				}
-			);
+    try {
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/contact`,
+        formData,
+        { headers: { "Content-Type": "application/json" } }
+      );
 
-			setIsSubmitted(true);
-			setTimeout(() => {
-				setIsSubmitted(false);
-				setFormData({
-					name: "",
-					email: "",
-					subject: "",
-					category: "general",
-					message: "",
-				});
-			}, 5000);
-		} catch (error) {
-			console.error("Error submitting contact form:", error);
-			alert(
-				"There was an error submitting your message. Please try again later."
-			);
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
+      alert("Message sent successfully ✅");
+      setFormData({
+        name: "",
+        email: "",
+        subject: "",
+        category: "general",
+        message: "",
+      });
+    } catch (error) {
+      console.error("Error submitting contact form:", error);
+      alert("❌ There was an error submitting your message.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
-	if (isSubmitted) {
-		return (
-			<div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
-				<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-					<FaPaperPlane className="w-8 h-8 text-blue-600" />
-				</div>
-				<h3 className="text-2xl font-bold text-gray-900 mb-2">
-					Message Sent!
-				</h3>
-				<p className="text-gray-600">
-					Thank you for reaching out. We'll get back to you within 24
-					hours.
-				</p>
-			</div>
-		);
-	}
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6 sm:p-8 max-w-4xl w-full mx-auto">
+      <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-6 text-center sm:text-left">
+        Send us a Message
+      </h2>
 
-	return (
-		<div className="bg-white rounded-lg border border-gray-200 p-8 max-w-4xl">
-			<h2 className="text-2xl font-bold text-gray-900 mb-6">
-				Send us a Message
-			</h2>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Name + Email */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-gray-700 mb-2"
+            >
+              Full Name <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              className="w-full px-3 sm:px-4 py-2.5 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm sm:text-base"
+              placeholder="Your full name"
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 mb-2"
+            >
+              Email Address <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              required
+              className="w-full px-3 sm:px-4 py-2.5 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm sm:text-base"
+              placeholder="your.email@example.com"
+            />
+          </div>
+        </div>
 
-			<form onSubmit={handleSubmit} className="space-y-6">
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-					<div>
-						<label
-							htmlFor="name"
-							className="block text-sm font-medium text-gray-700 mb-2"
-						>
-							Full Name <span className="text-red-600">*</span>
-						</label>
-						<input
-							type="text"
-							id="name"
-							name="name"
-							value={formData.name}
-							onChange={handleChange}
-							required
-							className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-							placeholder="Your full name"
-						/>
-					</div>
-					<div>
-						<label
-							htmlFor="email"
-							className="block text-sm font-medium text-gray-700 mb-2"
-						>
-							Email Address{" "}
-							<span className="text-red-600">*</span>
-						</label>
-						<input
-							type="email"
-							id="email"
-							name="email"
-							value={formData.email}
-							onChange={handleChange}
-							required
-							className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-							placeholder="your.email@example.com"
-						/>
-					</div>
-				</div>
+        {/* Category + Subject */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+          <div>
+            <label
+              htmlFor="category"
+              className="block text-sm font-medium text-gray-700 mb-2"
+            >
+              Category
+            </label>
+            <select
+              id="category"
+              name="category"
+              value={formData.category}
+              onChange={handleChange}
+              className="w-full px-3 sm:px-4 py-2.5 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm sm:text-base"
+            >
+              {categories.map((category) => (
+                <option key={category.value} value={category.value}>
+                  {category.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label
+              htmlFor="subject"
+              className="block text-sm font-medium text-gray-700 mb-2"
+            >
+              Subject <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="text"
+              id="subject"
+              name="subject"
+              value={formData.subject}
+              onChange={handleChange}
+              required
+              className="w-full px-3 sm:px-4 py-2.5 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm sm:text-base"
+              placeholder="Brief description of your inquiry"
+            />
+          </div>
+        </div>
 
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-					<div>
-						<label
-							htmlFor="category"
-							className="block text-sm font-medium text-gray-700 mb-2"
-						>
-							Category
-						</label>
-						<select
-							id="category"
-							name="category"
-							value={formData.category}
-							onChange={handleChange}
-							className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-						>
-							{categories.map((category) => (
-								<option
-									key={category.value}
-									value={category.value}
-								>
-									{category.label}
-								</option>
-							))}
-						</select>
-					</div>
-					<div>
-						<label
-							htmlFor="subject"
-							className="block text-sm font-medium text-gray-700 mb-2"
-						>
-							Subject <span className="text-red-600">*</span>
-						</label>
-						<input
-							type="text"
-							id="subject"
-							name="subject"
-							value={formData.subject}
-							onChange={handleChange}
-							required
-							className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-							placeholder="Brief description of your inquiry"
-						/>
-					</div>
-				</div>
-				<div>
-					<label
-						htmlFor="message"
-						className="block text-sm font-medium text-gray-700 mb-2"
-					>
-						Message <span className="text-red-600">*</span>
-					</label>
-					<textarea
-						id="message"
-						name="message"
-						value={formData.message}
-						onChange={handleChange}
-						required
-						rows={6}
-						className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
-						placeholder="Please provide details about your inquiry..."
-					/>
-				</div>
-				<button
-					type="submit"
-					disabled={isSubmitting}
-					className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center space-x-2"
-				>
-					{isSubmitting ? (
-						<>
-							<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-							<span>Sending...</span>
-						</>
-					) : (
-						<>
-							<FaPaperPlane className="w-4 h-4" />
-							<span>Send Message</span>
-						</>
-					)}
-				</button>
-			</form>
-		</div>
-	);
+        {/* Message */}
+        <div>
+          <label
+            htmlFor="message"
+            className="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Message <span className="text-red-600">*</span>
+          </label>
+          <textarea
+            id="message"
+            name="message"
+            value={formData.message}
+            onChange={handleChange}
+            required
+            rows={5}
+            className="w-full px-3 sm:px-4 py-2.5 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none text-sm sm:text-base"
+            placeholder="Please provide details about your inquiry..."
+          />
+        </div>
+
+        {/* Button */}
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white font-semibold py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg transition-colors flex items-center justify-center space-x-2 text-sm sm:text-base"
+        >
+          {isSubmitting ? (
+            <>
+              <div className="w-4 h-4 sm:w-5 sm:h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+              <span>Sending...</span>
+            </>
+          ) : (
+            <>
+              <FaPaperPlane className="w-4 h-4" />
+              <span>Send Message</span>
+            </>
+          )}
+        </button>
+      </form>
+    </div>
+  );
 }
diff --git a/client/src/components/FAQ.jsx b/client/src/components/FAQ.jsx
index 25f79dc..4c04280 100644
--- a/client/src/components/FAQ.jsx
+++ b/client/src/components/FAQ.jsx
@@ -1,5 +1,5 @@
-import { useState } from "react"
-import { FaChevronDown, FaChevronUp } from "react-icons/fa"
+import { useState } from "react";
+import { FaChevronDown } from "react-icons/fa";
 import { Link } from "react-router-dom";
 
 export default function FAQ({
@@ -11,70 +11,81 @@ export default function FAQ({
 }) {
   const [openItems, setOpenItems] = useState(
     faqs.map((faq, index) => (faq.defaultOpen ? index : -1)).filter((index) => index !== -1)
-  )
+  );
 
   const toggleItem = (index) => {
     if (allowMultipleOpen) {
       setOpenItems((prev) =>
         prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
-      )
+      );
     } else {
-      setOpenItems((prev) => (prev.includes(index) ? [] : [index]))
+      setOpenItems((prev) => (prev.includes(index) ? [] : [index]));
     }
-  }
+  };
 
   return (
     <div className={`max-w-4xl mx-auto ${className}`}>
       {(title || subtitle) && (
         <div className="text-center mb-8">
           {title && <h2 className="text-3xl font-bold text-gray-900">{title}</h2>}
-          {subtitle && <p className="text-gray-600 text-lg max-w-2xl mx-auto">{subtitle}</p>}
+          {subtitle && (
+            <p className="text-gray-600 text-lg max-w-2xl mx-auto">{subtitle}</p>
+          )}
         </div>
       )}
 
       <div className="space-y-4">
         {faqs.map((faq, index) => {
-          const isOpen = openItems.includes(index)
+          const isOpen = openItems.includes(index);
+          const contentId = `faq-content-${index}`;
 
           return (
-            <div key={index} className="border border-gray-200 rounded-lg bg-white">
+            <div
+              key={index}
+              className="border border-gray-200 rounded-lg bg-white shadow-sm"
+            >
               <button
                 onClick={() => toggleItem(index)}
                 className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-lg cursor-pointer"
                 aria-expanded={isOpen}
+                aria-controls={contentId}
               >
                 <span className="text-gray-900 font-medium text-sm md:text-base pr-4">
                   {faq.question}
                 </span>
-                <div className="flex-shrink-0 text-gray-500 transition-transform duration-200">
-                  {isOpen ? <FaChevronUp className="w-4 h-4" /> : <FaChevronDown className="w-4 h-4" />}
-                </div>
+                <FaChevronDown
+                  className={`w-4 h-4 text-gray-500 transform transition-transform duration-200 ${
+                    isOpen ? "rotate-180" : ""
+                  }`}
+                />
               </button>
 
               <div
+                id={contentId}
                 className={`overflow-hidden transition-all duration-300 ease-in-out ${
                   isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
                 }`}
               >
                 <div className="px-6 pb-4">
-                  <p className="text-gray-600 text-sm md:text-base leading-relaxed">{faq.answer}</p>
+                  <p className="text-gray-600 text-sm md:text-base leading-relaxed">
+                    {faq.answer}
+                  </p>
                 </div>
               </div>
             </div>
-          )
+          );
         })}
       </div>
 
-      <div className="mt-12 flex">
-        <p className="text-gray-600 mb-4">Still have questions?</p>
-        
+      <div className="mt-12 text-center">
+        <p className="text-gray-600 mb-2">Still have questions?</p>
         <Link
-						to="/contact#contact-form"
-						className="inline-flex items-center justify-center ml-3 mb-4 text-blue-500 font-semibold rounded-lg transition-colors"
-					>
-						Contact Us
-					</Link>
+          to="/contact#contact-form"
+          className="inline-flex items-center justify-center text-blue-600 font-medium hover:underline"
+        >
+          Contact Us
+        </Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 89ce0e9..c649574 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -5,18 +5,19 @@ import { FaGithub, FaTwitter, FaLinkedin, FaEnvelope } from "react-icons/fa";
 export default function Footer() {
   return (
     <footer className="bg-[#fafaf9] text-gray-900 border-t border-gray-100">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
+        {/* Top Section */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
           {/* Brand Section */}
-          <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center space-x-2 mb-3">
+          <div className="col-span-1 md:col-span-2 text-center md:text-left">
+            <div className="flex justify-center md:justify-start items-center space-x-2 mb-3">
               <span className="text-2xl font-bold text-gray-900">PrepEdge AI</span>
             </div>
-            <p className="text-lg text-gray-600 mb-4 max-w-md">
+            <p className="text-base sm:text-lg text-gray-600 mb-5 max-w-md mx-auto md:mx-0">
               Master your interview skills with AI-powered practice sessions, real-time feedback, 
               and personalized insights to help you land your dream job.
             </p>
-            <div className="flex space-x-4">
+            <div className="flex justify-center md:justify-start space-x-5">
               <a
                 href="https://github.com/coderuzumaki/prepedge-ai"
                 target="_blank"
@@ -24,7 +25,7 @@ export default function Footer() {
                 className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
                 aria-label="GitHub"
               >
-                <FaGithub className="h-7 w-7" />
+                <FaGithub className="h-6 w-6 sm:h-7 sm:w-7" />
               </a>
               <a
                 href="https://x.com/coderUzumaki"
@@ -33,7 +34,7 @@ export default function Footer() {
                 className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
                 aria-label="Twitter"
               >
-                <SiX className="h-6 w-6 mt-0.5" />
+                <SiX className="h-5 w-5 sm:h-6 sm:w-6 mt-0.5" />
               </a>
               <a
                 href="https://www.linkedin.com/in/abhinavvv08"
@@ -42,88 +43,50 @@ export default function Footer() {
                 className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
                 aria-label="LinkedIn"
               >
-                <FaLinkedin className="h-7 w-7" />
+                <FaLinkedin className="h-6 w-6 sm:h-7 sm:w-7" />
               </a>
               <a
                 href="mailto:astar1013vt@gmail.com"
                 className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
                 aria-label="Email"
               >
-                <FaEnvelope className="h-7 w-7" />
+                <FaEnvelope className="h-6 w-6 sm:h-7 sm:w-7" />
               </a>
             </div>
           </div>
 		  
-		  {/* Quick Links */}
-          <div>
-            <h3 className="text-xl font-semibold mb-4"><u>Quick Links</u></h3>
+          {/* Quick Links */}
+          <div className="text-center md:text-left">
+            <h3 className="text-lg sm:text-xl font-semibold mb-4"><u>Quick Links</u></h3>
             <ul className="space-y-2">
-              <li>
-                <Link to="/" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Home
-                </Link>
-              </li>
-              <li>
-                <Link to="/about" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  About
-                </Link>
-              </li>
-              <li>
-                <Link to="/interview/setup" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Practice
-                </Link>
-              </li>
-              <li>
-                <Link to="/resources" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Resources
-                </Link>
-              </li>
+              <li><Link to="/" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Home</Link></li>
+              <li><Link to="/about" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">About</Link></li>
+              <li><Link to="/interview/setup" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Practice</Link></li>
+              <li><Link to="/resources" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Resources</Link></li>
             </ul>
           </div>
 
           {/* Support */}
-          <div>
-            <h3 className="text-xl font-semibold mb-4"><u>Support</u></h3>
+          <div className="text-center md:text-left">
+            <h3 className="text-lg sm:text-xl font-semibold mb-4"><u>Support</u></h3>
             <ul className="space-y-2">
-              <li>
-                <Link to="/contact" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Contact Us
-                </Link>
-              </li>
-              <li>
-                <Link to="#" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Help Center
-                </Link>
-              </li>
-              <li>
-                <Link to="#" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Privacy Policy
-                </Link>
-              </li>
-              <li>
-                <Link to="#" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Terms of Service
-                </Link>
-              </li>
+              <li><Link to="/contact" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Contact Us</Link></li>
+              <li><Link to="#" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Help Center</Link></li>
+              <li><Link to="#" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Privacy Policy</Link></li>
+              <li><Link to="#" className="text-gray-600 hover:text-cyan-500 transition-all duration-200 inline-block">Terms of Service</Link></li>
             </ul>
           </div>
         </div>
 
         {/* Bottom Section */}
-        <div className="border-t border-gray-100 mt-5 pt-5 flex flex-col md:flex-row justify-between items-center">
-          <p className="text-gray-500 text-[14px] sm:text-[16px] md:text-[18px] lg:text-[16px]">
+        <div className="border-t border-gray-100 mt-8 pt-5 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+          <p className="text-gray-500 text-sm sm:text-base text-center md:text-left">
             © {new Date().getFullYear()} PrepEdge AI. All rights reserved.
           </p>
-          <div className="flex space-x-4 mt-4 md:mt-0">
-            <Link to="#" className="text-gray-500 hover:text-cyan-500 text-[14px] sm:text-[16px] md:text-[18px] lg:text-[16px] transition-colors duration-200">
-              Privacy
-            </Link>
-            <Link to="#" className="text-gray-500 hover:text-cyan-500 text-[14px] sm:text-[16px] md:text-[18px] lg:text-[16px] transition-colors duration-200">
-              Terms
-            </Link>
-            <Link to="#" className="text-gray-500 hover:text-cyan-500 text-[14px] sm:text-[16px] md:text-[18px] lg:text-[16px] transition-colors duration-200">
-              Cookies
-            </Link>
+          <div className="flex space-x-5">
+            <Link to="#" className="text-gray-500 hover:text-cyan-500 text-sm sm:text-base transition-colors duration-200">Privacy</Link>
+            <Link to="#" className="text-gray-500 hover:text-cyan-500 text-sm sm:text-base transition-colors duration-200">Terms</Link>
+            <Link to="#" className="text-gray-500 hover:text-cyan-500 text-sm sm:text-base transition-colors duration-200">Cookies</Link>
           </div>
         </div>
       </div>
diff --git a/client/src/components/InterviewList.jsx b/client/src/components/InterviewList.jsx
index 253680b..71a5051 100644
--- a/client/src/components/InterviewList.jsx
+++ b/client/src/components/InterviewList.jsx
@@ -3,105 +3,97 @@ import { useState } from "react";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 
 function InterviewCard({ title, date, interviewId, className = "" }) {
-	const navigate = useNavigate();
-	return (
-		<div
-			className={`bg-white rounded-lg border border-gray-200 p-6 ${className}`}
-		>
-			<div className="flex justify-between items-start">
-				<div className="flex-1">
-					<h4 className="font-semibold text-gray-900 mb-2">
-						{title}
-					</h4>
-					<p className="text-sm text-gray-600">{date}</p>
-				</div>
-				<button
-					onClick={() => navigate(`/interview/report/${interviewId}`)}
-					className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
-				>
-					View Report
-				</button>
-			</div>
-		</div>
-	);
+  const navigate = useNavigate();
+  return (
+    <div
+      className={`bg-white rounded-lg border border-gray-200 p-6 ${className}`}
+    >
+      <div className="flex justify-between items-start">
+        <div className="flex-1">
+          <h4 className="font-semibold text-gray-900 mb-2">{title}</h4>
+          <p className="text-sm text-gray-600">{date}</p>
+        </div>
+        <button
+          onClick={() => navigate(`/interview/report/${interviewId}`)}
+          className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
+        >
+          View Report
+        </button>
+      </div>
+    </div>
+  );
 }
 
-export default function InterviewList({ interviews, itemsPerPage = 3 }) {
-	const [currentPage, setCurrentPage] = useState(1);
-	const totalPages = Math.ceil(interviews.length / itemsPerPage);
+export default function InterviewList({ interviews = [], itemsPerPage = 3 }) {
+  // ✅ Always force interviews to be an array
+  const safeInterviews = Array.isArray(interviews) ? interviews : [];
 
-	const startIndex = (currentPage - 1) * itemsPerPage;
-	const endIndex = startIndex + itemsPerPage;
-	const currentInterviews = interviews.slice(startIndex, endIndex);
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(safeInterviews.length / itemsPerPage);
 
-	const goToPage = (page) => {
-		setCurrentPage(page);
-	};
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentInterviews = safeInterviews.slice(startIndex, endIndex);
 
-	const goToPrevious = () => {
-		if (currentPage > 1) {
-			setCurrentPage(currentPage - 1);
-		}
-	};
+  const goToPage = (page) => setCurrentPage(page);
+  const goToPrevious = () => currentPage > 1 && setCurrentPage(currentPage - 1);
+  const goToNext = () =>
+    currentPage < totalPages && setCurrentPage(currentPage + 1);
 
-	const goToNext = () => {
-		if (currentPage < totalPages) {
-			setCurrentPage(currentPage + 1);
-		}
-	};
+  return (
+    <div>
+      <h3 className="text-lg font-semibold text-gray-900 mb-6">
+        Past Interviews
+      </h3>
 
-	return (
-		<div>
-			<h3 className="text-lg font-semibold text-gray-900 mb-6">
-				Past Interviews
-			</h3>
+      <div className="space-y-4 mb-6">
+        {currentInterviews.length > 0 ? (
+          currentInterviews.map((interview) => (
+            <InterviewCard
+              key={interview._id}
+              title={interview.interview_name}
+              date={interview.created_at}
+              interviewId={interview._id}
+            />
+          ))
+        ) : (
+          <p className="text-gray-500 text-sm">No interviews found.</p>
+        )}
+      </div>
 
-			<div className="space-y-4 mb-6">
-				{currentInterviews.map((interview) => (
-					<InterviewCard
-						key={interview._id}
-						title={interview.interview_name}
-						date={interview.created_at}
-            interviewId={interview._id}
-					/>
-				))}
-			</div>
+      {totalPages > 1 && (
+        <div className="flex justify-center items-center space-x-2">
+          <button
+            onClick={goToPrevious}
+            disabled={currentPage === 1}
+            className="p-2 rounded-md text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <FaChevronLeft className="w-4 h-4" />
+          </button>
 
-			{totalPages > 1 && (
-				<div className="flex justify-center items-center space-x-2">
-					<button
-						onClick={goToPrevious}
-						disabled={currentPage === 1}
-						className="p-2 rounded-md text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-					>
-						<FaChevronLeft className="w-4 h-4" />
-					</button>
+          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+            <button
+              key={page}
+              onClick={() => goToPage(page)}
+              className={`w-8 h-8 rounded-md text-sm font-medium transition-colors ${
+                currentPage === page
+                  ? "bg-blue-600 text-white"
+                  : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              }`}
+            >
+              {page}
+            </button>
+          ))}
 
-					{Array.from({ length: totalPages }, (_, i) => i + 1).map(
-						(page) => (
-							<button
-								key={page}
-								onClick={() => goToPage(page)}
-								className={`w-8 h-8 rounded-md text-sm font-medium transition-colors ${
-									currentPage === page
-										? "bg-blue-600 text-white"
-										: "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
-								}`}
-							>
-								{page}
-							</button>
-						)
-					)}
-
-					<button
-						onClick={goToNext}
-						disabled={currentPage === totalPages}
-						className="p-2 rounded-md text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-					>
-						<FaChevronRight className="w-4 h-4" />
-					</button>
-				</div>
-			)}
-		</div>
-	);
+          <button
+            onClick={goToNext}
+            disabled={currentPage === totalPages}
+            className="p-2 rounded-md text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <FaChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/client/src/pages/CreateInterview.jsx b/client/src/pages/CreateInterview.jsx
index b7b8a9a..a5953ff 100644
--- a/client/src/pages/CreateInterview.jsx
+++ b/client/src/pages/CreateInterview.jsx
@@ -4,595 +4,324 @@ import axios from "axios";
 import LoadingScreen from "../components/LoadingScreen";
 import { useAuth } from "../context/AuthContext";
 import {
-	FaArrowRight,
-	FaArrowLeft,
-	FaUpload,
-	FaFileAlt,
-	FaTimes,
+  FaArrowRight,
+  FaArrowLeft,
+  FaUpload,
+  FaFileAlt,
+  FaTimes,
 } from "react-icons/fa";
 import Toast from "../components/Toast";
 
 export default function SetupForm() {
-	const { user, loading, setLoading } = useAuth();
-	const [currentStep, setCurrentStep] = useState(1);
-	const [isTransitioning, setIsTransitioning] = useState(false);
-	const [drag, setDrag] = useState(false);
-	const [toast, setToast] = useState({
-		show: false,
-		message: "",
-		type: "success",
-	});
-	const fileInputRef = useRef(null);
-
-	useEffect(() => {
-		 console.log("--------\nCurrent user from context:", user, "\n--------");
-	}, [user]);
-	const navigate = useNavigate();
-
-	const [formData, setFormData] = useState({
-		interviewName: "",
-		numOfQuestions: 3,
-		interviewType: "Technical",
-		role: "",
-		experienceLevel: "Fresher",
-		companyName: "",
-		companyDescription: "",
-		jobDescription: "",
-		resume: null,
-		focusAt: "",
-	});
-
-	const totalSteps = 3;
-	const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100;
-
-	const handleNext = () => {
-		if (currentStep < totalSteps) {
-			setIsTransitioning(true);
-			setTimeout(() => {
-				setCurrentStep(currentStep + 1);
-				setIsTransitioning(false);
-			}, 150);
-		}
-	};
-
-	const handleBack = () => {
-		if (currentStep > 1) {
-			setIsTransitioning(true);
-			setTimeout(() => {
-				setCurrentStep(currentStep - 1);
-				setIsTransitioning(false);
-			}, 150);
-		}
-	};
-
-	const handleInputChange = (field, value) => {
-		setFormData((prev) => ({ ...prev, [field]: value }));
-	};
-
-	const handleDrag = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		if (e.type === "dragenter" || e.type === "dragover") {
-			setDrag(true);
-		} else if (e.type === "dragleave") {
-			setDrag(false);
-		}
-	};
-
-	const handleDrop = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		setDrag(false);
-
-		if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-			const file = e.dataTransfer.files[0];
-			if (file.type === "application/pdf") {
-				handleInputChange("resume", file);
-			}
-		}
-	};
-
-	const handleFileSelect = (e) => {
-		if (e.target.files && e.target.files[0]) {
-			const file = e.target.files[0];
-			if (file.type === "application/pdf") {
-				handleInputChange("resume", file);
-			}
-		}
-	};
-
-	const removeFile = () => {
-		handleInputChange("resume", null);
-		1;
-		if (fileInputRef.current) {
-			fileInputRef.current.value = "";
-		}
-	};
-
-	const showToast = (message, type) => {
-		setToast({ show: true, message, type });
-	};
-
-	const hideToast = () => {
-		setToast((prev) => ({ ...prev, show: false }));
-	};
-
-	const handleSubmit = async (e) => {
-		e.preventDefault();
-		if (!user) {
-			console.error("❌ User is null in CreateInterview.jsx");
-			return;
-		}
-		setLoading(true);
-		const token = await user.getIdToken();
-		 console.log("-------\nToken being sent to backend:", token, "\n-------");
-
-		const data = new FormData();
-		Object.keys(formData).forEach((key) => {
-			if (formData[key]) {
-				data.append(key, formData[key]);
-			}
-			 console.log("-------\nForm Data: \n", [...data.entries()], "\n-------");
-		});
-		
-		try {
-			const res = await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/interview/setup`,
-				data,
-				{
-					headers: {
-						Authorization: `Bearer ${token}`,
-					},
-				}
-			);
-			console.log("-------\nResponse from interview setup:", res.data, "\n-------");
-
-			showToast("Interview setup complete!", "success");
-			const interviewId = res.data.interview._id;
-			navigate(`/interview/${interviewId}`);
-		} catch (err) {
-			console.error(
-				"------\nError in interview setup:",
-				err.response?.data || err,
-				"\n------"
-			);
-			showToast("Something went wrong", "error");
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	if (loading) {
-		return (
-			<LoadingScreen
-				message="Setting up your interview..."
-			/>
-		);
-	}
-
-	return (
-		<>
-			{toast.show && (
-				<Toast
-					message={toast.message}
-					type={toast.type}
-					onClose={hideToast}
-				/>
-			)}
-			<div className="min-h-screen bg-gray-50 py-8 px-4">
-				<div className="max-w-2xl mx-auto">
-					<div className="flex items-center justify-between mb-8 text-sm text-gray-500">
-						Step {currentStep} of {totalSteps}
-					</div>
-
-					{/* Progress Bar */}
-					<div className="mb-8">
-						<div className="flex justify-between items-center mb-2">
-							<span className="text-sm font-medium text-gray-700">
-								Interview Setup
-							</span>
-							<span className="text-sm text-gray-500">
-								{Math.round(progressPercentage)}% Complete
-							</span>
-						</div>
-						<div className="w-full bg-gray-200 rounded-full h-2">
-							<div
-								className="bg-blue-500 h-2 rounded-full transition-all duration-500 ease-out"
-								style={{ width: `${progressPercentage}%` }}
-							></div>
-						</div>
-					</div>
-
-					{/* Form Container */}
-					<div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-						<div
-							className={`transition-all duration-300 ${
-								isTransitioning
-									? "opacity-0 transform translate-x-4"
-									: "opacity-100 transform translate-x-0"
-							}`}
-						>
-							{/* Step 1: Interview Basics */}
-							{currentStep === 1 && (
-								<div className="p-8">
-									<div className="text-center mb-8">
-										<h2 className="text-3xl font-bold text-gray-900 mb-2">
-											Interview Setup
-										</h2>
-									</div>
-
-									<div className="space-y-6">
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Interview Name
-											</label>
-											<input
-												type="text"
-												value={formData.interviewName}
-												onChange={(e) =>
-													handleInputChange(
-														"interviewName",
-														e.target.value
-													)
-												}
-												placeholder="e.g. Frontend Role at Google"
-												className={`w-full px-4 py-3 border ${formData.interviewName!==""? "border-gray-300" : "border-red-500"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`}
-											/>
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Number of Questions
-											</label>
-											<select
-												value={formData.numOfQuestions}
-												onChange={(e) =>
-													handleInputChange(
-														"numOfQuestions",
-														Number.parseInt(
-															e.target.value
-														)
-													)
-												}
-												className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-											>
-												{[3, 4, 5, 6, 7, 8, 9, 10].map(
-													(num) => (
-														<option
-															key={num}
-															value={num}
-														>
-															{num} Questions
-														</option>
-													)
-												)}
-											</select>
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-4">
-												Interview Type
-											</label>
-											<div className="grid grid-cols-3 gap-4">
-												{[
-													"Technical",
-													"Behavioral",
-													"Mixed",
-												].map((type) => (
-													<button
-														key={type}
-														type="button"
-														onClick={() =>
-															handleInputChange(
-																"interviewType",
-																type
-															)
-														}
-														className={`px-4 py-3 rounded-lg border-2 transition-all font-medium cursor-pointer${
-															formData.interviewType ===
-															type
-																? "border-blue-500 bg-blue-50 text-blue-700"
-																: "border-gray-200 bg-white text-gray-700 hover:border-gray-300"
-														}`}
-													>
-														{type}
-													</button>
-												))}
-											</div>
-										</div>
-									</div>
-
-									<div className="flex justify-end mt-8">
-										<button
-											onClick={handleNext}
-											disabled={formData.interviewName === ""}
-											className={`px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors flex items-center space-x-2 ${formData.interviewName==="" ? "cursor-not-allowed opacity-50" :""}`}
-										>
-											<span>Next</span>
-											<FaArrowRight className="w-4 h-4" />
-										</button>
-									</div>
-								</div>
-							)}
-
-							{/* Step 2: Job Details */}
-							{currentStep === 2 && (
-								<div className="p-8">
-									<div className="text-center mb-8">
-										<h2 className="text-3xl font-bold text-gray-900 mb-2">
-											Job Details
-										</h2>
-										<p className="text-gray-600">
-											Help us understand the context of
-											the role
-										</p>
-									</div>
-
-									<div className="space-y-6">
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Role
-											</label>
-											<input
-												type="text"
-												value={formData.role}
-												onChange={(e) =>
-													handleInputChange(
-														"role",
-														e.target.value
-													)
-												}
-												placeholder="e.g. Software Engineer"
-												className={`w-full px-4 py-3 border ${formData.role!==""? "border-gray-300" : "border-red-500"}  rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`}
-											/>
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Experience Level
-											</label>
-											<div className="grid grid-cols-3 gap-4">
-												{[
-													"Fresher",
-													"Junior",
-													"Mid",
-													"Senior",
-												].map((type) => (
-													<button
-														key={type}
-														type="button"
-														onClick={() =>
-															handleInputChange(
-																"experienceLevel",
-																type
-															)
-														}
-														className={`px-4 py-3 rounded-lg border-2 transition-all font-medium cursor-pointer${
-															formData.experienceLevel ===
-															type
-																? "border-blue-500 bg-blue-50 text-blue-700"
-																: "border-gray-200 bg-white text-gray-700 hover:border-gray-300"
-														}`}
-													>
-														{type}
-													</button>
-												))}
-											</div>
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Company Name
-											</label>
-											<input
-												type="text"
-												value={formData.companyName}
-												onChange={(e) =>
-													handleInputChange(
-														"companyName",
-														e.target.value
-													)
-												}
-												placeholder="e.g. Tech Innovations Inc"
-												className={`w-full px-4 py-3 border ${formData.companyName!==""? "border-gray-300" : "border-red-500"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`}
-											/>
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Company Description
-											</label>
-											<textarea
-												value={
-													formData.companyDescription
-												}
-												onChange={(e) =>
-													handleInputChange(
-														"companyDescription",
-														e.target.value
-													)
-												}
-												placeholder="Describe the company's mission, values, and culture"
-												rows={4}
-												className={`w-full px-4 py-3 border ${formData.companyDescription!==""? "border-gray-300" : "border-red-500"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none`}
-											/>
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Job Description
-											</label>
-											<textarea
-												value={formData.jobDescription}
-												onChange={(e) =>
-													handleInputChange(
-														"jobDescription",
-														e.target.value
-													)
-												}
-												placeholder="Paste or describe the role, responsibilities, and requirements"
-												rows={6}
-												className={`w-full px-4 py-3 border ${formData.jobDescription!==""? "border-gray-300" : "border-red-500"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none`}
-											/>
-										</div>
-									</div>
-
-									<div className="flex justify-between mt-8">
-										<button
-											onClick={handleBack}
-											className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors flex items-center space-x-2"
-										>
-											<FaArrowLeft className="w-4 h-4" />
-											<span>Back</span>
-										</button>
-										<button
-											onClick={handleNext}
-											disabled={(formData.jobDescription==="") || (formData.companyDescription==="") || (formData.companyName==="") || (formData.role==="")}
-											className={`px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors flex items-center space-x-2 ${((formData.jobDescription==="") || (formData.companyDescription==="") || (formData.companyName==="") || (formData.role===""))? "cursor-not-allowed opacity-50" :""}`}
-										>
-											<span>Next</span>
-											<FaArrowRight className="w-4 h-4" />
-										</button>
-									</div>
-								</div>
-							)}
-
-							{/* Step 3: Resume & Focus */}
-							{currentStep === 3 && (
-								<div className="p-8">
-									<div className="text-center mb-8">
-										<h2 className="text-3xl font-bold text-gray-900 mb-2">
-											Almost there!
-										</h2>
-										<p className="text-gray-600">
-											Just a few finishing touches
-										</p>
-									</div>
-
-									<div className="space-y-8">
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-4">
-												Resume
-											</label>
-
-											{!formData.resume ? (
-												<div
-													className={`relative border-2 border-dashed border-red-500 rounded-lg p-8 text-center transition-all ${
-														drag
-															? "border-blue-500 bg-blue-50"
-															: "border-gray-300 hover:border-gray-400"
-													}`}
-													onDragEnter={handleDrag}
-													onDragLeave={handleDrag}
-													onDragOver={handleDrag}
-													onDrop={handleDrop}
-												>
-													<FaUpload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-													<div className="space-y-2">
-														<button
-															type="button"
-															onClick={() =>
-																fileInputRef.current?.click()
-															}
-															className="text-blue-600 hover:text-blue-700 font-medium"
-														>
-															Upload a file
-														</button>
-														<span className="text-gray-500">
-															{" "}
-															or drag and drop
-														</span>
-													</div>
-													<p className="text-sm text-gray-400 mt-2">
-														PDF only, up to 5MB
-													</p>
-													<input
-														ref={fileInputRef}
-														type="file"
-														accept=".pdf"
-														onChange={
-															handleFileSelect
-														}
-														className="hidden"
-													/>
-												</div>
-											) : (
-												<div className="border border-gray-300 rounded-lg p-4 flex items-center justify-between">
-													<div className="flex items-center space-x-3">
-														<FaFileAlt className="w-8 h-8 text-red-500" />
-														<div>
-															<p className="font-medium text-gray-900">
-																{
-																	formData
-																		.resume
-																		.name
-																}
-															</p>
-															<p className="text-sm text-gray-500">
-																{(
-																	formData
-																		.resume
-																		.size /
-																	1024 /
-																	1024
-																).toFixed(
-																	2
-																)}{" "}
-																MB
-															</p>
-														</div>
-													</div>
-													<button
-														onClick={removeFile}
-														className="text-gray-400 hover:text-gray-600 transition-colors"
-													>
-														<FaTimes className="w-5 h-5" />
-													</button>
-												</div>
-											)}
-										</div>
-
-										<div>
-											<label className="block text-sm font-medium text-gray-700 mb-2">
-												Focus Areas
-											</label>
-											<textarea
-												value={formData.focusAt}
-												onChange={(e) =>
-													handleInputChange(
-														"focusAt",
-														e.target.value
-													)
-												}
-												placeholder="e.g. Data Structures, System Design, Leadership"
-												rows={4}
-												className={`w-full px-4 py-3 border ${formData.focusAt!==""? "border-gray-300" : "border-red-500"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none`}
-											/>
-										</div>
-									</div>
-
-									<div className="flex justify-between mt-8">
-										<button
-											onClick={handleBack}
-											className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors flex items-center space-x-2"
-										>
-											<FaArrowLeft className="w-4 h-4" />
-											<span>Back</span>
-										</button>
-										<button
-											onClick={handleSubmit}
-											disabled={(formData.focusAt==="") || (!formData.resume)}
-											className={`px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors ${((formData.focusAt==="") || (!formData.resume)) ? "cursor-not-allowed opacity-50" :""}`}
-										>
-											Start Interview
-										</button>
-									</div>
-								</div>
-							)}
-						</div>
-					</div>
-				</div>
-			</div>
-		</>
-	);
+  const { user, loading, setLoading } = useAuth();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [drag, setDrag] = useState(false);
+  const [toast, setToast] = useState({
+    show: false,
+    message: "",
+    type: "success",
+  });
+  const fileInputRef = useRef(null);
+
+  const MAX_FILE_SIZE_MB = 5;
+
+  const navigate = useNavigate();
+
+  const [formData, setFormData] = useState({
+    interviewName: "",
+    numOfQuestions: 3,
+    interviewType: "Technical",
+    role: "",
+    experienceLevel: "Fresher",
+    companyName: "",
+    companyDescription: "",
+    jobDescription: "",
+    resume: null,
+    focusAt: "",
+  });
+
+  const totalSteps = 3;
+  const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100;
+
+  const handleNext = () => {
+    if (currentStep < totalSteps) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentStep(currentStep + 1);
+        setIsTransitioning(false);
+      }, 150);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentStep(currentStep - 1);
+        setIsTransitioning(false);
+      }, 150);
+    }
+  };
+
+  const handleInputChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDrag(true);
+    } else if (e.type === "dragleave") {
+      setDrag(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDrag(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const file = e.dataTransfer.files[0];
+      const fileSizeMB = file.size / 1024 / 1024;
+
+      if (file.type !== "application/pdf") {
+        showToast("Only PDF files are allowed.", "error");
+        return;
+      }
+
+      if (fileSizeMB > MAX_FILE_SIZE_MB) {
+        showToast("File size exceeds 5MB.", "error");
+        return;
+      }
+
+      handleInputChange("resume", file);
+    } else {
+      showToast("No file detected.", "error");
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      const fileSizeMB = file.size / 1024 / 1024;
+
+      if (file.type !== "application/pdf") {
+        showToast("Only PDF files are allowed", "error");
+        return;
+      }
+
+      if (fileSizeMB > MAX_FILE_SIZE_MB) {
+        showToast("File size exceeds 5MB.", "error");
+        return;
+      }
+
+      handleInputChange("resume", file);
+    } else {
+      showToast("No file selected", "error");
+    }
+  };
+
+  const removeFile = () => {
+    handleInputChange("resume", null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const showToast = (message, type) => {
+    setToast({ show: true, message, type });
+  };
+
+  const hideToast = () => {
+    setToast((prev) => ({ ...prev, show: false }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!user) {
+      showToast("User not logged in", "error");
+      return;
+    }
+
+    
+    if (!formData.interviewName || !formData.role || !formData.resume) {
+      showToast("Please fill all required fields and upload your resume.", "error");
+      return;
+    }
+
+    setLoading(true);
+    const token = await user.getIdToken();
+
+    const data = new FormData();
+    Object.keys(formData).forEach((key) => {
+      if (formData[key]) data.append(key, formData[key]);
+    });
+
+    try {
+      const res = await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/interview/setup`,
+        data,
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+
+      showToast("Interview setup complete!", "success");
+      const interviewId = res.data.interview._id;
+      navigate(`/interview/${interviewId}`);
+    } catch (err) {
+      console.error("Error in interview setup:", err.response?.data || err);
+      showToast("Something went wrong", "error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <LoadingScreen message="Setting up your interview..." />;
+
+  return (
+    <>
+      {toast.show && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
+      <div className="min-h-screen bg-gray-50 py-8 px-4">
+        <div className="max-w-2xl mx-auto">
+          <div className="flex items-center justify-between mb-8 text-sm text-gray-500">
+            Step {currentStep} of {totalSteps}
+          </div>
+
+          
+          <div className="mb-8">
+            <div className="flex justify-between items-center mb-2">
+              <span className="text-sm font-medium text-gray-700">Interview Setup</span>
+              <span className="text-sm text-gray-500">{Math.round(progressPercentage)}% Complete</span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-2">
+              <div
+                className="bg-blue-500 h-2 rounded-full transition-all duration-500 ease-out"
+                style={{ width: `${progressPercentage}%` }}
+              ></div>
+            </div>
+          </div>
+
+          
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {currentStep === 1 && (
+              <div className="space-y-4">
+                <input
+                  type="text"
+                  placeholder="Interview Name"
+                  value={formData.interviewName}
+                  onChange={(e) => handleInputChange("interviewName", e.target.value)}
+                  className="w-full border rounded px-3 py-2"
+                  required
+                />
+                <input
+                  type="text"
+                  placeholder="Role"
+                  value={formData.role}
+                  onChange={(e) => handleInputChange("role", e.target.value)}
+                  className="w-full border rounded px-3 py-2"
+                  required
+                />
+                <select
+                  value={formData.experienceLevel}
+                  onChange={(e) => handleInputChange("experienceLevel", e.target.value)}
+                  className="w-full border rounded px-3 py-2"
+                >
+                  <option value="Fresher">Fresher</option>
+                  <option value="Intermediate">Intermediate</option>
+                  <option value="Experienced">Experienced</option>
+                </select>
+              </div>
+            )}
+
+            {currentStep === 2 && (
+              <div className="space-y-4">
+                <input
+                  type="text"
+                  placeholder="Company Name"
+                  value={formData.companyName}
+                  onChange={(e) => handleInputChange("companyName", e.target.value)}
+                  className="w-full border rounded px-3 py-2"
+                />
+                <textarea
+                  placeholder="Company Description"
+                  value={formData.companyDescription}
+                  onChange={(e) => handleInputChange("companyDescription", e.target.value)}
+                  className="w-full border rounded px-3 py-2"
+                />
+                <textarea
+                  placeholder="Job Description"
+                  value={formData.jobDescription}
+                  onChange={(e) => handleInputChange("jobDescription", e.target.value)}
+                  className="w-full border rounded px-3 py-2"
+                />
+              </div>
+            )}
+
+            {currentStep === 3 && (
+              <div className="space-y-4">
+                <div
+                  className={`border-dashed border-2 p-4 text-center rounded ${
+                    drag ? "border-blue-500 bg-blue-50" : "border-gray-300"
+                  }`}
+                  onDragEnter={handleDrag}
+                  onDragOver={handleDrag}
+                  onDragLeave={handleDrag}
+                  onDrop={handleDrop}
+                >
+                  <input
+                    type="file"
+                    accept="application/pdf"
+                    ref={fileInputRef}
+                    onChange={handleFileSelect}
+                    className="hidden"
+                  />
+                  {formData.resume ? (
+                    <div className="flex justify-between items-center">
+                      <span><FaFileAlt className="inline mr-2" /> {formData.resume.name}</span>
+                      <button type="button" onClick={removeFile}><FaTimes /></button>
+                    </div>
+                  ) : (
+                    <p onClick={() => fileInputRef.current.click()}>
+                      <FaUpload className="inline mr-2" /> Drag & drop your resume here or click to upload
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            
+            <div className="flex justify-between">
+              {currentStep > 1 && (
+                <button
+                  type="button"
+                  onClick={handleBack}
+                  className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+                >
+                  <FaArrowLeft className="inline mr-2" /> Back
+                </button>
+              )}
+              {currentStep < totalSteps && (
+                <button
+                  type="button"
+                  onClick={handleNext}
+                  className="ml-auto px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                >
+                  Next <FaArrowRight className="inline ml-2" />
+                </button>
+              )}
+              {currentStep === totalSteps && (
+                <button
+                  type="submit"
+                  className="ml-auto px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                >
+                  Submit
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
index 4cd0126..57e65b4 100644
--- a/client/src/pages/Dashboard.jsx
+++ b/client/src/pages/Dashboard.jsx
@@ -6,104 +6,102 @@ import InterviewList from "../components/InterviewList";
 import { useAuth } from "../context/AuthContext";
 
 export default function Dashboard() {
-	const [interviews, setInterviews] = useState([]);
-	const [summaryData, setSummaryData] = useState([]);
-	const [chartData, setChartData] = useState([]);
-	const { user } = useAuth();
-
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				const token = await user.getIdToken();
-				const response = await axios.get(
-					`${import.meta.env.VITE_API_URL}/api/interview`,
-					{
-						headers: {
-							Authorization: `Bearer ${token}`,
-						},
-					}
-				);
-				setInterviews(response.data);
-
-				const reportResponse = await axios.get(
-					`${import.meta.env.VITE_API_URL}/api/report`,
-					{
-						headers: {
-							Authorization: `Bearer ${token}`,
-						},
-					}
-				);
-
-				const chartData = reportResponse.data.map((report) => ({
-					date: new Date(report.createdAt).toLocaleDateString(),
-					score: Number(report.finalScore) || 0,
-					interviewName: report.interviewId?.interview_name || "N/A",
-				}));
-				setChartData(chartData);
-
-				const bestScore = Math.max(
-					...reportResponse.data.map((i) => i.finalScore || 0)
-				);
-
-				const totalInterviews = response.data.length;
-				const roleCounts = response.data
-					.map((i) => i.role)
-					.reduce((acc, role) => {
-						acc[role] = (acc[role] || 0) + 1;
-						return acc;
-					}, {});
-				const mostCommonRole =
-					Object.entries(roleCounts).sort(
-						(a, b) => b[1] - a[1]
-					)[0]?.[0] || "N/A";
-
-				setSummaryData([
-					{ title: "Total Interviews", value: totalInterviews },
-					{ title: "Best Score", value: bestScore.toFixed(2) },
-					{ title: "Most Common Role", value: mostCommonRole },
-				]);
-			} catch (error) {
-				console.error("Failed to fetch interviews:", error);
-			}
-		};
-
-		fetchData();
-	}, [user]);
-
-	return (
-		<div className="min-h-screen bg-gray-50">
-
-			<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold text-gray-900">
-						Interview Performance Dashboard
-					</h1>
-				</div>
-
-				<ScoreTrendChart
-					chartData={chartData}
-				/>
-
-				<div className="mb-8">
-					<h2 className="text-lg font-semibold text-gray-900 mb-6">
-						Summary
-					</h2>
-					<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-						{summaryData.map((item, index) => (
-							<SummaryCard
-								key={index}
-								title={item.title}
-								value={item.value}
-							/>
-						))}
-					</div>
-				</div>
-
-				<div className="bg-white rounded-lg border border-gray-200 p-6">
-					<InterviewList interviews={interviews} itemsPerPage={3} />
-				</div>
-			</main>
-
-		</div>
-	);
+  const [interviews, setInterviews] = useState([]);
+  const [summaryData, setSummaryData] = useState([]);
+  const [chartData, setChartData] = useState([]);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const token = await user.getIdToken();
+
+        // ---- Fetch Interviews ----
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/api/interview`,
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          }
+        );
+
+        // ✅ Ensure array
+        const interviewsData = Array.isArray(response.data)
+          ? response.data
+          : response.data.interviews || [];
+        setInterviews(interviewsData);
+
+        // ---- Fetch Reports ----
+        const reportResponse = await axios.get(
+          `${import.meta.env.VITE_API_URL}/api/report`,
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          }
+        );
+
+        const reports = Array.isArray(reportResponse.data)
+          ? reportResponse.data
+          : reportResponse.data.reports || [];
+
+        // ✅ Chart Data
+        const chartDataFormatted = reports.map((report) => ({
+          date: new Date(report.createdAt).toLocaleDateString(),
+          score: Number(report.finalScore) || 0,
+          interviewName: report.interviewId?.interview_name || "N/A",
+        }));
+        setChartData(chartDataFormatted);
+
+        // ✅ Summary Data
+        const bestScore = Math.max(...reports.map((i) => i.finalScore || 0), 0);
+        const totalInterviews = interviewsData.length;
+
+        const roleCounts = interviewsData
+          .map((i) => i.role)
+          .reduce((acc, role) => {
+            acc[role] = (acc[role] || 0) + 1;
+            return acc;
+          }, {});
+
+        const mostCommonRole =
+          Object.entries(roleCounts).sort((a, b) => b[1] - a[1])[0]?.[0] ||
+          "N/A";
+
+        setSummaryData([
+          { title: "Total Interviews", value: totalInterviews },
+          { title: "Best Score", value: bestScore.toFixed(2) },
+          { title: "Most Common Role", value: mostCommonRole },
+        ]);
+      } catch (error) {
+        console.error("Failed to fetch interviews:", error);
+      }
+    };
+
+    fetchData();
+  }, [user]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">
+            Interview Performance Dashboard
+          </h1>
+        </div>
+
+        <ScoreTrendChart chartData={chartData} />
+
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-gray-900 mb-6">Summary</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {summaryData.map((item, index) => (
+              <SummaryCard key={index} title={item.title} value={item.value} />
+            ))}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg border border-gray-200 p-6">
+          <InterviewList interviews={interviews} itemsPerPage={3} />
+        </div>
+      </main>
+    </div>
+  );
 }
diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
index ffa06b6..fea439c 100644
--- a/client/src/pages/Login.jsx
+++ b/client/src/pages/Login.jsx
@@ -1,351 +1,261 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { FaGithub, FaGoogle, FaEyeSlash, FaEye } from "react-icons/fa";
-import Toast from "../components/Toast";
-import {useAuth} from "../context/AuthContext"
+import { FaGithub, FaGoogle, FaEye, FaEyeSlash } from "react-icons/fa";
+import { useAuth } from "../context/AuthContext";
 import {
-	auth,
-	googleProvider,
-	signInWithPopup,
-	signInWithEmailAndPassword,
+  auth,
+  googleProvider,
+  signInWithPopup,
+  signInWithEmailAndPassword,
 } from "../firebase";
 import { GithubAuthProvider } from "firebase/auth";
 import axios from "axios";
+import toast from "react-hot-toast"; // ✅ import toast
 
 export default function Login() {
-	const githubProvider = new GithubAuthProvider();
-	const {	user, setUser } = useAuth();
+  const githubProvider = new GithubAuthProvider();
+  const { setUser } = useAuth();
 
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [showPassword, setShowPassword] = useState(false);
-	const [validation, setValidation] = useState({
-		name: "untouched",
-		email: "untouched",
-		password: "untouched",
-	});
-	const [toast, setToast] = useState({
-		show: false,
-		message: "",
-		type: "success",
-	});
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
 
-	const navigate = useNavigate();
+  const navigate = useNavigate();
 
-	const validateEmail = (value) => {
-		if (value.trim() === "") return "empty";
-		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-		return emailRegex.test(value) ? "valid" : "invalid";
-	};
+  // ✅ Email + Password login
+  const handleEmailLogin = async (e) => {
+    e.preventDefault();
 
-	const validatePassword = (value) => {
-		if (value === "") return "empty";
-		return "valid";
-	};
+    if (!email || !password) {
+      toast.error("⚠️ Please enter email and password", {
+        style: {
+          borderRadius: "10px",
+          background: "#ef4444", // red
+          color: "#fff",
+          fontWeight: "600",
+        },
+        iconTheme: {
+          primary: "#fff",
+          secondary: "#ef4444",
+        },
+      });
+      return;
+    }
 
-	const handleEmailChange = (value) => {
-		setEmail(value);
-		setValidation((prev) => ({
-			...prev,
-			email: validateEmail(value),
-		}));
-	};
+    try {
+      const userCredential = await signInWithEmailAndPassword(auth, email, password);
+      const idToken = await userCredential.user.getIdToken();
 
-	const handlePasswordChange = (value) => {
-		setPassword(value);
-		setValidation((prev) => ({
-			...prev,
-			password: validatePassword(value),
-		}));
-	};
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/login`,
+        {},
+        { headers: { Authorization: `Bearer ${idToken}` } }
+      );
 
-	const getRingColor = (fieldValidation) => {
-		switch (fieldValidation) {
-			case "empty":
-				return "focus:ring-orange-500 focus:border-orange-500";
-			case "invalid":
-				return "focus:ring-red-500 focus:border-red-500 ring-2 ring-red-500 border-red-500";
-			case "valid":
-				return "focus:ring-blue-500 focus:border-blue-500";
-			default:
-				return "focus:ring-blue-500 focus:border-blue-500";
-		}
-	};
+      setUser(userCredential.user);
+      toast.success("🎉 Login successful", {
+        style: {
+          borderRadius: "10px",
+          background: "#22c55e", // green
+          color: "#fff",
+          fontWeight: "600",
+        },
+        iconTheme: {
+          primary: "#fff",
+          secondary: "#22c55e",
+        },
+      });
 
-	const showToast = (message, type) => {
-		setToast({ show: true, message, type });
-	};
+      setTimeout(() => navigate("/"), 800);
+    } catch (err) {
+      toast.error(err.message || "❌ Login failed", {
+        style: {
+          borderRadius: "10px",
+          background: "#f97316", // orange
+          color: "#fff",
+          fontWeight: "600",
+        },
+        iconTheme: {
+          primary: "#fff",
+          secondary: "#f97316",
+        },
+      });
+    }
+  };
 
-	const hideToast = () => {
-		setToast((prev) => ({ ...prev, show: false }));
-	};
+  // ✅ Google login
+  const handleGoogleLogin = async () => {
+    try {
+      const result = await signInWithPopup(auth, googleProvider);
+      const idToken = await result.user.getIdToken();
 
-	const handleEmailLogin = async () => {
-		const emailValidation = validateEmail(email);
-		const passwordValidation = validatePassword(password);
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/login`,
+        {},
+        { headers: { Authorization: `Bearer ${idToken}` } }
+      );
 
-		setValidation({
-			email: emailValidation,
-			password: passwordValidation,
-		});
+      setUser(result.user);
+      toast.success("🚀 Signed in with Google", {
+        style: {
+          borderRadius: "10px",
+          background: "#3b82f6", // blue
+          color: "#fff",
+          fontWeight: "600",
+        },
+        iconTheme: {
+          primary: "#fff",
+          secondary: "#3b82f6",
+        },
+      });
 
-		if (emailValidation !== "valid" || passwordValidation !== "valid") {
-			showToast("Please fill in all fields correctly", "error");
-			return;
-		}
+      setTimeout(() => navigate("/"), 800);
+    } catch (err) {
+      toast.error(err.message || "❌ Google login failed", {
+        style: {
+          borderRadius: "10px",
+          background: "#ef4444",
+          color: "#fff",
+          fontWeight: "600",
+        },
+      });
+    }
+  };
 
-		try {
-			const userCredential = await signInWithEmailAndPassword(
-				auth,
-				email,
-				password
-			);
-			const idToken = await userCredential.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/login`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
+  // ✅ GitHub login
+  const handleGithub = async () => {
+    try {
+      const result = await signInWithPopup(auth, githubProvider);
+      const idToken = await result.user.getIdToken();
 
-			setUser(userCredential.user);
-			console.log("User logged in:", user);
-			showToast("Logged in successfully!", "success");
-			setTimeout(() => {
-				navigate("/");
-			}, 500);
-		} catch (err) {
-			showToast(err.message || "An error occurred during login", "error");
-		}
-	};
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/login`,
+        {},
+        { headers: { Authorization: `Bearer ${idToken}` } }
+      );
 
-	const handleGoogleLogin = async () => {
-		try {
-			const result = await signInWithPopup(auth, googleProvider);
-			const idToken = await result.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/login`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
+      setUser(result.user);
+      toast.success("🐙 Signed in with GitHub", {
+        style: {
+          borderRadius: "10px",
+          background: "#111827", // black/gray
+          color: "#fff",
+          fontWeight: "600",
+        },
+      });
 
-			setUser(result.user);
-			console.log("User logged in:", user);
-			showToast("Logged in successfully!", "success");
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		} catch (err) {
-			showToast(
-				err.message || "An error occurred during Google login",
-				"error"
-			);
-		}
-	};
+      setTimeout(() => navigate("/dashboard"), 800);
+    } catch (err) {
+      toast.error(err.message || "❌ GitHub login failed", {
+        style: {
+          borderRadius: "10px",
+          background: "#6b7280", // gray
+          color: "#fff",
+          fontWeight: "600",
+        },
+      });
+    }
+  };
 
-	//for github login
-	const handleGithubLogin = async () => {
-		try {
-			const result = await signInWithPopup(auth, githubProvider);
-			const credential = GithubAuthProvider.credentialFromResult(result);
-			const token = credential.accessToken;
+  return (
+    <div className="min-h-screen bg-gray-50 min-w-screen">
+      <main className="flex items-center justify-center min-h-[calc(100vh-4rem)] py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold text-gray-900">Login</h1>
+            </div>
 
-			const idToken = await result.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/login`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
+            {/* ✅ Email + password form */}
+            <form className="space-y-6" onSubmit={handleEmailLogin}>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                  Email address
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Enter your email"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
 
-			setUser(result.user); // Set the authenticated user
-			showToast("Successfully signed in with GitHub!", "success");
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  Password
+                </label>
+                <div className="relative">
+                  <input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Enter your password"
+                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
+                  >
+                    {showPassword ? <FaEyeSlash className="w-4 h-4" /> : <FaEye className="w-4 h-4" />}
+                  </button>
+                </div>
+              </div>
 
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		} catch (err) {
-			const msg =
-			err?.code === "auth/account-exists-with-different-credential" 
-				? "An account already exists with the same email using a different sign-in method. Please log in with that provider." 
-				: (err?.message || "An error occurred during GitHub login");
-			showToast(msg, "error");
-		}
-	};
+              <button
+                type="submit"
+                className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              >
+                Login
+              </button>
+            </form>
 
-	return (
-		<div className="min-h-screen bg-gray-50 min-w-screen">
-			{toast.show && (
-				<Toast
-					message={toast.message}
-					type={toast.type}
-					onClose={hideToast}
-				/>
-			)}
+            {/* ✅ Social login buttons */}
+            <div className="mt-6">
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-white text-gray-500">Or continue with</span>
+                </div>
+              </div>
 
-			<main className="flex items-center justify-center min-h-[calc(100vh-4rem)] py-12 px-4 sm:px-6 lg:px-8">
-				<div className="w-full max-w-md">
-					<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-						<div className="text-center mb-8">
-							<h1 className="text-2xl font-bold text-gray-900">
-								Login to your account
-							</h1>
-						</div>
+              <div className="mt-6 grid grid-cols-2 gap-3">
+                <button
+                  onClick={handleGithub}
+                  className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors"
+                >
+                  <FaGithub className="w-4 h-4 mr-2" />
+                  Github
+                </button>
+                <button
+                  onClick={handleGoogleLogin}
+                  className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors"
+                >
+                  <FaGoogle className="w-4 h-4 mr-2 text-red-500" />
+                  Google
+                </button>
+              </div>
+            </div>
 
-						<form
-							className="space-y-6"
-							onSubmit={(e) => e.preventDefault()}
-						>
-							<div>
-								<label
-									htmlFor="email"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Email address
-								</label>
-								<input
-									id="email"
-									type="email"
-									value={email}
-									onChange={(e) =>
-										handleEmailChange(e.target.value)
-									}
-									placeholder="Enter your email"
-									className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-										validation.email
-									)}`}
-								/>
-								{validation.email === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Please enter a valid email address
-									</p>
-								)}
-								{validation.email === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Email is required
-									</p>
-								)}
-							</div>
-
-							<div>
-								<label
-									htmlFor="password"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Password
-								</label>
-								<div className="relative">
-									<input
-										id="password"
-										type={
-											showPassword ? "text" : "password"
-										}
-										value={password}
-										onChange={(e) =>
-											handlePasswordChange(e.target.value)
-										}
-										placeholder="Enter your password"
-										className={`w-full px-3 py-2 pr-10 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-											validation.password
-										)}`}
-									/>
-									<button
-										type="button"
-										onClick={() =>
-											setShowPassword(!showPassword)
-										}
-										className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
-									>
-										{showPassword ? (
-											<FaEyeSlash className="w-4 h-4" />
-										) : (
-											<FaEye className="w-4 h-4" />
-										)}
-									</button>
-								</div>
-								{validation.password === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Password must be at least 6 characters
-										long
-									</p>
-								)}
-								{validation.password === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Password is required
-									</p>
-								)}
-								<div className="text-right mt-2">
-									<Link
-										to="#"
-										className="text-sm text-blue-600 hover:text-blue-500 transition-colors"
-									>
-										Forgot password?
-									</Link>
-								</div>
-							</div>
-
-							<button
-								type="submit"
-								onClick={handleEmailLogin}
-								className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-							>
-								Login
-							</button>
-						</form>
-
-						<div className="mt-6">
-							<div className="relative">
-								<div className="absolute inset-0 flex items-center">
-									<div className="w-full border-t border-gray-300"></div>
-								</div>
-								<div className="relative flex justify-center text-sm">
-									<span className="px-2 bg-white text-gray-500">
-										Or continue with
-									</span>
-								</div>
-							</div>
-
-							<div className="mt-6 grid grid-cols-2 gap-3">
-								<button
-									onClick={handleGithubLogin}
-									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-									<FaGithub className="w-4 h-4 mr-2" />
-									Github
-								</button>
-								<button
-									onClick={handleGoogleLogin}
-									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-								>
-									<FaGoogle className="w-4 h-4 mr-2" />
-									Google
-								</button>
-							</div>
-						</div>
-
-						<div className="mt-6 text-center">
-							<p className="text-sm text-gray-600">
-								{"Don't have an account? "}
-								<Link
-									to="/signup"
-									className="text-blue-600 hover:text-blue-500 font-medium transition-colors"
-								>
-									Sign Up
-								</Link>
-							</p>
-						</div>
-					</div>
-				</div>
-			</main>
-		</div>
-	);
+            <div className="mt-6 text-center">
+              <p className="text-sm text-gray-600">
+                {"Don’t have an account? "}
+                <Link
+                  to="/signup"
+                  className="text-blue-600 hover:text-blue-500 font-medium transition-colors"
+                >
+                  Sign up
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
 }
diff --git a/client/src/pages/SignUp.jsx b/client/src/pages/SignUp.jsx
index 90fca59..6e4f690 100644
--- a/client/src/pages/SignUp.jsx
+++ b/client/src/pages/SignUp.jsx
@@ -1,432 +1,383 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { FaGithub, FaGoogle, FaEye, FaEyeSlash } from "react-icons/fa";
-import Toast from "../components/Toast";
 import { useAuth } from "../context/AuthContext";
 import {
-	auth,
-	googleProvider,
-	signInWithPopup,
-	createUserWithEmailAndPassword,
-	updateProfile,
+  auth,
+  googleProvider,
+  signInWithPopup,
+  createUserWithEmailAndPassword,
+  updateProfile,
 } from "../firebase";
 import { GithubAuthProvider } from "firebase/auth";
 import axios from "axios";
+import toast from "react-hot-toast"; // ✅ Import hot-toast
 
 export default function SignUp() {
-	const githubProvider = new GithubAuthProvider();
-	const { user, setUser } = useAuth();
-
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [showPassword, setShowPassword] = useState(false);
-	const [validation, setValidation] = useState({
-		name: "untouched",
-		email: "untouched",
-		password: "untouched",
-	});
-	const [toast, setToast] = useState({
-		show: false,
-		message: "",
-		type: "success",
-	});
-	const [passwordStrength, setPasswordStrength] = useState("");
-
-	const navigate = useNavigate();
-
-	const validateName = (value) => {
-		if (value.trim() === "") return "empty";
-		if (value.trim().length < 2) return "invalid";
-		return "valid";
-	};
-
-	const validateEmail = (value) => {
-		if (value.trim() === "") return "empty";
-		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-		return emailRegex.test(value) ? "valid" : "invalid";
-	};
-
-	const validatePassword = (value) => {
-		if (value === "") return "empty";
-		if (value.length < 6) return "invalid";
-		return "valid";
-	};
-
-	const calculatePasswordStrength = (value) => {
-		let strength = "Weak";
-		let strengthScore = 0;
-
-		if (value.length >= 6) strengthScore++;
-		if (/[A-Z]/.test(value)) strengthScore++;
-		if (/[0-9]/.test(value)) strengthScore++;
-		if (/[^A-Za-z0-9]/.test(value)) strengthScore++;
-
-		if (strengthScore >= 4) strength = "Strong";
-		else if (strengthScore >= 2) strength = "Medium";
-
-		return strength;
-	};
-
-	const handleNameChange = (value) => {
-		setName(value);
-		setValidation((prev) => ({
-			...prev,
-			name: validateName(value),
-		}));
-	};
-
-	const handleEmailChange = (value) => {
-		setEmail(value);
-		setValidation((prev) => ({
-			...prev,
-			email: validateEmail(value),
-		}));
-	};
-
-	const handlePasswordChange = (value) => {
-		setPassword(value);
-		setValidation((prev) => ({
-			...prev,
-			password: validatePassword(value),
-		}));
-		setPasswordStrength(calculatePasswordStrength(value));
-	};
-
-	const getRingColor = (fieldValidation) => {
-		switch (fieldValidation) {
-			case "empty":
-				return "focus:ring-orange-500 focus:border-orange-500";
-			case "invalid":
-				return "focus:ring-red-500 focus:border-red-500 ring-2 ring-red-500 border-red-500";
-			case "valid":
-				return "focus:ring-blue-500 focus:border-blue-500";
-			default:
-				return "focus:ring-blue-500 focus:border-blue-500";
-		}
-	};
-
-	const showToast = (message, type) => {
-		setToast({ show: true, message, type });
-	};
-
-	const hideToast = () => {
-		setToast((prev) => ({ ...prev, show: false }));
-	};
-
-	const handleEmailSignUp = async () => {
-		const nameValidation = validateName(name);
-		const emailValidation = validateEmail(email);
-		const passwordValidation = validatePassword(password);
-
-		setValidation({
-			name: nameValidation,
-			email: emailValidation,
-			password: passwordValidation,
-		});
-
-		if (
-			nameValidation !== "valid" ||
-			emailValidation !== "valid" ||
-			passwordValidation !== "valid"
-		) {
-			showToast("Please fill in all fields correctly", "error");
-			return;
-		}
-
-		try {
-			const userCredential = await createUserWithEmailAndPassword(
-				auth,
-				email,
-				password
-			);
-			await updateProfile(userCredential.user, { displayName: name });
-
-			const idToken = await userCredential.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/register`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
-
-			showToast("Account created successfully!", "success");
-			setTimeout(() => {
-				navigate("/login");
-			}, 500);
-		} catch (err) {
-			showToast(
-				err.message || "An error occurred during sign up",
-				"error"
-			);
-		}
-	};
-
-	//for google
-	const handleGoogleLogin = async () => {
-		try {
-			const result = await signInWithPopup(auth, googleProvider);
-			const idToken = await result.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/register`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
-
-			setUser(result.user);
-			console.log("User signed in:", user);
-
-			showToast("Successfully signed in with Google!", "success");
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		} catch (err) {
-			showToast(
-				err.message || "An error occurred during Google sign in",
-				"error"
-			);
-		}
-	};
-
-	//for Github
-	const handleGithub = async () => {
-		try {
-			const result = await signInWithPopup(auth, githubProvider);
-			const credential = GithubAuthProvider.credentialFromResult(result);
-			const token = credential.accessToken;
-
-			const idToken = await result.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/register`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
-
-			setUser(result.user); // Set the authenticated user
-			showToast("Successfully signed in with GitHub!", "success");
-
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		} catch (error) {
-			console.error("GitHub login failed:", error);
-			// showToast(error.message || "GitHub login failed", "error");
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		}
-	};
-
-	return (
-		<div className="min-h-screen bg-gray-50 min-w-screen">
-			{toast.show && (
-				<Toast
-					message={toast.message}
-					type={toast.type}
-					onClose={hideToast}
-				/>
-			)}
-
-			<main className="flex items-center justify-center min-h-[calc(100vh-4rem)] py-12 px-4 sm:px-6 lg:px-8">
-				<div className="w-full max-w-md">
-					<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-						<div className="text-center mb-8">
-							<h1 className="text-2xl font-bold text-gray-900">
-								Create a new account
-							</h1>
-						</div>
-
-						<form
-							className="space-y-6"
-							onSubmit={handleEmailSignUp}
-						>
-							<div>
-								<label
-									htmlFor="name"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Name
-								</label>
-								<input
-									id="name"
-									type="text"
-									value={name}
-									onChange={(e) =>
-										handleNameChange(e.target.value)
-									}
-									placeholder="Enter your name"
-									className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-										validation.name
-									)}`}
-								/>
-								{validation.name === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Name must be at least 2 characters long
-									</p>
-								)}
-								{validation.name === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Name is required
-									</p>
-								)}
-							</div>
-
-							<div>
-								<label
-									htmlFor="email"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Email address
-								</label>
-								<input
-									id="email"
-									type="email"
-									value={email}
-									onChange={(e) =>
-										handleEmailChange(e.target.value)
-									}
-									placeholder="Enter your email"
-									className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-										validation.email
-									)}`}
-								/>
-								{validation.email === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Please enter a valid email address
-									</p>
-								)}
-								{validation.email === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Email is required
-									</p>
-								)}
-							</div>
-
-							<div>
-								<label
-									htmlFor="password"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Password
-								</label>
-								<div className="relative">
-									<input
-										id="password"
-										type={
-											showPassword ? "text" : "password"
-										}
-										value={password}
-										onChange={(e) =>
-											handlePasswordChange(e.target.value)
-										}
-										placeholder="Enter your password"
-										className={`w-full px-3 py-2 pr-10 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-											validation.password
-										)}`}
-									/>
-									<button
-										type="button"
-										onClick={() =>
-											setShowPassword(!showPassword)
-										}
-										className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
-									>
-										{showPassword ? (
-											<FaEyeSlash className="w-4 h-4" />
-										) : (
-											<FaEye className="w-4 h-4" />
-										)}
-									</button>
-								</div>
-								{validation.password === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Password must be at least 6 characters
-										long
-									</p>
-								)}
-								{validation.password === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Password is required
-									</p>
-								)}
-								{password && validation.password !== "empty" && (
-									<p
-										className={`mt-1 text-sm ${
-											passwordStrength === "Weak"
-												? "text-red-600"
-												: passwordStrength === "Medium"
-												? "text-yellow-600"
-												: "text-green-600"
-										}`}
-									>
-										Password strength: {passwordStrength}
-									</p>
-								)}
-							</div>
-
-							<button
-								type="submit"
-								onClick={handleEmailSignUp}
-								className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-							>
-								Sign up
-							</button>
-						</form>
-
-						<div className="mt-6">
-							<div className="relative">
-								<div className="absolute inset-0 flex items-center">
-									<div className="w-full border-t border-gray-300"></div>
-								</div>
-								<div className="relative flex justify-center text-sm">
-									<span className="px-2 bg-white text-gray-500">
-										Or continue with
-									</span>
-								</div>
-							</div>
-
-							<div className="mt-6 grid grid-cols-2 gap-3">
-								<button
-									onClick={handleGithub}
-									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-									<FaGithub className="w-4 h-4 mr-2" />
-									Github
-								</button>
-								<button
-									onClick={handleGoogleLogin}
-									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-								>
-									<FaGoogle className="w-4 h-4 mr-2" />
-									Google
-								</button>
-							</div>
-						</div>
-
-						<div className="mt-6 text-center">
-							<p className="text-sm text-gray-600">
-								{"Already have an account? "}
-								<Link
-									to="/login"
-									className="text-blue-600 hover:text-blue-500 font-medium transition-colors"
-								>
-									Login
-								</Link>
-							</p>
-						</div>
-					</div>
-				</div>
-			</main>
-		</div>
-	);
+  const githubProvider = new GithubAuthProvider();
+  const { setUser } = useAuth();
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [validation, setValidation] = useState({
+    name: "untouched",
+    email: "untouched",
+    password: "untouched",
+  });
+  const [passwordStrength, setPasswordStrength] = useState("");
+
+  const navigate = useNavigate();
+
+  const validateName = (value) => {
+    if (value.trim() === "") return "empty";
+    if (value.trim().length < 2) return "invalid";
+    return "valid";
+  };
+
+  const validateEmail = (value) => {
+    if (value.trim() === "") return "empty";
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(value) ? "valid" : "invalid";
+  };
+
+  const validatePassword = (value) => {
+    if (value === "") return "empty";
+    if (value.length < 6) return "invalid";
+    return "valid";
+  };
+
+  const calculatePasswordStrength = (value) => {
+    let strength = "Weak";
+    let score = 0;
+
+    if (value.length >= 6) score++;
+    if (/[A-Z]/.test(value)) score++;
+    if (/[0-9]/.test(value)) score++;
+    if (/[^A-Za-z0-9]/.test(value)) score++;
+
+    if (score >= 4) strength = "Strong";
+    else if (score >= 2) strength = "Medium";
+
+    return strength;
+  };
+
+  const handleNameChange = (value) => {
+    setName(value);
+    setValidation((prev) => ({
+      ...prev,
+      name: validateName(value),
+    }));
+  };
+
+  const handleEmailChange = (value) => {
+    setEmail(value);
+    setValidation((prev) => ({
+      ...prev,
+      email: validateEmail(value),
+    }));
+  };
+
+  const handlePasswordChange = (value) => {
+    setPassword(value);
+    setValidation((prev) => ({
+      ...prev,
+      password: validatePassword(value),
+    }));
+    setPasswordStrength(calculatePasswordStrength(value));
+  };
+
+  const getRingColor = (fieldValidation) => {
+    switch (fieldValidation) {
+      case "empty":
+        return "focus:ring-orange-500 focus:border-orange-500";
+      case "invalid":
+        return "focus:ring-red-500 focus:border-red-500 ring-2 ring-red-500 border-red-500";
+      case "valid":
+        return "focus:ring-blue-500 focus:border-blue-500";
+      default:
+        return "focus:ring-blue-500 focus:border-blue-500";
+    }
+  };
+
+  const handleEmailSignUp = async (e) => {
+    e.preventDefault();
+
+    const nameValidation = validateName(name);
+    const emailValidation = validateEmail(email);
+    const passwordValidation = validatePassword(password);
+
+    setValidation({
+      name: nameValidation,
+      email: emailValidation,
+      password: passwordValidation,
+    });
+
+    if (
+      nameValidation !== "valid" ||
+      emailValidation !== "valid" ||
+      passwordValidation !== "valid"
+    ) {
+      toast.error("Please fill in all fields correctly");
+      return;
+    }
+
+    try {
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      await updateProfile(userCredential.user, { displayName: name });
+
+      const idToken = await userCredential.user.getIdToken();
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/register`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${idToken}`,
+          },
+        }
+      );
+
+      toast.success("Account created successfully!");
+      setTimeout(() => {
+        navigate("/login");
+      }, 500);
+    } catch (err) {
+      toast.error(err.message || "An error occurred during sign up");
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      const result = await signInWithPopup(auth, googleProvider);
+      const idToken = await result.user.getIdToken();
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/register`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${idToken}`,
+          },
+        }
+      );
+
+      setUser(result.user);
+      toast.success("Successfully signed in with Google!");
+      setTimeout(() => {
+        navigate("/");
+      }, 2000);
+    } catch (err) {
+      toast.error(err.message || "An error occurred during Google sign in");
+    }
+  };
+
+  const handleGithub = async () => {
+    try {
+      const result = await signInWithPopup(auth, githubProvider);
+      const idToken = await result.user.getIdToken();
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/register`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${idToken}`,
+          },
+        }
+      );
+
+      setUser(result.user);
+      toast.success("Successfully signed in with GitHub!");
+      setTimeout(() => {
+        navigate("/");
+      }, 2000);
+    } catch (error) {
+      toast.error(error.message || "GitHub login failed");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 min-w-screen">
+      {/* 🔥 No need for <Toast /> component */}
+
+      <main className="flex items-center justify-center min-h-[calc(100vh-4rem)] py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold text-gray-900">
+                Create a new account
+              </h1>
+            </div>
+
+            <form className="space-y-6" onSubmit={handleEmailSignUp}>
+              <div>
+                <label
+                  htmlFor="name"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                  placeholder="Enter your name"
+                  className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
+                    validation.name
+                  )}`}
+                />
+                {validation.name === "invalid" && (
+                  <p className="mt-1 text-sm text-red-600">
+                    Name must be at least 2 characters long
+                  </p>
+                )}
+                {validation.name === "empty" && (
+                  <p className="mt-1 text-sm text-orange-600">
+                    Name is required
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Email address
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => handleEmailChange(e.target.value)}
+                  placeholder="Enter your email"
+                  className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
+                    validation.email
+                  )}`}
+                />
+                {validation.email === "invalid" && (
+                  <p className="mt-1 text-sm text-red-600">
+                    Please enter a valid email address
+                  </p>
+                )}
+                {validation.email === "empty" && (
+                  <p className="mt-1 text-sm text-orange-600">
+                    Email is required
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Password
+                </label>
+                <div className="relative">
+                  <input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => handlePasswordChange(e.target.value)}
+                    placeholder="Enter your password"
+                    className={`w-full px-3 py-2 pr-10 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
+                      validation.password
+                    )}`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
+                  >
+                    {showPassword ? (
+                      <FaEyeSlash className="w-4 h-4" />
+                    ) : (
+                      <FaEye className="w-4 h-4" />
+                    )}
+                  </button>
+                </div>
+                {validation.password === "invalid" && (
+                  <p className="mt-1 text-sm text-red-600">
+                    Password must be at least 6 characters long
+                  </p>
+                )}
+                {validation.password === "empty" && (
+                  <p className="mt-1 text-sm text-orange-600">
+                    Password is required
+                  </p>
+                )}
+                {password && validation.password !== "empty" && (
+                  <p
+                    className={`mt-1 text-sm ${
+                      passwordStrength === "Weak"
+                        ? "text-red-600"
+                        : passwordStrength === "Medium"
+                        ? "text-yellow-600"
+                        : "text-green-600"
+                    }`}
+                  >
+                    Password strength: {passwordStrength}
+                  </p>
+                )}
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              >
+                Sign up
+              </button>
+            </form>
+
+            <div className="mt-6">
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-white text-gray-500">
+                    Or continue with
+                  </span>
+                </div>
+              </div>
+
+              <div className="mt-6 grid grid-cols-2 gap-3">
+                <button
+                  onClick={handleGithub}
+                  className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  <FaGithub className="w-4 h-4 mr-2" />
+                  Github
+                </button>
+                <button
+                  onClick={handleGoogleLogin}
+                  className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  <FaGoogle className="w-4 h-4 mr-2" />
+                  Google
+                </button>
+              </div>
+            </div>
+
+            <div className="mt-6 text-center">
+              <p className="text-sm text-gray-600">
+                {"Already have an account? "}
+                <Link
+                  to="/login"
+                  className="text-blue-600 hover:text-blue-500 font-medium transition-colors"
+                >
+                  Login
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
 }
diff --git a/server/firebase.js b/server/firebase.js
new file mode 100644
index 0000000..4ed3532
--- /dev/null
+++ b/server/firebase.js
@@ -0,0 +1,12 @@
+import admin from "firebase-admin";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT_KEY);
+
+admin.initializeApp({
+  credential: admin.credential.cert(serviceAccount),
+});
+
+export default admin;
diff --git a/server/index.js b/server/index.js
index 016aa75..02be98c 100644
--- a/server/index.js
+++ b/server/index.js
@@ -7,28 +7,44 @@ import express from "express";
 import cors from "cors";
 import dotenv from "dotenv";
 import connectDB from "./config/db.js";
-import admin from "firebase-admin";
 import multer from "multer";
 
+// Import Firebase Admin instance (already initialized in firebase.js)
+import admin from "./firebase.js"; 
+
+// Load environment variables
 dotenv.config();
+
 const app = express();
 const upload = multer({ dest: "uploads/" });
+
+// --- Middlewares ---
 app.use(cors({
   origin: 'https://prepedgeai.vercel.app',
   credentials: true,
 }));
 app.use(express.json());
-connectDB()
-    .then(() => console.log("Database connected successfully"))
-    .catch((error) => console.error("Database connection failed:", error));
-    
-// Initializing Firebase Admin SDK
-var serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);   
-admin.initializeApp({
-  credential: admin.credential.cert(serviceAccount)
+
+// --- Protected route middleware ---
+app.use("/api/protected", async (req, res, next) => {
+  const token = req.headers.authorization?.split(" ")[1];
+  if (!token) return res.status(401).json({ error: "Unauthorized" });
+
+  try {
+    const decoded = await admin.auth().verifyIdToken(token);
+    req.user = decoded;
+    next();
+  } catch (err) {
+    res.status(401).json({ error: "Invalid token" });
+  }
 });
 
-// Routing
+// --- Connect to database ---
+connectDB()
+  .then(() => console.log("Database connected successfully"))
+  .catch((error) => console.error("Database connection failed:", error));
+
+// --- Routes ---
 import authRoutes from "./routes/authRoutes.js";
 import interviewRoutes from "./routes/interviewRoutes.js";
 import reportRoutes from "./routes/reportRoutes.js";
@@ -39,6 +55,6 @@ app.use("/api/interview", interviewRoutes);
 app.use("/api/report", reportRoutes);
 app.use("/api/contact", contactRoutes);
 
-// Starting the server
+// --- Start server ---
 const PORT = process.env.PORT || 5000;
 app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
diff --git a/server/package-lock.json b/server/package-lock.json
index a9be8ac..49903f3 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -22,11 +22,11 @@
         "mongoose": "^8.16.0",
         "multer": "^2.0.1",
         "nodemailer": "^7.0.4",
-        "nodemon": "^3.1.10",
         "pdf-parse": "^1.1.1",
         "streamifier": "^0.1.1"
       },
       "devDependencies": {
+        "nodemon": "^3.1.10",
         "patch-package": "^8.0.0",
         "postinstall-postinstall": "^2.1.0"
       }
@@ -1058,6 +1058,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1118,7 +1119,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/base64-arraybuffer": {
       "version": "1.0.2",
@@ -1160,6 +1162,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -1190,6 +1193,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1199,6 +1203,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -1370,6 +1375,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -1460,7 +1466,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/concat-stream": {
       "version": "2.0.0",
@@ -1857,6 +1864,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2039,6 +2047,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2170,6 +2179,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2283,6 +2293,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -2450,7 +2461,8 @@
     "node_modules/ignore-by-default": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA=="
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true
     },
     "node_modules/inflight": {
       "version": "1.0.6",
@@ -2480,6 +2492,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -2506,6 +2519,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2522,6 +2536,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2533,6 +2548,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2902,6 +2918,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3223,6 +3240,7 @@
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
       "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chokidar": "^3.5.2",
@@ -3251,6 +3269,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3445,6 +3464,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3509,7 +3529,8 @@
     "node_modules/pstree.remy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
-      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -3591,6 +3612,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -3862,6 +3884,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
       "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
       "dependencies": {
         "semver": "^7.5.3"
       },
@@ -3988,6 +4011,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -4083,6 +4107,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4102,6 +4127,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
       "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
       "bin": {
         "nodetouch": "bin/nodetouch.js"
       }
@@ -4137,7 +4163,8 @@
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
-      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA=="
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true
     },
     "node_modules/undici-types": {
       "version": "7.8.0",
diff --git a/server/package.json b/server/package.json
index c8c0160..d71c326 100644
--- a/server/package.json
+++ b/server/package.json
@@ -8,7 +8,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "postinstall": "patch-package",
     "start": "node index.js",
-    "dev": "nodemon index.js"
+    "dev": "nodemon index.js",
+
   },
   "keywords": [],
   "author": "",
@@ -26,11 +27,11 @@
     "mongoose": "^8.16.0",
     "multer": "^2.0.1",
     "nodemailer": "^7.0.4",
-    "nodemon": "^3.1.10",
     "pdf-parse": "^1.1.1",
     "streamifier": "^0.1.1"
   },
   "devDependencies": {
+    "nodemon": "^3.1.10",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0"
   }