diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts
index b6fb662..c8c39d9 100644
--- a/src/ThemeConstants.ts
+++ b/src/ThemeConstants.ts
@@ -2,7 +2,7 @@
 import type { ThemeConfig } from "antd";
 
 export const colors = {
-  primary: "#FFC600",
+  primary: "#CC9300",
   secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx
index 5ac5f74..d92c24d 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.tsx
+++ b/src/components/LoyaltyCard/LoyaltyCard.tsx
@@ -22,81 +22,66 @@ const LoyaltyCard = () => {
   return (
     <div className={styles.loyaltyContainer}>
       <Card className={styles.loyaltyCard}>
-        {isHasLoyaltyGift && (
-          <div className={styles.congratulationsContainer}>
-            <PresentIcon className={styles.congratulationsIcon} />
-            <div>
-              <p className={styles.congratulationsText}>
-                {t("menu.congratulations")}
-              </p>
-              <p className={styles.congratulationsSubtext}>
-                {t("menu.loyaltyGiftEarned")}
-              </p>
-            </div>
-          </div>
-        )}
-        {!isHasLoyaltyGift && (
-          <Row
-            justify="space-between"
-            align="middle"
-            style={{ marginBottom: "0.5rem" }}
-          >
-            <Col>
-              <Row align="middle" gutter={[8, 8]}>
-                <Col>
-                  <LoyaltyIcon className={styles.loyaltyIcon} />
-                </Col>
-                <Col>
-                  <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
-                    {t("menu.loyaltyPoints")}
-                  </ProText>
-                </Col>
-              </Row>
-              <ProText
-                type="secondary"
-                strong
-                style={{
-                  fontSize: "14px",
-                  fontWeight: 700,
-                  position: "relative",
-                  top: -2,
-                }}
-              >
-                {token &&
-                  t("menu.loyaltyDescription", {
-                    value: restaurant?.loyalty_stamps ?? 0,
-                  })}
-                {!token && (
-                  <div style={{ paddingTop: 4 }}>
-                    <Link
-                      to={`/${subdomain}/login`}
-                      style={{
-                        color: colors.primary,
-                        textDecoration: "underline",
-                        fontSize: "14px",
-                        fontWeight: 400,
-                        padding: "0 4px",
-                      }}
-                    >
-                      {t("menu.joinUs")}
-                    </Link>
-                    <span style={{ fontSize: "14px", color: colors.secondary }}>
-                      {t("menu.joinUsDescription")}
-                    </span>
-                  </div>
-                )}
-              </ProText>
-            </Col>
-            <Col>{/* <PresentIcon /> */}</Col>
-          </Row>
-        )}
-        {token && !isHasLoyaltyGift && (
+        <Row
+          justify="space-between"
+          align="middle"
+          style={{ marginBottom: "0.5rem" }}
+        >
+          <Col>
+            <Row align="middle" gutter={[8, 8]}>
+              <Col>
+                <LoyaltyIcon className={styles.loyaltyIcon} />
+              </Col>
+              <Col>
+                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
+                  {t("menu.loyaltyPoints")}
+                </ProText>
+              </Col>
+            </Row>
+            <ProText
+              type="secondary"
+              strong
+              style={{
+                fontSize: "14px",
+                fontWeight: 700,
+                position: "relative",
+                top: -2,
+              }}
+            >
+              {token &&
+                t("menu.loyaltyDescription", {
+                  value: restaurant?.loyalty_stamps ?? 0,
+                })}
+              {!token && (
+                <div style={{ paddingTop: 4 }}>
+                  <Link
+                    to={`/${subdomain}/login`}
+                    style={{
+                      color: colors.primary,
+                      textDecoration: "underline",
+                      fontSize: "14px",
+                      fontWeight: 400,
+                      padding: "0 4px",
+                    }}
+                  >
+                    {t("menu.joinUs")}
+                  </Link>
+                  <span style={{ fontSize: "14px", color: colors.secondary }}>
+                    {t("menu.joinUsDescription")}
+                  </span>
+                </div>
+              )}
+            </ProText>
+          </Col>
+          <Col> {isHasLoyaltyGift && <PresentIcon />}</Col>
+        </Row>
+        {token && (
           <div
             style={{
               display: "flex",
               flexDirection: "row",
               gap: 10,
-              overflow: "auto",
+              overflow: "hidden",
               scrollbarWidth: "none",
             }}
           >
diff --git a/src/pages/address/address.module.css b/src/pages/address/address.module.css
index e07cbd3..38554fe 100644
--- a/src/pages/address/address.module.css
+++ b/src/pages/address/address.module.css
@@ -172,6 +172,11 @@
   z-index: 999;
 }
 
+/* Dark theme styles for checkout */
+:global(.darkApp) .checkoutButtonContainer {
+  background-color: #000000 !important;
+}
+
 .splitBillButton {
   border-radius: 100px;
   height: 48px;
@@ -221,10 +226,7 @@
   font-size: 14px;
 }
 
-/* Dark theme styles for checkout */
-:global(.darkApp) .checkoutButtonContainer {
-  background-color: #000000 !important;
-}
+
 
 :global(.darkApp) .splitBillButton {
   color: #ffffff !important;
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index da7a428..73081c5 100644
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -24,6 +24,7 @@ export default function CheckoutPage() {
   const { phone, order, orderType, collectionMethod } =
     useAppSelector(selectCart);
   const { token } = useAppSelector((state) => state.auth);
+
   return (
     <>
       <Form
diff --git a/src/pages/orders/OrderDetails.module.css b/src/pages/orders/OrderDetails.module.css
new file mode 100644
index 0000000..220d392
--- /dev/null
+++ b/src/pages/orders/OrderDetails.module.css
@@ -0,0 +1,300 @@
+.orderSummary :global(.ant-card-body) {
+  padding: 16px !important;
+}
+
+.profileImage {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.fascanoIcon {
+  position: relative;
+  top: 3px;
+}
+
+.locationIcon {
+  position: relative;
+  top: 3px;
+}
+
+.orderDishIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.orderCard :global(.ant-card-body) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.orderCard :global(.ant-card-body) > *:not(:last-child) {
+  margin-bottom: 3.5rem;
+}
+
+.orderSummary {
+  transition: all 0.3s ease;
+}
+
+.invoiceIcon {
+  position: relative;
+  top: 3px;
+}
+
+.timeIcon {
+  position: relative;
+  top: 3px;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+}
+
+/* Enhanced responsive summary rows */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryRow {
+    padding: 12px 0;
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryRow {
+    padding: 16px 0;
+    font-size: 18px;
+  }
+}
+
+.summaryDivider {
+  margin: 8px 0 !important;
+}
+
+/* Enhanced responsive summary divider */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryDivider {
+    margin: 24px 0 !important;
+  }
+}
+
+.totalRow {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+/* Enhanced responsive total row */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .totalRow {
+    font-size: 18px;
+    padding-top: 20px;
+    margin-top: 12px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .totalRow {
+    font-size: 20px;
+    padding-top: 24px;
+    margin-top: 16px;
+  }
+}
+
+.desktopOrderSummary {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.desktopSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  font-size: 16px;
+}
+
+.desktopTotalRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  margin-top: 16px;
+}
+
+[data-theme="dark"] .orderSummary {
+  background-color: #181818 !important;
+  border-color: #363636 !important;
+}
+
+[data-theme="dark"] .orderSummary:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+}
+
+[data-theme="dark"] .summaryRow {
+  color: #b0b0b0;
+}
+
+[data-theme="dark"] .totalRow {
+  color: #ffffff;
+  border-top-color: #424242;
+}
+
+/* Enhanced responsive animations */
+@media (prefers-reduced-motion: no-preference) {
+  .orderSummary {
+    animation: fadeInUp 0.8s ease-out;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Enhanced responsive focus states */
+.orderSummary:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .orderSummary:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Enhanced responsive print styles */
+@media print {
+  .orderSummary {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}
+
+/* Enhanced responsive hover effects */
+@media (hover: hover) {
+  .orderSummary:hover {
+    transform: translateY(-2px);
+  }
+
+  .menuItemImage:hover {
+    transform: scale(1.05);
+  }
+
+  [data-theme="dark"] .orderSummary:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.backToHomePage {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.backToHomePage :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.nextIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.backIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.inviteToBillCard {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.inviteToBillCard :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.orderDetailsContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  overflow: auto;
+  scrollbar-width: none;
+  height: calc(92vh - 80px);
+}
+
+/* CheckoutButton Styles */
+.orderDetailsButtonContainer {
+  width: 100%;
+  padding: 16px 16px 0;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 1rem;
+  background-color: var(--secondary-background);
+  box-shadow: none;
+  z-index: 999;
+}
+/* Dark theme styles for checkout */
+:global(.darkApp) .orderDetailsButtonContainer {
+  background-color: #000000 !important;
+}
+
+.button {
+  width: 100%;
+  height: 48px;
+  margin-bottom: 16px;
+  box-shadow: none;
+}
diff --git a/src/pages/orders/OrderDetails.tsx b/src/pages/orders/OrderDetails.tsx
new file mode 100644
index 0000000..ed6f0c5
--- /dev/null
+++ b/src/pages/orders/OrderDetails.tsx
@@ -0,0 +1,229 @@
+import { Button, Card, Divider, Form, Image, Layout } from "antd";
+import LocationIcon from "components/Icons/LocationIcon";
+import InvoiceIcon from "components/Icons/order/InvoiceIcon";
+import TimeIcon from "components/Icons/order/TimeIcon";
+import PaymentDetails from "components/PaymentDetails/PaymentDetails";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+import { useGetOrderDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./OrderDetails.module.css";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProHeader from "components/ProHeader/ProHeader";
+
+export default function OrderDetails({ orderId }: { orderId: string }) {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+    },
+  );
+
+  // Determine button styles based on order status
+  const getStatusButtonStyles = () => {
+    const status = orderDetails?.order.status?.toLowerCase() || "";
+
+    if (status.includes("close") || status === "closed") {
+      return {
+        backgroundColor: "var(--color-error-12, #EA1F221F)",
+        color: "#EA1F22",
+      };
+    } else if (status.includes("completed") || status === "complete") {
+      return {
+        backgroundColor: "var(--color-success-12, #28A7451F)",
+        color: "#28A745",
+      };
+    } else if (status.includes("preparing") || status.includes("prepare")) {
+      return {
+        backgroundColor: "var(--Color-Primary-100, #FFB7001F)",
+        color: "#FFB700",
+      };
+    }
+
+    // Default fallback
+    return {
+      backgroundColor: "var(--color-success-12, #28A7451F)",
+      color: "#28A745",
+    };
+  };
+
+  const statusButtonStyles = getStatusButtonStyles();
+
+  return (
+    <Form layout="vertical">
+      <Layout>
+        <ProHeader>{t("orders.title")}</ProHeader>
+        <Layout.Content className={styles.orderDetailsContainer}>
+          <Card className={styles.orderCard}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "1rem",
+                borderRadius: "12px",
+                padding: 16,
+              }}
+            >
+              <Button type="text" shape="circle" style={{}}>
+                <Image
+                  src={orderDetails?.restaurant_iimage}
+                  className={styles.profileImage}
+                  width={50}
+                  height={50}
+                  preview={false}
+                />
+              </Button>
+              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                <ProText
+                  type="secondary"
+                  style={{
+                    fontWeight: 500,
+                    fontStyle: "Medium",
+                    fontSize: "16px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: "#333333",
+                  }}
+                >
+                  {/* <LocationIcon className={styles.locationIcon} />{" "} */}
+                  {isRTL
+                    ? orderDetails?.restaurantAR
+                    : orderDetails?.restaurant}
+                </ProText>
+                <ProText
+                  type="secondary"
+                  style={{
+                    fontSize: "14px",
+                    color: "#5F6C7B",
+                    fontWeight: 400,
+                    fontStyle: "Regular",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                  }}
+                >
+                  {dayjs(orderDetails?.order.created_at).format(
+                    "YYYY-MM-DD h:mm A",
+                  )}
+                </ProText>
+                <ProText
+                  type="secondary"
+                  style={{
+                    fontSize: "14px",
+                    color: "#5F6C7B",
+                    fontWeight: 400,
+                    fontStyle: "Regular",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                  }}
+                >
+                  Order ID: #{orderDetails?.order.id}
+                </ProText>
+                <Button
+                  style={{
+                    height: 28,
+                    gap: 10,
+                    opacity: 1,
+                    borderRadius: "Spacing/4XL",
+                    padding: "4px 8px",
+                    border: "none",
+                    width: "fit-content",
+                    ...statusButtonStyles,
+                  }}
+                >
+                  {orderDetails?.order.status}
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          <ProInputCard
+            title={
+              <div style={{ marginBottom: 7 }}>
+                <ProText style={{ fontSize: "1rem" }}>
+                  {t("order.yourOrderFrom")}
+                </ProText>
+                <br />
+                <ProText type="secondary">
+                  <LocationIcon className={styles.locationIcon} />
+                  {t("order.muscat")}
+                </ProText>
+              </div>
+            }
+          >
+            <div
+              style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+            >
+              {orderDetails?.orderItems.map((item, index) => (
+                <div key={item.id}>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "flex-start",
+                      gap: "1rem",
+                    }}
+                  >
+                    <Button
+                      type="text"
+                      shape="circle"
+                      style={{
+                        backgroundColor: "rgba(255, 183, 0, 0.08)",
+                      }}
+                    >
+                      {index + 1}X
+                    </Button>
+                    <div>
+                      <ProText
+                        style={{
+                          fontSize: "1rem",
+                          position: "relative",
+                          top: 8,
+                        }}
+                      >
+                        {item.name}
+                      </ProText>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ProInputCard>
+
+          <PaymentDetails order={orderDetails?.order} />
+
+          {/* <CancelOrderBottomSheet /> */}
+        </Layout.Content>
+
+        <Layout.Footer className={styles.orderDetailsButtonContainer}>
+          <Button
+            className={styles.button}
+            onClick={() => {}}
+            style={{
+              border: "1px solid #333333",
+            }}
+          >
+            {t("orders.rateOrder")}
+          </Button>
+
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.button}
+            onClick={() => {}}
+          >
+            {t("orders.reOrder")}
+          </Button>
+        </Layout.Footer>
+        {/* <RateBottomSheet /> */}
+      </Layout>
+    </Form>
+  );
+}
diff --git a/src/pages/orders/OrdersList.tsx b/src/pages/orders/OrdersList.tsx
index dc54efa..ab40106 100644
--- a/src/pages/orders/OrdersList.tsx
+++ b/src/pages/orders/OrdersList.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { useGetOrdersQuery } from "redux/api/others";
 import { colors } from "ThemeConstants";
 import styles from "./orders.module.css";
+import { Link, useParams } from "react-router-dom";
 
 // Utility function to format date
 const formatDate = (dateString: string): string => {
@@ -29,7 +30,7 @@ const formatDate = (dateString: string): string => {
 
 export default function OrdersList() {
   const { data: orders = [], isLoading, error, refetch } = useGetOrdersQuery();
-
+  const { subdomain } = useParams();
   const { t } = useTranslation();
 
   if (isLoading) {
@@ -44,7 +45,7 @@ export default function OrdersList() {
           flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
-          height: "90vh",
+          height: "100vh",
         }}
       >
         <ProTitle level={4}>{t("orders.errorLoadingOrders")}</ProTitle>
@@ -53,6 +54,34 @@ export default function OrdersList() {
     );
   }
 
+  // Determine button styles based on order status
+  const getStatusButtonStyles = (order: any) => {
+    const status = order?.status?.toLowerCase() || "";
+
+    if (status.includes("close") || status === "closed") {
+      return {
+        backgroundColor: "var(--color-error-12, #EA1F221F)",
+        color: "#EA1F22",
+      };
+    } else if (status.includes("completed") || status === "complete") {
+      return {
+        backgroundColor: "var(--color-success-12, #28A7451F)",
+        color: "#28A745",
+      };
+    } else if (status.includes("preparing") || status.includes("prepare")) {
+      return {
+        backgroundColor: "var(--Color-Primary-100, #FFB7001F)",
+        color: "#FFB700",
+      };
+    }
+
+    // Default fallback
+    return {
+      backgroundColor: "var(--color-success-12, #28A7451F)",
+      color: "#28A745",
+    };
+  };
+
   return (
     <>
       {orders.length === 0 ? (
@@ -64,94 +93,99 @@ export default function OrdersList() {
             justifyContent: "center",
             alignItems: "center",
             height: "90vh",
-            padding: "1rem"
+            padding: "1rem",
           }}
         >
           <EmptyOrdersIcon />
           <ProTitle level={4}>{t("orders.noOrdersFound")}</ProTitle>
-          <ProText>
-            {t("orders.youHavenTPlacedAnyOrdersYet")}
-          </ProText>
+          <ProText>{t("orders.youHavenTPlacedAnyOrdersYet")}</ProText>
         </div>
       ) : (
         // Orders list
         <div style={{ padding: "16px" }}>
           {orders.map((order: any) => (
-            <Card
-              key={order.id}
-              style={{
-                borderRadius: "12px",
-                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                marginBottom: 12,
-              }}
-            >
-              <div
+            <Link to={`/${subdomain}/orders/${order.id}`} key={order.id}>
+              <Card
+                key={order.id}
                 style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
-                  gap: "1rem",
+                  borderRadius: "12px",
+                  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                  marginBottom: 12,
                 }}
               >
-                <Button
-                  type="text"
-                  shape="circle"
+                <div
                   style={{
-                    backgroundColor: "rgba(255, 183, 0, 0.08)",
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-start",
+                    gap: "1rem",
                   }}
                 >
-                  {order.restaurant_name[0]}
-                </Button>
-                <div
-                  style={{ display: "flex", flexDirection: "column", gap: 8 }}
-                >
-                  <ProText style={{ fontSize: "1rem" }}>
-                    {order.restaurant_name}
-                  </ProText>
-                  <ProText type="secondary">
-                    {formatDate(order?.created_at)}
-                  </ProText>
-                  <ProText type="secondary">
-                    {t("orders.orderID")} {order.id}
-                  </ProText>
                   <Button
+                    type="text"
+                    shape="circle"
                     style={{
-                      borderRadius: 888,
-                      height: 24,
-                      border: "none",
-                      backgroundColor: colors.primary,
-                      color: "white",
-                      padding: "0 8px",
-                      width: "fit-content",
+                      backgroundColor: "rgba(255, 183, 0, 0.08)",
                     }}
                   >
-                    {order.status}
+                    {order.restaurant_name[0]}
                   </Button>
+                  <div
+                    style={{ display: "flex", flexDirection: "column", gap: 8 }}
+                  >
+                    <ProText style={{ fontSize: "1rem" }}>
+                      {order.restaurant_name}
+                    </ProText>
+                    <ProText type="secondary">
+                      {formatDate(order?.created_at)}
+                    </ProText>
+                    <ProText type="secondary">
+                      {t("orders.orderID")} {order.id}
+                    </ProText>
+                    <Button
+                      style={{
+                        height: 28,
+                        gap: 10,
+                        opacity: 1,
+                        borderRadius: "Spacing/4XL",
+                        padding: "4px 8px",
+                        border: "none",
+                        width: "fit-content",
+                        ...getStatusButtonStyles(order),
+                      }}
+                    >
+                      {order.status}
+                    </Button>
+                  </div>
                 </div>
-              </div>
-              <Divider style={{ margin: "15px 0 10px 0" }} />
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "space-around",
-                }}
-              >
-                <div>
-                  <ProText style={{ fontSize: "1rem", color: colors.primary }}>
-                    <RateIcon className={styles.rateIcon} />
-                    {t("orders.rateOrder")}
-                  </ProText>{" "}
-                </div>
+                <Divider style={{ margin: "15px 0 10px 0" }} />
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-around",
+                  }}
+                >
+                  <div>
+                    <ProText
+                      style={{ fontSize: "1rem", color: colors.primary }}
+                    >
+                      <RateIcon className={styles.rateIcon} />
+                      {t("orders.rateOrder")}
+                    </ProText>{" "}
+                  </div>
 
-                <div>
-                  <ProText style={{ fontSize: "1rem", color: colors.primary }}>
-                    <ReOrderIcon className={styles.reorderIcon} />
-                    {t("orders.reOrder")}
-                  </ProText>
+                  <div>
+                    <ProText
+                      style={{ fontSize: "1rem", color: colors.primary }}
+                    >
+                      <ReOrderIcon className={styles.reorderIcon} />
+                      {t("orders.reOrder")}
+                    </ProText>
+                  </div>
                 </div>
-              </div>
-            </Card>
+              </Card>
+            </Link>
           ))}
         </div>
       )}
diff --git a/src/pages/orders/page.tsx b/src/pages/orders/page.tsx
index 3767457..6053cdf 100644
--- a/src/pages/orders/page.tsx
+++ b/src/pages/orders/page.tsx
@@ -1,25 +1,23 @@
-import { Button, Row } from "antd";
 import ProHeader from "components/ProHeader/ProHeader";
 import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router-dom";
-import styles from "./orders.module.css";
+import { useParams } from "react-router-dom";
 import OrdersList from "./OrdersList";
+import OrderDetails from "./OrderDetails";
 
 export default function OrdersPage() {
   const { t } = useTranslation();
-  const { subdomain } = useParams();
+  const { orderId } = useParams();
 
   return (
     <>
-      <ProHeader>{t("orders.title")}</ProHeader>
-      <OrdersList />
-      <Row className={styles.row}>
-        <Link to={`/${subdomain}/menu`} style={{ width: "100%" }}>
-          <Button type="primary" shape="round" className={styles.button}>
-            {t("orders.browseMenu")}
-          </Button>
-        </Link>
-      </Row>
+      {orderId ? (
+        <OrderDetails orderId={orderId} />
+      ) : (
+        <>
+          <ProHeader>{t("orders.title")}</ProHeader>
+          <OrdersList />
+        </>
+      )}
     </>
   );
 }
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
index a62d2ff..14f6ccf 100644
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -115,7 +115,7 @@ export const router = createHashRouter([
       },
 
       {
-        path: "orders",
+        path: "orders/:orderId?",
         element: (
           <PageWrapper
             children={