diff --git a/hotel_booking/dining.php b/hotel_booking/dining.php
index 51a1ecf..675570b 100644
--- a/hotel_booking/dining.php
+++ b/hotel_booking/dining.php
@@ -47,9 +47,12 @@
             width: 50%;
             font-size: 50px;
             font-weight: 500;
-            margin-bottom: 50px;
+            margin-bottom: 100px;
             text-align: center;
         }
+        .dining-container{
+            display: none;
+        }
         .dining-img{
             width:90%;
             height: 650px; 
@@ -73,7 +76,118 @@
             font-size: 26px;
             text-transform: uppercase;
         }
-        @media (max-width:980px){
+        .card-flip-container{
+            width: 70%; 
+            display: flex;
+        }
+        .card-flip{
+            margin: 20px auto;
+            cursor: pointer;
+            perspective: 1000px;
+            width: 300px;
+            height: 450px;
+            padding: 5px;
+        }
+        .card-flip-flipper{
+            transition: 0.3s ease;
+            transform-style: preserve-3d;
+            position: relative;
+        }
+        .card-flip-content{
+            width: 100%;
+            backface-visibility: hidden;
+            position: absolute;
+            overflow: hidden;
+        }
+        .fancy-hover-image{
+            display: block;
+            width: 100%;
+            height: 450px;
+            object-fit: cover;
+            transition: filter 0.15s linear 0.15s;
+        }
+        .fancy-hover-fancy{
+            position: absolute;
+            top: 0;
+            background-color: rgba(55, 66, 78, 0);
+            width: 100%;
+            height: 100%;
+        }
+        .fancy-hover-fancy:after{
+            content: '';
+            background: white;
+            height: 1px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            right: 50%;
+            transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
+        }
+        .fancy-hover-text{
+            width: 100%;
+            text-align: center;
+            color: white;
+        }
+        .fancy-hover-element{
+            width: 100%;
+            position: absolute;
+            padding: 16px;
+        }
+        .fancy-hover-element-title{
+            background: rgba(0, 0, 0, 0.5);
+            bottom: 0;
+            font-size: 20px;
+            font-weight: 100;
+            text-transform: uppercase;
+            font-family: sans-serif;
+            transition: bottom 0.15s ease-in-out 0.15s, linear 0.15s;
+        }
+        .fancy-hover-element-subtitle{
+            top: 100%;
+            font-family: sans-serif;
+            transition: top 0.15s ease-out;
+        }
+        .fancy-hover:hover .fancy-hover-image{
+            filter: blur(2px);
+            transition-delay: 0s;
+        }
+        .fancy-hover:hover .fancy-hover-fancy{
+            background: rgba(0, 0, 0, 0.5);
+            transition-delay: 0s;
+        }
+        .fancy-hover:hover .fancy-hover-fancy:after{
+            left: 20%;
+            right: 20%;
+            transition-delay: 0.15s;
+        }
+        .fancy-hover:hover .fancy-hover-element-title{
+            bottom: 50%;
+            background: rgba(0, 0, 0, 0);
+            transition-delay: 0s;
+        }
+        .fancy-hover:hover .fancy-hover-element-subtitle{
+            top: 50%;
+            transition: top .15s ease-in 0.15s;
+        }
+
+        .card-flip-content-front{
+            transform: rotateY(0deg);
+            z-index: 2;
+        }
+        .card-flip-content-back {
+            background: rgb(44, 44, 44);
+            font-family: sans-serif;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            height: 450px;
+            transform: rotateY(180deg);
+        }
+        .card-flip.clicked .card-flip-flipper{
+            transform: rotateY(180deg);
+        }
+
+        @media (max-width:990px){
             .frame1{
                 width: 40px; 
                 height: 60px; 
@@ -86,6 +200,12 @@
             .frame-subtilte{
                 width: 90%;
             }
+            .dining-container{
+                display: block;
+            }
+            .dining-container1{
+                display: none;
+            }
             .dining-img{
                 width: 100%;
                 height: 650px; 
@@ -100,15 +220,29 @@
             .dining-text{
                 text-align: center
             }
+
+            .card-flip-container{
+                width: 90%; 
+            }
         }
         @media (max-width:768px) {
             .frame-subtilte{
                 font-size: 40px;
+                margin-bottom: 50px;
             }
             .dining-img{
                 height: 500px; 
             }
         }
+        @media (max-width:650px) {
+            .card-flip-container{
+                width: 100%;
+                flex-direction: column; 
+            }
+            .card-flip {
+                padding: 0px;
+            }
+        }
         @media (max-width:450px) {
             .dining-hero{
                 height: 80vh;
@@ -149,7 +283,13 @@
             <p class="frame-title">Dining</p>
         </div>
         <p class="frame-subtilte">Genuine restaurant serves variety foods</p>
-        <div class="container" style="margin-bottom: 50px; margin-top: 50px;">
+        <div class="container" style="margin-bottom: 50px;">
+            <div class="dining-container">
+                <p class="dining-title">Explore your palate</p>
+                <p class="dining-subtitle">"Premium taste experiences"</p>
+                <p class="dining-text">Come and savor the delectable dishes crafted by our chef using fresh, seasonal ingredients sourced from local producers, growers, and breeders. 
+                    Experience a delightful blend of national and international cuisines that will tantalize your taste buds</p>
+            </div>
             <div class="row">
                 <div class="col-lg-8">
                     <img src="./images/dining3.jpg" class="dining-img"/>
@@ -159,7 +299,7 @@
                         <video autoplay muted loop class="dining-video">
                             <source src="./images/dining-video.mp4" type="video/mp4">
                         </video>
-                        <div>
+                        <div class="dining-container1">
                             <p class="dining-title">Explore your palate</p>
                             <p class="dining-subtitle">"Premium taste experiences"</p>
                             <p class="dining-text">Come and savor the delectable dishes crafted by our chef using fresh, seasonal ingredients sourced from local producers, growers, and breeders. 
@@ -169,16 +309,104 @@
                 </div>
             </div>
         </div>
+        <div style="margin-top: 50px; text-align: center;">
+            <p class="dining-title">Tasteful Journey</p>
+            <p class="dining-subtitle" style="font-size: 20px; padding: 10px;">"Discover an exceptional dining experience <br/>that fits perfectly within your budget"</p>
+        </div>
+        <div class="card-flip-container" style="margin-bottom: 50px;">
+            <div class="card-flip fancy-hover">
+                <div class="card-flip-flipper">
+                    <div class="card-flip-content card-flip-content-front">
+                        <img class="fancy-hover-image" src="./images/dining-breakfast.jpg">
+                        <div class="fancy-hover-fancy"></div>
+                        <div class="fancy-hover-element fancy-hover-element-title">
+                            <p class="fancy-hover-text">Breakfast</p>
+                        </div>
+                        <div class="fancy-hover-element fancy-hover-element-subtitle">
+                            <p class="fancy-hover-text"> 6:30am - 10:00am<br><span style="font-size: 12px;">Click to see menu</span></p>
+                        </div>
+                    </div>
+                    <div class="card-flip-content card-flip-content-back">
+                        <p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Breakfast</p>
+                        <div style="font-size: 12px;">
+                            <p>Danish Pastries (Cheese, Fruit-filled)</p>
+                            <p>Muffins (Berries, Chocolate Chip)</p>
+                            <p>Pancakes (with Maple Syrup and Butter)</p>
+                            <p>Oatmeal with Toppings</p>
+                            <p>Granola with Greek Yogurt</p>
+                            <p>Omelettes (Cheese, Ham, Spinach, Mushrooms, Peppers)</p>
+                            <p>Scrambled Eggs (with Bacon or Sausage)</p>
+                            <p>Eggs Benedict</p>
+                        </div>
+                        <p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Beverages</p>
+                        <div style="font-size: 12px;">
+                            <p>Coffee (Regular, Decaf, Espresso) || Selection of Teas || Juice (Orange, Apple, Grapefruit) || Milk (Regular, Almond, Soy)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-flip fancy-hover">
+                <div class="card-flip-flipper">
+                    <div class="card-flip-content card-flip-content-front">
+                        <img class="fancy-hover-image" src="./images/dining-lunch.jpg">
+                        <div class="fancy-hover-fancy"></div>
+                        <div class="fancy-hover-element fancy-hover-element-title">
+                            <p class="fancy-hover-text">Lunch</p>
+                        </div>
+                        <div class="fancy-hover-element fancy-hover-element-subtitle">
+                            <p class="fancy-hover-text"> 11:30am - 3:00pm<br><span style="font-size: 12px;">Click to see menu</span></p>
+                        </div>
+                    </div>
+                    <div class="card-flip-content card-flip-content-back">
+                        <p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Lunch</p>
+                        <div style="font-size: 12px;">
+                            <p>Caesar Salad with (Grilled Chicken or Fresh Mozzarella, Tomatoes, and Basil)</p>
+                            <p>Grilled Salmon with Lemon Butter Sauce</p>
+                            <p>Beef Tenderloin with Red Wine Reduction</p>
+                            <p>Classic Club Sandwich with Fries</p>
+                            <p>Soup of the Day</p>
+                        </div>
+                        <p style="text-transform: uppercase; font-size: 12px; font-weight:600;">Desserts</p>
+                        <div style="font-size: 12px;">
+                            <p>New York Cheesecake with Berry Compote</p>
+                            <p>Fruit Platter with Seasonal Selections</p>
+                        </div>
+                        <p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Beverages</p>
+                        <div style="font-size: 12px;">
+                            <p>Soft Drinks || Selection of Teas || Brewed Coffee || Juice</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-flip fancy-hover">
+                <div class="card-flip-flipper">
+                    <div class="card-flip-content card-flip-content-front">
+                        <img class="fancy-hover-image" src="./images/dining-dinner.jpg">
+                        <div class="fancy-hover-fancy"></div>
+                        <div class="fancy-hover-element fancy-hover-element-title">
+                            <p class="fancy-hover-text">Dinner</p>
+                        </div>
+                        <div class="fancy-hover-element fancy-hover-element-subtitle">
+                            <p class="fancy-hover-text"> 5:30pm - 9:00pm<br><span style="font-size: 12px;">Click to see menu</span></p>
+                        </div>
+                    </div>
+                    <div class="card-flip-content card-flip-content-back">
+                        <p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Dinner</p>
+                        <div style="font-size: 12px;">
+                            <p>3 course meal </br>(Appetizer, Main course, and Dessert)</p>
+                            <p>4 course meal </br>(An hors d'oeuvre, Appetizer, Main course, and Dessert)</p>
+                            <p>5 course meal </br>(An hors d'oeuvre, Appetizer, Salad, Main course, and Dessert)</p>
+                            <p>6 course meal </br>(An hors d'oeuvre, Soup, Appetizer, Salad, Main course, and Dessert)</p>
+                            <p>9 course meal </br>(An hors d'oeuvre, Soup, Appetizer, Salad, Fish, Main course, Palate cleanser, Dessert, and Mignardise)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-
-
-
-
-
-
-
-
-
+    
 
 
 
@@ -186,5 +414,20 @@
     <?php require('./components/footer.php'); ?>
 
     <?php require('./components/script.php') ?>
+    <script>
+        $(document).ready(function() {
+            var classClicked = 'clicked';
+            $('.card-flip').click(function() {
+                if($(this).hasClass(classClicked)) {
+                $(this).removeClass(classClicked);
+                }
+                else {
+                $(this).addClass(classClicked);
+                }
+            }).mouseleave(function() {
+                $(this).removeClass(classClicked);
+            });
+        })
+    </script>
 </body>
 </html>
\ No newline at end of file