diff --git a/components/Home/Hero.vue b/components/Home/Hero.vue
index 54a1df2..d50e2e1 100644
--- a/components/Home/Hero.vue
+++ b/components/Home/Hero.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mx-auto min-h-screen flex flex-col justify-evenly text-center relative">
-    <ul class="flex flex-col md:flex-row justify-evenly">
+    <ul class="flex flex-col md:flex-row justify-evenly" style="margin-top: 4rem; margin-bottom: 2rem;">
       <li v-for="text in headingText" :key="text">
         <h1
           class="text-5xl lg:text-7xl antialiased mx-2 my-2 text-center tracking-widest"
@@ -10,27 +10,45 @@
       </li>
     </ul>
     <figure>
-      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold">
+      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold" style="margin: 1rem;">
         Software Development Group
       </h2>
-      <figcaption class="text-xl font-medium tracking-widest">Club of Programmers, IIT (BHU) Varanasi</figcaption>
+      <figcaption class="text-xl font-medium tracking-widest" style="margin: 1rem;">Club of Programmers, IIT (BHU) Varanasi</figcaption>
     </figure>
-    <p class="antialiased text-shadow-md px-4 text-lg lg:text-xl max-w-3xl mx-auto">
+    <p class="antialiased text-shadow-md px-4 text-lg lg:text-xl max-w-3xl mx-auto" style="margin-top: 2rem;">
       We at Software Development Group (SDG) are a bunch of software designers, architects and developers who aim to
       encourage the development of technology and innovation in IIT (BHU)
       campus (and beyond) by learning, sharing knowledge and solving
       problems together.
     </p>
-    <aside aria-hidden="true" class="absolute inset-0 overflow-hidden -z-10">
-      <img src="/shapes/dots.svg" alt="dots" class="ShapesBackground_shape" style="top: 40rem; left: 90vw; width: 10.5rem; height: 12.75rem; filter: var(--teal); opacity: 0.25;">
-      <img src="/shapes/dots.svg" alt="dots" class="ShapesBackground_shape" style="top: 40rem; right: 90vw; width: 10.5rem; height: 12.75rem; opacity: 0.25; transform: rotateY(180deg)">
-      <img src="/shapes/hash.svg" alt="hash" class="ShapesBackground_shape" style="top: 10rem; left: 9vw; width: 3.75rem; height: 3.75rem; filter: var(--teal);">
-      <img src="/shapes/hash.svg" alt="hash" class="ShapesBackground_shape" style="top: 10rem; right: 9vw; width: 3.75rem; height: 3.75rem;">
-      <img src="/shapes/triangle.svg" alt="triangle" class="hidden sm:block ShapesBackground_shape" style="top: 20rem; left: 24vw; width: 4.25rem; height: 4.25rem; transform: rotate(18deg); filter: var(--teal);">
-      <img src="/shapes/triangle.svg" alt="triangle" class="hidden sm:block ShapesBackground_shape" style="top: 20rem; right: 24vw; width: 4.25rem; height: 4.25rem; transform: rotate(-18deg);">
-      <img src="/shapes/waves.svg" alt="waves" class="ShapesBackground_shape" style="top: 30rem; left: 20vw; width: 7.25rem; height: 3.625rem;">
-      <img src="/shapes/waves.svg" alt="waves" class="ShapesBackground_shape" style="top: 30rem; right: 20vw; width: 6.375rem; height: 3.125rem; filter: var(--teal); transform: rotateY(180deg);">
-    </aside>
+
+    <div class="blob"></div>
+    <div class="blob1"></div>
+
+    <div style="margin: auto;">
+          <div class="conn" style="padding:3rem; display: flex; flex-direction: row;">
+              
+            <!-- <div class="box"></div> -->
+
+              <div class="cardd" style="margin:5rem; ">
+                      <h2 class="text-3xl md:text-3xl lg:text-5xl font-bold" style="margin-bottom: .5rem; ">60000+</h2>
+                      <h5 class="text-1xl md:text-2xl lg:text-3xl font-bold" style="color: #08FDD8;">Reach</h5>
+              </div>
+          
+              <div class="cardd" style="margin:5rem; ">
+                      <h2 class="text-3xl md:text-3xl lg:text-5xl font-bold" style="margin-bottom: .5rem; ">350+</h2>
+                      <h5 class="text-1xl md:text-2xl lg:text-3xl font-bold" style="color: #08FDD8;">Members</h5>
+              </div>
+          
+            
+              <div class="cardd" style="margin:5rem; ">
+                      <h2 class="text-3xl md:text-3xl lg:text-5xl font-bold" style="margin-bottom: .5rem; ">20+</h2>
+                      <h5 class="text-1xl md:text-2xl lg:text-3xl font-bold" style="color: #08FDD8;" >Projects</h5>
+              </div>
+          
+              
+          </div>
+        </div>
   </section>
 </template>
 
@@ -83,11 +101,42 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.ShapesBackground_shape {
-    --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg) brightness(92%) contrast(93%);
-    --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg) brightness(91%) contrast(88%);
-    position: absolute;
-    filter: var(--blue);
-    opacity: 0.2;
+
+.blob{
+  width: 260px;
+  height: 160px;
+  border-radius: 350px;
+  background-color: #005C43;
+  box-shadow: 0 0 20px #02a28a;
+  position: absolute;
+  top: 500px; left: -180px;
+  z-index: -99;
+}
+
+.blob1{
+  width: 260px;
+  height: 160px;
+  border-radius: 350px;
+  background-color: #005C43;
+  box-shadow: 0 0 20px #02a28a;
+  position: absolute;
+  top: 600px; right: -180px;
+  z-index: -99;
 }
+
+
+@media screen and (max-width: 700px) {
+        .conn{
+          display: flex; flex-direction: column !important;
+        }
+      }
+@media screen and (max-width: 800px) {
+        .blob{
+           visibility:hidden;
+        }
+        .blob1{
+           visibility:hidden;
+        }
+      }      
+
 </style>