diff --git a/components/DocMeta.vue b/components/DocMeta.vue
new file mode 100644
index 00000000..06081084
--- /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 '/components/DiscardableAction.vue'
+import DocLink from '/components/DocLink.vue'
+import TagLink from '/components/TagLink.vue'
+import CodeSandbox from '/src/common/code_sandbox.js'
+import { parseCodeblocks, parseReferences } from '/src/common/parsers'
+import Doc from '/src/models/doc'
+
+import {
+  DISCARD_DOCUMENT,
+  DUPLICATE_DOCUMENT,
+  RESTORE_DOCUMENT,
+  RESTRICT_DOCUMENT,
+  SHARE_DOCUMENT,
+  SET_RIGHT_SIDEBAR_VISIBILITY,
+} from '/src/store/actions.js'
+
+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/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..bbf9c96d
--- /dev/null
+++ b/composables/useDatabase.ts
@@ -0,0 +1,45 @@
+import { tryOnScopeDispose } from '@vueuse/core'
+import { liveQuery } from 'dexie'
+import { type Observable, type Subscription } from 'rxjs'
+import { type Ref, type UnwrapRef, ref } from 'vue'
+import { db } from '/src/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..edce8f0d
--- /dev/null
+++ b/composables/useDocVersions.ts
@@ -0,0 +1,13 @@
+export const useDocVersions = () => {
+  const router = useRouter()
+  const { db } = useDatabase()
+  const { doc } = useDocs()
+  // Todo: Sort versions.
+  const { result: docVersions } = useQuery(() => db.docVersions.where({ docId: 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 d17e64ad..f3714889 100644
--- a/composables/useDocs.ts
+++ b/composables/useDocs.ts
@@ -4,8 +4,8 @@ import type Doc from '/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 a959dfdd..aaa5f9d3 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -14,7 +14,7 @@ import LayoutNavbar from '/components/LayoutNavbar.vue'
 import TheLogo from '/components/TheLogo.vue'
 import { useLayout, usePinnedDocs } from '/composables'
 import TheLeftSidebar from '/pages/menu.vue'
-import TheRightSidebar from '/pages/docs/[docId]/meta.vue'
+import TheRightSidebar from '/components/DocMeta.vue'
 import { bindGlobal } from '/src/common/keybindings'
 
 export default defineComponent({
@@ -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/package.json b/package.json
index bd95400e..8e3ac821 100644
--- a/package.json
+++ b/package.json
@@ -41,13 +41,15 @@
     "@types/mime-types": "^2.1.1",
     "@types/node": "^18.0.6",
     "@types/remarkable": "^2.0.3",
-    "@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.0.0",
     "postcss": "^8.4.20",
diff --git a/pages/docs/[docId]/meta.vue b/pages/docs/[docId]/meta.vue
index a54a4fbd..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 '/components/DiscardableAction.vue'
-import DocLink from '/components/DocLink.vue'
-import TagLink from '/components/TagLink.vue'
-
-import CodeSandbox from '/src/common/code_sandbox.js'
-import { parseCodeblocks, parseReferences } from '/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..858df3e1
--- /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 '/components/Editor.vue'
+import Doc from '/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/src/database.ts b/src/database.ts
new file mode 100644
index 00000000..72cb0362
--- /dev/null
+++ b/src/database.ts
@@ -0,0 +1,36 @@
+import Dexie, { type Table } from 'dexie'
+
+export interface DocVersion {
+  id: string,
+  createdAt: Date,
+  daily: boolean,
+  discardedAt?: Date,
+  docId: string, // the current doc
+  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 {
+  docVersions!: Table<DocVersion>
+
+  constructor() {
+    super(DatabaseName)
+
+    this.version(1).stores({
+      docVersions: '++id, docId',
+    })
+  }
+}
+
+export const db = new OctoDatabase()
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 11713a79..d4f9d388 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/plugins/caching/documents.js b/src/store/plugins/caching/documents.js
index dc06f2c9..cb3ec850 100644
--- a/src/store/plugins/caching/documents.js
+++ b/src/store/plugins/caching/documents.js
@@ -1,9 +1,7 @@
 import localforage from 'localforage'
-
+import { useDatabase } from '/composables/useDatabase'
 import Debouncer from '/src/common/debouncer'
-
-import { pack, unpack } from '/src/models/doc'
-
+import Doc, { pack, unpack } from '/src/models/doc'
 import {
   ADD_DOCUMENT,
   DISCARD_DOCUMENT,
@@ -16,12 +14,12 @@ import {
   SHARE_DOCUMENT,
   TOUCH_DOCUMENT,
 } from '/src/store/actions'
-
 import { SETTINGS_LOADED } from '/src/store/modules/settings'
 
-const cache = localforage.createInstance({
-  name: 'firebase/documents',
-})
+const name = 'firebase/documents'
+
+export const mainStore = localforage.createInstance({ name })
+export const historyStore = localforage.createInstance({ name, storeName: 'history' })
 
 const debouncer = new Debouncer(800)
 
@@ -49,15 +47,42 @@ export default (store) => {
               publicKey: state.settings.crypto.publicKey,
             })
 
-            cache.setItem(found.id, doc)
+            // 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 unpacked = await unpack(original, { privateKey: state.settings.crypto.privateKey })
+                // create a copy of the original with a new id
+                const backup = new Doc({ ...unpacked, id: undefined })
+                // create the relation (e.g. parentId, originalId, etc)
+                backup.docId = found.id
+                // pack the backup
+                const docVersion = await pack(backup, {
+                  preferEncryption: state.settings.crypto.enabled,
+                  publicKey: state.settings.crypto.publicKey,
+                })
+                // store the duplicate in historyStore
+                const { db } = useDatabase()
+                await db.docVersions.add(docVersion, [docVersion.id])
+              }
+            } catch (error) {
+              // Todo: Show a prompt to the user.
+              console.error(error)
+            }
+
+            // store the new version
+            await mainStore.setItem(found.id, 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/yarn.lock b/yarn.lock
index 45aab1d1..34dc691a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3807,7 +3807,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/core@npm:9.9.0, @vueuse/core@npm:^9.9.0":
+"@vueuse/core@npm:9.9.0":
   version: 9.9.0
   resolution: "@vueuse/core@npm:9.9.0"
   dependencies:
@@ -3819,6 +3819,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/core@npm:^9.10.0":
+  version: 9.10.0
+  resolution: "@vueuse/core@npm:9.10.0"
+  dependencies:
+    "@types/web-bluetooth": ^0.0.16
+    "@vueuse/metadata": 9.10.0
+    "@vueuse/shared": 9.10.0
+    vue-demi: "*"
+  checksum: 9e3b0c0baa1e3daf3ae508f76acf4e73ec80a2089d420f5de7c203e9fecd8cd4596a5e4635bbf09a762e0bba022f26806ee23b69d5d01a5d0e4b76e2ad2878a4
+  languageName: node
+  linkType: hard
+
 "@vueuse/head@npm:^1.0.15, @vueuse/head@npm:^1.0.22":
   version: 1.0.22
   resolution: "@vueuse/head@npm:1.0.22"
@@ -3833,6 +3845,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/metadata@npm:9.10.0":
+  version: 9.10.0
+  resolution: "@vueuse/metadata@npm:9.10.0"
+  checksum: ef9b4970cc1795e197279b59cfd82c7475323c17ae02701e5a6be26df1258330d4fafb7c05d005dfa7af97277509a8589d62467925319e1c5c17715805554bb7
+  languageName: node
+  linkType: hard
+
 "@vueuse/metadata@npm:9.9.0":
   version: 9.9.0
   resolution: "@vueuse/metadata@npm:9.9.0"
@@ -3855,6 +3874,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/rxjs@npm:^9.10.0":
+  version: 9.10.0
+  resolution: "@vueuse/rxjs@npm:9.10.0"
+  dependencies:
+    "@vueuse/shared": 9.10.0
+    vue-demi: "*"
+  peerDependencies:
+    rxjs: ">=6.0.0"
+  checksum: 7d83f443e875020bc16f656ccd36388cd9d97593e1f2290eab6dea8639e557408c10ae8bd39602af67de68bd75c61fd249dcc07dac7ca84e60a54eed82b8ff60
+  languageName: node
+  linkType: hard
+
+"@vueuse/shared@npm:9.10.0":
+  version: 9.10.0
+  resolution: "@vueuse/shared@npm:9.10.0"
+  dependencies:
+    vue-demi: "*"
+  checksum: 1481ad7273eb8835a42fd49805d32ae97465188d260ddb28fdffebda7bedea5943bf49c3bd128121b32719307eaf1cb69b37b60fa1195c10a555e7aec3d78c22
+  languageName: node
+  linkType: hard
+
 "@vueuse/shared@npm:9.9.0":
   version: 9.9.0
   resolution: "@vueuse/shared@npm:9.9.0"
@@ -6504,6 +6544,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dexie@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "dexie@npm:3.2.2"
+  checksum: 7a21079f7ab139ebd724a009917f9293f2b01c341e2a3cd51d2455dda4d4e78b9ca7de0373e963108395cf1921ce7f6556cac967c1e957005a3c7c11794ceccf
+  languageName: node
+  linkType: hard
+
 "didyoumean@npm:^1.2.2":
   version: 1.2.2
   resolution: "didyoumean@npm:1.2.2"
@@ -10890,14 +10937,16 @@ __metadata:
     "@types/mime-types": ^2.1.1
     "@types/node": ^18.0.6
     "@types/remarkable": ^2.0.3
-    "@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.9.0
     force-graph: ^1.42.16