diff --git a/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx b/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx
index 6202aa8d0..806a93ab4 100644
--- a/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx
+++ b/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx
@@ -124,6 +124,7 @@ export function DocumentDescriptionPage(props: { queryRef: PreloadedQuery<Docume
     <RichEditor
       className="flex-1"
       content={currentVersion.content}
+      data-theme="document"
       disabled={currentVersion.status !== "DRAFT"}
       onChangeContent={handleUpdate}
     />
diff --git a/packages/ui/src/Layouts/Layout.tsx b/packages/ui/src/Layouts/Layout.tsx
index 55d2037cc..641704f24 100644
--- a/packages/ui/src/Layouts/Layout.tsx
+++ b/packages/ui/src/Layouts/Layout.tsx
@@ -85,7 +85,7 @@ export function Layout({
               hasDrawer && "pr-105",
             )}
           >
-            <div className="py-12 px-8 max-w-[1200px] w-full mx-auto h-full">
+            <div className="py-12 px-8 max-w-[1200px] w-full mx-auto min-h-[calc(100vh-48px)]">
               {children}
             </div>
           </main>
diff --git a/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx b/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx
index 4773800af..ff9cc8922 100644
--- a/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx
+++ b/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx
@@ -19,7 +19,7 @@ type BlockMenuTriggerProps = {
 };
 
 export function BlockMenuTrigger({ editor, hoveredBlock }: BlockMenuTriggerProps) {
-  const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 40);
+  const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 32);
 
   const handleTriggerClick = () => {
     try {
@@ -81,7 +81,7 @@ export function BlockMenuTrigger({ editor, hoveredBlock }: BlockMenuTriggerProps
       }}
       className={trigger()}
     >
-      <PlusIcon size={16} weight="bold" />
+      <PlusIcon size={14} weight="bold" />
     </button>
   );
 }
diff --git a/packages/ui/src/RichEditor/BlockMenu/variants.ts b/packages/ui/src/RichEditor/BlockMenu/variants.ts
index 174ea2353..a2171deb9 100644
--- a/packages/ui/src/RichEditor/BlockMenu/variants.ts
+++ b/packages/ui/src/RichEditor/BlockMenu/variants.ts
@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
 export const blockMenuVariants = tv({
   slots: {
     trigger: [
-      "z-20 flex size-6 items-center justify-center",
+      "z-20 flex size-5 items-center justify-center",
       "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary text-xl font-light cursor-pointer",
     ],
     menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],
diff --git a/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx b/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx
index 89fbcf56f..09c3db4e8 100644
--- a/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx
+++ b/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx
@@ -37,7 +37,7 @@ export function OptionsMenuTrigger({
   menuRefs,
   getReferenceProps,
 }: OptionsMenuTriggerProps) {
-  const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 16);
+  const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 12);
 
   const onDragStart = (e: DragEvent<HTMLButtonElement>) => {
     if (!hoveredBlock) return;
@@ -91,7 +91,7 @@ export function OptionsMenuTrigger({
       }}
       className={trigger()}
     >
-      <DotsSixVerticalIcon size={20} weight="bold" />
+      <DotsSixVerticalIcon size={16} weight="bold" />
     </button>
   );
 }
diff --git a/packages/ui/src/RichEditor/OptionsMenu/variants.ts b/packages/ui/src/RichEditor/OptionsMenu/variants.ts
index 2779ed683..6b999ee3b 100644
--- a/packages/ui/src/RichEditor/OptionsMenu/variants.ts
+++ b/packages/ui/src/RichEditor/OptionsMenu/variants.ts
@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
 export const optionsMenuVariants = tv({
   slots: {
     trigger: [
-      "z-20 flex size-6 items-center justify-center",
+      "z-20 flex size-5 items-center justify-center",
       "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary cursor-grab",
     ],
     menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],
diff --git a/packages/ui/src/RichEditor/RichEditor.tsx b/packages/ui/src/RichEditor/RichEditor.tsx
index 1bea03df7..b61e0cbb0 100644
--- a/packages/ui/src/RichEditor/RichEditor.tsx
+++ b/packages/ui/src/RichEditor/RichEditor.tsx
@@ -67,10 +67,10 @@ const extensions = [
 ];
 
 const richEditorVariants = tv({
-  base: ["relative flex-1 pb-14"],
+  base: ["relative flex-1 py-14 pr-8 bg-level-1 shadow-base"],
   variants: {
     disabled: {
-      true: "",
+      true: "pl-8",
       false: "pl-14",
     },
   },
@@ -83,7 +83,7 @@ type RichEditorProps = ComponentProps<"div"> & {
 };
 
 export function RichEditor(props: RichEditorProps) {
-  const { className, content, disabled = false, onChangeContent } = props;
+  const { className, content, disabled = false, onChangeContent, ...divProps } = props;
 
   const handleUpdate = useCallback(
     ({ editor }: { editor: Editor }) => {
@@ -112,7 +112,7 @@ export function RichEditor(props: RichEditorProps) {
   if (!editor) return null;
 
   return (
-    <div className={richEditorVariants({ className, disabled })}>
+    <div className={richEditorVariants({ className, disabled })} {...divProps}>
       {!disabled
         && (
           <>
diff --git a/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx b/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx
index 78744e217..93137ae0c 100644
--- a/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx
+++ b/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx
@@ -145,7 +145,7 @@ export function TableColumnMenuTrigger({
     strategy: "fixed",
     placement: "top",
     middleware: [
-      offset(6),
+      offset(4),
       size({
         apply({ rects, elements }) {
           Object.assign(elements.floating.style, {
diff --git a/packages/ui/src/RichEditor/TableColumnMenu/variants.ts b/packages/ui/src/RichEditor/TableColumnMenu/variants.ts
index 9a584c54a..843fa8171 100644
--- a/packages/ui/src/RichEditor/TableColumnMenu/variants.ts
+++ b/packages/ui/src/RichEditor/TableColumnMenu/variants.ts
@@ -9,7 +9,7 @@ export const tableColumnMenuVariants = tv({
     trigger: [
       "z-20 flex items-center justify-center",
       "rounded text-txt-tertiary bg-subtle hover:bg-border-solid cursor-grab",
-      "py-0.5 h-3",
+      "py-0.5 h-2",
     ],
     menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],
   },
diff --git a/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx b/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx
index ade34157c..769817268 100644
--- a/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx
+++ b/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx
@@ -145,7 +145,7 @@ export function TableRowMenuTrigger({
     strategy: "fixed",
     placement: "left",
     middleware: [
-      offset(6),
+      offset(4),
       size({
         apply({ rects, elements }) {
           Object.assign(elements.floating.style, {
diff --git a/packages/ui/src/RichEditor/TableRowMenu/variants.ts b/packages/ui/src/RichEditor/TableRowMenu/variants.ts
index 76161f50c..dda1342cb 100644
--- a/packages/ui/src/RichEditor/TableRowMenu/variants.ts
+++ b/packages/ui/src/RichEditor/TableRowMenu/variants.ts
@@ -9,7 +9,7 @@ export const tableRowMenuVariants = tv({
     trigger: [
       "z-20 flex flex-col items-center justify-center",
       "rounded text-txt-tertiary bg-subtle hover:bg-border-solid cursor-grab",
-      "px-0.5 w-3",
+      "px-0.5 w-2",
     ],
     menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],
   },
diff --git a/packages/ui/src/rich-editor.css b/packages/ui/src/rich-editor.css
index 4a6dc19d4..d73cf0109 100644
--- a/packages/ui/src/rich-editor.css
+++ b/packages/ui/src/rich-editor.css
@@ -6,7 +6,7 @@
 
 .tiptap {
     p {
-        @apply my-2 min-w-0.5;
+        @apply my-2 min-w-0.5 font-light text-sm;
         code { @apply py-0.5 px-1; }
     }
 
@@ -68,7 +68,7 @@
         }
         th {
             @apply px-2 py-1.5 border border-border-mid border-collapse bg-subtle text-left font-semibold relative;
-            p { @apply m-0; }
+            p { @apply m-0 font-medium; }
         }
         td {
             @apply px-2 py-1.5 border border-border-mid border-collapse bg-level-0 text-left relative;
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
index f38607090..03e8d90f9 100644
--- a/packages/ui/src/theme.css
+++ b/packages/ui/src/theme.css
@@ -171,79 +171,112 @@
         0px 2px 12px 0px rgba(0, 0, 0, 0.06);
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --color-level-0: #151715;
-        --color-level-1: #1a1d19;
-        --color-level-2: #20241f;
-        --color-level-3: #3b3f3a;
+@custom-variant document (&:where([data-theme=document] *));
 
-        --color-black: #ffffff;
+@layer theme {
+    :root, :host {
+        @variant dark {
+            --color-level-0: #151715;
+            --color-level-1: #1a1d19;
+            --color-level-2: #20241f;
+            --color-level-3: #3b3f3a;
 
-        /* Text colors */
-        --color-txt-primary: #eceeec;
-        --color-invert: #151715;
-        --color-txt-invert: #fcfdfc;
-        --color-txt-secondary: #9aa299;
-        --color-txt-tertiary: #778175;
-        --color-txt-quaternary: #4c514b;
-        --color-txt-disabled: #3b3f3a;
-        --color-txt-accent: #c4f042;
-        --color-txt-danger: #ff6369;
-        --color-txt-success: rgba(181, 255, 44, 0.72);
-        --color-txt-info: #52a9ff;
-        --color-txt-warning: #f1a10d;
+            --color-black: #ffffff;
 
-        /* Backgrounds */
-        --color-primary: #c4f042;
-        --color-invert: #151715;
-        --color-secondary: rgba(214, 251, 196, 0.06);
-        --color-tertiary: rgba(255, 255, 255, 0);
-        --color-subtle: rgba(213, 254, 175, 0.03);
-        --color-highlight: rgba(214, 251, 196, 0.06);
-        --color-active: rgba(239, 254, 226, 0.08);
-        --color-accent: #c4f042;
-        --color-danger: rgba(254, 58, 61, 0.13);
-        --color-danger-plain: rgba(254, 58, 61, 0.13);
-        --color-danger-dark: rgba(255, 89, 95, 0.94);
-        --color-success: rgba(184, 253, 106, 0.06);
-        --color-info: rgba(22, 119, 254, 0.14);
-        --color-warning: rgba(254, 115, 0, 0.09);
-        --color-dialog: #151715;
+            /* Text colors */
+            --color-txt-primary: #eceeec;
+            --color-invert: #151715;
+            --color-txt-invert: #fcfdfc;
+            --color-txt-secondary: #9aa299;
+            --color-txt-tertiary: #778175;
+            --color-txt-quaternary: #4c514b;
+            --color-txt-disabled: #3b3f3a;
+            --color-txt-accent: #c4f042;
+            --color-txt-danger: #ff6369;
+            --color-txt-success: rgba(181, 255, 44, 0.72);
+            --color-txt-info: #52a9ff;
+            --color-txt-warning: #f1a10d;
 
-        /* Borders */
-        --color-border-solid: rgba(239, 254, 226, 0.08);
-        --color-border-low: rgba(239, 254, 226, 0.08);
-        --color-border-mid: rgba(233, 254, 223, 0.1);
-        --color-border-strong: rgba(241, 255, 237, 0.25);
-        --color-border-active: rgba(253, 255, 253, 0.93);
-        --color-border-accent: #c4f042;
-        --color-border-danger: #f2555a;
-        --color-border-success: #c4f042;
-        --color-border-warning: #ffcb47;
-        --color-border-info: #369eff;
+            /* Backgrounds */
+            --color-primary: #c4f042;
+            --color-invert: #151715;
+            --color-secondary: rgba(214, 251, 196, 0.06);
+            --color-tertiary: rgba(255, 255, 255, 0);
+            --color-subtle: rgba(213, 254, 175, 0.03);
+            --color-highlight: rgba(214, 251, 196, 0.06);
+            --color-active: rgba(239, 254, 226, 0.08);
+            --color-accent: #c4f042;
+            --color-danger: rgba(254, 58, 61, 0.13);
+            --color-danger-plain: rgba(254, 58, 61, 0.13);
+            --color-danger-dark: rgba(255, 89, 95, 0.94);
+            --color-success: rgba(184, 253, 106, 0.06);
+            --color-info: rgba(22, 119, 254, 0.14);
+            --color-warning: rgba(254, 115, 0, 0.09);
+            --color-dialog: #151715;
 
-        /* Hover */
-        --color-primary-hover: rgba(196, 240, 66, 0.88);
-        --color-invert-hover: #1a1d19;
-        --color-secondary-hover: rgba(214, 251, 196, 0.06);
-        --color-tertiary-hover: rgba(213, 254, 175, 0.03);
-        --color-subtle-hover: rgba(214, 251, 196, 0.06);
-        --color-highlight-hover: rgba(233, 254, 223, 0.1);
-        --color-accent-hover: rgba(183, 255, 50, 0.82);
-        --color-active-hover: rgba(233, 254, 223, 0.1);
-        --color-danger-hover: rgba(254, 58, 61, 0.7);
+            /* Borders */
+            --color-border-solid: rgba(239, 254, 226, 0.08);
+            --color-border-low: rgba(239, 254, 226, 0.08);
+            --color-border-mid: rgba(233, 254, 223, 0.1);
+            --color-border-strong: rgba(241, 255, 237, 0.25);
+            --color-border-active: rgba(253, 255, 253, 0.93);
+            --color-border-accent: #c4f042;
+            --color-border-danger: #f2555a;
+            --color-border-success: #c4f042;
+            --color-border-warning: #ffcb47;
+            --color-border-info: #369eff;
 
-        /* Pressed */
-        --color-primary-pressed: rgba(196, 240, 66, 0.84);
-        --color-invert-pressed: #20241f;
-        --color-secondary-pressed: rgba(239, 254, 226, 0.08);
-        --color-tertiary-pressed: rgba(214, 251, 196, 0.06);
-        --color-subtle-pressed: rgba(239, 254, 226, 0.08);
-        --color-highlight-pressed: rgba(236, 254, 229, 0.13);
-        --color-accent-pressed: rgba(209, 255, 70, 0.94);
-        --color-active-pressed: rgba(236, 254, 229, 0.13);
-        --color-danger-pressed: rgba(254, 58, 61, 0.5);
+            /* Hover */
+            --color-primary-hover: rgba(196, 240, 66, 0.88);
+            --color-invert-hover: #1a1d19;
+            --color-secondary-hover: rgba(214, 251, 196, 0.06);
+            --color-tertiary-hover: rgba(213, 254, 175, 0.03);
+            --color-subtle-hover: rgba(214, 251, 196, 0.06);
+            --color-highlight-hover: rgba(233, 254, 223, 0.1);
+            --color-accent-hover: rgba(183, 255, 50, 0.82);
+            --color-active-hover: rgba(233, 254, 223, 0.1);
+            --color-danger-hover: rgba(254, 58, 61, 0.7);
+
+            /* Pressed */
+            --color-primary-pressed: rgba(196, 240, 66, 0.84);
+            --color-invert-pressed: #20241f;
+            --color-secondary-pressed: rgba(239, 254, 226, 0.08);
+            --color-tertiary-pressed: rgba(214, 251, 196, 0.06);
+            --color-subtle-pressed: rgba(239, 254, 226, 0.08);
+            --color-highlight-pressed: rgba(236, 254, 229, 0.13);
+            --color-accent-pressed: rgba(209, 255, 70, 0.94);
+            --color-active-pressed: rgba(236, 254, 229, 0.13);
+            --color-danger-pressed: rgba(254, 58, 61, 0.5);
+        }
+    }
+
+    * {
+        @variant document {
+            --text-4xl: 16pt;
+            --text-4xl--line-height: 21pt;
+            --text-4xl--letter-spacing: -0.6px;
+            --text-3xl: 15pt;
+            --text-3xl--line-height: 21pt;
+            --text-3xl--letter-spacing: -0.4px;
+            --text-2xl: 14pt;
+            --text-2xl--line-height: 21pt;
+            --text-2xl--letter-spacing: 0;
+            --text-xl: 13pt;
+            --text-xl--line-height: 18pt;
+            --text-xl--letter-spacing: 0;
+            --text-lg: 12pt;
+            --text-lg--line-height: 18pt;
+            --text-lg--letter-spacing: 0;
+            --text-base: 11pt;
+            --text-base--line-height: 18pt;
+            --text-base--letter-spacing: 0;
+            --text-sm: 10pt;
+            --text-sm--line-height: 15pt;
+            --text-sm--letter-spacing: 0;
+            --text-xs: 9pt;
+            --text-xs--line-height: 15pt;
+            --text-xs--letter-spacing: 0;
+        }
     }
 }