diff --git a/src/pages/cart/components/CartDesktopLayout.tsx b/src/pages/cart/components/CartDesktopLayout.tsx
new file mode 100644
index 0000000..735f933
--- /dev/null
+++ b/src/pages/cart/components/CartDesktopLayout.tsx
@@ -0,0 +1,420 @@
+import styles from "pages/cart/cart.module.css";
+import { Row, Col, Button, Card, Input, Divider, Space, message } from "antd";
+import ProTitle from "components/ProTitle.tsx";
+import { colors, ProBlack2 } from "ThemeConstants.ts";
+import ProText from "components/ProText.tsx";
+import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
+import { Link } from "react-router-dom";
+import ImageWithFallback from "components/ImageWithFallback";
+import ArabicPrice from "components/ArabicPrice";
+import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
+import { CartItem } from "utils/types/appTypes.ts";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { EditOutlined } from "@ant-design/icons";
+import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
+import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
+import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
+import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
+import {
+  updateTables,
+  removeTable,
+  selectCart,
+  selectCartTotal,
+  updateCoupon,
+  updateTip,
+} from "features/order/orderSlice.ts";
+import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
+import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
+import { useTranslation } from "react-i18next";
+import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
+import { useState } from "react";
+import { getTableOptions } from "pages/cart/page.tsx";
+import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
+
+export default function CartDesktopLayout() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { items, coupon, tip, tables } = useAppSelector(selectCart);
+  const subtotal = useAppSelector(selectCartTotal);
+  const tax = subtotal * 0.1; // 10% tax
+  const total = subtotal + tax;
+
+  const [isCouponOpen, setIsCouponOpen] = useState(false);
+  const [isTipOpen, setIsTipOpen] = useState(false);
+
+  const handleCouponSave = (value: string) => {
+    dispatch(updateCoupon(value));
+    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleCouponClose = () => {
+    setIsCouponOpen(false);
+  };
+
+  const handleTipSave = (value: string) => {
+    dispatch(updateTip(value));
+    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleTipClose = () => {
+    setIsTipOpen(false);
+  };
+
+  return (
+    <>
+      <div className={styles.desktopCartContainer}>
+        <Row gutter={[40, 40]} style={{ width: "100%" }}>
+          {/* Main Content Column */}
+          <Col xs={24} lg={16} xl={17}>
+            <div className={styles.desktopMainContent}>
+              {/* <div className={styles.desktopRecommendationsSection}>
+                  <YouMightAlsoLike />
+                </div> */}
+
+              {/* Cart Items Section */}
+              <div className={styles.desktopCartItemsSection}>
+                <div className={styles.desktopSectionHeader}>
+                  <ProTitle
+                    level={3}
+                    style={{ marginBottom: "8px", color: colors.primary }}
+                  >
+                    {t("cartItems")} ({items.length})
+                  </ProTitle>
+                  <ProText type="secondary" style={{ fontSize: "16px" }}>
+                    {items.length === 0
+                      ? t("emptyCart")
+                      : `${items.length} ${
+                          items.length === 1 ? t("item") : t("items")
+                        } ${t("inYourCart")}`}
+                  </ProText>
+                </div>
+
+                {items.length === 0 ? (
+                  <div className={styles.desktopEmptyCart}>
+                    <div className={styles.desktopEmptyCartIcon}>
+                      <EmptyOrdersIcon />
+                    </div>
+                    <ProTitle
+                      level={4}
+                      style={{ marginBottom: "16px", color: colors.primary }}
+                    >
+                      {t("emptyCart")}
+                    </ProTitle>
+                    <ProText
+                      type="secondary"
+                      style={{ marginBottom: "24px", fontSize: "16px" }}
+                    >
+                      {t("emptyCartMessage")}
+                    </ProText>
+                    <Link to="/menu">
+                      <Button
+                        type="primary"
+                        size="large"
+                        style={{ borderRadius: "12px", height: "48px" }}
+                      >
+                        {t("cart.browseMenu")}
+                      </Button>
+                    </Link>
+                  </div>
+                ) : (
+                  <div className={styles.desktopCartItems}>
+                    {items.map((item, index) => (
+                      <Card
+                        key={item.id}
+                        hoverable
+                        className={`${styles.desktopCartItem} desktop`}
+                        styles={{
+                          body: {
+                            padding: "28px",
+                            borderRadius: 24,
+                          },
+                        }}
+                        style={
+                          {
+                            "--animation-order": index,
+                          } as React.CSSProperties
+                        }
+                      >
+                        <Row gutter={[28, 20]} align="middle">
+                          <Col xs={24} sm={8} md={6}>
+                            <div className={styles.desktopImageContainer}>
+                              <ImageWithFallback
+                                src={item.image}
+                                alt={item.name}
+                                className={styles.desktopMenuItemImage}
+                                style={{
+                                  width: 140,
+                                  height: 140,
+                                }}
+                                fallbackSrc={
+                                  "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
+                                }
+                              />
+                            </div>
+                          </Col>
+
+                          <Col xs={24} sm={16} md={12}>
+                            <div className={styles.desktopItemDetails}>
+                              <ProTitle
+                                level={4}
+                                style={{
+                                  marginBottom: "12px",
+                                  color: colors.primary,
+                                }}
+                              >
+                                {item.name}
+                              </ProTitle>
+                              <ProText
+                                type="secondary"
+                                className={styles.desktopItemDescription}
+                                style={{ marginBottom: "20px" }}
+                              >
+                                {item.description}
+                              </ProText>
+                              <div className={styles.desktopPriceContainer}>
+                                <ProText strong className={styles.desktopPrice}>
+                                  <ArabicPrice
+                                    price={item.price}
+                                    style={{
+                                      fontSize: "1rem",
+                                      color: colors.primary,
+                                    }}
+                                  />
+                                </ProText>
+                              </div>
+                            </div>
+                          </Col>
+
+                          <Col xs={24} sm={24} md={6}>
+                            <div className={styles.desktopActionsContainer}>
+                              <CartActionsButtons item={item as CartItem} />
+                            </div>
+                          </Col>
+                        </Row>
+                      </Card>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </Col>
+
+          {/* Sidebar Column */}
+          <Col xs={24} lg={8} xl={7}>
+            <div className={styles.desktopSidebar}>
+              {/* Special Request */}
+              <div className={styles.desktopSidebarCard}>
+                <SpecialRequestCard />
+              </div>
+
+              {/* Coupon Code */}
+              <div
+                className={styles.desktopSidebarCard}
+                style={{ "--animation-order": 1 } as React.CSSProperties}
+              >
+                <ProInputCard
+                  title={t("couponCode")}
+                  titleRight={
+                    <Button
+                      type="link"
+                      style={{ color: colors.primary, padding: 0 }}
+                      onClick={() => setIsCouponOpen(true)}
+                    >
+                      {t("viewOffers")} <DonateIcon />
+                    </Button>
+                  }
+                >
+                  <Input
+                    placeholder={t("couponCodePlaceholder")}
+                    size="large"
+                    autoFocus={false}
+                    suffix={
+                      <Button
+                        type="primary"
+                        style={{
+                          borderRadius: "100px",
+                          backgroundColor: colors.primary,
+                        }}
+                      >
+                        {t("apply")}
+                        <CouponHeartIcon className={styles.couponApplyIcon} />
+                      </Button>
+                    }
+                  />
+                </ProInputCard>
+              </div>
+
+              {/* Reward Your Waiter */}
+              <Card
+                className={`${styles.desktopSidebarCard} ${styles.desktopTipCard}`}
+                style={
+                  {
+                    backgroundColor:
+                      themeName === "light" ? "#FFB70014" : ProBlack2,
+                    "--animation-order": 2,
+                  } as React.CSSProperties
+                }
+              >
+                <div className={styles.desktopTipHeader}>
+                  <div className={styles.desktopTipIcon}>
+                    <DonateHandIcon className={styles.donateHandIcon} />
+                  </div>
+                  <div>
+                    <ProTitle level={4}>{t("rewardYourWaiter")}</ProTitle>
+                    <ProText>{t("rewardYourWaiter100")}</ProText>
+                  </div>
+                </div>
+
+                <Divider style={{ margin: "20px 0" }} />
+
+                <div className={styles.desktopTipButtons}>
+                  <Button
+                    className={styles.desktopTipButton}
+                    style={{
+                      borderRadius: "100px",
+                      borderColor: colors.primary,
+                      backgroundColor: "#FFB7001F",
+                      color: colors.primary,
+                    }}
+                  >
+                    <ArabicPrice price={0.5} />
+                  </Button>
+                  <Button
+                    className={styles.desktopTipButton}
+                    style={{
+                      borderRadius: "100px",
+                      backgroundColor: "#5F6C7B0D",
+                    }}
+                  >
+                    <ArabicPrice price={1.0} />
+                  </Button>
+                  <Button
+                    className={styles.desktopTipButton}
+                    style={{
+                      borderRadius: "100px",
+                      color: colors.primary,
+                    }}
+                    onClick={() => setIsTipOpen(true)}
+                  >
+                    <EditOutlined /> {t("other")}
+                  </Button>
+                </div>
+              </Card>
+
+              {/* Table Number */}
+              <div
+                className={styles.desktopSidebarCard}
+                style={{ "--animation-order": 3 } as React.CSSProperties}
+              >
+                <ProInputCard title={t("tableNumber")}>
+                  <ProInModalMultiSelect
+                    value={tables}
+                    placeholder={t("tableNumberPlaceholder")}
+                    size="large"
+                    optionList={getTableOptions()}
+                    style={{
+                      width: "100%",
+                      height: "50px",
+                    }}
+                    onSelect={(value) => {
+                      updateTables(value);
+                    }}
+                    onClear={() => {
+                      removeTable();
+                    }}
+                  />
+                </ProInputCard>
+              </div>
+
+              {/* Order Summary */}
+              <Card
+                className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
+                style={{ "--animation-order": 4 } as React.CSSProperties}
+              >
+                <ProTitle
+                  level={3}
+                  style={{ marginBottom: "20px", color: colors.primary }}
+                >
+                  {t("orderSummary")}
+                </ProTitle>
+
+                <Divider style={{ margin: "20px 0" }} />
+
+                <Space
+                  direction="vertical"
+                  style={{ width: "100%" }}
+                  size="large"
+                >
+                  <div className={styles.desktopSummaryRow}>
+                    <ProText>{t("basketTotal")}</ProText>
+                    <ArabicPrice price={subtotal} strong />
+                  </div>
+                  <div className={styles.desktopSummaryRow}>
+                    <ProText>{t("discount")}</ProText>
+                    <ArabicPrice price={0} />
+                  </div>
+                  <div className={styles.desktopSummaryRow}>
+                    <ProText>{t("riderTip")}</ProText>
+                    <ArabicPrice price={tax} />
+                  </div>
+
+                  <Divider style={{ margin: "24px 0" }} />
+
+                  <div className={styles.desktopTotalRow}>
+                    <ProTitle
+                      level={4}
+                      style={{ margin: 0, color: colors.primary }}
+                    >
+                      {t("totalAmount")}
+                    </ProTitle>
+                    <ProTitle
+                      level={4}
+                      style={{ margin: 0, color: colors.primary }}
+                    >
+                      <ArabicPrice price={total} />
+                    </ProTitle>
+                  </div>
+                </Space>
+              </Card>
+
+              {/* Checkout Button */}
+              <Button
+                type="primary"
+                size="large"
+                className={styles.desktopCheckoutButton}
+                style={{
+                  height: "56px",
+                  borderRadius: "16px",
+                  fontSize: "18px",
+                  fontWeight: 600,
+                  backgroundColor: colors.primary,
+                  border: "none",
+                  width: "100%",
+                }}
+              >
+                {t("checkout")}
+              </Button>
+            </div>
+          </Col>
+        </Row>
+      </div>
+
+      {/* Desktop Dialogs */}
+
+      <CouponDialog
+        isOpen={isCouponOpen}
+        onClose={handleCouponClose}
+        initialValue={coupon}
+        onSave={handleCouponSave}
+      />
+
+      <TipDialog
+        isOpen={isTipOpen}
+        onClose={handleTipClose}
+        initialValue={tip}
+        onSave={handleTipSave}
+      />
+    </>
+  );
+}
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
new file mode 100644
index 0000000..640e030
--- /dev/null
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -0,0 +1,566 @@
+import ProHeader from "components/ProHeader/ProHeader.tsx";
+import styles from "pages/cart/cart.module.css";
+import { Space, Card, Divider, Input, Button, message } from "antd";
+import ProTitle from "components/ProTitle.tsx";
+import { Link, useParams } from "react-router-dom";
+import { colors, ProBlack2 } from "ThemeConstants.ts";
+import { PlusOutlined } from "@ant-design/icons";
+import ProText from "components/ProText.tsx";
+import ArabicPrice from "components/ArabicPrice";
+import ImageWithFallback from "components/ImageWithFallback";
+import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
+import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
+import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
+import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
+import {
+  updateCollectionMethod,
+  updateTables,
+  removeTable,
+  updateCoupon,
+  updateTip,
+  updateEstimateTime,
+  selectCart,
+} from "features/order/orderSlice.ts";
+import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
+import EditIcon from "components/Icons/EditIcon.tsx";
+import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
+import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
+import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
+import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
+import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet.tsx";
+import { getTableOptions } from "pages/cart/page.tsx";
+import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+
+export default function CartMobileTabletLayout() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { items, coupon, tip, tables, estimateTimeDate, collectionMethod } =
+    useAppSelector(selectCart);
+  const { id } = useParams();
+
+  const { isMobile, isTablet } = useBreakPoint();
+
+  const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
+
+  const { themeName } = useAppSelector((state) => state.theme);
+  const orderType = localStorage.getItem("orderType");
+
+  const [isCouponOpen, setIsCouponOpen] = useState(false);
+  const [estimateWay, setEstimateWay] = useState("now");
+  const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
+  const [isTipOpen, setIsTipOpen] = useState(false);
+
+  const handleCouponSave = (value: string) => {
+    dispatch(updateCoupon(value));
+    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleCouponClose = () => {
+    setIsCouponOpen(false);
+  };
+
+  const handleTipSave = (value: string) => {
+    dispatch(updateTip(value));
+    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleTipClose = () => {
+    setIsTipOpen(false);
+  };
+
+  const handleEstimateTimeSave = (date: Date, time: string) => {
+    dispatch(updateEstimateTime({ date, time }));
+    message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleEstimateTimeClose = () => {
+    setIsEstimateTimeOpen(false);
+  };
+
+  const getMenuItemImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 90,
+        height: 80,
+      };
+    }
+    return {
+      width: 120,
+      height: 120,
+    };
+  };
+  return (
+    <>
+      <ProHeader>{t("cart.title")}</ProHeader>
+      <div
+        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
+      >
+        <Space
+          direction="vertical"
+          size={isMobile ? "middle" : isTablet ? "large" : "large"}
+          style={{ width: "100%", gap: 16 }}
+        >
+          <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
+            <div className={styles.cartItems}>
+              <Card hoverable className={styles.cartItem}>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <div
+                    style={{
+                      marginTop: 10,
+                      boxSizing: "border-box", // Explicit box model definition
+                    }}
+                  >
+                    <ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
+                      {t("cart.yourOrder")}
+                    </ProTitle>
+                  </div>
+
+                  <Link
+                    to={`/${id}/menu?${
+                      orderType ? `orderType=${orderType}` : ""
+                    }`}
+                    style={{
+                      width: "100%",
+                      textAlign: "end",
+                    }}
+                  >
+                    <div
+                      style={{
+                        color: colors.primary,
+                      }}
+                    >
+                      <PlusOutlined
+                        style={{
+                          color: colors.primary,
+                          marginLeft: 5,
+                          marginTop: 15,
+                        }}
+                      />
+                      {t("cart.addMore")}
+                    </div>
+                  </Link>
+                </div>
+
+                {items.length >= 1 && (
+                  <Divider style={{ margin: "0px 0px 10px 0px" }} />
+                )}
+                {items.map((item, index) => (
+                  <div key={index}>
+                    <Space
+                      size="middle"
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        height: "100%",
+                      }}
+                    >
+                      <Space
+                        direction="vertical"
+                        size="small"
+                        style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
+                      >
+                        <div>
+                          <ProText
+                            style={{
+                              margin: 0,
+                              lineClamp: 1,
+                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                              fontWeight: 600,
+                            }}
+                          >
+                            {item.name}
+                          </ProText>
+                          <br />
+                          <ProText
+                            type="secondary"
+                            className={`${styles.itemDescription} responsive-text`}
+                            style={{
+                              margin: 0,
+                              lineClamp: 1,
+                              padding: isMobile ? 3 : 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: "2.8em",
+                              fontWeight: "500",
+                              letterSpacing: "0.01em",
+                            }}
+                          >
+                            {item.description}
+                          </ProText>
+                        </div>
+                        <div
+                          style={{
+                            display: "flex",
+                            flexDirection: "row",
+                            justifyContent: "start",
+                            gap: isMobile ? 20 : 24,
+                          }}
+                        >
+                          <ProText
+                            strong
+                            style={{
+                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                            }}
+                          >
+                            <ArabicPrice price={item.price} />
+                          </ProText>
+                        </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={{
+                            marginTop: 10,
+                          }}
+                        >
+                          <CartActionsButtons item={item} />
+                        </div>
+                      </div>
+                    </Space>
+
+                    {index !== items.length - 1 && (
+                      <Divider style={{ margin: "10px 0" }} />
+                    )}
+                  </div>
+                ))}
+              </Card>
+            </div>
+          </div>
+
+          <YouMightAlsoLike />
+
+          {/* Mobile/Tablet layout */}
+          {/* Special Request */}
+          <SpecialRequestCard />
+          {/* Coupon Code */}
+          <ProInputCard
+            title={t("cart.couponCode")}
+            titleRight={
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                }}
+                onClick={() => setIsCouponOpen(true)}
+              >
+                <ProText
+                  style={{
+                    color: colors.primary,
+                    fontSize: 14,
+                    cursor: "pointer",
+                  }}
+                >
+                  {t("cart.viewOffers")}
+                </ProText>
+                <DonateIcon />
+              </div>
+            }
+          >
+            <Input
+              placeholder={t("cart.couponCode")}
+              size="large"
+              autoFocus={false}
+              style={{ padding: "7px 11px", height: 50 }}
+              suffix={
+                <Button
+                  style={{
+                    width: 100,
+                    height: 32,
+                    borderRadius: 100,
+                    backgroundColor: "black",
+                    color: "white",
+                  }}
+                >
+                  {t("cart.apply")}
+                  <CouponHeartIcon className={styles.couponApplyIcon} />
+                </Button>
+              }
+            />
+          </ProInputCard>
+
+          {/* Car Plate*/}
+          {orderType === "pickup" && (
+            <ProInputCard title={t("cart.plateNumber")}>
+              <Input
+                placeholder={t("plateNumber")}
+                size="large"
+                autoFocus={false}
+                style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+              />
+            </ProInputCard>
+          )}
+
+          {/* Estimate Time */}
+          {(orderType === "delivery" || orderType === "pickup") && (
+            <ProInputCard title={t("cart.estimateTime")}>
+              <ProRatioGroups
+                options={[
+                  { label: t("cart.now"), value: "now", price: "" },
+                  { label: t("cart.later"), value: "later", price: "" },
+                ]}
+                value={estimateWay}
+                onRatioClick={(value) => {
+                  if (value === "now") {
+                    setEstimateWay(value);
+                    handleEstimateTimeSave(new Date(), "now");
+                  } else {
+                    setEstimateWay(value);
+                    setIsEstimateTimeOpen(true);
+                  }
+                }}
+              />
+            </ProInputCard>
+          )}
+
+          {/* Collection Method */}
+          {orderType === "pickup" && (
+            <ProInputCard title={t("cart.collectionMethod")}>
+              <ProRatioGroups
+                options={[
+                  { label: t("cart.Cash"), value: "cod", price: "" },
+                  {
+                    label: t("cart.e-payment"),
+                    value: "paymentgateway",
+                    price: "",
+                  },
+                ]}
+                value={collectionMethod}
+                onRatioClick={(value) => {
+                  if (value === "cod") {
+                    updateCollectionMethod(value);
+                  } else {
+                    updateCollectionMethod(value);
+                  }
+                }}
+              />
+            </ProInputCard>
+          )}
+
+          {/* Reward Your Waiter */}
+          <Card>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "start",
+                gap: 16,
+              }}
+            >
+              <div
+                style={{
+                  width: 48,
+                  gap: 10,
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  marginTop: 4,
+                }}
+              >
+                <DonateHandIcon className={styles.donateHandIcon} />
+              </div>
+              <div style={{ marginTop: 7 }}>
+                <ProTitle style={{ fontSize: 18, margin: 0 }}>
+                  {t("cart.rewardYourWaiter")}
+                </ProTitle>
+                <ProText
+                  style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}
+                >
+                  {t("cart.rewardYourWaiter100")}
+                </ProText>
+              </div>
+            </div>
+            <Divider style={{ margin: "15px 0 15px 0" }} />
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-around",
+              }}
+            >
+              <Button
+                style={{
+                  borderRadius: 100,
+                  height: 32,
+                  borderColor: "rgba(255, 183, 0, 0.12)",
+                  backgroundColor: "#FFB7001F",
+                  color: colors.primary,
+                }}
+              >
+                <ArabicPrice price={0.5} />
+              </Button>
+              <Button
+                style={{
+                  borderRadius: 100,
+                  height: 32,
+                  backgroundColor: "#5F6C7B0D",
+                  color: "rgba(95, 108, 123, 1)",
+                  border: "none",
+                }}
+              >
+                <ArabicPrice price={1.0} />
+              </Button>
+              <Button
+                style={{
+                  borderRadius: 100,
+                  height: 32,
+                  color: colors.primary,
+                  borderColor: "#d9d9d9",
+                }}
+                onClick={() => setIsTipOpen(true)}
+              >
+                <EditIcon />
+                <ProText
+                  style={{
+                    color: colors.primary,
+                  }}
+                >
+                  {t("cart.other")}
+                </ProText>
+              </Button>
+            </div>
+          </Card>
+
+          {/* Table Number */}
+          {orderType === "dine-in" && (
+            <ProInputCard
+              title={t("cart.tableNumber")}
+              className={styles.tableNumberCard}
+            >
+              <ProInModalMultiSelect
+                value={tables}
+                placeholder={t("tableNumber")}
+                size="large"
+                optionList={getTableOptions()}
+                style={{
+                  width: "100%",
+                  height: 50,
+                  fontSize: 12,
+                }}
+                onSelect={(value) => {
+                  updateTables(value);
+                }}
+                onClear={() => {
+                  removeTable();
+                }}
+              />
+            </ProInputCard>
+          )}
+
+          {/* Invoice Summary */}
+          <OrderSummary />
+        </Space>
+      </div>
+
+      <div
+        style={{
+          width: "100%",
+          padding: "16px 16px 0",
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          height: "10vh",
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-around",
+          gap: "1rem",
+          backgroundColor: themeName === "light" ? "white" : ProBlack2,
+          boxShadow: "none",
+        }}
+      >
+        <Link
+          to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
+          style={{
+            width: "100%",
+          }}
+        >
+          <Button
+            style={{
+              borderRadius: 100,
+              height: isMobile ? 48 : isTablet ? 56 : 64,
+              borderColor: "black",
+              width: "100%",
+              fontSize: 16,
+            }}
+          >
+            {t("cart.addItem")}
+          </Button>
+        </Link>
+
+        <Link
+          to={`/${id}/checkout`}
+          style={{
+            width: "100%",
+          }}
+        >
+          <Button
+            style={{
+              backgroundColor: colors.primary,
+              borderRadius: 100,
+              height: isMobile ? 48 : isTablet ? 56 : 64,
+              borderColor: "#F2F2F2",
+              fontSize: 16,
+              color: "white",
+              width: "100%",
+            }}
+            disabled={items.length === 0}
+          >
+            {t("cart.checkout")}
+          </Button>
+        </Link>
+      </div>
+
+      {/* Mobile/Tablet Bottom Sheets */}
+
+      <CouponBottomSheet
+        isOpen={isCouponOpen}
+        onClose={handleCouponClose}
+        initialValue={coupon}
+        onSave={handleCouponSave}
+      />
+
+      <TipBottomSheet
+        isOpen={isTipOpen}
+        onClose={handleTipClose}
+        initialValue={tip}
+        onSave={handleTipSave}
+      />
+
+      <EstimateTimeBottomSheet
+        isOpen={isEstimateTimeOpen}
+        onClose={handleEstimateTimeClose}
+        initialDate={estimateTimeDate}
+        onSave={handleEstimateTimeSave}
+      />
+    </>
+  );
+}
diff --git a/src/pages/cart/components/SpecialRequestCard.tsx b/src/pages/cart/components/SpecialRequestCard.tsx
new file mode 100644
index 0000000..a76e856
--- /dev/null
+++ b/src/pages/cart/components/SpecialRequestCard.tsx
@@ -0,0 +1,69 @@
+import { updateSpecialRequest, selectCart } from "features/order/orderSlice.ts";
+import { message, Input } from "antd";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { colors } from "ThemeConstants.ts";
+import { RightOutlined } from "@ant-design/icons";
+import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet.tsx";
+import { useState } from "react";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog.tsx";
+
+export default function SpecialRequestCard() {
+  const { t } = useTranslation();
+  const { isDesktop } = useBreakPoint();
+  const dispatch = useAppDispatch();
+  const { specialRequest } = useAppSelector(selectCart);
+
+  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
+
+  const handleSpecialRequestSave = (value: string) => {
+    dispatch(updateSpecialRequest(value));
+    message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleSpecialRequestClose = () => {
+    setIsSpecialRequestOpen(false);
+  };
+  return (
+    <>
+      <ProInputCard title={t("cart.specialRequest")}>
+        <Input
+          value={specialRequest}
+          placeholder={t("cart.specialRequest")}
+          size="large"
+          autoFocus={false}
+          style={{ height: 50 }}
+          suffix={
+            <div
+              style={{
+                color: colors.primary,
+                fontSize: 14,
+                cursor: "pointer",
+              }}
+              onClick={() => setIsSpecialRequestOpen(true)}
+            >
+              <u>{t("cart.editNote")}</u> <RightOutlined />
+            </div>
+          }
+        />
+      </ProInputCard>
+      {isDesktop ? (
+        <SpecialRequestDialog
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      ) : (
+        <SpecialRequestBottomSheet
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/pages/cart/page.tsx b/src/pages/cart/page.tsx
index d52338a..6c74e67 100644
--- a/src/pages/cart/page.tsx
+++ b/src/pages/cart/page.tsx
@@ -1,110 +1,26 @@
-import ArabicPrice from "components/ArabicPrice";
-import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons";
-import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet";
-import { CouponDialog } from "components/CustomBottomSheet/CouponDialog";
-import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet";
-import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog";
-import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet";
-import { TipDialog } from "components/CustomBottomSheet/TipDialog";
-import CouponHeartIcon from "components/Icons/cart/CouponHeart";
-import DonateHandIcon from "components/Icons/cart/DonateHandIcon";
-import DonateIcon from "components/Icons/cart/DonateIcon";
-import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon";
-import ImageWithFallback from "components/ImageWithFallback";
-import ProHeader from "components/ProHeader/ProHeader";
-import ProInputCard from "components/ProInputCard/ProInputCard";
-import ProText from "components/ProText";
-import ProTitle from "components/ProTitle";
-import {
-  removeTable,
-  selectCart,
-  selectCartTotal,
-  updateCollectionMethod,
-  updateCoupon,
-  updateEstimateTime,
-  updateSpecialRequest,
-  updateTables,
-  updateTip,
-} from "features/order/orderSlice";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useEffect } from "react";
 
-import { EditOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons";
-import {
-  Button,
-  Card,
-  Col,
-  Divider,
-  Grid,
-  Input,
-  message,
-  Row,
-  Space,
-} from "antd";
-import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet";
-import EditIcon from "components/Icons/EditIcon";
-import OrderSummary from "components/OrderSummary/OrderSummary";
-import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
-import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router-dom";
-import { colors, ProBlack2 } from "ThemeConstants";
-import { CartItem } from "utils/types/appTypes";
-import styles from "./cart.module.css"; // Import CSS module
-import YouMightAlsoLike from "./components/YouMightAlsoLike";
+import CartDesktopLayout from "pages/cart/components/CartDesktopLayout.tsx";
+import i18n from "i18n/i18n.ts";
+import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout.tsx";
+import useBreakPoint from "hooks/useBreakPoint.ts";
 
-const { useBreakpoint } = Grid;
+// Function to get translated table names
+export const getTableOptions = () => [
+  { id: "1", name: i18n.t("table1") },
+  { id: "2", name: i18n.t("table2") },
+  { id: "3", name: i18n.t("table3") },
+  { id: "4", name: i18n.t("table4") },
+  { id: "5", name: i18n.t("table5") },
+  { id: "6", name: i18n.t("table6") },
+  { id: "7", name: i18n.t("table7") },
+  { id: "8", name: i18n.t("table8") },
+  { id: "9", name: i18n.t("table9") },
+  { id: "10", name: i18n.t("table10") },
+];
 
 export default function CartPage() {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const cart = useAppSelector(selectCart);
-  const {
-    items,
-    specialRequest,
-    coupon,
-    tip,
-    tables,
-    estimateTimeDate,
-    collectionMethod,
-  } = cart;
-  const subtotal = useAppSelector(selectCartTotal);
-  const tax = subtotal * 0.1; // 10% tax
-  const total = subtotal + tax;
-  const { id } = useParams();
-
-  const { sm, md } = useBreakpoint();
-
-  // Mock responsive values for now
-  const isMobile = !sm;
-  const isTablet = sm && !md;
-  const isDesktop = md;
-  const isLargeDesktop = md;
-  const getResponsiveClass = () =>
-    isDesktop ? "desktop" : isTablet ? "tablet" : "mobile";
-  const { themeName } = useAppSelector((state) => state.theme);
-  const orderType = localStorage.getItem("orderType");
-
-  // Function to get translated table names
-  const getTableOptions = () => [
-    { id: "1", name: t("table1") },
-    { id: "2", name: t("table2") },
-    { id: "3", name: t("table3") },
-    { id: "4", name: t("table4") },
-    { id: "5", name: t("table5") },
-    { id: "6", name: t("table6") },
-    { id: "7", name: t("table7") },
-    { id: "8", name: t("table8") },
-    { id: "9", name: t("table9") },
-    { id: "10", name: t("table10") },
-  ];
-
-  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
-  const [isCouponOpen, setIsCouponOpen] = useState(false);
-  const [estimateWay, setEstimateWay] = useState("now");
-  const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
-  const [isTipOpen, setIsTipOpen] = useState(false);
-
+  const { isDesktop } = useBreakPoint();
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {
     // Blur any focused element when component mounts
@@ -121,943 +37,11 @@ export default function CartPage() {
     });
   }, []);
 
-  const handleSpecialRequestSave = (value: string) => {
-    dispatch(updateSpecialRequest(value));
-    message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleSpecialRequestClose = () => {
-    setIsSpecialRequestOpen(false);
-  };
-
-  const handleCouponSave = (value: string) => {
-    dispatch(updateCoupon(value));
-    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleCouponClose = () => {
-    setIsCouponOpen(false);
-  };
-
-  const handleTipSave = (value: string) => {
-    dispatch(updateTip(value));
-    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleTipClose = () => {
-    setIsTipOpen(false);
-  };
-
-  const handleEstimateTimeSave = (date: Date, time: string) => {
-    dispatch(updateEstimateTime({ date, time }));
-    message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleEstimateTimeClose = () => {
-    setIsEstimateTimeOpen(false);
-  };
-
-  const getMenuItemImageStyle = () => {
-    if (isMobile) {
-      return {
-        width: 90,
-        height: 80,
-      };
-    } else if (isTablet) {
-      return {
-        width: 120,
-        height: 120,
-      };
-    } else {
-      return {
-        width: 140,
-        height: 140,
-      };
-    }
-  };
-
   // Enhanced desktop layout
-  if (isDesktop || isLargeDesktop) {
-    return (
-      <>
-        <div className={styles.desktopCartContainer}>
-          <Row gutter={[40, 40]} style={{ width: "100%" }}>
-            {/* Main Content Column */}
-            <Col xs={24} lg={16} xl={17}>
-              <div className={styles.desktopMainContent}>
-                {/* <div className={styles.desktopRecommendationsSection}>
-                  <YouMightAlsoLike />
-                </div> */}
-
-                {/* Cart Items Section */}
-                <div className={styles.desktopCartItemsSection}>
-                  <div className={styles.desktopSectionHeader}>
-                    <ProTitle
-                      level={3}
-                      style={{ marginBottom: "8px", color: colors.primary }}
-                    >
-                      {t("cartItems")} ({items.length})
-                    </ProTitle>
-                    <ProText type="secondary" style={{ fontSize: "16px" }}>
-                      {items.length === 0
-                        ? t("emptyCart")
-                        : `${items.length} ${
-                            items.length === 1 ? t("item") : t("items")
-                          } ${t("inYourCart")}`}
-                    </ProText>
-                  </div>
-
-                  {items.length === 0 ? (
-                    <div className={styles.desktopEmptyCart}>
-                      <div className={styles.desktopEmptyCartIcon}>
-                        <EmptyOrdersIcon />
-                      </div>
-                      <ProTitle
-                        level={4}
-                        style={{ marginBottom: "16px", color: colors.primary }}
-                      >
-                        {t("emptyCart")}
-                      </ProTitle>
-                      <ProText
-                        type="secondary"
-                        style={{ marginBottom: "24px", fontSize: "16px" }}
-                      >
-                        {t("emptyCartMessage")}
-                      </ProText>
-                      <Link to="/menu">
-                        <Button
-                          type="primary"
-                          size="large"
-                          style={{ borderRadius: "12px", height: "48px" }}
-                        >
-                          {t("cart.browseMenu")}
-                        </Button>
-                      </Link>
-                    </div>
-                  ) : (
-                    <div className={styles.desktopCartItems}>
-                      {items.map((item, index) => (
-                        <Card
-                          key={item.id}
-                          hoverable
-                          className={`${
-                            styles.desktopCartItem
-                          } ${getResponsiveClass()}`}
-                          styles={{
-                            body: {
-                              padding: "28px",
-                              borderRadius: 24,
-                            },
-                          }}
-                          style={
-                            {
-                              "--animation-order": index,
-                            } as React.CSSProperties
-                          }
-                        >
-                          <Row gutter={[28, 20]} align="middle">
-                            <Col xs={24} sm={8} md={6}>
-                              <div className={styles.desktopImageContainer}>
-                                <ImageWithFallback
-                                  src={item.image}
-                                  alt={item.name}
-                                  className={styles.desktopMenuItemImage}
-                                  {...getMenuItemImageStyle()}
-                                  fallbackSrc={
-                                    "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
-                                  }
-                                />
-                              </div>
-                            </Col>
-
-                            <Col xs={24} sm={16} md={12}>
-                              <div className={styles.desktopItemDetails}>
-                                <ProTitle
-                                  level={4}
-                                  style={{
-                                    marginBottom: "12px",
-                                    color: colors.primary,
-                                  }}
-                                >
-                                  {item.name}
-                                </ProTitle>
-                                <ProText
-                                  type="secondary"
-                                  className={styles.desktopItemDescription}
-                                  style={{ marginBottom: "20px" }}
-                                >
-                                  {item.description}
-                                </ProText>
-                                <div className={styles.desktopPriceContainer}>
-                                  <ProText
-                                    strong
-                                    className={styles.desktopPrice}
-                                  >
-                                    <ArabicPrice
-                                      price={item.price}
-                                      style={{
-                                        fontSize: "1rem",
-                                        color: colors.primary,
-                                      }}
-                                    />
-                                  </ProText>
-                                </div>
-                              </div>
-                            </Col>
-
-                            <Col xs={24} sm={24} md={6}>
-                              <div className={styles.desktopActionsContainer}>
-                                <CartActionsButtons item={item as CartItem} />
-                              </div>
-                            </Col>
-                          </Row>
-                        </Card>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </Col>
-
-            {/* Sidebar Column */}
-            <Col xs={24} lg={8} xl={7}>
-              <div className={styles.desktopSidebar}>
-                {/* Special Request */}
-                <div className={styles.desktopSidebarCard}>
-                  <ProInputCard title={t("specialRequest")}>
-                    <Input
-                      value={specialRequest}
-                      placeholder={t("specialRequestPlaceholder")}
-                      size="large"
-                      autoFocus={false}
-                      style={{ height: 50 }}
-                      suffix={
-                        <Button
-                          type="link"
-                          style={{ color: colors.primary, padding: 0 }}
-                          onClick={() => setIsSpecialRequestOpen(true)}
-                        >
-                          <EditOutlined /> {t("edit")}
-                        </Button>
-                      }
-                    />
-                  </ProInputCard>
-                </div>
-
-                {/* Coupon Code */}
-                <div
-                  className={styles.desktopSidebarCard}
-                  style={{ "--animation-order": 1 } as React.CSSProperties}
-                >
-                  <ProInputCard
-                    title={t("couponCode")}
-                    titleRight={
-                      <Button
-                        type="link"
-                        style={{ color: colors.primary, padding: 0 }}
-                        onClick={() => setIsCouponOpen(true)}
-                      >
-                        {t("viewOffers")} <DonateIcon />
-                      </Button>
-                    }
-                  >
-                    <Input
-                      placeholder={t("couponCodePlaceholder")}
-                      size="large"
-                      autoFocus={false}
-                      suffix={
-                        <Button
-                          type="primary"
-                          style={{
-                            borderRadius: "100px",
-                            backgroundColor: colors.primary,
-                          }}
-                        >
-                          {t("apply")}
-                          <CouponHeartIcon className={styles.couponApplyIcon} />
-                        </Button>
-                      }
-                    />
-                  </ProInputCard>
-                </div>
-
-                {/* Reward Your Waiter */}
-                <Card
-                  className={`${styles.desktopSidebarCard} ${styles.desktopTipCard}`}
-                  style={
-                    {
-                      backgroundColor:
-                        themeName === "light" ? "#FFB70014" : ProBlack2,
-                      "--animation-order": 2,
-                    } as React.CSSProperties
-                  }
-                >
-                  <div className={styles.desktopTipHeader}>
-                    <div className={styles.desktopTipIcon}>
-                      <DonateHandIcon className={styles.donateHandIcon} />
-                    </div>
-                    <div>
-                      <ProTitle level={4}>{t("rewardYourWaiter")}</ProTitle>
-                      <ProText>{t("rewardYourWaiter100")}</ProText>
-                    </div>
-                  </div>
-
-                  <Divider style={{ margin: "20px 0" }} />
-
-                  <div className={styles.desktopTipButtons}>
-                    <Button
-                      className={styles.desktopTipButton}
-                      style={{
-                        borderRadius: "100px",
-                        borderColor: colors.primary,
-                        backgroundColor: "#FFB7001F",
-                        color: colors.primary,
-                      }}
-                    >
-                      <ArabicPrice price={0.5} />
-                    </Button>
-                    <Button
-                      className={styles.desktopTipButton}
-                      style={{
-                        borderRadius: "100px",
-                        backgroundColor: "#5F6C7B0D",
-                      }}
-                    >
-                      <ArabicPrice price={1.0} />
-                    </Button>
-                    <Button
-                      className={styles.desktopTipButton}
-                      style={{
-                        borderRadius: "100px",
-                        color: colors.primary,
-                      }}
-                      onClick={() => setIsTipOpen(true)}
-                    >
-                      <EditOutlined /> {t("other")}
-                    </Button>
-                  </div>
-                </Card>
-
-                {/* Table Number */}
-                <div
-                  className={styles.desktopSidebarCard}
-                  style={{ "--animation-order": 3 } as React.CSSProperties}
-                >
-                  <ProInputCard title={t("tableNumber")}>
-                    <ProInModalMultiSelect
-                      value={tables}
-                      placeholder={t("tableNumberPlaceholder")}
-                      size="large"
-                      optionList={getTableOptions()}
-                      style={{
-                        width: "100%",
-                        height: "50px",
-                      }}
-                      onSelect={(value) => {
-                        updateTables(value);
-                      }}
-                      onClear={() => {
-                        removeTable();
-                      }}
-                    />
-                  </ProInputCard>
-                </div>
-
-                {/* Order Summary */}
-                <Card
-                  className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
-                  style={{ "--animation-order": 4 } as React.CSSProperties}
-                >
-                  <ProTitle
-                    level={3}
-                    style={{ marginBottom: "20px", color: colors.primary }}
-                  >
-                    {t("orderSummary")}
-                  </ProTitle>
-
-                  <Divider style={{ margin: "20px 0" }} />
-
-                  <Space
-                    direction="vertical"
-                    style={{ width: "100%" }}
-                    size="large"
-                  >
-                    <div className={styles.desktopSummaryRow}>
-                      <ProText>{t("basketTotal")}</ProText>
-                      <ArabicPrice price={subtotal} strong />
-                    </div>
-                    <div className={styles.desktopSummaryRow}>
-                      <ProText>{t("discount")}</ProText>
-                      <ArabicPrice price={0} />
-                    </div>
-                    <div className={styles.desktopSummaryRow}>
-                      <ProText>{t("riderTip")}</ProText>
-                      <ArabicPrice price={tax} />
-                    </div>
-
-                    <Divider style={{ margin: "24px 0" }} />
-
-                    <div className={styles.desktopTotalRow}>
-                      <ProTitle
-                        level={4}
-                        style={{ margin: 0, color: colors.primary }}
-                      >
-                        {t("totalAmount")}
-                      </ProTitle>
-                      <ProTitle
-                        level={4}
-                        style={{ margin: 0, color: colors.primary }}
-                      >
-                        <ArabicPrice price={total} />
-                      </ProTitle>
-                    </div>
-                  </Space>
-                </Card>
-
-                {/* Checkout Button */}
-                <Button
-                  type="primary"
-                  size="large"
-                  className={styles.desktopCheckoutButton}
-                  style={{
-                    height: "56px",
-                    borderRadius: "16px",
-                    fontSize: "18px",
-                    fontWeight: 600,
-                    backgroundColor: colors.primary,
-                    border: "none",
-                    width: "100%",
-                  }}
-                >
-                  {t("checkout")}
-                </Button>
-              </div>
-            </Col>
-          </Row>
-        </div>
-
-        {/* Desktop Dialogs */}
-        <SpecialRequestDialog
-          isOpen={isSpecialRequestOpen}
-          onClose={handleSpecialRequestClose}
-          initialValue={specialRequest}
-          onSave={handleSpecialRequestSave}
-        />
-
-        <CouponDialog
-          isOpen={isCouponOpen}
-          onClose={handleCouponClose}
-          initialValue={coupon}
-          onSave={handleCouponSave}
-        />
-
-        <TipDialog
-          isOpen={isTipOpen}
-          onClose={handleTipClose}
-          initialValue={tip}
-          onSave={handleTipSave}
-        />
-      </>
-    );
+  if (isDesktop) {
+    return <CartDesktopLayout />;
   }
 
   // Mobile/Tablet Layout (existing code)
-  return (
-    <>
-      <ProHeader>{t("cart.title")}</ProHeader>
-      <div
-        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
-      >
-        <Space
-          direction="vertical"
-          size={isMobile ? "middle" : isTablet ? "large" : "large"}
-          style={{ width: "100%", gap: 16 }}
-        >
-          <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
-            <div className={styles.cartItems}>
-              <Card
-                hoverable
-                className={styles.cartItem}
-              >
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  <div
-                    style={{
-                      marginTop: 10,
-                      boxSizing: "border-box", // Explicit box model definition
-                    }}
-                  >
-                    <ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
-                      {t("cart.yourOrder")}
-                    </ProTitle>
-                  </div>
-
-                  <Link
-                    to={`/${id}/menu?${
-                      orderType ? `orderType=${orderType}` : ""
-                    }`}
-                    style={{
-                      width: "100%",
-                      textAlign: "end",
-                    }}
-                  >
-                    <div
-                      style={{
-                        color: colors.primary,
-                      }}
-                    >
-                      <PlusOutlined
-                        style={{
-                          color: colors.primary,
-                          marginLeft: 5,
-                          marginTop: 15,
-                        }}
-                      />
-                      {t("cart.addMore")}
-                    </div>
-                  </Link>
-                </div>
-
-                {items.length >= 1 && (
-                  <Divider style={{ margin: "0px 0px 10px 0px" }} />
-                )}
-                {items.map((item, index) => (
-                  <div key={index}>
-                    <Space
-                      size="middle"
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        height: "100%",
-                      }}
-                    >
-                      <Space
-                        direction="vertical"
-                        size="small"
-                        style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
-                      >
-                        <div>
-                          <ProText
-                            style={{
-                              margin: 0,
-                              lineClamp: 1,
-                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
-                              fontWeight: 600,
-                            }}
-                          >
-                            {item.name}
-                          </ProText>
-                          <br />
-                          <ProText
-                            type="secondary"
-                            className={`${styles.itemDescription} responsive-text`}
-                            style={{
-                              margin: 0,
-                              lineClamp: 1,
-                              padding: isMobile ? 3 : 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: "2.8em",
-                              fontWeight: "500",
-                              letterSpacing: "0.01em",
-                            }}
-                          >
-                            {item.description}
-                          </ProText>
-                        </div>
-                        <div
-                          style={{
-                            display: "flex",
-                            flexDirection: "row",
-                            justifyContent: "start",
-                            gap: isMobile ? 20 : 24,
-                          }}
-                        >
-                          <ProText
-                            strong
-                            style={{
-                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
-                            }}
-                          >
-                            <ArabicPrice price={item.price} />
-                          </ProText>
-                        </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={{
-                            marginTop: 10,
-                          }}
-                        >
-                          <CartActionsButtons item={item} />
-                        </div>
-                      </div>
-                    </Space>
-
-                    {index !== items.length - 1 && (
-                      <Divider style={{ margin: "10px 0" }} />
-                    )}
-                  </div>
-                ))}
-              </Card>
-            </div>
-          </div>
-
-          <YouMightAlsoLike />
-
-          {/* Mobile/Tablet layout */}
-          {/* Special Request */}
-          <ProInputCard title={t("cart.specialRequest")}>
-            <Input
-              value={specialRequest}
-              placeholder={t("cart.specialRequest")}
-              size="large"
-              autoFocus={false}
-              style={{ height: 50 }}
-              suffix={
-                <div
-                  style={{
-                    color: colors.primary,
-                    fontSize: 14,
-                    cursor: "pointer",
-                  }}
-                  onClick={() => setIsSpecialRequestOpen(true)}
-                >
-                  <u>{t("cart.editNote")}</u> <RightOutlined />
-                </div>
-              }
-            />
-          </ProInputCard>
-
-          {/* Coupon Code */}
-          <ProInputCard
-            title={t("cart.couponCode")}
-            titleRight={
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  gap: 10,
-                }}
-                onClick={() => setIsCouponOpen(true)}
-              >
-                <ProText
-                  style={{
-                    color: colors.primary,
-                    fontSize: 14,
-                    cursor: "pointer",
-                  }}
-                >
-                  {t("cart.viewOffers")}
-                </ProText>
-                <DonateIcon />
-              </div>
-            }
-          >
-            <Input
-              placeholder={t("cart.couponCode")}
-              size="large"
-              autoFocus={false}
-              style={{ padding: "7px 11px", height: 50 }}
-              suffix={
-                <Button
-                  style={{
-                    width: 100,
-                    height: 32,
-                    borderRadius: 100,
-                    backgroundColor: "black",
-                    color: "white",
-                  }}
-                >
-                  {t("cart.apply")}
-                  <CouponHeartIcon className={styles.couponApplyIcon} />
-                </Button>
-              }
-            />
-          </ProInputCard>
-
-          {/* Car Plate*/}
-          {orderType === "pickup" && (
-            <ProInputCard title={t("cart.plateNumber")}>
-              <Input
-                placeholder={t("plateNumber")}
-                size="large"
-                autoFocus={false}
-                style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
-              />
-            </ProInputCard>
-          )}
-
-          {/* Estimate Time */}
-          {(orderType === "delivery" || orderType === "pickup") && (
-            <ProInputCard title={t("cart.estimateTime")}>
-              <ProRatioGroups
-                options={[
-                  { label: t("cart.now"), value: "now", price: "" },
-                  { label: t("cart.later"), value: "later", price: "" },
-                ]}
-                value={estimateWay}
-                onRatioClick={(value) => {
-                  if (value === "now") {
-                    setEstimateWay(value);
-                    handleEstimateTimeSave(new Date(), "now");
-                  } else {
-                    setEstimateWay(value);
-                    setIsEstimateTimeOpen(true);
-                  }
-                }}
-              />
-            </ProInputCard>
-          )}
-
-          {/* Collection Method */}
-          {orderType === "pickup" && (
-            <ProInputCard title={t("cart.collectionMethod")}>
-              <ProRatioGroups
-                options={[
-                  { label: t("cart.Cash"), value: "cod", price: "" },
-                  {
-                    label: t("cart.e-payment"),
-                    value: "paymentgateway",
-                    price: "",
-                  },
-                ]}
-                value={collectionMethod}
-                onRatioClick={(value) => {
-                  if (value === "cod") {
-                    updateCollectionMethod(value);
-                  } else {
-                    updateCollectionMethod(value);
-                  }
-                }}
-              />
-            </ProInputCard>
-          )}
-
-          {/* Reward Your Waiter */}
-          <Card>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "start",
-                gap: 16,
-              }}
-            >
-              <div
-                style={{
-                  width: 48,
-                  gap: 10,
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "center",
-                  marginTop: 4,
-                }}
-              >
-                <DonateHandIcon className={styles.donateHandIcon} />
-              </div>
-              <div style={{ marginTop: 7 }}>
-                <ProTitle style={{ fontSize: 18, margin: 0 }}>
-                  {t("cart.rewardYourWaiter")}
-                </ProTitle>
-                <ProText
-                  style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}
-                >
-                  {t("cart.rewardYourWaiter100")}
-                </ProText>
-              </div>
-            </div>
-            <Divider style={{ margin: "15px 0 15px 0" }} />
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-around",
-              }}
-            >
-              <Button
-                style={{
-                  borderRadius: 100,
-                  height: 32,
-                  borderColor: "rgba(255, 183, 0, 0.12)",
-                  backgroundColor: "#FFB7001F",
-                  color: colors.primary,
-                }}
-              >
-                <ArabicPrice price={0.5} />
-              </Button>
-              <Button
-                style={{
-                  borderRadius: 100,
-                  height: 32,
-                  backgroundColor: "#5F6C7B0D",
-                  color: "rgba(95, 108, 123, 1)",
-                  border: "none",
-                }}
-              >
-                <ArabicPrice price={1.0} />
-              </Button>
-              <Button
-                style={{
-                  borderRadius: 100,
-                  height: 32,
-                  color: colors.primary,
-                  borderColor: "#d9d9d9",
-                }}
-                onClick={() => setIsTipOpen(true)}
-              >
-                <EditIcon />
-                <ProText
-                  style={{
-                    color: colors.primary,
-                  }}
-                >
-                  {t("cart.other")}
-                </ProText>
-              </Button>
-            </div>
-          </Card>
-
-          {/* Table Number */}
-          {orderType === "dine-in" && (
-            <ProInputCard
-              title={t("cart.tableNumber")}
-              className={styles.tableNumberCard}
-            >
-              <ProInModalMultiSelect
-                value={tables}
-                placeholder={t("tableNumber")}
-                size="large"
-                optionList={getTableOptions()}
-                style={{
-                  width: "100%",
-                  height: 50,
-                  fontSize: 12,
-                }}
-                onSelect={(value) => {
-                  updateTables(value);
-                }}
-                onClear={() => {
-                  removeTable();
-                }}
-              />
-            </ProInputCard>
-          )}
-
-          {/* Invoice Summary */}
-          <OrderSummary />
-        </Space>
-      </div>
-
-      <div
-        style={{
-          width: "100%",
-          padding: "16px 16px 0",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          height: "10vh",
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-around",
-          gap: "1rem",
-          backgroundColor: themeName === "light" ? "white" : ProBlack2,
-          boxShadow: "none",
-        }}
-      >
-        <Link
-          to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
-          style={{
-            width: "100%",
-          }}
-        >
-          <Button
-            style={{
-              borderRadius: 100,
-              height: isMobile ? 48 : isTablet ? 56 : 64,
-              borderColor: "black",
-              width: "100%",
-              fontSize: 16,
-            }}
-          >
-            {t("cart.addItem")}
-          </Button>
-        </Link>
-
-        <Link
-          to={`/${id}/checkout`}
-          style={{
-            width: "100%",
-          }}
-        >
-          <Button
-            style={{
-              backgroundColor: colors.primary,
-              borderRadius: 100,
-              height: isMobile ? 48 : isTablet ? 56 : 64,
-              borderColor: "#F2F2F2",
-              fontSize: 16,
-              color: "white",
-              width: "100%",
-            }}
-            disabled={items.length === 0}
-          >
-            {t("cart.checkout")}
-          </Button>
-        </Link>
-      </div>
-
-      {/* Mobile/Tablet Bottom Sheets */}
-      <SpecialRequestBottomSheet
-        isOpen={isSpecialRequestOpen}
-        onClose={handleSpecialRequestClose}
-        initialValue={specialRequest}
-        onSave={handleSpecialRequestSave}
-      />
-
-      <CouponBottomSheet
-        isOpen={isCouponOpen}
-        onClose={handleCouponClose}
-        initialValue={coupon}
-        onSave={handleCouponSave}
-      />
-
-      <TipBottomSheet
-        isOpen={isTipOpen}
-        onClose={handleTipClose}
-        initialValue={tip}
-        onSave={handleTipSave}
-      />
-
-      <EstimateTimeBottomSheet
-        isOpen={isEstimateTimeOpen}
-        onClose={handleEstimateTimeClose}
-        initialDate={estimateTimeDate}
-        onSave={handleEstimateTimeSave}
-      />
-    </>
-  );
+  return <CartMobileTabletLayout />;
 }