diff --git a/src/app/db/loaders.ts b/src/app/db/loaders.ts
index 4f9f58a..ec3e37d 100644
--- a/src/app/db/loaders.ts
+++ b/src/app/db/loaders.ts
@@ -1,8 +1,39 @@
 import { Document } from './data'
 
-// export const loadDocument(id: string): Promise<Document> | undefined => {
+export const loadDocument = (id: string): Promise<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 }>) => {
+        const data = e.data
+        const doc: Document | undefined = data[id]
+        if (!doc) {
+          return reject(new Error('404'))
+        } else {
+          resolve(doc)
+        }
+        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.'
+        )
+      )
+    }
+  })
+}
 export const loadAllDocuments = (): Promise<{ [key: string]: Document }> => {
   return new Promise((resolve, reject) => {
     if (typeof Worker !== 'undefined') {
diff --git a/src/app/db/workers/documentLoader.worker.ts b/src/app/db/workers/documentLoader.worker.ts
index e19ff6f..b263e79 100644
--- a/src/app/db/workers/documentLoader.worker.ts
+++ b/src/app/db/workers/documentLoader.worker.ts
@@ -2,6 +2,6 @@ import { documents } from '../data'
 
 onmessage = (e) => {
   if (e.data === 'LOAD') {
-    self.postMessage({ documents })
+    self.postMessage(documents)
   }
 }
diff --git a/src/app/document/view/[slug]/page.tsx b/src/app/document/view/[slug]/page.tsx
index ad5865a..bd3b735 100644
--- a/src/app/document/view/[slug]/page.tsx
+++ b/src/app/document/view/[slug]/page.tsx
@@ -1,117 +1,29 @@
 'use client'
 import { Zilla_Slab } from 'next/font/google'
-import { DocumentType, documents, reviewer } from '@/app/db/data'
-import Link from 'next/link'
-import { notFound } from 'next/navigation'
-import { Fragment, useEffect } from 'react'
-import { epoch2datestring } from '@/app/utils/epoch2datestring'
-import { toast } from 'react-toastify'
-import { ItemBadge, Status } from '@/app/components/Badges'
-import {
-  Code,
-  References,
-  Topics,
-  Authors,
-  Reviewers,
-} from '@/app/components/DataDisplay'
-
-const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+import { DocumentType, reviewer, Document, documents } from '@/app/db/data'
+import { loadDocument, loadAllDocuments } from '@/app/db/loaders'
+import DocumentViewer from './DocumentViewer'
+import createResource from '@/app/utils/createResource'
+import { Suspense, useEffect, useMemo } from 'react'
 
 export default function Page({
   params,
 }: Readonly<{ params: { slug: string } }>) {
-  const doc = documents[params.slug]
-  if (!doc) {
-    notFound()
-  }
-  const { abstract, file, citation } = doc
-  const {
-    title,
-    authors,
-    topics,
-    dates,
-    references,
-    code,
-    type,
-    latest,
-    reviewers,
-    status,
-  } = doc.manifest
+  // const docResource = createResource(loadDocument(params.slug))
+  // const doc = docResource.read()
 
   useEffect(() => {
-    if (status === 'reviewed' && !reviewers) {
-      toast.warn(
-        `This document is marked as peer reviewed, but the author 
-        forgot to add a list of reviewers.`
-      )
+    const check = async () => {
+      const doc = await loadDocument(params.slug)
+      console.log(doc)
     }
-  }, [])
+    check()
+  })
 
   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:{params.slug}</>}
-      </p>
-      <Link
-        href={`/download/${params.slug}/file${latest}${file === 'other' ? '' : `.${file}`}`}
-        download={`${params.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>
+    <>
+      <div>hi</div>
+      <DocumentViewer doc={documents[params.slug]} slug={params.slug} />
+    </>
   )
 }
diff --git a/src/app/utils/createResource.ts b/src/app/utils/createResource.ts
new file mode 100644
index 0000000..d8dcf7f
--- /dev/null
+++ b/src/app/utils/createResource.ts
@@ -0,0 +1,26 @@
+export default function wrapPromise(promise: Promise<any>) {
+  let status = 'pending'
+  let result: any
+  let suspender = promise.then(
+    (r) => {
+      status = 'success'
+      result = r
+    },
+    (e) => {
+      status = 'error'
+      result = e
+    }
+  )
+
+  return {
+    read() {
+      if (status === 'pending') {
+        throw suspender
+      } else if (status === 'error') {
+        throw result
+      } else if (status === 'success') {
+        return result
+      }
+    },
+  }
+}