diff --git a/src/components/blog/PostForm.tsx b/src/components/blog/PostForm.tsx
index 9ccaf05..919e53f 100644
--- a/src/components/blog/PostForm.tsx
+++ b/src/components/blog/PostForm.tsx
@@ -566,7 +566,7 @@ export default function PostForm(props: PostFormProps) {
         <div class="mt-2 flex justify-center">
           <a
             href={`/blog/${encodeURIComponent(title().replaceAll(" ", "_"))}`}
-            class="border-blue bg-blue hover:bg-blue rounded border px-4 py-2 shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90"
+            class="border-lavender bg-blue rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90"
           >
             Go to Post
           </a>
diff --git a/src/components/blog/TextEditor.tsx b/src/components/blog/TextEditor.tsx
index dd39d16..4decbc8 100644
--- a/src/components/blog/TextEditor.tsx
+++ b/src/components/blog/TextEditor.tsx
@@ -1,5 +1,5 @@
 import { Show, untrack, createEffect, on, createSignal, For } from "solid-js";
-import { createTiptapEditor, useEditorHTML } from "solid-tiptap";
+import { createTiptapEditor } from "solid-tiptap";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
@@ -397,6 +397,32 @@ export default function TextEditor(props: TextEditorProps) {
   const [keyboardVisible, setKeyboardVisible] = createSignal(false);
   const [keyboardHeight, setKeyboardHeight] = createSignal(0);
 
+  // Force reactive updates for button states
+  const [editorState, setEditorState] = createSignal(0);
+
+  // Helper to check editor active state reactively
+  const isActive = (type: string, attrs?: Record<string, any>) => {
+    editorState(); // Track reactive dependency
+    const instance = editor();
+    return instance ? instance.isActive(type, attrs) : false;
+  };
+
+  const isAlignActive = (alignment: string) => {
+    editorState();
+    const instance = editor();
+    if (!instance) return false;
+
+    const { $from } = instance.state.selection;
+    const node = $from.node($from.depth);
+    const currentAlign = node?.attrs?.textAlign;
+
+    if (currentAlign) {
+      return currentAlign === alignment;
+    }
+
+    return alignment === "left";
+  };
+
   const editor = createTiptapEditor(() => ({
     element: editorRef,
     extensions: [
@@ -498,6 +524,9 @@ export default function TextEditor(props: TextEditorProps) {
       });
     },
     onSelectionUpdate: ({ editor }) => {
+      // Force reactive update for button states
+      setEditorState((prev) => prev + 1);
+
       const { from, to } = editor.state.selection;
       const hasSelection = from !== to;
 
@@ -1411,7 +1440,7 @@ export default function TextEditor(props: TextEditorProps) {
       ref={containerRef}
       class="border-surface2 text-text w-full max-w-full overflow-hidden rounded-md border px-4 py-2"
       classList={{
-        "fixed inset-0 z-[100] m-0 h-screen max-h-screen rounded-none flex flex-col":
+        "fixed inset-0 z-100 m-0 h-screen max-h-screen rounded-none flex flex-col":
           isFullscreen(),
         "bg-base": isFullscreen()
       }}
@@ -1423,7 +1452,7 @@ export default function TextEditor(props: TextEditorProps) {
             <Show when={showBubbleMenu()}>
               <div
                 ref={bubbleMenuRef}
-                class="bg-mantle text-text fixed z-[110] w-fit rounded p-2 text-sm whitespace-nowrap shadow-lg"
+                class="bg-crust text-text absolute z-110 w-fit rounded p-2 text-sm whitespace-nowrap shadow-xl"
                 style={{
                   top: `${bubbleMenuPosition().top}px`,
                   left: `${bubbleMenuPosition().left}px`,
@@ -1431,7 +1460,7 @@ export default function TextEditor(props: TextEditorProps) {
                   "margin-top": "-8px"
                 }}
               >
-                <div class="flex flex-wrap gap-1">
+                <div class="flex scale-105 flex-wrap gap-1">
                   <button
                     type="button"
                     onClick={() =>
@@ -1442,10 +1471,10 @@ export default function TextEditor(props: TextEditorProps) {
                         .run()
                     }
                     class={`${
-                      instance().isActive("heading", { level: 1 })
+                      isActive("heading", { level: 1 })
                         ? "bg-surface2"
                         : "hover:bg-surface1"
-                    } rounded px-2 py-1`}
+                    } touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     H1
                   </button>
@@ -1459,10 +1488,10 @@ export default function TextEditor(props: TextEditorProps) {
                         .run()
                     }
                     class={`${
-                      instance().isActive("heading", { level: 2 })
+                      isActive("heading", { level: 2 })
                         ? "bg-surface2"
                         : "hover:bg-surface1"
-                    } rounded px-2 py-1`}
+                    } touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     H2
                   </button>
@@ -1476,10 +1505,10 @@ export default function TextEditor(props: TextEditorProps) {
                         .run()
                     }
                     class={`${
-                      instance().isActive("heading", { level: 3 })
+                      isActive("heading", { level: 3 })
                         ? "bg-surface2"
                         : "hover:bg-surface1"
-                    } rounded px-2 py-1`}
+                    } touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     H3
                   </button>
@@ -1489,10 +1518,8 @@ export default function TextEditor(props: TextEditorProps) {
                       instance().chain().focus().toggleBold().run()
                     }
                     class={`${
-                      instance().isActive("bold")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
+                      isActive("bold") && "bg-crust"
+                    } bg-opacity-30 hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     <strong>B</strong>
                   </button>
@@ -1502,10 +1529,8 @@ export default function TextEditor(props: TextEditorProps) {
                       instance().chain().focus().toggleItalic().run()
                     }
                     class={`${
-                      instance().isActive("italic")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
+                      isActive("italic") && "bg-crust"
+                    } bg-opacity-30 hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     <em>I</em>
                   </button>
@@ -1515,10 +1540,8 @@ export default function TextEditor(props: TextEditorProps) {
                       instance().chain().focus().toggleStrike().run()
                     }
                     class={`${
-                      instance().isActive("strike")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
+                      isActive("strike") && "bg-crust"
+                    } bg-opacity-30 hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     <s>S</s>
                   </button>
@@ -1526,36 +1549,19 @@ export default function TextEditor(props: TextEditorProps) {
                     type="button"
                     onClick={setLink}
                     class={`${
-                      instance().isActive("link")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
+                      isActive("link") && "bg-crust"
+                    } bg-opacity-30 hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none`}
                   >
                     Link
                   </button>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      instance().chain().focus().toggleCode().run()
-                    }
-                    class={`${
-                      instance().isActive("code")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
-                  >
-                    Code
-                  </button>
                   <button
                     type="button"
                     onClick={() =>
                       instance().chain().focus().toggleSuperscript().run()
                     }
                     class={`${
-                      instance().isActive("superscript")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
+                      isActive("superscript") && "bg-crust"
+                    } bg-opacity-30 hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none`}
                     title="Superscript (Reference)"
                   >
                     X<sup>n</sup>
@@ -1566,31 +1572,14 @@ export default function TextEditor(props: TextEditorProps) {
                       instance().chain().focus().toggleSubscript().run()
                     }
                     class={`${
-                      instance().isActive("subscript")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
+                      isActive("subscript") && "bg-crust"
+                    } bg-opacity-30 hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none`}
                     title="Subscript"
                   >
                     X<sub>n</sub>
                   </button>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      instance().chain().focus().toggleTaskList().run()
-                    }
-                    class={`${
-                      instance().isActive("taskList")
-                        ? "bg-crust"
-                        : "hover:bg-crust"
-                    } bg-opacity-30 hover:bg-opacity-30 rounded px-2 py-1`}
-                    title="Task List"
-                  >
-                    ☑
-                  </button>
-
                   {/* Table controls in bubble menu */}
-                  <Show when={instance().isActive("table")}>
+                  <Show when={isActive("table")}>
                     <div class="border-crust mx-1 border-l opacity-30"></div>
 
                     <button
@@ -1598,7 +1587,7 @@ export default function TextEditor(props: TextEditorProps) {
                       onClick={() =>
                         instance().chain().focus().addRowBefore().run()
                       }
-                      class="hover:bg-crust hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-crust hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Add Row Before"
                     >
                       ↑ Row
@@ -1609,7 +1598,7 @@ export default function TextEditor(props: TextEditorProps) {
                       onClick={() =>
                         instance().chain().focus().addRowAfter().run()
                       }
-                      class="hover:bg-crust hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-crust hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Add Row After"
                     >
                       Row ↓
@@ -1618,7 +1607,7 @@ export default function TextEditor(props: TextEditorProps) {
                     <button
                       type="button"
                       onClick={deleteRowWithConfirmation}
-                      class="hover:bg-red hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-red hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Delete Row"
                     >
                       ✕ Row
@@ -1631,7 +1620,7 @@ export default function TextEditor(props: TextEditorProps) {
                       onClick={() =>
                         instance().chain().focus().addColumnBefore().run()
                       }
-                      class="hover:bg-crust hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-crust hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Add Column Before"
                     >
                       ← Col
@@ -1642,7 +1631,7 @@ export default function TextEditor(props: TextEditorProps) {
                       onClick={() =>
                         instance().chain().focus().addColumnAfter().run()
                       }
-                      class="hover:bg-crust hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-crust hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Add Column After"
                     >
                       Col →
@@ -1651,7 +1640,7 @@ export default function TextEditor(props: TextEditorProps) {
                     <button
                       type="button"
                       onClick={deleteColumnWithConfirmation}
-                      class="hover:bg-red hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-red hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Delete Column"
                     >
                       ✕ Col
@@ -1664,7 +1653,7 @@ export default function TextEditor(props: TextEditorProps) {
                       onClick={() =>
                         instance().chain().focus().mergeCells().run()
                       }
-                      class="hover:bg-crust hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-crust hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Merge Cells"
                     >
                       ⊡
@@ -1675,7 +1664,7 @@ export default function TextEditor(props: TextEditorProps) {
                       onClick={() =>
                         instance().chain().focus().splitCell().run()
                       }
-                      class="hover:bg-crust hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-crust hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Split Cell"
                     >
                       ⊞
@@ -1684,7 +1673,7 @@ export default function TextEditor(props: TextEditorProps) {
                     <button
                       type="button"
                       onClick={deleteTableWithConfirmation}
-                      class="hover:bg-red hover:bg-opacity-30 rounded px-2 py-1"
+                      class="hover:bg-red hover:bg-opacity-30 touch-manipulation rounded px-2 py-1 select-none"
                       title="Delete Table"
                     >
                       ✕ Table
@@ -1785,10 +1774,10 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleHeading({ level: 1 }).run()
                   }
                   class={`${
-                    instance().isActive("heading", { level: 1 })
+                    isActive("heading", { level: 1 })
                       ? "bg-surface2"
                       : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Heading 1"
                 >
                   H1
@@ -1799,10 +1788,10 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleHeading({ level: 2 }).run()
                   }
                   class={`${
-                    instance().isActive("heading", { level: 2 })
+                    isActive("heading", { level: 2 })
                       ? "bg-surface2"
                       : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Heading 2"
                 >
                   H2
@@ -1813,10 +1802,10 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleHeading({ level: 3 }).run()
                   }
                   class={`${
-                    instance().isActive("heading", { level: 3 })
+                    isActive("heading", { level: 3 })
                       ? "bg-surface2"
                       : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Heading 3"
                 >
                   H3
@@ -1826,10 +1815,8 @@ export default function TextEditor(props: TextEditorProps) {
                   type="button"
                   onClick={() => instance().chain().focus().toggleBold().run()}
                   class={`${
-                    instance().isActive("bold")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("bold") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Bold"
                 >
                   <strong>B</strong>
@@ -1840,10 +1827,8 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleItalic().run()
                   }
                   class={`${
-                    instance().isActive("italic")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("italic") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Italic"
                 >
                   <em>I</em>
@@ -1854,10 +1839,8 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleStrike().run()
                   }
                   class={`${
-                    instance().isActive("strike")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("strike") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Strikethrough"
                 >
                   <s>S</s>
@@ -1868,10 +1851,10 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleSuperscript().run()
                   }
                   class={`${
-                    instance().isActive("superscript")
+                    isActive("superscript")
                       ? "bg-surface2"
                       : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Superscript (for references)"
                 >
                   X<sup class="text-[0.6em]">n</sup>
@@ -1882,10 +1865,8 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleSubscript().run()
                   }
                   class={`${
-                    instance().isActive("subscript")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("subscript") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Subscript"
                 >
                   X<sub class="text-[0.6em]">n</sub>
@@ -1897,10 +1878,8 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleBulletList().run()
                   }
                   class={`${
-                    instance().isActive("bulletList")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("bulletList") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Bullet List"
                 >
                   • List
@@ -1911,10 +1890,10 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleOrderedList().run()
                   }
                   class={`${
-                    instance().isActive("orderedList")
+                    isActive("orderedList")
                       ? "bg-surface2"
                       : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Ordered List"
                 >
                   1. List
@@ -1925,10 +1904,8 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleTaskList().run()
                   }
                   class={`${
-                    instance().isActive("taskList")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("taskList") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Task List"
                 >
                   ☑ Tasks
@@ -1939,10 +1916,8 @@ export default function TextEditor(props: TextEditorProps) {
                     instance().chain().focus().toggleBlockquote().run()
                   }
                   class={`${
-                    instance().isActive("blockquote")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("blockquote") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Blockquote"
                 >
                   " Quote
@@ -1950,7 +1925,7 @@ export default function TextEditor(props: TextEditorProps) {
                 <button
                   type="button"
                   onClick={insertCollapsibleSection}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                   title="Insert Collapsible Section"
                 >
                   ▼ Details
@@ -1960,59 +1935,55 @@ export default function TextEditor(props: TextEditorProps) {
                 {/* Text Alignment */}
                 <button
                   type="button"
-                  onClick={() =>
-                    instance().chain().focus().setTextAlign("left").run()
-                  }
+                  onClick={() => {
+                    instance().chain().focus().setTextAlign("left").run();
+                    setEditorState((prev) => prev + 1);
+                  }}
                   class={`${
-                    instance().isActive({ textAlign: "left" })
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isAlignActive("left") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Align Left"
                 >
-                  ⬅
+                  ←
                 </button>
                 <button
                   type="button"
-                  onClick={() =>
-                    instance().chain().focus().setTextAlign("center").run()
-                  }
+                  onClick={() => {
+                    instance().chain().focus().setTextAlign("center").run();
+                    setEditorState((prev) => prev + 1);
+                  }}
                   class={`${
-                    instance().isActive({ textAlign: "center" })
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isAlignActive("center") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Align Center"
                 >
                   ↔
                 </button>
                 <button
                   type="button"
-                  onClick={() =>
-                    instance().chain().focus().setTextAlign("right").run()
-                  }
+                  onClick={() => {
+                    instance().chain().focus().setTextAlign("right").run();
+                    setEditorState((prev) => prev + 1);
+                  }}
                   class={`${
-                    instance().isActive({ textAlign: "right" })
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isAlignActive("right") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Align Right"
                 >
-                  ➡
+                  →
                 </button>
                 <button
                   type="button"
-                  onClick={() =>
-                    instance().chain().focus().setTextAlign("justify").run()
-                  }
+                  onClick={() => {
+                    instance().chain().focus().setTextAlign("justify").run();
+                    setEditorState((prev) => prev + 1);
+                  }}
                   class={`${
-                    instance().isActive({ textAlign: "justify" })
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isAlignActive("justify") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Justify"
                 >
-                  ⬌
+                  ⇄
                 </button>
                 <div class="border-surface2 mx-1 border-l"></div>
                 <button
@@ -2020,10 +1991,9 @@ export default function TextEditor(props: TextEditorProps) {
                   onClick={showLanguagePicker}
                   data-language-picker-trigger
                   class={`${
-                    instance().isActive("codeBlock")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    (showLanguageSelector() || isActive("codeBlock")) &&
+                    "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Code Block"
                 >
                   {"</>"}
@@ -2032,10 +2002,8 @@ export default function TextEditor(props: TextEditorProps) {
                   type="button"
                   onClick={setLink}
                   class={`${
-                    instance().isActive("link")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    isActive("link") && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Add Link"
                 >
                   🔗 Link
@@ -2043,7 +2011,7 @@ export default function TextEditor(props: TextEditorProps) {
                 <button
                   type="button"
                   onClick={addImage}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  class="touch-manipulation rounded px-2 py-1 text-xs select-none"
                   title="Add Image"
                 >
                   🖼 Image
@@ -2051,7 +2019,7 @@ export default function TextEditor(props: TextEditorProps) {
                 <button
                   type="button"
                   onClick={addIframe}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  class="touch-manipulation rounded px-2 py-1 text-xs select-none"
                   title="Add Iframe"
                 >
                   📺 Iframe
@@ -2061,10 +2029,8 @@ export default function TextEditor(props: TextEditorProps) {
                   onClick={showTableInserter}
                   data-table-trigger
                   class={`${
-                    instance().isActive("table")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    (showTableMenu() || isActive("table")) && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Insert Table"
                 >
                   ⊞ Table
@@ -2073,7 +2039,9 @@ export default function TextEditor(props: TextEditorProps) {
                   type="button"
                   onClick={showMermaidSelector}
                   data-mermaid-trigger
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  class={`${
+                    showMermaidTemplates() && "bg-surface2"
+                  } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                   title="Insert Diagram"
                 >
                   📊 Diagram
@@ -2083,10 +2051,9 @@ export default function TextEditor(props: TextEditorProps) {
                   onClick={showConditionalConfigurator}
                   data-conditional-trigger
                   class={`${
-                    instance().isActive("conditionalBlock")
-                      ? "bg-surface2"
-                      : "hover:bg-surface1"
-                  } rounded px-2 py-1 text-xs`}
+                    (showConditionalConfig() || isActive("conditionalBlock")) &&
+                    "bg-surface2"
+                  } rounded px-2 py-1 text-xs select-none`}
                   title="Insert Conditional Block"
                 >
                   🔒 Conditional
@@ -2097,7 +2064,7 @@ export default function TextEditor(props: TextEditorProps) {
                   onClick={() =>
                     instance().chain().focus().setHorizontalRule().run()
                   }
-                  class="bg-surface0 hover:bg-surface1 rounded px-3 py-1 text-xs"
+                  class="hover:bg-surface1 rounded px-3 py-1 text-xs"
                   title="Horizontal Rule"
                 >
                   ━━ HR
@@ -2106,7 +2073,7 @@ export default function TextEditor(props: TextEditorProps) {
                 <button
                   type="button"
                   onClick={toggleFullscreen}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                   title={
                     isFullscreen()
                       ? "Exit Fullscreen (ESC)"
@@ -2118,14 +2085,14 @@ export default function TextEditor(props: TextEditorProps) {
                 <button
                   type="button"
                   onClick={() => setShowKeyboardHelp(!showKeyboardHelp())}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                   title="Keyboard Shortcuts"
                 >
                   ⌨ Help
                 </button>
 
                 {/* Table controls - shown when cursor is in a table */}
-                <Show when={instance().isActive("table")}>
+                <Show when={isActive("table")}>
                   <div class="border-surface2 mx-1 border-l"></div>
 
                   <button
@@ -2133,7 +2100,7 @@ export default function TextEditor(props: TextEditorProps) {
                     onClick={() =>
                       instance().chain().focus().addColumnBefore().run()
                     }
-                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Add Column Before"
                   >
                     ← Col
@@ -2144,7 +2111,7 @@ export default function TextEditor(props: TextEditorProps) {
                     onClick={() =>
                       instance().chain().focus().addColumnAfter().run()
                     }
-                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Add Column After"
                   >
                     Col →
@@ -2153,7 +2120,7 @@ export default function TextEditor(props: TextEditorProps) {
                   <button
                     type="button"
                     onClick={deleteColumnWithConfirmation}
-                    class="hover:bg-red bg-opacity-20 rounded px-2 py-1 text-xs"
+                    class="hover:bg-red bg-opacity-20 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Delete Column"
                   >
                     ✕ Col
@@ -2166,7 +2133,7 @@ export default function TextEditor(props: TextEditorProps) {
                     onClick={() =>
                       instance().chain().focus().addRowBefore().run()
                     }
-                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Add Row Before"
                   >
                     ↑ Row
@@ -2177,7 +2144,7 @@ export default function TextEditor(props: TextEditorProps) {
                     onClick={() =>
                       instance().chain().focus().addRowAfter().run()
                     }
-                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Add Row After"
                   >
                     Row ↓
@@ -2186,7 +2153,7 @@ export default function TextEditor(props: TextEditorProps) {
                   <button
                     type="button"
                     onClick={deleteRowWithConfirmation}
-                    class="hover:bg-red bg-opacity-20 rounded px-2 py-1 text-xs"
+                    class="hover:bg-red bg-opacity-20 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Delete Row"
                   >
                     ✕ Row
@@ -2197,7 +2164,7 @@ export default function TextEditor(props: TextEditorProps) {
                   <button
                     type="button"
                     onClick={deleteTableWithConfirmation}
-                    class="hover:bg-red rounded px-2 py-1 text-xs"
+                    class="hover:bg-red touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Delete Table"
                   >
                     ✕ Table
@@ -2209,10 +2176,10 @@ export default function TextEditor(props: TextEditorProps) {
                       instance().chain().focus().toggleHeaderRow().run()
                     }
                     class={`${
-                      instance().isActive("tableHeader")
+                      isActive("tableHeader")
                         ? "bg-surface2"
                         : "hover:bg-surface1"
-                    } rounded px-2 py-1 text-xs`}
+                    } touch-manipulation rounded px-2 py-1 text-xs select-none`}
                     title="Toggle Header Row"
                   >
                     ≡ Header
@@ -2223,7 +2190,7 @@ export default function TextEditor(props: TextEditorProps) {
                     onClick={() =>
                       instance().chain().focus().mergeCells().run()
                     }
-                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Merge Cells"
                   >
                     ⊡ Merge
@@ -2232,7 +2199,7 @@ export default function TextEditor(props: TextEditorProps) {
                   <button
                     type="button"
                     onClick={() => instance().chain().focus().splitCell().run()}
-                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    class="hover:bg-surface1 touch-manipulation rounded px-2 py-1 text-xs select-none"
                     title="Split Cell"
                   >
                     ⊞ Split