diff --git a/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php b/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php
index 8b40fe4a6..a556e13c5 100644
--- a/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php
+++ b/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php
@@ -26,7 +26,7 @@ function ($attribute, $value, $fail) {
                     }
                 },
             ],
-            'confirmation_reply_to' => 'email|nullable',
+            'confirmation_reply_to' => 'nullable',
             'notification_sender' => 'required',
             'notification_subject' => 'required',
             'notification_body' => 'required',
@@ -107,6 +107,7 @@ public static function validateEmail($email): bool
     public static function formatData(array $data): array
     {
         return array_merge(parent::formatData($data), [
+            'notification_subject' => Purify::clean($data['notification_subject'] ?? ''),
             'notification_body' => Purify::clean($data['notification_body'] ?? ''),
         ]);
     }
diff --git a/api/app/Mail/Forms/SubmissionConfirmationMail.php b/api/app/Mail/Forms/SubmissionConfirmationMail.php
index b50bb9c1e..ab51190a0 100644
--- a/api/app/Mail/Forms/SubmissionConfirmationMail.php
+++ b/api/app/Mail/Forms/SubmissionConfirmationMail.php
@@ -4,6 +4,7 @@
 
 use App\Events\Forms\FormSubmitted;
 use App\Mail\OpenFormMail;
+use App\Open\MentionParser;
 use App\Service\Forms\FormSubmissionFormatter;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
@@ -16,6 +17,8 @@ class SubmissionConfirmationMail extends OpenFormMail implements ShouldQueue
     use Queueable;
     use SerializesModels;
 
+    private $formattedData;
+
     /**
      * Create a new message instance.
      *
@@ -23,6 +26,12 @@ class SubmissionConfirmationMail extends OpenFormMail implements ShouldQueue
      */
     public function __construct(private FormSubmitted $event, private $integrationData)
     {
+        $formatter = (new FormSubmissionFormatter($event->form, $event->data))
+            ->createLinks()
+            ->outputStringsOnly()
+            ->useSignedUrlForFiles();
+
+        $this->formattedData = $formatter->getFieldsWithValue();
     }
 
     /**
@@ -34,17 +43,14 @@ public function build()
     {
         $form = $this->event->form;
 
-        $formatter = (new FormSubmissionFormatter($form, $this->event->data))
-            ->createLinks()
-            ->outputStringsOnly()
-            ->useSignedUrlForFiles();
 
         return $this
             ->replyTo($this->getReplyToEmail($form->creator->email))
             ->from($this->getFromEmail(), $this->integrationData->notification_sender)
-            ->subject($this->integrationData->notification_subject)
+            ->subject($this->getSubject())
             ->markdown('mail.form.confirmation-submission-notification', [
-                'fields' => $formatter->getFieldsWithValue(),
+                'notificationBody' => $this->getNotificationBody(),
+                'fields' => $this->formattedData,
                 'form' => $form,
                 'integrationData' => $this->integrationData,
                 'noBranding' => $form->no_branding,
@@ -67,9 +73,25 @@ private function getReplyToEmail($default)
     {
         $replyTo = $this->integrationData->confirmation_reply_to ?? null;
 
-        if ($replyTo && filter_var($replyTo, FILTER_VALIDATE_EMAIL)) {
-            return $replyTo;
+        if ($replyTo) {
+            $parser = new MentionParser($replyTo, $this->formattedData);
+            $parsedReplyTo = $parser->parse();
+            if ($parsedReplyTo && filter_var($parsedReplyTo, FILTER_VALIDATE_EMAIL)) {
+                return $parsedReplyTo;
+            }
         }
         return $default;
     }
+
+    private function getSubject()
+    {
+        $parser = new MentionParser($this->integrationData->notification_subject, $this->formattedData);
+        return $parser->parse();
+    }
+
+    private function getNotificationBody()
+    {
+        $parser = new MentionParser($this->integrationData->notification_body, $this->formattedData);
+        return $parser->parse();
+    }
 }
diff --git a/api/app/Open/MentionParser.php b/api/app/Open/MentionParser.php
new file mode 100644
index 000000000..01c8e3c80
--- /dev/null
+++ b/api/app/Open/MentionParser.php
@@ -0,0 +1,97 @@
+<?php
+
+namespace App\Open;
+
+use DOMDocument;
+use DOMXPath;
+
+class MentionParser
+{
+    private $content;
+    private $data;
+
+    public function __construct($content, $data)
+    {
+        $this->content = $content;
+        $this->data = $data;
+    }
+
+    public function parse()
+    {
+        $doc = new DOMDocument();
+        // Disable libxml errors and use internal errors
+        $internalErrors = libxml_use_internal_errors(true);
+
+        // Wrap the content in a root element to ensure it's valid XML
+        $wrappedContent = '<root>' . $this->content . '</root>';
+
+        // Load HTML, using UTF-8 encoding
+        $doc->loadHTML(mb_convert_encoding($wrappedContent, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
+
+        // Restore libxml error handling
+        libxml_use_internal_errors($internalErrors);
+
+        $xpath = new DOMXPath($doc);
+        $mentionElements = $xpath->query("//span[@mention]");
+
+        foreach ($mentionElements as $element) {
+            $fieldId = $element->getAttribute('mention-field-id');
+            $fallback = $element->getAttribute('mention-fallback');
+            $value = $this->getData($fieldId);
+
+            if ($value !== null) {
+                $textNode = $doc->createTextNode(is_array($value) ? implode(', ', $value) : $value);
+                $element->parentNode->replaceChild($textNode, $element);
+            } elseif ($fallback) {
+                $textNode = $doc->createTextNode($fallback);
+                $element->parentNode->replaceChild($textNode, $element);
+            } else {
+                $element->parentNode->removeChild($element);
+            }
+        }
+
+        // Extract and return the processed HTML content
+        $result = $doc->saveHTML($doc->getElementsByTagName('root')->item(0));
+
+        // Remove the root tags we added
+        $result = preg_replace('/<\/?root>/', '', $result);
+
+        // Trim whitespace and convert HTML entities back to UTF-8 characters
+        $result = trim(html_entity_decode($result, ENT_QUOTES | ENT_HTML5, 'UTF-8'));
+
+        return $result;
+    }
+
+    private function replaceMentions()
+    {
+        $pattern = '/<span[^>]*mention-field-id="([^"]*)"[^>]*mention-fallback="([^"]*)"[^>]*>.*?<\/span>/';
+        return preg_replace_callback($pattern, function ($matches) {
+            $fieldId = $matches[1];
+            $fallback = $matches[2];
+            $value = $this->getData($fieldId);
+
+            if ($value !== null) {
+                if (is_array($value)) {
+                    return implode(' ', array_map(function ($v) {
+                        return $v;
+                    }, $value));
+                }
+                return $value;
+            } elseif ($fallback) {
+                return $fallback;
+            }
+            return '';
+        }, $this->content);
+    }
+
+    private function getData($fieldId)
+    {
+        $value = collect($this->data)->firstWhere('id', $fieldId)['value'] ?? null;
+
+        if (is_object($value)) {
+            return (array) $value;
+        }
+
+        return $value;
+    }
+}
diff --git a/api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php b/api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php
new file mode 100644
index 000000000..ba9fb807f
--- /dev/null
+++ b/api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Service\HtmlPurifier;
+
+use HTMLPurifier_HTMLDefinition;
+use Stevebauman\Purify\Definitions\Definition;
+use Stevebauman\Purify\Definitions\Html5Definition;
+
+class OpenFormsHtmlDefinition implements Definition
+{
+    public static function apply(HTMLPurifier_HTMLDefinition $definition)
+    {
+        Html5Definition::apply($definition);
+
+        $definition->addAttribute('span', 'mention-field-id', 'Text');
+        $definition->addAttribute('span', 'mention-field-name', 'Text');
+        $definition->addAttribute('span', 'mention-fallback', 'Text');
+        $definition->addAttribute('span', 'mention', 'Bool');
+        $definition->addAttribute('span', 'contenteditable', 'Bool');
+    }
+}
diff --git a/api/config/purify.php b/api/config/purify.php
index 24c8d1ce4..f440c058c 100644
--- a/api/config/purify.php
+++ b/api/config/purify.php
@@ -1,6 +1,6 @@
 <?php
 
-use Stevebauman\Purify\Definitions\Html5Definition;
+use App\Service\HtmlPurifier\OpenFormsHtmlDefinition;
 
 return [
 
@@ -40,7 +40,7 @@
     'configs' => [
 
         'default' => [
-            'HTML.Allowed' => 'h1,h2,b,strong,i,em,a[href|title],ul,ol,li,p,br,span,*[style]',
+            'HTML.Allowed' => 'h1,h2,b,strong,i,em,a[href|title],ul,ol,li,p,br,span[mention|mention-field-id|mention-field-name|mention-fallback],*[style]',
             'HTML.ForbiddenElements' => '',
             'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,text-decoration,color,text-align',
 
@@ -86,7 +86,7 @@
     |
     */
 
-    'definitions' => Html5Definition::class,
+    'definitions' => OpenFormsHtmlDefinition::class,
 
     /*
     |--------------------------------------------------------------------------
diff --git a/api/resources/views/mail/form/confirmation-submission-notification.blade.php b/api/resources/views/mail/form/confirmation-submission-notification.blade.php
index 871998f30..271779fc0 100644
--- a/api/resources/views/mail/form/confirmation-submission-notification.blade.php
+++ b/api/resources/views/mail/form/confirmation-submission-notification.blade.php
@@ -1,6 +1,6 @@
 @component('mail::message', ['noBranding' => $noBranding])
 
-{!! $integrationData->notification_body !!}
+{!! $notificationBody !!}
 
 @if($form->editable_submissions)
 @component('mail::button', ['url' => $form->share_url.'?submission_id='.$submission_id])
diff --git a/api/tests/Unit/Service/Forms/MentionParserTest.php b/api/tests/Unit/Service/Forms/MentionParserTest.php
new file mode 100644
index 000000000..908f0bc1b
--- /dev/null
+++ b/api/tests/Unit/Service/Forms/MentionParserTest.php
@@ -0,0 +1,193 @@
+<?php
+
+
+
+
+use App\Open\MentionParser;
+
+test('it replaces mention elements with their corresponding values', function () {
+
+    $content = '<p>Hello <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [['nf_id' => '123', 'value' => 'World']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Hello World</p>');
+
+});
+
+
+
+
+test('it handles multiple mentions', function () {
+
+    $content = '<p><span mention mention-field-id="123">Name</span> is <span mention mention-field-id="456">Age</span> years old</p>';
+
+    $data = [
+
+        ['nf_id' => '123', 'value' => 'John'],
+
+        ['nf_id' => '456', 'value' => 30],
+
+    ];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>John is 30 years old</p>');
+
+});
+
+
+
+
+test('it uses fallback when value is not found', function () {
+
+    $content = '<p>Hello <span mention mention-field-id="123" mention-fallback="Friend">Placeholder</span></p>';
+
+    $data = [];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Hello Friend</p>');
+
+});
+
+
+
+
+test('it removes mention element when no value and no fallback', function () {
+
+    $content = '<p>Hello <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Hello </p>');
+
+});
+
+
+
+
+test('it handles array values', function () {
+
+    $content = '<p>Tags: <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [['nf_id' => '123', 'value' => ['PHP', 'Laravel', 'Testing']]];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Tags: PHP, Laravel, Testing</p>');
+
+});
+
+
+
+
+test('it preserves HTML structure', function () {
+
+    $content = '<div><p>Hello <span mention mention-field-id="123">Placeholder</span></p><p>How are you?</p></div>';
+
+    $data = [['nf_id' => '123', 'value' => 'World']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<div><p>Hello World</p><p>How are you?</p></div>');
+
+});
+
+
+
+
+test('it handles UTF-8 characters', function () {
+
+    $content = '<p>こんにちは <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [['nf_id' => '123', 'value' => '世界']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>こんにちは 世界</p>');
+
+});
+
+
+
+
+test('it handles content without surrounding paragraph tags', function () {
+
+    $content = 'some text <span contenteditable="false" mention="" mention-field-id="123" mention-field-name="Post excerpt" mention-fallback="">Post excerpt</span> dewde';
+
+    $data = [['nf_id' => '123', 'value' => 'replaced text']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('some text replaced text dewde');
+
+});
diff --git a/client/components/forms/MentionInput.vue b/client/components/forms/MentionInput.vue
new file mode 100644
index 000000000..3dbb8369f
--- /dev/null
+++ b/client/components/forms/MentionInput.vue
@@ -0,0 +1,190 @@
+<template>
+    <InputWrapper v-bind="inputWrapperProps">
+      <template #label>
+        <slot name="label" />
+      </template>
+  
+      <MentionDropdown
+        :state="mentionState"
+        :mentions="mentions"
+      />
+  
+      <div class="relative">
+        <div
+          ref="editableDiv"
+          :contenteditable="!disabled"
+          class="mention-input"
+          :style="inputStyle"
+          :class="[
+            theme.default.input,
+            theme.default.borderRadius,
+            theme.default.spacing.horizontal,
+            theme.default.spacing.vertical,
+            theme.default.fontSize,
+            {
+              '!ring-red-500 !ring-2 !border-transparent': hasError,
+              '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled,
+            },
+            'pr-12'
+          ]"
+          :placeholder="placeholder"
+          @input="onInput"
+        />
+        <UButton
+          type="button"
+          color="white"
+          class="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 px-2"
+          icon="i-heroicons-at-symbol-16-solid"
+          @click="openMentionDropdown"
+        />
+      </div>
+  
+      <template
+        v-if="$slots.help"
+        #help
+      >
+        <slot name="help" />
+      </template>
+  
+      <template
+        v-if="$slots.error"
+        #error
+      >
+        <slot name="error" />
+      </template>
+    </InputWrapper>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, watch, computed } from 'vue'
+  import { inputProps, useFormInput } from './useFormInput.js'
+  import InputWrapper from './components/InputWrapper.vue'
+  import MentionDropdown from './components/MentionDropdown.vue'
+  const props = defineProps({
+    ...inputProps,
+    mentions: { type: Array, default: () => [] },
+  })
+  const emit = defineEmits(['update:modelValue'])
+  const { compVal, inputStyle, hasValidation, hasError, inputWrapperProps } = useFormInput(props, { emit })
+  const editableDiv = ref(null)
+  const savedRange = ref(null)
+  const mentionState = ref({
+    open: false,
+    onInsert: (mention) => {
+      insertMention(mention)
+      mentionState.value.open = false
+    },
+    onCancel: () => {
+      mentionState.value.open = false
+      restoreSelection()
+    },
+  })
+  const createMentionSpan = (mention) => {
+    const mentionSpan = document.createElement('span')
+    mentionSpan.setAttribute('mention-field-id', mention.field.id)
+    mentionSpan.setAttribute('mention-field-name', mention.field.name)
+    mentionSpan.setAttribute('mention-fallback', mention.fallback || '')
+    mentionSpan.setAttribute('contenteditable', 'false')
+    mentionSpan.setAttribute('mention', 'true')
+    mentionSpan.textContent = mention.field.name.length > 25 ? `${mention.field.name.slice(0, 25)}...` : mention.field.name
+    return mentionSpan
+  }
+  const insertMention = (mention) => {
+    const mentionSpan = createMentionSpan(mention)
+    restoreSelection()
+    const range = window.getSelection().getRangeAt(0)
+    // Insert the mention span
+    range.insertNode(mentionSpan)
+    
+    // Move the cursor after the inserted mention
+    range.setStartAfter(mentionSpan)
+    range.collapse(true)
+    // Apply the new selection
+    const selection = window.getSelection()
+    selection.removeAllRanges()
+    selection.addRange(range)
+    // Ensure the editableDiv is focused
+    editableDiv.value.focus()
+    updateCompVal()
+  }
+  const openMentionDropdown = () => {
+    saveSelection()
+    if (!savedRange.value) {
+      // If no previous selection, move cursor to the end
+      const range = document.createRange()
+      range.selectNodeContents(editableDiv.value)
+      range.collapse(false)
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(range)
+      savedRange.value = range
+    }
+    mentionState.value.open = true
+  }
+  const saveSelection = () => {
+    const selection = window.getSelection()
+    if (selection.rangeCount > 0) {
+      savedRange.value = selection.getRangeAt(0)
+    }
+  }
+  const restoreSelection = () => {
+    if (savedRange.value) {
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(savedRange.value)
+      editableDiv.value.focus()
+    }
+  }
+  const updateCompVal = () => {
+    compVal.value = editableDiv.value.innerHTML
+  }
+  const onInput = () => {
+    updateCompVal()
+  }
+  onMounted(() => {
+    if (compVal.value) {
+      editableDiv.value.innerHTML = compVal.value
+    }
+  })
+  watch(compVal, (newVal) => {
+    if (editableDiv.value && editableDiv.value.innerHTML !== newVal) {
+      editableDiv.value.innerHTML = newVal
+    }
+  })
+  defineExpose({
+    editableDiv,
+    compVal,
+    mentionState,
+    openMentionDropdown,
+    onInput,
+  })
+  </script>
+  
+  <style scoped>
+  .mention-input {
+    min-height: 1.5rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .mention-input:empty::before {
+    content: attr(placeholder);
+    color: #9ca3af;
+  }
+  .mention-input span[mention] {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    background-color: #dbeafe;
+    color: #1e40af;
+    border: 1px solid #bfdbfe;
+    border-radius: 0.25rem;
+    padding: 0 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    position: relative;
+    vertical-align: baseline;
+  }
+  </style>
\ No newline at end of file
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index 26143045c..4f398b6f4 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -4,12 +4,8 @@
       <slot name="label" />
     </template>
 
-    <VueEditor
-      :id="id ? id : name"
-      ref="editor"
-      v-model="compVal"
-      :disabled="disabled ? true : null"
-      :placeholder="placeholder"
+   <div
+      class="rich-editor resize-y"
       :class="[
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
@@ -17,12 +13,23 @@
         },
         theme.RichTextAreaInput.input,
         theme.RichTextAreaInput.borderRadius,
+        theme.default.fontSize,
       ]"
-      :editor-options="editorOptions"
-      :editor-toolbar="editorToolbar"
-      class="rich-editor resize-y"
-      :style="inputStyle"
-    />
+      :style="{
+        '--font-size': theme.default.fontSize
+      }"
+    >
+      <QuillyEditor
+        :id="id ? id : name"
+        ref="editor"
+        :key="id+placeholder"
+        v-model="compVal"
+        :options="quillOptions"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :style="inputStyle"
+      />
+    </div>
 
     <template #help>
       <slot name="help" />
@@ -30,59 +37,73 @@
     <template #error>
       <slot name="error" />
     </template>
+
+    <MentionDropdown
+      v-if="enableMentions && mentionState"
+      :state="mentionState"
+      :mentions="mentions"
+    />
+
   </InputWrapper>
 </template>
 
-<script>
-import { Quill, VueEditor } from 'vue3-editor'
+<script setup>
+import Quill from 'quill'
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
-
-Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
-
-export default {
-  name: 'RichTextAreaInput',
-  components: { InputWrapper, VueEditor },
-
-  props: {
-    ...inputProps,
-    editorOptions: {
-      type: Object,
-      default: () => {
-        return {
-          formats: [
-            'bold',
-            'color',
-            'font',
-            'italic',
-            'link',
-            'underline',
-            'header',
-            'indent',
-            'list'
-          ]
-        }
-      }
-    },
-    editorToolbar: {
-      type: Array,
-      default: () => {
-        return [
-          [{ header: 1 }, { header: 2 }],
-          ['bold', 'italic', 'underline', 'link'],
-          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ color: [] }]
-        ]
-      }
-    }
+import QuillyEditor from './components/QuillyEditor.vue'
+import MentionDropdown from './components/MentionDropdown.vue'
+import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
+const props = defineProps({
+  ...inputProps,
+  editorOptions: {
+    type: Object,
+    default: () => ({})
   },
-
-  setup (props, context) {
-    return {
-      ...useFormInput(props, context)
+  enableMentions: {
+    type: Boolean,
+    default: false
+  },
+  mentions: {
+    type: Array,
+    default: () => []
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
+const editor = ref(null)
+const mentionState = ref(null)
+// Move the mention extension registration to onMounted
+onMounted(() => {
+  if (props.enableMentions && !Quill.imports['blots/mention']) {
+    mentionState.value = registerMentionExtension(Quill)
+  }
+})
+const quillOptions = computed(() => {
+  const defaultOptions = {
+    theme: 'snow',
+    modules: {
+      toolbar: [
+        [{ 'header': 1 }, { 'header': 2 }],
+        ['bold', 'italic', 'underline', 'strike'],
+        ['link'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ color: [] }],
+      ]
     }
   }
-}
+  const mergedOptions = { ...defaultOptions, ...props.editorOptions, modules: { ...defaultOptions.modules, ...props.editorOptions.modules } }
+  
+  if (props.enableMentions) {
+    mergedOptions.modules.mention = true
+    if (!mergedOptions.modules.toolbar) {
+      mergedOptions.modules.toolbar = []
+    }
+    mergedOptions.modules.toolbar.push(['mention'])
+  }
+  
+  return mergedOptions
+})
 </script>
 
 <style lang="scss">
@@ -91,18 +112,22 @@ export default {
     border-bottom: 0px !important;
     border-right: 0px !important;
     border-left: 0px !important;
-
+    font-size: var(--font-size);
     .ql-editor {
       min-height: 100px !important;
     }
   }
-
   .ql-toolbar {
     border-top: 0px !important;
     border-right: 0px !important;
     border-left: 0px !important;
   }
-
+  .ql-header {
+    @apply rounded-md;
+  }
+  .ql-editor.ql-blank:before {
+    @apply text-gray-400 dark:text-gray-500 not-italic;
+  }
   .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
   .ql-snow .ql-toolbar .ql-picker-item:hover,
   .ql-snow .ql-toolbar .ql-picker-label.ql-active,
@@ -120,4 +145,20 @@ export default {
     @apply text-nt-blue;
   }
 }
-</style>
+.ql-mention {
+  padding-top: 0px !important;
+}
+.ql-mention::after {
+  content: '@';
+  font-size: 16px;
+}
+.rich-editor, .mention-input {
+  span[mention] {
+    @apply inline-flex items-center align-baseline leading-tight text-sm relative bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 py-0.5 mx-0.5;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/components/forms/TextBlock.vue b/client/components/forms/TextBlock.vue
new file mode 100644
index 000000000..8a2c7c641
--- /dev/null
+++ b/client/components/forms/TextBlock.vue
@@ -0,0 +1,29 @@
+<template>
+    <div
+      v-html="processedContent"
+    />
+  </template>
+  
+  <script setup>
+  const props = defineProps({
+    content: {
+      type: String,
+      required: true
+    },
+    mentionsAllowed: {
+      type: Boolean,
+      default: false
+    },
+    form: {
+      type: Object,
+      default: null
+    },
+    formData: {
+      type: Object,
+      default: null
+    }
+  })
+  const processedContent = computed(() => {
+    return useParseMention(props.content, props.mentionsAllowed, props.form, props.formData)
+  })
+  </script>
\ No newline at end of file
diff --git a/client/components/forms/components/FormSubmissionFormatter.js b/client/components/forms/components/FormSubmissionFormatter.js
new file mode 100644
index 000000000..ea7cab15e
--- /dev/null
+++ b/client/components/forms/components/FormSubmissionFormatter.js
@@ -0,0 +1,105 @@
+import { format, parseISO } from 'date-fns'
+
+export class FormSubmissionFormatter {
+  constructor(form, formData) {
+    this.form = form
+    this.formData = formData
+    this.createLinks = false
+    this.outputStringsOnly = false
+    this.showGeneratedIds = false
+    this.datesIsoFormat = false
+  }
+
+  setCreateLinks() {
+    this.createLinks = true
+    return this
+  }
+
+  setShowGeneratedIds() {
+    this.showGeneratedIds = true
+    return this
+  }
+
+  setOutputStringsOnly() {
+    this.outputStringsOnly = true
+    return this
+  }
+
+  setUseIsoFormatForDates() {
+    this.datesIsoFormat = true
+    return this
+  }
+
+  getFormattedData() {
+    const formattedData = {}
+
+    this.form.properties.forEach(field => {
+      if (!this.formData[field.id] && !this.fieldGeneratesId(field)) {
+        return
+      }
+
+      const value = this.formatFieldValue(field, this.formData[field.id])
+      formattedData[field.id] = value
+    })
+
+    return formattedData
+  }
+
+  formatFieldValue(field, value) {
+    switch (field.type) {
+      case 'url':
+        return this.createLinks ? `<a href="${value}">${value}</a>` : value
+      case 'email':
+        return this.createLinks ? `<a href="mailto:${value}">${value}</a>` : value
+      case 'checkbox':
+        return value ? 'Yes' : 'No'
+      case 'date':
+        return this.formatDateValue(field, value)
+      case 'people':
+        return this.formatPeopleValue(value)
+      case 'multi_select':
+        return this.outputStringsOnly ? value.join(', ') : value
+      case 'relation':
+        return this.formatRelationValue(value)
+      default:
+        return Array.isArray(value) && this.outputStringsOnly ? value.join(', ') : value
+    }
+  }
+
+  formatDateValue(field, value) {
+    if (this.datesIsoFormat) {
+      return Array.isArray(value) 
+        ? { start_date: value[0], end_date: value[1] || null }
+        : value
+    }
+
+    const dateFormat = (field.date_format || 'dd/MM/yyyy') === 'dd/MM/yyyy' ? 'dd/MM/yyyy' : 'MM/dd/yyyy'
+    const timeFormat = field.with_time ? (field.time_format === 24 ? 'HH:mm' : 'h:mm a') : ''
+    const fullFormat = `${dateFormat}${timeFormat ? ' ' + timeFormat : ''}`
+
+    if (Array.isArray(value)) {
+      const start = format(parseISO(value[0]), fullFormat)
+      const end = value[1] ? format(parseISO(value[1]), fullFormat) : null
+      return end ? `${start} - ${end}` : start
+    }
+
+    return format(parseISO(value), fullFormat)
+  }
+
+  formatPeopleValue(value) {
+    if (!value) return []
+    const people = Array.isArray(value) ? value : [value]
+    return this.outputStringsOnly ? people.map(p => p.name).join(', ') : people
+  }
+
+  formatRelationValue(value) {
+    if (!value) return []
+    const relations = Array.isArray(value) ? value : [value]
+    const formatted = relations.map(r => r.title || 'Untitled')
+    return this.outputStringsOnly ? formatted.join(', ') : formatted
+  }
+
+  fieldGeneratesId(field) {
+    return this.showGeneratedIds && (field.generates_auto_increment_id || field.generates_uuid)
+  }
+}
diff --git a/client/components/forms/components/MentionDropdown.vue b/client/components/forms/components/MentionDropdown.vue
new file mode 100644
index 000000000..1e7b116cc
--- /dev/null
+++ b/client/components/forms/components/MentionDropdown.vue
@@ -0,0 +1,116 @@
+<template>
+    <UPopover
+      ref="popover"
+      v-model:open="open"
+      class="h-0"
+      @close="cancel"
+    >
+      <span class="hidden" />
+      <template #panel>
+        <div class="p-2 max-h-[300px] flex flex-col">
+          <div class="flex items-center border-b -mx-2 px-2">
+            <div class="font-semibold w-1/2 mb-2 flex-grow">
+              Insert Mention
+            </div>
+            <input
+              v-model="fallbackValue"
+              class="p-1 mb-2 text-sm w-1/2 border rounded-md hover:bg-gray-50"
+              placeholder="Fallback value"
+            >
+          </div>
+          <div class="overflow-scroll pt-2">
+            <div class="w-full max-w-xs mb-2">
+              <div class="text-sm text-gray-500 mb-1">
+                Select a field
+              </div>
+              <div class="space-y-1">
+                <div
+                  v-for="field in filteredMentions"
+                  :key="field.id"
+                  class="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100"
+                  :class="{ 'bg-blue-50 border border-blue-100 inset-0': selectedField?.id === field.id, 'border border-transparent': selectedField?.id !== field.id }"
+                  @click="selectField(field)"
+                  @dblclick="selectField(field, true)"
+                >
+                  <BlockTypeIcon
+                    :type="field.type"
+                    class="mr-2"
+                  />
+                  <p class="text-sm text-gray-700 truncate">
+                    {{ field.name }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+            
+          <div class="flex border-t pt-2 -mx-2 px-2 justify-end space-x-2">
+            <UButton
+              size="sm"
+              color="primary"
+              class="px-6"
+              :disabled="!selectedField"
+              @click="insertMention" 
+            >
+              Insert
+            </UButton>
+            <UButton
+              size="sm"
+              color="gray"
+              @click="cancel"
+            >
+              Cancel
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </template>
+      
+  <script setup>
+  import { ref, toRefs } from 'vue'
+  import BlockTypeIcon from '~/components/open/forms/components/BlockTypeIcon.vue'
+  import blocksTypes from '~/data/blocks_types.json'
+  const props = defineProps({
+    state: Object,
+    mentions: Array
+  })
+  defineShortcuts({
+    escape: () => {
+      open.value = false
+    }
+  })
+  const { open, onInsert, onCancel } = toRefs(props.state)
+  const selectedField = ref(null)
+  const fallbackValue = ref('')
+  const filteredMentions = computed(() => {
+    return props.mentions.filter(mention => blocksTypes[mention.type]?.is_input ?? false)
+  })
+  function selectField(field, insert = false) {
+    selectedField.value = {...field}
+    if (insert) {
+      insertMention()
+    }
+  }
+  watch(open, (newValue) => {
+    if (newValue) {
+      selectedField.value = null
+      fallbackValue.value = ''
+    }
+  })
+  const insertMention = () => {
+    if (selectedField.value && onInsert.value) {
+      onInsert.value({
+        field: selectedField.value,
+        fallback: fallbackValue.value
+      })
+      open.value = false
+    }
+  }
+  const cancel = () => {
+    if (onCancel.value) {
+      onCancel.value()
+    }
+    open.value = false
+  }
+  </script>
\ No newline at end of file
diff --git a/client/components/forms/components/QuillyEditor.vue b/client/components/forms/components/QuillyEditor.vue
new file mode 100644
index 000000000..854cb714c
--- /dev/null
+++ b/client/components/forms/components/QuillyEditor.vue
@@ -0,0 +1,98 @@
+<template>
+    <div
+      ref="container"
+      class="quilly-editor"
+    />
+  </template>
+  
+  <script setup>
+  import Quill from 'quill'
+  import 'quill/dist/quill.snow.css'
+  import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
+  
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+  
+  const emit = defineEmits([
+    'update:modelValue',
+    'text-change',
+    'selection-change',
+    'editor-change',
+    'blur',
+    'focus',
+    'ready'
+  ])
+  
+  let quillInstance = null
+  const container = ref(null)
+  let isInternalChange = false
+  
+  const setContents = (content) => {
+    if (!quillInstance) return
+  
+    isInternalChange = true
+    quillInstance.root.innerHTML = content
+    quillInstance.update()
+    isInternalChange = false
+  }
+  
+  const initializeQuill = () => {
+    if (container.value) {
+      quillInstance = new Quill(container.value, props.options)
+  
+      quillInstance.on('selection-change', (range, oldRange, source) => {
+        if (!range) {
+          emit('blur', quillInstance)
+        } else {
+          emit('focus', quillInstance)
+        }
+        emit('selection-change', { range, oldRange, source })
+      })
+  
+      quillInstance.on('text-change', (delta, oldContents, source) => {
+        if (!isInternalChange) {
+          const html = quillInstance.root.innerHTML
+          emit('text-change', { delta, oldContents, source })
+          emit('update:modelValue', html)
+        }
+      })
+  
+      quillInstance.on('editor-change', (eventName, ...args) => {
+        emit('editor-change', eventName, ...args)
+      })
+  
+      if (props.modelValue) {
+        setContents(props.modelValue)
+      }
+  
+      emit('ready', quillInstance)
+    }
+  }
+  
+  onMounted(() => {
+    initializeQuill()
+  })
+  
+  watch(() => props.modelValue, (newValue) => {
+    if (quillInstance && newValue !== quillInstance.root.innerHTML) {
+      setContents(newValue || '')
+    }
+  }, { immediate: true })
+  
+  onBeforeUnmount(() => {
+    if (quillInstance) {
+      quillInstance.off('selection-change')
+      quillInstance.off('text-change')
+      quillInstance.off('editor-change')
+    }
+    quillInstance = null
+  })
+  </script>
\ No newline at end of file
diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index e61ce3fe7..48598de3c 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -140,9 +140,13 @@
         key="submitted"
         class="px-2"
       >
-        <p
+      <TextBlock
+          v-if="form.submitted_text"
           class="form-description text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
-          v-html="form.submitted_text "
+          :content="form.submitted_text"
+          :mentions-allowed="true"
+          :form="form"
+          :form-data="submittedData"
         />
         <open-form-button
           v-if="form.re_fillable"
@@ -222,7 +226,8 @@ export default {
         password: null
       }),
       hidePasswordDisabledMsg: false,
-      submissionId: false
+      submissionId: false,
+      submittedData: null
     }
   },
 
@@ -261,6 +266,7 @@ export default {
       this.loading = true
 
       form.post('/forms/' + this.form.slug + '/answer').then((data) => {
+        this.submittedData = form.data()
         useAmplitude().logEvent('form_submission', {
           workspace_id: this.form.workspace_id,
           form_id: this.form.id
diff --git a/client/components/open/forms/components/FirstSubmissionModal.vue b/client/components/open/forms/components/FirstSubmissionModal.vue
index 25fbbf990..333990ee9 100644
--- a/client/components/open/forms/components/FirstSubmissionModal.vue
+++ b/client/components/open/forms/components/FirstSubmissionModal.vue
@@ -2,7 +2,7 @@
   <modal
     :show="show"
     compact-header
-    backdrop-blur="sm"
+    ;backdrop-blur="true"
     @close="$emit('close')"
   >
     <template #title>
diff --git a/client/components/open/forms/components/form-components/FormSubmissionSettings.vue b/client/components/open/forms/components/form-components/FormSubmissionSettings.vue
index 1a5214388..41625e1d7 100644
--- a/client/components/open/forms/components/form-components/FormSubmissionSettings.vue
+++ b/client/components/open/forms/components/form-components/FormSubmissionSettings.vue
@@ -129,6 +129,8 @@
       </template>
       <template v-else>
         <rich-text-area-input
+          enable-mentions
+          :mentions="form.properties"
           name="submitted_text"
           class="w-full"
           :form="form"
diff --git a/client/components/open/integrations/SubmissionConfirmationIntegration.vue b/client/components/open/integrations/SubmissionConfirmationIntegration.vue
index 6a9885d8c..15fd02fb2 100644
--- a/client/components/open/integrations/SubmissionConfirmationIntegration.vue
+++ b/client/components/open/integrations/SubmissionConfirmationIntegration.vue
@@ -24,30 +24,32 @@
         name="settings.notification_sender"
         class="mt-4"
         required
-        label="Confirmation Email Sender Name"
+        label="Email Sender Name"
         help="Emails will be sent from our email address but you can customize the name of the Sender"
       />
-      <text-input
+      <MentionInput
         :form="integrationData"
+        :mentions="form.properties"
         name="settings.notification_subject"
         class="mt-4"
         required
-        label="Confirmation email subject"
-        help="Subject of the confirmation email that will be sent"
+        label="Email subject"
       />
       <rich-text-area-input
         :form="integrationData"
         name="settings.notification_body"
+        :enable-mentions="true"
+        :mentions="form.properties"
         class="mt-4"
         required
-        label="Confirmation email content"
-        help="Content of the confirmation email that will be sent"
+        label="Email content"
       />
-      <text-input
+      <MentionInput
         :form="integrationData"
+        :mentions="form.properties"
         name="settings.confirmation_reply_to"
         class="mt-4"
-        label="Confirmation Reply To"
+        label="Reply To"
         help="If empty, Reply-to will be your own email."
       />
       <toggle-switch-input
diff --git a/client/composables/lib/vForm/Form.js b/client/composables/lib/vForm/Form.js
index b8e3c384c..cab2744cc 100644
--- a/client/composables/lib/vForm/Form.js
+++ b/client/composables/lib/vForm/Form.js
@@ -89,7 +89,7 @@ class Form {
     Object.keys(this)
       .filter((key) => !Form.ignore.includes(key))
       .forEach((key) => {
-        this[key] = JSON.parse(JSON.stringify(this.originalData[key]))
+        this[key] = cloneDeep(this.originalData[key])
       })
   }
 
diff --git a/client/composables/useParseMention.js b/client/composables/useParseMention.js
new file mode 100644
index 000000000..59494d307
--- /dev/null
+++ b/client/composables/useParseMention.js
@@ -0,0 +1,39 @@
+import { FormSubmissionFormatter } from '~/components/forms/components/FormSubmissionFormatter'
+
+export function useParseMention(content, mentionsAllowed, form, formData) {
+  if (!mentionsAllowed || !form || !formData) {
+    return content
+  }
+
+  const formatter = new FormSubmissionFormatter(form, formData).setOutputStringsOnly()
+  const formattedData = formatter.getFormattedData()
+
+  // Create a new DOMParser
+  const parser = new DOMParser()
+  // Parse the content as HTML
+  const doc = parser.parseFromString(content, 'text/html')
+
+  // Find all elements with mention attribute
+  const mentionElements = doc.querySelectorAll('[mention]')
+
+  mentionElements.forEach(element => {
+    const fieldId = element.getAttribute('mention-field-id')
+    const fallback = element.getAttribute('mention-fallback')
+    const value = formattedData[fieldId]
+
+    if (value) {
+      if (Array.isArray(value)) {
+        element.textContent = value.join(', ')
+      } else {
+        element.textContent = value
+      }
+    } else if (fallback) {
+      element.textContent = fallback
+    } else {
+      element.remove()
+    }
+  })
+
+  // Return the processed HTML content
+  return doc.body.innerHTML
+}
\ No newline at end of file
diff --git a/client/data/blocks_types.json b/client/data/blocks_types.json
index c13950505..0a1ac7b9b 100644
--- a/client/data/blocks_types.json
+++ b/client/data/blocks_types.json
@@ -5,7 +5,8 @@
     "icon": "i-heroicons-bars-3-bottom-left",
     "default_block_name": "Your name",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "date": {
     "name": "date",
@@ -13,7 +14,8 @@
     "icon": "i-heroicons-calendar-20-solid",
     "default_block_name": "Date",
     "bg_class": "bg-green-100",
-    "text_class": "text-green-900"
+    "text_class": "text-green-900",
+    "is_input": true
   },
   "url": {
     "name": "url",
@@ -21,7 +23,8 @@
     "icon": "i-heroicons-link-20-solid",
     "default_block_name": "Link",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "phone_number": {
     "name": "phone_number",
@@ -29,7 +32,8 @@
     "icon": "i-heroicons-phone-20-solid",
     "default_block_name": "Phone Number",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "email": {
     "name": "email",
@@ -37,7 +41,8 @@
     "icon": "i-heroicons-at-symbol-20-solid",
     "default_block_name": "Email",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "checkbox": {
     "name": "checkbox",
@@ -45,7 +50,8 @@
     "icon": "i-heroicons-check-circle",
     "default_block_name": "Checkbox",
     "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "select": {
     "name": "select",
@@ -53,7 +59,8 @@
     "icon": "i-heroicons-chevron-up-down-20-solid",
     "default_block_name": "Select",
     "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "multi_select": {
     "name": "multi_select",
@@ -61,7 +68,8 @@
     "icon": "i-heroicons-chevron-up-down-20-solid",
     "default_block_name": "Multi Select",
     "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "matrix": {
     "name": "matrix",
@@ -69,7 +77,8 @@
     "icon": "i-heroicons-table-cells-20-solid",
     "default_block_name": "Matrix",
      "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "number": {
     "name": "number",
@@ -77,7 +86,8 @@
     "icon": "i-heroicons-hashtag-20-solid",
     "default_block_name": "Number",
     "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "rating": {
     "name": "rating",
@@ -85,7 +95,8 @@
     "icon": "i-heroicons-star",
     "default_block_name": "Rating",
      "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "scale": {
     "name": "scale",
@@ -93,7 +104,8 @@
     "icon": "i-heroicons-scale-20-solid",
     "default_block_name": "Scale",
     "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "slider": {
     "name": "slider",
@@ -101,7 +113,8 @@
     "icon": "i-heroicons-adjustments-horizontal",
     "default_block_name": "Slider",
     "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "files": {
     "name": "files",
@@ -109,7 +122,8 @@
     "icon": "i-heroicons-paper-clip",
     "default_block_name": "Files",
     "bg_class": "bg-pink-100",
-    "text_class": "text-pink-900"
+    "text_class": "text-pink-900",
+    "is_input": true
   },
   "signature": {
     "name": "signature",
@@ -117,7 +131,8 @@
     "icon": "i-heroicons-pencil-square-20-solid",
     "default_block_name": "Signature",
     "bg_class": "bg-pink-100",
-    "text_class": "text-pink-900"
+    "text_class": "text-pink-900",
+    "is_input": true
   },
   "nf-text": {
     "name": "nf-text",
@@ -125,7 +140,8 @@
     "icon": "i-heroicons-bars-3",
     "default_block_name": "Text",
     "bg_class": "bg-yellow-100",
-    "text_class": "text-yellow-900"
+    "text_class": "text-yellow-900",
+    "is_input": false
   },
   "nf-page-break": {
     "name": "nf-page-break",
@@ -133,7 +149,8 @@
     "icon": "i-heroicons-document-plus",
     "default_block_name": "Page Break",
     "bg_class": "bg-gray-100",
-    "text_class": "text-gray-900"
+    "text_class": "text-gray-900",
+    "is_input": false
   },
   "nf-divider": {
     "name": "nf-divider",
@@ -141,7 +158,8 @@
     "icon": "i-heroicons-minus",
     "default_block_name": "Divider",
     "bg_class": "bg-gray-100",
-    "text_class": "text-gray-900"
+    "text_class": "text-gray-900",
+    "is_input": false
   },
   "nf-image": {
     "name": "nf-image",
@@ -149,7 +167,8 @@
     "icon": "i-heroicons-photo",
     "default_block_name": "Image",
     "bg_class": "bg-yellow-100",
-    "text_class": "text-yellow-900"
+    "text_class": "text-yellow-900",
+    "is_input": false
   },
   "nf-code": {
     "name": "nf-code",
@@ -157,6 +176,7 @@
     "icon": "i-heroicons-code-bracket",
     "default_block_name": "Code Block",
     "bg_class": "bg-yellow-100",
-    "text_class": "text-yellow-900"
+    "text_class": "text-yellow-900",
+    "is_input": false
   }
 }
diff --git a/client/lib/quill/quillMentionExtension.js b/client/lib/quill/quillMentionExtension.js
new file mode 100644
index 000000000..ffb28d8d6
--- /dev/null
+++ b/client/lib/quill/quillMentionExtension.js
@@ -0,0 +1,130 @@
+import { reactive } from 'vue'
+import Quill from 'quill'
+const Inline = Quill.import('blots/inline')
+
+export default function registerMentionExtension(Quill) {
+  class MentionBlot extends Inline {
+    static blotName = 'mention'
+    static tagName = 'SPAN'
+
+    static create(data) {
+      let node = super.create()
+      MentionBlot.setAttributes(node, data)
+      return node
+    }
+
+    static setAttributes(node, data) {
+      node.setAttribute('contenteditable', 'false')
+      node.setAttribute('mention', 'true')
+
+      if (data && typeof data === 'object') {
+        node.setAttribute('mention-field-id', data.field?.nf_id || '')
+        node.setAttribute('mention-field-name', data.field?.name || '')
+        node.setAttribute('mention-fallback', data.fallback || '')
+        node.textContent = data.field?.name || ''
+      } else {
+        // Handle case where data is not an object (e.g., during undo)
+        node.textContent = data || ''
+      }
+    }
+
+    static formats(domNode) {
+      return {
+        'mention-field-id': domNode.getAttribute('mention-field-id') || '',
+        'mention-field-name': domNode.getAttribute('mention-field-name') || '',
+        'mention-fallback': domNode.getAttribute('mention-fallback') || ''
+      }
+    }
+
+    format(name, value) {
+      if (name === 'mention' && value) {
+        MentionBlot.setAttributes(this.domNode, value)
+      } else {
+        super.format(name, value)
+      }
+    }
+
+    formats() {
+      let formats = super.formats()
+      formats['mention'] = MentionBlot.formats(this.domNode)
+      return formats
+    }
+
+    static value(domNode) {
+      return {
+        field: {
+          nf_id: domNode.getAttribute('mention-field-id') || '',
+          name: domNode.getAttribute('mention-field-name') || ''
+        },
+        fallback: domNode.getAttribute('mention-fallback') || ''
+      }
+    }
+
+    // Override attach to ensure contenteditable is always set
+    attach() {
+      super.attach()
+      this.domNode.setAttribute('contenteditable', 'false')
+    }
+
+    length() {
+      return 1
+    }
+  }
+
+  Quill.register(MentionBlot)
+
+  const mentionState = reactive({
+    open: false,
+    onInsert: null,
+    onCancel: null,
+  })
+
+  class MentionModule {
+    constructor(quill, options) {
+      this.quill = quill
+      this.options = options
+
+      this.setupMentions()
+    }
+
+    setupMentions() {
+      const toolbar = this.quill.getModule('toolbar')
+      if (toolbar) {
+        toolbar.addHandler('mention', () => {
+          const range = this.quill.getSelection()
+          if (range) {
+            mentionState.open = true
+            mentionState.onInsert = (mention) => {
+              this.insertMention(mention, range.index)
+            }
+            mentionState.onCancel = () => {
+              mentionState.open = false
+            }
+          }
+        })
+      }
+    }
+
+    insertMention(mention, index) {
+      mentionState.open = false
+
+      // Insert the mention
+      this.quill.insertEmbed(index, 'mention', mention, Quill.sources.USER)
+
+      // Calculate the length of the inserted mention
+      const mentionLength = this.quill.getLength() - index
+
+      nextTick(() => {
+        // Focus the editor
+        this.quill.focus()
+
+        // Set the selection after the mention
+        this.quill.setSelection(index + mentionLength, 0, Quill.sources.SILENT)
+      })
+    }
+  }
+
+  Quill.register('modules/mention', MentionModule)
+
+  return mentionState
+}
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index d5ca746c2..ba1c30512 100644
--- a/client/package.json
+++ b/client/package.json
@@ -59,6 +59,7 @@
     "prismjs": "^1.24.1",
     "qrcode": "^1.5.1",
     "query-builder-vue-3": "^1.0.1",
+    "quill": "^2.0.2",
     "tailwind-merge": "^2.3.0",
     "tinymotion": "^0.2.0",
     "v-calendar": "^3.1.2",
@@ -70,7 +71,6 @@
     "vue-json-pretty": "^2.4.0",
     "vue-notion": "^3.0.0-beta.1",
     "vue-signature-pad": "^3.0.2",
-    "vue3-editor": "^0.1.1",
     "vuedraggable": "next",
     "webcam-easy": "^1.1.1"
   },