diff --git a/src/app/src/components/content/ContentCardReview.vue b/src/app/src/components/content/ContentCardReview.vue
index a2a9ff1c..fc817971 100644
--- a/src/app/src/components/content/ContentCardReview.vue
+++ b/src/app/src/components/content/ContentCardReview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DraftItem, DatabaseItem, DatabasePageItem } from '../../types'
 import type { PropType } from 'vue'
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { DraftStatus, ContentFileExtension } from '../../types'
 import { getFileExtension } from '../../utils/file'
 import { generateContentFromDocument, isEqual } from '../../utils/content'
@@ -25,6 +25,46 @@ const isLoadingContent = ref(false)
 const isOpen = ref(false)
 const isAutomaticFormattingDetected = ref(false)
 
+const height = ref(200)
+const isResizing = ref(false)
+const resizeStartY = ref(0)
+const resizeStartHeight = ref(0)
+const MIN_HEIGHT = 200
+const MAX_HEIGHT = 600
+
+function startResize(event: MouseEvent) {
+  event.preventDefault()
+  isResizing.value = true
+  resizeStartY.value = event.clientY
+  resizeStartHeight.value = height.value
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isResizing.value) return
+
+  event.preventDefault()
+  const deltaY = event.clientY - resizeStartY.value
+  const newHeight = resizeStartHeight.value + deltaY
+
+  // Limit to constraints
+  height.value = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, newHeight))
+}
+
+function handleMouseUp() {
+  if (!isResizing.value) return
+  isResizing.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+})
+
 const language = computed(() => {
   const ext = getFileExtension(props.draftItem.fsPath)
   switch (ext) {
@@ -65,7 +105,6 @@ async function initializeEditor() {
       language: language.value,
       colorMode: ui.colorMode,
       editorOptions: {
-        // hide unchanged regions
         hideUnchangedRegions: {
           enabled: true,
         },
@@ -91,7 +130,10 @@ async function initializeEditor() {
     :draft-item="draftItem"
   >
     <template #open>
-      <div class="bg-elevated h-[200px]">
+      <div
+        class="bg-elevated relative"
+        :style="{ height: `${height}px` }"
+      >
         <div
           v-if="isLoadingContent"
           class="p-4 flex items-center justify-center h-full"
@@ -116,6 +158,18 @@ async function initializeEditor() {
             class="w-full h-full"
           />
         </div>
+
+        <!-- Resize handle -->
+        <div
+          class="absolute bottom-0 left-0 right-0 h-1 cursor-row-resize bg-transparent hover:bg-accented transition-colors duration-200 group"
+          :class="{ 'bg-accented': isResizing }"
+          @mousedown="startResize"
+        >
+          <div
+            class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-1 w-8 bg-inverted rounded-t opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            :class="{ 'opacity-100': isResizing }"
+          />
+        </div>
       </div>
     </template>
   </ItemCardReview>
diff --git a/src/app/src/composables/useMonaco.ts b/src/app/src/composables/useMonaco.ts
index 313f1df9..0f566a3f 100644
--- a/src/app/src/composables/useMonaco.ts
+++ b/src/app/src/composables/useMonaco.ts
@@ -47,14 +47,8 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
       lineNumbers: 'off',
       readOnly: options.readOnly ?? false,
       wordWrap: 'on',
+      automaticLayout: true,
       overflowWidgetsDomNode: monacoPortal,
-      scrollbar: options.readOnly
-        ? {
-            vertical: 'hidden',
-            horizontal: 'hidden',
-            handleMouseWheel: false,
-          }
-        : undefined,
       ...options.editorOptions,
     })
 
diff --git a/src/app/src/composables/useMonacoDiff.ts b/src/app/src/composables/useMonacoDiff.ts
index 11a78d2e..189372a4 100644
--- a/src/app/src/composables/useMonacoDiff.ts
+++ b/src/app/src/composables/useMonacoDiff.ts
@@ -1,4 +1,4 @@
-import { watch, unref, type Ref } from 'vue'
+import { watch, unref, type Ref, shallowRef } from 'vue'
 import type { editor as Editor } from 'modern-monaco/editor-core'
 import { setupMonaco } from '../utils/monaco/index'
 
@@ -11,7 +11,7 @@ export interface UseMonacoDiffOptions {
 }
 
 export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
-  let editor: Editor.IStandaloneDiffEditor | null = null
+  const editor = shallowRef<Editor.IStandaloneDiffEditor | null>(null)
   let isInitialized = false
 
   const getTheme = (mode: 'light' | 'dark' = 'dark') => {
@@ -25,7 +25,7 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
     const monaco = await setupMonaco()
     const colorMode = unref(options.colorMode) || 'dark'
 
-    editor = monaco.createDiffEditor(el, {
+    editor.value = monaco.createDiffEditor(el, {
       theme: getTheme(colorMode),
       lineNumbers: 'off',
       readOnly: true,
@@ -37,15 +37,14 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
       ...options.editorOptions,
     })
 
-    // Watch for color mode changes
     watch(options.colorMode, (newMode) => {
-      editor?.updateOptions({
+      editor.value?.updateOptions({
         // @ts-expect-error -- theme is missing from IDiffEditorOptions
         theme: getTheme(newMode),
       })
     })
 
-    editor.setModel({
+    editor.value.setModel({
       original: monaco.editor.createModel(options.original, options.language),
       modified: monaco.editor.createModel(options.modified, options.language),
     })
@@ -63,15 +62,15 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
       }
       else if (!el && isInitialized) {
         isInitialized = false
-        editor?.dispose()
-        editor = null
+        editor.value?.dispose()
+        editor.value = null
       }
     },
     { immediate: true, flush: 'post' },
   )
 
   const setOptions = (opts: Editor.IStandaloneDiffEditorConstructionOptions) => {
-    editor?.updateOptions(opts)
+    editor.value?.updateOptions(opts)
   }
 
   return {
diff --git a/src/app/src/composables/useMonacoMinimal.ts b/src/app/src/composables/useMonacoMinimal.ts
deleted file mode 100644
index 06eaf4a1..00000000
--- a/src/app/src/composables/useMonacoMinimal.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-// import { computed, ref, watch, unref } from 'vue'
-// import type { editor as Editor } from 'modern-monaco/editor-core'
-// import type { Ref } from 'vue'
-// import { omit } from '../utils/object'
-// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco/index'
-
-// export function useMonacoMinimal(target: Ref, options: {
-//   code: string
-//   language: string
-//   readOnly?: boolean
-//   height?: { minLines: number, maxLines: number }
-//   resolvedTheme?: Ref<string>
-//   onChange?: (content: string) => void
-// }) {
-//   const isSetup = ref(false)
-//   let monaco: Awaited<ReturnType<typeof setupMonaco>>
-//   let editor: Editor.IStandaloneCodeEditor
-
-//   // //   const colorMode = useColorMode()
-
-//   const resolvedTheme = computed(() => {
-//     if (options.resolvedTheme) {
-//       return options.resolvedTheme.value
-//     }
-//     return baseEditorOptions.theme.dark // colorMode.value === 'dark' ? baseEditorOptions.theme.dark : baseEditorOptions.theme.light
-//   })
-
-//   // //   watch([() => colorMode.value, () => options.resolvedTheme?.value], () => setOptions({ theme: resolvedTheme.value }))
-
-//   const setContent = (content: string, preserveCursor = true) => {
-//     if (!isSetup.value) return
-//     const position = preserveCursor ? editor?.getPosition() : undefined
-
-//     editor?.setValue(content)
-
-//     if (position) {
-//       editor?.setPosition(position)
-//     }
-//   }
-
-//   const getContent = () => editor?.getValue()
-
-//   const init = async () => {
-//     monaco = await setupMonaco()
-
-//     watch(
-//       target,
-//       () => {
-//         const el = unref(target)
-
-//         if (!el) return
-
-//         setupTheme(monaco)
-
-//         const model = monaco.editor.createModel(options.code, options.language)
-
-//         editor = monaco.editor.create(el, {
-//           ...baseEditorOptions as unknown as Editor.IEditorOptions,
-//           theme: resolvedTheme.value,
-//           ...omit(options, 'resolvedTheme'),
-//           model,
-//           tabSize: 2,
-//           wordWrap: 'on',
-//           insertSpaces: true,
-//           autoClosingQuotes: 'always',
-//           detectIndentation: false,
-//           stickyScroll: {
-//             enabled: false,
-//           },
-//         })
-
-//         model.onDidChangeContent(() => {
-//           options.onChange?.(model.getValue())
-//         })
-
-//         if (options.height) {
-//           const lineHeight = 18
-//           let editingLayout = false
-//           const updateHeight = () => {
-//             if (editingLayout) {
-//               return
-//             }
-
-//             if (options.height) {
-//               const contentHeight = Math.min((options.height.maxLines + 2) * lineHeight, Math.max((options.height.minLines + 2) * lineHeight, editor.getContentHeight() + lineHeight))
-//               const { height: layoutHeight } = editor.getLayoutInfo()
-//               if (layoutHeight === contentHeight) {
-//                 return
-//               }
-
-//               try {
-//                 editingLayout = true
-//                 editor.layout({ height: contentHeight, width: el.clientWidth })
-//               }
-//               catch {
-//                 // Ignore
-//               }
-//             }
-//             editingLayout = false
-//           }
-//           editor.onDidContentSizeChange(updateHeight)
-//           updateHeight()
-//         }
-
-//         isSetup.value = true
-//       },
-//       {
-//         flush: 'post',
-//         immediate: true,
-//       },
-//     )
-//   }
-
-//   init()
-
-//   const setOptions = (opts: Editor.IEditorOverrideServices) => {
-//     editor?.updateOptions(opts)
-//   }
-
-//   return {
-//     getContent,
-//     setOptions,
-//     setContent,
-//   }
-// }