diff --git a/about.html b/about.html
new file mode 100644
index 0000000..ce33012
--- /dev/null
+++ b/about.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About Us - CabRental</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
+    />
+    <style>
+      body {
+        font-family: "Poppins", sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: #f9f9f9;
+        color: #333;
+        line-height: 1.6;
+      }
+
+      .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #fff;
+        padding: 20px;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+
+      .navbar .logo {
+        font-size: 1.8em;
+        font-weight: bold;
+        color: #000000;
+      }
+
+      .navbar ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .navbar ul li {
+        margin: 0 15px;
+      }
+
+      .navbar ul li a {
+        color: #fff;
+        background-color: #b5b1a8;
+        text-decoration: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        transition: background-color 0.3s, transform 0.3s;
+      }
+
+      .navbar ul li a:hover {
+        background-color: #444444;
+        transform: scale(1.1);
+      }
+
+      .hero {
+        height: 60vh;
+        background: url("https://imgs.search.brave.com/-7bIPp-CEYjwrZR7VQetEh1seZnEwsW4eGvZMhzZtj4/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by9j/bG9zZS11cC1tZXRh/bGxpYy1jYXJfMjMt/MjE1MTExMzIwNi5q/cGc_c2l6ZT02MjYm/ZXh0PWpwZw")
+          no-repeat center center/cover;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        text-align: center;
+        position: relative;
+        box-shadow: inset 0 0 10px #000;
+      }
+
+      .hero::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .hero h1 {
+        font-size: 4em;
+        margin: 0;
+        position: relative;
+        z-index: 1;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 40px 20px;
+      }
+
+      h2 {
+        color: #333;
+        margin-bottom: 20px;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      }
+
+      p {
+        color: #555;
+        margin-bottom: 20px;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+      }
+
+      .values-principles ul li {
+        background: linear-gradient(145deg, #b8e7af, hsl(129, 28%, 73%));
+        margin: 10px 0;
+        padding: 15px 20px;
+        border-radius: 5px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
+          inset 0 1px 3px rgba(255, 255, 255, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
+
+      ul li:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2),
+          inset 0 1px 3px rgba(255, 255, 255, 0.3);
+      }
+
+      .section-img {
+        margin: 40px 0;
+        text-align: center;
+      }
+
+      .section-img img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 10px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
+
+      .section-img img:hover {
+        transform: scale(1.05);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+      }
+
+      .highlight {
+        color: #d32f2f;
+        font-weight: bold;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Navbar -->
+    <nav class="navbar">
+      <div class="logo">CabRental</div>
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="#company-overview">Company Overview</a></li>
+        <li><a href="#mission-vision">Mission & Vision</a></li>
+        <li><a href="#values-principles">Values & Principles</a></li>
+      </ul>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+      <h1>About Us</h1>
+    </section>
+
+    <div class="container">
+      <!-- Company Overview -->
+      <section id="company-overview" class="company-overview">
+        <h2>Company Overview</h2>
+        <div class="section-img">
+          <img
+            src="https://imgs.search.brave.com/cxDCWs1zA6VHwGveT0ZH011wctKwB8Cea4MgWnqGOIo/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cHJlbWl1bS1waG90/by9mZXJyYXJpLWNh/ci1iYWNrZ3JvdW5k/XzY2MzEwMi0zMDIu/anBnP3NpemU9NjI2/JmV4dD1qcGc"
+            alt="Company Overview Image"
+          />
+        </div>
+        <p>
+          Founded in 2024, <span class="highlight">Premium Cab Rentals</span> is
+          dedicated to providing top-notch cab rental services with a focus on
+          reliability, comfort, and customer satisfaction.
+        </p>
+        <p>
+          Our mission is to make transportation easy and accessible for
+          everyone, offering a range of services tailored to meet diverse needs.
+        </p>
+      </section>
+
+      <!-- Mission and Vision -->
+      <section id="mission-vision" class="mission-vision">
+        <h2>Mission and Vision</h2>
+        <div class="section-img">
+          <img
+            src="https://imgs.search.brave.com/2CAFCbM6U5I6Q03dK-bC8qqqyb_mjrDxo4YGu4-zCnk/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMuZnJlZWltYWdl/cy5jb20vaW1hZ2Vz/L2xhcmdlLXByZXZp/ZXdzLzMxOC9pbi10/aGUtY2FyLTEtMTQ5/NTA3MC5qcGc_Zm10"
+            alt="Mission and Vision Image"
+          />
+        </div>
+        <p>
+          <strong>Mission:</strong> To provide reliable and affordable cab
+          rental services while ensuring exceptional customer experience.
+        </p>
+        <p>
+          <strong>Vision:</strong> To be the leading cab rental company known
+          for innovation, sustainability, and outstanding service.
+        </p>
+      </section>
+
+      <!-- Values and Principles -->
+      <section id="values-principles" class="values-principles">
+        <h2>Values and Principles</h2>
+        <ul>
+          <li>
+            <strong>Customer First:</strong> We prioritize our customers' needs
+            and strive to exceed their expectations.
+          </li>
+          <li>
+            <strong>Integrity:</strong> We operate with honesty and transparency
+            in all our dealings.
+          </li>
+          <li>
+            <strong>Safety:</strong> We ensure the highest safety standards for
+            our customers and drivers.
+          </li>
+          <li>
+            <strong>Innovation:</strong> We continuously seek innovative
+            solutions to enhance our services.
+          </li>
+          <li>
+            <strong>Sustainability:</strong> We are committed to sustainable
+            practices and reducing our environmental impact.
+          </li>
+        </ul>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/img/Animated Explainer Video for Cab Services - Vfx Pro - Vfx Pro (1080p, h264, youtube).mp4 b/img/Animated Explainer Video for Cab Services - Vfx Pro - Vfx Pro (1080p, h264, youtube).mp4
deleted file mode 100644
index 5fb7750..0000000
Binary files a/img/Animated Explainer Video for Cab Services - Vfx Pro - Vfx Pro (1080p, h264, youtube).mp4 and /dev/null differ
diff --git a/index.html b/index.html
index 17bfeb3..c15cd8f 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
             <li><a href="index.html">Home</a></li>
             <li><a href="ride.html">Ride</a></li>
             <li><a href="serv.html">Services</a></li>
-            <li><a href="#about">About</a></li>
+            <li><a href="about.html">About</a></li>
             <li><a href="review.html">Reviews</a></li>
             <li><a href="contactus.html">Contact</a></li>
         </ul>
@@ -69,32 +69,6 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
             </form>
         </div> -->
 
-        <!-- about section starts -->
-
-        <section class="about" id="about">
-
-            <div class="row">
-    
-                <div class="video-container">
-                    <video src="img/Animated Explainer Video for Cab Services - Vfx Pro - Vfx Pro (1080p, h264, youtube).mp4" loop autoplay muted></video>
-                </div>
-    
-                <div class="content">
-                    <h3>Company Overview</h3>
-                    <p>Founded in 2024, <span class="highlight">Premium Cab Rentals</span> is
-                        dedicated to providing top-notch cab rental services with a focus on
-                        reliability, comfort, and customer satisfaction.</p>
-                    <p>Our mission is to make transportation easy and accessible for
-                    everyone, offering a range of services tailored to meet diverse needs.</p>
-                    <a href="#" class="btn">Learn more</a>
-                </div>
-    
-            </div>
-    
-        </section>
-    
-         <!-- about section ends -->
-
         <div class="booking-form">
             <div class="form-group">
                 <label for="fullName">Full Name</label>
diff --git a/style.css b/style.css
index 833e49c..3883b24 100644
--- a/style.css
+++ b/style.css
@@ -20,48 +20,6 @@
   --gradient: linear-gradient(#fe5b3d, #ffac38);
 }
 
-.about .row{
-  display: flex;
-  align-items: center;
-  gap: 8rem;
-  padding: 2rem 0;
-  padding-bottom: 3rem;
-}
-
-.about .row .video-container{
-  flex: 1 1 40rem;
-  position: relative;
-}
-
-.about .row .video-container video{
-  width: 100%;
-  border: 1.5rem solid #fff;
-  border-radius: 0.5rem;
-  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
-  height: auto;
-  object-fit: cover;
-}
-
-.about .row .content{
-  flex:1 1 40rem;
-}
-
-.about .row .content h3{
-  font-size: 3rem;
-  color: #333;
-}
-
-.about .row .content .text-wrapper {
-  display: flex; /* Use flexbox for text */
-  gap: 1rem; /* Space between paragraphs */
-}
-
-.about .row .content .text-wrapper p {
-  font-size: 1.5rem; /* Adjust paragraph size as needed */
-  color: #999;
-  line-height: 1.5;
-}
-
 /*Custom Scroll Bar */
 html::-webkit-scrollbar {
   width: 0.5rem;
