diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts
index 50c2dbe..9295e6c 100644
--- a/src/ThemeConstants.ts
+++ b/src/ThemeConstants.ts
@@ -2,7 +2,7 @@
 import type { ThemeConfig } from "antd";
 
 export const colors = {
-  primary: "#FFD633",
+  primary: "#FFC600",
   secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
@@ -29,7 +29,7 @@ export const lightColors = {
   800: "#003650",
   900: "#001620",
   borderColor: "#E7EAF3B2",
-  primaryColor: "#FFD633",
+  primaryColor: "#FFC600",
   secondaryColor: "#09237D",
   whiteColor: "#FFF",
   blackColor: "#000000e0",
@@ -59,7 +59,7 @@ export const darkColors = {
   // Semantic colors
   borderColor: "#363636",
   borderColorLight: "#424242",
-  primaryColor: "#FFD633",
+  primaryColor: "#FFC600",
   primaryColorHover: "#FFD633",
   primaryColorActive: "#E6B800",
   secondaryColor: "#FFD633",
diff --git a/src/components/LoyaltyCard/LoyaltyCard.module.css b/src/components/LoyaltyCard/LoyaltyCard.module.css
index 7405ac9..248f0f7 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.module.css
+++ b/src/components/LoyaltyCard/LoyaltyCard.module.css
@@ -10,6 +10,8 @@
   background-color: var(--secondary-background);
   border: none;
   margin-bottom: 1rem;
+  margin: 16px;
+  border-radius: 6px;
 }
 
 .loyaltyContainer :global(.ant-card-body) {
diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx
index c76b852..f5c3f30 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.tsx
+++ b/src/components/LoyaltyCard/LoyaltyCard.tsx
@@ -88,7 +88,7 @@ const LoyaltyCard = () => {
               </ProText>
             </Col>
             <Col>
-              <PresentIcon />
+              {/* <PresentIcon /> */}
             </Col>
           </Row>
         )}
diff --git a/src/index.css b/src/index.css
index 1444b48..e424b3d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,7 +11,7 @@
   --secondary-background: #ffffff;
   --secondary-foreground: #0a0a0a;
   --primary-dark: #0a0a0a;
-  --primary: #ffd633;
+  --primary: #FFC600;
   --primary2: #ffc600;
   --secondary: #09237d;
   --text-color: #fff;
@@ -27,8 +27,8 @@
 
   /* Typography */
   --font-roboto:
-    "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
+    "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
index 97814b2..bd54afd 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
@@ -117,7 +117,7 @@
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: position, transform, opacity, filter;
   transform-origin: top center;
-  gap: 0.5rem;
+  gap: 14px;
   padding: 0.5rem 1rem 1rem 1rem;
   user-select: none;
 }
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
index 032c938..20f0a7d 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
@@ -190,6 +190,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
               style={{
                 borderRadius: 8,
                 border: "none",
+                backgroundColor: "none",
               }}
               styles={{
                 body: {
@@ -250,20 +251,23 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     ...(xs || md
                       ? {
                           // backgroundColor: "#fff6e0",
-                          borderBottom: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
-                          borderRight: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
-                          borderLeft: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
+                          borderBottom: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : "none",
+                          borderRight: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : "none",
+                          borderLeft: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : "none",
                           borderTop: isCategoriesSticky
                             ? "solid 1px var(--primary)"
                             : 0,
-                          borderStartStartRadius: isCategoriesSticky ? 8 : 0,
-                          borderStartEndRadius: isCategoriesSticky ? 8 : 0,
-                          borderEndEndRadius: 8,
-                          borderEndStartRadius: 8,
-                          backgroundColor:
-                            activeCategory === category.id
-                              ? colors.primary
-                              : undefined,
+                          borderStartStartRadius: isCategoriesSticky ? 888 : 0,
+                          borderStartEndRadius: isCategoriesSticky ? 888 : 0,
+                          borderEndEndRadius: isCategoriesSticky ? 888 : 0,
+                          borderEndStartRadius: isCategoriesSticky ? 888 : 0,
+                          backgroundColor: "var(--background)",
                         }
                       : { borderRadius: 8 }),
                     width: 104,
@@ -282,7 +286,9 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                       textAlign: "center",
 
                       color:
-                        activeCategory === category.id ? "#FFF" : undefined,
+                        activeCategory === category.id
+                          ? colors.primary
+                          : undefined,
                       fontWeight:
                         activeCategory === category.id ? "600" : "500",
                       whiteSpace: "nowrap",
diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx
index 69d2c61..17a37fb 100644
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -54,6 +54,7 @@ export default function ProductCard({ item }: Props) {
             overflow: "hide",
             width: "100%",
             boxShadow: "none",
+            backgroundColor: "var(--secondary-background)",
           }}
           styles={{
             body: {
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index 44c1701..f67ec1f 100644
--- a/src/pages/menu/menu.module.css
+++ b/src/pages/menu/menu.module.css
@@ -53,6 +53,16 @@
   right: -10px !important;
 }
 
+:global(.darkApp) .restaurantHeader path {
+  fill: none !important;
+  stroke: #ffffff !important;
+}
+
+:global(.darkApp) .logoContainerIcon path {
+  fill: var(--background) !important;
+  stroke: var(--background) !important;
+}
+
 .timeIcon {
   position: relative;
   top: 4px;
@@ -121,10 +131,6 @@
   margin-left: 200px;
 }
 
-:global(.darkApp) .restaurantHeader path {
-  fill: none !important;
-  stroke: #ffffff !important;
-}
 
 /* Enhanced Dark theme styles */
 :global(.darkApp) .itemName {
@@ -477,7 +483,7 @@
 }
 
 .restaurantTitle {
-  font-size: 16px;
+  font-size: 24px !important;
   font-weight: bold;
   margin-bottom: 0px !important;
 }
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index 35707f9..33b2540 100644
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -113,7 +113,7 @@ function MenuPage() {
 
           <div className={`${styles.headerContainer}`}>
             <div className={styles.contentWrapper}>
-              <ProTitle level={4} className={styles.restaurantTitle}>
+              <ProTitle className={styles.restaurantTitle}>
                 {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
               </ProTitle>