diff --git a/src/components/CartComponent/CartDrawer.jsx b/src/components/CartComponent/CartDrawer.jsx
index 8cb6886b..26b8d3bb 100644
--- a/src/components/CartComponent/CartDrawer.jsx
+++ b/src/components/CartComponent/CartDrawer.jsx
@@ -176,7 +176,7 @@ export default function CartDrawer({ isOpen, onClose }) {
             className="p-2 hover:bg-gray-100 rounded-full transition"
             aria-label="Close cart"
           >
-            <X className="h-5 w-5 text-gray-700" />
+            <X className="close-icon h-5 w-5 text-gray-700" />
           </button>
         </div>
 
@@ -196,7 +196,11 @@ export default function CartDrawer({ isOpen, onClose }) {
                 <p className="text-gray-600 text-sm font-medium mb-6">
                   Your cart is empty
                 </p>
-                <Link to="/products" onClick={onClose} className="text-gray-800 underline">
+                <Link
+                  to="/products"
+                  onClick={onClose}
+                  className="text-gray-800 underline"
+                >
                   Explore our products.
                 </Link>
               </div>
diff --git a/src/components/Search/SearchBox.jsx b/src/components/Search/SearchBox.jsx
index d1ec6100..95cfc092 100644
--- a/src/components/Search/SearchBox.jsx
+++ b/src/components/Search/SearchBox.jsx
@@ -149,7 +149,7 @@ export default function SearchBox({ onClose, isOpen }) {
               className="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
               aria-label="Close search"
             >
-              <X className="w-5 h-5 text-gray-600" />
+              <X className="close-icon w-5 h-5 text-gray-600 " />
             </button>
           </div>
 
diff --git a/src/components/WishList/WishListScreen.jsx b/src/components/WishList/WishListScreen.jsx
index ccd0b0bb..82f41157 100644
--- a/src/components/WishList/WishListScreen.jsx
+++ b/src/components/WishList/WishListScreen.jsx
@@ -120,7 +120,7 @@ const WishListScreen = ({ wishListData, setWishListOpen }) => {
               className="text-gray-600 hover:text-red-500 cursor-pointer"
               onClick={() => setWishListOpen(false)}
             >
-              <X size={24} />
+              <X className="close-icon" />
             </button>
           </div>
 
diff --git a/src/index.css b/src/index.css
index a8ccbab7..474978e2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -163,3 +163,20 @@
     transition: none !important;
   }
 }
+
+.close-icon {
+  height: 1.25rem;
+  width: 1.25rem;
+  color: #374151;
+  transition-property: transform, color;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  transform: rotate(0deg) scale(1);
+}
+
+.close-icon:hover,
+.close-icon:focus {
+  transform: rotate(90deg) scale(1.1);
+  color: #ef4444;
+}
\ No newline at end of file