diff --git a/backend/package-lock.json b/backend/package-lock.json
index 1e04bfe..90b733b 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -3998,6 +3998,7 @@
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/winston/-/winston-3.17.0.tgz",
       "integrity": "sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==",
+      "license": "MIT",
       "dependencies": {
         "@colors/colors": "^1.6.0",
         "@dabh/diagnostics": "^2.0.2",
diff --git a/frontend/src/pages/Products/Favorites.jsx b/frontend/src/pages/Products/Favorites.jsx
index b6ac630..830a75b 100644
--- a/frontend/src/pages/Products/Favorites.jsx
+++ b/frontend/src/pages/Products/Favorites.jsx
@@ -3,13 +3,29 @@ import { Link } from "react-router-dom";
 import { useCart } from "../../components/CartContext";
 import { toast } from "react-toastify";
 import HeartIcon from "./HeartIcon";
+
+import { useState, useMemo } from "react";
+
 import { useState } from "react";
 import { useTheme } from "../../context/ThemeContext";
 
+
 const Favorites = () => {
   const favorites = useSelector((state) => state.favorites?.favorites || []);
   const { addToCart } = useCart();
   const [sortBy, setSortBy] = useState("");
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Optimize sorting using useMemo to avoid unnecessary recalculations
+  const filteredFavorites = useMemo(() => {
+    return [...favorites].sort((a, b) => {
+      if (sortBy === "cheapest") return a.price - b.price;
+      if (sortBy === "expensive") return b.price - a.price;
+      return 0; // No sorting
+    });
+  }, [favorites, sortBy]);
+
   const { isDarkMode } = useTheme();
 
   // Apply filtering based on the selected filter
@@ -22,6 +38,7 @@ const Favorites = () => {
     return 0;
   });
 
+
   return (
     <div className={`min-h-screen p-6 ${isDarkMode ? "bg-gray-900 text-white" : "bg-gray-50 text-black"}`}>
       <div className="container mx-auto">
@@ -29,6 +46,42 @@ const Favorites = () => {
           <h1 className="text-4xl font-bold tracking-wide mb-2">
             Your Favorites
           </h1>
+
+          <p className="text-xl text-white py-4">
+            {favorites.length === 0
+              ? "No favorite products yet"
+              : `${favorites.length} favorite products`}
+          </p>
+        </div>
+
+        {/* Custom Sorting Dropdown */}
+        <div className="text-center mb-8 relative inline-block">
+          <label className="text-white font-semibold mr-4">Sort By: Price</label>
+          <div
+            className="px-4 py-2 rounded bg-gray-300 text-black font-semibold cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-400"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {sortBy ? (sortBy === "cheapest" ? "Price: The cheapest" : "Price: The most expensive") : "Select"}
+          </div>
+          {isOpen && (
+            <div className="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-gray-300 rounded-md shadow-md z-10 transition-all duration-300 ease-in-out transform scale-95 opacity-0 hover:scale-100 hover:opacity-100">
+              <div className="py-2">
+                <div
+                  className="px-4 py-2 hover:bg-gray-400 cursor-pointer"
+                  onClick={() => { setSortBy("cheapest"); setIsOpen(false); }}
+                >
+                  The cheapest
+                </div>
+                <div
+                  className="px-4 py-2 hover:bg-gray-400 cursor-pointer"
+                  onClick={() => { setSortBy("expensive"); setIsOpen(false); }}
+                >
+                  The most expensive
+                </div>
+              </div>
+            </div>
+          )}
+
           <p className={`text-lg py-4 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`}>
             {favorites.length === 0 ? "No favorite products yet" : `${favorites.length} favorite products`}
           </p>
@@ -50,6 +103,7 @@ const Favorites = () => {
             <option value="cheapest">Price: The cheapest</option>
             <option value="expensive">Price: The most expensive</option>
           </select>
+
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12 mx-16 my-16">
@@ -61,9 +115,21 @@ const Favorites = () => {
                   isDarkMode ? "bg-gray-800" : "bg-white"
                 }`}
               >
+
+                <h2 className="text-xl font-bold text-white mb-2 pr-8">
+                  {product.name}
+                </h2>
+                <p className="text-lg text-white font-semibold mb-4">
+                  ${product.price}
+                </p>
+
+                {/* Image with aspect ratio fix */}
+                <div className="w-full aspect-square bg-gray-200 rounded-md flex items-center justify-center text-gray-500 relative overflow-hidden">
+
                 <h2 className="text-xl font-bold mb-2 pr-8">{product.name}</h2>
                 <p className="text-lg font-semibold mb-4">${product.price}</p>
                 <div className="w-full h-40 bg-gray-200 rounded-md flex items-center justify-center text-gray-500 relative">
+
                   <img
                     src={product.image}
                     alt={product.name}
@@ -71,14 +137,20 @@ const Favorites = () => {
                   />
                   <HeartIcon className="absolute top-2 right-2 cursor-pointer z-10" product={product} />
                 </div>
+
+                {/* Updated Add to Cart button styling */}
                 <button
                   onClick={() => {
                     addToCart(product);
                     toast.success("Added to cart");
                   }}
+
+                  className="w-full mt-4 bg-pink-500 text-white px-6 py-3 rounded-lg hover:bg-pink-600 transition-transform transform hover:scale-105"
+
                   className={`w-full mt-4 font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:scale-105 ${
                     isDarkMode ? "bg-rose-500 hover:bg-rose-600" : "bg-rose-600 hover:bg-rose-700 text-white"
                   }`}
+
                 >
                   Add to Cart
                 </button>
@@ -86,6 +158,14 @@ const Favorites = () => {
             ))
           ) : (
             <div className="col-span-full text-center">
+
+              <p className="text-white text-xl font-semibold mb-4">
+                Your favorites list is empty 😔
+              </p>
+              <Link
+                to="/shop"
+                className="bg-pink-500 text-white px-6 py-3 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 hover:bg-pink-600 cursor-pointer"
+
               <p className={`text-lg mb-4 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`}>
                 Your favorites list is empty
               </p>
@@ -94,6 +174,7 @@ const Favorites = () => {
                 className={`px-6 py-3 rounded-lg transition-colors inline-block shadow-md ${
                   isDarkMode ? "bg-rose-500 hover:bg-rose-600 text-white" : "bg-rose-600 hover:bg-rose-700 text-white"
                 }`}
+
               >
                 Go Shopping
               </Link>
@@ -105,4 +186,4 @@ const Favorites = () => {
   );
 };
 
-export default Favorites;
\ No newline at end of file
+export default Favorites;
diff --git a/package-lock.json b/package-lock.json
index 4bc2104..b3c58bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "license": "ISC",
       "dependencies": {
         "bcryptjs": "^2.4.3",
-        "concurrently": "^9.0.1",
         "cookie-parser": "^1.4.7",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
@@ -24,6 +23,9 @@
         "nodemon": "^3.1.7",
         "store": "file:"
       },
+      "devDependencies": {
+        "concurrently": "^9.1.2"
+      },
       "engines": {
         "node": "18.x"
       }
@@ -938,6 +940,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -953,6 +956,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -1032,9 +1036,11 @@
       }
     },
     "node_modules/concurrently": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.0.1.tgz",
-      "integrity": "sha512-wYKvCd/f54sTXJMSfV6Ln/B8UrfLBKOYa+lzc6CHay3Qek+LorVSBdMVfyewFhRbH0Rbabsk4D+3PL/VjQ5gzg==",
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz",
+      "integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "chalk": "^4.1.2",
         "lodash": "^4.17.21",
@@ -1478,6 +1484,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1689,7 +1696,8 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
@@ -2239,6 +2247,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -2353,6 +2362,7 @@
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
       "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2459,6 +2469,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2511,6 +2522,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
       "bin": {
         "tree-kill": "cli.js"
       }
diff --git a/package.json b/package.json
index 98388c4..d8714cf 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
   "license": "ISC",
   "dependencies": {
     "bcryptjs": "^2.4.3",
-    "concurrently": "^9.0.1",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
@@ -30,5 +29,8 @@
     "multer": "^1.4.5-lts.1",
     "nodemon": "^3.1.7",
     "store": "file:"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.2"
   }
 }