diff --git a/hotel_booking/about.php b/hotel_booking/about.php
new file mode 100644
index 0000000..b6d7e77
--- /dev/null
+++ b/hotel_booking/about.php
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Midtown Hotel | About the hotel</title>
+    <?php require('./components/link.php') ?>
+    <style>
+        .about-hero{
+            position: relative;
+            height: 100vh;
+            background-size: cover;
+            background-position: center;
+            background-image: url(images/about.jpg);
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        .about-container{
+            width: 90%;
+            height: 95vh;
+        }
+        .about-pre-title{
+            display: none;
+        }
+        .about-title{
+            font-size: 24px;
+            text-transform: uppercase;
+            font-weight: 500;
+            letter-spacing: 3px;
+            color: #B0A695;
+            text-shadow: 2px 2px 1px #EAD8C0;
+        }
+        .about-subtitle{
+            font-size: 26px;
+        }
+        .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-img{
+            width: 60%; 
+            height: 40%; 
+            object-fit: cover;
+        }
+        @media (max-width:980px){
+            .about-container{
+                width: 90%;
+                height: 100vh;
+            }
+            .about-pre-title{
+                display: flex;
+                justify-content: center;
+                font-size: 24px;
+                text-transform: uppercase;
+                font-weight: 500;
+                letter-spacing: 3px;
+                color: #B0A695;
+                text-shadow: 2px 2px 1px #EAD8C0;
+                margin-top: 50px;
+            }
+            .about-title{
+                display: none;
+            }
+            .about-wrapper{
+                flex-direction: column;
+                gap: 20px;
+            }
+            .about-wrap{ 
+                justify-content: start; 
+            }
+            .about-img{
+                width: 100%; 
+                height: 50%;
+            }
+        }
+        @media (max-width:450px) {
+            .about-pre-title{
+                margin-top: 30px;
+            }
+            .about-hero{
+                height: 80vh;
+            }
+            .about-subtitle{
+                font-size: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!--Hero & Navbar section-->
+    <div class="about-hero">
+        <?php require('./components/header.php') ?>
+        <div class="hero-content">
+            <div class="hero-head">
+                <h1 class="hero-title">About the Hotel</h1>
+                <p class="hero-subtitle">Midtown Hotel, where quality and great atmosphere unite</p>
+            </div>
+        </div>
+    </div>
+    <!--pre section-->
+    <div class="panel" data-color="white">
+        <div class="about-container">
+            <p class="about-pre-title">Our vision</p>
+            <div class="about-wrapper">
+                <div style="width: 100%; height: 90%; border: 1px solid #B0A695; padding: 10px;">
+                    <img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/>
+                </div>
+                <div class="about-wrap">
+                    <img src="./images/home4.jpg" class="about-img"/>
+                    <div style="margin-top: 20px; width: 350px;">
+                        <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>
+    </div>
+    <div class="panel" data-color="cream">
+        <div class="about-container">
+            
+        </div>
+    </div>
+
+
+
+    <!--footer-->
+    <?php require('./components/footer.php'); ?>
+
+    <?php require('./components/script.php') ?>
+</body>
+</html>
\ No newline at end of file
diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php
index fdc5df6..fece2aa 100644
--- a/hotel_booking/components/header.php
+++ b/hotel_booking/components/header.php
@@ -25,7 +25,7 @@
         <div class="col-5 text-center rounded-pill">
             <ul class="d-flex list-unstyled justify-content-center m-0">
                 <li class="nav-item">
-                    <a class="nav-link" href="#">About</a>
+                    <a class="nav-link" href="../about.php">About</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#">Contact</a>
@@ -55,7 +55,7 @@
         <div class="burger-links">
             <ul>
                 <li class="nav-item">
-                    <a href="#" class="nav-link">Home</a>
+                    <a href="../index.php" class="nav-link">Home</a>
                 </li>
                 <li class="nav-item">
                     <a href="#" class="nav-link">Rooms</a>
@@ -67,7 +67,7 @@
                     <a href="#" class="nav-link">Gallery</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link">About</a>
+                    <a href="../about.php" class="nav-link">About</a>
                 </li>
                 <li class="nav-item">
                     <a href="#" class="nav-link">Contact</a>
diff --git a/hotel_booking/components/link.php b/hotel_booking/components/link.php
index 8d29287..fcc4f4e 100644
--- a/hotel_booking/components/link.php
+++ b/hotel_booking/components/link.php
@@ -3,4 +3,5 @@
 <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">
\ No newline at end of file
+<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/><link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">
\ No newline at end of file
diff --git a/hotel_booking/components/script.php b/hotel_booking/components/script.php
index c878960..51a41b5 100644
--- a/hotel_booking/components/script.php
+++ b/hotel_booking/components/script.php
@@ -1,2 +1,4 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>    
 <script src="./script.js"></script>
\ No newline at end of file
diff --git a/hotel_booking/images/about.jpg b/hotel_booking/images/about.jpg
new file mode 100644
index 0000000..18edcb7
Binary files /dev/null and b/hotel_booking/images/about.jpg differ
diff --git a/hotel_booking/index.php b/hotel_booking/index.php
index 6a63f19..9c1cc99 100644
--- a/hotel_booking/index.php
+++ b/hotel_booking/index.php
@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Midtown Hotel | The best hotels & accommodations</title>
-    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
     <?php require('./components/link.php'); ?>
 </head>
 <body>
@@ -290,8 +288,6 @@
     <?php require('./components/footer.php'); ?>
 
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <?php require('./components/script.php') ?>
 </body>
 </html>
\ No newline at end of file
diff --git a/hotel_booking/services.php b/hotel_booking/services.php
index e693a0b..ce13d14 100644
--- a/hotel_booking/services.php
+++ b/hotel_booking/services.php
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
     <title>Midtown Hotel | Services</title>
     <?php require('./components/link.php') ?>
     <style>
@@ -182,7 +181,7 @@
             .service-frame2{
                 width: 20px; 
                 height: 40px;
-                font-size: 24px;
+                font-size: 16px;
             }
             .service-subtilte{
                 width: 90%;
@@ -208,8 +207,8 @@
                 height: 450px;
             }
             .sauna-text{
-                padding-top: 20px;
-                padding-bottom: 20px;
+                padding-top: 5px;
+                padding-bottom: 5px;
                 font-size: 16px;
             }
         }
@@ -217,6 +216,12 @@
             .service-subtilte{
                 font-size: 30px;
             }
+            .sauna-container{
+                gap: 0px;
+            }
+            .service-hero{
+                height: 80vh;
+            }
         }
     </style>
 </head>
@@ -328,11 +333,45 @@
             </div>
         </div>
     </div>
-            
+    <!--massage section-->
+    <div class="panel" data-color="white">
+        <div class="service-frame" style="margin-top: 100px;">
+            <div class="service-frame1">
+                <div class="service-frame2">III</div>
+            </div>
+            <p class="service-title">Massage</p>
+        </div>
+        <p class="service-subtilte">Relax, Rejuvenate, and Unwind with Every Touch</p>
+        <p class="pre-header" style="font-size: 18px;">The challenges of everyday life can place a significant burden on your physical well-being. 
+        This is why it is crucial to prioritize self-care. Our massage sessions are dedicated to ensuring your body functions optimally,
+        enabling you to participate in activities such as completing a half marathon without any hindrances</p>
+    </div>
+    <div class="panel" data-color="white">
+        <div class="swiper mySwiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="./images/service3.jpg"/>
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/service_page3.jpg"/>
+                </div>
+            </div>
+        </div>
+        <div class="pre-section2-container">
+            <div class="pre-section2-wrapper">
+                <div class="pre-section2-text">
+                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Aromatherapy massages </p>
+                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Deep tissue massages </p>
+                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Hot stone massages</p>
+                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Thai massages</p>
+                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Swedish massage</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--footer-->
+    <?php require('./components/footer.php'); ?>
 
-
-
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <?php require('./components/script.php') ?>
 </body>
 </html>
\ No newline at end of file
diff --git a/hotel_booking/style.css b/hotel_booking/style.css
index ec919e6..1c18e1a 100644
--- a/hotel_booking/style.css
+++ b/hotel_booking/style.css
@@ -147,6 +147,7 @@ ul{
 }
 .hero-title{
     font-size: 56px;
+    text-transform: uppercase;
     margin-bottom: 10px;
     animation: fadeInUp 1s ease-in-out;
 }
@@ -330,7 +331,7 @@ ul{
 }
 .pre-header-testimonials{
     width: 100px; 
-    margin-bottom: -50px;
+    margin-bottom: 100px;
     margin-top: 100px;
 }
 /*--Footer--*/
@@ -493,7 +494,7 @@ ul{
         margin-bottom: 10px;
     }
     .hero-title{
-        font-size: 44px;
+        font-size: 40px;
     }
     .hero-subtitle{
         font-size: 14px;
@@ -527,7 +528,7 @@ ul{
         padding-right: 30px;
     }
     .pre-header-testimonials{
-        margin-bottom: -100px;
+        margin-bottom: 50px;
     }
     .footer-grid-1 a{
         color: #93B1A6;
