diff --git a/src/app/db/loaders.ts b/src/app/db/loaders.ts
new file mode 100644
index 0000000..4f9f58a
--- /dev/null
+++ b/src/app/db/loaders.ts
@@ -0,0 +1,33 @@
+import { Document } from './data'
+
+// export const loadDocument(id: string): Promise<Document> | undefined => {
+
+// }
+export const loadAllDocuments = (): Promise<{ [key: string]: Document }> => {
+  return new Promise((resolve, reject) => {
+    if (typeof Worker !== 'undefined') {
+      const worker = new Worker(
+        new URL('./workers/documentLoader.worker.ts', import.meta.url),
+        { type: 'module' }
+      )
+
+      worker.onmessage = (e: MessageEvent<{ [key: string]: Document }>) => {
+        resolve(e.data)
+        worker.terminate()
+      }
+
+      worker.onerror = (error) => {
+        reject(error)
+        worker.terminate()
+      }
+
+      worker.postMessage('LOAD')
+    } else {
+      reject(
+        new Error(
+          'Web Workers are not supported in this environment. Please avoid using a prehistoric browser.'
+        )
+      )
+    }
+  })
+}
diff --git a/src/app/db/workers/documentLoader.worker.ts b/src/app/db/workers/documentLoader.worker.ts
new file mode 100644
index 0000000..e19ff6f
--- /dev/null
+++ b/src/app/db/workers/documentLoader.worker.ts
@@ -0,0 +1,7 @@
+import { documents } from '../data'
+
+onmessage = (e) => {
+  if (e.data === 'LOAD') {
+    self.postMessage({ documents })
+  }
+}
diff --git a/src/app/document/view/[slug]/DocumentViewer.tsx b/src/app/document/view/[slug]/DocumentViewer.tsx
new file mode 100644
index 0000000..a523bb0
--- /dev/null
+++ b/src/app/document/view/[slug]/DocumentViewer.tsx
@@ -0,0 +1,101 @@
+import { DocumentType, Document } from '@/app/db/data'
+import { Zilla_Slab } from 'next/font/google'
+import { epoch2datestring } from '@/app/utils/epoch2datestring'
+import {
+  Code,
+  References,
+  Topics,
+  Authors,
+  Reviewers,
+} from '@/app/components/DataDisplay'
+import { ItemBadge, Status } from '@/app/components/Badges'
+import Link from 'next/link'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
+
+export default function DocumentViewer({
+  doc,
+  slug,
+}: Readonly<{ doc: Document; slug: string }>) {
+  const { manifest, abstract, file, citation } = doc
+  const {
+    title,
+    authors,
+    topics,
+    dates,
+    references,
+    code,
+    type,
+    latest,
+    reviewers,
+    status,
+  } = manifest
+
+  return (
+    <div className='max-w-4xl lg:max-w-6xl mx-auto'>
+      <h1
+        className={`
+            text-slate-800 font-bold text-5xl mb-4
+            ${zillaSlab.className}
+            text-wrap
+          `}
+      >
+        {title}
+      </h1>
+      <p className={`text-slate-800 mt-2`}>
+        <Authors authors={authors} />
+      </p>
+      <p className='mt-4 mb-2'>
+        Latest revision published{' '}
+        <span className='font-bold'>
+          {epoch2datestring(dates[dates.length - 1])}
+        </span>
+      </p>
+      <ItemBadge itemName={type as DocumentType} />
+      <Status statusName={status} />
+      <span className='inline-block border-gray-200 border-2 rounded px-2 py-1.5 mr-2'>
+        Revision {latest}
+      </span>
+      <hr className='my-4' />
+      <h4 className='text-2xl mt-5 font-serif font-semibold'>Abstract</h4>
+      <p className='my-4 text-xl text-slate-600 font-serif text-balance'>
+        {abstract}
+      </p>
+      <p className='my-2'>
+        <Topics topics={topics} />
+      </p>
+      <p className='my-2'>
+        <Code code={code} />
+      </p>
+      <p className='my-2'>
+        <References references={references} />
+      </p>
+      <p className='my-2'>
+        <Reviewers reviewers={reviewers} />
+      </p>
+      <p className='my-2'>
+        <span className='font-bold'>Cite as: </span>
+        {citation ? <>{citation}</> : <>eeXiv:{slug}</>}
+      </p>
+      <Link
+        href={`/download/${slug}/file${latest}${file === 'other' ? '' : `.${file}`}`}
+        download={`${slug}-rev-${latest}${file === 'other' ? '' : `.${file}`}`}
+        target='_blank'
+      >
+        <button className='button-default'>
+          Download{' '}
+          {(() => {
+            switch (file) {
+              case 'other':
+                return <></>
+              case 'tar.gz':
+                return 'Tarball'
+              default:
+                return file.toUpperCase()
+            }
+          })()}
+        </button>
+      </Link>
+    </div>
+  )
+}