diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 42166817..fddb4b3d 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -1,20 +1,71 @@
-import { collection, onSnapshot, doc } from '@firebase/firestore'
-import { db } from './init'
+import { app } from './init'
+import {
+  getFirestore,
+  doc,
+  setDoc,
+  deleteDoc,
+  where,
+  collection,
+  query,
+  getDocs,
+} from 'firebase/firestore'
 
 export type Contract = {
-  id: string
+  id: string // Chosen by creator; must be unique
+  creatorId: string
+
   question: string
+  description: string // More info about what the contract is about
+  outcomeType: 'BINARY' // | 'MULTI' | 'interval' | 'date'
+  // outcomes: ['YES', 'NO']
+  seedAmounts: { YES: number; NO: number } // seedBets: [number, number]
+
+  createdTime: number // Milliseconds since epoch
+  lastUpdatedTime: number // If the question or description was changed
+  closeTime?: number // When no more trading is allowed
+
+  // isResolved: boolean
+  resolutionTime?: 10293849 // When the contract creator resolved the market; 0 if unresolved
+  resolution?: 'YES' | 'NO' | 'CANCEL' // Chosen by creator; must be one of outcomes
 }
 
-const contractCollection = collection(db, 'contracts')
+export type Bet = {
+  id: string
+  userId: string
+  contractId: string
 
-export function listenForContract(
-  contractId: string,
-  setContract: (contract: Contract) => void
-) {
-  const contractRef = doc(contractCollection, contractId)
+  size: number // Amount of USD bid
+  outcome: 'YES' | 'NO' // Chosen outcome
+  createdTime: number
 
-  return onSnapshot(contractRef, (contractSnap) => {
-    setContract(contractSnap.data() as Contract)
-  })
+  dpmWeight: number // Dynamic Parimutuel weight
+}
+
+const db = getFirestore(app)
+
+// Push contract to Firestore
+export async function setContract(contract: Contract) {
+  const docRef = doc(db, 'contracts', contract.id)
+  await setDoc(docRef, contract)
+}
+
+export async function deleteContract(contractId: string) {
+  const docRef = doc(db, 'contracts', contractId)
+  await deleteDoc(docRef)
+}
+
+export async function listContracts(creatorId: string): Promise<Contract[]> {
+  const contractsRef = collection(db, 'contracts')
+  const q = query(contractsRef, where('creatorId', '==', creatorId))
+  const snapshot = await getDocs(q)
+  const contracts: Contract[] = []
+  snapshot.forEach((doc) => contracts.push(doc.data() as Contract))
+  return contracts
+}
+
+// Push bet to Firestore
+// TODO: Should bets be subcollections under its contract?
+export async function setBet(bet: Bet) {
+  const docRef = doc(db, 'bets', bet.id)
+  await setDoc(docRef, bet)
 }
diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx
new file mode 100644
index 00000000..9be4bc55
--- /dev/null
+++ b/web/pages/contract/index.tsx
@@ -0,0 +1,203 @@
+import { FieldValue, serverTimestamp } from '@firebase/firestore'
+import { useEffect, useState } from 'react'
+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 key={contract.id}>
+      <a href="#" 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">
+                {/* <UsersIcon
+                  className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                /> */}
+                {contract.id}
+              </p>
+              <p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
+                {/* <LocationMarkerIcon
+                  className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                /> */}
+                {contract.description}
+              </p>
+            </div>
+            <div className="mt-2 flex items-center text-sm sm:mt-0">
+              {/* <CalendarIcon
+                className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              /> */}
+              <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>
+    </li>
+  )
+}
+
+// Allow user to create a new contract
+export default function NewContract() {
+  const creator = useUser()
+  const [contract, setContract] = useState<Contract>({
+    // creatorId: creator?.id || '',
+    // TODO: Set create time to Firestore timestamp
+    createdTime: Date.now(),
+    lastUpdatedTime: Date.now(),
+  } as Contract)
+
+  const [contracts, setContracts] = useState<Contract[]>([])
+  useEffect(() => {
+    if (creator?.id) {
+      setContract({ ...contract, creatorId: creator.id })
+      listContracts(creator?.id).then(setContracts)
+    }
+  }, [creator?.id])
+
+  async function saveContract() {
+    await pushContract(contract)
+    // Update local contract list
+    setContracts([...contracts, { ...contract }])
+  }
+
+  function saveField(field: keyof Contract) {
+    return (changeEvent: React.ChangeEvent<any>) =>
+      setContract({ ...contract, [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)...`
+
+  return (
+    <div className="relative overflow-hidden h-screen bg-cover bg-gray-900">
+      <Header />
+      <div className="grid place-items-center py-20">
+        <div className="max-w-4xl w-full bg-gray-500 rounded-lg shadow-xl p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-2xl text-indigo-300 font-bold">
+              Create a new contract
+            </h1>
+          </div>
+
+          {/* 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>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Contract ID</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. COVID-123"
+                className="input"
+                value={contract.id}
+                onChange={saveField('id')}
+              />
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Question</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
+                className="input"
+                value={contract.question}
+                onChange={saveField('question')}
+              />
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Description</span>
+              </label>
+              <textarea
+                className="textarea h-24 textarea-bordered"
+                placeholder={descriptionPlaceholder}
+                value={contract.description}
+                onChange={saveField('description')}
+              ></textarea>
+            </div>
+
+            <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+              <div className="sm:col-span-3">
+                <div className="form-control">
+                  <label className="label">
+                    <span className="label-text">Yes Seed</span>
+                  </label>
+                  <input type="number" placeholder="100" className="input" />
+                </div>
+              </div>
+
+              <div className="sm:col-span-3">
+                <div className="form-control">
+                  <label className="label">
+                    <span className="label-text">No Seed</span>
+                  </label>
+                  <input type="number" placeholder="100" className="input" />
+                </div>
+              </div>
+            </div>
+
+            {/* TODO: Show a preview of the created market here? */}
+
+            <div className="flex justify-end pt-3">
+              <button
+                type="submit"
+                className="btn btn-primary"
+                onClick={(e) => {
+                  e.preventDefault()
+                  saveContract()
+                }}
+              >
+                Save
+              </button>
+            </div>
+          </form>
+        </div>
+
+        {/* Show a separate card for each contract */}
+        <div className="bg-gray-500 shadow overflow-hidden sm:rounded-md mt-8 max-w-4xl w-full">
+          <ul role="list" className="divide-y divide-gray-200">
+            {contracts.map((contract) => (
+              <ContractCard contract={contract} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}