diff --git a/web/pages/[username]/[contractId].tsx b/web/pages/[username]/[contractId].tsx
index 0619ae54..1a044ffd 100644
--- a/web/pages/[username]/[contractId].tsx
+++ b/web/pages/[username]/[contractId].tsx
@@ -1,5 +1,8 @@
 import React from 'react'
 import { useRouter } from 'next/router'
+import Head from 'next/head'
+import clsx from 'clsx'
+
 import { useContract } from '../../hooks/use-contract'
 import { Header } from '../../components/header'
 import { ContractOverview } from '../../components/contract-overview'
@@ -7,31 +10,73 @@ import { BetPanel } from '../../components/bet-panel'
 import { Col } from '../../components/layout/col'
 import { useUser } from '../../hooks/use-user'
 import { ResolutionPanel } from '../../components/resolution-panel'
-import clsx from 'clsx'
+// import { Contract, getContract } from '../../lib/firebase/contracts'
+// export async function getStaticProps({ params }: { params: any }) {
+//   console.log('params', params)
+//   const contract = await getContract(params.contractId)
 
-export default function ContractPage() {
+//   return {
+//     props: {
+//       contract: contract || null
+//     }
+//   }
+// }
+
+// export async function getStaticPaths() {
+//   return {
+//     paths: [],
+//     fallback: true,
+//   }
+// }
+
+export default function ContractPage() {//{ contract }: { contract: Contract }) {
   const user = useUser()
 
   const router = useRouter()
   const { contractId } = router.query as { contractId: string }
 
   const contract = useContract(contractId)
-
   if (contract === 'loading') {
     return <div />
   }
-
   if (!contract) {
     return <div>Contract not found...</div>
   }
 
+  // if (contract === null) {
+  //   return <div>Contract not found...</div>
+  // }
+  // if (!contract)
+  //   return <div />
+
   const { creatorId, isResolved } = contract
   const isCreator = user?.id === creatorId
 
   return (
     <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <Head>
+        <title>{contract.question}</title>
+
+        <meta
+          property="og:title"
+          name="twitter:title"
+          content={contract.question}
+          key="title"
+        />
+        <meta
+          name="description"
+          content={contract.description}
+        />
+        <meta
+          property="og:description"
+          name="twitter:description"
+          content={contract.description}
+        />
+      </Head>
+
       <Header />
 
+
       <Col
         className={clsx(
           'w-full items-start md:flex-row mt-4',
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 0abb3c64..6acd76c0 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -10,6 +10,7 @@ export default function Document() {
           property="og:title"
           name="twitter:title"
           content="Mantic Markets"
+          key="title"
         />
         <meta
           name="description"
