diff --git a/Benjamin/app/About/page.tsx b/Benjamin/app/About/page.tsx
index 39cd519..820f5e8 100644
--- a/Benjamin/app/About/page.tsx
+++ b/Benjamin/app/About/page.tsx
@@ -1,12 +1,13 @@
+
 import LearnAboutUs from "@/components/about us/learnAboutUs";
 import Features from "@/components/features";
 import SeperatorHeading from "@/components/ui/seperatorHeading";
 
 const About = () => {
   return (
-    <>
-      <div className="h-full">
-        <div className="text-white flex items-center justify-center bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
+    <div className="h-full   dark:bg-DarkGray">
+      <div className="h-full ">
+        <div className="text-white flex items-center justify-center  bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
           <div className=" text-4xl md:text-7xl text-gray-200 font-bold font-handlee">About us</div>
         </div>
       </div>
@@ -16,7 +17,7 @@ const About = () => {
       <div className="w-full border-b border-Green my-10"/>
       <Features/>
 
-    </>
+    </div>
   );
 };
 
diff --git a/Benjamin/app/Categories/page.tsx b/Benjamin/app/Categories/page.tsx
index f6aa095..bfe9942 100644
--- a/Benjamin/app/Categories/page.tsx
+++ b/Benjamin/app/Categories/page.tsx
@@ -3,20 +3,20 @@ import { Button } from "@/components/ui/button";
 
 const Category = () => {
   return (
-    <>
+    <div className="h-full   dark:bg-DarkGray">
       <div className="h-full">
-        <div className="text-white flex items-center justify-center bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
+        <div className="text-white flex items-center justify-center bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
           <div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-center lg:text-start text-gray-200 font-extrabold font-handlee">Our Categories</div>
         </div>
       </div>
       {/* <SeperatorHeading label="Trending Deals"/> */}
       <Stores />
       <div className="flex items-center justify-center flex-col px-20">
-        <Button className="rounded-full bg-Green h-10 w-40 flex items-center justify-center text-lg m-10">
+        <Button className="rounded-full bg-customTeal dark:bg-Green h-10 w-40 flex items-center justify-center text-lg m-10">
           Load more
         </Button>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/Benjamin/app/Teams/page.tsx b/Benjamin/app/Teams/page.tsx
index 368c531..4951df6 100644
--- a/Benjamin/app/Teams/page.tsx
+++ b/Benjamin/app/Teams/page.tsx
@@ -1,24 +1,29 @@
-import ReviewsCarousel from "@/components/Testimonials";
-import SeperatorHeading from "@/components/ui/seperatorHeading";
-import TeamMember from "@/components/ui/teamMember";
+
+import UnderConstruction from "@/components/ui/underConstruction";
 
 const Teams = () => {
   return (
-    <>
-      <div className="h-full">
-        <div className="text-white flex items-center justify-center bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
-          <div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-gray-200 text-center lg:text-start font-extrabold font-handlee">Our Teams</div>
-        </div>
-      </div>
-      <SeperatorHeading label="Ezyshop Founder"/>
-        <div className="flex items-center justify-center my-10 text-4xl font-bold text-Green font-handlee">Meet Our Founder</div>
-      <TeamMember/>
+    <UnderConstruction/>
+    
+    // <div className="h-full pb-20  dark:bg-DarkGray">
+    //   <div className="h-full">
+    //     <div className="text-white flex items-center justify-center  bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
+    //       <div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-gray-200 text-center lg:text-start font-extrabold font-handlee">
+    //         Our Teams
+    //       </div>
+    //     </div>
+    //   </div>
+
+      
+      // <SeperatorHeading label="Ezyshop Founder"/>
+      //   <div className="flex items-center justify-center my-10 text-4xl font-bold text-cus dark:text-Green font-handlee">Meet Our Founder</div>
+      // <TeamMember/>
 
-      <SeperatorHeading label="Testimonials"/>
-      <div className="flex items-center justify-center my-10 text-4xl font-bold text-Green font-handlee">Customer Reviews!</div>
+      // <SeperatorHeading label="Testimonials"/>
+      // <div className="flex items-center justify-center my-10 text-4xl font-bold text-Green font-handlee">Customer Reviews!</div>
 
-      <ReviewsCarousel/>
-    </>
+      // <ReviewsCarousel/>
+    // </div>
   );
 };
 
diff --git a/Benjamin/app/layout.tsx b/Benjamin/app/layout.tsx
index b8d83b0..7135583 100644
--- a/Benjamin/app/layout.tsx
+++ b/Benjamin/app/layout.tsx
@@ -29,7 +29,7 @@ export default function RootLayout({
           referrerPolicy="no-referrer"
         />
       </head>
-      <body className={`${font.className},h-screen bg-DarkGray`}>
+      <body className={`${font.className},h-screen `}>
         {/* <ModalProvider/> */}
         {/* <ToasterProvider/> */}
         <Providers>
diff --git a/Benjamin/app/page.tsx b/Benjamin/app/page.tsx
index 9156a1a..5b84ecc 100644
--- a/Benjamin/app/page.tsx
+++ b/Benjamin/app/page.tsx
@@ -1,16 +1,16 @@
-"use client"
+
 import Features from "@/components/features";
 import Stores from "@/components/stores";
 import Hero from "@/components/ui/Hero";
 import SeperatorHeading from "@/components/ui/seperatorHeading";
 import LearnAboutUs from "@/components/about us/learnAboutUs";
-import { useTheme } from "@/context/themeProvider";
+// import { useTheme } from "@/context/themeProvider";
 
 export default function Home() {
-  const { theme} = useTheme() || {theme:"light"} // Get the current theme and toggle function
+  // const { theme} = useTheme() || {theme:"light"} // Get the current theme and toggle function
 
   return (
-    <div className={`h-full ${theme === 'dark' ? 'bg-DarkGray' : 'bg-white'}`}>
+    <div className={`h-full dark:bg-DarkGray`}>
       <Hero />
       <SeperatorHeading label="Learn About us" />
 
diff --git a/Benjamin/components/main-nav.tsx b/Benjamin/components/main-nav.tsx
index 3f47d3d..dac73d1 100644
--- a/Benjamin/components/main-nav.tsx
+++ b/Benjamin/components/main-nav.tsx
@@ -76,7 +76,7 @@ export function MainNav({ className,theme }:MainNavProps) {
             href={route.href}
             className={cn(
               "font-nunito flex items-center gap-2 justify-center font-extrabold text-lg",
-              route.active ?`${theme==='dark'?'text-gray-200':'text-customTeal'}`:`${theme==='dark'?'text-gray-200':'text-customBlue'}`,
+              route.active ?`${theme==='dark'?'text-gray-500':'text-customTeal'}`:`${theme==='dark'?'text-gray-200':'text-customBlue'}`,
               theme=='dark'? `${'hover:text-gray-500'}`:`${'hover:text-customTeal'}`
             )}
           >
diff --git a/Benjamin/components/navbar.tsx b/Benjamin/components/navbar.tsx
index 020597c..ec6a477 100644
--- a/Benjamin/components/navbar.tsx
+++ b/Benjamin/components/navbar.tsx
@@ -11,7 +11,7 @@ const Navbar = () => {
   const { theme} = useTheme() || {theme:"light"} // Get the current theme and toggle function
   
   return (
-    <div className={`border-b w-full border-gray-900 ${theme === 'dark' ? 'bg-DarkGray' : 'bg-white'}`}>
+    <div className={`border-b dark:border-Green w-full border-gray-900 ${theme === 'dark' ? 'bg-DarkGray' : 'bg-white'}`}>
       <div className={`relative px-4 sm:px-6 lg:px-8 flex h-25 justify-between items-center ${theme === 'dark' ? 'text-white' : 'text-black'}`}>
         <div className="flex items-center">
           <Image
diff --git a/Benjamin/components/ui/underConstruction.tsx b/Benjamin/components/ui/underConstruction.tsx
new file mode 100644
index 0000000..e468e79
--- /dev/null
+++ b/Benjamin/components/ui/underConstruction.tsx
@@ -0,0 +1,19 @@
+import { Construction } from "lucide-react";
+
+const UnderConstruction = () => {
+  return (
+    <div className="h-screen dark:bg-DarkGray flex items-center justify-center w-full">
+      <div className="flex bg-customBlue dark:shadow-Green shadow-black shadow-2xl mx-10 lg:mx-60 rounded-lg gap-10 p-10  dark:bg-Yellow items-center justify-center">
+        <Construction className="h-40 w-40 lg:h-20 lg:w-20 text-customTeal  dark:text-Green" />
+        <div className="flex flex-col items-start font-handlee font-extrabold text-gray-200 dark:text-black text-2xl">
+          <div>
+            This page is under development. We apologise for the inconvinience{" "}
+          </div>
+          <div>Please check back soon.</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UnderConstruction;