diff --git a/src/app/db/loaders.ts b/src/app/db/loaders.ts
index 759c783..4e40eec 100644
--- a/src/app/db/loaders.ts
+++ b/src/app/db/loaders.ts
@@ -91,6 +91,7 @@ export const loadAllAuthors = (): Promise<{ [key: string]: Author }> => {
 export const loadAuthors = (
   authorIds: string[]
 ): Promise<{ [key: string]: Author }> => {
+  'use client'
   return new Promise((resolve, reject) => {
     if (typeof Worker !== 'undefined') {
       const worker = new Worker(
diff --git a/src/app/document/view/[slug]/DocumentViewer.tsx b/src/app/document/view/[slug]/DocumentViewer.tsx
index e2a1eae..6cc1e09 100644
--- a/src/app/document/view/[slug]/DocumentViewer.tsx
+++ b/src/app/document/view/[slug]/DocumentViewer.tsx
@@ -1,4 +1,4 @@
-import { documents } from '@/app/db/data'
+'use client'
 import { Zilla_Slab } from 'next/font/google'
 import { epoch2datestring } from '@/app/utils/epoch2datestring'
 import {
@@ -12,16 +12,26 @@ import { ItemBadge, Status } from '@/app/components/Badges'
 import { notFound } from 'next/navigation'
 import VersionChooser from './VersionChooser'
 import crypto from 'crypto'
-import loadingStyles from './loading.module.css'
 import { Suspense } from 'react'
+import { loadDocument } from '@/app/db/loaders'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
 const DocumentViewer = ({ slug }: Readonly<{ slug: string }>) => {
-  const doc = documents[slug]
+  const { data, error } = useSuspenseQuery({
+    queryKey: [slug],
+    queryFn: () => {
+      const data = loadDocument(slug)
+      return data
+    },
+  })
+  if (error) throw error
+  let doc = data
+  // const doc = documents[slug]
   const { manifest, abstract, citation } = doc
 
-  if (!manifest) return notFound()
+  // if (!manifest) return notFound()
   const {
     title,
     authors,
diff --git a/src/app/document/view/[slug]/VersionChooser.tsx b/src/app/document/view/[slug]/VersionChooser.tsx
index e40e7cc..95d23be 100644
--- a/src/app/document/view/[slug]/VersionChooser.tsx
+++ b/src/app/document/view/[slug]/VersionChooser.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { Document } from '@/app/db/data'
 import Link from 'next/link'
 import { loadAuthors } from '@/app/db/loaders'
@@ -19,10 +19,6 @@ const VersionChooser = ({
   })
   if (error) throw error
 
-  useEffect(() => {
-    console.log(data)
-  }, [data])
-
   const { file } = doc
   const { authors, latest } = doc.manifest
   const date = epoch2date(doc.manifest.dates[doc.manifest.dates.length - 1])
diff --git a/src/app/document/view/[slug]/page.tsx b/src/app/document/view/[slug]/page.tsx
index 6905223..2307200 100644
--- a/src/app/document/view/[slug]/page.tsx
+++ b/src/app/document/view/[slug]/page.tsx
@@ -1,13 +1,18 @@
+'use client'
 import DocumentViewer from './DocumentViewer'
-import { documents } from '@/app/db/data'
+import ErrorBoundary from '@/app/utils/ErrorBoundary'
 
-export function generateStaticParams() {
-  const docsList = Object.keys(documents)
-  return docsList.map((doc) => ({ doc }))
-}
+// export function generateStaticParams() {
+//   const docsList = Object.keys(documents)
+//   return docsList.map((doc) => ({ doc }))
+// }
 
 export default function Page({
   params,
 }: Readonly<{ params: { slug: string } }>) {
-  return <DocumentViewer slug={params.slug} />
+  return (
+    <ErrorBoundary>
+      <DocumentViewer slug={params.slug} />
+    </ErrorBoundary>
+  )
 }