diff --git a/package.json b/package.json
index 455a9dcd..9812bb5f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "axios-mock-adapter": "^1.22.0",
     "chart.js": "^4.4.3",
     "date-fns": "^3.6.0",
-    "chart.js": "^4.4.3",
     "cloudinary": "^2.2.0",
     "cloudinary-core": "^2.13.1",
     "dotenv": "^16.4.5",
diff --git a/src/components/Popular/Item.tsx b/src/components/Popular/Item.tsx
index 5d62c749..81ff97c3 100644
--- a/src/components/Popular/Item.tsx
+++ b/src/components/Popular/Item.tsx
@@ -6,7 +6,10 @@ interface MostPopularItemProps {
 
 function SingleItem({ product }: MostPopularItemProps) {
   return (
-    <div className=" flex flex-row hover:scale-105  hover:translate-y-0.5 hover:translate-x-0.5">
+    <a
+      href={`product-details/${product.id}`}
+      className=" flex flex-row hover:scale-105  hover:translate-y-0.5 hover:translate-x-0.5"
+    >
       <div className=" flex flex-row items-center justify-center h-20 w-20 ">
         <img
           src={product.image}
@@ -27,7 +30,7 @@ function SingleItem({ product }: MostPopularItemProps) {
           </p>
         </div>
       </div>
-    </div>
+    </a>
   );
 }