diff --git a/src/index.css b/src/index.css
index d09967a..ec973b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -319,3 +319,7 @@ label {
   position: relative !important;
   top: 3px !important;
 }
+
+.cart-button .ant-badge-count {
+  left: 0px !important;
+}
diff --git a/src/pages/menu/components/CartButton/CartButton.module.css b/src/pages/menu/components/CartButton/CartButton.module.css
index 651f5e0..b170ca9 100644
--- a/src/pages/menu/components/CartButton/CartButton.module.css
+++ b/src/pages/menu/components/CartButton/CartButton.module.css
@@ -2,6 +2,12 @@
 .scrollToTopButton {
   animation: fadeInUp 0.3s ease-out;
   transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background-color: var(--primary);
+  border-color: var(--primary);
+  width: 56px !important;
+  height: 56px !important;
+  gap: 0; /* // this overrides antd's gap that is preventing centering icon */
 }
 
 .scrollToTopButton:hover {
diff --git a/src/pages/menu/components/CartButton/CartButton.tsx b/src/pages/menu/components/CartButton/CartButton.tsx
index 107c301..c96c4eb 100644
--- a/src/pages/menu/components/CartButton/CartButton.tsx
+++ b/src/pages/menu/components/CartButton/CartButton.tsx
@@ -4,12 +4,10 @@ import { selectCartItems } from "features/order/orderSlice";
 import { useCallback } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
-import { colors } from "ThemeConstants";
 import styles from "./CartButton.module.css";
 
 export function CartButton() {
   const { isRTL } = useAppSelector((state) => state.locale);
-  const { themeName } = useAppSelector((state) => state.theme);
   const { id } = useParams();
   const navigate = useNavigate();
   const items = useAppSelector(selectCartItems);
@@ -28,8 +26,9 @@ export function CartButton() {
         right: !isRTL ? "auto" : "20px",
         left: !isRTL ? "20px" : "auto",
       }}
+      className={'cart-button'}
     >
-      <Badge count={totalItems} size="default">
+      <Badge count={totalItems} size="default" className={styles.badge}>
         <Button
           type="primary"
           shape="circle"
@@ -37,15 +36,6 @@ export function CartButton() {
           icon={<CartIcon />}
           onClick={onCartClick}
           className={`${styles.scrollToTopButton}`}
-          style={{
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-            backgroundColor:
-              themeName === "dark" ? colors.primary : colors.primary,
-            borderColor: themeName === "dark" ? colors.primary : colors.primary,
-            width: 56,
-            height: 56,
-            gap: "0", // this overrides antd's gap that is preventing centering icon
-          }}
         />
       </Badge>
     </div>