diff --git a/Frontend/.gitignore b/Frontend/.gitignore
index a547bf3..b02a1ff 100644
--- a/Frontend/.gitignore
+++ b/Frontend/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
 
 # Editor directories and files
 .vscode/*
diff --git a/Frontend/package.json b/Frontend/package.json
index 4c3b9f7..6869921 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.9",
+    "lucide-react": "^0.476.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
diff --git a/Frontend/public/404-2.eps b/Frontend/public/404-2.eps
new file mode 100644
index 0000000..335953f
Binary files /dev/null and b/Frontend/public/404-2.eps differ
diff --git a/Frontend/public/404.eps b/Frontend/public/404.eps
new file mode 100644
index 0000000..0666e6e
Binary files /dev/null and b/Frontend/public/404.eps differ
diff --git a/Frontend/public/404.png b/Frontend/public/404.png
new file mode 100644
index 0000000..7e50314
Binary files /dev/null and b/Frontend/public/404.png differ
diff --git a/Frontend/public/Dashboard.png b/Frontend/public/Dashboard.png
new file mode 100644
index 0000000..1f0e188
Binary files /dev/null and b/Frontend/public/Dashboard.png differ
diff --git a/Frontend/samples/dashboard.png b/Frontend/samples/dashboard.png
new file mode 100644
index 0000000..0c6364f
Binary files /dev/null and b/Frontend/samples/dashboard.png differ
diff --git a/Frontend/src/components/Footer.jsx b/Frontend/src/components/Footer.jsx
index 53c52e5..1150cc0 100644
--- a/Frontend/src/components/Footer.jsx
+++ b/Frontend/src/components/Footer.jsx
@@ -1,29 +1,159 @@
+import { useState } from "react";
+import {
+  Facebook,
+  Twitter,
+  Instagram,
+  Linkedin,
+  Mail,
+  Phone,
+  MapPin,
+} from "lucide-react";
+
 const Footer = () => {
+  const [email, setEmail] = useState("");
+
+  //Currently storing user email in localstorage
+  const handleSubscribe = () => {
+    if (email.trim() !== "") {
+      localStorage.setItem("subscribedEmail", email);
+      alert("You have successfully subscribed!");
+      setEmail("");
+    }
+  };
+
   return (
-    <footer className="bg-gradient-to-r from-[#689adc] via-[#6da1e6] h-[353px] w-full pt-16 pb-8">
-      <div className="container mx-auto px-4">
-        <div className="flex items-center justify-center mb-4">
-          <div className="text-cyan-400 mr-3">
-            <svg
-              className="w-12 h-12"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 2L2 12L12 22L22 12L12 2Z"
-                stroke="currentColor"
-                strokeWidth="3"
-                fill="none"
-              />
-            </svg>
+    <footer className="bg-gradient-to-r from-[#4a7cbd] via-[#5b4fd3] to-[#9377ff] w-full pt-16 pb-8">
+      <div className="container mx-auto px-6">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <div className="text-white mr-3">
+                <svg
+                  className="w-10 h-10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2L2 12L12 22L22 12L12 2Z"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    fill="none"
+                  />
+                </svg>
+              </div>
+              <h3 className="text-2xl font-bold text-white">Drive-thru</h3>
+            </div>
+            <p className="text-white/90">
+              Your secure cloud storage solution for all your digital needs.
+            </p>
+            <div className="flex space-x-4">
+              <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+                <Facebook className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
+              </a>
+              <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
+                <Twitter className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
+              </a>
+              <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
+                <Instagram className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
+              </a>
+              <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
+                <Linkedin className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
+              </a>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="font-semibold text-white mb-4">Quick Links</h4>
+            <ul className="space-y-2">
+              <li>
+                <a
+                  href="#about"
+                  className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
+                >
+                  About Us
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#features"
+                  className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
+                >
+                  Features
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#howItWorks"
+                  className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
+                >
+                  How It Works
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact Info */}
+          <div>
+            <h4 className="font-semibold text-white mb-4">Contact</h4>
+            <ul className="space-y-2">
+              <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
+                <Mail className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
+                support@drivethru.com
+              </li>
+              <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
+                <Phone className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
+                +91 3628206234
+              </li>
+              <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
+                <MapPin className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
+                123 Cloud Street, Digital City
+              </li>
+            </ul>
+          </div>
+
+          {/* Newsletter */}
+          <div>
+            <h4 className="font-semibold text-white mb-4">Stay Updated</h4>
+            <p className="text-white/90 mb-4">
+              Get exclusive tips, updates on new features, and special offers directly in your inbox.
+            </p>
+            <div className="space-y-4">
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Enter your email"
+                className="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/30"
+              />
+              <button
+                onClick={handleSubscribe}
+                className="w-full px-4 py-2 rounded-md bg-white text-blue-600 font-medium hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105"
+              >
+                Subscribe to Newsletter
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-px w-full bg-white/20 my-8" />
+
+        {/* Bottom Section */}
+        <div className="flex flex-col md:flex-row justify-between items-center text-white/90 text-sm">
+          <p>© {new Date().getFullYear()} Drive-Thru. All rights reserved.</p>
+          <div className="flex gap-4 mt-4 md:mt-0">
+            <a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
+              Privacy Policy
+            </a>
+            <a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
+              Terms of Service
+            </a>
+            <a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
+              Cookie Policy
+            </a>
           </div>
-          <h1 className="text-5xl font-bold text-black">Drive-thru</h1>
         </div>
-        <p className="text-black text-center">
-          About | Privacy Policy | Terms of Service | Contact@
-          {new Date().getFullYear()} Drive-Thru. All rights reserved.
-        </p>
       </div>
     </footer>
   );
diff --git a/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx b/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx
index f2eeebe..696e56f 100644
--- a/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx
+++ b/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx
@@ -1,281 +1,258 @@
 import Footer from "../../components/Footer";
+import React from "react"
+import { useState, useEffect } from "react"
+
 
 const DrivethruLandingPage = () => {
-  return (
-    <div className="min-h-screen bg-white overflow-hidden">
-      <div className="bg-white min-h-[1024px] flex items-center relative">
-        <div className="container mx-auto px-6 relative z-10">
-          <div className="flex flex-col md:flex-row items-center">
-            <div className="hidden md:block md:w-1/2 lg:w-3/5"></div>
+  const features = [
+    {
+      title: "Easy Upload & Access",
+      description: "Drag & drop, instant access.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+        </svg>
+      )
+    },
+    {
+      title: "Secure & Private",
+      description: "End-to-end encryption.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+        </svg>
+      )
+    },
+    {
+      title: "Seamless Sharing",
+      description: "Share files with one click.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+        </svg>
+      )
+    },
+    {
+      title: "Access Anywhere",
+      description: "Works on all devices.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65" />
+        </svg>
+      )
+    }
+  ];
 
-            <div className="w-full md:w-1/2 lg:w-2/5 max-w-lg bg-transparent">
-              <div className="flex items-center mb-8">
-                <div className="text-cyan-400 mr-3">
-                  <svg
-                    className="w-12 h-12"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 2L2 12L12 22L22 12L12 2Z"
-                      stroke="currentColor"
-                      strokeWidth="3"
-                      fill="none"
-                    />
+  const howItWorks = [
+    {
+      title: "Create an account",
+      description: "Sign up in seconds.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+      )
+    },
+    {
+      title: "Upload files",
+      description: "Drag & drop or select from your device.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+        </svg>
+      )
+    },
+    {
+      title: "Manage files",
+      description: "Rename, move, or delete easily.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      )
+    },
+    {
+      title: "Access anytime",
+      description: "Open files from any device.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      )
+    }
+  ];
+
+  // UseEffect and handle....click function to handle set and handle the animation of features..
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+
+  useEffect(() => {
+    if (!isPaused) {
+      const interval = setInterval(() => {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % features.length);
+      }, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [isPaused]);
+
+  // Handle user interaction
+  const handleFeatureClick = (index) => {
+    setActiveIndex(index);
+    setIsPaused(true);
+    setTimeout(() => setIsPaused(false), 1000);
+  };
+
+  const [activeIndex1, setActiveIndex1] = useState(0);
+  const [isPaused1, setIsPaused1] = useState(false);
+
+  useEffect(() => {
+    if (!isPaused1) {
+      const interval = setInterval(() => {
+        setActiveIndex1((prevIndex) => (prevIndex + 1) % howItWorks.length);
+      }, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [isPaused1]);
+
+  const handleFeatureClick1 = (index) => {
+    setActiveIndex1(index);
+    setIsPaused1(true);
+    setTimeout(() => setIsPaused1(false), 1000);
+  };
+
+  return (
+    <div className="min-h-screen overflow-x-hidden bg-white">
+      {/* Hero Section */}
+      <div id="about" className="bg-gradient-to-r from-blue-50 to-white min-h-[90vh] flex items-center relative">
+        <div className="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
+          <div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
+
+            {/* Left Side - Text Content */}
+            <div className="w-full md:w-1/2 text-center md:text-left order-1 md:order-1">
+              <div className="flex justify-center md:justify-start items-center mb-6 lg:mb-8">
+                <div className="text-cyan-400 mr-2 md:mr-3">
+                  <svg className="w-10 md:w-12 h-10 md:h-12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 2L2 12L12 22L22 12L12 2Z" stroke="currentColor" strokeWidth="3" fill="none" />
                   </svg>
                 </div>
-                <h1 className="text-5xl font-bold text-black">Drive-thru</h1>
+                <h1 className="text-4xl md:text-5xl font-bold text-black">Drive-thru</h1>
               </div>
 
-              <h2 className="text-2xl font-bold mb-6 text-black">
+              <h2 className="text-xl md:text-2xl font-bold mb-4 md:mb-6 text-black">
                 Store, Access & Share Your Files — Anytime, Anywhere!
               </h2>
 
-              <p className="text-gray-800 mb-10 text-lg">
-                A simple, secure, and fast cloud storage solution for all your
-                files. Upload, organize, and access with ease.
+              <p className="text-gray-800 mb-6 md:mb-10 text-base md:text-lg">
+                A simple, secure, and fast cloud storage solution for all your files. Upload, organize, and access with ease.
               </p>
 
-              <div className="flex flex-row space-x-4">
-                <button className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full transition-colors duration-200 shadow-md">
+              {/* Buttons */}
+              <div className="flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
+                <button className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
                   Get Started
                 </button>
-                <button className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full transition-colors duration-200 shadow-md">
+                <button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
                   Login
                 </button>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-white py-16">
-        <div className="container mx-auto px-6">
-          <div className="flex flex-col md:flex-row items-center justify-between mb-24">
-            {" "}
-            <div className="w-full md:w-1/2 lg:w-2/5 flex justify-center md:justify-end">
-              <img
-                src="./He.png"
-                alt="Person using Drive-thru on laptop"
-                className="mx h-auto max-w-full"
-              />
-            </div>
-            {/* Features Card */}
-            <div className="w-full md:w-1/2 lg:w-3/5 mb-12 md:mb-0">
-              <div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg">
-                <h2 className="text-3xl font-bold mb-8">Key Features</h2>
-
-                <div className="space-y-6">
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Easy Upload & Access – Drag & drop, instant access.
-                    </p>
-                  </div>
-
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Secure & Private – End-to-end encryption.
-                    </p>
-                  </div>
-
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Seamless Sharing – Share files with one click.
-                    </p>
-                  </div>
-
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Access Anywhere – Works on all devices.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* How It Works Section */}
-          <div className="flex flex-col md:flex-row-reverse items-center justify-between">
-            {/* Person with Phone Image */}
-            <div className="w-full md:w-1/2 lg:w-2/5 mb-12 md:mb-0 flex justify-center md:justify-start">
-              <img
-                src="./She.png"
-                alt="Person using Drive-thru on phone"
-                className="h-auto max-w-full"
-              />
-            </div>
-
-            {/* How It Works Card */}
-            <div className="w-full md:w-1/2 lg:w-3/5">
-              <div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg">
-                <h2 className="text-3xl font-bold mb-8">How It Works</h2>
-
-                <div className="space-y-6">
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Create an account – Sign up in seconds.
-                    </p>
-                  </div>
-
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Upload files – Drag & drop or select from your device.
-                    </p>
-                  </div>
-
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                        ></path>
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Manage files – Rename, move, or delete easily.
-                    </p>
-                  </div>
-
-                  <div className="flex items-start">
-                    <div className="text-emerald-500 mr-3 mt-1">
-                      <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                        ></path>
-                      </svg>
-                    </div>
-                    <p className="text-lg font-semibold">
-                      Access anytime – Open files from any device.
-                    </p>
-                  </div>
-                </div>
+            {/* Right Side - Image */}
+            <div className="w-full md:w-1/2 flex justify-center order-2 md:order-1">
+              <div className="relative p-4 bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl max-w-xs sm:max-w-lg md:max-w-md lg:max-w-lvh">
+                <img
+                  src="/Dashboard.png"
+                  alt="Drive-thru Dashboard Interface"
+                  className="w-full rounded-xl shadow-2xl transition-shadow duration-300"
+                />
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-emerald-500/5 rounded-2xl pointer-events-none"></div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <Footer></Footer>
+
+      {/* Features Section */}
+      <div id="features" className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg">
+        <h2 className="text-3xl font-bold text-center mb-8">Key Features</h2>
+        <div className="flex flex-col-reverse md:flex-row items-center gap-8 lg:gap-12">
+
+          {/* Left Side - Image */}
+          <div className="w-full md:w-1/2 flex justify-center">
+            <img
+              src="/He.png"
+              alt="Feature Illustration"
+              className="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg object-contain rounded-lg shadow-md"
+            />
+          </div>
+
+          {/* Right Side - Feature List */}
+          <div className="w-full md:w-1/2">
+            <div className="space-y-6">
+              {features.map((feature, index) => (
+                <div
+                  key={index}
+                  className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${index === activeIndex ? "border-blue-500 bg-white shadow-lg scale-105" : "border-gray-300"
+                    }`}
+                  onClick={() => handleFeatureClick(index)}
+                >
+                  <div className="flex items-center space-x-4">
+                    {feature.icon}
+                    <h3 className="text-lg font-semibold">{feature.title}</h3>
+                  </div>
+                  {index === activeIndex && (
+                    <p className="text-gray-600 mt-3 transition-opacity duration-500 opacity-100">
+                      {feature.description}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* How It Works Section */}
+      <div id="howItWorks" className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg">
+        <h2 className="text-3xl font-bold text-center mb-8">How It Works</h2>
+        <div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
+
+          {/* Left Side - Feature List */}
+          <div className="w-full md:w-1/2">
+            <div className="space-y-6">
+              {howItWorks.map((howItWork, index) => (
+                <div
+                  key={index}
+                  className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${index === activeIndex1 ? "border-blue-500 bg-white shadow-lg scale-105" : "border-gray-300"
+                    }`}
+                  onClick={() => handleFeatureClick1(index)}
+                >
+                  <div className="flex items-center space-x-4">
+                    {howItWork.icon}
+                    <h3 className="text-lg font-semibold">{howItWork.title}</h3>
+                  </div>
+                  {index === activeIndex1 && (
+                    <p className="text-gray-600 mt-3 transition-opacity duration-500 opacity-100">
+                      {howItWork.description}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Side - Image */}
+          <div className="w-full md:w-1/2 flex justify-center">
+            <img
+              src="/She.png"
+              alt="Feature Illustration"
+              className="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg object-contain rounded-lg shadow-md"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Footer />
     </div>
   );
 };
diff --git a/Frontend/src/pages/UserPages/NotFoundPage.jsx b/Frontend/src/pages/UserPages/NotFoundPage.jsx
index 9d8bd6e..546de5c 100644
--- a/Frontend/src/pages/UserPages/NotFoundPage.jsx
+++ b/Frontend/src/pages/UserPages/NotFoundPage.jsx
@@ -4,226 +4,13 @@ const NotFoundPage = () => {
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-gray-100 p-4">
       {/* Placeholder SVG - Replace this with your SVG */}
-      <svg
-        className="w-auto max-w-[16rem] h-40 text-gray-800 dark:text-white"
-        aria-hidden="true"
-        width="682"
-        height="382"
-        viewBox="0 0 682 382"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M532 191C532 296.486 446.486 382 341 382C235.514 382 150 296.486 150 191C150 85.5136 235.514 0 341 0C446.486 0 532 85.5136 532 191Z"
-          fill="#d6e2fb"
-        />
-        <path
-          d="M532 191C532 296.486 446.486 382 341 382C235.514 382 150 296.486 150 191C150 85.5136 235.514 0 341 0C446.486 0 532 85.5136 532 191Z"
-          fill="url(#paint0_linear_383_360)"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M348.517 327.448C328.006 327.448 310.402 322.258 295.703 311.878C293.314 310.167 291.014 308.333 288.804 306.376L288.8 306.4L288.258 305.888C287.243 304.974 286.248 304.033 285.272 303.067L272.5 291L274.745 290.579C269.788 283.553 265.522 275.581 261.947 266.662C254.141 246.898 250.238 223.107 250.238 195.288C250.321 167.469 254.266 143.803 262.072 124.288C269.961 104.69 281.213 89.7427 295.828 79.4457C310.526 69.1486 328.089 64 348.517 64C364.303 64 378.377 67.0741 390.741 73.2224L384 66L393.3 70.9L408.502 85.1863C419.683 95.0351 428.503 108.069 434.963 124.288C442.852 143.886 446.797 167.552 446.797 195.288C446.797 223.19 442.852 247.023 434.963 266.786C427.157 286.467 415.905 301.498 401.207 311.878C386.592 322.258 369.029 327.448 348.517 327.448ZM348.517 288.46C364.461 288.46 377.042 280.613 386.26 264.918C395.56 249.14 400.211 225.93 400.211 195.288C400.211 175.026 398.093 158.003 393.858 144.218C389.623 130.433 383.644 120.053 375.921 113.077C368.198 106.019 359.064 102.49 348.517 102.49C332.657 102.49 320.117 110.378 310.9 126.156C301.682 141.851 297.032 164.895 296.949 195.288C296.866 215.633 298.9 232.74 303.052 246.607C307.288 260.475 313.266 270.938 320.989 277.997C328.712 284.972 337.888 288.46 348.517 288.46ZM483.574 275.256L467.6 260.2L483.574 238.51L591.818 67.4873H605.769L633.3 52.5L649.366 67.4873V237.265L666 222.3L682.001 237.265V275.256H649.366V322.59H605.271L589.3 307.6L605.271 275.256H483.574ZM603.776 119.803H605.769V237.265H530.908V235.272L603.776 119.803ZM16 238.51L0 260.2L16 275.256H137.697L121.7 307.6L137.697 322.59H181.792V275.256H214.427V237.265L198.4 222.3L181.792 237.265V67.4873L165.8 52.5L138.195 67.4873H124.244L16 238.51ZM138.195 119.803H136.202L63.3334 235.272V237.265H138.195V119.803Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M332.517 312.448C312.006 312.448 294.402 307.258 279.703 296.878C265.088 286.415 253.836 271.343 245.947 251.662C238.141 231.898 234.238 208.107 234.238 180.288C234.321 152.469 238.266 128.802 246.072 109.288C253.961 89.6901 265.213 74.7427 279.828 64.4457C294.526 54.1486 312.089 49 332.517 49C352.946 49 370.509 54.1486 385.207 64.4457C399.905 74.7427 411.157 89.6901 418.963 109.288C426.852 128.886 430.797 152.552 430.797 180.288C430.797 208.19 426.852 232.023 418.963 251.786C411.157 271.467 399.905 286.498 385.207 296.878C370.592 307.258 353.029 312.448 332.517 312.448ZM467.574 260.256V223.51L575.818 52.4873H589.769H606.461H633.366V222.265H666.001V260.256H633.366V307.59H589.271V260.256H467.574ZM587.776 104.803H589.769V222.265H514.908V220.272L587.776 104.803ZM0 223.51V260.256H121.697V307.59H165.792V260.256H198.427V222.265H165.792V52.4873H138.886H122.195H108.244L0 223.51ZM122.195 104.803H120.202L47.3334 220.272V222.265H122.195V104.803Z"
-          fill="#2563eb"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M332.517 312.448C312.006 312.448 294.402 307.258 279.703 296.878C265.088 286.415 253.836 271.343 245.947 251.662C238.141 231.898 234.238 208.107 234.238 180.288C234.321 152.469 238.266 128.802 246.072 109.288C253.961 89.6901 265.213 74.7427 279.828 64.4457C294.526 54.1486 312.089 49 332.517 49C352.946 49 370.509 54.1486 385.207 64.4457C399.905 74.7427 411.157 89.6901 418.963 109.288C426.852 128.886 430.797 152.552 430.797 180.288C430.797 208.19 426.852 232.023 418.963 251.786C411.157 271.467 399.905 286.498 385.207 296.878C370.592 307.258 353.029 312.448 332.517 312.448ZM467.574 260.256V223.51L575.818 52.4873H589.769H606.461H633.366V222.265H666.001V260.256H633.366V307.59H589.271V260.256H467.574ZM587.776 104.803H589.769V222.265H514.908V220.272L587.776 104.803ZM0 223.51V260.256H121.697V307.59H165.792V260.256H198.427V222.265H165.792V52.4873H138.886H122.195H108.244L0 223.51ZM122.195 104.803H120.202L47.3334 220.272V222.265H122.195V104.803Z"
-          fill="url(#paint1_linear_383_360)"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M332.517 312.448C312.006 312.448 294.402 307.258 279.703 296.878C265.088 286.415 253.836 271.343 245.947 251.662C238.141 231.898 234.238 208.107 234.238 180.288C234.321 152.469 238.266 128.802 246.072 109.288C253.961 89.6901 265.213 74.7427 279.828 64.4457C294.526 54.1486 312.089 49 332.517 49C352.946 49 370.509 54.1486 385.207 64.4457C399.905 74.7427 411.157 89.6901 418.963 109.288C426.852 128.886 430.797 152.552 430.797 180.288C430.797 208.19 426.852 232.023 418.963 251.786C411.157 271.467 399.905 286.498 385.207 296.878C370.592 307.258 353.029 312.448 332.517 312.448ZM467.574 260.256V223.51L575.818 52.4873H589.769H606.461H633.366V222.265H666.001V260.256H633.366V307.59H589.271V260.256H467.574ZM587.776 104.803H589.769V222.265H514.908V220.272L587.776 104.803ZM0 223.51V260.256H121.697V307.59H165.792V260.256H198.427V222.265H165.792V52.4873H138.886H122.195H108.244L0 223.51ZM122.195 104.803H120.202L47.3334 220.272V222.265H122.195V104.803Z"
-          fill="url(#paint2_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M682 275.2L666 260.2V222.3L682 237.3V275.2Z"
-          fill="url(#paint3_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M649.3 275.2L633.4 260.3V307.6L649.4 322.6L649.3 275.2Z"
-          fill="url(#paint4_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M214.5 275.2L198.5 260.2V222.3L214.5 237.3V275.2Z"
-          fill="url(#paint5_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M181.8 275.2L165.9 260.3V307.6L181.9 322.6L181.8 275.2Z"
-          fill="url(#paint6_linear_383_360)"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M331.25 231.499C327.923 231.463 320.017 230.73 312.998 228C311.867 227.56 310.665 227.049 309.401 226.512C300.605 222.773 288.801 217.757 276.998 226.5C263.498 236.5 273.998 264 289.998 263.5C297.371 263.27 304.424 262.827 310.964 262.416C318.51 261.943 325.372 261.512 331.25 261.5C337.128 261.512 343.99 261.943 351.536 262.416C358.076 262.827 365.129 263.27 372.502 263.5C388.502 264 399.002 236.5 385.502 226.5C373.699 217.757 361.895 222.773 353.099 226.512C351.835 227.049 350.633 227.56 349.502 228C342.483 230.73 334.577 231.463 331.25 231.499Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M309.009 227.432C300.15 223.667 288.886 218.938 277.593 227.304C271.353 231.926 270.511 240.735 273.375 248.595C276.242 256.466 282.588 262.731 289.966 262.501C297.321 262.271 304.359 261.829 310.9 261.419L310.924 261.417C318.452 260.945 325.339 260.512 331.247 260.5L331.251 260.5C337.159 260.512 344.046 260.945 351.574 261.417L351.598 261.419C358.14 261.829 365.178 262.271 372.532 262.501C379.91 262.731 386.257 256.466 389.124 248.595C391.988 240.735 391.146 231.926 384.906 227.304C373.613 218.938 362.349 223.667 353.49 227.432L353.481 227.436C352.223 227.971 351.009 228.487 349.864 228.932C342.697 231.719 334.663 232.463 331.26 232.499L331.249 232.499L331.239 232.499C327.836 232.463 319.801 231.719 312.635 228.932C311.489 228.487 310.275 227.971 309.018 227.436L309.009 227.432ZM309.684 225.546L309.791 225.592C311.059 226.13 312.246 226.635 313.36 227.068C320.224 229.738 327.992 230.463 331.249 230.499C334.506 230.463 342.274 229.738 349.139 227.068C350.253 226.635 351.44 226.13 352.708 225.592L352.814 225.546C361.54 221.837 373.833 216.612 386.096 225.697C393.357 231.074 394.014 241.015 391.003 249.28C387.996 257.535 381.092 264.769 372.47 264.5C365.082 264.269 358.015 263.825 351.479 263.415L351.473 263.415C343.918 262.941 337.09 262.512 331.249 262.5C325.409 262.512 318.58 262.941 311.026 263.415L311.019 263.415C304.483 263.825 297.417 264.269 290.029 264.5C281.407 264.769 274.503 257.535 271.495 249.28C268.484 241.015 269.142 231.074 276.402 225.697C288.666 216.612 300.958 221.837 309.684 225.546Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M414.28 128.976C413.714 127.716 412.234 127.154 410.975 127.72C405.121 130.35 395.947 135.089 387.352 140.806C378.867 146.45 370.511 153.327 366.792 160.327L366.568 160.748C366.068 161.689 366.395 162.858 367.311 163.404L367.719 163.647C376.372 168.806 396.069 180.378 405.343 185.217C406.567 185.855 408.077 185.381 408.716 184.157C409.355 182.932 408.88 181.422 407.656 180.784C400.466 177.033 386.793 169.102 377.07 163.375C388.24 162.748 405.225 162.695 419.009 165.452C420.363 165.722 421.68 164.844 421.951 163.49C422.222 162.137 421.344 160.819 419.99 160.549C404.454 157.441 385.272 157.77 374.019 158.557C377.788 153.981 383.647 149.276 390.122 144.969C398.452 139.428 407.378 134.817 413.024 132.281C414.283 131.715 414.846 130.235 414.28 128.976Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M360.732 110.845C359.542 111.545 359.144 113.077 359.844 114.267C364.217 121.7 371.757 126.032 375.093 127.33C376.38 127.83 377.829 127.193 378.329 125.906C378.83 124.619 378.192 123.17 376.905 122.67C374.242 121.634 367.782 117.899 364.154 111.732C363.454 110.542 361.922 110.145 360.732 110.845Z"
-          fill="#111928"
-        />
-        <path
-          d="M402.898 197.971C402.169 192.657 399.252 190 396.974 190C390.594 190 393.328 196.199 390.139 204.613C386.949 213.026 387.86 223.211 397.885 221.882C407.91 220.554 403.809 204.613 402.898 197.971Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M401.286 191.353C400.054 189.873 398.497 189 396.974 189C395.218 189 393.889 189.43 392.945 190.404C392.042 191.336 391.642 192.621 391.379 193.958C391.219 194.768 391.1 195.629 390.974 196.541C390.664 198.781 390.31 201.339 389.204 204.258C387.567 208.575 386.926 213.472 388.103 217.201C388.698 219.09 389.777 220.724 391.469 221.777C393.159 222.828 395.344 223.228 398.017 222.874C400.84 222.5 402.734 221.065 403.896 219.013C405.026 217.018 405.434 214.5 405.493 211.942C405.581 208.076 404.862 203.785 404.319 200.545C404.148 199.521 403.994 198.602 403.889 197.835C403.503 195.026 402.53 192.849 401.286 191.353ZM399.748 192.632C400.714 193.793 401.563 195.602 401.907 198.107C402.026 198.971 402.191 199.961 402.372 201.038C402.91 204.257 403.577 208.242 403.493 211.896C403.438 214.32 403.048 216.451 402.156 218.027C401.296 219.545 399.943 220.601 397.754 220.891C395.414 221.201 393.726 220.826 392.525 220.079C391.326 219.332 390.497 218.143 390.01 216.6C389.022 213.466 389.521 209.064 391.074 204.967C392.267 201.821 392.674 198.884 392.992 196.592C393.109 195.748 393.214 194.992 393.341 194.345C393.59 193.08 393.903 192.289 394.381 191.796C394.819 191.345 395.54 191 396.974 191C397.729 191 398.769 191.456 399.748 192.632Z"
-          fill="#111928"
-        />
-        <path
-          d="M411.698 245.714C410.877 239.238 407.596 236 405.033 236C397.856 236 400.932 243.555 397.343 253.809C393.755 264.063 394.78 276.476 406.058 274.857C417.337 273.238 412.723 253.809 411.698 245.714Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M409.812 237.82C408.456 236.054 406.733 235 405.033 235C403.055 235 401.588 235.528 400.563 236.674C399.589 237.763 399.152 239.268 398.859 240.881C398.683 241.844 398.551 242.878 398.41 243.982C398.06 246.721 397.656 249.89 396.4 253.479C394.568 258.711 393.868 264.606 395.166 269.065C395.82 271.313 397.004 273.261 398.875 274.522C400.753 275.788 403.197 276.278 406.2 275.846C409.367 275.392 411.456 273.655 412.728 271.222C413.97 268.845 414.426 265.831 414.492 262.735C414.59 258.055 413.789 252.87 413.179 248.924C412.985 247.668 412.81 246.537 412.69 245.589C412.262 242.212 411.184 239.606 409.812 237.82ZM408.226 239.038C409.34 240.489 410.313 242.74 410.706 245.84C410.837 246.878 411.022 248.075 411.223 249.38C411.83 253.307 412.587 258.209 412.492 262.693C412.429 265.668 411.988 268.32 410.956 270.295C409.953 272.213 408.389 273.512 405.916 273.867C403.28 274.245 401.367 273.79 399.993 272.864C398.612 271.933 397.649 270.44 397.086 268.506C395.949 264.6 396.53 259.161 398.287 254.14C399.618 250.337 400.069 246.813 400.426 244.025C400.559 242.986 400.679 242.049 400.826 241.238C401.11 239.681 401.473 238.656 402.054 238.007C402.582 237.416 403.422 237 405.033 237C405.897 237 407.095 237.565 408.226 239.038Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M251.22 128.976C251.786 127.716 253.266 127.154 254.525 127.72C260.379 130.35 269.553 135.089 278.148 140.806C286.633 146.45 294.989 153.327 298.708 160.327L298.932 160.748C299.432 161.689 299.105 162.858 298.189 163.404L297.781 163.647C289.128 168.806 269.431 180.378 260.157 185.217C258.933 185.855 257.423 185.381 256.784 184.157C256.145 182.932 256.62 181.422 257.844 180.784C265.034 177.033 278.707 169.102 288.43 163.375C277.26 162.748 260.275 162.695 246.491 165.452C245.137 165.722 243.82 164.844 243.549 163.49C243.278 162.137 244.156 160.819 245.51 160.549C261.046 157.441 280.228 157.77 291.481 158.557C287.712 153.981 281.853 149.276 275.378 144.969C267.048 139.428 258.122 134.817 252.476 132.281C251.217 131.715 250.654 130.235 251.22 128.976Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M304.768 110.845C305.958 111.545 306.356 113.077 305.656 114.267C301.283 121.7 293.743 126.032 290.407 127.33C289.12 127.83 287.671 127.193 287.171 125.906C286.67 124.619 287.308 123.17 288.595 122.67C291.258 121.634 297.718 117.899 301.346 111.732C302.046 110.542 303.578 110.145 304.768 110.845Z"
-          fill="#111928"
-        />
-        <path
-          d="M262.602 197.971C263.331 192.657 266.248 190 268.526 190C274.906 190 272.172 196.199 275.361 204.613C278.551 213.026 277.64 223.211 267.615 221.882C257.59 220.554 261.691 204.613 262.602 197.971Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M264.214 191.353C265.446 189.873 267.003 189 268.526 189C270.282 189 271.611 189.43 272.555 190.404C273.458 191.336 273.858 192.621 274.121 193.958C274.281 194.768 274.4 195.629 274.526 196.541C274.836 198.781 275.19 201.339 276.296 204.258C277.933 208.575 278.574 213.472 277.397 217.201C276.802 219.09 275.723 220.724 274.031 221.777C272.341 222.828 270.156 223.228 267.483 222.874C264.66 222.5 262.766 221.065 261.604 219.013C260.474 217.018 260.066 214.5 260.007 211.942C259.919 208.076 260.638 203.785 261.181 200.545C261.352 199.521 261.506 198.602 261.611 197.835C261.997 195.026 262.97 192.849 264.214 191.353ZM265.752 192.632C264.786 193.793 263.937 195.602 263.593 198.107C263.474 198.971 263.309 199.961 263.128 201.038C262.59 204.257 261.923 208.242 262.007 211.896C262.062 214.32 262.452 216.451 263.344 218.027C264.204 219.545 265.557 220.601 267.746 220.891C270.086 221.201 271.774 220.826 272.975 220.079C274.174 219.332 275.003 218.143 275.49 216.6C276.478 213.466 275.979 209.064 274.426 204.967C273.233 201.821 272.826 198.884 272.508 196.592C272.391 195.748 272.286 194.992 272.159 194.345C271.91 193.08 271.597 192.289 271.119 191.796C270.681 191.345 269.96 191 268.526 191C267.771 191 266.731 191.456 265.752 192.632Z"
-          fill="#111928"
-        />
-        <path
-          d="M253.802 245.714C254.623 239.238 257.904 236 260.467 236C267.644 236 264.568 243.555 268.157 253.809C271.745 264.063 270.72 276.476 259.442 274.857C248.163 273.238 252.777 253.809 253.802 245.714Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M255.688 237.82C257.044 236.054 258.767 235 260.467 235C262.445 235 263.912 235.528 264.937 236.674C265.911 237.763 266.348 239.268 266.641 240.881C266.817 241.844 266.949 242.878 267.09 243.982C267.44 246.721 267.844 249.89 269.1 253.479C270.932 258.711 271.632 264.606 270.334 269.065C269.68 271.313 268.496 273.261 266.625 274.522C264.747 275.788 262.303 276.278 259.3 275.846C256.133 275.392 254.044 273.655 252.772 271.222C251.53 268.845 251.074 265.831 251.008 262.735C250.91 258.055 251.711 252.87 252.321 248.924C252.515 247.668 252.69 246.537 252.81 245.589C253.238 242.212 254.316 239.606 255.688 237.82ZM257.274 239.038C256.16 240.489 255.187 242.74 254.794 245.84C254.663 246.878 254.478 248.075 254.277 249.38C253.67 253.307 252.913 258.209 253.008 262.693C253.071 265.668 253.512 268.32 254.544 270.295C255.547 272.213 257.111 273.512 259.584 273.867C262.22 274.245 264.133 273.79 265.507 272.864C266.888 271.933 267.851 270.44 268.414 268.506C269.551 264.6 268.97 259.161 267.213 254.14C265.882 250.337 265.431 246.813 265.074 244.025C264.941 242.986 264.821 242.049 264.674 241.238C264.39 239.681 264.027 238.656 263.446 238.007C262.918 237.416 262.078 237 260.467 237C259.603 237 258.405 237.565 257.274 239.038Z"
-          fill="#111928"
-        />
-        <defs>
-          <linearGradient
-            id="paint0_linear_383_360"
-            x1="341.567"
-            y1="167.672"
-            x2="341"
-            y2="419.179"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="white" stopOpacity="0" />
-            <stop offset="1" stopColor="white" />
-          </linearGradient>
-          <linearGradient
-            id="paint1_linear_383_360"
-            x1="333"
-            y1="202.5"
-            x2="333"
-            y2="463"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#111928" stopOpacity="0" />
-            <stop offset="1" stopColor="#111928" />
-          </linearGradient>
-          <linearGradient
-            id="paint2_linear_383_360"
-            x1="333"
-            y1="204"
-            x2="333"
-            y2="-60.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#c8d8fa" stopOpacity="0" />
-            <stop offset="1" stopColor="#c8d8fa" />
-          </linearGradient>
-          <linearGradient
-            id="paint3_linear_383_360"
-            x1="674"
-            y1="222.5"
-            x2="674"
-            y2="275.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-          <linearGradient
-            id="paint4_linear_383_360"
-            x1="641.25"
-            y1="260.5"
-            x2="641.25"
-            y2="322.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-          <linearGradient
-            id="paint5_linear_383_360"
-            x1="206.5"
-            y1="222.5"
-            x2="206.5"
-            y2="275.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-          <linearGradient
-            id="paint6_linear_383_360"
-            x1="173.75"
-            y1="260.5"
-            x2="173.75"
-            y2="322.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-        </defs>
-      </svg>
-
+      <img
+        src="/404.png"
+        style={{ width: "30%", height: "auto" }}
+        alt="404 Not Found"
+      ></img>
       {/* Page number and title */}
-      <h2 className="text-2xl font-bold mb-4">Page Not Found</h2>
+      <h2 className="text-2xl font-bold mb-4 mt-4">Page Not Found</h2>
 
       {/* Description text */}
       <p className="text-center text-gray-700 mb-6">
diff --git a/Frontend/vite.config.js b/Frontend/vite.config.js
index 3c281ad..c1816d7 100644
--- a/Frontend/vite.config.js
+++ b/Frontend/vite.config.js
@@ -4,6 +4,13 @@ import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss(),
+  plugins: [
+    react(),
+    tailwindcss(),
   ],
+  server: {
+    host: 'localhost', 
+    port: 5173,
+  },
 })
+