diff --git a/src/components/CartActionsButtons/CartActionsButtons.module.css b/src/components/CartActionsButtons/CartActionsButtons.module.css
index efe1520..a8ba14b 100644
--- a/src/components/CartActionsButtons/CartActionsButtons.module.css
+++ b/src/components/CartActionsButtons/CartActionsButtons.module.css
@@ -1,12 +1,11 @@
 .quantityControls {
   display: flex;
   align-items: center;
-  background-color: #ffb70014;
+  background-color: var(--background);
   border-radius: 888px;
   width: fit-content;
 }
 
-
 .quantityLabel {
   font-size: 14px;
   color: var(--secondary-color);
@@ -15,8 +14,8 @@
 
 .quantityInputContainer {
   display: flex;
+  padding: 0 1px;
   align-items: center;
-  padding: 8px;
   border-radius: 888px;
   width: 90px;
   height: 32px;
@@ -24,12 +23,14 @@
 
 .quantityButton {
   padding: 0;
-  width: 25px;
-  height: 32px;
+  width: 28px !important;
+  height: 28px !important;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--secondary-color);
+  color: var(--secondary-background);
+  background-color: var(--primary);
+  border-radius: 50%;
   transition: all 0.2s ease;
 }
 
@@ -78,10 +79,15 @@
 }
 
 .plusIcon {
-margin-bottom: 1px;
+  margin-bottom: 1px;
+  color: var(--secondary-background);
+}
+
+.minusIcon{
+  color: var(--secondary-foreground);
 }
 
 .deleteIcon {
   position: relative;
   right: 1px;
-}
\ No newline at end of file
+}
diff --git a/src/components/CartActionsButtons/CartActionsButtons.tsx b/src/components/CartActionsButtons/CartActionsButtons.tsx
index ee89b79..44c6fd9 100644
--- a/src/components/CartActionsButtons/CartActionsButtons.tsx
+++ b/src/components/CartActionsButtons/CartActionsButtons.tsx
@@ -1,7 +1,6 @@
-import { MinusOutlined } from "@ant-design/icons";
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, InputNumber, Popconfirm } from "antd";
 import DeleteIcon from "components/Icons/DeleteIcon";
-import PlusIcon from "components/Icons/PlusIcon";
 import { removeItem, updateQuantity } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch } from "redux/hooks";
@@ -46,20 +45,31 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
         <div className={styles.quantityInputContainer}>
           {item.quantity > 1 ? (
             <Button
-              type="text"
+              shape="circle"
+              iconPosition="start"
+              icon={<MinusOutlined title="add" className={styles.minusIcon} />}
               size="small"
               onClick={() =>
-                dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: Math.max(1, item.quantity - 1) }))
+                dispatch(
+                  updateQuantity({
+                    id: item.id,
+                    uniqueId: item.uniqueId || "",
+                    quantity: Math.max(1, item.quantity - 1),
+                  }),
+                )
               }
-              className={styles.quantityButton}
-            >
-              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
-            </Button>
+              className={styles.addButton}
+              style={{
+                width: 28,
+                height: 28,
+                border: "none",
+              }}
+            />
           ) : (
             <Popconfirm
               title={t("cart.deleteConfirmation.title")}
               description={t("cart.deleteConfirmation.content")}
-              onConfirm={() => handleDeleteItem(item.uniqueId || '')}
+              onConfirm={() => handleDeleteItem(item.uniqueId || "")}
               okText={t("cart.deleteConfirmation.confirm")}
               cancelText={t("cart.deleteConfirmation.cancel")}
               okButtonProps={{ danger: true }}
@@ -72,11 +82,26 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
               }}
             >
               <Button
-                type="text"
+                shape="circle"
+                iconPosition="start"
+                icon={<DeleteIcon />}
                 size="small"
-                danger
-                icon={<DeleteIcon className={styles.deleteIcon} />}
-                className={styles.removeButton}
+                onClick={() =>
+                  dispatch(
+                    updateQuantity({
+                      id: item.id,
+                      uniqueId: item.uniqueId || "",
+                      quantity: Math.max(1, item.quantity - 1),
+                    }),
+                  )
+                }
+                className={styles.addButton}
+                style={{
+                  background: "#FEF2F2",
+                  width: 28,
+                  height: 28,
+                  border: "none",
+                }}
               />
             </Popconfirm>
           )}
@@ -84,22 +109,42 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
             min={1}
             max={100}
             value={item.quantity || 1}
-            onChange={(value) => dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: value || 1 }))}
+            onChange={(value) =>
+              dispatch(
+                updateQuantity({
+                  id: item.id,
+                  uniqueId: item.uniqueId || "",
+                  quantity: value || 1,
+                }),
+              )
+            }
             size="small"
             controls={false}
             className={styles.quantityInput}
             name="id"
           />
           <Button
-            type="text"
+            shape="circle"
+            iconPosition="start"
+            icon={<PlusOutlined title="add" className={styles.plusIcon} />}
             size="small"
             onClick={() =>
-              dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: Math.min(100, item.quantity + 1) }))
+              dispatch(
+                updateQuantity({
+                  id: item.id,
+                  uniqueId: item.uniqueId || "",
+                  quantity: Math.min(100, item.quantity + 1),
+                }),
+              )
             }
-            className={styles.quantityButton}
-          >
-            <PlusIcon className={styles.plusIcon} />
-          </Button>
+            className={styles.addButton}
+            style={{
+              backgroundColor: colors.primary,
+              width: 28,
+              height: 28,
+              border: "none",
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Icons/BackIcon.tsx b/src/components/Icons/BackIcon.tsx
index f2649a3..2c76718 100644
--- a/src/components/Icons/BackIcon.tsx
+++ b/src/components/Icons/BackIcon.tsx
@@ -4,11 +4,12 @@ import { ProGray1 } from "ThemeConstants";
 interface BackIconType {
   className?: string;
   onClick?: () => void;
+  iconColor?: string;
 }
 
-const BackIcon = ({ className, onClick }: BackIconType) => {
+const BackIcon = ({ className, onClick, iconColor }: BackIconType) => {
   const { themeName } = useAppSelector((state) => state.theme);
-  const color = themeName === "dark" ? "white" : ProGray1;
+  const color = iconColor || (themeName === "dark" ? "white" : ProGray1);
   return (
     <svg
       width="16"
diff --git a/src/components/Icons/cart/CartIcon.tsx b/src/components/Icons/cart/CartIcon.tsx
index a4fdf9e..839e2a9 100644
--- a/src/components/Icons/cart/CartIcon.tsx
+++ b/src/components/Icons/cart/CartIcon.tsx
@@ -6,20 +6,19 @@ interface CartType {
 const CartIcon = ({ className, onClick }: CartType) => {
   return (
     <svg
-      width="22px"
-      height="22px"
-      viewBox="0 0 16 16"
+      width="28"
+      height="24"
+      viewBox="0 0 28 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       onClick={onClick}
     >
       <path
-        d="M11.1664 5.33333C11.1664 6.04058 10.8855 6.71885 10.3854 7.21895C9.88527 7.71905 9.20699 8 8.49975 8C7.7925 8 7.11422 7.71905 6.61413 7.21895C6.11403 6.71885 5.83308 6.04058 5.83308 5.33333M2.92189 4.93426L2.45522 10.5343C2.35497 11.7373 2.30485 12.3388 2.5082 12.8028C2.68687 13.2105 2.99643 13.5469 3.38787 13.7588C3.83339 14 4.43699 14 5.64417 14H11.3553C12.5625 14 13.1661 14 13.6116 13.7588C14.0031 13.5469 14.3126 13.2105 14.4913 12.8028C14.6946 12.3388 14.6445 11.7373 14.5443 10.5343L14.0776 4.93426C13.9913 3.89917 13.9482 3.38162 13.719 2.9899C13.5171 2.64496 13.2166 2.3684 12.8561 2.1959C12.4467 2 11.9273 2 10.8887 2L6.11084 2C5.07216 2 4.55282 2 4.14342 2.1959C3.78291 2.3684 3.48234 2.64496 3.2805 2.9899C3.05128 3.38162 3.00815 3.89917 2.92189 4.93426Z"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.28072 1.00076C3.02082 2.00297 2.68807 3.69745 2.02409 7.08786L0.889727 12.881C-0.0434755 17.6487 -0.509321 20.0326 0.850403 21.6025C2.21164 23.1724 4.74354 23.1724 9.81036 23.1724L18.1895 23.1724C23.2563 23.1724 25.7882 23.1724 27.1495 21.6025C28.5107 20.0326 28.0418 17.6487 27.1102 12.881L25.9758 7.08786C25.3103 3.6989 24.9791 2.00297 23.7192 1.00076C22.4593 0 20.6579 0 17.0552 0L10.9447 0C7.34198 0 5.54062 0 4.28072 1.00076ZM10.7904 5.43248C11.025 6.06833 11.4597 6.61888 12.0346 7.0083C12.6096 7.39772 13.2965 7.60683 14.0007 7.60683C14.7049 7.60683 15.3918 7.39772 15.9668 7.0083C16.5417 6.61888 16.9764 6.06833 17.2109 5.43248C17.3167 5.16817 17.5261 4.95383 17.7944 4.83511C18.0628 4.71639 18.3689 4.70267 18.6477 4.79687C18.9265 4.89107 19.1558 5.08574 19.2869 5.33944C19.418 5.59314 19.4405 5.88583 19.3496 6.15517C18.9585 7.21435 18.2342 8.1314 17.2762 8.78001C16.3183 9.42863 15.1739 9.77692 14.0007 9.77692C12.8275 9.77692 11.6831 9.42863 10.7252 8.78001C9.76722 8.1314 9.04285 7.21435 8.6518 6.15517C8.59929 6.02008 8.5754 5.87634 8.5815 5.73232C8.58759 5.5883 8.62357 5.44688 8.68732 5.3163C8.75107 5.18572 8.84133 5.06861 8.95282 4.97177C9.06432 4.87493 9.19484 4.80031 9.33675 4.75226C9.47867 4.7042 9.62916 4.68368 9.77945 4.69188C9.92974 4.70007 10.0768 4.73683 10.2121 4.80001C10.3474 4.86319 10.4682 4.95152 10.5675 5.05986C10.6668 5.16819 10.7426 5.29582 10.7904 5.43248Z"
+        fill="white"
       />
     </svg>
   );
diff --git a/src/pages/menu/components/CartButton/CartButton.tsx b/src/pages/menu/components/CartButton/CartButton.tsx
index 07dc9be..5dc6a6a 100644
--- a/src/pages/menu/components/CartButton/CartButton.tsx
+++ b/src/pages/menu/components/CartButton/CartButton.tsx
@@ -6,6 +6,7 @@ import { useCallback } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import styles from "./CartButton.module.css";
+import ProText from "components/ProText";
 
 export function CartButton() {
   const { isRTL } = useAppSelector((state) => state.locale);
@@ -33,8 +34,10 @@ export function CartButton() {
         bottom: "20px",
         right: !isRTL ? "auto" : "20px",
         left: !isRTL ? "20px" : "auto",
+        display: 'flex',
+        flexDirection: "row",
+        justifyContent:"space-around"
       }}
-      className={"cart-button"}
     >
       <Badge count={totalItems} size="default" className={styles.badge}>
         <Button
@@ -46,6 +49,7 @@ export function CartButton() {
           className={`${styles.scrollToTopButton}`}
         />
       </Badge>
+      <ProText>Cart</ProText>
     </div>
   );
 }
diff --git a/src/pages/menu/components/MenuFooter/MenuFooter.tsx b/src/pages/menu/components/MenuFooter/MenuFooter.tsx
index 8889b14..5e5a7ed 100644
--- a/src/pages/menu/components/MenuFooter/MenuFooter.tsx
+++ b/src/pages/menu/components/MenuFooter/MenuFooter.tsx
@@ -1,7 +1,10 @@
 import { Badge, Button } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import BackIcon from "components/Icons/BackIcon";
 import CartIcon from "components/Icons/cart/CartIcon";
+import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
-import { selectCartItems } from "features/order/orderSlice";
+import { selectCartItems, selectGrandTotal } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
@@ -17,6 +20,8 @@ export function MenuFooter() {
   const { subdomain } = useParams();
   const { orderType } = useAppSelector((s) => s.order);
   const totalItems = items.length;
+  const grandTotal = useAppSelector(selectGrandTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   console.log(orderType);
 
@@ -48,45 +53,74 @@ export function MenuFooter() {
             style={{
               width: "100%",
               padding: "0 16px",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              backgroundColor: colors.primary,
+              height: 48,
+              borderRadius: "999px",
             }}
           >
             <Button
               type="primary"
               shape="round"
               style={{
-                width: "100%",
-                height: 50,
+                height: 48,
                 boxShadow: "none",
               }}
             >
               <Badge
                 count={totalItems}
                 size="default"
+                offset={ isRTL ? [-2, 18] : [2, 18]}
                 style={{
                   borderColor: colors.primary,
                   color: "white",
                   fontSize: isMobile ? 10 : 12,
                   width: isMobile ? 10 : 12,
                 }}
+  
               >
-                <ProText
-                  style={{
-                    color: "white",
-                    margin: "0 10px",
-                  }}
-                >
-                  { orderType === OrderType.Pay ? t("menu.pay") : t("menu.viewCart")}
-                </ProText>
                 <span
                   style={{
                     position: "relative",
-                    top: 4,
+                    top: 1,
                   }}
                 >
                   <CartIcon />
                 </span>
               </Badge>
+              <ProText
+                style={{
+                  color: "white",
+                  margin: "0 10px",
+                }}
+              >
+                {orderType === OrderType.Pay
+                  ? t("menu.pay")
+                  : t("menu.viewCart")}
+              </ProText>
             </Button>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <ArabicPrice
+                price={grandTotal}
+                style={{
+                  color: "var(--secondary-background)",
+                }}
+              />
+              {!isRTL ? (
+                <NextIcon iconColor="var(--secondary-background)" />
+              ) : (
+                <BackIcon iconColor="var(--secondary-background)" />
+              )}
+            </div>
           </Link>
         </div>
       )}
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index 0e056d9..dd78a65 100644
--- a/src/pages/menu/menu.module.css
+++ b/src/pages/menu/menu.module.css
@@ -21,7 +21,7 @@
   gap: 16px;
 }
 
-.openCloseButton {
+.openButton {
   background: #9fffcc4d;
   color: #278655;
   width: 62px !important;
@@ -45,6 +45,31 @@
   gap: 5px;
 }
 
+
+.closeButton {
+  background: #DD41434d;
+  color: #DD4143;
+  width: 62px !important;
+  height: 20px !important;
+  border: none;
+  box-shadow: none;
+  overflow: hidden;
+  font-family: Outfit;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0%;
+
+  opacity: 1;
+  border-radius: 2px;
+  padding-top: 4px;
+  padding-right: 9px;
+  padding-bottom: 4px;
+  padding-left: 9px;
+  gap: 5px;
+}
+
 /* .restaurantHeader {
   margin-bottom: 24px;
 } */
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index e8a6fdd..4fb302a 100644
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -120,8 +120,17 @@ function MenuPage() {
                   {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
                 </ProTitle>
                 <Button
-                  className={styles.openCloseButton}
-                  icon={<NextIcon className={styles.openCloseIcon} iconColor="#278655" iconSize={9} />}
+                  className={
+                    restaurant?.isOpened
+                      ? styles.openButton
+                      : styles.closeButton
+                  }
+                  icon={
+                    <NextIcon
+                      iconColor={restaurant?.isOpened ? "#278655" : "#DD4143"}
+                      iconSize={9}
+                    />
+                  }
                   iconPosition="end"
                   onClick={() => setIsOpeningTimesOpen(true)}
                 >