diff --git a/src/app/document/page.tsx b/src/app/document/page.tsx
index b4a9362..ae7098f 100644
--- a/src/app/document/page.tsx
+++ b/src/app/document/page.tsx
@@ -2,7 +2,11 @@ import { documents } from '@/app/db/data'
 import { Zilla_Slab } from 'next/font/google'
 import { notFound } from 'next/navigation'
 import { Fragment } from 'react'
-import DocumentCard from '../components/DocumentCard'
+import Link from 'next/link'
+import cardEffects from '@/app/styles/cardEffects.module.css'
+import { Authors, Topics } from '../components/DataDisplay'
+import { epoch2datestring } from '../utils/epoch2datestring'
+import { ItemBadge, Status } from '../components/Badges'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -16,7 +20,33 @@ const DocumentCardWrapper = ({
     notFound()
   }
 
-  return <DocumentCard doc={doc} href={href} />
+  const { manifest, abstract } = doc
+  const { title, authors, topics, dates, status, type } = manifest
+  return (
+    <Link href={href} className='no-link-style'>
+      <button
+        className={`${cardEffects['card-large']} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md text-left h-full flex flex-col`}
+      >
+        <h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
+        <p className='text-slate-500 py-2 text-md mt-2'>
+          <Authors authors={authors} noLink />
+        </p>
+        <p className='mb-2 text-slate-700 text-md'>
+          Last updated on {epoch2datestring(dates[dates.length - 1])}
+        </p>
+        <p className='mb-2'>
+          <Topics topics={topics} showTitle />
+        </p>
+        <div className='mb-4 flex flex-wrap gap-2'>
+          <ItemBadge itemName={type} /> <Status statusName={status} />
+        </div>
+        <h2 className={`${zillaSlab.className} text-2xl`}>Abstract</h2>
+        <p className='py-2 text-md text-slate-700 font-serif text-lg text-balance'>
+          {abstract.substring(0, 500) + (abstract.length > 500 ? '...' : '')}
+        </p>
+      </button>
+    </Link>
+  )
 }
 
 const getDocumentDate = (id: string) => {