diff --git a/hotel_booking/images/logo-white.png b/hotel_booking/images/logo-white.png
new file mode 100644
index 0000000..3cfda89
Binary files /dev/null and b/hotel_booking/images/logo-white.png differ
diff --git a/hotel_booking/images/service1.jpg b/hotel_booking/images/service1.jpg
new file mode 100644
index 0000000..f4213d1
Binary files /dev/null and b/hotel_booking/images/service1.jpg differ
diff --git a/hotel_booking/images/service2.jpg b/hotel_booking/images/service2.jpg
new file mode 100644
index 0000000..ae8a640
Binary files /dev/null and b/hotel_booking/images/service2.jpg differ
diff --git a/hotel_booking/images/service3.jpg b/hotel_booking/images/service3.jpg
new file mode 100644
index 0000000..6e2b710
Binary files /dev/null and b/hotel_booking/images/service3.jpg differ
diff --git a/hotel_booking/index.php b/hotel_booking/index.php
index cb39144..9696c84 100644
--- a/hotel_booking/index.php
+++ b/hotel_booking/index.php
@@ -18,7 +18,7 @@
         <div class="load"></div>
         <!--Navbar section (bootstrap)-->
         <div class="wrap w-100">
-            <div class="row align-items-center m-0 d-none d-md-flex sticky-top" style="padding-top: 50px;">
+            <div class="row align-items-center m-0 d-none d-md-flex sticky-top">
                 <div class="col-5 text-center rounded-pill" >
                     <ul class="d-flex list-unstyled justify-content-center m-0">
                         <li class="nav-item">
@@ -37,7 +37,7 @@
                 </div>
                 <div class="col-2 bg-transparent px-3">
                     <a href="index.php" style="text-decoration: none;">
-                        <h1 class="text-center fw-bold figure-img logo-font" style="color: white;">Midtown Hotel</h1>
+                        <img src="./images/logo-white.png" class="logo-img"/>
                     </a>
                 </div>
                 <div class="col-5 text-center rounded-pill">
@@ -62,7 +62,7 @@
                 <div class="nav-parent sticky-top">
                     <div class="nav-wrapper">
                         <div class="branding">
-                            <a href="#" class="logo-font" style="color: white;" >Midtown Hotel</a>
+                            <img src="./images/logo-white.png" style="width: 150px; margin-left: -40px;"/>
                         </div>
                         <a class="burger" onclick="burgerButton()">
                             <div class="bar"></div>
@@ -274,12 +274,12 @@
     </div>
     <!--Rooms-->
     <div class="panel" data-color="white">
-        <h3 class="pt-4 text-center fw-bold logo-font" style="color: #776B5D; font-size: 56px;  text-shadow: 2px 2px #EBE3D5;">Rooms</h3>
-        <p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
+        <h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Our Rooms</h3>
+        <p class="mb-4 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
         <div class="container">
             <div class="row">
                 <div class="col-lg-4 col-md-6 my-3">
-                    <div class="card shadow" style="max-width: 300px; margin: auto;">
+                    <div class="card shadow" style="max-width: 350px; margin: auto;">
                         <img src="./images/single_room.jpg" class="card-img-top">
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Single room</h5>
@@ -308,7 +308,7 @@
                 </div>
 
                 <div class="col-lg-4 col-md-6 my-3">
-                    <div class="card shadow" style="max-width: 300px; margin: auto;">
+                    <div class="card shadow" style="max-width: 350px; margin: auto;">
                         <img src="./images/single_room.jpg" class="card-img-top">
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Single room</h5>
@@ -337,7 +337,7 @@
                 </div>
 
                 <div class="col-lg-4 col-md-6 my-3">
-                    <div class="card shadow" style="max-width: 300px; margin: auto;">
+                    <div class="card shadow" style="max-width: 350px; margin: auto;">
                         <img src="./images/single_room.jpg" class="card-img-top">
                         <div class="card-body">
                             <h5 class="card-title" style="color: #222831;">Single room</h5>
@@ -364,12 +364,30 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-12 text-center mt-5 mb-5">
+                <div class="col-lg-12 text-center mt-5 mb-2">
                     <a href="" class="btn-th">More</a>
                 </div>
             </div>
         </div>
     </div>
+    <!--services-->
+    <div class="panel" data-color="cream">
+        <h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Accommodation</h3>
+        <p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #A4907C;">Exceptional service - endless possibilities</p>
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4">
+                    <img src="./images/service1.jpg" style="width: 100%;"/>
+                </div>
+                <div class="col-lg-4">
+                    <img src="./images/service2.jpg" style="width: 100%"/>
+                </div>
+                <div class="col-lg-4">
+                    <img src="./images/service3.jpg" style="width: 100%"/>
+                </div>
+            </div>
+        </div>
+    </div>
         
 
 
diff --git a/hotel_booking/style.css b/hotel_booking/style.css
index 336f2a3..4c64599 100644
--- a/hotel_booking/style.css
+++ b/hotel_booking/style.css
@@ -15,6 +15,23 @@ ul{
 .logo-font{
     font-family: "Tangerine";
 }
+.font-title{
+    font-size: 56px;
+}
+/*---Background color---*/
+.panel{
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.color-khaki{
+    background-color: #CBC0AF;
+}
+.color-cream{
+    background-color: #DDD8D0;
+}
 /*---Btn---*/
 .btn-main{
     background-color: #3C3633;
@@ -46,6 +63,9 @@ ul{
     color: black;
 }
 /*-Hero-*/
+.logo-img{
+    width: 13vw;
+}
 .hero {
     position: relative;
     /*background: url('./images/home1.jpg') center/cover no-repeat;*/
@@ -218,16 +238,6 @@ ul{
     top: 0%;
 }
 /*-- pre section --*/
-.panel {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.color-khaki {
-    background-color: #CBC0AF;
-}
 .pre-header{
     opacity: 0;
     transform: translateY(50px);
@@ -265,7 +275,7 @@ ul{
     align-items: center;
     text-align: center;
 }
-/*--Swiper--*/
+/*-Swiper-*/
 .swiper{
     width: 80%;
     height: 800px;
@@ -284,13 +294,22 @@ ul{
     height: 100%;
     object-fit: cover;
 }
-
+/*-- services --*/
 
 /*---------- Responsive ----------*/
 @media (max-width:980px) {
+    .logo-img{
+        width: 15vw;
+    }
     .pre-header{
         width: 80%;
     }
+    .swiper{
+        width: 95%;
+    }
+    .font-title{
+        font-size: 50px;
+    }
 }
 @media (max-width:768px) {
     .nav-wrapper {
@@ -315,6 +334,9 @@ ul{
     .pre-header{
         font-size: 40px;
     }
+    .font-title{
+        font-size: 40px;
+    }
 }
 @media (max-width: 450px){
     .hero-head{