diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index 3feb2cbff..c2691721f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -32,7 +32,10 @@
           :show-action-button="false"
         >
           <template #settingsItem>
-            <message-signature />
+            <message-signature
+              :message-signature="currentUser.message_signature"
+              @update-signature="updateSignature"
+            />
           </template>
         </base-personal-i-item>
 
@@ -251,6 +254,26 @@ export default {
       await copyTextToClipboard(value);
       this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
+    async updateSignature(messageSignature) {
+      try {
+        await this.$store.dispatch('updateProfile', {
+          message_signature: messageSignature || '',
+        });
+        this.errorMessage = this.$t(
+          'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_SUCCESS'
+        );
+      } catch (error) {
+        this.errorMessage = this.$t(
+          'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR'
+        );
+        if (error?.response?.data?.message) {
+          this.errorMessage = error.response.data.message;
+        }
+      } finally {
+        this.isUpdating = false;
+        this.showAlert(this.errorMessage);
+      }
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
index 3243aebbd..8b1663196 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
@@ -1,85 +1,47 @@
 <template>
   <div class="flex flex-col gap-6">
-    <woot-message-editor
-      id="message-signature-input"
-      v-model="messageSignature"
-      class="message-editor h-[10rem] !px-3"
-      :is-format-mode="true"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
-      :enabled-menu-options="customEditorMenuList"
-      :enable-suggestions="false"
-      :show-image-resize-toolbar="true"
-    />
-    <form-button
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-      @click.prevent="updateSignature"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </form-button>
+    <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
+      <woot-message-editor
+        id="message-signature-input"
+        v-model="signature"
+        class="message-editor h-[10rem] !px-3"
+        :is-format-mode="true"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+        :enabled-menu-options="customEditorMenuList"
+        :enable-suggestions="false"
+        :show-image-resize-toolbar="true"
+      />
+      <form-button
+        type="submit"
+        color-scheme="primary"
+        variant="solid"
+        size="large"
+      >
+        {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
+      </form-button>
+    </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-
+<script setup>
+import { defineProps, ref } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 import FormButton from 'v3/components/Form/Button.vue';
 
-export default {
-  components: {
-    WootMessageEditor,
-    FormButton,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      messageSignature: '',
-      enableMessageSignature: false,
-      isUpdating: false,
-      errorMessage: '',
-      customEditorMenuList: MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      currentUserId: 'getCurrentUserID',
-    }),
-  },
-  mounted() {
-    this.initValues();
-  },
-  methods: {
-    initValues() {
-      const { message_signature: messageSignature } = this.currentUser;
-      this.messageSignature = messageSignature || '';
-    },
-    async updateSignature() {
-      try {
-        await this.$store.dispatch('updateProfile', {
-          message_signature: this.messageSignature || '',
-        });
-        this.errorMessage = this.$t(
-          'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_SUCCESS'
-        );
-      } catch (error) {
-        this.errorMessage = this.$t(
-          'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR'
-        );
-        if (error?.response?.data?.message) {
-          this.errorMessage = error.response.data.message;
-        }
-      } finally {
-        this.isUpdating = false;
-        this.initValues();
-        this.showAlert(this.errorMessage);
-      }
-    },
+const props = defineProps({
+  messageSignature: {
+    type: String,
+    default: '',
   },
+});
+
+const signature = ref(props.messageSignature);
+
+const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
+
+const emit = defineEmits(['update-signature']);
+
+const updateSignature = () => {
+  emit('update-signature', signature.value);
 };
 </script>