diff --git a/frontend/src/pages/how-it-works.tsx b/frontend/src/pages/how-it-works.tsx
index 5ea70e0..44fb328 100644
--- a/frontend/src/pages/how-it-works.tsx
+++ b/frontend/src/pages/how-it-works.tsx
@@ -126,21 +126,21 @@ const faq = [
 
 function Nav() {
   return (
-    <header className='sticky top-4 z-50 px-5 pt-7'>
+    <header className='sticky top-3 z-50 px-5 pt-5'>
       <div
-        className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}
+        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
       >
         <Link
           href='/'
           className='flex items-center gap-3 text-lg font-semibold tracking-tight'
         >
-          <span className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]'>
+          <span className='flex h-9 w-9 items-center justify-center rounded-xl bg-[#f3fbf8] text-xl font-black text-[#35b7a5]'>
             C
           </span>
           <span className='sr-only'>Coaching SaaS Workspace</span>
         </Link>
         <nav
-          className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}
+          className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
         >
           <Link href='/how-it-works/'>How it works</Link>
           <Link href='/client-portal/'>Coachee</Link>
@@ -150,7 +150,7 @@ function Nav() {
         </nav>
         <Link
           href='/register/'
-          className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}
+          className={`rounded-full px-5 py-2.5 text-sm font-semibold ${ui.button}`}
         >
           Join waitlist
         </Link>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index c462510..9cae035 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -154,21 +154,21 @@ export default function Starter() {
           </p>
         </div>
 
-        <header className='sticky top-4 z-50 px-5 pt-7'>
+        <header className='sticky top-3 z-50 px-5 pt-5'>
           <div
-            className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}
+            className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
           >
             <Link
               href='/'
               className='flex items-center gap-3 text-lg font-semibold tracking-tight'
             >
-              <span className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]'>
+              <span className='flex h-9 w-9 items-center justify-center rounded-xl bg-[#f3fbf8] text-xl font-black text-[#35b7a5]'>
                 C
               </span>
               <span className='sr-only'>Coaching SaaS Workspace</span>
             </Link>
             <nav
-              className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}
+              className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
             >
               <Link href='/how-it-works/'>How it works</Link>
               <Link href='/client-portal/'>Coachee</Link>
@@ -180,7 +180,7 @@ export default function Starter() {
             </nav>
             <Link
               href='/register/'
-              className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}
+              className={`rounded-full px-5 py-2.5 text-sm font-semibold ${ui.button}`}
             >
               Join waitlist
             </Link>