diff --git a/lib/Controller/ForumUserController.php b/lib/Controller/ForumUserController.php
index 245377b..13f0922 100644
--- a/lib/Controller/ForumUserController.php
+++ b/lib/Controller/ForumUserController.php
@@ -8,6 +8,7 @@ declare(strict_types=1);
 namespace OCA\Forum\Controller;
 
 use OCA\Forum\Db\ForumUserMapper;
+use OCA\Forum\Service\UserService;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\Attribute\ApiRoute;
@@ -28,6 +29,7 @@ class ForumUserController extends OCSController {
 		string $appName,
 		IRequest $request,
 		private ForumUserMapper $forumUserMapper,
+		private UserService $userService,
 		private IUserSession $userSession,
 		private LoggerInterface $logger,
 	) {
@@ -54,6 +56,28 @@ class ForumUserController extends OCSController {
 		}
 	}
 
+	/**
+	 * Search Nextcloud users for autocomplete
+	 * Returns users matching the search query in the format expected by NcRichContenteditable
+	 *
+	 * @param string $search Search query (matches against user ID and display name)
+	 * @param int $limit Maximum number of results to return
+	 * @return DataResponse<Http::STATUS_OK, list<array{id: string, label: string, icon: string, source: string}>, array{}>
+	 *
+	 * 200: Users returned
+	 */
+	#[NoAdminRequired]
+	#[ApiRoute(verb: 'GET', url: '/api/users/autocomplete')]
+	public function autocomplete(string $search = '', int $limit = 10): DataResponse {
+		try {
+			$users = $this->userService->searchUsersForAutocomplete($search, $limit);
+			return new DataResponse($users);
+		} catch (\Exception $e) {
+			$this->logger->error('Error searching users for autocomplete: ' . $e->getMessage());
+			return new DataResponse(['error' => 'Failed to search users'], Http::STATUS_INTERNAL_SERVER_ERROR);
+		}
+	}
+
 	/**
 	 * Get forum user by Nextcloud user ID
 	 * Special case: use "me" to get current forum user
diff --git a/lib/Service/BBCodeService.php b/lib/Service/BBCodeService.php
index 6d8b507..3f42ba9 100644
--- a/lib/Service/BBCodeService.php
+++ b/lib/Service/BBCodeService.php
@@ -13,6 +13,7 @@ use OCA\Forum\Db\BBCodeMapper;
 use OCP\Files\IRootFolder;
 use OCP\Files\NotFoundException;
 use OCP\IURLGenerator;
+use OCP\IUserManager;
 use Psr\Log\LoggerInterface;
 
 class BBCodeService {
@@ -23,6 +24,7 @@ class BBCodeService {
 		private LoggerInterface $logger,
 		private IRootFolder $rootFolder,
 		private IURLGenerator $urlGenerator,
+		private IUserManager $userManager,
 	) {
 	}
 
@@ -189,6 +191,9 @@ class BBCodeService {
 				$html = str_replace($placeholder, htmlspecialchars($original, ENT_QUOTES | ENT_HTML5, 'UTF-8'), $html);
 			}
 
+			// Parse @mentions and convert them to user profile links
+			$html = $this->parseMentions($html);
+
 			return $html;
 		} catch (\Exception $e) {
 			$this->logger->error('BBCode parsing error: ' . $e->getMessage());
@@ -496,4 +501,62 @@ class BBCodeService {
 			default => 'icon-file',
 		};
 	}
+
+	/**
+	 * Parse @mentions in HTML content and convert them to user profile links
+	 *
+	 * Supports two formats:
+	 * - @username (for usernames without spaces)
+	 * - @"username with spaces" (for usernames with spaces)
+	 *
+	 * @param string $html The HTML content to parse
+	 * @return string The HTML with mentions converted to links
+	 */
+	private function parseMentions(string $html): string {
+		// Pattern to match @"username with spaces" or @username
+		// Must not be preceded by a word character (to avoid matching email addresses)
+		$pattern = '/(?<![a-zA-Z0-9_])@(?:"([^"]+)"|([a-zA-Z0-9_.-]+))/';
+
+		return preg_replace_callback($pattern, function ($matches) {
+			// Get the username - either from quoted format or simple format
+			$userId = $matches[1] !== '' ? $matches[1] : $matches[2];
+
+			// Check if the user exists
+			$user = $this->userManager->get($userId);
+			if ($user === null) {
+				// User doesn't exist, return original text
+				return $matches[0];
+			}
+
+			$displayName = $user->getDisplayName();
+			$escapedUserId = htmlspecialchars($userId, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+			$escapedDisplayName = htmlspecialchars($displayName, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+
+			// Generate link to user profile in the forum app
+			$profileUrl = $this->urlGenerator->linkToRouteAbsolute('forum.page.index') . 'u/' . urlencode($userId);
+			$escapedUrl = htmlspecialchars($profileUrl, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+
+			// Generate avatar URLs for both light and dark themes
+			$avatarUrlLight = $this->urlGenerator->linkToRouteAbsolute('core.avatar.getAvatar', ['userId' => $userId, 'size' => 64]);
+			$avatarUrlDark = $avatarUrlLight . '/dark';
+			$escapedAvatarUrlLight = htmlspecialchars($avatarUrlLight, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+			$escapedAvatarUrlDark = htmlspecialchars($avatarUrlDark, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+
+			return sprintf(
+				'<a href="%s" class="mention-bubble" data-user-id="%s">'
+				. '<span class="mention-bubble__wrapper">'
+				. '<span class="mention-bubble__content">'
+				. '<span class="mention-bubble__icon" style="--avatar-light: url(\'%s\'); --avatar-dark: url(\'%s\');"></span>'
+				. '<span class="mention-bubble__name">%s</span>'
+				. '</span>'
+				. '</span>'
+				. '</a>',
+				$escapedUrl,
+				$escapedUserId,
+				$escapedAvatarUrlLight,
+				$escapedAvatarUrlDark,
+				$escapedDisplayName
+			);
+		}, $html) ?? $html;
+	}
 }
diff --git a/lib/Service/UserService.php b/lib/Service/UserService.php
index f7099e8..4559105 100644
--- a/lib/Service/UserService.php
+++ b/lib/Service/UserService.php
@@ -219,6 +219,34 @@ class UserService {
 		return $rolesMap;
 	}
 
+	/**
+	 * Search users for autocomplete
+	 * Returns users matching the search query in the format expected by NcRichContenteditable
+	 *
+	 * @param string $search Search query (matches against user ID and display name)
+	 * @param int $limit Maximum number of results to return
+	 * @return array<array{id: string, label: string, icon: string, source: string}> List of matching users
+	 */
+	public function searchUsersForAutocomplete(string $search = '', int $limit = 10): array {
+		$results = [];
+		$search = strtolower(trim($search));
+
+		// Use IUserManager to search users
+		// The search method searches both user ID and display name
+		$users = $this->userManager->search($search, $limit);
+
+		foreach ($users as $user) {
+			$results[] = [
+				'id' => $user->getUID(),
+				'label' => $user->getDisplayName(),
+				'icon' => 'icon-user',
+				'source' => 'users',
+			];
+		}
+
+		return $results;
+	}
+
 	/**
 	 * Fetch signatures for multiple users efficiently
 	 *
diff --git a/openapi.json b/openapi.json
index 21bac67..d2bb9d1 100644
--- a/openapi.json
+++ b/openapi.json
@@ -3769,6 +3769,137 @@
                 }
             }
         },
+        "/ocs/v2.php/apps/forum/api/users/autocomplete": {
+            "get": {
+                "operationId": "forum_user-autocomplete",
+                "summary": "Search Nextcloud users for autocomplete Returns users matching the search query in the format expected by NcRichContenteditable",
+                "tags": [
+                    "forum_user"
+                ],
+                "security": [
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "search",
+                        "in": "query",
+                        "description": "Search query (matches against user ID and display name)",
+                        "schema": {
+                            "type": "string",
+                            "default": ""
+                        }
+                    },
+                    {
+                        "name": "limit",
+                        "in": "query",
+                        "description": "Maximum number of results to return",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "default": 10
+                        }
+                    },
+                    {
+                        "name": "OCS-APIRequest",
+                        "in": "header",
+                        "description": "Required to be true for the API request to pass",
+                        "required": true,
+                        "schema": {
+                            "type": "boolean",
+                            "default": true
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Users returned",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "type": "object",
+                                    "required": [
+                                        "ocs"
+                                    ],
+                                    "properties": {
+                                        "ocs": {
+                                            "type": "object",
+                                            "required": [
+                                                "meta",
+                                                "data"
+                                            ],
+                                            "properties": {
+                                                "meta": {
+                                                    "$ref": "#/components/schemas/OCSMeta"
+                                                },
+                                                "data": {
+                                                    "type": "array",
+                                                    "items": {
+                                                        "type": "object",
+                                                        "required": [
+                                                            "id",
+                                                            "label",
+                                                            "icon",
+                                                            "source"
+                                                        ],
+                                                        "properties": {
+                                                            "id": {
+                                                                "type": "string"
+                                                            },
+                                                            "label": {
+                                                                "type": "string"
+                                                            },
+                                                            "icon": {
+                                                                "type": "string"
+                                                            },
+                                                            "source": {
+                                                                "type": "string"
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    "401": {
+                        "description": "Current user is not logged in",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "type": "object",
+                                    "required": [
+                                        "ocs"
+                                    ],
+                                    "properties": {
+                                        "ocs": {
+                                            "type": "object",
+                                            "required": [
+                                                "meta",
+                                                "data"
+                                            ],
+                                            "properties": {
+                                                "meta": {
+                                                    "$ref": "#/components/schemas/OCSMeta"
+                                                },
+                                                "data": {}
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/ocs/v2.php/apps/forum/api/users/{userId}": {
             "get": {
                 "operationId": "forum_user-show",
diff --git a/src/components/BBCodeEditor.vue b/src/components/BBCodeEditor.vue
index 7a7e1b7..9915993 100644
--- a/src/components/BBCodeEditor.vue
+++ b/src/components/BBCodeEditor.vue
@@ -6,16 +6,23 @@
     @dragleave="handleDragLeave"
     @drop="handleDrop"
   >
-    <BBCodeToolbar ref="toolbar" :textarea-ref="textareaElement" @insert="handleBBCodeInsert" />
-    <NcTextArea
-      :model-value="modelValue"
+    <BBCodeToolbar
+      ref="toolbar"
+      :textarea-ref="contenteditableElement"
+      @insert="handleBBCodeInsert"
+    />
+    <NcRichContenteditable
+      v-if="isReady"
+      :model-value="internalContent"
       :placeholder="placeholder"
-      :rows="rows"
       :disabled="disabled"
-      @update:model-value="$emit('update:modelValue', $event)"
+      :auto-complete="autoComplete"
+      :user-data="userData"
+      :multiline="true"
+      @update:model-value="handleInput"
       @keydown="$emit('keydown', $event)"
-      class="bbcode-editor-textarea"
-      ref="textarea"
+      class="bbcode-editor-contenteditable"
+      ref="contenteditable"
     />
     <NcNoteCard v-if="hasAttachmentBBCode" type="warning" class="attachment-disclaimer">
       <span v-html="strings.attachmentDisclaimer"></span>
@@ -33,16 +40,33 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
-import NcTextArea from '@nextcloud/vue/components/NcTextArea'
+import NcRichContenteditable from '@nextcloud/vue/components/NcRichContenteditable'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import BBCodeToolbar from './BBCodeToolbar.vue'
 import UploadIcon from '@icons/Upload.vue'
 import { t } from '@nextcloud/l10n'
+import { ocs } from '@/axios'
+
+interface AutocompleteUser {
+  id: string
+  label: string
+  icon: string
+  source: string
+}
+
+interface UserData {
+  [key: string]: {
+    id: string
+    label: string
+    icon: string
+    source: string
+  }
+}
 
 export default defineComponent({
   name: 'BBCodeEditor',
   components: {
-    NcTextArea,
+    NcRichContenteditable,
     NcNoteCard,
     BBCodeToolbar,
     UploadIcon,
@@ -72,9 +96,13 @@ export default defineComponent({
   emits: ['update:modelValue', 'keydown'],
   data() {
     return {
-      textareaElement: null as HTMLTextAreaElement | null,
+      contenteditableElement: null as HTMLElement | null,
       isDragging: false,
       dragCounter: 0,
+      userData: {} as UserData,
+      isReady: false,
+      // Internal content state - only set once on mount, then managed by contenteditable
+      internalContent: '',
       strings: {
         attachmentDisclaimer: t(
           'forum',
@@ -91,20 +119,66 @@ export default defineComponent({
       return /\[attachment[^\]]*\]/i.test(this.modelValue)
     },
   },
+  watch: {
+    // Sync internalContent when modelValue changes externally (e.g., BBCode toolbar insert, clear)
+    // But skip if the change came from our own handleInput (to avoid cursor jumping)
+    modelValue(newValue: string) {
+      if (newValue !== this.internalContent) {
+        this.internalContent = newValue
+      }
+    },
+  },
+  async created() {
+    // Parse mentions from initial content before rendering
+    await this.parseMentionsFromContent(this.modelValue)
+    // Set initial content with cursor helper for mentions at end
+    this.internalContent = this.addCursorHelperAfterMentions(this.modelValue)
+    this.isReady = true
+  },
   mounted() {
-    this.updateTextareaRef()
+    this.updateContenteditableRef()
   },
   updated() {
-    this.updateTextareaRef()
+    this.updateContenteditableRef()
   },
   methods: {
-    updateTextareaRef(): void {
-      const textarea = this.$refs.textarea as any
-      if (textarea?.$el?.querySelector('textarea')) {
-        this.textareaElement = textarea.$el.querySelector('textarea')
+    updateContenteditableRef(): void {
+      const contenteditable = this.$refs.contenteditable as any
+      if (contenteditable?.$el) {
+        // NcRichContenteditable uses a div with contenteditable
+        const editableEl = contenteditable.$el.querySelector('[contenteditable]')
+        if (editableEl) {
+          this.contenteditableElement = editableEl as HTMLElement
+        }
       }
     },
 
+    /**
+     * Add a zero-width space after mentions at the end of content
+     * This allows the cursor to be placed after a mention for appending text
+     * Only used when initially loading content, not during active editing
+     */
+    addCursorHelperAfterMentions(content: string): string {
+      if (!content) return content
+
+      // Add zero-width space after mentions at end of string
+      // This ensures the cursor can be placed after mentions for appending
+      const mentionAtEndPattern = /(@(?:"[^"]+"|[a-zA-Z0-9_.-]+))$/
+      if (mentionAtEndPattern.test(content)) {
+        return content + '\u200B'
+      }
+
+      return content
+    },
+
+    handleInput(value: string): void {
+      // Update internal state
+      this.internalContent = value
+      // Remove zero-width spaces before emitting to parent (clean storage)
+      const cleanValue = value.replace(/\u200B/g, '')
+      this.$emit('update:modelValue', cleanValue)
+    },
+
     handleBBCodeInsert(data: { text: string; cursorPos: number }): void {
       // Update the content with the new text
       this.$emit('update:modelValue', data.text)
@@ -112,10 +186,95 @@ export default defineComponent({
     },
 
     focus(): void {
-      // Focus the textarea
-      const textarea = this.$refs.textarea as any
-      if (textarea?.$el?.querySelector('textarea')) {
-        textarea.$el.querySelector('textarea').focus()
+      // Focus the contenteditable
+      const contenteditable = this.$refs.contenteditable as any
+      if (contenteditable?.$el) {
+        const editableEl = contenteditable.$el.querySelector('[contenteditable]')
+        if (editableEl) {
+          editableEl.focus()
+        }
+      }
+    },
+
+    /**
+     * Parse mentions from content and fetch user data for them
+     * This ensures mentions display correctly when editing existing content
+     */
+    async parseMentionsFromContent(content: string): Promise<void> {
+      if (!content) return
+
+      // Pattern to match @"username with spaces" or @username
+      const mentionPattern = /@(?:"([^"]+)"|([a-zA-Z0-9_.-]+))/g
+      const userIds = new Set<string>()
+
+      let match
+      while ((match = mentionPattern.exec(content)) !== null) {
+        // Get the username - either from quoted format or simple format
+        const userId = match[1] || match[2]
+        if (userId && !this.userData[userId]) {
+          userIds.add(userId)
+        }
+      }
+
+      if (userIds.size === 0) return
+
+      // Fetch user data for each mentioned user and build new userData object
+      const newUserData: UserData = { ...this.userData }
+
+      for (const userId of userIds) {
+        try {
+          const response = await ocs.get<AutocompleteUser[]>('/users/autocomplete', {
+            params: { search: userId, limit: 1 },
+          })
+
+          const users = response.data || []
+          // Find exact match
+          const user = users.find((u) => u.id === userId)
+          if (user) {
+            // Store with both formats to cover all cases
+            newUserData[user.id] = {
+              id: user.id,
+              label: user.label,
+              icon: user.icon,
+              source: user.source,
+            }
+          }
+        } catch (error) {
+          console.error(`Error fetching user data for ${userId}:`, error)
+        }
+      }
+
+      // Replace entire userData object to ensure reactivity
+      this.userData = newUserData
+    },
+
+    async autoComplete(
+      search: string,
+      callback: (users: AutocompleteUser[]) => void,
+    ): Promise<void> {
+      try {
+        const response = await ocs.get<AutocompleteUser[]>('/users/autocomplete', {
+          params: { search, limit: 10 },
+        })
+
+        const users = response.data || []
+
+        // Update userData with the fetched users for display
+        const newUserData: UserData = { ...this.userData }
+        users.forEach((user) => {
+          newUserData[user.id] = {
+            id: user.id,
+            label: user.label,
+            icon: user.icon,
+            source: user.source,
+          }
+        })
+        this.userData = newUserData
+
+        callback(users)
+      } catch (error) {
+        console.error('Error fetching autocomplete users:', error)
+        callback([])
       }
     },
 
@@ -184,16 +343,18 @@ export default defineComponent({
   padding: 4px;
 }
 
-.bbcode-editor-textarea {
+.bbcode-editor-contenteditable {
   margin-top: 0;
 
-  :deep(.textarea__main-wrapper) {
+  :deep(.rich-contenteditable__input) {
     min-height: v-bind(minHeight) !important;
-    height: unset !important;
+    padding: 8px 12px;
+    background: var(--color-main-background);
+    border: none;
+    border-radius: 4px;
   }
 
-  :deep(textarea) {
-    resize: vertical !important;
+  :deep([contenteditable]) {
     min-height: v-bind(minHeight) !important;
   }
 }
diff --git a/src/components/BBCodeToolbar.vue b/src/components/BBCodeToolbar.vue
index cef12b3..dfb89c1 100644
--- a/src/components/BBCodeToolbar.vue
+++ b/src/components/BBCodeToolbar.vue
@@ -155,7 +155,7 @@ export default defineComponent({
   },
   props: {
     textareaRef: {
-      type: Object as PropType<HTMLTextAreaElement | null>,
+      type: Object as PropType<HTMLTextAreaElement | HTMLElement | null>,
       default: null,
     },
   },
@@ -314,6 +314,110 @@ export default defineComponent({
     },
   },
   methods: {
+    /**
+     * Check if the element is a textarea
+     */
+    isTextarea(el: HTMLElement | HTMLTextAreaElement): el is HTMLTextAreaElement {
+      return el.tagName === 'TEXTAREA'
+    },
+
+    /**
+     * Get text content and selection info from the editor element
+     */
+    getEditorState(): { value: string; start: number; end: number; selectedText: string } | null {
+      if (!this.textareaRef) {
+        return null
+      }
+
+      if (this.isTextarea(this.textareaRef)) {
+        const textarea = this.textareaRef
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        return {
+          value: textarea.value,
+          start,
+          end,
+          selectedText: textarea.value.substring(start, end),
+        }
+      } else {
+        // Contenteditable element
+        const el = this.textareaRef
+        const text = el.innerText || ''
+        const selection = window.getSelection()
+
+        if (!selection || selection.rangeCount === 0) {
+          return { value: text, start: text.length, end: text.length, selectedText: '' }
+        }
+
+        const range = selection.getRangeAt(0)
+
+        // Check if selection is within this element
+        if (!el.contains(range.commonAncestorContainer)) {
+          return { value: text, start: text.length, end: text.length, selectedText: '' }
+        }
+
+        // Calculate start and end positions in the text
+        const preCaretRange = range.cloneRange()
+        preCaretRange.selectNodeContents(el)
+        preCaretRange.setEnd(range.startContainer, range.startOffset)
+        const start = preCaretRange.toString().length
+
+        preCaretRange.setEnd(range.endContainer, range.endOffset)
+        const end = preCaretRange.toString().length
+
+        return {
+          value: text,
+          start,
+          end,
+          selectedText: range.toString(),
+        }
+      }
+    },
+
+    /**
+     * Set cursor position in the editor element
+     */
+    setCursorPosition(position: number): void {
+      if (!this.textareaRef) {
+        return
+      }
+
+      if (this.isTextarea(this.textareaRef)) {
+        this.textareaRef.setSelectionRange(position, position)
+      } else {
+        // For contenteditable, we need to find the text node and set cursor
+        const el = this.textareaRef
+        const selection = window.getSelection()
+        if (!selection) return
+
+        // Find the text node at the position
+        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null)
+        let currentPos = 0
+        let node: Node | null = walker.nextNode()
+
+        while (node) {
+          const nodeLength = (node.textContent || '').length
+          if (currentPos + nodeLength >= position) {
+            const range = document.createRange()
+            range.setStart(node, position - currentPos)
+            range.collapse(true)
+            selection.removeAllRanges()
+            selection.addRange(range)
+            return
+          }
+          currentPos += nodeLength
+          node = walker.nextNode()
+        }
+
+        // If we couldn't find the position, put cursor at end
+        const range = document.createRange()
+        range.selectNodeContents(el)
+        range.collapse(false)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    },
+
     async insertBBCode(button: BBCodeButton): Promise<void> {
       // If button has a custom handler, use it instead
       if (button.handler) {
@@ -321,26 +425,24 @@ export default defineComponent({
         return
       }
 
-      if (!this.textareaRef) {
+      const state = this.getEditorState()
+      if (!state || !this.textareaRef) {
         return
       }
 
-      const textarea = this.textareaRef
-      const start = textarea.selectionStart
-      const end = textarea.selectionEnd
-      const selectedText = textarea.value.substring(start, end)
-      const beforeText = textarea.value.substring(0, start)
-      const afterText = textarea.value.substring(end)
+      const { value, start, end, selectedText } = state
+      const beforeText = value.substring(0, start)
+      const afterText = value.substring(end)
 
       let insertText = ''
-      let value = ''
+      let promptValue = ''
       let contentText = selectedText
 
       // If the button requires a value (like url, color, size, font), prompt the user
       if (button.hasValue) {
         // eslint-disable-next-line no-alert
-        value = prompt(`Enter ${button.label} value:`, button.placeholder || '') || ''
-        if (!value) {
+        promptValue = prompt(`Enter ${button.label} value:`, button.placeholder || '') || ''
+        if (!promptValue) {
           return
         }
       }
@@ -357,7 +459,7 @@ export default defineComponent({
 
       // Generate the BBCode text
       insertText = button.template
-        .replace('{value}', value)
+        .replace('{value}', promptValue)
         .replace('{text}', contentText || button.placeholder || '')
 
       // Calculate new cursor position
@@ -371,10 +473,12 @@ export default defineComponent({
         selectedText,
       })
 
-      // Focus the textarea after insertion
+      // Focus and set cursor position after insertion
       this.$nextTick(() => {
-        textarea.focus()
-        textarea.setSelectionRange(cursorPos, cursorPos)
+        if (this.textareaRef) {
+          this.textareaRef.focus()
+          this.setCursorPosition(cursorPos)
+        }
       })
     },
 
@@ -409,11 +513,14 @@ export default defineComponent({
 
         const fileId = relativePath
 
-        const textarea = this.textareaRef
-        const start = textarea.selectionStart
-        const end = textarea.selectionEnd
-        const beforeText = textarea.value.substring(0, start)
-        const afterText = textarea.value.substring(end)
+        const state = this.getEditorState()
+        if (!state) {
+          return
+        }
+
+        const { value, start, end } = state
+        const beforeText = value.substring(0, start)
+        const afterText = value.substring(end)
 
         const insertText = `[attachment]${fileId}[/attachment]`
         const newText = beforeText + insertText + afterText
@@ -426,10 +533,12 @@ export default defineComponent({
           selectedText: '',
         })
 
-        // Focus the textarea after insertion
+        // Focus the editor after insertion
         this.$nextTick(() => {
-          textarea.focus()
-          textarea.setSelectionRange(cursorPos, cursorPos)
+          if (this.textareaRef) {
+            this.textareaRef.focus()
+            this.setCursorPosition(cursorPos)
+          }
         })
       } catch (error) {
         // Silently ignore if user canceled the dialog
@@ -446,15 +555,14 @@ export default defineComponent({
     },
 
     handleEmojiSelect(emoji: string): void {
-      if (!this.textareaRef) {
+      const state = this.getEditorState()
+      if (!state || !this.textareaRef) {
         return
       }
 
-      const textarea = this.textareaRef
-      const start = textarea.selectionStart
-      const end = textarea.selectionEnd
-      const beforeText = textarea.value.substring(0, start)
-      const afterText = textarea.value.substring(end)
+      const { value, start, end } = state
+      const beforeText = value.substring(0, start)
+      const afterText = value.substring(end)
 
       const newText = beforeText + emoji + afterText
       const cursorPos = beforeText.length + emoji.length
@@ -466,10 +574,12 @@ export default defineComponent({
         selectedText: '',
       })
 
-      // Focus the textarea after insertion
+      // Focus the editor after insertion
       this.$nextTick(() => {
-        textarea.focus()
-        textarea.setSelectionRange(cursorPos, cursorPos)
+        if (this.textareaRef) {
+          this.textareaRef.focus()
+          this.setCursorPosition(cursorPos)
+        }
       })
     },
 
@@ -541,15 +651,14 @@ export default defineComponent({
         })
 
         // Insert attachment BBCode
-        const textarea = this.textareaRef
-        if (!textarea) {
+        const state = this.getEditorState()
+        if (!state) {
           return
         }
 
-        const start = textarea.selectionStart
-        const end = textarea.selectionEnd
-        const beforeText = textarea.value.substring(0, start)
-        const afterText = textarea.value.substring(end)
+        const { value, start, end } = state
+        const beforeText = value.substring(0, start)
+        const afterText = value.substring(end)
 
         const filePath = `${uploadDirectory}/${file.name}`
         const insertText = `[attachment]${filePath}[/attachment]`
@@ -563,10 +672,12 @@ export default defineComponent({
           selectedText: '',
         })
 
-        // Focus the textarea after insertion
+        // Focus the editor after insertion
         this.$nextTick(() => {
-          textarea.focus()
-          textarea.setSelectionRange(cursorPos, cursorPos)
+          if (this.textareaRef) {
+            this.textareaRef.focus()
+            this.setCursorPosition(cursorPos)
+          }
         })
 
         // Close dialog on success
diff --git a/src/components/PostCard.vue b/src/components/PostCard.vue
index dff69a5..66582df 100644
--- a/src/components/PostCard.vue
+++ b/src/components/PostCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="post-card" :class="{ 'first-post': isFirstPost, unread: isUnread }">
+  <div
+    class="post-card"
+    :class="{ 'first-post': isFirstPost, unread: isUnread }"
+    :data-theme-dark="isDarkTheme"
+  >
     <div class="post-header">
       <div class="author-info">
         <span v-if="isUnread" class="unread-indicator" :title="strings.unread"></span>
@@ -87,6 +91,7 @@ import PostReactions from './PostReactions.vue'
 import PostEditForm from './PostEditForm.vue'
 import { t } from '@nextcloud/l10n'
 import { getCurrentUser } from '@nextcloud/auth'
+import { isDarkTheme } from '@nextcloud/vue/functions/isDarkTheme'
 import { useUserRole } from '@/composables/useUserRole'
 import type { Post } from '@/types'
 import type { ReactionGroup } from '@/composables/useReactions'
@@ -129,6 +134,7 @@ export default defineComponent({
     return {
       isAdmin,
       isModerator,
+      isDarkTheme,
     }
   },
   data() {
diff --git a/src/style.scss b/src/style.scss
index 6bd7d95..30a464e 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -116,3 +116,63 @@
 .dialog__actions {
   gap: 12px !important;
 }
+
+// User mention bubble styles
+.mention-bubble {
+  text-decoration: none;
+  white-space: nowrap;
+
+  &__wrapper {
+    position: relative;
+    max-width: 150px;
+    height: 18px;
+    vertical-align: text-bottom;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__content {
+    display: inline-flex;
+    overflow: hidden;
+    align-items: center;
+    max-width: 100%;
+    height: 20px;
+    user-select: none;
+    padding-inline: 2px 6px;
+    border-radius: 10px;
+    background-color: var(--color-background-dark);
+  }
+
+  &__icon {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    background-color: var(--color-background-darker);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    // Default to light theme avatar
+    background-image: var(--avatar-light);
+  }
+
+  &__name {
+    overflow: hidden;
+    margin-inline-start: 2px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--color-main-text);
+    font-size: 0.9em;
+  }
+
+  &:hover {
+    .mention-bubble__content {
+      background-color: var(--color-background-darker);
+    }
+  }
+}
+
+// Dark theme avatar - use --avatar-dark when parent has data-theme-dark="true"
+[data-theme-dark='true'] .mention-bubble__icon {
+  background-image: var(--avatar-dark);
+}
diff --git a/tests/unit/Controller/ForumUserControllerTest.php b/tests/unit/Controller/ForumUserControllerTest.php
index dfc6f2f..9c256c5 100644
--- a/tests/unit/Controller/ForumUserControllerTest.php
+++ b/tests/unit/Controller/ForumUserControllerTest.php
@@ -8,6 +8,7 @@ use OCA\Forum\AppInfo\Application;
 use OCA\Forum\Controller\ForumUserController;
 use OCA\Forum\Db\ForumUser;
 use OCA\Forum\Db\ForumUserMapper;
+use OCA\Forum\Service\UserService;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
 use OCP\IRequest;
@@ -19,6 +20,7 @@ use Psr\Log\LoggerInterface;
 class ForumUserControllerTest extends TestCase {
 	private ForumUserController $controller;
 	private ForumUserMapper $forumUserMapper;
+	private UserService $userService;
 	private IUserSession $userSession;
 	private LoggerInterface $logger;
 	private IRequest $request;
@@ -26,6 +28,7 @@ class ForumUserControllerTest extends TestCase {
 	protected function setUp(): void {
 		$this->request = $this->createMock(IRequest::class);
 		$this->forumUserMapper = $this->createMock(ForumUserMapper::class);
+		$this->userService = $this->createMock(UserService::class);
 		$this->userSession = $this->createMock(IUserSession::class);
 		$this->logger = $this->createMock(LoggerInterface::class);
 
@@ -33,6 +36,7 @@ class ForumUserControllerTest extends TestCase {
 			Application::APP_ID,
 			$this->request,
 			$this->forumUserMapper,
+			$this->userService,
 			$this->userSession,
 			$this->logger
 		);
diff --git a/tests/unit/Service/BBCodeServiceTest.php b/tests/unit/Service/BBCodeServiceTest.php
index ac597ec..3aebe10 100644
--- a/tests/unit/Service/BBCodeServiceTest.php
+++ b/tests/unit/Service/BBCodeServiceTest.php
@@ -9,6 +9,7 @@ use OCA\Forum\Db\BBCodeMapper;
 use OCA\Forum\Service\BBCodeService;
 use OCP\Files\IRootFolder;
 use OCP\IURLGenerator;
+use OCP\IUserManager;
 use PHPUnit\Framework\TestCase;
 use Psr\Log\LoggerInterface;
 
@@ -18,18 +19,21 @@ class BBCodeServiceTest extends TestCase {
 	private LoggerInterface $logger;
 	private IRootFolder $rootFolder;
 	private IURLGenerator $urlGenerator;
+	private IUserManager $userManager;
 
 	protected function setUp(): void {
 		$this->bbCodeMapper = $this->createMock(BBCodeMapper::class);
 		$this->logger = $this->createMock(LoggerInterface::class);
 		$this->rootFolder = $this->createMock(IRootFolder::class);
 		$this->urlGenerator = $this->createMock(IURLGenerator::class);
+		$this->userManager = $this->createMock(IUserManager::class);
 
 		$this->service = new BBCodeService(
 			$this->bbCodeMapper,
 			$this->logger,
 			$this->rootFolder,
-			$this->urlGenerator
+			$this->urlGenerator,
+			$this->userManager
 		);
 	}