diff --git a/css/style.css b/css/style.css
index 94ebc8f..9182aee 100644
--- a/css/style.css
+++ b/css/style.css
@@ -171,29 +171,95 @@ header {
 
 /******************* ABOUT ***********************/
 
-.about {
-    padding: 150px 0px;
-}
-
-.about h1 {
-    font-size: 50px;
-    font-weight: bold;
-    backdrop-filter: blur(20px);
+.heading{
+    text-align: center;
+    margin:auto;
+    font-size: 35px;
+    padding: 20px 0;
+    color: #195751;
+    letter-spacing: 1.5px;
 }
 
-hr {
-    border: 1px solid #3caea3;
+hr{
+    border: 2px solid rgb(26, 26, 70);
     display: block;
-    width: 80px;
+    width: 90px;
     margin: auto;
 }
 
-.about p {
-    font-size: 23px;
+.about-content{
+    margin-top: 30px;
+    text-align: center;
+    color: #0e2431;
+    font-size: 20px;
+}
+.about-content b{
+    color: rgb(26, 26, 70);
+    font-weight: bolder;
+}
+.box-container{
+    display: grid;
+    grid-auto-rows: minmax(80px, auto);
+    grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); 
+    padding-left: 30px; 
+  margin-top: 10px; 
+  align-content: center;
+    
+}
+
+.box-container .box{
+padding: 10px;
+height: 350px;
+width: 90%;
+border-radius: 20px;
+background: aliceblue;
+border: 2px solid aliceblue; 
+box-shadow: 0 0 2px 2px rgb(187, 187, 187);
+text-align: center;
+transition: 0.5s;
+position: relative;
+}
+.box-container .box:hover{
+    transform: scale(1) ;
+    box-shadow: 0 0 2px 2px #195751;
+    background: rgb(252, 248, 248);
+    z-index: 2;
+}
+.box-container .box .icon{
+    margin-top: 10px;
+}
+.box-container .box .icon span{
+    margin-top: 10px 0;
+    font-size: 30px;
+    color:  rgb(26, 26, 70);
+}
+
+.box-container .box .title{
+    color: #2d837a;
+    font-size: 25px;
+    letter-spacing: 1.2px;
+}
+
+.box-container .box p{
+   font-size: 17px;
+   color: rgb(26, 26, 70);
+   padding: 10px;
+}
+
+.box-container .box a{
+   text-decoration: none;
+   color:rgb(26, 26, 70);
+   display: block;
+   padding: 10px 0;
+   font-size: 17px;
+   cursor: pointer;
+   font-weight: bold;
+   letter-spacing: 0.7px;
 }
 
-.about-content {
-    margin-top: 50px;
+.box-container .box a:hover{
+    color: #1c665f;
+    
 }
 
 
diff --git a/index.html b/index.html
index 3209ad7..d9d3006 100644
--- a/index.html
+++ b/index.html
@@ -74,22 +74,79 @@
     <!-- header ends -->
 
     <!-- about starts -->
-    <section id="about" class="about">
-        <div class="container">
-            <h1 class="text-center">About Us</h1>
-            <hr>
 
-            <p class="about-content">
-                “Algorithms are not arbiters of objective truth and fairness simply because they're math.” - <i><b>Zoe Quinn</b></i>
+    <h1 class="heading">About Us</h1>
+    <hr>
+
+    <p class="about-content">
+        "Algorithms are not arbiters of objective truth and fairness simply because they're math." - <i><b>Zoe Quinn</b></i>
+    </p>
+    
+    <div class="box-container">
+        <div class="box">
+            <div class="icon">
+                <span class="fas fa-code"></span>
+            </div>
+            <h3 class="title">DS & Algo</h3>
+            <p>Data Structures are the pillars of Computer Sciene. We are an organization of people who focus on Data Structure and Algorithms.</p>
+            <a href="#">Learn More<i class="fas fa-angle-double-right"></i></a> 
+        </div>
+
+     
+        <div class="box">
+            <div class="icon">
+                <span class="fab fa-readme"></span>
+            </div>
+            <h3 class="title">Code Explanations</h3>
+            <p>It is our goal to provide access to well-written, well-explained programs and knowledge that improve people's lives.</p>
+            <a href="#">Learn More<i class="fas fa-angle-double-right"></i></a> 
+        </div>
+
+
+        <div class="box">
+            <div class="icon">
+                <span class="fas fa-route"></span>
+            </div>
+            <h3 class="title">Pathways & Quizzes</h3>
+            <p>Give your DSA journey a proper guide using pathways. Take quizzes to improve fundamentals and get better at coding every time you use Algo Phantoms.</p>
+            <a href="#">Learn More<i class="fas fa-angle-double-right"></i></a> 
+        </div>  
+          
+        <div class="box">
+            <div class="icon">
+                <span class="fas fa-edit"></span>
+            </div>
+            <h3 class="title">Code-Execution Environment</h3>
+            <p>The best way to practice is to code out the solutions to algorithmic problems. Our customized Code-Editor lets you
+                type out your answers and edit them accordingly.</p>
+            <a href="#">Learn More<i class="fas fa-angle-double-right"></i></a> 
+        </div>
+
 
-                <br> <br>
-                <p class="text-justify">
-                    We are an organization of people who focuses on Data Structure and Algorithms. It is our goal to provide access to well written, well-explained programs and knowledge that improve people's lives. We want to enable people to adapt and change code according
-                    to their own ideas through an Open Access approach. We bring amazing people together to code algorithms and share our work for the benefit of all.
-                </p>
+        <div class="box">
+            <div class="icon">
+                <span class="fab fa-osi"></span>
+            </div>
+            <h3 class="title">Open Source</h3>
+            <p>We want to enable people to adapt and change code according to their own idea through an Open Access approach.
+                Come, Connect and Contribute.
+            </p>
+            <a href="#">Learn More<i class="fas fa-angle-double-right"></i></a> 
+        </div>
 
+
+        <div class="box">
+            <div class="icon">
+                <span class="fas fa-share-alt"></span>
+            </div>
+            <h3 class="title">Connect & Share</h3>
+            <p>We bring amazing people together to code algorithms and share our work for the benefit of all. Come and join Algo
+                Phantoms and give your DSA journey a supreme headstart! </p>
+            <a href="#">Learn More<i class="fas fa-angle-double-right"></i></a> 
         </div>
-    </section>
+
+</div>
+
     <!-- about ends -->
 
     <footer id="footer">