diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts
index c8c39d9..55403d8 100644
--- a/src/ThemeConstants.ts
+++ b/src/ThemeConstants.ts
@@ -2,7 +2,7 @@
 import type { ThemeConfig } from "antd";
 
 export const colors = {
-  primary: "#CC9300",
+  primary: "#FFB700",
   secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
diff --git a/src/components/LoyaltyCard/LoyaltyCard.module.css b/src/components/LoyaltyCard/LoyaltyCard.module.css
index c4e4038..e93d859 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.module.css
+++ b/src/components/LoyaltyCard/LoyaltyCard.module.css
@@ -10,7 +10,7 @@
   background-color: var(--secondary-background);
   border: none;
   margin-bottom: 1rem;
-  margin: 16px;
+  margin: 0 16px 20px 16px;
   border-radius: 6px;
 }
 
diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx
index d92c24d..6fdd636 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.tsx
+++ b/src/components/LoyaltyCard/LoyaltyCard.tsx
@@ -1,5 +1,4 @@
 import { Card, Col, Image, Row } from "antd";
-import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
 import PresentIcon from "components/Icons/cart/PresentIcon";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
@@ -8,11 +7,13 @@ import { ACCESS_TOKEN } from "utils/constants";
 import { colors } from "ThemeConstants.ts";
 import ProText from "../ProText";
 import styles from "./LoyaltyCard.module.css";
+import { useAppSelector } from "redux/hooks";
 
 const LoyaltyCard = () => {
   const { t } = useTranslation();
   const { subdomain } = useParams();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
+  const { isRTL } = useAppSelector((state) => state.locale);
   const token = localStorage.getItem(ACCESS_TOKEN);
   const isHasLoyaltyGift =
     (restaurant?.loyalty_stamps || 0) -
@@ -29,11 +30,20 @@ const LoyaltyCard = () => {
         >
           <Col>
             <Row align="middle" gutter={[8, 8]}>
-              <Col>
+              {/* <Col>
                 <LoyaltyIcon className={styles.loyaltyIcon} />
-              </Col>
+              </Col> */}
               <Col>
-                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
+                <ProText
+                  style={{
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    fontSize: "16px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: "#333333",
+                  }}
+                >
                   {t("menu.loyaltyPoints")}
                 </ProText>
               </Col>
@@ -42,10 +52,13 @@ const LoyaltyCard = () => {
               type="secondary"
               strong
               style={{
-                fontSize: "14px",
-                fontWeight: 700,
-                position: "relative",
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: "12px",
+                lineHeight: "140%",
+                letterSpacing: "0%",
                 top: -2,
+                color: "#777580",
               }}
             >
               {token &&
@@ -61,12 +74,21 @@ const LoyaltyCard = () => {
                       textDecoration: "underline",
                       fontSize: "14px",
                       fontWeight: 400,
-                      padding: "0 4px",
+                      padding: isRTL ? "0 0 0 4px" : "0 4px 0 0",
                     }}
                   >
                     {t("menu.joinUs")}
                   </Link>
-                  <span style={{ fontSize: "14px", color: colors.secondary }}>
+                  <span
+                    style={{
+                      fontWeight: 400,
+                      fontStyle: "Regular",
+                      fontSize: "12px",
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      color: "#777580",
+                    }}
+                  >
                     {t("menu.joinUsDescription")}
                   </span>
                 </div>
@@ -80,7 +102,7 @@ const LoyaltyCard = () => {
             style={{
               display: "flex",
               flexDirection: "row",
-              gap: 10,
+              gap: 12,
               overflow: "hidden",
               scrollbarWidth: "none",
             }}
diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
index 91a7f50..5520023 100644
--- a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
@@ -3,7 +3,6 @@ import { Button, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
-import { colors } from "ThemeConstants.ts";
 import styles from "./AddToCartButton.module.css";
 import { useAppSelector, useAppDispatch } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
@@ -215,7 +214,7 @@ export function AddToCartButton({ item }: { item: Product }) {
           onClick={handlePlusClick}
           className={styles.addButton}
           style={{
-            backgroundColor: colors.primary,
+            backgroundColor: "#FFC600",
             width: 28,
             height: 28,
             position: "absolute",
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
index d8e1e5d..61c8311 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
@@ -118,9 +118,9 @@
   will-change: position, transform, opacity, filter;
   transform-origin: top center;
   gap: 14px;
-  padding: 0.5rem 1rem 1rem 1rem;
+  padding: 0.5rem 24px 1rem 24px;
   user-select: none;
-  margin-bottom: 0.5rem;
+  margin-bottom: 16px;
 }
 
 .categoriesContainer::-webkit-scrollbar {
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
index a589a2e..dc9f527 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
@@ -291,8 +291,8 @@ export function CategoriesList({ categories }: CategoriesListProps) {
 
                       color:
                         activeCategory === category.id
-                          ? colors.primary
-                          : undefined,
+                          ? "#FFC600"
+                          : "#86858E",
                       fontWeight:
                         activeCategory === category.id ? "600" : "500",
                       whiteSpace: "nowrap",
@@ -309,7 +309,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                         display: "inline-block",
                         borderBottom:
                           activeCategory === category.id && !isCategoriesSticky
-                            ? `2px solid ${colors.primary}`
+                            ? `2px solid #FFC600`
                             : "none",
                         paddingBottom: activeCategory === category.id ? 8 : 0,
                         marginTop: isCategoriesSticky ? 0 : 4,
diff --git a/src/pages/menu/components/MenuList/MenuList.module.css b/src/pages/menu/components/MenuList/MenuList.module.css
index 79e2007..65c28bf 100644
--- a/src/pages/menu/components/MenuList/MenuList.module.css
+++ b/src/pages/menu/components/MenuList/MenuList.module.css
@@ -20,7 +20,6 @@
   margin-bottom: 105px !important;
   display: flex;
   flex-direction: column;
-  gap: 12px;
   padding: 0 1rem;
 }
 
@@ -36,7 +35,7 @@
 .menuItemsGrid {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 12px;
 }
 
 /* Enhanced responsive menu section headers */
diff --git a/src/pages/menu/components/MenuList/MenuList.tsx b/src/pages/menu/components/MenuList/MenuList.tsx
index 0c22799..6b35a58 100644
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -54,7 +54,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
   return (
     <>
       <div className={styles.menuSections}>
-        {data?.categories?.map((category) => {
+        {data?.categories?.map((category, index) => {
           const categoryProducts = productsByCategory?.[category.id] || [];
           if (categoryProducts.length === 0) return null;
 
@@ -66,21 +66,24 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                   categoryRefs.current[category.id] = el;
                 }
               }}
-              style={{ marginBottom: "1rem" }}
+              style={{ marginBottom: "2rem" }}
             >
-              <ProTitle
-                style={{
-                  fontWeight: 600,
-                  fontStyle: "SemiBold",
-                  fontSize: "16px",
-                  lineHeight: "140%",
-                  letterSpacing: "0%",
-                  color: themeName === "dark" ? "#fff" : "#070707",
-                }}
-                level={5}
-              >
-                {isRTL ? category.name : category.name}
-              </ProTitle>
+              {index !== 0 && (
+                <ProTitle
+                  style={{
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    fontSize: "16px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: themeName === "dark" ? "#fff" : "#070707",
+                    marginBottom: 16,
+                  }}
+                  level={5}
+                >
+                  {isRTL ? category.name : category.name}
+                </ProTitle>
+              )}
               <div className={styles.menuItemsGrid}>
                 {categoryProducts.map((item: Product) => (
                   <ProductCard
diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx
index c91952b..67289ac 100644
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -188,7 +188,7 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
                 count={items
                   .filter((i) => i.id === item.id)
                   .reduce((total, item) => total + item.quantity, 0)}
-                color={colors.primary}
+                color="#FFC600"
                 title={`${items
                   .filter((i) => i.id === item.id)
                   .reduce((total, item) => total + item.quantity, 0)} in cart`}
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index 6a9074e..b172d97 100644
--- a/src/pages/menu/menu.module.css
+++ b/src/pages/menu/menu.module.css
@@ -4,8 +4,13 @@
 }
 
 .itemDescription {
-  font-size: 14px !important;
-  transition: color 0.3s ease;
+  font-family: Roboto;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  line-height: 120%;
+  letter-spacing: 0%;
+  color: #707070;
 }
 
 .cover {
@@ -533,9 +538,13 @@
 }
 
 .restaurantTitle {
-  font-size: 24px !important;
-  font-weight: bold;
-  margin-bottom: 0px !important;
+  font-family: Roboto;
+  font-weight: 600;
+  font-style: SemiBold;
+  font-size: 24px;
+  line-height: 120%;
+  letter-spacing: 0%;
+  color: #070707;
 }
 
 .restaurantDescription {
@@ -558,16 +567,26 @@
 
 .ratingScore {
   position: relative;
-  top: 3px;
-  font-size: 12px;
+  top:6px;
+  font-family: Roboto;
   font-weight: 600;
+  font-style: SemiBold;
+  font-size: 10px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #333333;
 }
 
 .ratingCount {
   position: relative;
-  top: 3px;
-  font-size: 12px;
-  color: #666;
+  top: 6px;
+  font-family: Roboto;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 10px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #506fd7;
 }
 
 .searchButtonContainer {
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index 10b0a47..82d1a1f 100644
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -119,9 +119,9 @@ function MenuPage() {
           <div className={`${styles.headerContainer}`}>
             <div className={styles.contentWrapper}>
               <div className={styles.restaurantHeaderTitleContainer}>
-                <ProTitle className={styles.restaurantTitle}>
+                <ProText className={styles.restaurantTitle}>
                   {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
-                </ProTitle>
+                </ProText>
                 <Button
                   className={
                     restaurant?.isOpened
@@ -151,7 +151,7 @@ function MenuPage() {
               <div className={styles.ratingContainer}>
                 <StarFilled className={styles.ratingStar} />
                 <ProText className={styles.ratingScore}>4.5</ProText>
-                <ProText className={styles.ratingCount}>(2567)</ProText>
+                <ProText className={styles.ratingCount}>(2567) </ProText>
                 <ProText
                   className={`${styles.itemDescription} ${styles.restaurantDescription} responsive-text`}
                 >
@@ -166,6 +166,35 @@ function MenuPage() {
             </div>
           </div>
 
+          <Button
+            style={{
+              height: 32,
+              borderRadius: 6,
+              paddingTop: 6,
+              paddingRight: 16,
+              paddingBottom: 6,
+              paddingLeft: 16,
+              gap: 8,
+              opacity: 1,
+              margin: 16,
+              backgroundColor: "#EBEBEC",
+              border: "none",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#09237D",
+              }}
+            >
+              Call Waiter
+            </ProText>
+          </Button>
+
           <div className={`${styles.pageContainer}`}>
             <Space orientation="vertical" style={{ width: "100%" }}>
               <div>
diff --git a/src/pages/restaurant/restaurant.module.css b/src/pages/restaurant/restaurant.module.css
index c608175..07f45ab 100644
--- a/src/pages/restaurant/restaurant.module.css
+++ b/src/pages/restaurant/restaurant.module.css
@@ -143,7 +143,7 @@
 @media (max-width: 769px) {
   .servicesGrid {
     display: grid;
-    gap: 10px;
+    gap: 16px;
     padding: 0 1rem;
     margin: 10px 0;
   }
@@ -260,7 +260,7 @@
   .servicesGrid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
+    gap: 24px;
     padding: 0 32px;
     margin: 32px 0;
     max-width: 700px;
@@ -603,7 +603,7 @@
 
   .servicesGrid {
     max-width: 1000px;
-    gap: 20px;
+    gap: 24px;
     padding: 0 32px;
     margin: 32px 0;
   }