diff --git a/hotel_booking/about.php b/hotel_booking/about.php
index 5d791d6..d438059 100644
--- a/hotel_booking/about.php
+++ b/hotel_booking/about.php
@@ -19,6 +19,7 @@
         .about-container{
             width: 90%;
             height: 95vh;
+            margin: auto;
         }
         .about-title{
             font-size: 16px;
@@ -75,38 +76,113 @@
             text-align: center; 
             margin: auto;
             font-size: 16px;
+            padding: 0px 10px 0px 10px;
         }
-        .about-subcontainer{
-            display: flex;
-            justify-content: space-between;
-            margin-top: 50px;
-            width: 100%;
-            text-align: center;
-            gap: 30px;
+        .timeline{
+            position:relative;
+            margin:50px auto;
+            padding:40px 0;
+            width:1000px;
+            box-sizing:border-box;
         }
-        .about-subwrapper{
-            width: 100%;
-            justify-content: center;
-            align-items: center;
+        .timeline:before{
+            content:'';
+            position:absolute;
+            left:50%;
+            width:2px;
+            height:100%;
+            background:#c5c5c5;
         }
-        .about-subwrapper-img{
-            width: 90%;
+        .timeline ul{
+            padding:0;
+            margin:0;
         }
-        .about-subwrapper-text{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 100%;
+        .timeline ul li{
+            list-style:none;
+            position:relative;
+            width:50%;
+            padding:20px 40px;
+            box-sizing:border-box;
         }
-        .about-subwrapper-title{
-            font-size: 16px;
-            text-transform: uppercase;
+        .timeline ul li:nth-child(odd){
+            float:left;
+            text-align:left;
+            clear:both;
+        }
+        .timeline ul li:nth-child(even){
+            float:right;
+            text-align:left;
+            clear:both;
+        }
+        .content{
+            padding-bottom:20px;
+        }
+        .timeline ul li:nth-child(odd):before{
+            content:'';
+            position:absolute;
+            width:10px;
+            height:10px;
+            top:24px;
+            right:-6px;
+            background:rgba(140,120,85,1);
+            border-radius:50%;
+            box-shadow:0 0 0 3px rgba(195,175,145,1);
+        }
+        .timeline ul li:nth-child(even):before{
+            content:'';
+            position:absolute;
+            width:10px;
+            height:10px;
+            top:24px;
+            left:-4px;
+            background:rgba(140,120,85,1);
+            border-radius:50%;
+            box-shadow:0 0 0 3px rgba(195,175,145,1);
+        }
+        .timeline ul li h3{
+            padding:0;
+            margin:0;
+            color:rgba(233,33,99,1);
+            font-weight:600;
+        }
+        .timeline ul li p{
+            margin:10px 0 0;
+            padding:0;
+        }
+        .timeline ul li .time h4{
+            margin:0;
+            padding:0;
+            font-size:14px;
+        }
+        .timeline ul li:nth-child(odd) .time{
+            position:absolute;
+            top:12px;
+            right:-250px;
+            margin:0;
+            padding:8px 16px;
+            background:rgba(140,120,85,1);
+            color:#fff;
+            border-radius:18px;
+            box-shadow:0 0 0 3px rgba(195,175,145,1);
+        }
+        .timeline ul li:nth-child(even) .time{
+            position:absolute;
+            top:12px;
+            left:-250px;
+            margin:0;
+            padding:8px 16px;
+            background:rgba(140,120,85,1);
+            color:#fff;
+            border-radius:18px;
+            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){
             .about-pre-title{
@@ -129,11 +205,6 @@
                 flex-direction: column;
                 gap: 20px;
             }
-            .about-subtitle{
-                font-size: 18px;
-                width: 100%;
-                padding: 0px 20px 0px 20px;
-            }
             .about-wrapper-img{ 
                 height: 60%; 
             }
@@ -141,23 +212,53 @@
                 width: 100%; 
                 height: 50%;
             }
-            .about-subcontainer{
-                flex-direction: column;
-                width: 100%;
-                gap: 20px;
-            }
             .about-container-title{; 
-                margin-top: -50px;"
+                margin-top: -80px;"
             }
         }
-        @media (max-width:550px) {
+        @media (max-width:760px) {
             .about-subtitle{
                 font-size: 12px;
                 width: 100%;
                 padding: 0px 10px 0px 10px;
             }
             .about-img{
-                width: 230px;
+                width: 350px;
+            }
+            .timeline{
+                width:100%;
+                padding-bottom:0;
+            }
+            h1{
+                font-size:40px;
+                text-align:center;
+            }
+            .timeline:before{
+                left:20px;
+                height:100%;
+            }
+            .timeline ul li:nth-child(odd), .timeline ul li:nth-child(even)
+            {
+                width:100%;
+                text-align:left;
+                padding-left:50px;
+                padding-bottom:50px;
+            }
+            .timeline ul li:nth-child(odd):before, .timeline ul li:nth-child(even):before
+            {
+                top:-18px;
+                left:16px;
+            }
+            .timeline ul li:nth-child(odd) .time, .timeline ul li:nth-child(even) .time
+            {
+                top:-30px;
+                left:50px;
+                right:inherit;
+            }
+        }
+        @media (max-width:580px) {
+            .about-img{
+                width: 250px;
             }
         }
         @media (max-width:450px) {
@@ -207,27 +308,50 @@
             </div>
         </div>
     </div>
+    <!--pre section2-->
     <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>
+        <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="timeline">
+            <ul>
+                <li>
+                    <div class="content">
+                        <img src="./images/about.jpg" style="width: 100%; height: 100%;"/>
+                        <p>Midtown hotel is a beloved destination for travelers worldwide. With a commitment to excellence and personalized experiences, we've built a reputation that stands the test of time. 
+                            <br/></br/> We continue to elevate the guest experience and shape the future of travel. Welcome to the next generation of hospitality at our hotel</p>
                     </div>
-                </div>
-            </div>
+                    <div class="time">
+                        <h4>Background and future vision</h4>
+                    </div>
+                </li>
+                <li>
+                    <div class="content">
+                        <img src="./images/home2.jpg" style="width: 100%; height: 100%;"/>
+                        <p>Every room is meticulously crafted, boasting ceilings towering at 4½ meters, creating an atmosphere of vastness and magnificence. 
+                            Savor artisanal cocktails expertly crafted by our master mixologists while basking in the ambiance of refined charm and unparalleled comfort</p>
+                    </div>
+                    <div class="time">
+                        <h4>Ultimate luxury and elegance</h4>
+                    </div>
+                </li>
+                <li>
+                    <div class="content">
+                        <img src="./images/home1.jpg" style="width: 100%; height: 100%;"/>
+                        <p>We strive to anticipate and exceed your every need, ensuring your experience with us is nothing short of extraordinary. 
+                            From personalized attention to seamless assistance, our dedicated team is here to elevate your stay and leave a lasting impression of unparalleled hospitality.</p>
+                    </div>
+                    <div class="time">
+                        <h4>Exceptional customer service</h4>
+                    </div>
+                </li>
+                <div style="clear: both;"></div>
+            </ul>
         </div>
     </div>
 
 
-
     <!--footer-->
     <?php require('./components/footer.php'); ?>