diff --git a/web/components/convert-kit-email-form.tsx b/web/components/convert-kit-email-form.tsx
index 4d8f06c3..d9593d64 100644
--- a/web/components/convert-kit-email-form.tsx
+++ b/web/components/convert-kit-email-form.tsx
@@ -9,8 +9,8 @@ const convertkitHTML = {
    <div data-style="clean">
       <ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
       <div data-element="fields" data-stacked="false" class="seva-fields formkit-fields">
-         <div class="formkit-field" style="max-width:400px;margin-right:12px;"><input class="formkit-input" name="email_address" aria-label="Email Address" placeholder="Email Address" required="" type="email" style="color: rgb(0, 0, 0); border-color: rgb(227, 227, 227); border-radius: 4px; font-weight: 400;"></div>
-         <button data-element="submit" class="formkit-submit formkit-submit" style="color: rgb(255, 255, 255); background-color: rgb(17, 185, 129); border-radius: 4px; font-weight: 400; max-width: 175px">
+         <div class="formkit-field" style="max-width:350px;margin-right:12px;"><input class="formkit-input" name="email_address" aria-label="Email Address" placeholder="Email Address" required="" type="email" style="color: rgb(0, 0, 0); border-color: rgb(227, 227, 227); border-radius: 4px; font-weight: 400;"></div>
+         <button data-element="submit" class="formkit-submit formkit-submit" style="color: rgb(255, 255, 255); background-color: rgb(17, 185, 129); border-radius: 4px; font-weight: 400; max-width: 200px">
             <div class="formkit-spinner">
                <div></div>
                <div></div>
diff --git a/web/components/hero.tsx b/web/components/hero.tsx
index e218d696..a0efa529 100644
--- a/web/components/hero.tsx
+++ b/web/components/hero.tsx
@@ -11,9 +11,9 @@ export const Hero = () => {
             <div className="lg:grid lg:grid-cols-2 lg:gap-8">
               <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
                 <div className="lg:py-24">
-                  <h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
+                  <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
                     <span className="block">Create your own</span>
-                    <span className="block text-green-400">
+                    <span className="block text-green-400 font-bold">
                       prediction markets
                     </span>
                   </h1>
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index ab322086..212e4e19 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -38,12 +38,7 @@ export default function Document() {
           crossOrigin="true"
         />
         <link
-          href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap"
-          rel="stylesheet"
-        />
-
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
+          href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap"
           rel="stylesheet"
         />
 
@@ -62,7 +57,7 @@ export default function Document() {
           }}
         />
       </Head>
-      <body className="h-full">
+      <body className="h-full font-readex-pro">
         <Main />
         <NextScript />
       </body>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 1a2d0073..ece84771 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
   theme: {
     fontFamily: {
       'major-mono': ['Major Mono Display', 'monospace'],
+      'readex-pro': ['Readex Pro', 'sans-serif'],
     },
     extend: {
       backgroundImage: {
