diff --git a/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue b/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue
index 7a7a4f55..e31d517f 100644
--- a/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue
+++ b/frontend/src/components/tiptap-extensions/WikiBubbleMenu.vue
@@ -1,223 +1,293 @@
 <template>
+  <div>
     <BubbleMenu
-        v-if="editor"
-        :editor="editor"
-        :should-show="shouldShowBubbleMenu"
-        :tippy-options="{
-            duration: 100,
-            maxWidth: 'none',
-            zIndex: 50,
-            popperOptions: {
-                modifiers: [
-                    {
-                        name: 'preventOverflow',
-                        options: {
-                            boundary: 'viewport',
-                            padding: 8
-                        }
-                    },
-                    {
-                        name: 'flip',
-                        options: {
-                            fallbackPlacements: ['top', 'bottom', 'right']
-                        }
-                    }
-                ]
-            }
-        }"
-        class="wiki-bubble-menu"
+      v-if="editor"
+      :editor="editor"
+      :should-show="shouldShowBubbleMenu"
+      :tippy-options="{
+        duration: 100,
+        maxWidth: 'none',
+        zIndex: 50,
+        popperOptions: {
+          modifiers: [
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: 'viewport',
+                padding: 8,
+              },
+            },
+            {
+              name: 'flip',
+              options: {
+                fallbackPlacements: ['top', 'bottom', 'right'],
+              },
+            },
+          ],
+        },
+      }"
+      class="wiki-bubble-menu"
     >
-        <div class="bubble-menu-buttons">
-            <!-- Text formatting -->
-            <button
-                @click="editor.chain().focus().toggleBold().run()"
-                :class="{ 'is-active': editor.isActive('bold') }"
-                title="Bold (Ctrl+B)"
-            >
-                <Bold :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleItalic().run()"
-                :class="{ 'is-active': editor.isActive('italic') }"
-                title="Italic (Ctrl+I)"
-            >
-                <Italic :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleStrike().run()"
-                :class="{ 'is-active': editor.isActive('strike') }"
-                title="Strikethrough"
-            >
-                <Strikethrough :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleCode().run()"
-                :class="{ 'is-active': editor.isActive('code') }"
-                title="Inline code"
-            >
-                <Code :size="16" :stroke-width="2" />
-            </button>
-
-            <span class="separator" />
-
-            <!-- Link -->
-            <button @click="toggleLink" :class="{ 'is-active': editor.isActive('link') }" title="Link">
-                <Link :size="16" :stroke-width="2" />
-            </button>
-
-            <span class="separator" />
-
-            <!-- Headings -->
-            <button
-                @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-                title="Heading 1"
-            >
-                <Heading1 :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-                title="Heading 2"
-            >
-                <Heading2 :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-                title="Heading 3"
-            >
-                <Heading3 :size="16" :stroke-width="2" />
-            </button>
-
-            <span class="separator" />
-
-            <!-- Lists -->
-            <button
-                @click="editor.chain().focus().toggleBulletList().run()"
-                :class="{ 'is-active': editor.isActive('bulletList') }"
-                title="Bullet list"
-            >
-                <List :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleOrderedList().run()"
-                :class="{ 'is-active': editor.isActive('orderedList') }"
-                title="Numbered list"
-            >
-                <ListOrdered :size="16" :stroke-width="2" />
-            </button>
-
-            <span class="separator" />
-
-            <!-- Quote and code block -->
-            <button
-                @click="editor.chain().focus().toggleBlockquote().run()"
-                :class="{ 'is-active': editor.isActive('blockquote') }"
-                title="Blockquote"
-            >
-                <Quote :size="16" :stroke-width="2" />
-            </button>
-            <button
-                @click="editor.chain().focus().toggleCodeBlock().run()"
-                :class="{ 'is-active': editor.isActive('codeBlock') }"
-                title="Code block"
-            >
-                <FileCode :size="16" :stroke-width="2" />
-            </button>
-        </div>
+      <div class="bubble-menu-buttons">
+        <button
+          @click="editor.chain().focus().toggleBold().run()"
+          :class="{ 'is-active': editor.isActive('bold') }"
+          title="Bold (Ctrl+B)"
+        >
+          <Bold :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleItalic().run()"
+          :class="{ 'is-active': editor.isActive('italic') }"
+          title="Italic (Ctrl+I)"
+        >
+          <Italic :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleStrike().run()"
+          :class="{ 'is-active': editor.isActive('strike') }"
+          title="Strikethrough"
+        >
+          <Strikethrough :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleCode().run()"
+          :class="{ 'is-active': editor.isActive('code') }"
+          title="Inline code"
+        >
+          <Code :size="16" :stroke-width="2" />
+        </button>
+
+        <span class="separator" />
+
+        <button
+          @click="toggleLink"
+          :class="{ 'is-active': editor.isActive('link') }"
+          title="Link"
+        >
+          <Link :size="16" :stroke-width="2" />
+        </button>
+
+        <span class="separator" />
+
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+          title="Heading 1"
+        >
+          <Heading1 :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+          title="Heading 2"
+        >
+          <Heading2 :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+          title="Heading 3"
+        >
+          <Heading3 :size="16" :stroke-width="2" />
+        </button>
+
+        <span class="separator" />
+
+        <button
+          @click="editor.chain().focus().toggleBulletList().run()"
+          :class="{ 'is-active': editor.isActive('bulletList') }"
+          title="Bullet list"
+        >
+          <List :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleOrderedList().run()"
+          :class="{ 'is-active': editor.isActive('orderedList') }"
+          title="Numbered list"
+        >
+          <ListOrdered :size="16" :stroke-width="2" />
+        </button>
+
+        <span class="separator" />
+
+        <button
+          @click="editor.chain().focus().toggleBlockquote().run()"
+          :class="{ 'is-active': editor.isActive('blockquote') }"
+          title="Blockquote"
+        >
+          <Quote :size="16" :stroke-width="2" />
+        </button>
+        <button
+          @click="editor.chain().focus().toggleCodeBlock().run()"
+          :class="{ 'is-active': editor.isActive('codeBlock') }"
+          title="Code block"
+        >
+          <FileCode :size="16" :stroke-width="2" />
+        </button>
+      </div>
     </BubbleMenu>
+
+    <BubbleMenu
+      v-if="editor"
+      :editor="editor"
+      :should-show="shouldShowTableMenu"
+      :tippy-options="{
+        duration: 100,
+        zIndex: 50,
+        offset: [0, 10],
+        popperOptions: {
+          modifiers: [
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: 'viewport',
+                padding: 8,
+              },
+            },
+            {
+              name: 'flip',
+              options: {
+                fallbackPlacements: ['top', 'bottom'],
+              },
+            },
+          ],
+        },
+      }"
+      class="wiki-bubble-menu"
+    >
+      <div class="bubble-menu-buttons">
+        <button @click="editor.chain().focus().addRowBefore().run()" title="Add Row Above">
+          <TableRowsSplit :size="16" style="transform: rotate(180deg)" />
+        </button>
+        <button @click="editor.chain().focus().addRowAfter().run()" title="Add Row Below">
+          <TableRowsSplit :size="16" />
+        </button>
+        <button @click="editor.chain().focus().deleteRow().run()" title="Delete Row">
+          <Trash2 :size="16" class="text-red-500" />
+        </button>
+
+        <span class="separator" />
+
+        <button @click="editor.chain().focus().addColumnBefore().run()" title="Add Column Before">
+          <TableColumnsSplit :size="16" style="transform: scaleX(-1)" />
+        </button>
+        <button @click="editor.chain().focus().addColumnAfter().run()" title="Add Column After">
+          <TableColumnsSplit :size="16" />
+        </button>
+        <button @click="editor.chain().focus().deleteColumn().run()" title="Delete Column">
+          <Trash2 :size="16" class="text-red-500" />
+        </button>
+
+        <span class="separator" />
+
+        <button @click="editor.chain().focus().deleteTable().run()" title="Delete Table">
+          <Trash2 :size="16" class="text-red-700" />
+        </button>
+      </div>
+    </BubbleMenu>
+  </div>
 </template>
 
 <script setup>
+import { BubbleMenu } from "@tiptap/vue-3/menus";
 import { NodeSelection } from '@tiptap/pm/state';
-import { BubbleMenu } from '@tiptap/vue-3/menus';
 import {
-	Bold,
-	Code,
-	FileCode,
-	Heading1,
-	Heading2,
-	Heading3,
-	Italic,
-	Link,
-	List,
-	ListOrdered,
-	Quote,
-	Strikethrough,
-} from 'lucide-vue-next';
+  Bold, Italic, Strikethrough, Code, Link, Heading1, Heading2, Heading3,
+  List, ListOrdered, Quote, FileCode, Trash2, TableRowsSplit, TableColumnsSplit,
+} from "lucide-vue-next";
 
 const props = defineProps({
-	editor: {
-		type: Object,
-		required: true,
-	},
+  editor: { type: Object, required: true },
 });
 
+// ROBUST CHECK: Look at the selection path to see if we are in a table cell
+const isInsideTable = (editor) => {
+  const { state } = editor;
+  const { $from } = state.selection;
+
+  // Crawl up from the current position to check parent node types
+  for (let d = $from.depth; d > 0; d--) {
+    const node = $from.node(d);
+    if (!node) continue;
+    const nodeType = node.type && node.type.name;
+    if (['table', 'tableCell', 'tableHeader', 'table_cell', 'table_header'].includes(nodeType)) {
+      return true;
+    }
+  }
+
+  // fallback to isActive check
+  return editor.isActive('table');
+};
+
 function shouldShowBubbleMenu({ editor, state }) {
-	const selection = state.selection;
+  const { selection } = state;
 
-	// Bubble menu is only for inline text formatting, not media/node selections.
-	if (selection instanceof NodeSelection) return false;
-	if (selection.empty) return false;
-	if (editor.isActive('videoBlock')) return false;
-	if (editor.isActive('image')) return false;
+  // Basic checks
+  if (selection instanceof NodeSelection || selection.empty) return false;
+  if (editor.isActive('videoBlock') || editor.isActive('image')) return false;
 
-	return true;
+  // CRITICAL FIX: Explicitly return false if the cursor is anywhere in a table
+  if (isInsideTable(editor)) return false;
+
+  return true;
 }
 
+const shouldShowTableMenu = ({ editor }) => {
+  return isInsideTable(editor);
+};
+
 function toggleLink() {
-	// Use the openLinkEditor command from our custom link extension
-	props.editor.commands.openLinkEditor();
+  props.editor.commands.openLinkEditor();
 }
 </script>
 
 <style scoped>
 .wiki-bubble-menu {
-    display: flex;
+  display: flex;
 }
 
 .bubble-menu-buttons {
-    display: flex;
-    align-items: center;
-    gap: 0.125rem;
-    background: var(--surface-white, #ffffff);
-    border: 1px solid var(--outline-gray-2, #e5e7eb);
-    border-radius: 0.5rem;
-    padding: 0.25rem;
-    box-shadow:
-        0 4px 6px -1px rgb(0 0 0 / 0.1),
-        0 2px 4px -2px rgb(0 0 0 / 0.1);
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  background: var(--surface-white, #ffffff);
+  border: 1px solid var(--outline-gray-2, #e5e7eb);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 .bubble-menu-buttons button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: transparent;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: var(--ink-gray-6, #4b5563);
-    transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: var(--ink-gray-6, #4b5563);
+  transition: all 0.15s ease;
 }
 
 .bubble-menu-buttons button:hover {
-    background: var(--surface-gray-2, #f3f4f6);
-    color: var(--ink-gray-9, #111827);
+  background: var(--surface-gray-2, #f3f4f6);
+  color: var(--ink-gray-9, #111827);
 }
 
 .bubble-menu-buttons button.is-active {
-    background: var(--surface-gray-3, #e5e7eb);
-    color: var(--ink-gray-9, #111827);
+  background: var(--surface-gray-3, #e5e7eb);
+  color: var(--ink-gray-9, #111827);
 }
 
 .separator {
-    width: 1px;
-    height: 20px;
-    background: var(--outline-gray-2, #e5e7eb);
-    margin: 0 0.25rem;
+  width: 1px;
+  height: 20px;
+  background: var(--outline-gray-2, #e5e7eb);
+  margin: 0 0.25rem;
 }
 </style>
diff --git a/wiki/templates/wiki/layout.html b/wiki/templates/wiki/layout.html
index 44f461eb..1d2cb07c 100644
--- a/wiki/templates/wiki/layout.html
+++ b/wiki/templates/wiki/layout.html
@@ -52,9 +52,12 @@
 
         <!-- Main content + TOC area -->
         {% block content %}
-        <main class="flex-1 min-w-0 px-4 py-6 lg:px-6 lg:py-8 xl:px-12 flex justify-center">
-            {% block body %} {% endblock %}
+        <main class="flex-1 min-w-0 px-4 py-6 lg:px-6 lg:py-8 xl:px-12">
+            <div class="w-full">
+                {% block body %}{% endblock %}
+            </div>
         </main>
+
         {% endblock %}
     </div>