diff --git a/Benjamin/app/(auth)/login/page.tsx b/Benjamin/app/(auth)/login/page.tsx
index 6ce563c..e813906 100644
--- a/Benjamin/app/(auth)/login/page.tsx
+++ b/Benjamin/app/(auth)/login/page.tsx
@@ -19,7 +19,7 @@ const Login = () => {
     toast.error(error);
     setError("");
   }
-
+// IMP: Dont remove the below comments!!!!
   // const handleSubmit = async (e: React.FormEvent) => {
   //   setloading(true)
   //   e.preventDefault();
@@ -43,27 +43,27 @@ const Login = () => {
   const [isResetOpen, setIsResetOpen] = useState(false);
 
   return (
-    <>
+    <div className="dark:bg-DarkGray ">
       {/* <div className="bg-slate-700 h-100 w-100">{switchCss ? "1" : "0"}</div>
       <Button onClick={() => setSwitchCss(!switchCss)}>Toggle CSS</Button> */}
       <div className="flex h-screen w-full items-center justify-center">
-        <div className="flex rounded-lg justify-between shadow-xl relative lg:h-4/6 lg:w-2/4 border overflow-hidden">
+        <div className="flex rounded-2xl justify-between shadow-xl shadow-black dark:shadow-Green relative lg:h-4/6 lg:w-2/4 border overflow-hidden">
           {/* First background div */}
           <div
-            className={`w-full h-full absolute left-60 bottom-[9.5rem] rotate-45 transition-opacity duration-1000 ease-in-out bg-gradient-to-r from-Green to-Yellow ${
+            className={`w-full h-full absolute left-60 bottom-[9.5rem] rotate-45 transition-opacity duration-1000 ease-in-out bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow ${
               switchCss ? "opacity-100" : "opacity-0"
             }`}
           ></div>
           {/* Second background div */}
           <div
-            className={`w-full h-full absolute right-60 bottom-[9.5rem] -rotate-45 transition-opacity duration-1000 ease-in-out bg-gradient-to-r from-Green to-Yellow ${
+            className={`w-full h-full absolute right-60 bottom-[9.5rem] -rotate-45 transition-opacity duration-1000 ease-in-out bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow ${
               !switchCss ? "opacity-100" : "opacity-0"
             }`}
           ></div>
 
           {switchCss && !isResetOpen && (
             <div className="flex flex-col z-10 items-center justify-start pt-24  pr-14 gap-4 w-2/4">
-              <div className="font-nunito text-4xl text-Green font-extrabold">
+              <div className="font-nunito text-4xl text-customTeal dark:text-Green font-extrabold">
                 Login
               </div>
               <form
@@ -79,7 +79,7 @@ const Login = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                   />
-                  <User className="h-7 w-7 text-Yellow" />
+                  <User className="h-7 w-7 text-customTeal dark:text-Yellow" />
                 </div>
                 <div className="flex items-center w-4/5 justify-center">
                   <Input
@@ -89,26 +89,26 @@ const Login = () => {
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                   />
-                  <Lock className="h-7 w-7 text-Yellow" />
+                  <Lock className="h-7 w-7 text-customTeal dark:text-Yellow" />
                 </div>
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="rounded-full bg-Green font-bold h-10 w-4/5 disabled"
+                  className="rounded-full bg-customTeal dark:bg-Green font-bold h-10 w-4/5 disabled"
                 >
                   {loading?<Spinner/>:"Login"}
                 </Button>
               </form>
               <div
-                className="text-Green cursor-pointer"
+                className="text-customTeal dark:text-Green cursor-pointer"
                 onClick={() => setIsResetOpen(!isResetOpen)}
               >
                 Forgot Password?
               </div>
-              <div className="flex items-center justify-center gap-2">
+              <div className="flex items-center dark:text-gray-500 justify-center gap-2">
                 Don&apos;t have an account?
                 <div
-                  className="text-Green cursor-pointer"
+                  className="text-customTeal dark:text-Green cursor-pointer"
                   onClick={() => setSwitchCss(!switchCss)}
                 >
                   {" "}
@@ -120,7 +120,7 @@ const Login = () => {
 
           {switchCss && isResetOpen && (
             <div className="flex flex-col z-10 items-center justify-start pt-32  pr-14 gap-4 w-2/4">
-              <div className="font-nunito text-4xl font-extrabold">
+              <div className="font-nunito text-4xl text-customTeal dark:text-Green font-extrabold">
                 Forgot Password
               </div>
               <div className="flex items-center gap-2 w-4/5 justify-center">
@@ -129,13 +129,13 @@ const Login = () => {
                   type="text"
                   placeholder="Email"
                 />
-                <Mail className="h-7 w-7 text-Yellow" />
+                <Mail className="h-7 w-7 text-customTeal  dark:text-Yellow" />
               </div>
-              <Button className="rounded-full font-bold h-10 w-4/5 bg-Green">
+              <Button className="rounded-full font-bold h-10 w-4/5 bg-customTeal dark:bg-Green">
                 Send reset link
               </Button>
               <div
-                className="text-Green cursor-pointer"
+                className="text-customTeal dark:text-Green cursor-pointer"
                 onClick={() => setIsResetOpen(!isResetOpen)}
               >
                 Back to Login
@@ -159,7 +159,7 @@ const Login = () => {
 
           {!switchCss && (
             <div className="flex flex-col z-10 items-center justify-start pt-24  pl-14 gap-4 w-2/4">
-              <div className="font-nunito text-4xl text-Green font-extrabold">
+              <div className="font-nunito text-4xl text-customTeal dark:text-Green font-extrabold">
                 Sign Up
               </div>
               <div className="flex items-center w-4/5 justify-center">
@@ -168,7 +168,7 @@ const Login = () => {
                   type="text"
                   placeholder="Username"
                 />
-                <User className="h-7 w-7 text-Yellow" />
+                <User className="h-7 w-7 text-customTeal dark:text-Yellow" />
               </div>
               <div className="flex items-center w-4/5 justify-center">
                 <Input
@@ -176,7 +176,7 @@ const Login = () => {
                   type="password"
                   placeholder="Enter Password"
                 />
-                <Lock className="h-7 w-7 text-Yellow" />
+                <Lock className="h-7 w-7 text-customTeal dark:text-Yellow" />
               </div>
               <div className="flex items-center w-4/5 justify-center">
                 <Input
@@ -184,15 +184,15 @@ const Login = () => {
                   type="password"
                   placeholder="Confirm Password"
                 />
-                <Lock className="h-7 w-7 text-Yellow" />
+                <Lock className="h-7 w-7 text-customTeal dark:text-Yellow" />
               </div>
-              <Button className="rounded-full h-10 w-4/5 font-bold bg-Green">
+              <Button className="rounded-full h-10 w-4/5 font-bold bg-customTeal dark:bg-Green">
                 Sign Up
               </Button>
-              <div className="flex items-center justify-center gap-2">
+              <div className="flex items-center dark:text-gray-500 justify-center gap-2">
                 Already have an account?
                 <div
-                  className="text-Green cursor-pointer"
+                  className="text-customTeal dark:text-Green cursor-pointer"
                   onClick={() => setSwitchCss(!switchCss)}
                 >
                   {" "}
@@ -204,7 +204,7 @@ const Login = () => {
         </div>
       </div>
       <Toaster />
-    </>
+    </div>
   );
 };
 
diff --git a/Benjamin/app/Cart/components/cart-item.tsx b/Benjamin/app/Cart/components/cart-item.tsx
index 29f86a9..c7205e2 100644
--- a/Benjamin/app/Cart/components/cart-item.tsx
+++ b/Benjamin/app/Cart/components/cart-item.tsx
@@ -15,13 +15,14 @@ const CartItem:React.FC<orderItemProps> = ({
     // }
 
     return ( 
-        <li className="flex py-6 border-b">
-            <div className="relative h-24 w-24 rounded-md overflow-hidden sm:h-48 sm:w-48">
+        <li className="flex py-6 h-40 border-b">
+            <div className="relative rounded-md overflow-hidden sm:h-48 sm:w-48">
                 <Image
-                    fill
+                    width={1000}
+                    height={1000}
                     src={item.image}
                     alt="product image"
-                    className="object-cover object-center"
+                    className="object-cover h-32 w-32 rounded-lg object-center"
                 />
             </div>
             <div className="relative ml-4 flex flex-1 flex-col justify-between sm:ml-6">
@@ -33,12 +34,12 @@ const CartItem:React.FC<orderItemProps> = ({
                 </div>
                 <div className="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
                     <div className="flex justify-between">
-                        <p className="text-lg font-semibold text-black">
+                        <p className="text-lg font-semibold dark:text-gray-200">
                             {item.name}
                         </p>
                     </div>
                     <div className="mt-1 flex text-sm">
-                        <p className="text-gray-500">
+                        <p className="text-gray-500 dark:text-gray-200">
                             {/* haha */}
                             {item.variant}
                         </p>
@@ -47,7 +48,7 @@ const CartItem:React.FC<orderItemProps> = ({
                             {item.count}
                         </p>
                     </div>
-                    <div>₹{item.price}</div>
+                    <div className="dark:text-gray-200">₹{item.price}</div>
 
                 </div>
             </div>
diff --git a/Benjamin/app/Cart/components/summary.tsx b/Benjamin/app/Cart/components/summary.tsx
index 9fe5ff7..4f48cd7 100644
--- a/Benjamin/app/Cart/components/summary.tsx
+++ b/Benjamin/app/Cart/components/summary.tsx
@@ -31,11 +31,12 @@ const Summary = () => {
             lg:col-span-5
             lg:mt-0
             lg:p-8
+            dark:bg-gray-700
             "
     >
-      <div>
-        <h2 className="text-lg font-bold text-Green pb-2">Order Summary</h2>
-        <h3 className="text-m font-medium text-gray-900 py-4 border-t">Your Details</h3>
+      <div >
+        <h2 className="text-lg font-bold dark:bg-gray-700 text-customTeal dark:text-Green pb-2">Order Summary</h2>
+        <h3 className="text-m font-medium  py-4 border-t">Your Details</h3>
         {/* Each Inputbox component handles its respective field */}
         <div className="lg:grid gap-2 grid-cols-2">
           <Input
@@ -68,7 +69,7 @@ const Summary = () => {
            ₹{566}
         </div>
       </div>
-      <Button className="w-full bg-Green mt-6">
+      <Button className="w-full bg-customTeal dark:bg-Green mt-6">
         Checkout
       </Button>
     </div>
diff --git a/Benjamin/app/Cart/page.tsx b/Benjamin/app/Cart/page.tsx
index 18b2741..e3d2c29 100644
--- a/Benjamin/app/Cart/page.tsx
+++ b/Benjamin/app/Cart/page.tsx
@@ -60,9 +60,9 @@ const CartPage = () => {
   if (!isMounted) return null;
 
   return (
-    <div className="bg-white">
+    <div className="dark:bg-DarkGray">
       <div className="px-4 py-5 sm:px-6 lg:px-8">
-        <h1 className="text-3xl font-bold text-Green">Shopping Cart</h1>
+        <h1 className="text-3xl font-bold text-customTeal dark:text-Green">Shopping Cart</h1>
         <div className="mt-5 lg:grid lg:grid-cols-12 lg:items-start gap-x-12">
           <div className="lg:col-span-7">
             {/* {cart.items.length===0&&<NoResults/>} */}
diff --git a/Benjamin/app/Contact/page.tsx b/Benjamin/app/Contact/page.tsx
index 3e5e3f7..cb15b42 100644
--- a/Benjamin/app/Contact/page.tsx
+++ b/Benjamin/app/Contact/page.tsx
@@ -4,22 +4,22 @@ import { Clock, Mail, MapPin, Phone } from "lucide-react";
 
 const Contact = () => {
   return (
-    <div className="mb-10">
+    <div className="pb-10 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 pb-20 p-24">
           <div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-center text-gray-200 lg:text-start font-extrabold font-handlee">
             Contact Us</div>
         </div>
       </div>
       <SeperatorHeading label="Get In Touch" />
-      <div className="text-Green text-3xl px-5 text-center lg:px-0 lg:text-center mb-10 lg:text-5xl font-bold  font-handlee">
+      <div className="text-customTeal dark:text-Green text-3xl px-5 text-center lg:px-0 lg:text-center mb-10 lg:text-5xl font-bold  font-handlee">
         Contact Us For Any Query
       </div>
 
       <div className="flex flex-col px-10 lg:grid lg:grid-cols-12 lg:gap-5 lg:px-32">
         <div className="col-span-7"><ContactUsFrom/></div>
         <div className="col-span-5">
-          <div className="text-md text-gray-200 mb-10">
+          <div className="text-md dark:text-gray-200 mb-10">
             Have a question or need assistance? We&apos;re here to help! Reach out to
             us for any inquiries regarding your orders, deliveries, or shopping
             experience with EzyShop. We&apos;re happy to assist you with all your
@@ -27,38 +27,38 @@ const Contact = () => {
           </div>
           <div className="flex items-start flex-col gap-4 justify-center">
             <div className="flex gap-7 items-center justify-center">
-              <div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
-                <MapPin className="h-5 w-5 text-Green" />
+              <div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
+                <MapPin className="h-5 w-5  dark:text-Green" />
               </div>
               <div className="flex flex-col gap-2">
-                <div className="text-Green text-xl font-handlee font-bold ">Address</div>
+                <div className="text-customTeal dark:text-Green text-xl font-handlee font-bold ">Address</div>
                 <div className="text-md text-gray-500 font-nutino ">Jaipur, Rajisthan</div>
               </div>
             </div>
             <div className="flex gap-7 items-center justify-center">
-              <div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
-                <Mail className="h-5 w-5 text-Green" />
+              <div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
+                <Mail className="h-5 w-5   dark:text-Green" />
               </div>
               <div className="flex flex-col gap-2">
-                <div className="text-Green text-xl font-handlee font-bold ">Email</div>
+                <div className=" text-customTeal dark:text-Green text-xl font-handlee font-bold ">Email</div>
                 <div className="text-md text-gray-500 font-nutino ">ezyshop@gmail.com</div>
               </div>
             </div>
             <div className="flex gap-7 items-center justify-center">
-              <div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
-                <Phone className="h-5 w-5 text-Green" />
+              <div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
+                <Phone className="h-5 w-5   dark:text-Green" />
               </div>
               <div className="flex flex-col gap-2">
-                <div className="text-Green text-xl font-handlee font-bold ">Phone</div>
+                <div className=" text-customTeal dark:text-Green text-xl font-handlee font-bold ">Phone</div>
                 <div className="text-md text-gray-500 font-nutino ">+91 7739317870</div>
               </div>
             </div>
             <div className="flex gap-7 items-center justify-center">
-              <div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
-                <Clock className="h-5 w-5 text-Green" />
+              <div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
+                <Clock className="h-5 w-5 dark:text-Green" />
               </div>
               <div className="flex flex-col gap-2">
-                <div className="text-Green text-xl font-handlee font-bold ">Opening Hours</div>
+                <div className="text-customTeal dark:text-Green text-xl font-handlee font-bold ">Opening Hours</div>
                 <div className="text-md text-gray-500 font-nutino ">Our platform is available 24/7. For customer support</div>
               </div>
             </div>
diff --git a/Benjamin/app/WishList/components/wishlistItem.tsx b/Benjamin/app/WishList/components/wishlistItem.tsx
index 2bab916..c277786 100644
--- a/Benjamin/app/WishList/components/wishlistItem.tsx
+++ b/Benjamin/app/WishList/components/wishlistItem.tsx
@@ -12,13 +12,13 @@ interface wishlistItemProps{
 // WishlistItem.js
 const WishlistItem:React.FC<wishlistItemProps> = ({ item }) => {
     return (
-      <div className="border max-w-[400px] p-4 rounded-lg shadow-md hover:shadow-lg transition">
+      <div className="border dark:border-gray-200 max-w-[400px] p-4 rounded-lg shadow-md hover:shadow-lg transition">
         <Image width={1000} height={1000} src={item.image} alt={item.name} className="w-full h-40 object-cover rounded" />
-        <h2 className="mt-2 text-xl font-semibold">{item.name}</h2>
+        <h2 className="mt-2 text-xl dark:text-gray-200 font-semibold">{item.name}</h2>
         <p className="text-lg text-gray-600">₹{item.price}</p>
         <div className="mt-4 flex justify-between">
-          <Button variant="outline">Remove</Button>
-          <Button variant={"default"} className="bg-Green">Move to Cart</Button>
+          <Button variant="outline" className="dark:text-gray-200">Remove</Button>
+          <Button variant={"default"} className= "bg-customTeal dark:bg-Green">Move to Cart</Button>
         </div>
       </div>
     );
diff --git a/Benjamin/app/WishList/page.tsx b/Benjamin/app/WishList/page.tsx
index f3806aa..9da8a28 100644
--- a/Benjamin/app/WishList/page.tsx
+++ b/Benjamin/app/WishList/page.tsx
@@ -19,8 +19,8 @@ const wishlistItems = [
 
 const Wishlist = () => {
   return (
-    <div className="h-full mb-10">
-      <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 pb-10">
+      <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 text-gray-200 lg:text-start font-extrabold font-handlee">
           Wish List
         </div>
@@ -35,7 +35,7 @@ const Wishlist = () => {
         ) : (
           <div className="text-center text-gray-500">
             <p>Your wishlist is empty!</p>
-            <Button className="mt-4">Continue Shopping</Button>
+            <Button className=" bg-Green mt-4">Continue Shopping</Button>
           </div>
         )}
       </div>
diff --git a/Benjamin/components/contactUsForm.tsx b/Benjamin/components/contactUsForm.tsx
index fc5e8ed..bd8ed37 100644
--- a/Benjamin/components/contactUsForm.tsx
+++ b/Benjamin/components/contactUsForm.tsx
@@ -9,7 +9,7 @@ const ContactUsFrom = () => {
             <Input placeholder="Your Email"/>
             <Input placeholder="Your Subject"/>
             <Textarea rows={5} placeholder="Message"/>
-            <Button variant="default" size={"lg"}  className="bg-Green mb-10 lg:mb-0 text-xl rounded-full">
+            <Button variant="default" size={"lg"}  className="bg-customTeal dark:bg-Green mb-10 lg:mb-0 text-xl rounded-full">
                 Send Message
               </Button>
         </div>