diff --git a/src/layouts/index.html b/src/layouts/index.html
index bc92b65..d98dff8 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -2,85 +2,24 @@
 
 <!-- Hero Section -->
 
-<section class="hero-section">
-  <div class="container hero-container">
-    <div class="row">
-      <div class="col">
-        <h1 class="impact text-center" style="z-index:3; position: relative;">Invisible yet <span class="callout white">powerful</span></h1>
-        <div class="lead-box flex text-center black-bg p-xl-5 p-lg-5 p-md-5 p-sm-3 p-3">
-          <p class="lead-text lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-  <div class="full-width-cta-container">
-   {{- partial "full-width-cta-split.html" . -}}
-  </div>
-
-  <style>
-
-    @media only screen and (min-width: 1200px) {
-
-      .lead-box{
-        width: 100%;
-        border: 2px solid #949494;
-        min-height: 12.556vw;
-      }
-
-    }
-
-    @media only screen and (min-width: 992px) and (max-width: 1200px) {
-
-      .lead-box{
-        width: 100%;
-        border: 2px solid #949494;
-        height:auto;
-      }
-
-    }
-
-    @media only screen and (min-width: 768px) and (max-width: 992px) {
-
-      .lead-box{
-        width: 100%;
-        border: 2px solid #949494;
-        height: auto;
-      }
-
-    }
-
-    @media only screen and (min-width: 576px) and (max-width: 768px) {
-
-      .lead-box{
-        width: 100%;
-        border: 2px solid #949494;
-        height: auto;
-      }
-
-    }
-
-    @media only screen and (max-width: 576px) {
-
-      .lead-box{
-        border: 2px solid #949494;
-        min-height: 300px;
-        margin: 0vw 3.5vw !important;
-      }
-
-      .lead-text{
-        text-align: left;
-      }
-
-    }
-
-  </style>
-
-
-<section class="hero-section terminal-demo">
+<section>
   <div class="container">
-    <div class="row">
-      <div class="col">
+    <div class="row gx-5">
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
+        <h1 class="display-1" style="z-index:3; position: relative;">Invisible yet <span class="callout white">powerful</span></h1>
+          <p class="lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
+          <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <div class="flex-start mb-3">
+            <a href="https://github.com/teaxyz/cli" class="me-3 mb-3">
+              <button class="hbtn hb-fill-right">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
+            </a>
+            <a href="https://github.com/teaxyz/cli">
+              <button class="hbtn hb-fill-right">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
+            </a>
+          </div>
+          <p class="small dark-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
         <a href="https://github.com/teaxyz/cli#teacli-0212" target="_blank">
         <div class="terminal flex">
           <div class="terminal-bar black-bg flex-start p-1 ps-3">
@@ -104,6 +43,8 @@
   </div>
 </section>
 
+<hr>
+
 {{- partial "hero-terminal-animation.html" -}}
 
 <style>
@@ -140,9 +81,8 @@
     }
 
     .terminal{
-      height: auto;
-      min-height: 449px;
-      width: 58.594vw;
+      height: 100%;
+      width: 100%;
       display: block;
       margin-left: auto;
       margin-right: auto;
@@ -552,7 +492,7 @@
     <div class="row">
       <div class="col">
           <div>
-            <h2 class="black display-3 text-center" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING <br>INFRASTRUCTURE.</h2>
+            <h2 class="black display-4" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING INFRASTRUCTURE.</h2>
           </div>
       </div>
     </div>
diff --git a/src/layouts/partials/navbar.html b/src/layouts/partials/navbar.html
index b6deb20..cc773ca 100644
--- a/src/layouts/partials/navbar.html
+++ b/src/layouts/partials/navbar.html
@@ -22,7 +22,7 @@
               background-color: #8000ff;
               position: relative;
               box-sizing: border-box;
-              height: 4.4vw !important;
+              height: 60px;
               display: inline-block;
               overflow: hidden;
               padding: 8px 20px;
diff --git a/src/static/css/homepage.css b/src/static/css/homepage.css
index d699703..856b25f 100644
--- a/src/static/css/homepage.css
+++ b/src/static/css/homepage.css
@@ -3,9 +3,8 @@
 
   html,body{
     background-color: #1a1a1a;
-    max-width: none;
+    max-width: 1920px;
     overflow-x: hidden;
-    margin-top: 2.2vw;
   }
 
   .container{
diff --git a/src/static/css/navbar.css b/src/static/css/navbar.css
index f571a21..6bf2c7c 100644
--- a/src/static/css/navbar.css
+++ b/src/static/css/navbar.css
@@ -14,12 +14,12 @@
 
   .navbar{
     background-color: #1a1a1a !important;
-    height: 4.5vw;
+    height: 60px !important;
     border-bottom: 2px solid #949494;
   }
 
   .nav-logo{
-    width: 4.4vw;
+    width: 60px;
   }
 
   .nav-logo:hover{
diff --git a/src/static/css/typography.css b/src/static/css/typography.css
index 28009ef..dd21664 100644
--- a/src/static/css/typography.css
+++ b/src/static/css/typography.css
@@ -12,8 +12,12 @@
 
 @font-face {
   font-family: "inter";
-  src: url("/fonts/Inter-Regular.woff2") format("woff2"),
-  url("/fonts/Inter-Regular.woff") format("woff");
+  src: url("/fonts/Inter-Regular.woff");
+}
+
+@font-face {
+  font-family: "mona";
+  src: url("/fonts/Mona-Sans-ExtraBold.woff");
 }
 /*
 h1,h2,h3,h4,h5,h6,p,.lead{
@@ -29,14 +33,14 @@ h1,h2,h3,h4,h5,h6,p,.lead{
 }
 
 h1{
-  font-family: "pp-neue-machina", sans-serif;
+  font-family: "mona", sans-serif;
   color:#00ffd0;
   text-transform:uppercase;
   text-shadow: 0px 0px 4px #1a1a1a !important;
 }
 
 h2{
-  font-family: "pp-neue-machina", sans-serif;
+  font-family: "mona", sans-serif;
   color:#00ffd0;
   text-transform:uppercase;
   hyphens: auto;
@@ -59,7 +63,7 @@ h5{
 }
 
 p{
-  font-family: "inter", sans-serif;
+  font-family: "inter", sans-serif !important;
   color: #ffffff;
   font-weight: 500;
 }
@@ -69,6 +73,11 @@ li{
   color: #ffffff;
 }
 
+.terminal-output,.terminal-input{
+  font-family: "sono", sans-serif !important;
+  color: #ffffff;
+}
+
 a{
   color: #00ffd0;
   text-decoration: none;
@@ -97,7 +106,6 @@ a:hover{
     font-size: 11.5vw;
     line-height: 12.4vw;
     margin-top: -1.116vw;
-    margin-left: -0.837vw;
   }
 
   h2{
@@ -138,7 +146,6 @@ a:hover{
     font-size: 14vw;
     line-height: 15vw;
     margin-top: -0.3vw;
-    margin-left: -0.837vw;
   }
 
   h2{
@@ -178,7 +185,6 @@ a:hover{
     font-size: 14vw;
     line-height: 15vw;
     margin-top: -0.3vw;
-    margin-left: -0.837vw;
   }
 
   h2{
diff --git a/src/static/fonts/Mona-Sans-ExtraBold.woff b/src/static/fonts/Mona-Sans-ExtraBold.woff
new file mode 100644
index 0000000..852c3a2
Binary files /dev/null and b/src/static/fonts/Mona-Sans-ExtraBold.woff differ