diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6019884..4549f6a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "../styles/global.css";
 import {NextAuthProvider} from "../app/provider"
 import Navbar from "@/components/Navbar/page";
 import Footer from "@/components/Footer/page";
+import Preloader from "@/components/Preloader/page";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,6 +22,7 @@ export default function RootLayout({
     <html lang="en">
       <NextAuthProvider>
         <body className={inter.className}>
+          <Preloader/>
           <Navbar />
           {children}
           <Footer />
diff --git a/src/components/Navbar/page.tsx b/src/components/Navbar/page.tsx
index 0e34217..ef4bd88 100644
--- a/src/components/Navbar/page.tsx
+++ b/src/components/Navbar/page.tsx
@@ -3,9 +3,7 @@
 import Link from 'next/link'
 import React from 'react'
 import LoginButton from '../LoginButton/page'
-// import { MenuIcon } from 'lucide-react'
-import { RxHamburgerMenu } from "react-icons/rx";
-import { RxCross1 } from "react-icons/rx";
+import { MenuIcon } from 'lucide-react'
 
 const Navbar = () => {
     const [state, setState] = React.useState(false)
@@ -16,46 +14,39 @@ const Navbar = () => {
         { title: "Contact Us", path: "/ContactSection" },
     ]
     return (
-        <nav className="sticky top-0 z-99 bg-white w-full border-b-3 border-b-[#151d2c] border-2">
+        <nav className="bg-white w-full border-b md:border-0">
             <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:justify-between md:px-8">
                 <div className="flex items-center justify-between py-3 md:py-5 md:block">
                     <Link href="/">
                         <h1 className="text-3xl font-bold text-primary">OpenZone</h1>
                     </Link>
-                    <div className="md:hidden mr-3">
+                    <div className="md:hidden">
                         <button
                             className="text-gray-700 outline-none p-2 rounded-md focus:border-gray-400 focus:border"
                             onClick={() => setState(!state)}
                         >
-                           {state?<RxCross1 />:<RxHamburgerMenu/>}
+                            <MenuIcon />
                         </button>
                     </div>
                 </div>
-
+                
                 <div
-                    className={` pb-3  gap-2 mt-8  md:block md:pb-0 max-md:mt-0 md:mt-0 ${state ? "block absolute z-20 bg-white w-full p-0 left-0 mt-0" : "hidden"
+                    className={` pb-3 mt-8 md:block md:pb-0 md:mt-0 ${state ? "block" : "hidden"
                         }`}
                 >
-                    <div className="flex flex-col md:flex-row justify-center items-center space-y-8 md:space-x-8 md:space-y-0 pb-3 md:pb-0 md:mt-0">
-    <ul className="flex flex-col md:flex-row justify-center items-center md:space-y-0 md:space-x-6">
-        {menus.map((item, idx) => (
-            <li
-                key={idx}
-                className="text-gray-600 text-center  transition ease-in-out duration-300 hover:text-indigo-600 hover:bg-slate-200 px-4 py-2 rounded-lg"
-            >
-                <Link href={item.path}>{item.title}</Link>
-            </li>
-        ))}
-    </ul>
-    <div className="py-2 px-5 bg-black text-white rounded-md transition ease-in-out duration-200 hover:bg-slate-700">
-        <LoginButton />
-    </div>
-</div>
+                    <ul className="justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0">
+                        {menus.map((item, idx) => (
+                            <li key={idx} className="text-gray-600 hover:transition hover:text-indigo-600 hover:bg-slate-200 hover:p-2 duration-300 ease-in-out rounded-lg">
+                                <Link href={item.path}>{item.title}</Link>
+                            </li>
+                        ))}
 
+                        <li className='py-2 px-5 bg-black text-white rounded hover:transition duration-200 ease hover:bg-slate-700'><LoginButton /></li>
+                    </ul>
                 </div>
             </div>
         </nav>
     )
 }
 
-export default Navbar
\ No newline at end of file
+export default Navbar;
diff --git a/src/components/Preloader/page.tsx b/src/components/Preloader/page.tsx
new file mode 100644
index 0000000..6f7a2ef
--- /dev/null
+++ b/src/components/Preloader/page.tsx
@@ -0,0 +1,26 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+
+const Preloader: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => { 
+      setIsVisible(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <>
+      {isVisible && (
+        <div className="fixed inset-0 flex justify-center items-center bg-white z-50">
+          <div className="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-blue-900"></div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Preloader;
