diff --git a/components/cart/close-cart.tsx b/components/cart/close-cart.tsx
index 515b94843..473697872 100644
--- a/components/cart/close-cart.tsx
+++ b/components/cart/close-cart.tsx
@@ -3,8 +3,8 @@ import clsx from 'clsx';
 
 export default function CloseCart({ className }: { className?: string }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
-      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
+    <div className="group relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <XMarkIcon className={clsx('h-6 transition-all ease-in-out group-hover:scale-110 ', className)} />
     </div>
   );
 }
diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx
index fa8226ab5..04bc6aa9f 100644
--- a/components/cart/open-cart.tsx
+++ b/components/cart/open-cart.tsx
@@ -9,9 +9,9 @@ export default function OpenCart({
   quantity?: number;
 }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+    <div className="group relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
       <ShoppingCartIcon
-        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+        className={clsx('h-4 transition-all ease-in-out group-hover:scale-110 ', className)}
       />
 
       {quantity ? (