diff --git a/src/app/about/about.module.css b/src/app/about/about.module.css
index e04bda6..9b480e9 100644
--- a/src/app/about/about.module.css
+++ b/src/app/about/about.module.css
@@ -154,7 +154,7 @@
   padding: 2.5rem 2rem;
   text-align: center;
   border: 2px solid #b07c4b;
-   transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
@@ -195,10 +195,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 2rem;
+  /* gap: 2rem; */
   max-width: 900px;
   margin: 0 auto;
   position: relative;
+  padding: 0 70px;
 }
 
 .sliderBtn {
@@ -214,6 +215,18 @@
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.sliderBtn:first-child {
+  left: 10px;
+}
+
+.sliderBtn:last-child {
+  right: 10px;
 }
 
 .sliderBtn:hover {
@@ -225,7 +238,7 @@
   background-color: #F5E6D3;
   padding: 3rem 2.5rem;
   border: 2px solid #b07c4b;
-   display: flex;
+  display: flex;
   flex-direction: column;
   gap: 2rem;
   flex: 1;
@@ -360,20 +373,12 @@
 
 @media (max-width: 1024px) {
   .featuresGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  /* .featuresGrid {
     grid-template-columns: 1fr;
-  }
-
-  .testimonialSlider {
-    flex-direction: column;
-  }
-
-  .sliderBtn {
-    order: 2;
-  }
-
-  .testimonialCard {
-    order: 1;
-  }
+  } */
 
   .faqContainer {
     grid-template-columns: 1fr;
@@ -417,6 +422,18 @@
     font-size: 2rem;
   }
 
+  .testimonialSlider {
+    padding: 0 40px;
+  }
+
+  .sliderBtn:first-child {
+    left: 0;
+  }
+
+  .sliderBtn:last-child {
+    right: 0;
+  }
+
   .faqSection {
     padding: 60px 20px;
   }
@@ -602,6 +619,10 @@
     gap: 1.5rem;
   }
 
+  .featuresGrid {
+    grid-template-columns: 1fr;
+  }
+
   /* Image should come to top */
   .faqImageBlock {
     width: 100% !important;
diff --git a/src/app/about/about_temp.css b/src/app/about/about_temp.css
index 1ed0327..2bfbff3 100644
--- a/src/app/about/about_temp.css
+++ b/src/app/about/about_temp.css
@@ -150,7 +150,7 @@
   padding: 2.5rem 2rem;
   text-align: center;
   border: 2px solid #b07c4b;
-   transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css
index e3d4fa8..458ece5 100644
--- a/src/app/blog/blog.module.css
+++ b/src/app/blog/blog.module.css
@@ -42,11 +42,46 @@
     color: var(--color-gold);
 }
 
+/* Section Heading Styles */
+.sectionHeading {
+    padding: 60px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: 0.9rem;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: 2.5rem;
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: 1rem;
+    color: #c49c5c;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .blogSection {
-    padding: 80px 10px;
+    padding: 20px 10px;
     max-width: 1200px;
     margin: 0 auto;
-    /* background-color: #0a0a0a; */
+    padding-bottom: 80px;
 }
 
 .grid {
@@ -58,7 +93,7 @@
 .card {
     background-color: #F5E6D3;
     border: 2px solid #b07c4b;
-     overflow: hidden;
+    overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -98,7 +133,6 @@
 
 .date {
     font-size: 0.9rem;
-    /* color: #836839; */
     margin-bottom: 1rem;
     font-family: var(--font-lato);
     font-weight: 600;
@@ -106,7 +140,6 @@
 
 .excerpt {
     font-size: 1rem;
-    /* color: #5d4037; */
     line-height: 1.6;
     margin-bottom: 1.5rem;
     flex-grow: 1;
@@ -137,6 +170,10 @@
         font-size: 3rem;
     }
 
+    .mainHeading {
+        font-size: 2rem;
+    }
+
     .blogSection {
         padding: 60px 10px;
     }
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 5749e18..143c69c 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -64,6 +64,14 @@ export default function BlogPage() {
                 </div>
             </motion.section>
 
+            <section className={styles.sectionHeading}>
+                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
+                <h2 className={styles.mainHeading}>Stories From Our Kitchen, Turkish Culture, And Culinary Traditions</h2>
+                <p className={styles.description}>
+                    Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
+                </p>
+            </section>
+
             <section className={styles.blogSection}>
                 <motion.div
                     className={styles.grid}
diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css
index ff2f585..e61c15b 100644
--- a/src/app/contact/contact.module.css
+++ b/src/app/contact/contact.module.css
@@ -282,6 +282,13 @@
     height: 300px;
 }
 
+.phoneFlex {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+
 @media (max-width: 1024px) {
     .container {
         grid-template-columns: repeat(2, 1fr);
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 4441833..66f0d7e 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -22,8 +22,8 @@ export default function ContactPage() {
     const [email, setEmail] = useState("");
 
     useEffect(() => {
-        const user = "info";
-        const domain = "antalya-restaurant.com";
+        const user = "hello";
+        const domain = "antalyarestaurant.ca";
         setEmail(`${user}@${domain}`);
     }, []);
 
@@ -313,67 +313,79 @@ export default function ContactPage() {
                         viewport={{ once: true }}
                         transition={{ duration: 0.8 }}
                     >
-                        {/* Location Cards */}
-                        <div className={styles.locationCard}>
-                            <div className={styles.iconWrapper}>
-                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                </svg>
-                            </div>
-                            <div className={styles.locationInfo}>
-                                <h3 className={styles.locationTitle}>Kitchener Location</h3>
-                                <p className={styles.locationSubtitle}>Main Restaurant</p>
-                                <p className={styles.locationAddress}>
-                                    1187 Fischer-Hallman Rd #411<br />
-                                    Kitchener, ON N2T 4H2
-                                </p>
-                            </div>
-                        </div>
-
-                        <div className={styles.locationCard}>
-                            <div className={styles.iconWrapper}>
-                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                </svg>
-                            </div>
-                            <div className={styles.locationInfo}>
-                                <h3 className={styles.locationTitle}>Burlington Location</h3>
-                                <p className={styles.locationSubtitle}>Second Location</p>
-                                <p className={styles.locationAddress}>
-                                    1860 Appleby Line<br />
-                                    Burlington, ON L7L 7H7
-                                </p>
-                            </div>
-                        </div>
-
                         <div className={styles.locationCard}>
                             <div className={styles.iconWrapper}>
                                 <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                 </svg>
                             </div>
+                       <div className={styles.locationInfo}>
+    <h3 className={styles.locationTitle}>Call Us</h3>
+
+    <div className={styles.phoneFlex}>
+        <a href="tel:5195816363" className={styles.locationSubtitle}>
+            Kitchener : 519-581-6363
+        </a>
+
+        <a href="tel:2893139838" className={styles.locationSubtitle}>
+            Burlington : 289-313-9838
+        </a>
+    </div>
+</div>
+
+
+                        </div>
+                        {/* Location Cards */}
+
+
+                        <div className={styles.locationCard}>
+                            <div className={styles.iconWrapper}>
+                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                </svg>
+                            </div>
                             <div className={styles.locationInfo}>
-                                <h3 className={styles.locationTitle}>Call Us</h3>
-                                <p className={styles.locationSubtitle}>For reservations & inquiries</p>
-                                <p className={styles.locationPhone}>(519) 570-4848</p>
+                                <h3 className={styles.locationTitle}>Contact Us</h3>
+
+                                <a href="mailto:hello@antalyarestaurant.ca" className={styles.locationSubtitle}>
+                                    hello@antalyarestaurant.ca
+                                </a>
+                            </div>
+
+                        </div>
+
+                        <div className={styles.locationCard}>
+                            <div className={styles.iconWrapper}>
+                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                </svg>
+                            </div>
+                            <div className={styles.locationInfo}>
+                                <h3 className={styles.locationTitle}>Location</h3>
+                                <p className={styles.locationSubtitle}>1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9</p>
+                                <p className={styles.locationSubtitle}>
+                                    1860 Appleby Line, Burlington, ON L7L 7H7
+                                </p>
                             </div>
                         </div>
 
+
+
                         {/* Map */}
                         <div className={styles.mapContainer}>
                             <iframe
-                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2895.8474424447677!2d-80.48089492346795!3d43.44826897111238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b8b1e1e1e1e1e%3A0x1e1e1e1e1e1e1e1e!2s1187%20Fischer-Hallman%20Rd%2C%20Kitchener%2C%20ON!5e0!3m2!1sen!2sca!4v1234567890123!5m2!1sen!2sca"
+                                src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d11603.157684992676!2d-79.89907629708574!3d43.417739917762866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x882bf4df1b8fa34d%3A0x9cb41f8ef1c4e9ac!2s1187%20Fischer-Hallman%20Rd%20%23435%2C%20Kitchener%2C%20ON%20N2E%204H9%2C%20Canada!3m2!1d43.4477606!2d-80.4809184!4m5!1s0x882b5fcd79165b0f%3A0x9d76a7bc4fd95533!2s1860%20Appleby%20Line%2C%20Burlington%2C%20ON%20L7L%207H7%2C%20Canada!3m2!1d43.3870284!2d-79.7771573!5e0!3m2!1sen!2sca!4v1700000123456!5m2!1sen!2sca"
                                 width="100%"
-                                height="500"
+                                height="900"
                                 style={{ border: 0 }}
                                 allowFullScreen
                                 loading="lazy"
                                 referrerPolicy="no-referrer-when-downgrade"
-                                title="Restaurant Location Map"
                             ></iframe>
                         </div>
+
                     </motion.div>
                 </motion.div>
             </section>
diff --git a/src/app/gallery/gallery.module.css b/src/app/gallery/gallery.module.css
index 140b1fa..3261ff5 100644
--- a/src/app/gallery/gallery.module.css
+++ b/src/app/gallery/gallery.module.css
@@ -42,11 +42,46 @@
     color: var(--color-gold);
 }
 
+/* Section Heading Styles */
+.sectionHeading {
+    padding: 60px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: 0.9rem;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: 2.5rem;
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: 1rem;
+    color: #c49c5c;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .section {
-    padding: 80px 10px;
+    padding: 20px 10px;
+    padding-bottom: 80px;
     max-width: 1200px;
     margin: 0 auto;
-    /* background-color: #0a0a0a; */
 }
 
 .tabs {
@@ -87,7 +122,7 @@
     aspect-ratio: 4/3;
     cursor: pointer;
     overflow: hidden;
-    border: 2px solid #b07c4b
+    border: 2px solid #b07c4b;
 }
 
 .image {
@@ -205,6 +240,10 @@
         font-size: 3rem;
     }
 
+    .mainHeading {
+        font-size: 2rem;
+    }
+
     .prevBtn {
         left: 10px;
     }
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 4cb4c09..da2daba 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -108,6 +108,14 @@ export default function GalleryPage() {
                 </div>
             </motion.section>
 
+            <section className={styles.sectionHeading}>
+                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
+                <h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish Cuisine</h2>
+                <p className={styles.description}>
+                    Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
+                </p>
+            </section>
+
             <section className={styles.section}>
                 <motion.div
                     className={styles.tabs}
diff --git a/src/app/menu/menu.module.css b/src/app/menu/menu.module.css
index cb2e6d4..12b768f 100644
--- a/src/app/menu/menu.module.css
+++ b/src/app/menu/menu.module.css
@@ -1,8 +1,7 @@
 .main {
-    background-color: var(--color-dark);
+    background-color: #f5e6d3;
     color: var(--color-text-light);
     min-height: 100vh;
-    background-color: #f5e6d3;
 }
 
 .hero {
@@ -43,19 +42,53 @@
     color: var(--color-gold);
 }
 
+/* Section Heading Styles */
+.sectionHeading {
+    padding: 60px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: 0.9rem;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: 2.5rem;
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: 1rem;
+    color: #c49c5c;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .menuSection {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 60px 20px 80px;
-    /* background-color: #0a0a0a; */
+    padding: 20px 20px 80px;
 }
 
 /* Category Tabs */
 .tabs {
     display: flex;
     justify-content: center;
-    gap: 1.5rem;
-    margin-bottom: 3rem;
+    gap: 1rem;
+    margin-bottom: 4rem;
     flex-wrap: wrap;
 }
 
@@ -67,7 +100,7 @@
     font-size: 1rem;
     cursor: pointer;
     transition: all 0.3s ease;
-    font-family: var(--font-playfair);
+    font-family: var(--font-lato);
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
@@ -77,84 +110,76 @@
 .activeTab {
     background-color: #c49c5c;
     color: #F5E6D3;
-    transform: translateY(-2px);
 }
 
+/* Menu Grid */
 .menuGrid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    gap: 2.5rem;
+}
+
+/* Menu Card - Horizontal Layout */
+.menuCard {
+    display: flex;
+    align-items: center;
+    background: white;
+    padding: 2rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: visible;
     gap: 2rem;
 }
 
-.menuCard {
+.menuCard:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+}
+
+/* Image Section with Dashed Circle */
+.imageFrame {
+    position: relative;
+    width: 140px;
+    height: 140px;
+    flex-shrink: 0;
     display: flex;
-    gap: 1.2rem;
-    background: #c49c5c;
-    padding: 1.2rem;
-    border: 1px solid rgba(197, 160, 89, 0.2);
-    transition: all 0.4s ease;
-    animation: fadeInUp 0.6s ease forwards;
-    opacity: 0;
+    justify-content: center;
+    align-items: center;
 }
 
-.menuCard:nth-child(1) {
-    animation-delay: 0.1s;
+/* Rotating Dashed Border */
+.imageFrame::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    border: 2px dashed #ff6b6b;
+    border-radius: 50%;
+    animation: spin 10s linear infinite;
 }
 
-.menuCard:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-.menuCard:nth-child(3) {
-    animation-delay: 0.3s;
-}
-
-.menuCard:nth-child(4) {
-    animation-delay: 0.4s;
-}
-
-.menuCard:nth-child(5) {
-    animation-delay: 0.5s;
-}
-
-.menuCard:nth-child(6) {
-    animation-delay: 0.6s;
-}
-
-@keyframes fadeInUp {
+@keyframes spin {
     from {
-        opacity: 0;
-        transform: translateY(30px);
+        transform: rotate(0deg);
     }
 
     to {
-        opacity: 1;
-        transform: translateY(0);
+        transform: rotate(360deg);
     }
 }
 
-.menuCard:hover {
-    background: #c49c5c;
-    border-color: #F5E6D3;
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
-}
-
-.imageFrame {
-    position: relative;
-    width: 130px;
-    height: 130px;
-    flex-shrink: 0;
-    padding: 6px;
-    background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.05));
-}
-
 .imageWrapper {
-    position: relative;
     width: 100%;
     height: 100%;
-    border: 2px solid #F5E6D3;
+    border-radius: 50%;
     overflow: hidden;
+    position: relative;
+    border: 4px solid white;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .dishImage {
@@ -166,134 +191,81 @@
     transform: scale(1.1);
 }
 
-/* Corner decorations */
-.cornerTL,
-.cornerTR,
-.cornerBL,
-.cornerBR {
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    border: 2px solid #F5E6D3;
-}
-
-.cornerTL {
-    top: 0;
-    left: 0;
-    border-right: none;
-    border-bottom: none;
-}
-
-.cornerTR {
-    top: 0;
-    right: 0;
-    border-left: none;
-    border-bottom: none;
-}
-
-.cornerBL {
-    bottom: 0;
-    left: 0;
-    border-right: none;
-    border-top: none;
-}
-
-.cornerBR {
-    bottom: 0;
-    right: 0;
-    border-left: none;
-    border-top: none;
-}
-
+/* Content Section */
 .cardContent {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    text-align: left;
 }
 
 .cardHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 0.6rem;
+    margin-bottom: 0.5rem;
 }
 
 .dishName {
     font-family: var(--font-playfair);
-    font-size: 1.3rem;
-    color: #F5E6D3;
-    text-transform: capitalize;
-    transition: color 0.3s;
-}
-
-.menuCard:hover .dishName {
-    color: #F5E6D3;
+    font-size: 1.25rem;
+    color: #333;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
 }
 
 .price {
-    font-size: 1.2rem;
-    color: #F5E6D3;
-    font-weight: bold;
-    font-family: var(--font-playfair);
+    display: block;
+    font-size: 1.1rem;
+    color: #ffb300;
+    font-weight: 700;
+    font-family: var(--font-lato);
+    margin-bottom: 0.5rem;
 }
 
 .description {
     font-size: 0.9rem;
-    color: #F5E6D3;
+    color: #c49c5c;
     line-height: 1.6;
     font-family: var(--font-lato);
-    opacity: 0.85;
 }
 
+/* Responsive */
 @media (max-width: 968px) {
     .menuGrid {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
-    .heroTitle {
-        font-size: 3rem;
+    .hero {
+        padding: 6rem 1rem 4rem;
     }
 
-    .menuSection {
-        padding: 40px 20px 60px;
+    .heroTitle {
+        font-size: 2.5rem;
+    }
+
+    .mainHeading {
+        font-size: 2rem;
     }
 
     .tabs {
-        gap: 1rem;
+        gap: 0.5rem;
     }
 
     .tab {
-        padding: 10px 20px;
-        font-size: 0.9rem;
+        padding: 10px 15px;
+        font-size: 0.85rem;
     }
 
     .menuCard {
         flex-direction: column;
-        align-items: center;
+        text-align: center;
+        padding: 1.5rem;
+        gap: 1.5rem;
+    }
+
+    .cardContent {
         text-align: center;
     }
 
     .imageFrame {
-        width: 150px;
-        height: 150px;
+        margin: 0 auto;
     }
-
-    .cardHeader {
-        flex-direction: column;
-        gap: 0.5rem;
-        align-items: center;
-    }
-}
-
-@media (max-width: 767px) and (min-width: 200px) {
-
-    .menuGrid {
-        grid-template-columns: 1fr;
-    }
-
-
-
 }
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index f297a4b..856d2a4 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -81,6 +81,14 @@ export default function MenuPage() {
                 </div>
             </motion.section>
 
+            <section className={styles.sectionHeading}>
+                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
+                <h2 className={styles.mainHeading}>Delicious Turkish Dishes, Including Kebabs, Mezze, And More</h2>
+                <p className={styles.description}>
+                    Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
+                </p>
+            </section>
+
             <section className={styles.menuSection}>
                 {/* Category Tabs */}
                 <motion.div
@@ -118,7 +126,7 @@ export default function MenuPage() {
                             className={styles.menuCard}
                             variants={cardVariants}
                             whileHover={{
-                                y: -8,
+                                y: -5,
                                 transition: { duration: 0.3 }
                             }}
                         >
@@ -131,10 +139,6 @@ export default function MenuPage() {
                                         className={styles.dishImage}
                                     />
                                 </div>
-                                <div className={styles.cornerTL}></div>
-                                <div className={styles.cornerTR}></div>
-                                <div className={styles.cornerBL}></div>
-                                <div className={styles.cornerBR}></div>
                             </div>
 
                             <div className={styles.cardContent}>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 05406e0..0959826 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import Hero from "@/components/Hero/Hero";
 import PopularDishes from "@/components/PopularDishes/PopularDishes";
 import About from "@/components/About/About";
+import Menu from "@/components/Menu/Menu";
 import Gallery from "@/components/Gallery/Gallery";
 import Testimonials from "@/components/Testimonials/Testimonials";
 import Blogs from "@/components/Blogs/Blogs";
@@ -13,6 +14,7 @@ export default function Home() {
       <Hero />
       <PopularDishes />
       <About />
+      <Menu />
       <Gallery />
       <Testimonials />
       <Blogs />
diff --git a/src/components/BookTable/BookTable.tsx b/src/components/BookTable/BookTable.tsx
index d2a243a..a36ac21 100644
--- a/src/components/BookTable/BookTable.tsx
+++ b/src/components/BookTable/BookTable.tsx
@@ -17,8 +17,8 @@ export default function BookTable() {
     const [email, setEmail] = useState("");
 
     useEffect(() => {
-        const user = "info";
-        const domain = "antalya-restaurant.com";
+        const user = "hello";
+        const domain = "antalyarestaurant.ca";
         setEmail(`${user}@${domain}`);
     }, []);
 
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index cc1c570..f22c1b5 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -31,9 +31,39 @@ export default function Footer() {
                             Discover the essence of fusion cuisine in the heart of Ontario at Antalya Restaurant. Our carefully curated menu offers a delicious selection from sizzling kebabs and succulent doners to authentic pides, sandwiches, and wraps.
                         </p>
                         <div className={styles.socialIcons}>
-                            <a href="#" className={styles.iconLink}><div className={styles.icon}><FaFacebookF /></div></a>
-                            <a href="#" className={styles.iconLink}><div className={styles.icon}><FaTwitter /></div></a>
-                            <a href="#" className={styles.iconLink}><div className={styles.icon}><FaInstagram /></div></a>
+                            <a
+                                href="https://www.facebook.com/antalyakebabgrill#"
+                                className={styles.iconLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <div className={styles.icon}>
+                                    <FaFacebookF />
+                                </div>
+                            </a>
+
+                            <a
+                                href="#"
+                                className={styles.iconLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <div className={styles.icon}>
+                                    <FaTwitter />
+                                </div>
+                            </a>
+
+                            <a
+                                href="#"
+                                className={styles.iconLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <div className={styles.icon}>
+                                    <FaInstagram />
+                                </div>
+                            </a>
+
                         </div>
                     </div>
 
@@ -76,8 +106,8 @@ export default function Footer() {
 
                             <h3 className={styles.subHeading}>Opening Hours</h3>
                             <p className={styles.hours}>
-                                Sunday–Thursday 11am–10pm<br />
-                                Friday–Saturday 11am–11pm
+                                Sunday-Thursday 11am-10pm<br />
+                                Friday-Saturday 11am-11pm
                             </p>
                         </div>
                     </div>
diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css
new file mode 100644
index 0000000..692da9f
--- /dev/null
+++ b/src/components/Menu/Menu.module.css
@@ -0,0 +1,294 @@
+.menuSection {
+    padding: 6rem 2rem;
+    background-color: #232323;
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+}
+
+.title {
+    font-family: var(--font-cinzel), serif;
+    font-size: 3.5rem;
+    color: #c49c5c;
+    margin-bottom: 3rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    line-height: 1.2;
+    text-align: center;
+}
+
+/* Category Tabs */
+.tabs {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.tab {
+    background: transparent;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
+    padding: 12px 30px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: var(--font-playfair);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.tab:hover,
+.activeTab {
+    background-color: #c49c5c;
+    color: #F5E6D3;
+    transform: translateY(-2px);
+}
+
+.menuGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.menuCard {
+    display: flex;
+    gap: 1.2rem;
+    background: #c49c5c;
+    padding: 1.2rem;
+    border: 1px solid rgba(197, 160, 89, 0.2);
+    transition: all 0.4s ease;
+    animation: fadeInUp 0.6s ease forwards;
+    opacity: 0;
+}
+
+.menuCard:nth-child(1) {
+    animation-delay: 0.1s;
+}
+
+.menuCard:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.menuCard:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+.menuCard:nth-child(4) {
+    animation-delay: 0.4s;
+}
+
+.menuCard:nth-child(5) {
+    animation-delay: 0.5s;
+}
+
+.menuCard:nth-child(6) {
+    animation-delay: 0.6s;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.menuCard:hover {
+    background: #c49c5c;
+    border-color: #F5E6D3;
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
+}
+
+.imageFrame {
+    position: relative;
+    width: 130px;
+    height: 130px;
+    flex-shrink: 0;
+    padding: 6px;
+    background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.05));
+}
+
+.imageWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #F5E6D3;
+    overflow: hidden;
+}
+
+.dishImage {
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.menuCard:hover .dishImage {
+    transform: scale(1.1);
+}
+
+/* Corner decorations */
+.cornerTL,
+.cornerTR,
+.cornerBL,
+.cornerBR {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    border: 2px solid #F5E6D3;
+}
+
+.cornerTL {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+}
+
+.cornerTR {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+}
+
+.cornerBL {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+}
+
+.cornerBR {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+}
+
+.cardContent {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.cardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 0.6rem;
+}
+
+.dishName {
+    font-family: var(--font-playfair);
+    font-size: 1.3rem;
+    color: #F5E6D3;
+    text-transform: capitalize;
+    transition: color 0.3s;
+}
+
+.menuCard:hover .dishName {
+    color: #F5E6D3;
+}
+
+.price {
+    font-size: 1.2rem;
+    color: #F5E6D3;
+    font-weight: bold;
+    font-family: var(--font-playfair);
+}
+
+.description {
+    font-size: 0.9rem;
+    color: #F5E6D3;
+    line-height: 1.6;
+    font-family: var(--font-lato);
+    opacity: 0.85;
+    text-align: start;
+}
+
+/* View More Button */
+.viewMoreContainer {
+    margin-top: 3rem;
+    text-align: center;
+}
+
+.button {
+    display: inline-block;
+    padding: 0.8rem 2rem;
+    border: 1px solid #b07c4b;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.button:hover {
+    background-color: #c49c5c;
+    color: #fff;
+    border-color: #c49c5c;
+}
+
+@media (max-width: 968px) {
+    .menuGrid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .title {
+        font-size: 2.5rem;
+    }
+
+    .menuSection {
+        padding: 40px 20px 60px;
+    }
+
+    .tabs {
+        gap: 1rem;
+    }
+
+    .tab {
+        padding: 10px 20px;
+        font-size: 0.9rem;
+    }
+
+    .menuCard {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .imageFrame {
+        width: 150px;
+        height: 150px;
+    }
+
+    .cardHeader {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}
+
+@media (max-width: 767px) and (min-width: 200px) {
+    .menuGrid {
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
new file mode 100644
index 0000000..6edcd66
--- /dev/null
+++ b/src/components/Menu/Menu.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import { useState } from 'react';
+import Image from "next/image";
+import Link from "next/link";
+import styles from "./Menu.module.css";
+import { menuData } from "@/utils/constant";
+import { motion } from "framer-motion";
+
+export default function Menu() {
+    const [activeCategory, setActiveCategory] = useState(0);
+
+    // Animation variants
+    const tabsVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.2
+            }
+        }
+    };
+
+    const tabVariants = {
+        hidden: { opacity: 0, y: 10 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.4 }
+        }
+    };
+
+    const gridVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.2
+            }
+        }
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 30 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.5 }
+        }
+    };
+
+    return (
+        <section className={styles.menuSection}>
+            {/* Section Title */}
+            <motion.h2
+                className={styles.title}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+            >
+                OUR MENU
+            </motion.h2>
+
+            {/* Category Tabs */}
+            <motion.div
+                className={styles.tabs}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                variants={tabsVariants}
+            >
+                {menuData.map((section, index) => (
+                    <motion.button
+                        key={index}
+                        className={`${styles.tab} ${activeCategory === index ? styles.activeTab : ''}`}
+                        onClick={() => setActiveCategory(index)}
+                        variants={tabVariants}
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
+                        {section.category}
+                    </motion.button>
+                ))}
+            </motion.div>
+
+            {/* Menu Items Grid */}
+            <motion.div
+                className={styles.menuGrid}
+                key={activeCategory}
+                initial="hidden"
+                animate="visible"
+                variants={gridVariants}
+            >
+                {menuData[activeCategory].items.map((item, itemIndex) => (
+                    <motion.div
+                        key={itemIndex}
+                        className={styles.menuCard}
+                        variants={cardVariants}
+                        whileHover={{
+                            y: -8,
+                            transition: { duration: 0.3 }
+                        }}
+                    >
+                        <div className={styles.imageFrame}>
+                            <div className={styles.imageWrapper}>
+                                <Image
+                                    src={item.image}
+                                    alt={item.name}
+                                    fill
+                                    className={styles.dishImage}
+                                />
+                            </div>
+                            <div className={styles.cornerTL}></div>
+                            <div className={styles.cornerTR}></div>
+                            <div className={styles.cornerBL}></div>
+                            <div className={styles.cornerBR}></div>
+                        </div>
+
+                        <div className={styles.cardContent}>
+                            <div className={styles.cardHeader}>
+                                <h3 className={styles.dishName}>{item.name}</h3>
+                                <span className={styles.price}>{item.price}</span>
+                            </div>
+                            <p className={styles.description}>{item.description}</p>
+                        </div>
+                    </motion.div>
+                ))}
+            </motion.div>
+
+            {/* View More Button */}
+            <motion.div
+                className={styles.viewMoreContainer}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+            >
+                <Link href="/menu" className={styles.button}>
+                    View More
+                </Link>
+            </motion.div>
+        </section>
+    );
+}