diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
new file mode 100644
index 00000000..8169d164
--- /dev/null
+++ b/web/components/contracts-list.tsx
@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import { Contract, deleteContract } from '../lib/firebase/contracts'
+
+function ContractCard(props: { contract: Contract }) {
+  const { contract } = props
+  return (
+    <li>
+      <Link href={`/contract/${contract.id}`}>
+        <a className="block hover:bg-gray-600">
+          <div className="px-4 py-4 sm:px-6">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-medium text-indigo-300 truncate">
+                {contract.question}
+              </p>
+              <div className="ml-2 flex-shrink-0 flex">
+                <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                  {contract.outcomeType}
+                </p>
+              </div>
+            </div>
+            <div className="mt-2 sm:flex sm:justify-between">
+              <div className="sm:flex">
+                <p className="flex items-center text-sm">{contract.id}</p>
+                <p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
+                  {contract.description}
+                </p>
+              </div>
+              <div className="mt-2 flex items-center text-sm sm:mt-0">
+                <p>
+                  Created on{' '}
+                  <time dateTime={`${contract.createdTime}`}>
+                    {new Date(contract.createdTime).toLocaleString()}
+                  </time>
+                </p>
+                <button
+                  className="btn btn-sm btn-error ml-2"
+                  onClick={() => {
+                    deleteContract(contract.id)
+                  }}
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </li>
+  )
+}
+
+export function ContractsList(props: { contracts: Contract[] }) {
+  const { contracts } = props
+  return (
+    <div className="bg-gray-500 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
+      <ul role="list" className="divide-y divide-gray-200">
+        {contracts.map((contract) => (
+          <ContractCard contract={contract} key={contract.id} />
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index d1df9064..ec26cd16 100644
--- a/web/pages/account.tsx
+++ b/web/pages/account.tsx
@@ -4,7 +4,7 @@ import { Header } from '../components/header'
 import { useUser } from '../hooks/use-user'
 import { useState, useEffect } from 'react'
 import { Contract, listContracts } from '../lib/firebase/contracts'
-import { ContractList } from './contract'
+import { ContractsList } from '../components/contracts-list'
 
 export default function Account() {
   const user = useUser()
@@ -47,7 +47,7 @@ export default function Account() {
         <h1 className="text-2xl font-major-mono text-indigo-300 font-bold mt-6 mb-4">
           Your markets
         </h1>
-        <ContractList contracts={contracts} />
+        <ContractsList contracts={contracts} />
       </div>
     </div>
   )
diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx
index b164f6d0..298812a6 100644
--- a/web/pages/contract/index.tsx
+++ b/web/pages/contract/index.tsx
@@ -1,75 +1,13 @@
-import Link from 'next/link'
 import { useEffect, useState } from 'react'
+import { ContractsList } from '../../components/contracts-list'
 import { Header } from '../../components/header'
 import { useUser } from '../../hooks/use-user'
 import {
   Contract,
-  deleteContract,
   listContracts,
   setContract as pushContract,
 } from '../../lib/firebase/contracts'
 
-function ContractCard(props: { contract: Contract }) {
-  const { contract } = props
-  return (
-    <li>
-      <Link href={`/contract/${contract.id}`}>
-        <a className="block hover:bg-gray-600">
-          <div className="px-4 py-4 sm:px-6">
-            <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-indigo-300 truncate">
-                {contract.question}
-              </p>
-              <div className="ml-2 flex-shrink-0 flex">
-                <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                  {contract.outcomeType}
-                </p>
-              </div>
-            </div>
-            <div className="mt-2 sm:flex sm:justify-between">
-              <div className="sm:flex">
-                <p className="flex items-center text-sm">{contract.id}</p>
-                <p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
-                  {contract.description}
-                </p>
-              </div>
-              <div className="mt-2 flex items-center text-sm sm:mt-0">
-                <p>
-                  Created on{' '}
-                  <time dateTime={`${contract.createdTime}`}>
-                    {new Date(contract.createdTime).toLocaleString()}
-                  </time>
-                </p>
-                <button
-                  className="btn btn-sm btn-error ml-2"
-                  onClick={() => {
-                    deleteContract(contract.id)
-                  }}
-                >
-                  Delete
-                </button>
-              </div>
-            </div>
-          </div>
-        </a>
-      </Link>
-    </li>
-  )
-}
-
-export function ContractList(props: { contracts: Contract[] }) {
-  const { contracts } = props
-  return (
-    <div className="bg-gray-500 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
-      <ul role="list" className="divide-y divide-gray-200">
-        {contracts.map((contract) => (
-          <ContractCard contract={contract} key={contract.id} />
-        ))}
-      </ul>
-    </div>
-  )
-}
-
 // Allow user to create a new contract
 // TODO: Extract to a reusable UI, for listing contracts too?
 export default function NewContract() {
@@ -106,7 +44,7 @@ export default function NewContract() {
 
   function saveField(field: keyof Contract) {
     return (changeEvent: React.ChangeEvent<any>) =>
-      setContract({ ...contract, [field]: changeEvent.target.value })
+      setContract((c) => ({ ...c, [field]: changeEvent.target.value }))
   }
 
   const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...`
@@ -230,7 +168,7 @@ export default function NewContract() {
           Your markets
         </h1>
 
-        <ContractList contracts={contracts} />
+        <ContractsList contracts={contracts} />
       </div>
     </div>
   )