diff --git a/src/layouts/index.html b/src/layouts/index.html
index ea45114..0cf688e 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -15,6 +15,10 @@
     font-size: 28px;
     line-height: 36px;
   }
+  h4{
+    font-family: "inter";
+    font-size: 24px;
+  }
   .lead{
     font-size: 20px;
     font-family: "mona";
@@ -78,28 +82,34 @@
     <div class="row one-box-down">
       <h3 class="text-center">delightful OSS package management for everyone</h3>
     </div>
-    <div class="row gx-3">
-      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 product-col">
-        <div class="col-content one-box">
-          <h2 class="text-center">tea/cli</h2>
-          <p class="lead text-center">Next-gen, cross-platform package manager</p>
-          <p class="text-center mb-5">Simply type commands and tea takes care of the rest. Get the latest versions of open source tools and support specific tool versions for different projects.</p>
-          <div class="button" style="display:flex;justify-content:center;">
-            <a href="/cli/">
-              <button class="hbtn hb-fill-right github-click" style="width:180px;height:40px;font-size:14px;">Learn more</button>
-            </a>
+    <div class="row">
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-0 mb-sm-4 mb-4">
+        <div class="product-col p-4">
+          <div class="col-content one-box">
+            <h4 class="text-center">invisible, yet powerful</h4>
+            <h2 class="text-center mb-3">tea/cli</h2>
+            <p class="lead text-center">Next-gen, cross-platform package manager</p>
+            <p class="text-center mb-5">Simply type commands and tea takes care of the rest. Get the latest versions of open source tools and support specific tool versions for different projects.</p>
+            <div class="button" style="display:flex;justify-content:center;">
+              <a href="/cli/">
+                <button class="hbtn hb-fill-right github-click" style="width:180px;height:40px;font-size:14px;">LEARN MORE</button>
+              </a>
+            </div>
           </div>
         </div>
       </div>
-      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 product-col">
-        <div class="col-content one-box">
-          <h2 class="text-center">tea/gui</h2>
-          <p class="lead text-center">Ground-breaking visual package manager</p>
-          <p class="text-center">Our visual package manager lets you browse, install, and update open-source software in a snap. Say goodbye to manual updates and hello to streamlined development.</p>
-          <div class="button" style="display:flex;justify-content:center;">
-            <a href="/gui/">
-              <button class="hbtn hb-fill-right github-click" style="width:180px;height:40px;font-size:14px;">Download</button>
-            </a>
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
+        <div class="product-col p-4">
+          <div class="col-content one-box">
+            <h4 class="text-center">visible, still powerful</h4>
+            <h2 class="text-center mb-3">tea/gui</h2>
+            <p class="lead text-center">Ground-breaking visual package manager</p>
+            <p class="text-center mb-5">Our gui lets you browse, install, and update open-source software in a snap. Say goodbye to manual updates and hello to streamlined development.</p>
+            <div class="button" style="display:flex;justify-content:center;">
+              <a href="/cli/">
+                <button class="hbtn hb-fill-right github-click" style="width:180px;height:40px;font-size:14px;">DOWNLOAD</button>
+              </a>
+            </div>
           </div>
         </div>
       </div>