diff --git a/Pages/About-Us/assets/3d.png b/Pages/About-Us/assets/3d.png
new file mode 100644
index 000000000..d3594fd9e
Binary files /dev/null and b/Pages/About-Us/assets/3d.png differ
diff --git a/Pages/About-Us/assets/3dhover.png b/Pages/About-Us/assets/3dhover.png
new file mode 100644
index 000000000..bb3c0c9a4
Binary files /dev/null and b/Pages/About-Us/assets/3dhover.png differ
diff --git a/Pages/About-Us/assets/doubt.png b/Pages/About-Us/assets/doubt.png
new file mode 100644
index 000000000..d7c5ccdb3
Binary files /dev/null and b/Pages/About-Us/assets/doubt.png differ
diff --git a/Pages/About-Us/assets/doubthover.png b/Pages/About-Us/assets/doubthover.png
new file mode 100644
index 000000000..4c610505e
Binary files /dev/null and b/Pages/About-Us/assets/doubthover.png differ
diff --git a/Pages/About-Us/assets/quiz.png b/Pages/About-Us/assets/quiz.png
new file mode 100644
index 000000000..1a63f2436
Binary files /dev/null and b/Pages/About-Us/assets/quiz.png differ
diff --git a/Pages/About-Us/assets/quizhover.png b/Pages/About-Us/assets/quizhover.png
new file mode 100644
index 000000000..d308d88c4
Binary files /dev/null and b/Pages/About-Us/assets/quizhover.png differ
diff --git a/Pages/About-Us/assets/video.png b/Pages/About-Us/assets/video.png
new file mode 100644
index 000000000..75ed6341f
Binary files /dev/null and b/Pages/About-Us/assets/video.png differ
diff --git a/Pages/About-Us/assets/videohover.png b/Pages/About-Us/assets/videohover.png
new file mode 100644
index 000000000..f9d00a5fc
Binary files /dev/null and b/Pages/About-Us/assets/videohover.png differ
diff --git a/Pages/About-Us/index.html b/Pages/About-Us/index.html
index d61cdcfe1..fe3bd4363 100644
--- a/Pages/About-Us/index.html
+++ b/Pages/About-Us/index.html
@@ -103,34 +103,80 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
   </header>
 
   <!-- About Us -->
-  <div class="container1">
-  <div class="w-[80vw] text-center mx-auto my-0 info-text">
-    <p class=" wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para1">
-      Welcome to Virtuo Learn, a leading online education platform that offers a range of cutting-edge tools and
-      resources designed to enhance the learning experience of students of all ages and backgrounds.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para2">
-      At Virtuo Learn, we believe that every student deserves access to quality education that is personalized, fun,
-      interactive, and easy. That's why we have developed a comprehensive range of features that are tailored to the
-      unique needs and learning styles of each student.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para3">
-      Our platform offers a vast library of video lectures, interactive simulations, 3D visualizations, and quizzes that
-      provide instant feedback to help students track their progress and identify their areas of strengths and
-      weaknesses. Our doubt engine is designed to resolve any doubts that students may have, providing a seamless
-      learning experience.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para4">
-      We are passionate about technology and its ability to empower students to achieve their full potential. Our team
-      of experienced educators and technologists work tirelessly to develop innovative tools and resources that enable
-      students to learn and grow at their own pace.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para5">
-      Thank you for choosing Virtuo Learn as your partner in learning. We look forward to helping you achieve your goals
-      and unlock your full potential.</p>
-    </p>
-  </div>
+  <div id="about-us">
+    <div class="about-us-block">
+        <div class="about-us-community">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="community-img" src="./assets/video.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">Extensive Video Library</div>
+            </div>
+            <p class="about-us-blk-para">Virtuo Learn offers a vast library of video lectures covering a wide range of subjects. These high-quality videos are designed to cater to different learning styles, providing clear and engaging explanations to help students understand complex topics at their own pace.</p>
+        </div>
+        <div class="about-us-product">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="product-img" src="./assets/3d.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">3D Visualisations</div>
+            </div>
+            <p class="about-us-blk-para">The platform features interactive simulations and 3D visualizations that make learning more immersive and fun. These tools help students grasp difficult concepts by visualizing them in a dynamic and interactive environment, enhancing their overall learning experience.</p>
+        </div>
+    </div>
+    <div class="about-us-block">
+        <div class="about-us-location">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="location-img" src="./assets/quiz.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">Personalized Quizzes</div>
+            </div>
+            <p class="about-us-blk-para">Virtuo Learn provides personalized quizzes that offer instant feedback. This feature allows students to track their progress, identify their strengths and weaknesses, and receive immediate guidance on areas that need improvement, ensuring a more tailored and effective learning process.</p>
+        </div>
+        <div class="about-us-event">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="event-img" src="./assets/doubt.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">Doubt Resolution</div>
+            </div>
+            <p class="about-us-blk-para">The platform includes a sophisticated doubt engine designed to resolve students' queries efficiently. This tool ensures that learners can quickly get answers to their questions, maintaining a seamless learning experience without prolonged interruptions.</p>
+        </div>
+    </div>
 </div>
+
+<script>
+  document.querySelectorAll('.about-us-community').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/videohover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/video.png';
+});
+});
+
+document.querySelectorAll('.about-us-event').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/doubthover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/doubt.png';
+});
+});
+
+document.querySelectorAll('.about-us-product').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/3dhover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/3d.png';
+});
+});
+
+document.querySelectorAll('.about-us-location').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/quizhover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/quiz.png';
+});
+});
+</script>
+
+<!-- About U section ends -->
   <!-- footer -->
   <!-- <a class="no-underline inline-block" href="#" class="company-logo">
         <img src="./assets/asset 41.png" alt="company logo">
diff --git a/Pages/About-Us/style.css b/Pages/About-Us/style.css
index 81246ff87..59871689f 100644
--- a/Pages/About-Us/style.css
+++ b/Pages/About-Us/style.css
@@ -110,4 +110,126 @@ nav {
     nav a {
       font-weight: normal;
       font-size: .90em;
-    }
\ No newline at end of file
+    }
+
+
+/* About Us CSS */
+
+.about-us {
+  display: block;
+  margin: auto;
+  width: 52.5rem;
+  height: 100%;
+  background-color: white;
+}
+
+.about-us-heading {
+  text-align: center;
+  margin-bottom: 5rem;
+  margin-top: 5rem;
+}
+
+.about-us-block {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.about-us-community, .about-us-product, .about-us-event, .about-us-location {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 35%;
+  height: 16rem;
+  border: 1px solid rgba(206, 212, 218, 1);
+  border-radius: 8px;
+  margin-bottom: 21px;
+}
+
+.about-us-community {
+  border: 2px solid #183b56;
+}
+
+.about-us-community:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-location {
+  border: 2px solid #183b56;
+}
+
+.about-us-location:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-product {
+  border: 2px solid #183b56;
+}
+
+.about-us-product:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-event {
+  border: 2px solid #183b56;
+}
+
+.about-us-event:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-blk-text {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 30px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin-top: 1rem;
+}
+
+.about-us-blk-para {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+@media only screen and (max-width: 768px) {
+  .about-us-block {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+      width: 90%;
+      height: 100%;
+      padding: 0.5rem;
+  }
+}
+
+@media only screen and (max-width: 1020px) {
+  .about-us-block {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+      width: 90% !important;
+      height: 100%;
+      padding: 0.5rem;
+  }
+}
+
+@media only screen and (max-width: 1250px) {
+  .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+      width: 45%;
+  }
+}
\ No newline at end of file