diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
index 116b4eadf..e36fc8d40 100644
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@@ -28,7 +28,7 @@ const UserNav: FC<Props> = ({ className }) => {
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
           <li className={s.item}>
-            <Button variant="naked" onClick={toggleSidebar} aria-label="Cart">
+            <Button className={s.item}  variant="naked" onClick={toggleSidebar} aria-label="Cart">
               <Bag />
             </Button>
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index a54fe6f55..34bdea107 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -36,12 +36,12 @@
 }
 
 .naked {
-  @apply bg-white text-gray-800 font-semibold border-none shadow-none outline-none py-0 px-0;
+  @apply bg-transparent font-semibold border-none shadow-none outline-none py-0 px-0;
 }
 
 .naked:hover,
 .naked:focus {
-  @apply bg-white border-none;
+  @apply bg-transparent border-none;
 }
 
 .disabled,