diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 639f355a..df275bf1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -45,15 +45,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -75,15 +74,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -109,15 +107,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -158,15 +155,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -196,15 +192,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -228,15 +223,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
diff --git a/app.vue b/app.vue
index db272f9f..e938570d 100644
--- a/app.vue
+++ b/app.vue
@@ -123,4 +123,11 @@ svg {
   flex-direction: column;
   flex-grow: 1;
 }
+
+.os-scrollbar {
+  /* https://kingsora.github.io/OverlayScrollbars/#:~:text=to%20read%20it.-,Styling,-OverlayScrollbars%20comes%20with */
+  --os-handle-bg: rgb(var(--layer-bg-hover));
+  --os-handle-bg-hover: rgb(var(--layer-bg-hover));
+  --os-handle-bg-active: rgb(var(--layer-bg-hover));
+}
 </style>
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ee2894d4..5dd3f110 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -86,10 +86,10 @@
   }
 
   .light {
-    --layer-0-bg: 255 255 255;
-    --layer-0-bg-hover: 244 244 245;
-    --layer-0-bg-active: 255 255 255;
-    --layer-0-bg-disabled: 253 253 253;
+    --layer-0-bg: 244 244 245;
+    --layer-0-bg-hover: 228 228 231;
+    --layer-0-bg-active: 228 228 231;
+    --layer-0-bg-disabled: 242 242 243;
     --layer-0-border: var(--layer-0-bg-hover);
     --layer-0-text: 24 24 27;
     --layer-0-text-hover: 24 24 27;
@@ -97,11 +97,11 @@
     --layer-0-text-disabled: 113 113 122;
     --layer-0-text-muted: 113 113 122;
 
-    --layer-1-bg: 244 244 245;
-    --layer-1-bg-hover: 228 228 231;
-    --layer-1-bg-active: 228 228 231;
-    --layer-1-bg-disabled: 242 242 243;
-    --layer-1-border: var(--layer-1-bg-hover);
+    --layer-1-bg: 255 255 255;
+    --layer-1-bg-hover: 244 244 245;
+    --layer-1-bg-active: 255 255 255;
+    --layer-1-bg-disabled: 253 253 253;
+    --layer-1-border: var(--layer-0-bg-hover);
     --layer-1-text: 24 24 27;
     --layer-1-text-hover: 24 24 27;
     --layer-1-text-active: 24 24 27;
@@ -302,19 +302,19 @@
   }
 
   .button {
-    @apply inline-flex items-center rounded cursor-pointer focus:outline-none focus:ring focus-within:ring;
+    @apply inline-flex items-center rounded cursor-pointer focus-visible:outline-none focus-visible:ring has-[:focus-visible]:ring;
   }
 
   .core-button {
     @apply core-button-shape;
     @apply cursor-pointer;
     @apply outline-none;
-    @apply focus:ring focus-within:ring;
+    @apply focus-visible:ring has-[:focus-visible]:ring;
     @apply bg-layer;
     @apply disabled:bg-layer-disabled ui-disabled:bg-layer-disabled;
     @apply disabled:text-layer-disabled ui-disabled:text-layer-disabled;
     @apply disabled:hover:bg-layer-disabled;
-    @apply disabled:cursor-not-allowed ui-disabled:cursor-not-allowed disabled-within:cursor-not-allowed;
+    @apply disabled:cursor-default ui-disabled:cursor-default disabled-within:cursor-default;
     @apply disabled-within:bg-layer-disabled disabled-within:text-layer-disabled;
     @apply disabled-within:hover:bg-layer-disabled disabled-within:hover:text-layer-disabled;
     @apply hover:bg-layer-hover ui-active:bg-layer-hover;
@@ -322,7 +322,7 @@
   }
 
   .core-button-shape {
-    @apply p-2 rounded inline-flex gap-3 items-center justify-center;
+    @apply px-2 py-1 rounded inline-flex gap-2 items-center justify-center;
   }
 
   /* utils */
@@ -373,6 +373,36 @@
   }
 
   .sidebar-link {
-    @apply flex items-center justify-between rounded p-2 hover:bg-layer-hover focus:outline-none focus:ring;
+    @apply flex items-center justify-between rounded px-2 py-1 hover:bg-layer-hover focus-visible:outline-none focus-visible:ring;
+  }
+}
+
+@layer utilities {
+  .flex-direction-inherit {
+    flex-direction: inherit;
+  }
+
+  .flex-inherit {
+    align-items: inherit;
+    flex-direction: inherit;
+    flex-wrap: inherit;
+    gap: inherit;
+    justify-content: inherit;
+  }
+
+  .flex-wrap-inherit {
+    flex-wrap: inherit;
+  }
+
+  .gap-inherit {
+    gap: inherit;
+  }
+
+  .items-inherit {
+    align-items: inherit;
+  }
+
+  .justify-inherit {
+    justify-content: inherit;
   }
 }
diff --git a/components/CoreEditor.vue b/components/CoreEditor.vue
index aa788990..c0bd6823 100644
--- a/components/CoreEditor.vue
+++ b/components/CoreEditor.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type Options } from 'ink-mde'
+import { type Instance, type Options } from 'ink-mde'
 import Ink from 'ink-mde/vue'
 import { OverlayScrollbars } from 'overlayscrollbars'
 import { type SystemAppearance } from '#composables/useAppearance'
@@ -37,12 +37,13 @@ export default defineComponent({
     const cssMaxWidth = computed(() => `${maxWidthInChars.value}ch`)
     const instance = computed(() => ink.value?.instance)
 
-    const editorOptions = computed(() => {
+    const editorOptions = computed<Options>(() => {
       return {
         ...props.options,
         interface: {
           ...props.options?.interface,
           appearance: editorAppearance.value,
+          toolbar: false,
         },
       }
     })
@@ -75,11 +76,35 @@ export default defineComponent({
       }
     })
 
+    const formatSelection = (type: Parameters<Instance['format']>[0]) => {
+      instance.value?.format(type, {})
+    }
+
+    const handleUpload = async (event: Event) => {
+      const target = event.target as HTMLInputElement
+
+      if (target?.files) {
+        try {
+          const url = await props.options?.files?.handler?.(target.files)
+
+          if (url) {
+            const markup = `![](${url})`
+
+            instance.value?.insert(markup)
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      }
+    }
+
     return {
       cssMaxWidth,
       currentLayer,
       editorOptions,
       focus,
+      formatSelection,
+      handleUpload,
       ink,
       instance,
       nextLayer,
@@ -90,14 +115,36 @@ export default defineComponent({
 </script>
 
 <template>
-  <Ink
-    ref="ink"
-    :model-value="modelValue"
-    :options="editorOptions"
-    class="core-editor flex flex-col flex-grow flex-shrink rounded"
-    :class="currentLayer.class"
-    @update:model-value="$emit('update:modelValue', $event)"
-  />
+  <div class="core-editor flex flex-col-reverse lg:flex-col flex-grow flex-shrink min-h-0 rounded">
+    <template v-if="options?.interface?.toolbar">
+      <CoreScrollable class="core-editor-scrollable flex-shrink-0 w-full mx-auto">
+        <CoreEditorToolbar
+          class="core-editor-toolbar mx-auto px-1 overflow-hidden lg:px-0 py-1 flex-shrink-0 rounded min-w-full"
+          :upload="options?.toolbar?.upload"
+          @blockquote="formatSelection('quote')"
+          @bold="formatSelection('bold')"
+          @bullet-list="formatSelection('list')"
+          @code="formatSelection('code')"
+          @heading="formatSelection('heading')"
+          @image="formatSelection('image')"
+          @italic="formatSelection('italic')"
+          @link="formatSelection('link')"
+          @number-list="formatSelection('ordered_list')"
+          @task-list="formatSelection('task_list')"
+          @upload="handleUpload"
+        />
+      </CoreScrollable>
+      <CoreDivider />
+    </template>
+    <Ink
+      ref="ink"
+      :model-value="modelValue"
+      :options="editorOptions"
+      class="flex flex-col flex-grow flex-shrink min-h-0 rounded overflow-hidden"
+      :class="currentLayer.class"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </div>
 </template>
 
 <style scoped>
@@ -115,9 +162,14 @@ export default defineComponent({
   --ink-syntax-hashtag-background-color: rgb(v-bind('nextLayer.bgCssVar'));
   --ink-syntax-processing-instruction-color: rgb(v-bind('nextLayer.textCssVar') / 0.1);
 
+  .core-editor-scrollable {
+    max-width: var(--core-editor-max-width-in-chars);
+  }
+
   :deep(.ink-mde) {
     border: none;
     border-radius: 0;
+    padding: 0;
 
     .cm-placeholder {
       color: var(--core-editor-text-muted);
@@ -129,7 +181,11 @@ export default defineComponent({
 
     .ink-mde-details {
       background-color: transparent;
-      border-top: 1px solid var(--core-editor-layer-2-bg);
+      border-top: 1px solid var(--core-editor-divider);
+      padding: 0.25rem;
+    }
+
+    .ink-mde-editor {
       padding: 0.25rem;
     }
 
diff --git a/components/CoreEditorToolbar.vue b/components/CoreEditorToolbar.vue
new file mode 100644
index 00000000..f2530d6e
--- /dev/null
+++ b/components/CoreEditorToolbar.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import {
+  IconBlockquote,
+  IconBold,
+  IconCode,
+  IconHeading,
+  IconItalic,
+  IconLink,
+  IconList,
+  IconListCheck,
+  IconListNumbers,
+  IconPhoto,
+  IconUpload,
+} from '@tabler/icons-vue'
+
+withDefaults(defineProps<{
+  blockquote?: boolean,
+  bold?: boolean,
+  bulletList?: boolean,
+  code?: boolean,
+  heading?: boolean,
+  image?: boolean,
+  italic?: boolean,
+  link?: boolean,
+  numberList?: boolean,
+  taskList?: boolean,
+  upload?: boolean,
+}>(), {
+  blockquote: true,
+  bold: true,
+  bulletList: true,
+  code: true,
+  heading: true,
+  image: true,
+  italic: true,
+  link: true,
+  numberList: true,
+  taskList: true,
+  upload: false,
+})
+
+defineEmits<{
+  blockquote: [],
+  bold: [],
+  bulletList: [],
+  code: [],
+  heading: [],
+  image: [],
+  italic: [],
+  link: [],
+  numberList: [],
+  taskList: [],
+  upload: [event: Event],
+}>()
+
+const fileInput = ref<HTMLElement>()
+
+const triggerUpload = () => {
+  fileInput.value?.click()
+}
+</script>
+
+<template>
+  <div class="flex gap-1 lg:gap-4">
+    <div v-if="heading || bold || italic" class="flex gap-1">
+      <CoreButton v-if="heading" class="p-1 border border-layer" title="Heading" @click="$emit('heading')">
+        <IconHeading class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="bold" class="p-1 border border-layer" title="Bold" @click="$emit('bold')">
+        <IconBold class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="italic" class="p-1 border border-layer" title="Italic" @click="$emit('italic')">
+        <IconItalic class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+    </div>
+    <div v-if="blockquote || code" class="flex gap-1">
+      <CoreButton v-if="blockquote" class="p-1 border border-layer" title="Blockquote" @click="$emit('blockquote')">
+        <IconBlockquote class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="code" class="p-1 border border-layer" title="Code" @click="$emit('code')">
+        <IconCode class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+    </div>
+    <div v-if="bulletList || numberList || taskList" class="flex gap-1">
+      <CoreButton v-if="bulletList" class="p-1 border border-layer" title="Bullet List" @click="$emit('bulletList')">
+        <IconList class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="numberList" class="p-1 border border-layer" title="Number List" @click="$emit('numberList')">
+        <IconListNumbers class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="taskList" class="p-1 border border-layer" title="Task List" @click="$emit('taskList')">
+        <IconListCheck class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+    </div>
+    <div v-if="link || image || upload" class="flex gap-1">
+      <CoreButton v-if="link" class="p-1 border border-layer" title="Link" @click="$emit('link')">
+        <IconLink class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="image" class="p-1 border border-layer" title="Image" @click="$emit('image')">
+        <IconPhoto class="sq-6" :stroke-width="1.25" />
+      </CoreButton>
+      <CoreButton v-if="upload" class="p-1 border border-layer" title="Upload" @click="triggerUpload">
+        <IconUpload class="sq-6" :stroke-width="1.25" />
+        <input ref="fileInput" class="hidden" type="file" @change="$emit('upload', $event)">
+      </CoreButton>
+    </div>
+  </div>
+</template>
diff --git a/components/CoreInput.vue b/components/CoreInput.vue
index efcb2c84..221f6825 100644
--- a/components/CoreInput.vue
+++ b/components/CoreInput.vue
@@ -108,7 +108,7 @@ onMounted(() => {
     <label class="cursor-pointer flex flex-col gap-1 group focus-within:cursor-text">
       <small v-if="label">{{ label }}</small>
       <div class="flex -m-0.5 p-0.5 rounded group-focus-within:ring-2 ring-opacity-25">
-        <div class="flex flex-col flex-grow overflow-hidden p-2 relative rounded border border-layer">
+        <div class="flex flex-col flex-grow overflow-hidden px-2 py-1 relative rounded border border-layer">
           <span v-if="private" class="absolute flex inset-0 items-center justify-center z-10 group-focus-within:opacity-0 group-focus-within:-z-10 bg-layer">
             <span class="flex gap-2 items-center">
               <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/components/CoreLink.vue b/components/CoreLink.vue
index 62472033..04ea8fa3 100644
--- a/components/CoreLink.vue
+++ b/components/CoreLink.vue
@@ -30,10 +30,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <a v-if="isExternal" :href="toExternal" rel="noopener noreferrer" target="_blank" class="cursor-pointer outline-none focus:ring">
+  <a v-if="isExternal" :href="toExternal" rel="noopener noreferrer" target="_blank" class="cursor-pointer outline-none focus-visible:ring">
     <slot />
   </a>
-  <NuxtLink v-else :to="toInternal" class="cursor-pointer outline-none focus:ring">
+  <NuxtLink v-else :to="toInternal" class="cursor-pointer outline-none focus-visible:ring">
     <slot />
   </NuxtLink>
 </template>
diff --git a/components/FlexDivider.vue b/components/FlexDivider.vue
new file mode 100644
index 00000000..3079481c
--- /dev/null
+++ b/components/FlexDivider.vue
@@ -0,0 +1,6 @@
+<template>
+  <div
+    class="grow-0 shrink-0 ps-px min-h-px min-w-px bg-layer-border"
+    data-flex-divider
+  />
+</template>
diff --git a/components/Gutter.vue b/components/Gutter.vue
new file mode 100644
index 00000000..e85ef786
--- /dev/null
+++ b/components/Gutter.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+defineProps<{ show: boolean, size: number }>()
+</script>
+
+<template>
+  <Transition name="gutter">
+    <div v-show="show" class="gutter flex flex-shrink-0 overflow-hidden">
+      <div class="gutter-content flex flex-grow flex-shrink flex-col w-full lg:w-auto">
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.gutter {
+  width: calc(v-bind('size') * 1px);
+}
+
+.gutter-content {
+  width: calc(v-bind('size') * 1px);
+  flex-shrink: 0;
+}
+
+.gutter-enter-active,
+.gutter-leave-active {
+  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.gutter-enter-from,
+.gutter-leave-to {
+  width: 0;
+}
+</style>
diff --git a/composables/useToggle.ts b/composables/useToggle.ts
new file mode 100644
index 00000000..0e68777f
--- /dev/null
+++ b/composables/useToggle.ts
@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+export const useToggle = ({ state = ref(true) } = {}) => {
+  const toggle = () => {
+    state.value = !state.value
+  }
+
+  return {
+    state,
+    toggle,
+  }
+}
diff --git a/composables/useZen.ts b/composables/useZen.ts
new file mode 100644
index 00000000..78b81d7b
--- /dev/null
+++ b/composables/useZen.ts
@@ -0,0 +1,12 @@
+import { useLocalStorage } from '@vueuse/core'
+import { useToggle } from './useToggle'
+
+export const useZen = () => {
+  const isZen = useLocalStorage('isZen', false, { initOnMounted: true })
+  const { toggle: toggleZen } = useToggle({ state: isZen })
+
+  return {
+    isZen,
+    toggleZen,
+  }
+}
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index af0c967e..a463938a 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -1,233 +1,125 @@
-<script lang="ts">
-import { CalendarIcon, Cog8ToothIcon, DocumentPlusIcon, MoonIcon, SunIcon, UserCircleIcon, XMarkIcon } from '@heroicons/vue/24/solid'
-import { computed, defineComponent, onMounted, onUnmounted } from 'vue'
-import GraphIcon from '#root/assets/graph.svg?component'
-import LogoIcon from '#root/assets/logo-icon.svg?component'
+<script lang="ts" setup>
+import { IconDotsVertical, IconMenu2, IconMoon, IconPencilPlus, IconSun, IconSunMoon } from '@tabler/icons-vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import CoreButton from '#root/components/CoreButton.vue'
 import CoreDivider from '#root/components/CoreDivider.vue'
 import CoreLink from '#root/components/CoreLink.vue'
-import Key from '#root/components/Key.vue'
 import TheLeftSidebar from '#root/pages/menu.vue'
 import TheRightSidebar from '#root/pages/docs/[docId]/meta.vue'
 import { bindGlobal } from '#root/src/common/keybindings'
 
-export default defineComponent({
-  components: {
-    CalendarIcon,
-    Cog8ToothIcon,
-    CoreButton,
-    CoreDivider,
-    CoreLink,
-    DocumentPlusIcon,
-    GraphIcon,
-    Key,
-    LogoIcon,
-    MoonIcon,
-    SunIcon,
-    TheLeftSidebar,
-    TheRightSidebar,
-    UserCircleIcon,
-    XMarkIcon,
-  },
-  setup() {
-    const { isNuxt } = useIsNuxt()
-    const router = useRouter()
-    const { doc } = useDocs()
-    const { showMenu, showMeta, toggleMenu, toggleMeta } = useLayout()
-    const { pinnedDocs, unpinDoc } = usePinnedDocs()
-    const { isDesktop, isMobile, modKey } = useDevice()
-    const isDoc = computed(() => router.currentRoute.value.name === 'docs-docId')
-    const isNew = computed(() => router.currentRoute.value.path === '/docs/new')
-    const { store: appearance, isAuto, isDark, isLight } = useAppearance()
+const { doc } = useDocs()
+const { isZen, toggleZen } = useZen()
+const { showMenu, showMeta, toggleMenu, toggleMeta } = useLayout()
+const { store: appearance, isAuto, isDark, isLight } = useAppearance()
+const isPrimaryGutterShowing = computed(() => !isZen.value && showMenu.value)
+const isSecondaryGutterShowing = computed(() => !isZen.value && showMeta.value && !!doc.value)
 
-    const handleQuickActionClose = () => {
-      if (doc.value) {
-        return router.push({ path: `/docs/${doc.value.id}` })
-      }
+const scrollListener = (event: Event) => {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  event.stopPropagation()
 
-      router.push({ path: '/docs/new' })
-    }
-
-    const handleLayoutChange = () => {
-      toggleMenu()
-      toggleMeta()
-    }
-
-    onMounted(() => {
-      // Todo: Migrate keybindings to composables.
-      bindGlobal('mod+\\', () => {
-        toggleMenu()
-        toggleMeta()
-      })
-    })
-
-    const handleTabClose = async (id: string) => {
-      if (doc.value?.id === id) {
-        await router.push({ path: '/docs/new' })
-      }
-
-      unpinDoc(id)
-    }
-
-    const scrollListener = (event: Event) => {
-      event.preventDefault()
-      event.stopImmediatePropagation()
-      event.stopPropagation()
+  window.scrollTo(0, 0)
+}
 
-      window.scrollTo(0, 0)
-    }
+const toggleAppearance = () => {
+  appearance.value = isAuto.value ? 'dark' : isDark.value ? 'light' : 'auto'
+}
 
-    const toggleAppearance = () => {
-      appearance.value = isAuto.value ? 'dark' : isDark.value ? 'light' : 'auto'
-    }
+onMounted(() => {
+  window.addEventListener('scroll', scrollListener)
 
-    onMounted(() => {
-      window.addEventListener('scroll', scrollListener)
-    })
+  // Todo: Migrate keybindings to composables.
+  bindGlobal('mod+\\', () => {
+    toggleZen()
+  })
 
-    onUnmounted(() => {
-      window.removeEventListener('scroll', scrollListener)
-    })
+  // Todo: Migrate keybindings to composables.
+  bindGlobal('mod+shift+,', () => {
+    toggleMenu()
+  })
+})
 
-    return {
-      CoreDivider,
-      CoreLink,
-      appearance,
-      doc,
-      handleLayoutChange,
-      handleQuickActionClose,
-      handleTabClose,
-      isAuto,
-      isDark,
-      isDesktop,
-      isDoc,
-      isLight,
-      isMobile,
-      isNew,
-      isNuxt,
-      modKey,
-      pinnedDocs,
-      showMenu,
-      showMeta,
-      toggleAppearance,
-    }
-  },
+onUnmounted(() => {
+  window.removeEventListener('scroll', scrollListener)
 })
 </script>
 
 <template>
-  <div class="dashboard flex h-screen w-screen min-h-0 min-w-0 overflow-hidden">
-    <CoreLayer v-if="isDesktop" as="section" class="flex flex-col items-center justify-between gap-4 h-full bg-layer md:flex">
-      <div class="flex flex-col">
-        <div class="flex flex-col flex-shrink-0 items-center justify-center p-1">
-          <CoreButton
-            class="flex items-center justify-center p-1"
-            data-test-id="toggle-sidebars"
-            data-test-toggle-sidebars
-            @click="handleLayoutChange"
-          >
-            <LogoIcon class="h-8 text-brand" />
+  <div class="dashboard flex flex-col lg:flex-row h-screen w-screen min-h-0 min-w-0 overflow-hidden">
+    <Gutter :show="isPrimaryGutterShowing" :size="256" class="hidden lg:flex">
+      <TheLeftSidebar class="flex flex-grow flex-shrink overflow-hidden w-full" />
+    </Gutter>
+    <FlexDivider class="hidden lg:block" />
+    <CoreLayer class="bg-layer basis-full flex flex-col flex-grow flex-shrink min-h-0">
+      <div class="flex p-1 items-center">
+        <div class="flex gap-1 flex-row-reverse lg:flex-row items-center basis-full justify-start">
+          <CoreButton class="hidden lg:flex" @click="toggleMenu">
+            <IconMenu2 :stroke-width="1.25" class="h-6" />
+            <span>Menu</span>
+          </CoreButton>
+          <CoreButton :as="CoreLink" :to="{ path: '/menu' }" class="lg:hidden">
+            <IconMenu2 :stroke-width="1.25" class="h-6" />
+            <span>Menu</span>
+          </CoreButton>
+          <CoreButton :as="CoreLink" :to="{ path: '/docs/new' }">
+            <IconPencilPlus :stroke-width="1.25" class="h-6" />
+            <span>New</span>
           </CoreButton>
         </div>
-        <CoreDivider />
-        <div class="flex flex-col gap-1 p-1 items-center">
-          <CoreButtonLink :to="{ path: '/docs/new' }" :layer="1" :flat="true">
-            <DocumentPlusIcon class="w-6" />
-          </CoreButtonLink>
-          <CoreButtonLink :to="{ path: '/notepad' }" :layer="1" :flat="true">
-            <CalendarIcon class="w-6" />
-          </CoreButtonLink>
-          <CoreButtonLink :to="{ path: '/force-graph' }" :layer="1" :flat="true">
-            <GraphIcon class="w-6" />
-          </CoreButtonLink>
+        <div class="flex -order-1 lg:order-none items-center justify-center">
+          <CoreLayer class="flex text-xl gap-4">
+            <svg class="sq-7 transition-colors duration-300 cursor-pointer" :class="isZen ? 'text-layer-bg' : 'text-brand'" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg" @click="toggleZen">
+              <path d="M125 250C194.036 250 250 194.036 250 125C250 55.9644 194.036 0 125 0C55.9644 0 0 55.9644 0 125C0 194.036 55.9644 250 125 250Z" fill="currentColor" />
+              <template v-if="isZen">
+                <path class="fill-layer-text-muted stroke-layer-text-muted" d="M212.962 153.171C212.962 153.171 192.949 159.5 179.472 159.5C165.995 159.5 145.981 153.171 145.981 153.171C145.981 153.171 164.921 167.5 179.472 167.5C194.022 167.5 212.962 153.171 212.962 153.171Z" stroke-width="2" stroke-linejoin="round" />
+                <path class="fill-layer-text-muted stroke-layer-text-muted" d="M37 153.171C37 153.171 57.0133 159.5 70.4906 159.5C83.9679 159.5 103.981 153.171 103.981 153.171C103.981 153.171 85.0412 167.5 70.4906 167.5C55.94 167.5 37 153.171 37 153.171Z" stroke-width="2" stroke-linejoin="round" />
+              </template>
+              <template v-else>
+                <mask id="mask0_508_218" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="145" y="117" width="68" height="85">
+                  <ellipse cx="179.378" cy="159.462" rx="33.4292" ry="42.3835" fill="#D9D9D9" />
+                </mask>
+                <g mask="url(#mask0_508_218)">
+                  <ellipse cx="179.378" cy="159.462" rx="33.4292" ry="42.3835" fill="white" />
+                  <ellipse cx="163.865" cy="162.805" rx="23.3666" ry="29.6255" fill="black" />
+                </g>
+                <mask id="mask1_508_218" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="37" y="117" width="68" height="85">
+                  <ellipse cx="70.7535" cy="159.462" rx="33.4292" ry="42.3836" fill="#D9D9D9" />
+                </mask>
+                <g mask="url(#mask1_508_218)">
+                  <ellipse cx="70.7535" cy="159.462" rx="33.4292" ry="42.3836" fill="white" />
+                  <ellipse cx="86.0505" cy="162.271" rx="23.3664" ry="29.6253" fill="black" />
+                </g>
+              </template>
+            </svg>
+          </CoreLayer>
         </div>
-      </div>
-      <div class="flex flex-col gap-1 p-1 items-center">
-        <div class="flex flex-col gap-1 pb-2 items-center text-layer-muted">
-          <CoreButton @click="toggleAppearance">
-            <MoonIcon v-if="isDark" class="w-6" />
-            <SunIcon v-else-if="isLight" class="w-6" />
-            <div v-else class="relative sq-6">
-              <SunIcon class="w-4 absolute top-0 right-0" />
-              <MoonIcon class="w-4 absolute bottom-0 left-0" />
-            </div>
+        <div class="flex items-center gap-1 lg:basis-full justify-end">
+          <CoreButton class="hidden lg:flex" @click="toggleAppearance">
+            <IconMoon v-if="isDark" :stroke-width="1.25" class="w-6" />
+            <IconSun v-else-if="isLight" :stroke-width="1.25" class="w-6" />
+            <IconSunMoon v-else :stroke-width="1.25" class="w-6" />
+          </CoreButton>
+          <CoreButton v-if="doc" class="hidden lg:flex" data-test-id="toggle-meta" data-test-toggle-meta @click="toggleMeta">
+            <IconDotsVertical :stroke-width="1.25" class="h-6" />
+          </CoreButton>
+          <CoreButton v-if="doc" :as="CoreLink" :to="{ path: `/docs/${doc.id}/meta` }" class="lg:hidden" data-test-id="toggle-meta" data-test-toggle-meta>
+            <IconDotsVertical :stroke-width="1.25" class="h-6" />
           </CoreButton>
         </div>
-        <CoreButtonLink :to="{ path: '/settings' }" :layer="1" :flat="true">
-          <Cog8ToothIcon class="w-6" />
-        </CoreButtonLink>
-        <CoreButtonLink :to="{ path: '/account' }" :layer="1" :flat="true">
-          <UserCircleIcon class="w-6" />
-        </CoreButtonLink>
+      </div>
+      <CoreDivider />
+      <div class="flex flex-grow flex-shrink min-h-0 overflow-hidden min-w-0">
+        <section class="flex flex-grow flex-shrink min-h-0 overflow-hidden min-w-0">
+          <slot />
+        </section>
       </div>
     </CoreLayer>
-    <CoreLayer v-if="isDesktop" :as="CoreDivider" :vertical="true" />
-    <section class="flex flex-col flex-grow flex-shrink min-h-0 min-w-0">
-      <CoreLayer as="nav" class="flex items-center justify-between bg-layer">
-        <div v-if="isMobile" class="flex items-center justify-between flex-grow p-1">
-          <CoreLink :to="{ path: '/docs/new' }" class="flex items-center justify-center p-1">
-            <LogoIcon class="h-8 text-brand" />
-          </CoreLink>
-          <div class="flex items-center gap-1">
-            <CoreButton :as="CoreLink" :to="{ path: '/menu' }" role="button" aria-haspopup="true" aria-expanded="false">
-              <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="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-              <span class="ml-2">Menu</span>
-            </CoreButton>
-            <CoreButton v-if="isNew" :as="CoreLink" :to="{ path: '/quick-action' }">
-              <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.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>
-            </CoreButton>
-            <CoreButton v-else-if="isDoc" :as="CoreLink" :to="{ path: `/docs/${doc?.id}/meta` }">
-              <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>
-            </CoreButton>
-            <CoreButton v-else @click="handleQuickActionClose">
-              <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>
-            </CoreButton>
-          </div>
-        </div>
-        <CoreNavPanel v-if="isDesktop" class="flex-shrink-0 w-64">
-          <CoreLink :to="{ path: '/docs' }" class="sidebar-link justify-between w-full">
-            <div class="flex gap-3 items-center">
-              <svg class="w-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-              <span>Search</span>
-            </div>
-            <span class="hidden md:flex text-layer-muted">
-              <Key>{{ modKey }}</Key>
-              <Key>⇧</Key>
-              <Key>f</Key>
-            </span>
-          </CoreLink>
-        </CoreNavPanel>
-        <CoreDivider v-if="isDesktop" vertical />
-        <CoreNavPanel v-if="isDesktop" class="flex flex-grow flex-shrink gap-2 min-w-0" horizontal>
-          <CoreButton v-for="pinnedDoc in pinnedDocs" :key="pinnedDoc.id" :as="CoreLink" :to="{ path: `/docs/${pinnedDoc.id}` }" class="allow-link-active flex flex-shrink justify-between min-w-[4rem] max-w-[20rem]">
-            <span class="text-ellipsis overflow-hidden">{{ pinnedDoc.label }}</span>
-            <XMarkIcon class="w-4 transition hover:scale-125" @click.prevent.stop="() => handleTabClose(pinnedDoc.id)" />
-          </CoreButton>
-        </CoreNavPanel>
-      </CoreLayer>
-      <CoreLayer :as="CoreDivider" />
-      <section class="flex flex-grow flex-shrink overflow-hidden min-w-0">
-        <CoreLayer v-if="(isDesktop && showMenu)" v-slot="{ layer }" template>
-          <TheLeftSidebar class="hidden w-64 md:flex flex-shrink-0 bg-layer" :class="layer.class" />
-        </CoreLayer>
-        <CoreLayer v-if="(isDesktop && showMenu)" :as="CoreDivider" :vertical="true" />
-        <slot />
-        <CoreLayer v-if="(isDesktop && showMeta && doc && isDoc)" v-slot="{ layer }" template>
-          <CoreDivider vertical />
-          <TheRightSidebar class="hidden w-64 bg-layer md:flex flex-shrink-0" :class="layer.class" />
-        </CoreLayer>
-      </section>
-    </section>
+    <FlexDivider class="hidden lg:block" />
+    <Gutter :show="isSecondaryGutterShowing" :size="256" class="hidden lg:flex">
+      <TheRightSidebar class="hidden lg:flex flex-grow flex-shrink-0 w-full" />
+    </Gutter>
     <ToastList class="fixed bottom-8 right-8 m-auto" />
   </div>
 </template>
@@ -236,4 +128,12 @@ export default defineComponent({
 .dashboard {
   height: var(--app-height, 100vh);
 }
+
+.gutter-right {
+  direction: rtl;
+}
+
+:deep(.gutter-right > *) {
+  direction: ltr;
+}
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 154d769a..7146e17e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -252,7 +252,7 @@ export default defineNuxtConfig({
       registerPlugin: true,
     },
     devOptions: {
-      enabled: true,
+      enabled: !process.env.DISABLE_PWA,
       type: 'module',
     },
     includeManifestIcons: true,
@@ -306,7 +306,7 @@ export default defineNuxtConfig({
     },
   },
   sourcemap: true,
-  ssr: true,
+  ssr: !process.env.DISABLE_SSR,
   tailwindcss: {
     configPath: '~/tailwind.config.cjs',
   },
diff --git a/package.json b/package.json
index 9e105e62..cd519deb 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "clean": "rimraf .output dev-dist dist",
     "dev": "nuxt dev --port 8888",
     "dev:full": "run-p dev firebase:start",
+    "dev:minimal": "DISABLE_SSR=1 DISABLE_PWA=1 NUXT_PUBLIC_FIREBASE_DISABLED=1 run-s dev",
     "firebase:login": "firebase login",
     "firebase:start": "firebase -c ./firebase/firebase.json --project \"${FIREBASE_PROJECT_ID:-demo-octo}\" emulators:start --import ./firebase/data --export-on-exit ./firebase/data",
     "lint": "eslint .",
@@ -29,6 +30,7 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.17",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
+    "@tabler/icons-vue": "^3.11.0",
     "codemirror-lang-mermaid": "^0.2.2",
     "culori": "^3.3.0",
     "deepmerge": "^4.3.1",
@@ -61,6 +63,7 @@
     "@nuxtjs/tailwindcss": "^6.10.3",
     "@pinia/nuxt": "^0.4.11",
     "@playwright/test": "^1.41.2",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/culori": "^2.0.4",
     "@types/file-saver": "^2.0.7",
diff --git a/pages/menu.vue b/pages/menu.vue
index 8704c12b..76c43460 100644
--- a/pages/menu.vue
+++ b/pages/menu.vue
@@ -124,50 +124,32 @@ export default {
 <template>
   <CoreScrollable>
     <CoreNavPanel class="flex flex-col gap-1">
-      <CoreLink v-if="!mediumPlus" :to="{ path: '/docs/new' }" class="sidebar-link">
+      <CoreLink :to="{ path: '/docs' }" class="sidebar-link">
         <div class="flex gap-3 items-center">
-          <CoreAsset type="DocumentPlus" class="w-5" />
-          <span>New Doc</span>
-        </div>
-      </CoreLink>
-      <CoreLink v-if="!mediumPlus" :to="{ path: '/docs' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <SearchIcon class="w-5" />
+          <SearchIcon class="sq-5" />
           <span>Search</span>
         </div>
       </CoreLink>
       <CoreLink :to="{ path: '/docs/f/untagged' }" class="sidebar-link">
-        <InboxIcon class="w-5" />
+        <InboxIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>Inbox</span>
           <ModKKey class="text-layer-muted">U</ModKKey>
         </span>
       </CoreLink>
-      <CoreLink v-if="!mediumPlus" :to="{ path: '/notepad' }" class="sidebar-link">
+      <CoreLink :to="{ path: '/notepad' }" class="sidebar-link">
         <div class="flex gap-3 items-center">
-          <CoreAsset type="Daily" class="w-5" />
+          <CoreAsset type="Daily" class="sq-5" />
           <span>Daily Notepad</span>
         </div>
       </CoreLink>
       <CoreLink :to="{ path: '/workspaces' }" class="sidebar-link">
-        <WorkspacesIcon class="w-5" />
+        <WorkspacesIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span class="action">Workspaces</span>
           <ModKKey class="text-layer-muted">C</ModKKey>
         </span>
       </CoreLink>
-      <CoreLink v-if="!mediumPlus" :to="{ path: '/account' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <AccountIcon class="w-5" />
-          <span>Account</span>
-        </div>
-      </CoreLink>
-      <CoreLink v-if="!mediumPlus" :to="{ path: '/settings' }" class="sidebar-link">
-        <div class="flex gap-3 items-center">
-          <SettingsIcon class="w-5" />
-          <span>Settings</span>
-        </div>
-      </CoreLink>
       <CoreLink :to="linkFeedback" class="sidebar-link">
         <div class="flex gap-3 items-center">
           <CoreAsset type="Feedback" class="sq-5" />
@@ -176,7 +158,7 @@ export default {
       </CoreLink>
       <div v-if="experimentalFeaturesEnabled">
         <button class="sidebar-link w-full" title="Experimental" @click="openFile">
-          <DocumentIcon class="w-5" />
+          <DocumentIcon class="sq-5" />
           <span class="action flex flex-grow items-center justify-between ml-3">
             <span>Open File</span>
             <BeakerIcon class="text-layer-muted w-5" />
@@ -184,30 +166,42 @@ export default {
         </button>
       </div>
       <CoreLink v-if="experimentalFeaturesEnabled" :to="{ path: '/assistant' }" class="sidebar-link allow-link-active">
-        <CoreAsset type="Logo" class="w-5" />
+        <CoreAsset type="Logo" class="sq-5" />
         <span class="action flex flex-grow items-center justify-between ml-3">
           <span>Assistant</span>
           <BeakerIcon class="text-layer-muted w-5" />
         </span>
       </CoreLink>
       <CoreLink v-if="!firebaseDisabled && !user.id" :to="{ path: '/account' }" class="sidebar-link text-brand" @click="trackCta">
-        <SaveIcon class="w-5" />
+        <SaveIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>Save Docs</span>
         </span>
       </CoreLink>
+      <CoreLink :to="{ path: '/settings' }" class="sidebar-link">
+        <div class="flex gap-3 items-center">
+          <SettingsIcon class="sq-5" />
+          <span>Settings</span>
+        </div>
+      </CoreLink>
+      <CoreLink :to="{ path: '/account' }" class="sidebar-link">
+        <div class="flex gap-3 items-center">
+          <AccountIcon class="sq-5" />
+          <span>Account</span>
+        </div>
+      </CoreLink>
     </CoreNavPanel>
     <CoreDivider />
     <CoreNavPanel class="flex flex-col gap-1" label="Filters">
       <CoreLink :to="{ path: '/docs/f/tasks' }" class="sidebar-link">
-        <CheckIcon class="w-5" />
+        <CheckIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>Tasks</span>
           <ModKKey class="text-layer-muted">T</ModKKey>
         </span>
       </CoreLink>
       <CoreLink :to="{ path: '/docs/f/discarded' }" class="sidebar-link">
-        <TrashIcon class="w-5" />
+        <TrashIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>Discarded</span>
           <ModKKey class="text-layer-muted">D</ModKKey>
@@ -230,7 +224,7 @@ export default {
     <CoreDivider v-if="contexts.length" />
     <CoreNavPanel v-if="contexts.length" class="flex flex-col gap-1" label="Workspaces">
       <button v-for="workspace in contexts" :key="workspace.id" class="sidebar-link w-full" @click="setContext(workspace)">
-        <WorkspaceIcon class="w-5" />
+        <WorkspaceIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>{{ workspace.name }}</span>
         </span>
@@ -239,7 +233,7 @@ export default {
     <CoreDivider v-if="tags.length" />
     <CoreNavPanel v-if="tags.length" class="flex flex-col gap-1" label="Tags">
       <CoreLink class="sidebar-link md:hidden" :to="{ path: '/tags' }">
-        <TagIcon class="w-5" />
+        <TagIcon class="sq-5" />
         <span class="ml-3 flex-grow">Tags</span>
       </CoreLink>
       <div v-if="mediumPlus" class="flex flex-col gap-1">
@@ -249,13 +243,13 @@ export default {
     <CoreDivider />
     <CoreNavPanel class="flex flex-col gap-1" label="Policies">
       <CoreLink :to="{ path: '/privacy-policy' }" class="sidebar-link">
-        <DocumentTextIcon class="w-5" />
+        <DocumentTextIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>Privacy Policy</span>
         </span>
       </CoreLink>
       <CoreLink :to="{ path: '/terms-and-conditions' }" class="sidebar-link">
-        <DocumentTextIcon class="w-5" />
+        <DocumentTextIcon class="sq-5" />
         <span class="action flex flex-grow items-stretch justify-between ml-3">
           <span>Terms &amp; Conditions</span>
         </span>
diff --git a/playwright.config.ts b/playwright.config.ts
index e74d92f5..5eab7eea 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -24,7 +24,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.BASE_URL,
+    baseURL: process.env.BASE_URL || 'http://127.0.0.1:8888',
 
     testIdAttribute: 'data-test-id',
 
@@ -74,7 +74,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'pnpm dev:full',
-    url: 'http://127.0.0.1:8888',
+    url: process.env.BASE_URL || 'http://127.0.0.1:8888',
     reuseExistingServer: !process.env.CI,
   },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80692b40..b501edce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ importers:
       '@mermaid-js/mermaid-mindmap':
         specifier: ^9.3.0
         version: 9.3.0
+      '@tabler/icons-vue':
+        specifier: ^3.11.0
+        version: 3.11.0(vue@3.4.21(typescript@5.3.3))
       codemirror-lang-mermaid:
         specifier: ^0.2.2
         version: 0.2.2
@@ -89,7 +92,7 @@ importers:
         version: 2.0.1
       vellma:
         specifier: ^0.8.1
-        version: 0.8.1(axios@1.6.8)(encoding@0.1.13)(eslint@8.56.0)(google-auth-library@9.10.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0)
+        version: 0.8.1(axios@1.6.8)(encoding@0.1.13)(eslint@8.56.0)(google-auth-library@8.9.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0)
       vue3-mq:
         specifier: ^3.1.3
         version: 3.1.3(vue@3.4.21(typescript@5.3.3))
@@ -112,6 +115,9 @@ importers:
       '@playwright/test':
         specifier: ^1.41.2
         version: 1.41.2
+      '@tailwindcss/container-queries':
+        specifier: ^0.1.1
+        version: 0.1.1(tailwindcss@3.4.0(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3)))
       '@tailwindcss/typography':
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.0(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3)))
@@ -1519,10 +1525,6 @@ packages:
     resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@fastify/busboy@2.1.0':
-    resolution: {integrity: sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==}
-    engines: {node: '>=14'}
-
   '@fastify/busboy@2.1.1':
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
@@ -1769,6 +1771,7 @@ packages:
   '@humanwhocodes/config-array@0.11.13':
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@@ -1776,6 +1779,7 @@ packages:
 
   '@humanwhocodes/object-schema@2.0.1':
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
+    deprecated: Use @eslint/object-schema instead
 
   '@ioredis/commands@1.2.0':
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
@@ -2393,6 +2397,19 @@ packages:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
+  '@tabler/icons-vue@3.11.0':
+    resolution: {integrity: sha512-YNtEZLEiwrmz91zEwysVoYOy78fAdRy8dcwdBMKYU4WrsSg38t7EMflygWRMmwjlS5KncARoEnNTmrmWoe4vhw==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
+  '@tabler/icons@3.11.0':
+    resolution: {integrity: sha512-/vZinJNvCYhdAB+RUsyCpanSPuOEKHHIZi4Uu0Bw7ilewHnQhCWUPrT704uHCRli2ROl7spADPmWzAqOganA5A==}
+
+  '@tailwindcss/container-queries@0.1.1':
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+
   '@tailwindcss/typography@0.5.10':
     resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
     peerDependencies:
@@ -3080,10 +3097,12 @@ packages:
 
   are-we-there-yet@1.1.7:
     resolution: {integrity: sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==}
+    deprecated: This package is no longer supported.
 
   are-we-there-yet@2.0.0:
     resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
     engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
 
   arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
@@ -3287,10 +3306,6 @@ packages:
   bignumber.js@9.1.2:
     resolution: {integrity: sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==}
 
-  binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -5303,10 +5318,12 @@ packages:
 
   gauge@1.2.7:
     resolution: {integrity: sha512-fVbU2wRE91yDvKUnrIaQlHKAWKY5e08PmztCrwuH5YVQ+Z/p3d0ny2T48o6uvAAXHIUnfaQdHkmxYbQft1eHVA==}
+    deprecated: This package is no longer supported.
 
   gauge@3.0.2:
     resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
     engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
 
   gaxios@4.3.3:
     resolution: {integrity: sha512-gSaYYIO1Y3wUtdfHmjDUZ8LWaxJQpiavzbF5Kq53akSzvmVg0RfyOcFDbO1KJ/KCGRFz2qG+lS81F0nkr7cRJA==}
@@ -5316,10 +5333,6 @@ packages:
     resolution: {integrity: sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==}
     engines: {node: '>=12'}
 
-  gaxios@6.6.0:
-    resolution: {integrity: sha512-bpOZVQV5gthH/jVCSuYuokRo2bTKOcuBiVWpjmTn6C5Agl5zclGfTljuGsQZxwwDBkli+YhZhP4TdlqTnhOezQ==}
-    engines: {node: '>=14'}
-
   gcp-metadata@4.3.1:
     resolution: {integrity: sha512-x850LS5N7V1F3UcV7PoupzGsyD6iVwTVvsh3tbXfkctZnBnjW5yu5z1/3k3SehF7TyoTIe78rJs02GMMy+LF+A==}
     engines: {node: '>=10'}
@@ -5328,10 +5341,6 @@ packages:
     resolution: {integrity: sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==}
     engines: {node: '>=12'}
 
-  gcp-metadata@6.1.0:
-    resolution: {integrity: sha512-Jh/AIwwgaxan+7ZUUmRLCjtchyDiqh4KjBJ5tW3plBZb5iL/BPcso8A5DlzeD9qlw0duCamnNdpFjxwaT0KyKg==}
-    engines: {node: '>=14'}
-
   generic-names@4.0.0:
     resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
 
@@ -5431,10 +5440,12 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@9.3.5:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
@@ -5480,10 +5491,6 @@ packages:
     resolution: {integrity: sha512-f7aQCJODJFmYWN6PeNKzgvy9LI2tYmXnzpNDHEjG5sDNPgGb2FXQyTBnXeSH+PAtpKESFD+LmHw3Ox3mN7e1Fg==}
     engines: {node: '>=12'}
 
-  google-auth-library@9.10.0:
-    resolution: {integrity: sha512-ol+oSa5NbcGdDqA+gZ3G3mev59OHBZksBTxY/tYwjtcp1H/scAFwJfSQU9/1RALoyZ7FslNbke8j4i3ipwlyuQ==}
-    engines: {node: '>=14'}
-
   google-gax@3.6.1:
     resolution: {integrity: sha512-g/lcUjGcB6DSw2HxgEmCDOrI/CByOwqRvsuUvNalHUK2iPPPlmAIpbMbl62u0YufGMr8zgE3JL7th6dCb1Ry+w==}
     engines: {node: '>=12'}
@@ -5492,11 +5499,13 @@ packages:
   google-p12-pem@3.1.4:
     resolution: {integrity: sha512-HHuHmkLgwjdmVRngf5+gSmpkyaRI6QmOg77J8tkNBHhNEI62sGHyw4/+UkgyZEI7h84NbWprXDJ+sa3xOYFvTg==}
     engines: {node: '>=10'}
+    deprecated: Package is no longer maintained
     hasBin: true
 
   google-p12-pem@4.0.1:
     resolution: {integrity: sha512-WPkN4yGtz05WZ5EhtlxNDWPhC4JIic6G8ePitwUWy4l+XPVYec+a0j0Ts47PDtW59y3RwAhUd9/h9ZZ63px6RQ==}
     engines: {node: '>=12.0.0'}
+    deprecated: Package is no longer maintained
     hasBin: true
 
   gopd@1.0.1:
@@ -5523,10 +5532,6 @@ packages:
     resolution: {integrity: sha512-4ccGpzz7YAr7lxrT2neugmXQ3hP9ho2gcaityLVkiUecAiwiy60Ii8gRbZeOsXV19fYaRjgBSshs8kXw+NKCPQ==}
     engines: {node: '>=12.0.0'}
 
-  gtoken@7.1.0:
-    resolution: {integrity: sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw==}
-    engines: {node: '>=14.0.0'}
-
   gunzip-maybe@1.4.2:
     resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==}
     hasBin: true
@@ -5760,6 +5765,7 @@ packages:
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.3:
     resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
@@ -7376,9 +7382,11 @@ packages:
 
   npmlog@2.0.4:
     resolution: {integrity: sha512-DaL6RTb8Qh4tMe2ttPT1qWccETy2Vi5/8p+htMpLBeXJTr2CAqnF5WQtSP2eFpvaNbhLZ5uilDb98mRm4Q+lZQ==}
+    deprecated: This package is no longer supported.
 
   npmlog@5.0.1:
     resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
+    deprecated: This package is no longer supported.
 
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
@@ -8303,6 +8311,7 @@ packages:
   read-package-json@7.0.0:
     resolution: {integrity: sha512-uL4Z10OKV4p6vbdvIXB+OzhInYtIozl/VxUBPgNkBuUi2DeRonnuspmaVAMcrkmfjKGNmRndyQAbE7/AmzGwFg==}
     engines: {node: ^16.14.0 || >=18.0.0}
+    deprecated: This package is no longer supported. Please use @npmcli/package-json instead.
 
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -8496,6 +8505,7 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rimraf@4.4.1:
@@ -9390,10 +9400,6 @@ packages:
     resolution: {integrity: sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==}
     engines: {node: '>=14.0'}
 
-  undici@5.28.2:
-    resolution: {integrity: sha512-wh1pHJHnUeQV5Xa8/kyQhO7WFa8M34l026L5P/+2TYiakvGy5Rdc8jWZVyG7ieht/0WgJLEd3kcU5gKx+6GC8w==}
-    engines: {node: '>=14.0'}
-
   undici@5.28.4:
     resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
     engines: {node: '>=14.0'}
@@ -10131,10 +10137,6 @@ packages:
     resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
     engines: {node: ^14.17.0 || >=16.0.0}
 
-  yaml@2.3.4:
-    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
-    engines: {node: '>= 14'}
-
   yaml@2.4.2:
     resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
     engines: {node: '>= 14'}
@@ -10303,7 +10305,7 @@ snapshots:
   '@babel/code-frame@7.24.2':
     dependencies:
       '@babel/highlight': 7.24.5
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   '@babel/compat-data@7.24.4': {}
 
@@ -10466,7 +10468,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.5
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   '@babel/parser@7.24.5':
     dependencies:
@@ -11653,8 +11655,6 @@ snapshots:
 
   '@eslint/js@8.56.0': {}
 
-  '@fastify/busboy@2.1.0': {}
-
   '@fastify/busboy@2.1.1': {}
 
   '@firebase/analytics-compat@0.2.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)':
@@ -12260,7 +12260,7 @@ snapshots:
   '@npmcli/fs@1.1.1':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.3.8
+      semver: 7.6.0
 
   '@npmcli/fs@3.1.0':
     dependencies:
@@ -12900,6 +12900,17 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tabler/icons-vue@3.11.0(vue@3.4.21(typescript@5.3.3))':
+    dependencies:
+      '@tabler/icons': 3.11.0
+      vue: 3.4.21(typescript@5.3.3)
+
+  '@tabler/icons@3.11.0': {}
+
+  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.0(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3)))':
+    dependencies:
+      tailwindcss: 3.4.0(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3))
+
   '@tailwindcss/typography@0.5.10(tailwindcss@3.4.0(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3)))':
     dependencies:
       lodash.castarray: 4.4.0
@@ -13430,7 +13441,7 @@ snapshots:
       recast: 0.21.5
       remark-frontmatter: 4.0.1
       remark-mdx-frontmatter: 1.1.1
-      semver: 7.3.8
+      semver: 7.6.0
       sort-package-json: 1.57.0
       tar-fs: 2.1.1
       tsconfig-paths: 4.2.0
@@ -14095,7 +14106,7 @@ snapshots:
       caniuse-lite: 1.0.30001597
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       postcss: 8.4.38
       postcss-value-parser: 4.2.0
 
@@ -14172,8 +14183,6 @@ snapshots:
 
   bignumber.js@9.1.2: {}
 
-  binary-extensions@2.2.0: {}
-
   binary-extensions@2.3.0: {}
 
   binary-search@1.3.6: {}
@@ -16722,18 +16731,6 @@ snapshots:
       - encoding
       - supports-color
 
-  gaxios@6.6.0(encoding@0.1.13):
-    dependencies:
-      extend: 3.0.2
-      https-proxy-agent: 7.0.4
-      is-stream: 2.0.1
-      node-fetch: 2.7.0(encoding@0.1.13)
-      uuid: 9.0.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    optional: true
-
   gcp-metadata@4.3.1(encoding@0.1.13):
     dependencies:
       gaxios: 4.3.3(encoding@0.1.13)
@@ -16750,15 +16747,6 @@ snapshots:
       - encoding
       - supports-color
 
-  gcp-metadata@6.1.0(encoding@0.1.13):
-    dependencies:
-      gaxios: 6.6.0(encoding@0.1.13)
-      json-bigint: 1.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    optional: true
-
   generic-names@4.0.0:
     dependencies:
       loader-utils: 3.2.1
@@ -16921,7 +16909,7 @@ snapshots:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.11
+      fast-glob: 3.3.2
       glob: 7.2.3
       ignore: 5.3.1
       merge2: 1.4.1
@@ -16975,19 +16963,6 @@ snapshots:
       - encoding
       - supports-color
 
-  google-auth-library@9.10.0(encoding@0.1.13):
-    dependencies:
-      base64-js: 1.5.1
-      ecdsa-sig-formatter: 1.0.11
-      gaxios: 6.6.0(encoding@0.1.13)
-      gcp-metadata: 6.1.0(encoding@0.1.13)
-      gtoken: 7.1.0(encoding@0.1.13)
-      jws: 4.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    optional: true
-
   google-gax@3.6.1(encoding@0.1.13):
     dependencies:
       '@grpc/grpc-js': 1.8.21
@@ -17059,15 +17034,6 @@ snapshots:
       - encoding
       - supports-color
 
-  gtoken@7.1.0(encoding@0.1.13):
-    dependencies:
-      gaxios: 6.6.0(encoding@0.1.13)
-      jws: 4.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    optional: true
-
   gunzip-maybe@1.4.2:
     dependencies:
       browserify-zlib: 0.1.4
@@ -17364,7 +17330,7 @@ snapshots:
       ansi-escapes: 4.3.2
       figures: 3.2.0
       inquirer: 8.2.6
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       run-async: 2.4.1
       rxjs: 7.8.1
 
@@ -17478,7 +17444,7 @@ snapshots:
 
   is-binary-path@2.1.0:
     dependencies:
-      binary-extensions: 2.2.0
+      binary-extensions: 2.3.0
 
   is-boolean-object@1.1.2:
     dependencies:
@@ -17962,7 +17928,7 @@ snapshots:
 
   kuler@2.0.0: {}
 
-  langchain@0.0.102(axios@1.6.8)(encoding@0.1.13)(google-auth-library@9.10.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0):
+  langchain@0.0.102(axios@1.6.8)(encoding@0.1.13)(google-auth-library@8.9.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0):
     dependencies:
       '@anthropic-ai/sdk': 0.4.4(encoding@0.1.13)
       ansi-styles: 5.2.0
@@ -17987,7 +17953,7 @@ snapshots:
       zod-to-json-schema: 3.23.0(zod@3.23.8)
     optionalDependencies:
       axios: 1.6.8
-      google-auth-library: 9.10.0(encoding@0.1.13)
+      google-auth-library: 8.9.0(encoding@0.1.13)
       ignore: 5.3.1
       playwright: 1.44.0
     transitivePeerDependencies:
@@ -18004,7 +17970,7 @@ snapshots:
 
   launch-editor@2.6.1:
     dependencies:
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       shell-quote: 1.8.1
 
   layout-base@1.0.2: {}
@@ -19426,12 +19392,12 @@ snapshots:
       fast-glob: 3.3.2
       js-yaml: 4.1.0
       supports-color: 9.4.0
-      undici: 5.28.2
+      undici: 5.28.4
       yargs-parser: 21.1.1
 
   openapi3-ts@3.2.0:
     dependencies:
-      yaml: 2.3.4
+      yaml: 2.4.2
 
   optionator@0.8.3:
     dependencies:
@@ -19852,7 +19818,7 @@ snapshots:
   postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3)):
     dependencies:
       lilconfig: 3.0.0
-      yaml: 2.3.4
+      yaml: 2.4.2
     optionalDependencies:
       postcss: 8.4.38
       ts-node: 10.9.2(@types/node@18.19.4)(typescript@5.3.3)
@@ -20027,7 +19993,7 @@ snapshots:
   postcss@8.4.38:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       source-map-js: 1.2.0
 
   prelude-ls@1.1.2: {}
@@ -21178,7 +21144,7 @@ snapshots:
       css-select: 4.3.0
       css-tree: 1.1.3
       csso: 4.2.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       stable: 0.1.8
 
   svgo@3.1.0:
@@ -21189,7 +21155,7 @@ snapshots:
       css-tree: 2.3.1
       css-what: 6.1.0
       csso: 5.0.5
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   tabtab@2.2.2:
     dependencies:
@@ -21233,7 +21199,7 @@ snapshots:
       micromatch: 4.0.5
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
@@ -21570,11 +21536,7 @@ snapshots:
 
   undici@5.26.5:
     dependencies:
-      '@fastify/busboy': 2.1.0
-
-  undici@5.28.2:
-    dependencies:
-      '@fastify/busboy': 2.1.0
+      '@fastify/busboy': 2.1.1
 
   undici@5.28.4:
     dependencies:
@@ -21745,7 +21707,7 @@ snapshots:
       pathe: 1.1.2
       scule: 1.1.1
       unplugin: 1.6.0
-      yaml: 2.3.4
+      yaml: 2.4.2
     optionalDependencies:
       vue-router: 4.2.5(vue@3.4.21(typescript@5.3.3))
     transitivePeerDependencies:
@@ -21801,7 +21763,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.0
       escalade: 3.1.1
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   update-check@1.5.4:
     dependencies:
@@ -21887,11 +21849,11 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vellma@0.8.1(axios@1.6.8)(encoding@0.1.13)(eslint@8.56.0)(google-auth-library@9.10.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0):
+  vellma@0.8.1(axios@1.6.8)(encoding@0.1.13)(eslint@8.56.0)(google-auth-library@8.9.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0):
     dependencies:
       chalk: 5.3.0
       events: 3.3.0
-      langchain: 0.0.102(axios@1.6.8)(encoding@0.1.13)(google-auth-library@9.10.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0)
+      langchain: 0.0.102(axios@1.6.8)(encoding@0.1.13)(google-auth-library@8.9.0(encoding@0.1.13))(ignore@5.3.1)(playwright@1.44.0)
       ml-distance: 4.0.1
       nanoid: 4.0.2
       openai: 3.3.0
@@ -22011,7 +21973,7 @@ snapshots:
       debug: 4.3.4(supports-color@8.1.1)
       mlly: 1.7.0
       pathe: 1.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       vite: 5.2.11(@types/node@18.19.4)(terser@5.31.0)
     transitivePeerDependencies:
       - '@types/node'
@@ -22028,7 +21990,7 @@ snapshots:
       cac: 6.7.14
       debug: 4.3.4(supports-color@8.1.1)
       pathe: 1.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       vite: 5.2.11(@types/node@18.19.4)(terser@5.31.0)
     transitivePeerDependencies:
       - '@types/node'
@@ -22074,7 +22036,7 @@ snapshots:
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
       open: 9.1.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       sirv: 2.0.4
       vite: 5.2.11(@types/node@18.19.4)(terser@5.31.0)
     optionalDependencies:
@@ -22152,7 +22114,7 @@ snapshots:
       local-pkg: 0.4.3
       magic-string: 0.30.8
       pathe: 1.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       std-env: 3.7.0
       strip-literal: 1.3.0
       tinybench: 2.5.1
@@ -22583,9 +22545,7 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 3.4.3
       lodash: 4.17.21
-      yaml: 2.3.4
-
-  yaml@2.3.4: {}
+      yaml: 2.4.2
 
   yaml@2.4.2: {}
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3f19d5a7..41243f01 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -39,6 +39,7 @@ module.exports = {
         'layer-hover': 'rgb(var(--layer-bg-hover) / <alpha-value>)',
         'layer-active': 'rgb(var(--layer-bg-active) / <alpha-value>)',
         'layer-disabled': 'rgb(var(--layer-bg-disabled) / <alpha-value>)',
+        'layer-border': 'rgb(var(--layer-border) / <alpha-value>)',
         'layer-text': 'rgb(var(--layer-text) / <alpha-value>)',
         'layer-text-muted': 'rgb(var(--layer-text-muted) / <alpha-value>)',
       },
@@ -56,6 +57,7 @@ module.exports = {
         'layer-active': 'rgb(var(--layer-text-active) / <alpha-value>)',
         'layer-disabled': 'rgb(var(--layer-text-disabled) / <alpha-value>)',
         'layer-muted': 'rgb(var(--layer-text-muted) / <alpha-value>)',
+        'layer-bg': 'rgb(var(--layer-bg) / <alpha-value>)',
       },
       typography: {
         inherit: {
@@ -83,6 +85,7 @@ module.exports = {
   },
   plugins: [
     require('@headlessui/tailwindcss'),
+    require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),
     plugin(({ addVariant, matchUtilities, theme }) => {
       addVariant('disabled-within', '&:has(*:disabled)')
diff --git a/test/cypress/e2e/sharing.cy.ts b/test/cypress/e2e/sharing.cy.ts
index 66940fcd..bc6bddf8 100644
--- a/test/cypress/e2e/sharing.cy.ts
+++ b/test/cypress/e2e/sharing.cy.ts
@@ -19,7 +19,7 @@ describe('sharing', () => {
     cy.waitForAppReady()
 
     cy.focused().type('hello')
-    cy.get('[data-test-toggle-sidebars]').click()
+    cy.get('[data-test-toggle-meta]:visible').click()
     cy.get('[data-test-share-doc]').click()
     cy.get('[data-test-public-url]').invoke('val').then((value) => {
       cy.waitForHook('network_docs_synced')
diff --git a/test/e2e/editor.spec.ts b/test/e2e/editor.spec.ts
index 9125989a..9fe178f4 100644
--- a/test/e2e/editor.spec.ts
+++ b/test/e2e/editor.spec.ts
@@ -136,7 +136,7 @@ test.describe('editor', () => {
 
     await page.keyboard.type('Check out [[link]] and [[My \n', { delay: 100 })
 
-    await page.getByTestId('toggle-sidebars').click()
+    await page.getByTestId('toggle-meta').nth(0).click()
 
     await expect(page.getByTestId('doc-references').getByRole('link')).toHaveText('My Test Doc')
   })
@@ -155,7 +155,7 @@ test.describe('editor', () => {
 
     await page.keyboard.type('# Test 2\n\nCheck out [[link]] and [[My \n', { delay: 100 })
 
-    await page.getByTestId('toggle-sidebars').click()
+    await page.getByTestId('toggle-meta').nth(0).click()
     await page.getByTestId('doc-references').getByRole('link').click()
 
     await expect(page.getByTestId('doc-backlinks').getByRole('link')).toHaveText('Test 2')
diff --git a/test/e2e/healthchecks/index.spec.ts b/test/e2e/healthchecks/index.spec.ts
index 4fe57a76..d5690ba8 100644
--- a/test/e2e/healthchecks/index.spec.ts
+++ b/test/e2e/healthchecks/index.spec.ts
@@ -38,7 +38,7 @@ test('sets the max-width of the editor to the readability max-width setting', as
 
   const inkContainers = await page.locator('.ink-mde-container').all()
 
-  expect(inkContainers).toHaveLength(3)
+  expect(inkContainers).toHaveLength(2)
 
   for (const inkContainer of inkContainers) {
     await expect(inkContainer).toHaveCSS('max-width', '1000px')