diff --git a/alimento-nextjs/actions/customer/wishlist/DELETE_wishlist.ts b/alimento-nextjs/actions/customer/wishlist/DELETE_wishlist.ts
index 1b58366..f883f78 100644
--- a/alimento-nextjs/actions/customer/wishlist/DELETE_wishlist.ts
+++ b/alimento-nextjs/actions/customer/wishlist/DELETE_wishlist.ts
@@ -11,6 +11,10 @@ export async function deleteWishlist({
   dishId: string;
 }): Promise<{ success: boolean; error?: string; data?: Wishlist }> {
   try {
+    if (!customerId || !dishId) {
+      // console.log(customerId,dishId)
+      return { success: false, error: 'Customer ID or Dish ID is missing.' };
+    }
     const Wishlist = await prismadb.wishlist.delete({
       where: { customerId_dishId: { customerId, dishId } },
     });
diff --git a/alimento-nextjs/app/(PublicRoutes)/dishes/page.tsx b/alimento-nextjs/app/(PublicRoutes)/dishes/page.tsx
index 3c30c2f..e01ae6b 100644
--- a/alimento-nextjs/app/(PublicRoutes)/dishes/page.tsx
+++ b/alimento-nextjs/app/(PublicRoutes)/dishes/page.tsx
@@ -45,7 +45,7 @@ const FoodPage: React.FC = () => {
     fetchData();
   }, [query, sort, tags, categories]); // Added tags as a dependency to refetch when tags change
 
-  console.log(foodItems);
+  // console.log(foodItems);
 
   return (
     <div className="bg-gray-50 text-gray-800">
diff --git a/alimento-nextjs/app/(PublicRoutes)/wishlist/components/wishlistItem.tsx b/alimento-nextjs/app/(PublicRoutes)/wishlist/components/wishlistItem.tsx
index a7d1518..c1644b4 100644
--- a/alimento-nextjs/app/(PublicRoutes)/wishlist/components/wishlistItem.tsx
+++ b/alimento-nextjs/app/(PublicRoutes)/wishlist/components/wishlistItem.tsx
@@ -1,132 +1,52 @@
 "use client";
-import { CartPost } from "@/actions/cart-actions";
-import { WishlistDeleteProduct } from "@/actions/wishlist-actions";
+import { deleteWishlist } from "@/actions/customer/wishlist/DELETE_wishlist";
+import { DishWithImages } from "@/app/vendor/[vendorId]/page";
 import { Button } from "@/components/ui/button";
-import { useCart } from "@/context/cartContext";
+import { useWishlist } from "@/context/customerWishlistProvider";
 import Image from "next/image";
+import { useEffect } from "react";
 import toast from "react-hot-toast";
-import { productWithImages } from "../page";
 
 interface wishlistItemProps {
-  product: productWithImages;
-  Id: string;
-  onRemove: (id: string) => void;
-  userId: string;
+  dish: DishWithImages;
+  dishId: string;
+  customerId: string;
 }
 // WishlistItem.js
 const WishlistItem: React.FC<wishlistItemProps> = ({
-  product,
-  onRemove,
-  Id,
-  userId,
+  dish,
+  dishId,
+  customerId,
 }) => {
-  const { cartItems, setCartItems } = useCart();
+  const { removeFromWishlists, loading, error } = useWishlist();
 
-  const onDelete = async () => {
-    const res = await WishlistDeleteProduct(Id);
 
-    if (res.success) {
-      toast.success("removed from wishlist");
-      onRemove(Id);
-    } else {
-      toast.error(res.error || "error occured");
-    }
-  };
-
-  const onAddToCart = async (formData: FormData) => {
-    if (!userId) {
-      toast.error("please authenticate yourself");
-      return;
-    }
-      const res = await CartPost(formData); // Make sure CartPost is defined to accept FormData
-      // console.log(res)
-      if (res.success && res.data) {
-        // Display success message
-        toast.success("Added to cart!");
-        // Update your state or context here
-        setCartItems([
-          ...cartItems,
-          {
-            id: res.data.id,
-            userId: res.data.userId,
-            productId: res.data.productId,
-            product: {
-              ...product,
-              images: product.images,
-            },
-            createdAt: res.data?.createdAt,
-            // Include additional properties as needed
-          },
-        ]);
-      } else {
-        // Display error message
-        toast.error("Error adding to cart, maybe Item already in cart");
-      }
-    // }
-  };
   return (
+    
     <div className="border flex items-center justify-center flex-col dark:border-gray-200 max-w-full p-4 rounded-lg shadow-md hover:shadow-lg transition">
+      {error? toast.error(error):null}
       <Image
         width={1000}
         height={1000}
-        src={product.images[0].url}
-        alt={product.name}
+        src={dish.images[0].url}
+        alt={dish.name}
         className="w-full h-full object-cover rounded border-b"
       />
       <h2 className="mt-2 text-xl dark:text-gray-200 font-semibold">
-        {product.name}
+        {dish.name}
       </h2>
-      <p className="text-lg text-gray-600">₹{product.price}</p>
+      <p className="text-lg text-gray-600">₹{dish.price}</p>
       <div className="mt-4 flex justify-between gap-2">
         <Button
-          onClick={onDelete}
+          disabled={loading}
+          onClick={() => {
+            removeFromWishlists(customerId, dishId);
+          }}
           variant="outline"
           className="dark:text-gray-200 dark:hover:bg-[#f8f8f8] dark:hover:text-gray-700"
         >
           Remove
         </Button>
-
-        <form
-        onSubmit={(e) => {
-          e.preventDefault(); // Prevent default form submission
-          const target = e.target as HTMLFormElement; // Type assertion
-          const formData = new FormData(target);
-          onAddToCart(formData); // Call handleSubmit with FormData
-        }}
-        className="p-1"
-      >
-        <input
-          hidden
-          type="text"
-          name="productid"
-          value={product.id}
-          placeholder="Product ID"
-          required
-        />
-        <input
-          hidden
-          type="text"
-          name="userid"
-          value={userId}
-          placeholder="User ID"
-          required
-        />
-        <Button
-          type="submit"
-          variant={"default"}
-          className="bg-customTeal dark:bg-Green dark:text-gray-100 dark:hover:opacity-80"
-        >Move to Cart
-        </Button>
-      </form>
-
-
-
-
-
-
-
-      
-          
       </div>
     </div>
   );
diff --git a/alimento-nextjs/app/(PublicRoutes)/wishlist/page.tsx b/alimento-nextjs/app/(PublicRoutes)/wishlist/page.tsx
index e69de29..5e37bbc 100644
--- a/alimento-nextjs/app/(PublicRoutes)/wishlist/page.tsx
+++ b/alimento-nextjs/app/(PublicRoutes)/wishlist/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+import { Toaster } from "react-hot-toast";
+import Link from "next/link";
+import { Spinner } from "@/components/ui/spinner";
+import WishlistItem from "./components/wishlistItem";
+import { useWishlist } from "@/context/customerWishlistProvider";
+
+const WishlistPage = () => {
+  const { data: session } = useSession();
+  const { Wishlists, fetchWishlists, loading } = useWishlist();
+
+  useEffect(() => {
+    if (session?.user?.id) {
+      fetchWishlists(session.user.id);
+    }
+  }, [session]);
+
+  if (loading) {
+    return <Spinner />;
+  }
+
+  return (
+    <>
+      <Toaster />
+      <div className="h-full dark:bg-DarkGray pb-10">
+        <div className="relative flex items-center justify-center h-96 bg-cover bg-center bg-no-repeat mb-20 p-8 bg-[url('/wishlist.jpg')]">
+          {/* Overlay */}
+          <div className="absolute inset-0 bg-black opacity-50"></div>
+          
+          {/* Title Text */}
+          <div className="relative z-10 text-center">
+            <h1 className="text-3xl md:text-5xl lg:text-7xl text-white font-extrabold">
+              Wish List
+            </h1>
+          </div>
+        </div>
+
+        <div className="mt-5 flex items-center justify-center">
+          {Wishlists && Wishlists.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 px-6 max-w-screen-xl mx-auto">
+              {Wishlists.map((item) => (
+                item.dish && item.dish.id && (
+                  <WishlistItem
+                    key={item.id}
+                    dishId={item.dish.id}
+                    customerId={session?.user.id || ""}
+                    dish={item.dish}
+                  />
+                )
+              ))}
+            </div>
+          ) : (
+            <div className="text-center text-gray-700 dark:text-gray-500">
+              <p className="text-lg">Your wishlist is empty!</p>
+              <Link href="/shops">
+                <Button className="mt-4 px-6 py-3 bg-customTeal text-white dark:bg-Green dark:hover:bg-opacity-80 transition duration-200 transform hover:scale-105">
+                  Continue Shopping
+                </Button>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WishlistPage;
diff --git a/alimento-nextjs/components/common/main-nav.tsx b/alimento-nextjs/components/common/main-nav.tsx
index 5d0f13a..7b5bbcb 100644
--- a/alimento-nextjs/components/common/main-nav.tsx
+++ b/alimento-nextjs/components/common/main-nav.tsx
@@ -18,7 +18,17 @@ const MainNav = () => {
     {
       href: `/orders`,
       label: 'Orders',
-      active: pathname.startsWith(`/`),
+      active: pathname.startsWith(`/orders`),
+    },
+    {
+      href: `/dishes`,
+      label: 'Dishes',
+      active: pathname.startsWith(`/dishes`),
+    },
+    {
+      href: `/wishlist`,
+      label: 'Wishlist',
+      active: pathname.startsWith(`/wishlist`),
     },
   ];
 
diff --git a/alimento-nextjs/context/customerWishlistProvider.tsx b/alimento-nextjs/context/customerWishlistProvider.tsx
index e3654a0..1df1e1f 100644
--- a/alimento-nextjs/context/customerWishlistProvider.tsx
+++ b/alimento-nextjs/context/customerWishlistProvider.tsx
@@ -74,6 +74,7 @@ export function WishlistProvider({ children }: { children: React.ReactNode }) {
     setLoading(true);
     setError(null);
     try {
+      // console.log(customerId,dishId)
       const response = await deleteWishlist({ customerId, dishId });
       if (response.success && response.data) {
         setWishlists((prev) =>
diff --git a/alimento-nextjs/public/wishlist.jpg b/alimento-nextjs/public/wishlist.jpg
new file mode 100644
index 0000000..3de37cb
Binary files /dev/null and b/alimento-nextjs/public/wishlist.jpg differ
diff --git a/alimento-nextjs/public/wishlistpng.png b/alimento-nextjs/public/wishlistpng.png
new file mode 100644
index 0000000..6cf2362
Binary files /dev/null and b/alimento-nextjs/public/wishlistpng.png differ