diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
index 09bcad4..9d89568 100644
--- a/src/app/products/[id]/page.tsx
+++ b/src/app/products/[id]/page.tsx
@@ -61,7 +61,7 @@ function Page() {
   };
   return (
     <div>
-     {/* // <StripeProvider> */}
+      {/* // <StripeProvider> */}
       <Header />
       <>
         {isLoading ? (
@@ -157,8 +157,10 @@ function Page() {
                         />
                       </div>
                     </div>
-                    <span className="font-medium text-2xl text-blue-300 mt-2">
-                      <span className="font-bold text-3xl">{productPrice}</span>{' '}
+                    <span className="font-medium text-2xl text-green-400 mt-2">
+                      <span className="font-bold text-3xl">
+                        {productPrice.toLocaleString()}
+                      </span>{' '}
                       RWF
                     </span>
                   </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d12ccaa..f4a80ef 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -34,6 +34,7 @@ import {
 import { useRouter } from 'next/navigation';
 const Header = () => {
   const { isOrdersOverlayOpen, toggleOrdersSlider } = OrdersOverlay();
+  const [activelink, setActivelink] = useState('home');
 
   const [showlModal, setShowmodal] = useState(false);
   const [showCart, setShowCart] = useState(false);
@@ -69,6 +70,13 @@ const Header = () => {
   const [viewMenu, setViewmenu] = useState(false);
   const [userdata, setUserdata] = useState<any | null>(null);
   useEffect(() => {
+    const link = window.location.href
+      .toString()
+      .split('/')
+      .splice(-1)
+      .toString();
+    setActivelink(link);
+
     const user = localStorage.getItem('profile');
     const userData = JSON.parse(user as string);
     setUserdata(userData);
@@ -87,6 +95,7 @@ const Header = () => {
       ? router.push('/profile')
       : router.push('/dashboard');
   };
+
   return (
     <>
       <div className="sticky top-0 z-50 w-full border  ">
@@ -181,22 +190,24 @@ const Header = () => {
             </div>
           )}
         </div>
-        <div className="sm:flex hidden justify-center items-center bg-gray-100 py-5">
-          <nav className=" hidden w-full max-w-1/2 sm:flex justify-center  ">
-            <ul className="w-full flex gap-10 justify-center items-center">
-              <li className="text-black hover:text-blue-600">
+        <div className="sm:flex hidden justify-between items-center bg-gray-100 py-5">
+          <nav className=" flex-1 ml-[20%]  hidden  max-w-1/2 sm:flex justify-center  ">
+            <ul className="w-full  flex gap-10 justify-center items-center">
+              <li
+                className={`${activelink === '' ? 'text-blue-600' : 'text-black'} font-normal hover:text-blue-600 cursor-pointer `}
+              >
                 <Link href="/">Home</Link>
               </li>
               <li>
                 <Link
                   href="/products"
-                  className="text-black hover:text-blue-600"
+                  className={`${activelink === 'products' ? 'text-blue-600' : 'text-black'} font-normal hover:text-blue-600 cursor-pointer `}
                 >
                   Products
                 </Link>
               </li>
               <li
-                className="text-black hover:text-blue-600"
+                className={`${isOrdersOverlayOpen === true ? 'text-blue-600' : 'text-black'} font-normal hover:text-blue-600 cursor-pointer `}
                 onClick={toggleOrdersSlider}
               >
                 Order
diff --git a/src/components/LatestCard.tsx b/src/components/LatestCard.tsx
index 95f41e8..889f4ed 100644
--- a/src/components/LatestCard.tsx
+++ b/src/components/LatestCard.tsx
@@ -27,7 +27,7 @@ const LatestCard: React.FC<Properties> = ({
         <div className=" bg-white h-full w-full bottom-0 left-0">
           <h1 className=" font-semibold text-2xl  mb-2 capitalize">{name}</h1>
           <div className="flex gap-4">
-            <p className="">Price:{price} RWF </p>
+            <p className="">Price:{price.toLocaleString()} RWF </p>
           </div>
         </div>
       </div>
diff --git a/src/components/UsersAdmin.tsx b/src/components/UsersAdmin.tsx
index 60642fa..2a956eb 100644
--- a/src/components/UsersAdmin.tsx
+++ b/src/components/UsersAdmin.tsx
@@ -114,8 +114,8 @@ const UsersPageAdmin = () => {
     <>
       <div className="w-[100%] flex">
         {isLoading ? (
-          <div className="flex w-full min-h-[400px] justify-center items-center">
-            <div className="border-t-4 border-b-4 border-black rounded-full w-10 h-10 animate-spin m-auto"></div>
+          <div className="min-h-screen w-full justify-center items-center flex">
+            <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
           </div>
         ) : (
           <div className="w-[100%] sm:w-[100%] min-h-[600px] mx-auto mt-10 py-6 px-10 border border-gray-400  ">
@@ -180,7 +180,6 @@ const UsersPageAdmin = () => {
                         handle={() => table.nextPage()}
                         isDisabled={!table.getCanNextPage()}
                         rotate
-                        
                       />
                     </div>
                   </div>
diff --git a/src/components/chartssection.tsx b/src/components/chartssection.tsx
index 56f0f31..51eee0f 100644
--- a/src/components/chartssection.tsx
+++ b/src/components/chartssection.tsx
@@ -32,7 +32,7 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
     <div className="flex gap-7 sm:w-[80%] h-full sm:flex-row flex-col w-full sm:justify-start sm:items-start justify-center items-center ">
       {user && user?.Role?.name === 'seller' ? (
         <div className="sm:w-[50%] w-[90%] border-[1px] p-2 px-4">
-          <h1 className="font-semibold text-2xl">Seller statistics</h1>
+          <h1 className="font-semibold text-1xl">Seller statistics</h1>
           <Chart
             chartType="PieChart"
             data={data1}
@@ -43,7 +43,7 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
         </div>
       ) : (
         <div className="sm:w-[50%] w-[90%] border-[1px] p-2">
-          <h1 className="font-bold text-2xl text-left mx-4 w-full mb-3">
+          <h1 className="font-bold text-1xl text-left mx-4 w-full mb-3">
             All Markert Users
           </h1>
           <div className=" sm:w-[90%] w-[100%] p-2 rounded-sm overflow-auto h-[250px]">
@@ -83,8 +83,8 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
         </div>
       )}
       <div className="sm:w-[50%] w-[90%] border-[1px] h-[200px]  ">
-        <div className="w-full flex justify-center items-center flex-col ">
-          <h1 className="font-semibold text-2xl text-left mx-4 w-full mb-3">
+        <div className="w-full flex justify-center mx-4 mt-2 items-center flex-col ">
+          <h1 className="font-semibold text-1xl text-left mx-4 w-full mb-3">
             All Categolie On Market
           </h1>
           <div className=" w-[80%] p-2 rounded-sm overflow-auto h-[150px]">
diff --git a/src/components/products.tsx b/src/components/products.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/profile/About.tsx b/src/components/profile/About.tsx
index a58cbf9..67bf79a 100644
--- a/src/components/profile/About.tsx
+++ b/src/components/profile/About.tsx
@@ -1,64 +1,70 @@
-"use client";
+'use client';
 import React, { useEffect } from 'react';
 import { User, Cake, Award } from 'lucide-react';
-import { FaUser, FaEnvelope } from "react-icons/fa";
-import { FaLocationDot, FaPhone } from "react-icons/fa6";
+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>();
-    const { user, loading, error } = useSelector((state: RootState) => state.userProfile);
+  const dispatch = useDispatch<AppDispatch>();
+  const { user, loading, error } = useSelector(
+    (state: RootState) => state.userProfile,
+  );
 
-    useEffect(() => {
-        const fetchData = async () => {
-            await dispatch(getUserProfile());
-        };
-        fetchData();
-    }, [dispatch]);
+  useEffect(() => {
+    const fetchData = async () => {
+      await dispatch(getUserProfile());
+    };
+    fetchData();
+  }, [dispatch]);
 
-  
+  if (error) return <div>Error: {error}</div>;
+  if (!user) return <div>No user found</div>;
 
-    if (loading) return <div>Loading...</div>;
-    if (error) return <div>Error: {error}</div>;
-    if (!user) return <div>No user found</div>;
+  const items: any = [
+    {
+      icon: <Cake className="text-green-500" />,
+      details: `${user.User?.birthDate}`,
+    },
+    {
+      icon: <FaLocationDot className="text-green-500" />,
+      details: `${user.User?.whereYouLive}`,
+    },
+    {
+      icon: <FaEnvelope className="text-green-500" />,
+      details: `${user.User?.email}`,
+    },
+    {
+      icon: <FaPhone className="text-green-500" />,
+      details: `${user.User?.phone}`,
+    },
+  ];
 
-    const items: any = [
-        {
-            icon: <Cake className='text-green-500' />,
-            details: `${user.User?.birthDate}`,
-        },
-        {
-            icon: <FaLocationDot className='text-green-500' />,
-            details: `${user.User?.whereYouLive}`,
-        },
-        {
-            icon: <FaEnvelope className='text-green-500' />,
-            details: `${user.User?.email}`,
-        },
-        {
-            icon: <FaPhone className='text-green-500' />,
-            details: `${user.User?.phone}`,
-        }
-    ];
-
-    return (
-        <div className='bg-white shadow-md pl-5 pr-2 p-6 rounded-lg max-h-72'>
-            <h3 className='font-semibold text-secondaryBlue text-[1rem] pr-5'>About</h3>
-            <div>
-                {items?.map((item: any, index: number) => (
-                    <div key={index} className={`flex flex-col ${index === items.length - 1 ? "" : "border-b-[1px]"} py-3 pl-3 pr-0`}>
-                        <div className='flex items-center gap-2'>
-                            {item.icon}
-                            <span className='text-secondaryBlue font-extralight text-[0.7rem]'>{item.details}</span>
-                        </div>
-                    </div>
-                ))}
+  return (
+    <div className="bg-white shadow-md pl-5 pr-2 p-6 rounded-lg max-h-72">
+      <h3 className="font-semibold text-secondaryBlue text-[1rem] pr-5">
+        About
+      </h3>
+      <div>
+        {items?.map((item: any, index: number) => (
+          <div
+            key={index}
+            className={`flex flex-col ${index === items.length - 1 ? '' : 'border-b-[1px]'} py-3 pl-3 pr-0`}
+          >
+            <div className="flex items-center gap-2">
+              {item.icon}
+              <span className="text-secondaryBlue font-extralight text-[0.7rem]">
+                {item.details}
+              </span>
             </div>
-        </div>
-    );
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 }
 
-export default About;
\ No newline at end of file
+export default About;
diff --git a/src/components/profile/Order.tsx b/src/components/profile/Order.tsx
index 0c16a60..5e60e28 100644
--- a/src/components/profile/Order.tsx
+++ b/src/components/profile/Order.tsx
@@ -1,59 +1,51 @@
-"use client";
-import React, { useEffect, useState } 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",
-            desc: "Men's Shoes"
-        },
-        {
-            name: "Toyota",
-            desc: "Best car in city"
-        },
-        {
-            name: "Girl Dress",
-            desc: "tkacheanton dress"
-        }
-    ]
-    useEffect(() => {
-        
-    }, [])
-    return (
-        <div className='bg-white shadow-md rounded-lg pl-10 pb-4'>
-            <div className='w-[100%]  py-4 '>
-                <h3 className='font-semibold text-primaryBlue'>Orders</h3>
+  // 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',
+      desc: "Men's Shoes",
+    },
+    {
+      name: 'Toyota',
+      desc: 'Best car in city',
+    },
+    {
+      name: 'Girl Dress',
+      desc: 'tkacheanton dress',
+    },
+  ];
+  useEffect(() => {}, []);
+  return (
+    <div className="bg-white shadow-md rounded-lg pl-10 pb-4">
+      <div className="w-[100%]  py-4 ">
+        <h3 className="font-semibold text-primaryBlue">Orders</h3>
+      </div>
+      <div className="flex flex-col gap-4">
+        {orders?.map((order: any, index: any) => {
+          return (
+            <div className="flex flex-col">
+              <span className="text-secondaryBlue text-[.8rem]">
+                {order.name}
+              </span>
+              <span className="text-greenMain text-[.7rem] opacity-65">
+                {order.desc}
+              </span>
             </div>
-            <div className='flex flex-col gap-4'>
-                {
-                    orders?.map((order: any, index: any) => {
-                        return (
-                            <div className='flex flex-col'>
-                                <span className='text-secondaryBlue text-[.8rem]'>{order.name}</span>
-                                <span className='text-greenMain text-[.7rem] opacity-65'>{order.desc}</span>
-                            </div>
-                        )
-                    })
-                }
-            </div>
-        </div>
-    )
+          );
+        })}
+      </div>
+    </div>
+  );
 }
-export default Order
-
-
-
-
-
+export default Order;
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 5025bf9..eaaed72 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -60,7 +60,12 @@ function ProfileHeader() {
     fetchData();
   }, [dispatch]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading)
+    return (
+      <div className="min-h-screen w-full justify-center items-center flex">
+        <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+      </div>
+    );
 
   if (!user) return <div>No user found</div>;
 
diff --git a/src/components/profile/wishlist.tsx b/src/components/profile/wishlist.tsx
index 39862ad..b91005c 100644
--- a/src/components/profile/wishlist.tsx
+++ b/src/components/profile/wishlist.tsx
@@ -75,10 +75,9 @@ const Wishlist: React.FC = () => {
     }
   };
 
-  if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
   if (!user) return <div>No user found</div>;
-  console.log(wishlist, '------------ wishlist');
+
   return (
     <div className="bg-white shadow-md rounded-lg">
       <div className="w-full pl-16 py-4 border-b mb-4">