diff --git a/src/app/(profile)/profile-edit/page.tsx b/src/app/(profile)/profile-edit/page.tsx
index ead32f3..900fe9e 100644
--- a/src/app/(profile)/profile-edit/page.tsx
+++ b/src/app/(profile)/profile-edit/page.tsx
@@ -212,7 +212,7 @@ const UserProfileForm: React.FC = () => {
                 </div>
                 <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                   <button type="button" className="w-full sm:w-1/2 bg-white text-gray-700 border border-gray-300 px-16 py-2 rounded hover:bg-gray-100 transition duration-300">
-                    Cancel
+                    <a href="/profile">Cancel</a>
                   </button>
                   <button
                     type="submit"
diff --git a/src/app/(profile)/profile/page.tsx b/src/app/(profile)/profile/page.tsx
index 6544813..d6002af 100644
--- a/src/app/(profile)/profile/page.tsx
+++ b/src/app/(profile)/profile/page.tsx
@@ -12,20 +12,21 @@ const ProfilePage = () => {
         <div className="bg-gray-100 w-full flex flex-col items-center">
             <Header />
             <ProfileHeader />
-            <div className='w-full max-w-7xl px-4 mt-4'>
+            <div className='w-full max-w-7xl px-4 mt-4 mb-4'>
                 <div className='grid grid-cols-1 md:grid-cols-4 gap-4'>
                     <div className='md:col-span-1'>
                         <About />
                     </div>
-                    <div className='md:col-span-2'>
+                    <div className='md:col-span-2 mb-4'>
                         <Wishlist />
                     </div>
-                    <div className='md:col-span-1 flex flex-col gap-4'>
+                    <div className='md:col-span-1 flex flex-col gap-4 mb-4'>
                         <Order />
-                        <ActiveUser />
+                        {/* <ActiveUser /> */}
                     </div>
                 </div>
             </div>
+            
             <Footer />
         </div>
     );
diff --git a/src/components/profile/About.tsx b/src/components/profile/About.tsx
index c6f2a26..89ae285 100644
--- a/src/components/profile/About.tsx
+++ b/src/components/profile/About.tsx
@@ -1,11 +1,12 @@
 "use client";
 import React, { useEffect } from 'react';
-import { User, Cake } from 'lucide-react';
+import { User, Cake, Award } from 'lucide-react';
 import { FaUser, FaEnvelope } from "react-icons/fa";
 import { FaLocationDot, FaPhone } from "react-icons/fa6";
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from '@/redux/store';
 import { getUserProfile } from '@/redux/slices/profileSlice';
+import request from '@/utils/axios';
 
 function About() {
     const dispatch = useDispatch<AppDispatch>();
@@ -18,6 +19,8 @@ function About() {
         fetchData();
     }, [dispatch]);
 
+  
+
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
     if (!user) return <div>No user found</div>;
diff --git a/src/components/profile/Order.tsx b/src/components/profile/Order.tsx
index a4bbb49..b5c4e3a 100644
--- a/src/components/profile/Order.tsx
+++ b/src/components/profile/Order.tsx
@@ -1,5 +1,19 @@
-import React from 'react'
+"use client";
+import React, { useEffect, useState } from 'react'
+import request from '@/utils/axios';
+
+
+
+
 function Order() {
+    // const [orderss, setOrders] = useState<Orders[]>([]);
+    // useEffect(() => {
+    //     const fetchData = async () => {
+    //         const response: any = await request.get('/orders');
+    //         setOrders(response.orders);
+    //     };
+    //     fetchData();
+    // }, [])
     const orders: any = [
         {
             name: "Sneakers N12",
@@ -14,6 +28,9 @@ function Order() {
             desc: "tkacheanton dress"
         }
     ]
+    useEffect(() => {
+        
+    }, [])
     return (
         <div className='bg-white shadow-md rounded-lg pl-10 pb-4'>
             <div className='w-[100%]  py-4 '>
diff --git a/src/components/profile/wishlist.tsx b/src/components/profile/wishlist.tsx
index 31f0fc9..9ed272e 100644
--- a/src/components/profile/wishlist.tsx
+++ b/src/components/profile/wishlist.tsx
@@ -1,15 +1,40 @@
-"use client"
-import React, { useEffect } from 'react';
+'use client';
+
+import React, { useEffect, useState } from 'react';
 import { HiDotsHorizontal } from "react-icons/hi";
-import { FaRegHeart } from "react-icons/fa";
 import { VscTag } from "react-icons/vsc";
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from '@/redux/store';
 import { getUserProfile } from '@/redux/slices/profileSlice';
+import request from '@/utils/axios';
+import { Cylinder, Trash, Loader } from 'lucide-react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Link from 'next/link';
+
+interface Product {
+    id: string;
+    productThumbnail: string;
+    stockLevel: number;
+    productName: string;
+    productPrice: number;
+    productCurrency: string;
+}
+
+interface Wish {
+    id: string;
+    userId: string;
+    productId: string;
+    createdAt: string;
+    updatedAt: string;
+    product: Product;
+}
 
-function Wishlist() {
+const Wishlist: React.FC = () => {
     const dispatch = useDispatch<AppDispatch>();
     const { user, loading, error } = useSelector((state: RootState) => state.userProfile);
+    const [wishlist, setWishlist] = useState<Wish[]>([]);
+    const [loadingWishId, setLoadingWishId] = useState<string | null>(null);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -18,78 +43,89 @@ function Wishlist() {
         fetchData();
     }, [dispatch]);
 
+    const getWishlist = async () => {
+        try {
+            const response: any = await request.get('/wishes');
+            setWishlist(response.wishes);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    useEffect(() => {
+        getWishlist();
+    }, []);
+
+    const removeWish = async (wishId: string) => {
+        setLoadingWishId(wishId);
+        try {
+            await request.post('/wishes', { productId: wishId });
+            toast.success('Wishlist item removed successfully');
+            getWishlist(); 
+        } catch (err) {
+            console.error(err);
+            toast.error('Failed to remove wishlist item');
+        } finally {
+            setLoadingWishId(null);
+        }
+    }
+
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
     if (!user) return <div>No user found</div>;
 
-    const wishlist = [
-        {
-            productName: "Snakers 270",
-            image: "https://i5.walmartimages.com/seo/LEEy-world-Toddler-Shoes-Children-Mesh-Shoes-Spring-and-Autumn-New-Boys-Korean-Casual-Girls-Breathable-Sneakers-Sports-Shoes-for-Girls-Blue_31b4bad2-f738-45e3-87e5-884066b97e9a.3da4fe17d1b33554816beee33dd674f9.jpeg",
-            seller: "Kayigamba Blair",
-            wishes: "1,489",
-            price: "100",
-            currency: "$"
-        },
-        {
-            productName: "Snakers 270",
-            image: "https://www.campusshoes.com/cdn/shop/products/FIRST_11G-787_WHT-SIL-B.ORG.jpg?v=1705644651",
-            seller: "Kayigamba Blair",
-            wishes: "1,489",
-            price: "100",
-            currency: "$"
-        },
-        {
-            productName: "Snakers 270",
-            image: "https://cdn.thewirecutter.com/wp-content/media/2023/09/running-shoes-2048px-5946.jpg?auto=webp&quality=75&width=1024",
-            seller: "Kayigamba Blair",
-            wishes: "1,489",
-            price: "100",
-            currency: "$"
-        }
-    ];
-
     return (
         <div className='bg-white shadow-md rounded-lg'>
-            <div className='w-[100%] pl-16 py-4 border-b-[1px] mb-4'>
+            <div className='w-full pl-16 py-4 border-b mb-4'>
                 <h3 className='font-semibold text-primaryBlue'>Wished Products</h3>
             </div>
             <div className='flex flex-col gap-8 px-16'>
-                {wishlist.map((item, index) => (
-                    <div key={index} className='flex flex-col items-center gap-4'>
-                        <div className='flex justify-between w-[100%] items-center'>
-                            <div className='flex justify-center items-center gap-3'>
-                                {user.User && (
-                                    <img src={user.User.profileImage} alt='Profile' width={60} height={60} className='rounded-full' />
-                                )}
-                                <div className='flex flex-col'>
-                                    <span className='text-blue-500'>{user.User?.firstName} {user.User?.lastName}</span>
-                                    <span className='text-[0.6rem] text-green-500'>Your Wishes</span>
-                                </div>
+                {wishlist.length === 0 ? (
+                    <div className='text-center py-8 text-gray-500'>
+                        Your wishlist will appear here
+                    </div>
+                ) : (
+                    wishlist.map((wish) => (
+                        <div key={wish.id} className='flex flex-col items-center gap-4 border-b pb-4'>
+                            <div className='flex justify-between w-full items-center'>
+                                {/* <HiDotsHorizontal className='text-green-500 text-2xl font-semibold' /> */}
+                                <button
+                                    onClick={() => removeWish(wish.productId)}
+                                    className='text-red-500 text-2xl font-semibold'
+                                    disabled={loadingWishId === wish.productId}
+                                >
+                                    {loadingWishId === wish.productId ? <Loader className='animate-spin' /> : <Trash />}
+                                </button>
                             </div>
-                            <HiDotsHorizontal className='text-green-500 text-[1.5rem] font-semibold' />
-                        </div>
-                        <div style={{ backgroundImage: `url(${item.image})` }} className='w-full h-52 rounded-md bg-cover bg-center'></div>
-                        <div className='flex justify-between w-full text-[.8rem] text-blue-900'>
-                            <span className='font-semibold'>{item.productName}</span>
-                            <span>Seller: {item.seller}</span>
-                            <span>{item.price}{item.currency}</span>
-                        </div>
-                        <div className='flex w-full gap-8 justify-start items-center'>
-                            <div className='flex items-center justify-center gap-1'>
-                                <FaRegHeart className='text-[1.3rem] text-green-500' />
-                                <span className='text-secondaryBlue'>{item.wishes}</span>
+                            <div className='w-full aspect-video rounded-md overflow-hidden'>
+                                <Link href={`/products/${wish.product.id}`}>
+                                    <img
+                                        src={wish.product.productThumbnail}
+                                        alt={wish.product.productName}
+                                        className='w-full h-full object-contain'
+                                    />
+                                </Link>
                             </div>
-                            <div className='flex items-center justify-center gap-1'>
-                                <VscTag className='text-[1.3rem] text-green-500' />
-                                <span className='text-secondaryBlue'>{item.price}{item.currency}</span>
+                            <div className='w-full text-blue-900 flex justify-between items-center text-sm'>
+                                <span className='font-semibold text-lg'>{wish.product.productName}</span>
+                                <div className='flex gap-8'>
+                                    <div className='flex items-center gap-1'>
+                                        <Cylinder className='text-2xl text-green-500' />
+                                        <span className='text-secondaryBlue'>{wish.product.stockLevel}</span>
+                                    </div>
+                                    <div className='flex items-center gap-1'>
+                                        <VscTag className='text-2xl text-green-500' />
+                                        <span className='text-secondaryBlue'>{wish.product.productPrice} {wish.product.productCurrency}</span>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                ))}
+                    ))
+                )}
             </div>
+            <ToastContainer />
         </div>
     );
 }
 
-export default Wishlist;
\ No newline at end of file
+export default Wishlist;