diff --git a/Benjamin/app/(auth)/login/page.tsx b/Benjamin/app/(auth)/login/page.tsx
index c644730..6ce563c 100644
--- a/Benjamin/app/(auth)/login/page.tsx
+++ b/Benjamin/app/(auth)/login/page.tsx
@@ -2,42 +2,41 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
-import { Loader2, Lock, Mail, User } from "lucide-react";
-import { signIn, useSession } from "next-auth/react";
+import { Lock, Mail, User } from "lucide-react";
 import { useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
 
 const Login = () => {
   // BE logic and states
-  const session= useSession();
+  // const session= useSession();
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
-  const [loading, setloading] =useState(false);
+  const [loading] =useState(false);
 
   if (error != "") {
     toast.error(error);
     setError("");
   }
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    setloading(true)
-    e.preventDefault();
+  // const handleSubmit = async (e: React.FormEvent) => {
+  //   setloading(true)
+  //   e.preventDefault();
 
-    const result = await signIn("credentials", {
-      email,
-      password,
-      redirect: false,
-    });
-    console.log(result)
-    if (result?.error) setError("Invalid email or password");
-    else {
-      toast.success(`Welcome ${session.data?.user?.name}`)
-      window.location.href = "/"; // Redirect on success
-    }
-    setloading(false)
-  };
+  //   const result = await signIn("credentials", {
+  //     email,
+  //     password,
+  //     redirect: false,
+  //   });
+  //   console.log(result)
+  //   if (result?.error) setError("Invalid email or password");
+  //   else {
+  //     toast.success(`Welcome ${session.data?.user?.name}`)
+  //     window.location.href = "/"; // Redirect on success
+  //   }
+  //   setloading(false)
+  // };
 
   // FE logic and states
   const [switchCss, setSwitchCss] = useState(true);
diff --git a/Benjamin/app/Blog/[blogId]/page.tsx b/Benjamin/app/Blog/[blogId]/page.tsx
index 0165b27..ae9fc8b 100644
--- a/Benjamin/app/Blog/[blogId]/page.tsx
+++ b/Benjamin/app/Blog/[blogId]/page.tsx
@@ -2,15 +2,15 @@ import Blog from "@/components/Blog/Blog";
 
 const BlogPage = () => {
     return ( 
-        <>
+        <div className="h-full dark:bg-DarkGray">
         <div className="h-full">
-          <div className="text-white flex items-center justify-center bg-customTeal 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 font-extrabold font-handlee">Blog Page</div>
           </div>
         </div>
 
         <Blog/>
-        </>
+        </div>
      );
 }
  
diff --git a/Benjamin/app/Blog/page.tsx b/Benjamin/app/Blog/page.tsx
index 0c9d34a..d39394f 100644
--- a/Benjamin/app/Blog/page.tsx
+++ b/Benjamin/app/Blog/page.tsx
@@ -3,18 +3,18 @@ import SeperatorHeading from "@/components/ui/seperatorHeading";
 
 const Blogs = () => {
   return (
-    <>
+    <div className="h-full dark:bg-DarkGray pb-10">
       <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 font-extrabold text-gray-200 font-handlee">Our Blog</div>
         </div>
       </div>
       <SeperatorHeading label="Latest Blog" />
-      <div className="flex items-center justify-center px-5 text-3xl lg:px-0 my-10 lg:text-4xl  font-bold text-Green font-handlee">
+      <div className="flex items-center justify-center px-5 text-3xl lg:px-0 my-10 lg:text-4xl  font-bold text-customTeal dark:text-Green font-handlee">
         Latest articles from our blogs
       </div>
       <BlogCard/>
-    </>
+    </div>
   );
 };
 
diff --git a/Benjamin/app/MyOrders/[orderId]/page.tsx b/Benjamin/app/MyOrders/[orderId]/page.tsx
index c0bfc55..59f391f 100644
--- a/Benjamin/app/MyOrders/[orderId]/page.tsx
+++ b/Benjamin/app/MyOrders/[orderId]/page.tsx
@@ -50,23 +50,23 @@ const orderItems = [
 
 const Order = () => {
   return (
-    <div className="flex items-start my-10 w-full justify-center min-h-screen">
+    <div className="flex items-start dark:bg-DarkGray py-10 w-full justify-center min-h-screen">
       <div className="w-3/4 flex flex-col gap-2">
         <Link href={"/MyOrders"}>
-          <Button className="h-12 mb-2 hover:shadow-lg w-12 p-0">
+          <Button className="h-12 mb-2 bg-customTeal dark:bg-Green hover:opacity-90 hover:shadow-lg w-12 p-0">
             <ArrowLeft className="h-10 w-10" />
           </Button>
         </Link>
 
-        <div className="text-gray-200 font-bold text-2xl">Order Summary</div>
+        <div className="dark:text-gray-200 font-bold text-2xl">Order Summary</div>
         <div className="text-gray-500 text-sm">Arrived at 9:59 pm</div>
-        <div className="flex mb-5 hover:cursor-pointer hover:underline items-center text-green-500 justify-start">
+        <div className="flex mb-5 hover:cursor-pointer hover:underline items-center text-customTeal dark:text-green-500 justify-start">
           <div>Download Invoice</div>
           <Download className="h-4 w-4 ml-1" />
         </div>
 
         {/* Scrollable Content Section */}
-        <div className="flex-1 shadow-2xl overflow-y-auto max-h-[400px] w-full border border-gray-700 rounded-lg p-3">
+        <div className="flex-1 shadow-2xl overflow-y-auto max-h-[400px] w-full border border-gray-700 rounded-lg ">
           {orderItems.map((item) => (
             <OrderItem key={item.name} item={item} />
           ))}
diff --git a/Benjamin/app/MyOrders/components/columns.tsx b/Benjamin/app/MyOrders/components/columns.tsx
index 94375a6..a61aa68 100644
--- a/Benjamin/app/MyOrders/components/columns.tsx
+++ b/Benjamin/app/MyOrders/components/columns.tsx
@@ -138,7 +138,7 @@ export const columns: ColumnDef<order>[] = [
       const orderId = row.getValue("orderId");
       return (
         <Link href={`MyOrders/${orderId}`}>
-          <Button className="border text-sm font-bold text-Green hover:bg-Green hover:text-gray-200 hover:border hover:border-DarkGray">
+          <Button className="border text-sm font-bold bg-customTeal hover:bg-customTeal dark:bg-Green dark:hover:bg-Green hover:opacity-80 text-gray-200 hover:border hover:border-DarkGray">
             view details
           </Button>
         </Link>
diff --git a/Benjamin/app/MyOrders/components/datatable.tsx b/Benjamin/app/MyOrders/components/datatable.tsx
index 82134e4..196b1f2 100644
--- a/Benjamin/app/MyOrders/components/datatable.tsx
+++ b/Benjamin/app/MyOrders/components/datatable.tsx
@@ -44,15 +44,15 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="w-3/4 text-gray-200">
-      <div className="rounded-md  border">
+    <div className="w-3/4   text-black dark:text-gray-200">
+      <div className="rounded-md dark:dark:border-gray-200  border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow  key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <TableHead className="bg-DarkGray" key={header.id}>
+                    <TableHead className= "bg-customTeal text-gray-200 dark:bg-Green dark:text-Yellow font-bold dark:border-gray-200 dark:border-b" key={header.id}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
@@ -65,12 +65,13 @@ export function DataTable<TData, TValue>({
               </TableRow>
             ))}
           </TableHeader>
-          <TableBody>
+          <TableBody className="dark:border-gray-200 dark:border-y">
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
+                  className="dark:border-gray-200 dark:border-y"
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
@@ -101,7 +102,7 @@ export function DataTable<TData, TValue>({
           size="sm"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className="text-gray-500 font-bold"
+          className="bg-customTeal text-gray-200 dark:text-gray-200 dark:bg-Green hover:opacity-80 font-bold"
         >
           Previous
         </Button>
@@ -110,7 +111,7 @@ export function DataTable<TData, TValue>({
           size="sm"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className="text-gray-500 font-bold"
+          className="bg-customTeal text-gray-200 dark:text-gray-200 dark:bg-Green hover:opacity-80 font-bold"
         >
           Next
         </Button>
diff --git a/Benjamin/app/MyOrders/components/orderItem.tsx b/Benjamin/app/MyOrders/components/orderItem.tsx
index 3a53c4b..3c084e4 100644
--- a/Benjamin/app/MyOrders/components/orderItem.tsx
+++ b/Benjamin/app/MyOrders/components/orderItem.tsx
@@ -12,8 +12,8 @@ export interface orderItemProps {
 
 const OrderItem: React.FC<orderItemProps> = ({ item }) => {
   return (
-    <div className="flex bg-gray-700 p-5 hover:scale-100 my-2 rounded-lg shadow-2xl w-full items-center justify-between">
-      <div className="flex items-center text-gray-200 justify-center gap-5">
+    <div className="flex bg-gray-200  dark:bg-gray-700 p-5 hover:scale-100 my-2 rounded-lg shadow-lg w-full items-center justify-between">
+      <div className="flex items-center dark:text-gray-200 justify-center gap-5">
         <Image
           src={item.image}
           className="rounded-lg"
@@ -21,7 +21,7 @@ const OrderItem: React.FC<orderItemProps> = ({ item }) => {
           height={"100"}
           alt="orderImage"
         />
-        <div className="flex text-gray-200 flex-col items-start justify-center">
+        <div className="flex dark:text-gray-200 flex-col items-start justify-center">
           <div className="flex gap-2 font-bold items-center justify-center">
             <div>{item.name}</div>
           </div>
@@ -30,7 +30,7 @@ const OrderItem: React.FC<orderItemProps> = ({ item }) => {
           </div>
         </div>
       </div>
-      <div className="text-gray-200">₹{item.price}</div>
+      <div className="dark:text-gray-200">₹{item.price}</div>
       
     </div>
   );
diff --git a/Benjamin/app/MyOrders/page.tsx b/Benjamin/app/MyOrders/page.tsx
index 2d8100a..69f756f 100644
--- a/Benjamin/app/MyOrders/page.tsx
+++ b/Benjamin/app/MyOrders/page.tsx
@@ -2,22 +2,22 @@ import { columns, order } from "./components/columns";
 import { DataTable } from "./components/datatable";
 
 const options: Intl.DateTimeFormatOptions = {
-  weekday: 'short', // 'Tue'
-  year: 'numeric', // '2024'
-  month: 'short', // 'Oct'
-  day: '2-digit', // '01'
-  hour: '2-digit', // '10'
-  minute: '2-digit', // '30'
+  weekday: "short", // 'Tue'
+  year: "numeric", // '2024'
+  month: "short", // 'Oct'
+  day: "2-digit", // '01'
+  hour: "2-digit", // '10'
+  minute: "2-digit", // '30'
   hour12: true, // 12-hour format
 };
 
-const orders:order[]  = [
+const orders: order[] = [
   {
     id: "1",
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1001",
     amount: 599,
-    date: new Date("2024-10-01T10:30:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-01T10:30:00").toLocaleString("en-IN", options),
     status: "delivered",
   },
   {
@@ -25,7 +25,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1002",
     amount: 249,
-    date: new Date("2024-10-02T14:00:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-02T14:00:00").toLocaleString("en-IN", options),
     status: "out for delivery",
   },
   {
@@ -33,7 +33,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1003",
     amount: 799,
-    date: new Date("2024-10-03T18:45:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-03T18:45:00").toLocaleString("en-IN", options),
     status: "processing",
   },
   {
@@ -41,7 +41,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1004",
     amount: 999,
-    date: new Date("2024-10-04T11:20:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-04T11:20:00").toLocaleString("en-IN", options),
     status: "failed",
   },
   {
@@ -49,7 +49,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1005",
     amount: 459,
-    date: new Date("2024-10-05T08:10:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-05T08:10:00").toLocaleString("en-IN", options),
     status: "delivered",
   },
   {
@@ -57,7 +57,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1006",
     amount: 350,
-    date: new Date("2024-10-06T12:45:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-06T12:45:00").toLocaleString("en-IN", options),
     status: "processing",
   },
   {
@@ -65,7 +65,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1007",
     amount: 1299,
-    date: new Date("2024-10-07T15:00:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-07T15:00:00").toLocaleString("en-IN", options),
     status: "out for delivery",
   },
   {
@@ -73,7 +73,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1008",
     amount: 699,
-    date: new Date("2024-10-08T09:30:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-08T09:30:00").toLocaleString("en-IN", options),
     status: "delivered",
   },
   {
@@ -81,7 +81,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1009",
     amount: 199,
-    date: new Date("2024-10-09T13:20:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-09T13:20:00").toLocaleString("en-IN", options),
     status: "failed",
   },
   {
@@ -89,7 +89,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1010",
     amount: 799,
-    date: new Date("2024-10-10T11:50:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-10T11:50:00").toLocaleString("en-IN", options),
     status: "out for delivery",
   },
   {
@@ -97,7 +97,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1011",
     amount: 1599,
-    date: new Date("2024-10-11T17:25:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-11T17:25:00").toLocaleString("en-IN", options),
     status: "delivered",
   },
   {
@@ -105,7 +105,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1012",
     amount: 999,
-    date: new Date("2024-10-12T16:10:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-12T16:10:00").toLocaleString("en-IN", options),
     status: "processing",
   },
   {
@@ -113,7 +113,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1013",
     amount: 599,
-    date: new Date("2024-10-13T08:45:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-13T08:45:00").toLocaleString("en-IN", options),
     status: "out for delivery",
   },
   {
@@ -121,7 +121,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1014",
     amount: 449,
-    date: new Date("2024-10-14T10:30:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-14T10:30:00").toLocaleString("en-IN", options),
     status: "failed",
   },
   {
@@ -129,7 +129,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1015",
     amount: 799,
-    date: new Date("2024-10-15T19:10:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-15T19:10:00").toLocaleString("en-IN", options),
     status: "delivered",
   },
   {
@@ -137,7 +137,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1016",
     amount: 300,
-    date: new Date("2024-10-16T15:45:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-16T15:45:00").toLocaleString("en-IN", options),
     status: "processing",
   },
   {
@@ -145,7 +145,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1017",
     amount: 1200,
-    date: new Date("2024-10-17T18:20:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-17T18:20:00").toLocaleString("en-IN", options),
     status: "out for delivery",
   },
   {
@@ -153,7 +153,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1018",
     amount: 750,
-    date: new Date("2024-10-18T20:10:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-18T20:10:00").toLocaleString("en-IN", options),
     status: "delivered",
   },
   {
@@ -161,7 +161,7 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1019",
     amount: 590,
-    date: new Date("2024-10-19T12:30:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-19T12:30:00").toLocaleString("en-IN", options),
     status: "failed",
   },
   {
@@ -169,27 +169,23 @@ const orders:order[]  = [
     avatar: "https://github.com/shadcn.png",
     orderId: "EZYSHOP1020",
     amount: 680,
-    date: new Date("2024-10-20T10:20:00").toLocaleString("en-IN",options),
+    date: new Date("2024-10-20T10:20:00").toLocaleString("en-IN", options),
     status: "out for delivery",
   },
 ];
 
-
 const Orders = () => {
   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 pb-10 dark:bg-DarkGray">
+      <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">
           Your Orders
         </div>
       </div>
 
-    <div className="container w-screen flex items-center justify-center py-10">
-      <DataTable columns={columns} data={orders} />
-    </div>
- 
-
-
+      <div className="container flex items-center justify-center py-10">
+        <DataTable columns={columns} data={orders} />
+      </div>
     </div>
   );
 };
diff --git a/Benjamin/components/Blog/Blog.tsx b/Benjamin/components/Blog/Blog.tsx
index 03b33c4..bfdc3bf 100644
--- a/Benjamin/components/Blog/Blog.tsx
+++ b/Benjamin/components/Blog/Blog.tsx
@@ -9,13 +9,13 @@ import Image from "next/image";
 
 const Blog = () => {
   return (
-    <div className="flex flex-col items-center justify-center gap-5 pb-10 h-full mb-10 px-20 lg:px-40">
+    <div className="flex flex-col items-center justify-center gap-5  h-full pb-20 px-20 lg:px-40">
       <div className="h-full flex items-center flex-col lg:grid lg:items-start grid-cols-12 lg:gap-10">
         {/* left half */}
         <div className="col-span-8 px-5 flex max-w-screen-sm lg:max-w-screen-xl items-center lg:items-start justify-center lg:px-10 flex-col">
           <SeperatorHeading label="blog detail page" />
           {/* blog heading */}
-          <div className="flex items-center justify-center lg:justify-start lg:w-full px-24 text-3xl lg:px-0 my-10 lg:text-4xl font-bold text-customBlue font-handlee">
+          <div className="flex items-center justify-center lg:justify-start lg:w-full px-24 text-3xl lg:px-0 my-10 lg:text-4xl font-bold text-customBlue dark:text-Green font-handlee">
             10 Ways to Save on Groceries This Month
           </div>
 
@@ -23,15 +23,15 @@ const Blog = () => {
 
           <div className="flex items-center justify-start gap-4 mb-10">
             <div className="flex items-center justify-center gap-2">
-              <User className="h-4 w-4 text-customTeal" />
+              <User className="h-4 w-4 text-customTeal dark:text-Yellow" />
               <div className="text-sm text-gray-500"> Shreya</div>
             </div>
             <div className="flex items-center justify-center gap-2">
-              <Folder className="h-4 w-4 text-customTeal" />
+              <Folder className="h-4 w-4 text-customTeal dark:text-Yellow" />
               <div className="text-sm text-gray-500">Shopping Tips</div>
             </div>
             <div className="flex items-center justify-center gap-2">
-              <MessagesSquare className="h-4 w-4 text-customTeal" />
+              <MessagesSquare className="h-4 w-4 text-customTeal dark:text-Yellow" />
               <div className="text-sm text-gray-500">23</div>
             </div>
           </div>
@@ -62,7 +62,7 @@ const Blog = () => {
           <RelatedPosts />
           <BlogComments />
         </div>
-        {/* right */}
+        {/* right half*/}
         <div className="col-span-4 px-40 lg:px-0">
           <BlogAvatar />
           <CategoryByKeyword />
diff --git a/Benjamin/components/Blog/BlogCard.tsx b/Benjamin/components/Blog/BlogCard.tsx
index 6abf54f..84f2213 100644
--- a/Benjamin/components/Blog/BlogCard.tsx
+++ b/Benjamin/components/Blog/BlogCard.tsx
@@ -45,37 +45,37 @@ const blogData = [
 
 const BlogCard = () => {
   return (
-    <div className="flex flex-col items-center justify-center gap-5 pb-10 h-full mb-10">
+    <div className="flex flex-col items-center justify-center gap-5 pb-10 h-full ">
       <div className="h-full flex items-center justify-center flex-col gap-5 lg:grid grid-cols-3 lg:gap-10">
         {blogData.map((card) => (
           <Card
             key={card.id}
-            className="w-[400px] hover:scale-105 transition duration-300 bg-gray-100"
+            className="w-[400px] hover:scale-105 transition duration-300 bg-gray-200 dark:bg-gray-700"
           >
             <CardHeader>
               <div className="flex flex-col gap-2">
                 <Image alt="card image" width={1000} height={1000} src={card.url} />
 
-                <CardTitle className="flex text-center items-center text-2xl pt-4 text-Green mt-2 justify-center font-handlee">
+                <CardTitle className="flex text-center items-center text-2xl pt-4 text-customBlue dark:text-Green mt-2 justify-center font-handlee">
                   {card.title}
                 </CardTitle>
               </div>
-              <CardContent className="text-justify text-md">
+              <CardContent className="text-justify text-gray-500 text-md">
                 <div className="flex items-center justify-center gap-4 mb-4">
                   <div className="flex items-center justify-center gap-2">
-                    <User className="h-4 w-4 text-Yellow" />
+                    <User className="h-4 w-4 text-customTeal dark:text-Yellow" />
                     <div className="text-sm text-gray-500"> {card.author}</div>
                   </div>
                   <div className="flex items-center justify-center gap-2">
-                    <Folder className="h-4 w-4 text-Yellow" />
+                    <Folder className="h-4 w-4 text-customTeal dark:text-Yellow" />
                     <div className="text-sm text-gray-500">{card.category}</div>
                   </div>
                   <div className="flex items-center justify-center gap-2">
-                    <MessagesSquare className="h-4 w-4 text-Yellow" />
+                    <MessagesSquare className="h-4 w-4 text-customTeal dark:text-Yellow" />
                     <div className="text-sm text-gray-500">{card.comments}</div>
                   </div>
                 </div>
-                <div className="text-center text-gray-200">{card.content}</div>
+                <div className="text-center dark:text-gray-200">{card.content}</div>
               </CardContent>
             </CardHeader>
             <CardFooter className="flex justify-center">
@@ -83,7 +83,7 @@ const BlogCard = () => {
                 <Button
                   variant="default"
                   size={"lg"}
-                  className="bg-Green rounded-full"
+                  className="bg-customTeal dark:bg-Green rounded-full"
                 >
                   Read more
                 </Button>
diff --git a/Benjamin/components/Blog/CategoryByKeyword.tsx b/Benjamin/components/Blog/CategoryByKeyword.tsx
index 686dc72..381fa78 100644
--- a/Benjamin/components/Blog/CategoryByKeyword.tsx
+++ b/Benjamin/components/Blog/CategoryByKeyword.tsx
@@ -31,18 +31,18 @@ const categories = [
 const CategoryByKeyword = () => {
     return ( 
         <>
-         <div className="flex items-center justify-center lg:justify-start lg:w-full px-14  lg:px-0 my-10 text-4xl font-bold text-customBlue font-handlee">
+         <div className="flex items-center justify-center lg:justify-start lg:w-full px-14  lg:px-0 my-10 text-4xl font-bold text-customBlue dark:text-Green font-handlee">
             Filter categories by keywords
           </div>
         <ComboboxDemo />
-        <div className="flex items-center justify-center lg:justify-start lg:w-full px-14  lg:px-0 my-10 text-4xl font-bold text-customBlue font-handlee">
+        <div className="flex items-center justify-center lg:justify-start lg:w-full px-14  lg:px-0 my-10 text-4xl font-bold text-customBlue dark:text-Green font-handlee">
             Categories
           </div>
         <div className="flex px-10 lg:px-0 flex-col items-start justify-center">
         {categories.map((category)=>(
-            <Link key={category.label} href={"#"} className=" w-full flex justify-between text-md py-3 border-b">
-                <div className="text-customTeal hover:underline">{category.label}</div>
-                <div className="bg-customTeal rounded-full px-2 ">{category.count}</div>
+            <Link key={category.label} href={"#"} className=" w-full flex justify-between text-md py-3 border-b dark:border-gray-200">
+                <div className="text-customTeal dark:text-Green hover:underline">{category.label}</div>
+                <div className="bg-customTeal dark:bg-Green rounded-full px-2 ">{category.count}</div>
             </Link>
         ))}
         </div>
diff --git a/Benjamin/components/Blog/Comments.tsx b/Benjamin/components/Blog/Comments.tsx
index d0e01c4..ce5884b 100644
--- a/Benjamin/components/Blog/Comments.tsx
+++ b/Benjamin/components/Blog/Comments.tsx
@@ -50,18 +50,18 @@ const comments = [
 const BlogComments = () => {
   return (
     <div className="px-24 lg:px-0">
-      <div className="flex items-center justify-center lg:justify-start lg:w-full px-14 text-3xl lg:px-0 my-10 lg:text-4xl font-bold text-customBlue font-handlee">
+      <div className="flex items-center justify-center lg:justify-start lg:w-full px-14 text-3xl lg:px-0 my-10 lg:text-4xl font-bold text-customBlue dark:text-Green font-handlee">
         {comments.length} Comments
       </div>
       {comments.map((comment) => (
         <CommentCard key={comment.date} comment={comment} />
       ))}
 
-      <Input placeholder="Add a comment" className="mb-5 h-14   rounded-full"/>
+      <Input placeholder="Add a comment" className="mb-5 h-14 dark:shadow dark:shadow-white  rounded-full"/>
       <Button
         variant="default"
         size={"sm"}
-        className="bg-[#161c1d] text-lg h-10 rounded-full"
+        className="bg-customBlue dark:bg-Green text-lg h-10 rounded-full"
       >
         Add Comment
       </Button>
diff --git a/Benjamin/components/Blog/RecentPosts.tsx b/Benjamin/components/Blog/RecentPosts.tsx
index 22ae6b5..455d663 100644
--- a/Benjamin/components/Blog/RecentPosts.tsx
+++ b/Benjamin/components/Blog/RecentPosts.tsx
@@ -50,7 +50,7 @@ const blogData = [
 const RecentPosts = () => {
   return (
     <>
-      <div className="flex items-center justify-center mt-10 text-4xl font-bold text-customBlue font-handlee">
+      <div className="flex items-center justify-center mt-10 text-4xl font-bold text-customBlue dark:text-Green font-handlee">
         Recent Posts
       </div>
       <div className="w-full mt-10 text-white mb-10">
@@ -72,39 +72,39 @@ const RecentPosts = () => {
                 <Link href={`/Blog/${card.id}`}>
                   <Card
                     key={card.id}
-                    className="w-[400px] lg:w-[320px] h-[140px]  flex items-center justify-center hover:scale-105 transition duration-800 bg-gray-100"
+                    className="w-[400px] lg:w-[320px] h-[140px] lg:p-2 flex items-center justify-center hover:scale-105 transition duration-800 bg-gray-200 dark:bg-gray-700"
                   >
-                    <CardHeader className="p-1 w-full ">
+                    <CardHeader className="p-1 lg:p-0  lg:mx-0 w-1/4 lg:w-full ">
                       <div className="flex items-center justify-center p-0">
                         <Image
                           width={1000}
                           height={1000}
                           alt="card image"
-                          className="h-28 w-28 lg:h-24 lg:w-24 rounded-lg"
+                          className="h-20 w-20 lg:h-24 lg:w-24 rounded-full"
                           src={card.url}
                         />
                       </div>
                     </CardHeader>
-                    <CardContent className="text-justify p-2 flex flex-col items-center justify-center text-md">
-                      <CardTitle className="flex text-center items-center text-xl pt-4 text-customBlue mt-2 justify-center font-handlee">
+                    <CardContent className="text-justify p-2 lg:p-0 flex flex-col items-center justify-center text-md">
+                      <CardTitle className="flex text-center items-center text-xl pt-4 text-customBlue dark:text-Green mt-2 justify-center font-handlee">
                         {card.title}
                       </CardTitle>
                       <div className="flex items-center justify-center gap-2 mb-4">
                         <div className="flex items-center justify-center gap-2">
-                          <User className="h-4 w-4 text-customTeal" />
+                          <User className="h-4 w-4 text-customTeal dark:text-Yellow" />
                           <div className="text-sm text-gray-500">
                             {" "}
                             {card.author}
                           </div>
                         </div>
                         <div className="flex items-center justify-center gap-2">
-                          <Folder className="h-4 w-4 text-customTeal" />
+                          <Folder className="h-4 w-4 text-customTeal dark:text-Yellow" />
                           <div className="text-sm text-gray-500">
                             {card.category}
                           </div>
                         </div>
                         <div className="flex items-center justify-center gap-2">
-                          <MessagesSquare className="h-4 w-4 text-customTeal" />
+                          <MessagesSquare className="h-4 w-4 text-customTeal dark:text-Yellow" />
                           <div className="text-sm text-gray-500">
                             {card.comments}
                           </div>
diff --git a/Benjamin/components/Blog/RelatedPosts.tsx b/Benjamin/components/Blog/RelatedPosts.tsx
index db21d69..ecb18fb 100644
--- a/Benjamin/components/Blog/RelatedPosts.tsx
+++ b/Benjamin/components/Blog/RelatedPosts.tsx
@@ -50,12 +50,12 @@ const blogData = [
 const RelatedPosts = () => {
   return (
     <>
-      <div className="flex items-center justify-center mt-10 text-4xl font-bold text-customBlue font-handlee">
+      <div className="flex items-center justify-center mt-10 text-4xl font-bold text-customBlue dark:text-Green font-handlee">
         Related Posts
       </div>
 
       {/* Ensure no overflow with max-width and padding adjustments */}
-      <div className="w-full max-w-screen-xl mx-auto px-4 mt-10 text-white overflow-hidden mb-10">
+      <div className="w-full max-w-screen-xl mx-auto  mt-10 text-white overflow-hidden mb-10">
         <Carousel
           opts={{
             align: "start",
@@ -75,42 +75,42 @@ const RelatedPosts = () => {
                   className="flex items-center justify-center lg:block"
                 >
                   <Card
-                    className="w-[400px] sm:w-[320px] h-[160px] flex items-center justify-center hover:scale-105 transition duration-800 bg-gray-100"
+                    className="w-[400px] sm:w-[320px] h-[160px] flex lg:p-2 items-center justify-center hover:scale-105 transition duration-800 bg-gray-200 dark:bg-gray-700"
                   >
-                    <CardHeader className="p-1 w-full">
+                    <CardHeader className="h-full flex flex-col items-center justify-center lg:p-0 w-full">
                       <div className="flex items-center justify-center p-0">
                         <Image
-                          width={1000}
-                          height={1000}
+                          width={350}
+                          height={350}
                           alt="card image"
-                          className="h-24 w-24 rounded-lg"
+                          className="w-20 h-20 rounded-full"
                           src={card.url}
                         />
                       </div>
                     </CardHeader>
 
-                    <CardContent className="text-justify p-2 flex flex-col items-center justify-center text-md">
-                      <CardTitle className="flex text-center items-center text-xl pt-4 text-customBlue mt-2 justify-center font-handlee">
+                    <CardContent className="text-justify  lg:p-0 flex flex-col items-center justify-center text-md">
+                      <CardTitle className="flex p-0 text-center items-center text-xl pt-4 text-customBlue dark:text-Green mt-2 justify-center font-handlee">
                         {card.title}
-                      </CardTitle>
+                      </CardTitle >
 
                       <div className="flex items-center justify-center gap-2 mb-4">
                         <div className="flex items-center justify-center gap-2">
-                          <User className="h-4 w-4 text-customTeal" />
+                          <User className="h-4 w-4 text-customTeal dark:text-Yellow" />
                           <div className="text-sm text-gray-500">
                             {card.author}
                           </div>
                         </div>
 
                         <div className="flex items-center justify-center gap-2">
-                          <Folder className="h-4 w-4 text-customTeal" />
+                          <Folder className="h-4 w-4 text-customTeal dark:text-Yellow" />
                           <div className="text-sm text-gray-500">
                             {card.category}
                           </div>
                         </div>
 
                         <div className="flex items-center justify-center gap-2">
-                          <MessagesSquare className="h-4 w-4 text-customTeal" />
+                          <MessagesSquare className="h-4 w-4 text-customTeal dark:text-Yellow" />
                           <div className="text-sm text-gray-500">
                             {card.comments}
                           </div>
diff --git a/Benjamin/components/Blog/blogAvatar.tsx b/Benjamin/components/Blog/blogAvatar.tsx
index 5b5fa7e..26c7bee 100644
--- a/Benjamin/components/Blog/blogAvatar.tsx
+++ b/Benjamin/components/Blog/blogAvatar.tsx
@@ -2,12 +2,12 @@ import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 
 const BlogAvatar = () => {
   return (
-    <div className="flex flex-col items-center gap-5 justify-center bg-customTeal my-5 rounded-lg py-10">
+    <div className="flex flex-col items-center gap-5 justify-center bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow my-5 rounded-lg py-10">
       <Avatar>
         <AvatarImage src={"/priya.jpg"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
-      <div className="text-customBlue text-2xl font-handlee font-bold">
+      <div className="text-customBlue dark:text-DarkGray text-2xl font-handlee font-bold">
         Priya Verma
       </div>
       <div className="text-lg">
diff --git a/Benjamin/components/Blog/commentCard.tsx b/Benjamin/components/Blog/commentCard.tsx
index 5d11f77..b5e7e50 100644
--- a/Benjamin/components/Blog/commentCard.tsx
+++ b/Benjamin/components/Blog/commentCard.tsx
@@ -20,9 +20,9 @@ const CommentCard = ({
       </Avatar>
       <div className="flex items-start justify-center flex-col gap-2 lg:gap-0">
         <div className="flex items-center justify-center gap-2">
-          <div className="font-nunito text-lg text-customBlue font-bold">{comment.name}</div>
-          <div className="h-1 w-1 bg-customTeal rounded-full"/>
-          <div className="font-handlee text-customBlue text-sm">{comment.date}</div>
+          <div className="font-nunito text-lg text-customBlue dark:text-Green font-bold">{comment.name}</div>
+          <div className="h-1 w-1 bg-customTeal dark:bg-Yellow rounded-full"/>
+          <div className="font-handlee text-customBlue dark:text-Green text-sm">{comment.date}</div>
         </div>
         <div className="mb-2 text-wrap pr-10 lg:p-0">
             {comment.text}
diff --git a/Benjamin/components/authButtons.tsx b/Benjamin/components/authButtons.tsx
index fc5ad2a..cf28750 100644
--- a/Benjamin/components/authButtons.tsx
+++ b/Benjamin/components/authButtons.tsx
@@ -1,4 +1,4 @@
-import { signIn, signOut } from "next-auth/react";
+import { signOut } from "next-auth/react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { Button } from "./ui/button";
diff --git a/Benjamin/components/navbar.tsx b/Benjamin/components/navbar.tsx
index ec6a477..c5397ad 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 dark:border-Green 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/combobox.tsx b/Benjamin/components/ui/combobox.tsx
index 5cfb301..445998e 100644
--- a/Benjamin/components/ui/combobox.tsx
+++ b/Benjamin/components/ui/combobox.tsx
@@ -60,7 +60,7 @@ export function ComboboxDemo() {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between"
+          className="w-full dark:text-gray-200 justify-between"
         >
           {value
             ? frameworks.find((framework) => framework.value === value)?.label
diff --git a/Benjamin/components/ui/themeButton.tsx b/Benjamin/components/ui/themeButton.tsx
index e42c1e6..ca9c1a9 100644
--- a/Benjamin/components/ui/themeButton.tsx
+++ b/Benjamin/components/ui/themeButton.tsx
@@ -4,12 +4,12 @@ import * as React from "react"
 import { Moon, Sun } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+// import {
+//   DropdownMenu,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuTrigger,
+// } from "@/components/ui/dropdown-menu"
 import { useTheme } from "@/context/themeProvider"
 
 export function ModeToggle() {
diff --git a/Benjamin/lib/auth.ts b/Benjamin/lib/auth.ts
index 5d08f72..0d8efc8 100644
--- a/Benjamin/lib/auth.ts
+++ b/Benjamin/lib/auth.ts
@@ -2,15 +2,22 @@ import { PrismaClient } from "@prisma/client";
 import CredentialsProvider from "next-auth/providers/credentials";
 import bcrypt from "bcrypt";
 
+import {  User as NextAuthUser } from "next-auth";
+
+interface JWTToken {
+  uid?: string;
+  user?: NextAuthUser;
+}
+
 export const NEXT_AUTH_CONFIG = {
   providers: [
     CredentialsProvider({
       name: "Credentials",
       credentials: {
-        username: { label: "email", type: "text", placeholder: "" },
+        email: { label: "email", type: "text", placeholder: "" },
         password: { label: "password", type: "password", placeholder: "" },
       },
-      async authorize(credentials: any) {
+      async authorize(credentials:Record<"email" | "password", string> | undefined) {
 
         if (!credentials?.email || !credentials?.password) {
           throw new Error("Invalid credentials");
@@ -48,15 +55,18 @@ export const NEXT_AUTH_CONFIG = {
   ],
       secret: process.env.NEXTAUTH_SECRET,
       callbacks: {
-          jwt: async ({ user, token }: any) => {
+          jwt: async ({ user, token }: { user?: NextAuthUser; token: JWTToken }) => {
           if (user) {
               token.uid = user.id;
           }
           return token;
           },
-        session: ({ session, token, user }: any) => {
+        session: ({ session, token }: {
+          session: { user?: NextAuthUser };
+          token: JWTToken;
+        }) => {
             if (session.user) {
-                session.user.id = token.uid
+                session.user.id = token.uid ||""
             }
             return session
         }