diff --git a/hotel_booking/about.php b/hotel_booking/about.php
index b6d7e77..5d791d6 100644
--- a/hotel_booking/about.php
+++ b/hotel_booking/about.php
@@ -20,11 +20,8 @@
             width: 90%;
             height: 95vh;
         }
-        .about-pre-title{
-            display: none;
-        }
         .about-title{
-            font-size: 24px;
+            font-size: 16px;
             text-transform: uppercase;
             font-weight: 500;
             letter-spacing: 3px;
@@ -33,6 +30,8 @@
         }
         .about-subtitle{
             font-size: 26px;
+            text-transform: uppercase;
+            width: 500px;
         }
         .about-wrapper{
             width: 100%;
@@ -50,16 +49,66 @@
             justify-content: center; 
             align-items: center;
         }
+        .about-container-title{
+            font-size: 16px; 
+            text-transform: uppercase; 
+            font-weight: 500; 
+            letter-spacing: 3px; 
+            color: #776B5D; 
+            text-shadow: 2px 2px 1px #B0A695; 
+            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;
         }
-        @media (max-width:980px){
-            .about-container{
-                width: 90%;
-                height: 100vh;
+        .about-text{
+            max-width: 650px; 
+            text-align: center; 
+            margin: auto;
+            font-size: 16px;
+        }
+        .about-subcontainer{
+            display: flex;
+            justify-content: space-between;
+            margin-top: 50px;
+            width: 100%;
+            text-align: center;
+            gap: 30px;
+        }
+        .about-subwrapper{
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+        }
+        .about-subwrapper-img{
+            width: 90%;
+        }
+        .about-subwrapper-text{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+        }
+        .about-subwrapper-title{
+            font-size: 16px;
+            text-transform: uppercase;
+        }
+        @media (max-width:1200px){
+            .about-wrapper-img{
+                height: 80%;
             }
+        }
+        @media (max-width:980px){
             .about-pre-title{
                 display: flex;
                 justify-content: center;
@@ -71,20 +120,45 @@
                 text-shadow: 2px 2px 1px #EAD8C0;
                 margin-top: 50px;
             }
-            .about-title{
-                display: none;
+            .about-wrap{ 
+                justify-content: center; 
+                align-items: start;
+                flex-direction: row;
             }
             .about-wrapper{
                 flex-direction: column;
                 gap: 20px;
             }
-            .about-wrap{ 
-                justify-content: start; 
+            .about-subtitle{
+                font-size: 18px;
+                width: 100%;
+                padding: 0px 20px 0px 20px;
+            }
+            .about-wrapper-img{ 
+                height: 60%; 
             }
             .about-img{
                 width: 100%; 
                 height: 50%;
             }
+            .about-subcontainer{
+                flex-direction: column;
+                width: 100%;
+                gap: 20px;
+            }
+            .about-container-title{; 
+                margin-top: -50px;"
+            }
+        }
+        @media (max-width:550px) {
+            .about-subtitle{
+                font-size: 12px;
+                width: 100%;
+                padding: 0px 10px 0px 10px;
+            }
+            .about-img{
+                width: 230px;
+            }
         }
         @media (max-width:450px) {
             .about-pre-title{
@@ -93,8 +167,14 @@
             .about-hero{
                 height: 80vh;
             }
-            .about-subtitle{
-                font-size: 20px;
+            .about-wrapper-img{ 
+                height: 100%; 
+            }
+            .about-text{
+                font-size: 12px;
+            }
+            .about-img{
+                width: 200px;
             }
         }
     </style>
@@ -113,14 +193,13 @@
     <!--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;">
+                <div class="about-wrapper-img">
                     <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;">
+                    <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>
@@ -130,7 +209,20 @@
     </div>
     <div class="panel" data-color="cream">
         <div class="about-container">
-            
+            <p class="about-container-title" >History</p>
+            <p style="width: 100%; font-size: 24px; text-transform: uppercase; text-align: center; font-weight: 500;">From the <span style="color: #776B5D;">beginning</span></p>
+            <p class="about-text">We ensure that each guest receives individualized care and attention.
+                 Your visit will be enriched with distinctive and tailored experiences</p>
+            <div class="about-subcontainer">
+                <div class="about-subwrapper">
+                    <img src="./images/about.jpg" class="about-subwrapper-img"/>
+                </div>
+                <div class="about-subwrapper" style="background-color: pink;">
+                    <div class="about-subwrapper-text">
+                        <p class="about-subwrapper-title">Background and future vision</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>