diff --git a/components/Doc.vue b/components/Doc.vue
index c8baa8f5..7cf44a10 100644
--- a/components/Doc.vue
+++ b/components/Doc.vue
@@ -26,15 +26,9 @@
 </template>
 
 <script>
-import { micromark } from 'micromark'
-import { gfm, gfmHtml } from 'micromark-extension-gfm'
 import moment from 'moment'
 import CoreDivider from '#root/components/CoreDivider.vue'
-
-import {
-  DISCARD_DOCUMENT,
-  RESTORE_DOCUMENT,
-} from '/src/store/actions.js';
+import { DISCARD_DOCUMENT, RESTORE_DOCUMENT } from '#root/src/store/actions'
 
 export default {
   components: {
diff --git a/components/DocList.vue b/components/DocList.vue
index f98e9f96..42cf790b 100644
--- a/components/DocList.vue
+++ b/components/DocList.vue
@@ -53,10 +53,7 @@
 <script>
 import Doc from '#root/components/Doc.vue'
 import Tag from '#root/components/Tag.vue'
-
-import {
-  MERGE_DOCUMENTS,
-} from '/src/store/actions.js'
+import { MERGE_DOCUMENTS } from '#root/src/store/actions'
 
 const REGEX_QUERY = /^\/(?<regex>.+)\/(?<flags>[a-z]*)$/s
 
diff --git a/components/DocMeta.vue b/components/DocMeta.vue
new file mode 100644
index 00000000..15da25a0
--- /dev/null
+++ b/components/DocMeta.vue
@@ -0,0 +1,250 @@
+<template>
+  <CoreScrollable class="meta p-4 md:p-2">
+    <div class="flex flex-col flex-grow">
+      <CoreLink v-if="hasHistory" :to="{ path: `/docs/${doc.id}/versions` }" class="sidebar-link w-full">
+        <HistoryIcon class="w-5" />
+        <span class="ml-6 md:ml-3 flex-grow text-left">History ({{ docVersions.length }})</span>
+      </CoreLink>
+      <div v-if="docVersion" class="flex flex-col flex-grow">
+        <CoreLink @click="restoreDocVersion" :to="{ path: `/docs/${doc.id}` }" class="sidebar-link w-full">
+          <HistoryIcon class="w-5" />
+          <span class="ml-6 md:ml-3 flex-grow text-left">Restore Version</span>
+        </CoreLink>
+      </div>
+      <div v-else-if="doc" class="flex flex-col flex-grow">
+        <div>
+          <button @click.stop="duplicateDocument" class="sidebar-link w-full">
+            <DuplicateIcon class="w-5" />
+            <span class="ml-6 md:ml-3 flex-grow text-left">Duplicate</span>
+          </button>
+          <DiscardableAction v-if="doc.id" :discardedAt="doc.discardedAt" :onDiscard="discardDocument" :onRestore="restoreDocument" class="sidebar-link w-full"></DiscardableAction>
+          <button v-if="hasCodeblocks" @click="openSandbox" class="sidebar-link w-full">
+            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+            </svg>
+            <span class="ml-6 md:ml-3 flex-grow text-left">Create Sandbox</span>
+          </button>
+          <div>
+            <div v-if="doc.public">
+              <button @click="restrictDocument" class="sidebar-link w-full">
+                <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+                <span class="ml-6 md:ml-3 flex-grow text-left">Make Private</span>
+              </button>
+              <button @click="copyPublicUrl" class="sidebar-link w-full">
+                <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                </svg>
+                <span class="ml-6 md:ml-3 flex-grow text-left">Copy Link</span>
+              </button>
+              <input ref="link" :value="publicUrl" type="text" class="form-text w-full mb-2" readonly data-test-public-url>
+            </div>
+            <div v-else class="mb-2">
+              <button @click="shareDocument" class="sidebar-link w-full" data-test-share-doc>
+                <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
+                </svg>
+                <span class="ml-6 md:ml-3 flex-grow text-left">Make Public</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="mt-4">
+          <TagLink v-for="tag in doc.tags" :key="tag" :tag="tag" class="sidebar-link" />
+        </div>
+        <div class="mt-4">
+          <DocLink v-for="reference in references" :key="reference.id" :doc="reference" class="sidebar-link" />
+        </div>
+        <div class="mt-4">
+          <div v-for="task in doc.tasks" class="flex items-center px-3 py-2 my-1 md:px-2 md:py-1">
+            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="flex-grow overflow-hidden truncate ml-3">{{ task }}</span>
+          </div>
+        </div>
+        <div class="flex flex-col justify-end flex-grow px-3 md:p-2 mt-4 mb-3 md:mb-1">
+          <div v-if="doc.updatedAt">
+            <small class="text-gray-700">Last Saved</small>
+            <div class="capitalize pt-2 md:pt-1">{{ savedAt }}</div>
+          </div>
+          <div v-if="doc.createdAt" class="mt-3 md:mt-2">
+            <small class="text-gray-700">Created</small>
+            <div class="pt-2 md:pt-1">{{ createdAt }}</div>
+          </div>
+          <div v-if="doc.updatedAt" class="mt-3 md:mt-2">
+            <small class="text-gray-700">Updated</small>
+            <div class="pt-2 md:pt-1">{{ updatedAt }}</div>
+          </div>
+          <div v-if="doc.discardedAt" class="mt-3 md:mt-2">
+            <small class="text-gray-700">Discarded</small>
+            <div class="pt-2 md:pt-1">{{ discardedAt }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </CoreScrollable>
+</template>
+
+<script>
+import { TrashIcon as DiscardIcon, DocumentDuplicateIcon as DuplicateIcon, ClockIcon as HistoryIcon, LockClosedIcon as PrivateIcon, LockOpenIcon as PublicIcon } from '@heroicons/vue/24/outline'
+import moment from 'moment'
+import { useStore } from 'vuex'
+import DiscardableAction from '#root/components/DiscardableAction.vue'
+import DocLink from '#root/components/DocLink.vue'
+import TagLink from '#root/components/TagLink.vue'
+import CodeSandbox from '#root/src/common/code_sandbox'
+import { parseCodeblocks, parseReferences } from '#root/src/common/parsers'
+import Doc from '#root/src/models/doc'
+
+import {
+  DISCARD_DOCUMENT,
+  DUPLICATE_DOCUMENT,
+  RESTORE_DOCUMENT,
+  RESTRICT_DOCUMENT,
+  SHARE_DOCUMENT,
+  SET_RIGHT_SIDEBAR_VISIBILITY,
+} from '#root/src/store/actions'
+
+export default {
+  components: {
+    DiscardIcon,
+    DiscardableAction,
+    DocLink,
+    DuplicateIcon,
+    HistoryIcon,
+    PrivateIcon,
+    PublicIcon,
+    TagLink,
+  },
+  setup() {
+    const store = useStore()
+    const { doc } = useDocs()
+    const { docVersion, docVersions } = useDocVersions(doc)
+    const hasHistory = computed(() => docVersions.value.length > 0)
+
+    const restoreDocVersion = () => {
+      store.commit('EDIT_DOCUMENT', new Doc({ ...doc.value, text: docVersion.value.text }))
+    }
+
+    return {
+      docVersion,
+      docVersions,
+      hasHistory,
+      restoreDocVersion,
+    }
+  },
+  data() {
+    return {
+      now: moment(),
+      ticker: null,
+    }
+  },
+  computed: {
+    codeblocks() {
+      return parseCodeblocks(this.doc.text)
+    },
+    createdAt() {
+      if (this.$route.params.docId) {
+        return moment(this.doc.createdAt).format('ddd, MMM Do, YYYY [at] h:mm A')
+      }
+
+      return 'Not yet created'
+    },
+    discardedAt() {
+      return moment(this.doc.discardedAt).format('ddd, MMM Do, YYYY [at] h:mm A')
+    },
+    doc() {
+      return this.$store.getters.decrypted.find((doc) => doc.id === this.$route.params.docId)
+    },
+    hasCodeblocks() {
+      return this.codeblocks.length > 0
+    },
+    publicUrl() {
+      const path = this.$router.resolve({ path: `/public/${this.doc.id}` }).href
+
+      return `${location.protocol}//${location.host}${path}`
+    },
+    references() {
+      const references = parseReferences(this.doc.text)
+
+      return this.$store.getters.kept.filter((doc) => {
+        return references.includes(doc.id)
+      })
+    },
+    savedAt() {
+      if (this.$route.params.docId) {
+        if (this.now.diff(this.doc.updatedAt, 'seconds') < 5) {
+          return 'just now'
+        }
+        else {
+          return `${moment(this.doc.updatedAt).from(this.now, true)} ago`
+        }
+      }
+
+      return 'Not yet saved'
+    },
+    updatedAt() {
+      if (this.$route.params.docId) {
+        return moment(this.doc.updatedAt).format('ddd, MMM Do, YYYY [at] h:mm A')
+      }
+
+      return 'Not yet updated'
+    },
+  },
+  methods: {
+    async copyPublicUrl() {
+      // copy link to clipboard
+      this.$refs.link.select()
+      document.execCommand('copy')
+    },
+    async discardDocument() {
+      this.$store.dispatch(DISCARD_DOCUMENT, { id: this.doc.id })
+
+      this.$router.push({ path: '/docs/new' })
+    },
+    async duplicateDocument() {
+      const newDocId = await this.$store.dispatch(DUPLICATE_DOCUMENT, { id: this.doc.id })
+
+      this.$router.push({ path: `/docs/${newDocId}` })
+    },
+    async openSandbox() {
+      const files = this.codeblocks.reduce((agg, codeblock, index) => {
+        const filename = codeblock.filename || [index, (codeblock.language || 'txt')].join('.')
+
+        return {
+          ...agg,
+          [filename]: {
+            content: codeblock.code,
+          },
+        }
+      }, {})
+
+      CodeSandbox.create(files).then(sandbox_id => CodeSandbox.open(sandbox_id))
+    },
+    async restoreDocument() {
+      this.$store.dispatch(RESTORE_DOCUMENT, { id: this.doc.id })
+    },
+    async restrictDocument() {
+      this.$store.dispatch(RESTRICT_DOCUMENT, { id: this.doc.id })
+    },
+    async shareDocument() {
+      this.$store.dispatch(SHARE_DOCUMENT, { id: this.doc.id })
+    },
+    async toggleMeta() {
+      this.$store.dispatch(SET_RIGHT_SIDEBAR_VISIBILITY, !this.$store.state.showRightSidebar)
+    },
+  },
+  async beforeUnmount() {
+    clearInterval(this.ticker)
+  },
+  async mounted() {
+    this.mounted = true
+
+    this.ticker = setInterval(() => {
+      this.now = moment()
+    }, 5000)
+  },
+}
+</script>
diff --git a/components/SettingsEditor.vue b/components/SettingsEditor.vue
index 156b8a4f..30d5455c 100644
--- a/components/SettingsEditor.vue
+++ b/components/SettingsEditor.vue
@@ -110,7 +110,7 @@ import {
   SET_EDITOR_SPELLCHECK,
   SET_EDITOR_TAB_SIZE,
   SET_EDITOR_TOOLBAR,
-} from '/src/store/modules/settings.js'
+} from '#root/src/store/modules/settings'
 
 export default {
   computed: {
diff --git a/components/settings/Encryption.vue b/components/settings/Encryption.vue
index dd005f2e..de3225d3 100644
--- a/components/settings/Encryption.vue
+++ b/components/settings/Encryption.vue
@@ -51,14 +51,9 @@
 </template>
 
 <script>
-import { exportKeys, generateKeys } from '#root/src/common/crypto/asymmetric.js';
-
-import { TOUCH_DOCUMENT } from '#root/src/store/actions.js';
-
-import {
-  SET_CRYPTO_ENABLED,
-  SET_CRYPTO_KEYS,
-} from '/src/store/modules/settings.js';
+import { exportKeys, generateKeys } from '#root/src/common/crypto/asymmetric'
+import { TOUCH_DOCUMENT } from '#root/src/store/actions'
+import { SET_CRYPTO_ENABLED, SET_CRYPTO_KEYS } from '#root/src/store/modules/settings'
 
 export default {
   data() {
diff --git a/composables/index.ts b/composables/index.ts
index 96de70f5..c05275a8 100644
--- a/composables/index.ts
+++ b/composables/index.ts
@@ -1,5 +1,6 @@
 export * from './useAppearance'
 export * from './useAuth'
+export * from './useDatabase'
 export * from './useLayout'
 export * from './usePinnedDocs'
 export * from './useTiers'
diff --git a/composables/useDatabase.ts b/composables/useDatabase.ts
new file mode 100644
index 00000000..024ebb6d
--- /dev/null
+++ b/composables/useDatabase.ts
@@ -0,0 +1,45 @@
+import { tryOnScopeDispose } from '@vueuse/core'
+import { liveQuery } from 'dexie'
+import { type Subscription } from 'rxjs'
+import { type Ref, ref } from 'vue'
+import { db } from '#root/utils/database'
+
+export const useDatabase = () => {
+  const observe = <T>(callback: () => T) => {
+    return useObservable<T>(liveQuery<T>(callback) as any)
+  }
+
+  return {
+    db,
+    observe,
+  }
+}
+
+type QueryReturnType<T, I = undefined> = { result: Ref<T | I> }
+
+export function useQuery<T>(callback: () => Promise<T>): QueryReturnType<T>
+export function useQuery<T>(callback: () => Promise<T>, initialValue: T): QueryReturnType<T, T>
+export function useQuery<T>(callback: () => Promise<T>, initialValue?: T) {
+  const result = initialValue ? ref<T>(initialValue) : ref<T>()
+  const subscription = ref<Subscription>()
+
+  watch(callback, () => {
+    const observable = liveQuery<T>(callback)
+
+    subscription.value?.unsubscribe()
+    subscription.value = observable.subscribe({
+      next: (value) => {
+        result.value = value
+      },
+      error: (error) => {
+        console.error(error)
+      },
+    }) as any
+  }, { immediate: true })
+
+  tryOnScopeDispose(() => subscription.value?.unsubscribe())
+
+  return {
+    result,
+  }
+}
diff --git a/composables/useDocVersions.ts b/composables/useDocVersions.ts
new file mode 100644
index 00000000..5f975ce3
--- /dev/null
+++ b/composables/useDocVersions.ts
@@ -0,0 +1,12 @@
+export const useDocVersions = () => {
+  const router = useRouter()
+  const { db } = useDatabase()
+  const { doc } = useDocs()
+  const { result: docVersions } = useQuery(() => db.docs.where({ parentId: doc.value?.id || '' }).reverse().sortBy('updatedAt'), [])
+  const docVersion = computed(() => docVersions.value.find(version => version.id === router.currentRoute.value.params.versionId))
+
+  return {
+    docVersion,
+    docVersions,
+  }
+}
diff --git a/composables/useDocs.ts b/composables/useDocs.ts
index c2dee47f..8be6576b 100644
--- a/composables/useDocs.ts
+++ b/composables/useDocs.ts
@@ -4,8 +4,8 @@ import type Doc from '#root/src/models/doc'
 export const useDocs = () => {
   const store = useStore()
   const router = useRouter()
-  const docs = computed(() => store.getters.decrypted)
-  const doc = computed(() => docs.value.find((doc: Doc) => doc.id === router.currentRoute.value.params.docId))
+  const docs = computed<Doc[]>(() => store.getters.decrypted)
+  const doc = computed<Doc | undefined>(() => docs.value.find((doc: Doc) => doc.id === router.currentRoute.value.params.docId))
 
   return {
     doc,
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index 99d2b995..349ccdde 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -45,16 +45,21 @@ export default defineComponent({
     const store = useStore()
     const router = useRouter()
     const { doc } = useDocs()
+    const { docVersion } = useDocVersions()
     const { showMenu, showMeta, toggleMenu, toggleMeta } = useLayout()
     const { pinnedDocs, unpinDoc } = usePinnedDocs()
     const { public: { discordInviteLink } } = useConfig()
     const modKey = computed(() => store.state.modKey)
     const mobile = computed(() => ['xs', 'sm'].includes(mq.current))
-    const isDoc = computed(() => router.currentRoute.value.name === 'docs-docId')
     const isNew = computed(() => router.currentRoute.value.path === '/docs/new')
+    const isMeta = computed(() => router.currentRoute.value.path.endsWith('/meta'))
 
     const handleQuickActionClose = () => {
       if (doc.value) {
+        if (docVersion.value) {
+          return router.push({ path: `/docs/${doc.value.id}/versions/${docVersion.value.id}` })
+        }
+
         return router.push({ path: `/docs/${doc.value.id}` })
       }
 
@@ -99,10 +104,11 @@ export default defineComponent({
     return {
       discordInviteLink,
       doc,
+      docVersion,
       handleLayoutChange,
       handleQuickActionClose,
       handleTabClose,
-      isDoc,
+      isMeta,
       isNew,
       isNuxt,
       mobile,
@@ -170,7 +176,17 @@ export default defineComponent({
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </CoreLink>
-          <CoreLink v-else-if="isDoc" :to="{ path: `/docs/${doc?.id}/meta` }" class="button-flat button-size-medium">
+          <button v-else-if="isMeta" @click="handleQuickActionClose" class="button-flat button-size-medium">
+            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+          <CoreLink v-else-if="docVersion" :to="{ path: `/docs/${doc?.id}/versions/${docVersion.id}/meta` }" class="button-flat button-size-medium">
+            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </CoreLink>
+          <CoreLink v-else-if="doc" :to="{ path: `/docs/${doc?.id}/meta` }" class="button-flat button-size-medium">
             <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
@@ -198,7 +214,7 @@ export default defineComponent({
         </section>
         <CoreDivider v-if="!mobile" :vertical="true" />
         <section v-if="!mobile" class="flex flex-grow flex-shrink gap-2 bg-gray-100 dark:bg-darkest px-2 min-w-0">
-          <CoreLink v-for="pinnedDoc in pinnedDocs" :key="pinnedDoc.id" :to="{ path: `/docs/${pinnedDoc.id}` }" class="core-button core-button-layer-1 flex flex-shrink justify-between min-w-[4rem] max-w-[20rem]" :class="{ 'bg-layer-2': isDoc && pinnedDoc.id === doc?.id }">
+          <CoreLink v-for="pinnedDoc in pinnedDocs" :key="pinnedDoc.id" :to="{ path: `/docs/${pinnedDoc.id}` }" class="core-button core-button-layer-1 flex flex-shrink justify-between min-w-[4rem] max-w-[20rem]" :class="{ 'bg-layer-2': pinnedDoc.id === doc?.id }">
             <span class="text-ellipsis overflow-hidden">{{ pinnedDoc.headers[0] || pinnedDoc.text.substring(0, 25) }}</span>
             <XMarkIcon @click.prevent.stop="() => handleTabClose(pinnedDoc.id)" class="w-4 transition hover:scale-125" />
           </CoreLink>
@@ -223,7 +239,7 @@ export default defineComponent({
         <CoreDivider v-if="(!mobile && showMenu)" :vertical="true" />
         <slot />
         <CoreDivider v-if="(!mobile && showMeta && doc)" :vertical="true" />
-        <TheRightSidebar v-if="(!mobile && showMeta && doc && isDoc)" class="hidden w-64 bg-gray-100 dark:bg-darkest md:flex flex-shrink-0" />
+        <TheRightSidebar v-if="(!mobile && showMeta && doc)" class="hidden w-64 bg-gray-100 dark:bg-darkest md:flex flex-shrink-0" />
       </section>
     </section>
   </div>
diff --git a/models/doc.ts b/models/doc.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/package.json b/package.json
index a0b87114..3207944f 100644
--- a/package.json
+++ b/package.json
@@ -44,13 +44,15 @@
     "@types/node": "^18.13.0",
     "@types/remarkable": "^2.0.3",
     "@vite-pwa/nuxt": "^0.0.4",
-    "@vueuse/core": "^9.9.0",
+    "@vueuse/core": "^9.10.0",
     "@vueuse/head": "^1.0.22",
     "@vueuse/nuxt": "^9.9.0",
+    "@vueuse/rxjs": "^9.10.0",
     "autoprefixer": "^10.4.13",
     "cypress": "^12.0.2",
     "cypress-network-idle": "^1.11.2",
     "deepmerge-ts": "^4.2.1",
+    "dexie": "^3.2.2",
     "micromark": "^3.1.0",
     "nuxt": "^3.2.0",
     "postcss": "^8.4.21",
diff --git a/pages/docs/[docId]/meta.vue b/pages/docs/[docId]/meta.vue
index 388e5a47..e74e790c 100644
--- a/pages/docs/[docId]/meta.vue
+++ b/pages/docs/[docId]/meta.vue
@@ -1,219 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
-  <CoreScrollable class="meta p-4 md:p-2">
-    <div class="flex flex-col flex-grow">
-      <div v-if="doc" class="flex flex-col flex-grow">
-        <div>
-          <button @click.stop="duplicateDocument" class="sidebar-link w-full">
-            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
-            </svg>
-            <span class="ml-6 md:ml-3 flex-grow text-left">Duplicate</span>
-          </button>
-          <DiscardableAction v-if="doc.id" :discardedAt="doc.discardedAt" :onDiscard="discardDocument" :onRestore="restoreDocument" class="sidebar-link w-full"></DiscardableAction>
-          <button v-if="hasCodeblocks" @click="openSandbox" class="sidebar-link w-full">
-            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-            </svg>
-            <span class="ml-6 md:ml-3 flex-grow text-left">Create Sandbox</span>
-          </button>
-          <div>
-            <div v-if="doc.public">
-              <button @click="restrictDocument" class="sidebar-link w-full">
-                <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-                <span class="ml-6 md:ml-3 flex-grow text-left">Make Private</span>
-              </button>
-              <button @click="copyPublicUrl" class="sidebar-link w-full">
-                <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
-                </svg>
-                <span class="ml-6 md:ml-3 flex-grow text-left">Copy Link</span>
-              </button>
-              <input ref="link" :value="publicUrl" type="text" class="form-text w-full mb-2" readonly data-test-public-url>
-            </div>
-            <div v-else class="mb-2">
-              <button @click="shareDocument" class="sidebar-link w-full" data-test-share-doc>
-                <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
-                </svg>
-                <span class="ml-6 md:ml-3 flex-grow text-left">Make Public</span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="mt-4">
-          <TagLink v-for="tag in doc.tags" :key="tag" :tag="tag" class="sidebar-link" />
-        </div>
-        <div class="mt-4">
-          <DocLink v-for="reference in references" :key="reference.id" :doc="reference" class="sidebar-link" />
-        </div>
-        <div class="mt-4">
-          <div v-for="task in doc.tasks" class="flex items-center px-3 py-2 my-1 md:px-2 md:py-1">
-            <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-            </svg>
-            <span class="flex-grow overflow-hidden truncate ml-3">{{ task }}</span>
-          </div>
-        </div>
-        <div class="flex flex-col justify-end flex-grow px-3 md:p-2 mt-4 mb-3 md:mb-1">
-          <div v-if="doc.updatedAt">
-            <small class="text-gray-700">Last Saved</small>
-            <div class="capitalize pt-2 md:pt-1">{{ savedAt }}</div>
-          </div>
-          <div v-if="doc.createdAt" class="mt-3 md:mt-2">
-            <small class="text-gray-700">Created</small>
-            <div class="pt-2 md:pt-1">{{ createdAt }}</div>
-          </div>
-          <div v-if="doc.updatedAt" class="mt-3 md:mt-2">
-            <small class="text-gray-700">Updated</small>
-            <div class="pt-2 md:pt-1">{{ updatedAt }}</div>
-          </div>
-          <div v-if="doc.discardedAt" class="mt-3 md:mt-2">
-            <small class="text-gray-700">Discarded</small>
-            <div class="pt-2 md:pt-1">{{ discardedAt }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </CoreScrollable>
+  <DocMeta />
 </template>
-
-<script>
-import moment from 'moment'
-
-import DiscardableAction from '#root/components/DiscardableAction.vue'
-import DocLink from '#root/components/DocLink.vue'
-import TagLink from '#root/components/TagLink.vue'
-
-import CodeSandbox from '#root/src/common/code_sandbox.js'
-import { parseCodeblocks, parseReferences } from '#root/src/common/parsers'
-
-import {
-  DISCARD_DOCUMENT,
-  DUPLICATE_DOCUMENT,
-  RESTORE_DOCUMENT,
-  RESTRICT_DOCUMENT,
-  SHARE_DOCUMENT,
-  SET_RIGHT_SIDEBAR_VISIBILITY,
-} from '/src/store/actions.js'
-
-export default {
-  components: {
-    DiscardableAction,
-    DocLink,
-    TagLink,
-  },
-  data() {
-    return {
-      now: moment(),
-      ticker: null,
-    }
-  },
-  computed: {
-    codeblocks() {
-      return parseCodeblocks(this.doc.text)
-    },
-    createdAt() {
-      if (this.$route.params.docId) {
-        return moment(this.doc.createdAt).format('ddd, MMM Do, YYYY [at] h:mm A')
-      }
-
-      return 'Not yet created'
-    },
-    discardedAt() {
-      return moment(this.doc.discardedAt).format('ddd, MMM Do, YYYY [at] h:mm A')
-    },
-    doc() {
-      return this.$store.getters.decrypted.find((doc) => doc.id === this.$route.params.docId)
-    },
-    hasCodeblocks() {
-      return this.codeblocks.length > 0
-    },
-    publicUrl() {
-      const path = this.$router.resolve({ path: `/public/${this.doc.id}` }).href
-
-      return `${location.protocol}//${location.host}${path}`
-    },
-    references() {
-      const references = parseReferences(this.doc.text)
-
-      return this.$store.getters.kept.filter((doc) => {
-        return references.includes(doc.id)
-      })
-    },
-    savedAt() {
-      if (this.$route.params.docId) {
-        if (this.now.diff(this.doc.updatedAt, 'seconds') < 5) {
-          return 'just now'
-        }
-        else {
-          return `${moment(this.doc.updatedAt).from(this.now, true)} ago`
-        }
-      }
-
-      return 'Not yet saved'
-    },
-    updatedAt() {
-      if (this.$route.params.docId) {
-        return moment(this.doc.updatedAt).format('ddd, MMM Do, YYYY [at] h:mm A')
-      }
-
-      return 'Not yet updated'
-    },
-  },
-  methods: {
-    async copyPublicUrl() {
-      // copy link to clipboard
-      this.$refs.link.select()
-      document.execCommand('copy')
-    },
-    async discardDocument() {
-      this.$store.dispatch(DISCARD_DOCUMENT, { id: this.doc.id })
-
-      this.$router.push({ path: '/docs/new' })
-    },
-    async duplicateDocument() {
-      const newDocId = await this.$store.dispatch(DUPLICATE_DOCUMENT, { id: this.doc.id })
-
-      this.$router.push({ path: `/docs/${newDocId}` })
-    },
-    async openSandbox() {
-      const files = this.codeblocks.reduce((agg, codeblock, index) => {
-        const filename = codeblock.filename || [index, (codeblock.language || 'txt')].join('.')
-
-        return {
-          ...agg,
-          [filename]: {
-            content: codeblock.code,
-          },
-        }
-      }, {})
-
-      CodeSandbox.create(files).then(sandbox_id => CodeSandbox.open(sandbox_id))
-    },
-    async restoreDocument() {
-      this.$store.dispatch(RESTORE_DOCUMENT, { id: this.doc.id })
-    },
-    async restrictDocument() {
-      this.$store.dispatch(RESTRICT_DOCUMENT, { id: this.doc.id })
-    },
-    async shareDocument() {
-      this.$store.dispatch(SHARE_DOCUMENT, { id: this.doc.id })
-    },
-    async toggleMeta() {
-      this.$store.dispatch(SET_RIGHT_SIDEBAR_VISIBILITY, !this.$store.state.showRightSidebar)
-    },
-  },
-  async beforeUnmount() {
-    clearInterval(this.ticker)
-  },
-  async mounted() {
-    this.mounted = true
-
-    this.ticker = setInterval(() => {
-      this.now = moment()
-    }, 5000)
-  },
-}
-</script>
diff --git a/pages/docs/[docId]/versions/[versionId]/index.vue b/pages/docs/[docId]/versions/[versionId]/index.vue
new file mode 100644
index 00000000..f7b1b2a0
--- /dev/null
+++ b/pages/docs/[docId]/versions/[versionId]/index.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { type Ref, defineComponent, inject } from 'vue'
+import { useStore } from 'vuex'
+import Editor from '#root/components/Editor.vue'
+import Doc from '#root/src/models/doc'
+
+const formatTags = (tags: string[], delimiter = ', ') => {
+  return tags.map((tag) => `#${tag}`).join(delimiter)
+}
+
+export default defineComponent({
+  setup() {
+    const appearance = inject<Ref<string>>('appearance', ref('auto'))
+    const editor = ref()
+    const router = useRouter()
+    const store = useStore()
+    const placeholder = new Doc({ text: formatTags(store.state.context.tags, ' ') })
+    const settings = computed(() => store.state.settings.editor)
+    const versionId = computed(() => router.currentRoute.value.params.versionId as string)
+    const { docVersions } = useDocVersions()
+    const docVersion = computed(() => docVersions.value.find(d => d.id === versionId.value) || placeholder)
+
+    return {
+      appearance: appearance.value === 'october' ? 'dark' : appearance.value,
+      docVersion,
+      editor,
+      placeholder,
+      settings,
+    }
+  },
+})
+</script>
+
+<template>
+  <Editor
+    ref="editable"
+    :appearance="appearance"
+    :doc="docVersion"
+    :key="docVersion?.id"
+    :ro="true"
+    :settings="settings"
+  />
+</template>
diff --git a/pages/docs/[docId]/versions/[versionId]/meta.vue b/pages/docs/[docId]/versions/[versionId]/meta.vue
new file mode 100644
index 00000000..81ba2f87
--- /dev/null
+++ b/pages/docs/[docId]/versions/[versionId]/meta.vue
@@ -0,0 +1,5 @@
+<template>
+  <DocMeta />
+</template>
+
+<script lang="ts" setup></script>
diff --git a/pages/docs/[docId]/versions/index.vue b/pages/docs/[docId]/versions/index.vue
new file mode 100644
index 00000000..fad44f5e
--- /dev/null
+++ b/pages/docs/[docId]/versions/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <CorePage>
+    <div class="grid gap-4 grid-cols-1">
+      <CoreLink :to="{ path: `/docs/${doc?.id}` }" class="relative">
+        <Doc v-bind="doc" />
+        <span class="absolute p-1 right-2 rounded text-sm top-2 underline">Current Version</span>
+      </CoreLink>
+      <CoreLink v-for="docVersion in docVersions" :key="docVersion.id" :to="{ path: `/docs/${doc?.id}/versions/${docVersion.id}` }">
+        <Doc v-bind="docVersion" />
+      </CoreLink>
+    </div>
+  </CorePage>
+</template>
+
+<script lang="ts" setup>
+const { doc } = useDocs()
+const { docVersions } = useDocVersions()
+
+useHead({
+  title: 'Doc History',
+})
+</script>
diff --git a/pages/menu.vue b/pages/menu.vue
index c292f7b4..b34b3ea5 100644
--- a/pages/menu.vue
+++ b/pages/menu.vue
@@ -136,14 +136,10 @@ import ModK from '#root/components/ModK.vue'
 import ModKKey from '#root/components/ModKKey.vue'
 import TagLink from '#root/components/TagLink.vue'
 import TheLogo from '#root/components/TheLogo.vue'
+import { DEACTIVATE_CONTEXT, SET_CONTEXT_TAGS } from '#root/src/store/actions'
 import { useFiles } from '#root/src/stores/useFiles'
 import { AsyncIterable } from '#root/src/utils/iterables'
 
-import {
-  DEACTIVATE_CONTEXT,
-  SET_CONTEXT_TAGS,
-} from '/src/store/actions.js'
-
 export default {
   components: {
     AccountIcon,
diff --git a/pages/notepad.vue b/pages/notepad.vue
index 2cb278ca..d3dbc2a7 100644
--- a/pages/notepad.vue
+++ b/pages/notepad.vue
@@ -6,11 +6,7 @@
 import moment from 'moment'
 import EditorPage from '#root/pages/docs/[docId]/index.vue'
 import Doc from '#root/src/models/doc.js'
-
-import {
-  DOCUMENTS_LOADED,
-  EDIT_DOCUMENT,
-} from '/src/store/actions.js'
+import { DOCUMENTS_LOADED, EDIT_DOCUMENT } from '#root/src/store/actions'
 
 export default {
   components: {
diff --git a/pages/workspaces.vue b/pages/workspaces.vue
index 3c4d44c2..543988c4 100644
--- a/pages/workspaces.vue
+++ b/pages/workspaces.vue
@@ -58,15 +58,8 @@ import { TrashIcon, Square2StackIcon as WorkspaceIcon } from '@heroicons/vue/24/
 import { nanoid } from 'nanoid'
 import CoreButton from '#root/components/CoreButton.vue'
 import Tag from '#root/components/Tag.vue'
-
-import {
-  SET_CONTEXT_TAGS,
-} from '/src/store/actions.js';
-
-import {
-  ADD_CONTEXT,
-  REMOVE_CONTEXT,
-} from '/src/store/modules/contexts.js'
+import { SET_CONTEXT_TAGS } from '#root/src/store/actions'
+import { ADD_CONTEXT, REMOVE_CONTEXT } from '#root/src/store/modules/contexts'
 
 export default {
   components: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 19e6382f..72516202 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,14 +14,16 @@ specifiers:
   '@types/node': ^18.13.0
   '@types/remarkable': ^2.0.3
   '@vite-pwa/nuxt': ^0.0.4
-  '@vueuse/core': ^9.9.0
+  '@vueuse/core': ^9.10.0
   '@vueuse/head': ^1.0.22
   '@vueuse/nuxt': ^9.9.0
+  '@vueuse/rxjs': ^9.10.0
   autoprefixer: ^10.4.13
   cypress: ^12.0.2
   cypress-network-idle: ^1.11.2
   deepmerge: ^4.2.2
   deepmerge-ts: ^4.2.1
+  dexie: ^3.2.2
   file-saver: ^2.0.5
   firebase: ^9.17.1
   force-graph: ^1.43.0
@@ -89,13 +91,15 @@ devDependencies:
   '@types/node': 18.13.0
   '@types/remarkable': 2.0.3
   '@vite-pwa/nuxt': 0.0.4_vite-plugin-pwa@0.14.1
-  '@vueuse/core': 9.9.0
+  '@vueuse/core': 9.12.0
   '@vueuse/head': 1.0.25
   '@vueuse/nuxt': 9.9.0_nuxt@3.2.0
+  '@vueuse/rxjs': 9.12.0
   autoprefixer: 10.4.13_postcss@8.4.21
   cypress: 12.0.2
   cypress-network-idle: 1.11.2
   deepmerge-ts: 4.2.1
+  dexie: 3.2.3
   nuxt: 3.2.0_dq2illufn2sdyxstnqbjq3sy6i
   postcss: 8.4.21
   remarkable-front-matter: 1.0.1-beta.1
@@ -3746,6 +3750,18 @@ packages:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
     dev: true
 
+  /@vueuse/core/9.12.0:
+    resolution: {integrity: sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.12.0
+      '@vueuse/shared': 9.12.0
+      vue-demi: 0.13.1
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@vueuse/core/9.9.0:
     resolution: {integrity: sha512-JdDb7TrE0imZnwBhMF4+0PCJqGD3AxzH8S2sfk54P0rqvklK+EAtAR/mPb1HwV/JPujQFQJhghQ190Yq03YpVw==}
     dependencies:
@@ -3781,6 +3797,10 @@ packages:
       vue: 3.2.47
     dev: true
 
+  /@vueuse/metadata/9.12.0:
+    resolution: {integrity: sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==}
+    dev: true
+
   /@vueuse/metadata/9.9.0:
     resolution: {integrity: sha512-pgxsUJv/d7IjKpLeB6TthggEsaBwM3ffc5jPrr5TmxAm/fup0mGR5VTzrdA/PSx85tpb+CIvP92D+55qBNc8ag==}
     dev: true
@@ -3803,6 +3823,27 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/rxjs/9.12.0:
+    resolution: {integrity: sha512-slzucPMzFhVkurXiLZ8YusyfHrkmwB3MFm3vKo1qrStpho3jof0mwDAJJE5xsucBxrVBSBbLeiPxCehMBj1tIQ==}
+    peerDependencies:
+      rxjs: '>=6.0.0'
+    dependencies:
+      '@vueuse/shared': 9.12.0
+      vue-demi: 0.13.1
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/shared/9.12.0:
+    resolution: {integrity: sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==}
+    dependencies:
+      vue-demi: 0.13.1
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@vueuse/shared/9.9.0:
     resolution: {integrity: sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==}
     dependencies:
@@ -5737,6 +5778,11 @@ packages:
       minimist: 1.2.7
     dev: true
 
+  /dexie/3.2.3:
+    resolution: {integrity: sha512-iHayBd4UYryDCVUNa3PMsJMEnd8yjyh5p7a+RFeC8i8n476BC9wMhVvqiImq5zJZJf5Tuer+s4SSj+AA3x+ZbQ==}
+    engines: {node: '>=6.0'}
+    dev: true
+
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: true
diff --git a/src/models/container.ts b/src/models/container.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/models/doc.js b/src/models/doc.js
index 6ae3c8d9..4501fac9 100644
--- a/src/models/doc.js
+++ b/src/models/doc.js
@@ -25,6 +25,10 @@ class Doc {
     this.ownerId = attributes.ownerId || null
     this.syncedAt = attributes.syncedAt || null
     this.public = attributes.public || false
+
+    // version params
+    this.originalId = attributes.originalId || null
+    this.parentId = attributes.parentId || null
   }
 
   discard() {
@@ -100,11 +104,17 @@ export const pack = async (doc, { preferEncryption = null, publicKey = null }) =
 
 export const unpack = async (packed, { privateKey }) => {
   try {
-    if (privateKey && packed.encrypted) {
-      const text = await decrypt({ cipher: packed.text, cipherKey: packed.textKey, iv: packed.iv, privateKey })
+    const prepared = {
+      ...packed,
+      id: packed.id || packed.clientId,
+      textKey: packed.textKey || packed.dataKey,
+    }
+
+    if (privateKey && prepared.encrypted) {
+      const text = await decrypt({ cipher: prepared.text, cipherKey: prepared.textKey, iv: prepared.iv, privateKey })
 
       return new Doc(
-        Object.assign({}, packed, {
+        Object.assign({}, prepared, {
           encrypted: false,
           text: text,
         })
diff --git a/src/store.js b/src/store.js
index 4f04f48a..eadac83b 100644
--- a/src/store.js
+++ b/src/store.js
@@ -29,7 +29,7 @@ import {
   SET_ONLINE,
   SET_RIGHT_SIDEBAR_VISIBILITY,
   SET_SHOW_WELCOME,
-} from '/src/store/actions'
+} from '#root/src/store/actions'
 
 export const store = createStore({
   state() {
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index 35a5a42c..cdfe5f6e 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -1,8 +1,5 @@
 import { getAuth } from 'firebase/auth'
-
-import {
-  SIGN_OUT,
-} from '/src/store/actions'
+import { SIGN_OUT } from '#root/src/store/actions'
 
 export const SET_SUBSCRIPTION = 'SET_SUBSCRIPTION'
 export const SET_USER = 'SET_USER'
diff --git a/src/store/modules/documents.js b/src/store/modules/documents.js
index 984b251b..b9470cfe 100644
--- a/src/store/modules/documents.js
+++ b/src/store/modules/documents.js
@@ -15,7 +15,7 @@ import {
   SET_DOCUMENT,
   SHARE_DOCUMENT,
   TOUCH_DOCUMENT,
-} from '/src/store/actions'
+} from '#root/src/store/actions'
 
 const findDoc = (state, id) => {
   // only return docs that are decrypted
diff --git a/src/store/modules/sync.js b/src/store/modules/sync.js
index 2199948d..68dcabab 100644
--- a/src/store/modules/sync.js
+++ b/src/store/modules/sync.js
@@ -1,11 +1,7 @@
 import { unwrap } from '#root/src/common/vue'
 import { addDoc, fetchDocs, updateDoc } from '#root/src/firebase/firestore'
 import { pack, unpack } from '#root/src/models/doc'
-
-import {
-  MERGE_DOCUMENT,
-  SYNC,
-} from '/src/store/actions'
+import { MERGE_DOCUMENT, SYNC } from '#root/src/store/actions'
 
 // local actions
 const PULL_DOCUMENT = 'PULL_DOCUMENT'
diff --git a/src/store/plugins/caching/contexts.js b/src/store/plugins/caching/contexts.js
index 111418a7..edfd0ac1 100644
--- a/src/store/plugins/caching/contexts.js
+++ b/src/store/plugins/caching/contexts.js
@@ -7,7 +7,7 @@ import {
   ADD_CONTEXT,
   LOAD_CONTEXTS,
   REMOVE_CONTEXT,
-} from '/src/store/modules/contexts'
+} from '#root/src/store/modules/contexts'
 
 import { SETTINGS_LOADED } from '#root/src/store/modules/settings'
 
diff --git a/src/store/plugins/caching/documents.js b/src/store/plugins/caching/documents.js
index 0ed02b88..01fff2d9 100644
--- a/src/store/plugins/caching/documents.js
+++ b/src/store/plugins/caching/documents.js
@@ -1,9 +1,9 @@
 import localforage from 'localforage'
-
+import moment from 'moment'
+import { useDatabase } from '#root/composables/useDatabase'
 import Debouncer from '#root/src/common/debouncer'
-
-import { pack, unpack } from '#root/src/models/doc'
-
+import Doc, { pack, unpack } from '#root/src/models/doc'
+import { SETTINGS_LOADED } from '#root/src/store/modules/settings'
 import {
   ADD_DOCUMENT,
   DISCARD_DOCUMENT,
@@ -15,13 +15,11 @@ import {
   RESTRICT_DOCUMENT,
   SHARE_DOCUMENT,
   TOUCH_DOCUMENT,
-} from '/src/store/actions'
+} from '#root/src/store/actions'
 
-import { SETTINGS_LOADED } from '#root/src/store/modules/settings'
+const name = 'firebase/documents'
 
-const cache = localforage.createInstance({
-  name: 'firebase/documents',
-})
+export const mainStore = localforage.createInstance({ name })
 
 const debouncer = new Debouncer(800)
 
@@ -44,20 +42,64 @@ export default (store) => {
 
         if (found) {
           debouncer.debounce(found.id, async () => {
+            // Keep docs versioned on the client (maybe under a config option).
+            try {
+              // fetch the original doc
+              const original = await mainStore.getItem(found.id)
+
+              if (original) {
+                // unpack the original doc
+                const originalUnpacked = await unpack(original, { privateKey: state.settings.crypto.privateKey })
+                // store the duplicate in historyStore
+                const { db } = useDatabase()
+                // find latest version
+                const [latestVersion, ..._otherVersions] = await db.docs.where({ parentId: originalUnpacked.id }).reverse().sortBy('touchedAt')
+                const unpackedLatestVersion = latestVersion && await unpack(latestVersion, { privateKey: state.settings.crypto.privateKey })
+                const comparisonTime = unpackedLatestVersion?.touchedAt || originalUnpacked.createdAt
+                const isAfterVersionThreshold = moment(found.touchedAt).isAfter(moment(comparisonTime).add(5, 'minutes'))
+                const isSync = found.syncedAt && (!originalUnpacked.syncedAt || moment(originalUnpacked.syncedAt).isBefore(moment(found.syncedAt)))
+
+                if (isAfterVersionThreshold || isSync) {
+                  // create a copy of the original with a new id
+                  const backup = new Doc({ ...originalUnpacked, id: undefined })
+
+                  // create the relation (e.g. parentId, originalId, etc)
+                  backup.parentId = found.id
+                  backup.touch()
+
+                  // pack the backup
+                  const docVersion = await pack(backup, {
+                    preferEncryption: state.settings.crypto.enabled,
+                    publicKey: state.settings.crypto.publicKey,
+                  })
+
+                  await db.docs.add(docVersion, [docVersion.id])
+
+                  console.log('done adding version...')
+                }
+              }
+            } catch (error) {
+              // Todo: Show a prompt to the user.
+              console.error(error)
+            }
+
             const doc = await pack(found, {
               preferEncryption: state.settings.crypto.enabled,
               publicKey: state.settings.crypto.publicKey,
             })
 
-            cache.setItem(found.id, doc)
+            // store the new version
+            await mainStore.setItem(found.id, doc)
+
+            console.log('done updating doc...')
           })
         }
 
         break
       case SETTINGS_LOADED:
         // load all documents from the cache after settings are loaded
-        cache.keys()
-          .then(ids => Promise.all(ids.map(id => cache.getItem(id))))
+        mainStore.keys()
+          .then(ids => Promise.all(ids.map(id => mainStore.getItem(id))))
           .then((docs) => {
             // unpack cached data
             return Promise.all(
diff --git a/src/store/plugins/caching/settings.js b/src/store/plugins/caching/settings.js
index 8cd50f00..d2b2a3e5 100644
--- a/src/store/plugins/caching/settings.js
+++ b/src/store/plugins/caching/settings.js
@@ -19,7 +19,7 @@ import {
   SET_EXPERIMENTAL,
   SET_THEME,
   SETTINGS_LOADED,
-} from '/src/store/modules/settings'
+} from '#root/src/store/modules/settings'
 
 const CACHE_KEY = 'main'
 const cache = localforage.createInstance({
diff --git a/src/store/plugins/keybindings.js b/src/store/plugins/keybindings.js
index 2e0e1b2e..325f75cf 100644
--- a/src/store/plugins/keybindings.js
+++ b/src/store/plugins/keybindings.js
@@ -1,10 +1,5 @@
-import {
-  LOAD_KEYBINDINGS,
-} from '/src/store/modules/keybindings'
-
-import {
-  SETTINGS_LOADED,
-} from '/src/store/modules/settings'
+import { LOAD_KEYBINDINGS } from '#root/src/store/modules/keybindings'
+import { SETTINGS_LOADED } from '#root/src/store/modules/settings'
 
 export default (store) => {
   store.subscribe(({ type, _payload }, state) => {
diff --git a/src/store/plugins/packages.js b/src/store/plugins/packages.js
index d749f2e6..bf286c57 100644
--- a/src/store/plugins/packages.js
+++ b/src/store/plugins/packages.js
@@ -8,7 +8,7 @@ import {
   LOAD_DOCUMENTS,
   RESTORE_DOCUMENT,
   TOUCH_DOCUMENT,
-} from '/src/store/actions';
+} from '#root/src/store/actions'
 
 export default (store) => {
   store.subscribe(({ type, payload: { id } }, state) => {
diff --git a/src/store/plugins/sync.js b/src/store/plugins/sync.js
index e8718c28..ee97b302 100644
--- a/src/store/plugins/sync.js
+++ b/src/store/plugins/sync.js
@@ -11,7 +11,7 @@ import {
   SHARE_DOCUMENT,
   SYNC,
   TOUCH_DOCUMENT,
-} from '/src/store/actions'
+} from '#root/src/store/actions'
 
 import { SET_USER } from '#root/src/store/modules/auth'
 
diff --git a/utils/database.ts b/utils/database.ts
new file mode 100644
index 00000000..d3b57f19
--- /dev/null
+++ b/utils/database.ts
@@ -0,0 +1,51 @@
+import Dexie, { type Table } from 'dexie'
+
+export interface Doc {
+  id: string,
+  parentId?: string, // the current doc
+  createdAt: Date,
+  daily: boolean,
+  discardedAt?: Date,
+  encrypted: boolean,
+  firebaseId?: string,
+  iv?: string,
+  ownerId?: string,
+  public: boolean,
+  syncedAt?: Date,
+  tags: string[],
+  text: string,
+  textKey?: string,
+  touchedAt: Date,
+  updatedAt: Date,
+}
+
+export const DatabaseName = 'octo'
+
+export class OctoDatabase extends Dexie {
+  docs!: Table<Doc>
+
+  constructor() {
+    super(DatabaseName)
+
+    this.version(2).stores({
+      docs: [
+        // primary key
+        '++id',
+        // relationship identifiers
+        'ownerId',
+        'parentId',
+        // other properties
+        'createdAt',
+        'daily',
+        'discardedAt',
+        'public',
+        'syncedAt',
+        'tags',
+        'touchedAt',
+        'updatedAt',
+      ].join(','),
+    })
+  }
+}
+
+export const db = new OctoDatabase()
diff --git a/utils/queries.ts b/utils/queries.ts
new file mode 100644
index 00000000..e69de29b