diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 3c40dbfb..05af4aee 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -50,7 +50,10 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
   return (
     <Col
-      className={clsx('bg-gray-100 p-6 rounded w-full md:w-auto', className)}
+      className={clsx(
+        'bg-gray-200 shadow-xl p-6 rounded w-full md:w-auto',
+        className
+      )}
     >
       <div className="p-2 font-medium">Pick outcome</div>
       <YesNoSelector
diff --git a/web/components/button.tsx b/web/components/button.tsx
deleted file mode 100644
index d7e40579..00000000
--- a/web/components/button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-export function Button(props: {
-  className?: string
-  onClick?: () => void
-  color: 'green' | 'red' | 'deemphasized'
-  hideFocusRing?: boolean
-  children?: any
-}) {
-  const { className, onClick, children, color, hideFocusRing } = props
-
-  return (
-    <button
-      type="button"
-      className={classNames(
-        'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
-        !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
-        color === 'green' &&
-          'bg-green-500 hover:bg-green-600 focus:ring-green-500',
-        color === 'red' && 'bg-red-500 hover:bg-red-600 focus:ring-red-500',
-        color === 'deemphasized' &&
-          'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
-        className
-      )}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  )
-}
-
-function classNames(...classes: any[]) {
-  return classes.filter(Boolean).join(' ')
-}
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index 92fb8cbc..fa1bedd2 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -6,10 +6,10 @@ function ContractCard(props: { contract: Contract }) {
   return (
     <li>
       <Link href={`/contract/${contract.id}`}>
-        <a className="block hover:bg-gray-200">
+        <a className="block hover:bg-gray-300">
           <div className="px-4 py-4 sm:px-6">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-green-600 truncate">
+              <p className="text-sm font-medium text-indigo-700 truncate">
                 {contract.question}
               </p>
               <div className="ml-2 flex-shrink-0 flex">
@@ -52,8 +52,8 @@ function ContractCard(props: { contract: Contract }) {
 export function ContractsList(props: { contracts: Contract[] }) {
   const { contracts } = props
   return (
-    <div className="bg-gray-100 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
-      <ul role="list" className="divide-y divide-gray-200">
+    <div className="bg-gray-200 shadow-xl overflow-hidden sm:rounded-md max-w-4xl w-full">
+      <ul role="list" className="divide-y divide-gray-300">
         {contracts.map((contract) => (
           <ContractCard contract={contract} key={contract.id} />
         ))}
diff --git a/web/components/title.tsx b/web/components/title.tsx
new file mode 100644
index 00000000..f244bdf5
--- /dev/null
+++ b/web/components/title.tsx
@@ -0,0 +1,8 @@
+export function Title(props: { text: string }) {
+  const { text } = props
+  return (
+    <h1 className="text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4">
+      {text}
+    </h1>
+  )
+}
diff --git a/web/package-lock.json b/web/package-lock.json
index e77370b8..08ef3fcb 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,7 +9,7 @@
         "@headlessui/react": "1.4.2",
         "@heroicons/react": "1.0.5",
         "chart.js": "3.6.1",
-        "clsx": "^1.1.1",
+        "clsx": "1.1.1",
         "daisyui": "1.16.2",
         "firebase": "9.6.0",
         "next": "12.0.4",
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 91a70e51..3b005b96 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html data-theme="mantic" className="h-full">
+    <Html data-theme="mantic" className="min-h-screen">
       <Head>
         <title>Mantic Markets</title>
 
@@ -57,7 +57,7 @@ export default function Document() {
           }}
         />
       </Head>
-      <body className="h-full font-readex-pro">
+      <body className="min-h-screen font-readex-pro bg-base-200">
         <Main />
         <NextScript />
       </body>
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index f210bd3b..13b89382 100644
--- a/web/pages/account.tsx
+++ b/web/pages/account.tsx
@@ -5,6 +5,7 @@ import { useUser } from '../hooks/use-user'
 import { useState, useEffect } from 'react'
 import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsList } from '../components/contracts-list'
+import { Title } from '../components/title'
 
 export default function Account() {
   const user = useUser()
@@ -46,9 +47,7 @@ export default function Account() {
           </div>
         </div>
 
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold mt-6 mb-4">
-          Your markets
-        </h1>
+        <Title text="Your markets" />
         <ContractsList contracts={contracts} />
       </div>
     </div>
diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx
index bc15e743..058a98f6 100644
--- a/web/pages/contract/index.tsx
+++ b/web/pages/contract/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { ContractsList } from '../../components/contracts-list'
 import { Header } from '../../components/header'
 import { Spacer } from '../../components/layout/spacer'
+import { Title } from '../../components/title'
 import { useUser } from '../../hooks/use-user'
 import {
   Contract,
@@ -55,10 +56,8 @@ export default function NewContract() {
     <div>
       <Header />
       <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">
+        <Title text="Create a new prediction market" />
+        <div className="w-full bg-gray-200 rounded-lg shadow-xl p-6">
           {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
           {/* When the form is submitted, create a new contract in the database */}
           <form>
@@ -175,11 +174,7 @@ export default function NewContract() {
 
         <Spacer h={10} />
 
-        {/* Show a separate card for each contract */}
-        <h1 className="text-2xl font-major-mono text-green-600 font-bold my-6">
-          Your markets
-        </h1>
-
+        <Title text="Your markets" />
         <ContractsList contracts={contracts} />
       </div>
     </div>