diff --git a/website/src/app/fonts/BasementGrotesque-BlackExpanded.woff2 b/website/src/app/fonts/BasementGrotesque-BlackExpanded.woff2
index acba99a..77b01b8 100644
Binary files a/website/src/app/fonts/BasementGrotesque-BlackExpanded.woff2 and b/website/src/app/fonts/BasementGrotesque-BlackExpanded.woff2 differ
diff --git a/website/src/app/fonts/BasementGrotesque-Regular.woff2 b/website/src/app/fonts/BasementGrotesque-Regular.woff2
index fb39c23..76eed12 100644
Binary files a/website/src/app/fonts/BasementGrotesque-Regular.woff2 and b/website/src/app/fonts/BasementGrotesque-Regular.woff2 differ
diff --git a/website/src/app/sections/hero/hero.module.scss b/website/src/app/sections/hero/hero.module.scss
index 298d006..facef7b 100644
--- a/website/src/app/sections/hero/hero.module.scss
+++ b/website/src/app/sections/hero/hero.module.scss
@@ -25,6 +25,8 @@
   }
 
   .cta {
+    display: flex;
+    flex-direction: column-reverse;
     font-size: tovw(16px, "desktop-large", 12px);
     line-height: 1.2;
     max-width: tovw(537px);
@@ -32,18 +34,28 @@
     margin-left: auto;
     text-align: right;
     display: flex;
-    align-items: center;
-    gap: toem(16px, 16px);
+    align-items: flex-end;
+    gap: tovw(10px, "desktop-large", 6px);
 
     @media screen and (max-width: 800px) {
       max-width: unset;
       margin: 0;
-      justify-content: center;
-      margin-top: tovw(12px, "tablet", 12px);
+      align-items: center;
+      margin-top: tovw(8px, "tablet", 8px);
+    }
+
+    svg {
+      width: tovw(16px, "desktop-large", 16px);
+      height: tovw(16px, "desktop-large", 16px);
+
+      @media screen and (max-width: 800px) {
+        width: tovw(14px, "tablet", 14px);
+        height: tovw(14px, "tablet", 14px);
+      }
     }
 
     a {
-      font-size: tovw(22px, "desktop-large", 14px);
+      font-size: tovw(18px, "desktop-large", 14px);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -52,6 +64,30 @@
       border-radius: 999999px;
       color: black;
       padding: toem(4px, 16px) toem(8px, 16px);
+
+      @media (hover: hover) {
+        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+
+        &:hover {
+          color: var(--color-orange);
+          background-color: color-mix(
+            in srgb,
+            var(--color-black) 70%,
+            white 20%
+          );
+        }
+      }
+    }
+
+    .docs-link {
+      span {
+        font-weight: 800;
+      }
+    }
+
+    &--buttons {
+      display: flex;
+      gap: tovw(8px, "desktop-large", 6px);
     }
   }
 }
diff --git a/website/src/app/sections/hero/index.tsx b/website/src/app/sections/hero/index.tsx
index 3606d0e..0bf496a 100644
--- a/website/src/app/sections/hero/index.tsx
+++ b/website/src/app/sections/hero/index.tsx
@@ -113,6 +113,7 @@ export const Hero = () => {
             <pre>
               <code>npm i @bsmnt/scrollytelling</code>
             </pre>
+            <div className={s["cta--buttons"]}>
             <a
               href="https://github.com/basementstudio/scrollytelling"
               target="_blank"
@@ -134,6 +135,13 @@ export const Hero = () => {
               </svg>
               <span>GitHub</span>
             </a>
+            <Link 
+            target="_blank"
+            rel="noopener noreferrer"
+            className={s["docs-link"]} href="/docs">
+              <span>b</span>
+              Docs</Link>
+            </div>
           </div>
         </header>