diff --git a/src/components/ArabicPrice/ArabicPrice.tsx b/src/components/ArabicPrice/ArabicPrice.tsx
index 4cf9585..89f878e 100644
--- a/src/components/ArabicPrice/ArabicPrice.tsx
+++ b/src/components/ArabicPrice/ArabicPrice.tsx
@@ -56,14 +56,14 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           >
             {formattedPrice}
           </span>
-          <span style={{ margin: "0 2px" }} />
+          <span style={{ margin: "0 3px" }} />
           <span
             style={{
               fontSize: "14px",
               verticalAlign: "baseline",
               lineHeight: 1,
               position: "relative",
-              top: -3,
+              top: -2,
               ...(decorationStyle ?? {}),
               ...textStyle,
             }}
diff --git a/src/components/PaymentMethods/PaymentMethods.module.css b/src/components/PaymentMethods/PaymentMethods.module.css
index 13a97b5..3e72f0d 100644
--- a/src/components/PaymentMethods/PaymentMethods.module.css
+++ b/src/components/PaymentMethods/PaymentMethods.module.css
@@ -22,23 +22,28 @@
   border-radius: 30px !important;
 }
 
-.differentCardIcon{
+.differentCardIcon {
   position: relative;
-  top: 1px
+  top: 1px;
 }
 
 .eCardIcon {
   position: relative;
   top: 3px;
   margin-right: 4px;
+  margin-left: 0;
 }
 
+:global(.ant-app-rtl) .eCardIcon {
+  margin-right: 0;
+  margin-left: 4px;
+}
 /* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
 .circleCheckbox :global(.ant-checkbox-inner) {
   width: 24px;
   height: 24px;
   border-radius: 50% !important;
-  border: 1.5px solid #D5D8DA;
+  border: 1.5px solid #d5d8da;
   background: transparent;
 }
 
@@ -59,6 +64,11 @@
   top: 50%;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
 .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
   width: 18px;
   height: 18px;
@@ -68,12 +78,17 @@
   background: #ffb700;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
+
 /* Apply same circular style to Radio buttons */
 .circleCheckbox :global(.ant-radio-inner) {
   width: 24px;
   height: 24px;
   border-radius: 50% !important;
-  border: 1.5px solid #D5D8DA;
+  border: 1.5px solid #d5d8da;
   background: transparent;
 }
 
@@ -93,6 +108,11 @@
   top: 50%;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
 .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
   width: 18px;
   height: 18px;
@@ -102,3 +122,7 @@
   background: #ffb700;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css
index 1795dfb..01bd80b 100644
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -11,7 +11,7 @@
 }
 
 .cartItem {
-  padding: 16px;
+  padding: 0 !important;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
 .cartItems {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
 }
 
 .container {
@@ -605,4 +605,9 @@
   position: absolute;
   top: -7px;
   right: 5px;
+}
+
+:global(.ant-app-rtl) .editIcon {
+  right: auto;
+  left: 5px;
 }
\ No newline at end of file
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index 8e1640c..87c41e6 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -5,12 +5,12 @@ import ImageWithFallback from "components/ImageWithFallback";
 import ProHeader from "components/ProHeader/ProHeader.tsx";
 import ProText from "components/ProText.tsx";
 import ProTitle from "components/ProTitle.tsx";
-import { selectCart } from "features/order/orderSlice.ts";
+import { clearCart, selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
-import { useAppSelector } from "redux/hooks.ts";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 
 import { FormInstance } from "antd";
 import useBreakPoint from "hooks/useBreakPoint.ts";
@@ -40,7 +40,7 @@ export default function CartMobileTabletLayout({
   const { isMobile, isTablet } = useBreakPoint();
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
   const navigate = useNavigate();
-
+  const dispatch = useAppDispatch();
   const getMenuItemImageStyle = () => {
     if (isMobile) {
       return {
@@ -63,198 +63,189 @@ export default function CartMobileTabletLayout({
         <Space
           orientation="vertical"
           size={isMobile ? "middle" : isTablet ? "large" : "large"}
-          style={{ width: "100%", gap: 16 }}
+          style={{ width: "100%", gap: 16, padding: 0 }}
         >
           {/* Table Number */}
           {(orderType === OrderType.DineIn ||
             orderType === OrderType.ToOffice) && <TableNumberCard />}
 
           <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
-            <div className={styles.cartItems}>
-              <Card hoverable className={styles.cartItem}>
+            <Card className={styles.cartItem}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                }}
+              >
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
+                    marginTop: 3,
+                    boxSizing: "border-box", // Explicit box model definition
                   }}
                 >
-                  <div
+                  <ProTitle
+                    level={5}
                     style={{
-                      marginTop: 3,
-                      boxSizing: "border-box", // Explicit box model definition
+                      whiteSpace: "nowrap",
+                      fontWeight: 500,
+                      fontStyle: "Medium",
+                      fontSize: 18,
+                      lineHeight: "140%",
+                      letterSpacing: 0,
                     }}
                   >
-                    <ProTitle
-                      level={5}
-                      style={{
-                        whiteSpace: "nowrap",
-                        fontWeight: 500,
-                        fontStyle: "Medium",
-                        fontSize: 18,
-                        lineHeight: "140%",
-                        letterSpacing: 0,
-                      }}
-                    >
-                      {t("cart.yourOrder")}
-                    </ProTitle>
-                  </div>
-
-                  <Link
-                    to={`/${subdomain}/menu?${
-                      orderType ? `orderType=${orderType}` : ""
-                    }`}
-                    style={{
-                      width: "100%",
-                      textAlign: "end",
-                    }}
-                  >
-                    <Button
-                      shape="circle"
-                      iconPlacement="start"
-                      icon={
-                        <DeleteIcon
-                          className={styles.deleteIcon}
-                          color={"#C0BFC4"}
-                          dimension={16}
-                        />
-                      }
-                      size="small"
-                      className={styles.addButton}
-                      style={{
-                        width: 32,
-                        height: 32,
-                        border: "1px solid #DEDEE0",
-                      }}
-                    />
-                  </Link>
+                    {t("cart.yourOrder")}
+                  </ProTitle>
                 </div>
 
-                {items.length >= 1 && (
-                  <Divider style={{ margin: "8px 0px 12px 0px" }} />
-                )}
-                {items.map((item, index) => (
-                  <div key={index} style={{ position: "relative" }}>
-                    <Space
-                      size="middle"
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        height: "100%",
-                      }}
-                    >
-                      <Space orientation="vertical" size="small">
-                        <div
+                <Button
+                  shape="circle"
+                  iconPlacement="start"
+                  icon={
+                    <DeleteIcon
+                      className={styles.deleteIcon}
+                      color={"#C0BFC4"}
+                      dimension={16}
+                    />
+                  }
+                  size="small"
+                  className={styles.addButton}
+                  style={{
+                    width: 32,
+                    height: 32,
+                    border: "1px solid #DEDEE0",
+                  }}
+                  onClick={() => {
+                    dispatch(clearCart());
+                  }}
+                />
+              </div>
+
+              {items.length >= 1 && (
+                <Divider style={{ margin: "8px 0px 12px 0px" }} />
+              )}
+              {items.map((item, index) => (
+                <div key={index} style={{ position: "relative" }}>
+                  <Space
+                    size="middle"
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      height: "100%",
+                    }}
+                  >
+                    <Space orientation="vertical" size="small">
+                      <div
+                        style={{
+                          position: "absolute",
+                          top: 0,
+                          [isRTL ? "right" : "left"]: 0,
+                        }}
+                      >
+                        <ProText
                           style={{
-                            position: "absolute",
-                            top: 0,
-                            [isRTL ? "right" : "left"]: 0,
+                            margin: 0,
+                            lineClamp: 1,
+                            fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                            fontWeight: 600,
                           }}
                         >
-                          <ProText
+                          {item.name}{" "}
+                          <span
                             style={{
-                              margin: 0,
-                              lineClamp: 1,
-                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
-                              fontWeight: 600,
+                              fontWeight: 400,
                             }}
                           >
-                            {item.name}{" "}
-                            <span
-                              style={{
-                                fontWeight: 400,
-                              }}
-                            >
-                              {isRTL
-                                ? (item.variant as Variant)?.optionsAR?.[0]
-                                    ?.value
-                                : (item.variant as Variant)?.options?.[0]
-                                    ?.value}
-                            </span>
-                          </ProText>
-                          <br />
-                          <ProText
-                            type="secondary"
-                            className={`${styles.itemDescription} responsive-text`}
-                            style={{
-                              margin: 0,
-                              lineClamp: 1,
-                              padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
-                              fontSize: isMobile ? 14 : isTablet ? 18 : 20,
-                              display: "-webkit-box",
-                              WebkitBoxOrient: "vertical",
-                              WebkitLineClamp: 1,
-                              overflow: "hidden",
-                              textOverflow: "ellipsis",
-                              wordWrap: "break-word",
-                              overflowWrap: "break-word",
-                              lineHeight: "1.4",
-                              maxHeight: isMobile
-                                ? "3em"
-                                : isTablet
-                                  ? "5em"
-                                  : "7em",
-                              fontWeight: 500,
-                              letterSpacing: "0.01em",
-                              width: "55%",
-                            }}
-                          >
-                            {item.description}
-                          </ProText>
-                        </div>
-                        <div
+                            {isRTL
+                              ? (item.variant as Variant)?.optionsAR?.[0]?.value
+                              : (item.variant as Variant)?.options?.[0]?.value}
+                          </span>
+                        </ProText>
+                        <br />
+                        <ProText
+                          type="secondary"
+                          className={`${styles.itemDescription} responsive-text`}
                           style={{
-                            position: "absolute",
-                            bottom: index !== items.length - 1 ? 16 : 3,
-                            [isRTL ? "right" : "left"]: 0,
+                            margin: 0,
+                            lineClamp: 1,
+                            padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
+                            fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                            display: "-webkit-box",
+                            WebkitBoxOrient: "vertical",
+                            WebkitLineClamp: 1,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            wordWrap: "break-word",
+                            overflowWrap: "break-word",
+                            lineHeight: "1.4",
+                            maxHeight: isMobile
+                              ? "3em"
+                              : isTablet
+                                ? "5em"
+                                : "7em",
+                            fontWeight: 500,
+                            letterSpacing: "0.01em",
+                            width: "55%",
                           }}
                         >
-                          <ArabicPrice
-                            price={item.price}
-                            style={{ fontStyle: "bold" }}
-                          />
-                        </div>
-                      </Space>
-                      <div style={{ position: "relative" }}>
-                        <ImageWithFallback
-                          src={item.image}
-                          alt={item.name}
-                          className={`${styles.menuItemImage} responsive-image`}
-                          {...getMenuItemImageStyle()}
-                          fallbackSrc={
-                            "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
-                          }
+                          {item.description}
+                        </ProText>
+                      </div>
+                      <div
+                        style={{
+                          position: "absolute",
+                          bottom: index !== items.length - 1 ? 16 : 3,
+                          [isRTL ? "right" : "left"]: 0,
+                        }}
+                      >
+                        <ArabicPrice
+                          price={item.price}
+                          style={{ fontStyle: "bold" }}
                         />
-                        <div
-                          style={{
-                            position: "absolute",
-                            right: 3,
-                            bottom: 3,
-                          }}
-                        >
-                          <CartActionsButtons item={item} />
-                        </div>
                       </div>
                     </Space>
+                    <div style={{ position: "relative" }}>
+                      <ImageWithFallback
+                        src={item.image}
+                        alt={item.name}
+                        className={`${styles.menuItemImage} responsive-image`}
+                        {...getMenuItemImageStyle()}
+                        fallbackSrc={
+                          "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
+                        }
+                      />
+                      <div
+                        style={{
+                          position: "absolute",
+                          right: 3,
+                          bottom: 3,
+                        }}
+                      >
+                        <CartActionsButtons item={item} />
+                      </div>
+                    </div>
+                  </Space>
 
-                    {index !== items.length - 1 && (
-                      <Divider style={{ margin: "10px 0" }} />
-                    )}
-                  </div>
-                ))}
-                <Button
-                  style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
-                  onClick={() => {
-                    navigate(`/${subdomain}/menu?${
+                  {index !== items.length - 1 && (
+                    <Divider style={{ margin: "10px 0" }} />
+                  )}
+                </div>
+              ))}
+              <Button
+                style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
+                onClick={() => {
+                  navigate(
+                    `/${subdomain}/menu?${
                       orderType ? `orderType=${orderType}` : ""
-                    }`);
-                  }}
-                >
-                  <PlusIcon dimesion="18" /> {t("cart.addMore")}
-                </Button>
-              </Card>
-            </div>
+                    }`,
+                  );
+                }}
+              >
+                <PlusIcon dimesion="18" /> {t("cart.addMore")}
+              </Button>
+            </Card>
           </div>
 
           <YouMightAlsoLike />
diff --git a/src/pages/checkout/components/BriefMenuCard.tsx b/src/pages/checkout/components/BriefMenuCard.tsx
index d9bdf92..6c4668a 100644
--- a/src/pages/checkout/components/BriefMenuCard.tsx
+++ b/src/pages/checkout/components/BriefMenuCard.tsx
@@ -7,6 +7,7 @@ import { useAppSelector } from "redux/hooks";
 import { selectCart } from "features/order/orderSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetOrderDetailsQuery } from "redux/api/others";
+import BackIcon from "components/Icons/BackIcon";
 
 export default function BriefMenuCard() {
   const { t } = useTranslation();
@@ -24,6 +25,7 @@ export default function BriefMenuCard() {
     },
   );
   const totalItems = items.length || orderDetails?.orderItems.length;
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   return (
     <>
@@ -53,12 +55,18 @@ export default function BriefMenuCard() {
               cursor: "pointer",
             }}
           >
-            <span style={{ marginRight: 5, position: "relative", top: 3.5 }}>
+            <span
+              style={{
+                [isRTL ? "marginLeft" : "marginRight"]: 5,
+                position: "relative",
+                top: 3.5,
+              }}
+            >
               <InvoiceIcon />
             </span>
             {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
           </ProText>
-          <NextIcon />
+          {isRTL ? <BackIcon /> : <NextIcon />}
         </div>
       </ProInputCard>
     </>