diff --git a/hotel_booking/about.php b/hotel_booking/about.php
index 99af111..c297780 100644
--- a/hotel_booking/about.php
+++ b/hotel_booking/about.php
@@ -17,39 +17,40 @@
             flex-direction: column;
         }
         .about-container{
-            width: 90%;
-            height: 95vh;
-            margin: auto;
+            display: none;
+        }
+        .about-container1{
+            display: block;
+        }
+        .about-img{
+            width:90%;
+            height: 650px; 
+            object-fit: cover;"
+        }
+        .about-img2{
+            width: 100%;
+            height: 100%;
+            margin-top: 50px;
         }
         .about-title{
+            margin-top: 50px;
             font-size: 16px;
             text-transform: uppercase;
             font-weight: 500;
             letter-spacing: 3px;
-            color: #B0A695;
-            text-shadow: 2px 2px 1px #EAD8C0;
+            color: #74512D;
+            text-shadow: 2px 2px 1px #AF8F6F;
         }
         .about-subtitle{
             font-size: 26px;
             text-transform: uppercase;
-            width: 500px;
-        }
-        .about-wrapper{
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            text-align: center;
-        }
-        .about-wrap{
-            width: 100%;
-            height: 100%; 
-            display: flex; 
-            flex-direction: column; 
-            justify-content: center; 
-            align-items: center;
         }
+        
+
+
+
+       
+        
         .about-container-title{
             font-size: 16px; 
             text-transform: uppercase; 
@@ -60,17 +61,6 @@
             text-align: center; 
             margin-top: 50px;"
         }
-        .about-wrapper-img{
-            width: 100%; 
-            height: 90%; 
-            border: 1px solid #B0A695;
-            padding: 10px;
-        }
-        .about-img{
-            width: 60%; 
-            height: 40%; 
-            object-fit: cover;
-        }
         .about-text{
             max-width: 650px; 
             text-align: center; 
@@ -177,14 +167,25 @@
             box-shadow:0 0 0 3px rgba(195,175,145,1);
         }
         @media (max-width:1200px){
-            .about-wrapper-img{
-                height: 80%;
-            }
             .timeline{
                 width:100%;
             }
         }
-        @media (max-width:980px){
+        @media (max-width:990px){
+            .about-container{
+                display: block;
+            }
+            .about-img{
+                width: 100%;
+                height: 650px; 
+            }
+            .about-img2{
+                margin-top: 20px;
+            }
+            .about-title, .about-subtitle{
+                margin-top: 30px;
+                text-align: center;
+            }
             .about-pre-title{
                 display: flex;
                 justify-content: center;
@@ -196,34 +197,13 @@
                 text-shadow: 2px 2px 1px #EAD8C0;
                 margin-top: 50px;
             }
-            .about-wrap{ 
-                justify-content: center; 
-                align-items: start;
-                flex-direction: row;
-            }
-            .about-wrapper{
-                flex-direction: column;
-                gap: 20px;
-            }
-            .about-wrapper-img{ 
-                height: 60%; 
-            }
-            .about-img{
-                width: 100%; 
-                height: 50%;
-            }
-            .about-container-title{; 
-                margin-top: -80px;"
+            .about-container1{
+                display: none;
             }
         }
         @media (max-width:760px) {
-            .about-subtitle{
-                font-size: 12px;
-                width: 100%;
-                padding: 0px 10px 0px 10px;
-            }
             .about-img{
-                width: 350px;
+                height: 500px; 
             }
             .timeline{
                 width:100%;
@@ -256,27 +236,20 @@
                 right:inherit;
             }
         }
-        @media (max-width:580px) {
-            .about-img{
-                width: 250px;
-            }
-        }
+        
         @media (max-width:450px) {
+            .about-img{
+                height: 450px; 
+            }
             .about-pre-title{
                 margin-top: 30px;
             }
             .about-hero{
                 height: 80vh;
             }
-            .about-wrapper-img{ 
-                height: 100%; 
-            }
             .about-text{
                 font-size: 12px;
             }
-            .about-img{
-                width: 200px;
-            }
         }
     </style>
 </head>
@@ -293,16 +266,22 @@
     </div>
     <!--pre section-->
     <div class="panel" data-color="white">
-        <div class="about-container">
-            <div class="about-wrapper">
-                <div class="about-wrapper-img">
-                    <img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/>
+        <div class="container" style="margin-bottom: 50px; margin-top: 50px;">
+            <div class="about-container">
+                <p class="about-title">Our vision</p>
+                <p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
+            </div>
+            <div class="row">
+                <div class="col-lg-8">
+                    <img src="./images/about.jpg" class="about-img"/>
                 </div>
-                <div class="about-wrap">
-                    <img src="./images/home4.jpg" class="about-img"/>
-                    <div style="margin-top: 20px;">
-                        <p class="about-title">Our vision</p>
-                        <p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
+                <div class="col-lg-4">
+                    <div>
+                        <img src="./images/home4.jpg" class="about-img2"/>
+                        <div class="about-container1">
+                            <p class="about-title">Our vision</p>
+                            <p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php
index 3e2786b..05c6ee0 100644
--- a/hotel_booking/components/header.php
+++ b/hotel_booking/components/header.php
@@ -10,10 +10,7 @@
                     <a class="nav-link" href="../services.php">Services</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="../dining.php">Dining</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">News</a>
+                    <a class="nav-link" href="../dining.php">Dining & Bar</a>
                 </li>
             </ul>
         </div>
@@ -30,12 +27,13 @@
                 <li class="nav-item">
                     <a class="nav-link" href="../contact.php">Contact</a>
                 </li>
-                <li class="nav-item">
-                    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a>
-                </li>
+                <div class="dropdown">
+                    <a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join us</a>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
+                        <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
+                        <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
+                    </ul>
+                </div>
             </ul>
         </div>
     </div>
diff --git a/hotel_booking/dining.php b/hotel_booking/dining.php
index 3897cf4..51a1ecf 100644
--- a/hotel_booking/dining.php
+++ b/hotel_booking/dining.php
@@ -16,11 +16,109 @@
             display: flex;
             flex-direction: column;
         }
-
+        .frame{
+            display: flex;
+            align-items: center;
+            gap: 20px; 
+            margin-bottom: 50px;
+        }
+        .frame1{
+            width: 60px; 
+            height: 80px; 
+            border: 1px solid black;
+        }
+        .frame2{
+            width: 40px; 
+            height: 60px; 
+            border: 1px solid black; 
+            margin-top: 10px; 
+            margin-left: 10px; 
+            display: flex; 
+            justify-content: center; 
+            align-items: center;
+            font-size: 30px;
+        }
+        .frame-title{
+            text-transform: uppercase; 
+            letter-spacing: 5px;
+            font-size: 12px;
+        }
+        .frame-subtilte{
+            width: 50%;
+            font-size: 50px;
+            font-weight: 500;
+            margin-bottom: 50px;
+            text-align: center;
+        }
+        .dining-img{
+            width:90%;
+            height: 650px; 
+            object-fit: cover;"
+        }
+        .dining-video{
+            width: 100%;
+            height: 100%;
+            margin-top: 50px;
+        }
+        .dining-title{
+            margin-top: 50px;
+            font-size: 16px;
+            text-transform: uppercase;
+            font-weight: 500;
+            letter-spacing: 3px;
+            color: #74512D;
+            text-shadow: 2px 2px 1px #AF8F6F;
+        }
+        .dining-subtitle{
+            font-size: 26px;
+            text-transform: uppercase;
+        }
+        @media (max-width:980px){
+            .frame1{
+                width: 40px; 
+                height: 60px; 
+            }
+            .frame2{
+                width: 20px; 
+                height: 40px;
+                font-size: 16px;
+            }
+            .frame-subtilte{
+                width: 90%;
+            }
+            .dining-img{
+                width: 100%;
+                height: 650px; 
+            }
+            .dining-video{
+                margin-top: 20px;
+            }
+            .dining-title, .dining-subtitle{
+                margin-top: 30px;
+                text-align: center;
+            }
+            .dining-text{
+                text-align: center
+            }
+        }
+        @media (max-width:768px) {
+            .frame-subtilte{
+                font-size: 40px;
+            }
+            .dining-img{
+                height: 500px; 
+            }
+        }
         @media (max-width:450px) {
             .dining-hero{
                 height: 80vh;
             }
+            .frame-subtilte{
+                font-size: 30px;
+            }
+            .dining-img{
+                height: 450px; 
+            }
         }
     </style>
 </head>
@@ -31,8 +129,44 @@
         <?php require('./components/header.php') ?>
         <div class="hero-content">
             <div class="hero-head">
-                <h1 class="hero-title">Midtown dining</h1>
-                <p class="hero-subtitle">Midtown dining, where quality meets ambiance for a culinary journey like no other</p>
+                <h1 class="hero-title">Dining & Bar</h1>
+                <p class="hero-subtitle">Midtown dining, where quality meets ambiance for a culinary & bar journey like no other</p>
+            </div>
+        </div>
+    </div>
+    <!--pre section -->
+    <div class="panel" data-color="white">
+        <img src="./images/logo.png" class="pre-header-img" style="width: 100px; margin-bottom: 40px;"/>
+        <h1 class="pre-header">Our dining offers more than just a place to ingest; it provides an opportunity for you to discover a wide range of flavors</h1>
+        <p class="pre-header " style="font-size: 16px;">Come and savor the delectable dishes crafted by our chef using fresh, seasonal ingredients sourced from local producers, growers, and breeders</p>
+    </div>
+    <!--dining section -->
+    <div class="panel" data-color="cream">
+        <div class="frame">
+            <div class="frame1">
+                <div class="frame2">I</div>
+            </div>
+            <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="row">
+                <div class="col-lg-8">
+                    <img src="./images/dining3.jpg" class="dining-img"/>
+                </div>
+                <div class="col-lg-4">
+                    <div>
+                        <video autoplay muted loop class="dining-video">
+                            <source src="./images/dining-video.mp4" type="video/mp4">
+                        </video>
+                        <div>
+                            <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>
+                </div>
             </div>
         </div>
     </div>
diff --git a/hotel_booking/services.php b/hotel_booking/services.php
index f705321..1265a17 100644
--- a/hotel_booking/services.php
+++ b/hotel_booking/services.php
@@ -417,7 +417,7 @@
     <div class="panel" data-color="cream" style="margin-top: 100px;">
         <div class="service-frame" style="margin-top: 100px;">
             <div class="service-frame1">
-                <div class="service-frame2">III</div>
+                <div class="service-frame2">II</div>
             </div>
             <p class="service-title">Massage</p>
         </div>
@@ -459,7 +459,7 @@
     <div class="panel" data-color="pink" style="margin-top: 100px;">
         <div class="service-frame" style="margin-top: 100px;">
             <div class="service-frame1">
-                <div class="service-frame2">II</div>
+                <div class="service-frame2">III</div>
             </div>
             <p class="service-title">Sauna</p>
         </div>