diff --git a/web/components/header.tsx b/web/components/header.tsx
index 65b24d6b..5f5c304b 100644
--- a/web/components/header.tsx
+++ b/web/components/header.tsx
@@ -27,20 +27,20 @@ function SignInLink(props: { darkBackground?: boolean }) {
       {user ? (
         <>
           <Link href="/contract">
-            <a className={clsx('text-base font-medium', themeClasses)}>
+            <a className={clsx('text-base', themeClasses)}>
               Create a market
             </a>
           </Link>
 
           <Link href="/account">
-            <a className={clsx('text-base font-medium', themeClasses)}>
+            <a className={clsx('text-base', themeClasses)}>
               {user.name}
             </a>
           </Link>
         </>
       ) : (
         <button
-          className={clsx('text-base font-medium', themeClasses)}
+          className={clsx('text-base', themeClasses)}
           onClick={() => firebaseLogin()}
         >
           Sign In
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index cc50959b..46389348 100644
--- a/web/pages/account.tsx
+++ b/web/pages/account.tsx
@@ -20,9 +20,9 @@ export default function Account() {
   return (
     <div>
       <Header />
-      <div className="max-w-4xl py-20 mx-auto">
+      <div className="max-w-4xl py-8 mx-auto">
         <div>
-          <div className="card glass lg:card-side text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-20">
+          <div className="card glass lg:card-side text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
             <figure className="p-6">
               {user?.avatarUrl && (
                 <Image
diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx
index 34367333..ffbd4f15 100644
--- a/web/pages/contract/index.tsx
+++ b/web/pages/contract/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { ContractsList } from '../../components/contracts-list'
 import { Header } from '../../components/header'
+import { Spacer } from '../../components/layout/spacer'
 import { useUser } from '../../hooks/use-user'
 import {
   Contract,
@@ -52,8 +53,8 @@ export default function NewContract() {
   return (
     <div>
       <Header />
-      <div className="max-w-4xl py-20 lg:mx-auto px-4">
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
+      <div className="max-w-4xl py-12 lg:mx-auto px-4">
+        <h1 className="text-2xl font-major-mono text-green-600 font-bold my-6">
           Create a new prediction market
         </h1>
         <div className="w-full bg-gray-100 rounded-lg shadow-xl p-6">
@@ -163,8 +164,10 @@ export default function NewContract() {
           </form>
         </div>
 
+        <Spacer h={10} />
+
         {/* Show a separate card for each contract */}
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
+        <h1 className="text-2xl font-major-mono text-green-600 font-bold my-6">
           Your markets
         </h1>