diff --git a/Frontend/package.json b/Frontend/package.json
index 4c3b9f7..e0b3745 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.9",
+    "flowbite": "^3.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
diff --git a/Frontend/src/components/Footer.jsx b/Frontend/src/components/Footer.jsx
index 53c52e5..82cbe01 100644
--- a/Frontend/src/components/Footer.jsx
+++ b/Frontend/src/components/Footer.jsx
@@ -4,25 +4,12 @@ const Footer = () => {
       <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>
+            <img src="/image.png" alt="logo" className="h-auto w-16 drop-shadow-lg " />
           </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.
+        A mini project designed and engineering by Team 2025  <br />All rights reserved.
         </p>
       </div>
     </footer>
diff --git a/Frontend/src/pages/DrivethruLandingPage.jsx b/Frontend/src/pages/DrivethruLandingPage.jsx
index 93b0c37..850ac35 100644
--- a/Frontend/src/pages/DrivethruLandingPage.jsx
+++ b/Frontend/src/pages/DrivethruLandingPage.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Footer from "../components/Footer";
+
 {
   /* <img src="vector.png" alt="" className="h-100" /> */
 }
@@ -9,26 +10,31 @@ const DrivethruLandingPage = () => {
     <div className="min-h-screen bg-white overflow-hidden">
       <div className="bg-white min-h-screen 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>
+
+          <div className="w-full bg-gray-100 shadow-md py-4 px-6 flex justify-between items-center mt-5">
+            <h1 className="text-xl font-bold">Drive-thru</h1>
+            <div className="flex space-x-6">
+              <a href="#features" className="text-gray-700 hover:text-black">Key Features</a>
+              <a href="#how-it-works" className="text-gray-700 hover:text-black">How It Works</a>
+            </div>
+          </div>
+
+          <div className="flex flex-col md:flex-row items-center  justify-between w-full min-h-screen">
+
+            {/* <div className="hidden md:block md:w-1/2 lg:w-3/5"></div> */}
+
+            <div className="flex items-center justify-center">
+              <img src="data:image/png;base64,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" alt="cloud image" className="flex justify-center my-6 mx-7 w-full h-auto" />
+            </div>
+
+
 
             <div className="w-full mt-70  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"
-                    />
-                  </svg>
-                </div>
+
+                <img src="/image.png" alt="logo" className="h-auto w-12" />
+
                 <h1 className="text-5xl font-bold text-black">Drive-thru</h1>
               </div>
 
@@ -67,7 +73,7 @@ const DrivethruLandingPage = () => {
             </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">
+              <div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg" id="features">
                 <h2 className="text-3xl font-bold mb-8">Key Features</h2>
 
                 <div className="space-y-6">
@@ -176,7 +182,7 @@ const DrivethruLandingPage = () => {
 
             {/* 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">
+              <div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg" id="how-it-works">
                 <h2 className="text-3xl font-bold mb-8">How It Works</h2>
 
                 <div className="space-y-6">