diff --git a/.eslintrc.js b/.eslintrc.js
index 18162ee76..f3d050ab3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,6 +27,160 @@ module.exports = {
     'import/no-unresolved': 'off',
     'vue/html-indent': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/next-tick-style': ['error', 'callback'],
+    'vue/block-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+      },
+    ],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/define-emits-declaration': ['error'],
+    'vue/define-macros-order': [
+      'error',
+      {
+        order: ['defineProps', 'defineEmits'],
+        defineExposeLast: false,
+      },
+    ],
+    'vue/define-props-declaration': ['error', 'runtime'],
+    'vue/match-component-import-name': ['error'],
+    'vue/no-bare-strings-in-template': [
+      'error',
+      {
+        allowlist: [
+          '(',
+          ')',
+          ',',
+          '.',
+          '&',
+          '+',
+          '-',
+          '=',
+          '*',
+          '/',
+          '#',
+          '%',
+          '!',
+          '?',
+          ':',
+          '[',
+          ']',
+          '{',
+          '}',
+          '<',
+          '>',
+          '⌘',
+          '📄',
+          '🎉',
+          '💬',
+          '👥',
+          '📥',
+          '🔖',
+          '❌',
+          '✅',
+          '\u00b7',
+          '\u2022',
+          '\u2010',
+          '\u2013',
+          '\u2014',
+          '\u2212',
+          '|',
+        ],
+        attributes: {
+          '/.+/': [
+            'title',
+            'aria-label',
+            'aria-placeholder',
+            'aria-roledescription',
+            'aria-valuetext',
+          ],
+          input: ['placeholder'],
+        },
+        directives: ['v-text'],
+      },
+    ],
+    'vue/no-empty-component-block': 'error',
+    'vue/no-multiple-objects-in-class': 'error',
+    'vue/no-root-v-if': 'warn',
+    'vue/no-static-inline-styles': [
+      'error',
+      {
+        allowBinding: false,
+      },
+    ],
+    'vue/no-template-target-blank': [
+      'error',
+      {
+        allowReferrer: false,
+        enforceDynamicLinks: 'always',
+      },
+    ],
+    'vue/no-required-prop-with-default': [
+      'error',
+      {
+        autofix: false,
+      },
+    ],
+    'vue/no-this-in-before-route-enter': 'error',
+    'vue/no-undef-components': [
+      'error',
+      {
+        ignorePatterns: [
+          '^woot-',
+          '^fluent-',
+          '^multiselect',
+          '^router-link',
+          '^router-view',
+          '^ninja-keys',
+          '^FormulateForm',
+          '^FormulateInput',
+          '^highlightjs',
+        ],
+      },
+    ],
+    'vue/no-unused-emit-declarations': 'error',
+    'vue/no-unused-refs': 'error',
+    'vue/no-use-v-else-with-v-for': 'error',
+    'vue/prefer-true-attribute-shorthand': 'error',
+    'vue/no-useless-v-bind': [
+      'error',
+      {
+        ignoreIncludesComment: false,
+        ignoreStringEscape: false,
+      },
+    ],
+    'vue/no-v-text': 'error',
+    'vue/padding-line-between-blocks': ['error', 'always'],
+    'vue/prefer-separate-static-class': 'error',
+    'vue/require-explicit-slots': 'error',
+    'vue/require-macro-variable-name': [
+      'error',
+      {
+        defineProps: 'props',
+        defineEmits: 'emit',
+        defineSlots: 'slots',
+        useSlots: 'slots',
+        useAttrs: 'attrs',
+      },
+    ],
+    'vue/no-unused-properties': [
+      'error',
+      {
+        groups: ['props'],
+        deepData: false,
+        ignorePublicMembers: false,
+        unreferencedOptions: [],
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index c343fbe4f..efb89f489 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -1,30 +1,3 @@
-<template>
-  <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
-    id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTLView }"
-    :dir="isRTLView ? 'rtl' : 'ltr'"
-  >
-    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="currentAccountId">
-      <pending-email-verification-banner v-if="hideOnOnboardingView" />
-      <payment-pending-banner v-if="hideOnOnboardingView" />
-      <upgrade-banner />
-    </template>
-    <transition name="fade" mode="out-in">
-      <router-view />
-    </transition>
-    <add-account-modal
-      :show="showAddAccountModal"
-      :has-accounts="hasAccounts"
-    />
-    <woot-snackbar-box />
-    <network-notification />
-  </div>
-  <loading-state v-else />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import router from '../dashboard/routes';
@@ -74,7 +47,6 @@ export default {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
       currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
       currentAccountId: 'getCurrentAccountId',
@@ -147,6 +119,30 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    id="app"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTLView }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
+  >
+    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
+    <template v-if="currentAccountId">
+      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
+      <PaymentPendingBanner v-if="hideOnOnboardingView" />
+      <UpgradeBanner />
+    </template>
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
+    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
+    <WootSnackbarBox />
+    <NetworkNotification />
+  </div>
+  <LoadingState v-else />
+</template>
+
 <style lang="scss">
 @import './assets/scss/app';
 </style>
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 87370185d..6fc0ee0d9 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,35 +1,3 @@
-<template>
-  <div class="-mt-px text-sm">
-    <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
-      @click="$emit('click')"
-    >
-      <div class="flex justify-between mb-0.5">
-        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
-          {{ title }}
-        </h5>
-      </div>
-      <div class="flex flex-row">
-        <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
-          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
-          <fluent-icon v-else size="24" icon="add" type="solid" />
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 
@@ -61,3 +29,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="-mt-px text-sm">
+    <button
+      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      @click="$emit('click')"
+    >
+      <div class="flex justify-between mb-0.5">
+        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <h5
+          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
+        >
+          {{ title }}
+        </h5>
+      </div>
+      <div class="flex flex-row">
+        <slot name="button" />
+        <div class="flex justify-end w-3 text-woot-500">
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isOpen"
+      class="bg-white dark:bg-slate-900"
+      :class="compact ? 'p-0' : 'p-4'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index 6cff70bd3..2322edbfb 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -1,17 +1,3 @@
-<template>
-  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
-    @click="$emit('click')"
-  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
-      {{ title }}
-    </h3>
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <button
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
+  >
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
 <style scoped lang="scss">
 .inactive {
   img {
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index faff1c4a9..22d5278a5 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -1,119 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
-    :class="[
-      { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
-    ]"
-  >
-    <slot />
-    <chat-list-header
-      :page-title="pageTitle"
-      :has-applied-filters="hasAppliedFilters"
-      :has-active-folders="hasActiveFolders"
-      :active-status="activeStatus"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
-      @basic-filter-change="onBasicFilterChange"
-    />
-
-    <add-custom-views
-      v-if="showAddFoldersModal"
-      :custom-views-query="foldersQuery"
-      :open-last-saved-item="openLastSavedItemInFolder"
-      @close="onCloseAddFoldersModal"
-    />
-
-    <delete-custom-views
-      v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
-      :active-custom-view="activeFolder"
-      :custom-views-id="foldersId"
-      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
-      @close="onCloseDeleteFoldersModal"
-    />
-
-    <chat-type-tabs
-      v-if="!hasAppliedFiltersOrActiveFolders"
-      :items="assigneeTabItems"
-      :active-tab="activeAssigneeTab"
-      class="tab--chat-type"
-      @chatTabChange="updateAssigneeTab"
-    />
-
-    <p
-      v-if="!chatListLoading && !conversationList.length"
-      class="flex items-center justify-center p-4 overflow-auto"
-    >
-      {{ $t('CHAT_LIST.LIST.404') }}
-    </p>
-    <conversation-bulk-actions
-      v-if="selectedConversations.length"
-      :conversations="selectedConversations"
-      :all-conversations-selected="allConversationsSelected"
-      :selected-inboxes="uniqueInboxes"
-      :show-open-action="allSelectedConversationsStatus('open')"
-      :show-resolved-action="allSelectedConversationsStatus('resolved')"
-      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @select-all-conversations="selectAllConversations"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
-    />
-    <div
-      ref="conversationList"
-      class="flex-1 conversations-list"
-      :class="{ 'overflow-hidden': isContextMenuOpen }"
-    >
-      <virtual-list
-        ref="conversationVirtualList"
-        :data-key="'id'"
-        :data-sources="conversationList"
-        :data-component="itemComponent"
-        :extra-props="virtualListExtraProps"
-        class="w-full h-full overflow-auto"
-        footer-tag="div"
-      >
-        <template #footer>
-          <div v-if="chatListLoading" class="text-center">
-            <span class="mt-4 mb-4 spinner" />
-          </div>
-          <p
-            v-if="showEndOfListMessage"
-            class="p-4 text-center text-slate-400 dark:text-slate-300"
-          >
-            {{ $t('CHAT_LIST.EOF') }}
-          </p>
-          <intersection-observer
-            v-if="!showEndOfListMessage && !chatListLoading"
-            :options="infiniteLoaderOptions"
-            @observed="loadMoreConversations"
-          />
-        </template>
-      </virtual-list>
-    </div>
-    <woot-modal
-      :show.sync="showAdvancedFilters"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <conversation-advanced-filter
-        v-if="showAdvancedFilters"
-        :initial-filter-types="advancedFilterTypes"
-        :initial-applied-filters="appliedFilter"
-        :active-folder-name="activeFolderName"
-        :on-close="closeAdvanceFiltersModal"
-        :is-folder-view="hasActiveFolders"
-        @applyFilter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -247,20 +131,16 @@ export default {
   },
   computed: {
     ...mapGetters({
-      currentChat: 'getSelectedChat',
       currentUser: 'getCurrentUser',
       chatLists: 'getAllConversations',
       mineChatsList: 'getMineChats',
       allChatList: 'getAllStatusChats',
-      chatListFilters: 'getChatListFilters',
       unAssignedChatsList: 'getUnAssignedChats',
       chatListLoading: 'getChatListLoadingStatus',
-      currentUserID: 'getCurrentUserID',
       activeInbox: 'getSelectedInbox',
       conversationStats: 'conversationStats/getStats',
       appliedFilters: 'getAppliedConversationFilters',
       folders: 'customViews/getCustomViews',
-      inboxes: 'inboxes/getInboxes',
       agentList: 'agents/getAgents',
       teamsList: 'teams/getTeams',
       inboxesList: 'inboxes/getInboxes',
@@ -728,7 +608,7 @@ export default {
       }
     },
     emitConversationLoaded() {
-      this.$emit('conversation-load');
+      this.$emit('conversationLoad');
       this.$nextTick(() => {
         // Addressing a known issue in the virtual list library where dynamically added items
         // might not render correctly. This workaround involves a slight manual adjustment
@@ -980,6 +860,123 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    :class="[
+      { hidden: !showConversationList },
+      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+    ]"
+  >
+    <slot />
+    <ChatListHeader
+      :page-title="pageTitle"
+      :has-applied-filters="hasAppliedFilters"
+      :has-active-folders="hasActiveFolders"
+      :active-status="activeStatus"
+      @addFolders="onClickOpenAddFoldersModal"
+      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @filtersModal="onToggleAdvanceFiltersModal"
+      @resetFilters="resetAndFetchData"
+      @basicFilterChange="onBasicFilterChange"
+    />
+
+    <AddCustomViews
+      v-if="showAddFoldersModal"
+      :custom-views-query="foldersQuery"
+      :open-last-saved-item="openLastSavedItemInFolder"
+      @close="onCloseAddFoldersModal"
+    />
+
+    <DeleteCustomViews
+      v-if="showDeleteFoldersModal"
+      :show-delete-popup.sync="showDeleteFoldersModal"
+      :active-custom-view="activeFolder"
+      :custom-views-id="foldersId"
+      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
+      @close="onCloseDeleteFoldersModal"
+    />
+
+    <ChatTypeTabs
+      v-if="!hasAppliedFiltersOrActiveFolders"
+      :items="assigneeTabItems"
+      :active-tab="activeAssigneeTab"
+      class="tab--chat-type"
+      @chatTabChange="updateAssigneeTab"
+    />
+
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="flex items-center justify-center p-4 overflow-auto"
+    >
+      {{ $t('CHAT_LIST.LIST.404') }}
+    </p>
+    <ConversationBulkActions
+      v-if="selectedConversations.length"
+      :conversations="selectedConversations"
+      :all-conversations-selected="allConversationsSelected"
+      :selected-inboxes="uniqueInboxes"
+      :show-open-action="allSelectedConversationsStatus('open')"
+      :show-resolved-action="allSelectedConversationsStatus('resolved')"
+      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      @selectAllConversations="selectAllConversations"
+      @assignAgent="onAssignAgent"
+      @updateConversations="onUpdateConversations"
+      @assignLabels="onAssignLabels"
+      @assignTeam="onAssignTeamsForBulk"
+    />
+    <div
+      ref="conversationList"
+      class="flex-1 conversations-list"
+      :class="{ 'overflow-hidden': isContextMenuOpen }"
+    >
+      <VirtualList
+        ref="conversationVirtualList"
+        data-key="id"
+        :data-sources="conversationList"
+        :data-component="itemComponent"
+        :extra-props="virtualListExtraProps"
+        class="w-full h-full overflow-auto"
+        footer-tag="div"
+      >
+        <template #footer>
+          <div v-if="chatListLoading" class="text-center">
+            <span class="mt-4 mb-4 spinner" />
+          </div>
+          <p
+            v-if="showEndOfListMessage"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
+          >
+            {{ $t('CHAT_LIST.EOF') }}
+          </p>
+          <IntersectionObserver
+            v-if="!showEndOfListMessage && !chatListLoading"
+            :options="infiniteLoaderOptions"
+            @observed="loadMoreConversations"
+          />
+        </template>
+      </VirtualList>
+    </div>
+    <woot-modal
+      :show.sync="showAdvancedFilters"
+      :on-close="closeAdvanceFiltersModal"
+      size="medium"
+    >
+      <ConversationAdvancedFilter
+        v-if="showAdvancedFilters"
+        :initial-filter-types="advancedFilterTypes"
+        :initial-applied-filters="appliedFilter"
+        :active-folder-name="activeFolderName"
+        :on-close="closeAdvanceFiltersModal"
+        :is-folder-view="hasActiveFolders"
+        @applyFilter="onApplyFilter"
+        @updateFolder="onUpdateSavedFilter"
+      />
+    </woot-modal>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index d2df2bea3..cd7cf0ff1 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -21,16 +21,16 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits([
-  'add-folders',
-  'delete-folders',
-  'reset-filters',
-  'basic-filter-change',
-  'filters-modal',
+const emit = defineEmits([
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
 ]);
 
 const onBasicFilterChange = (value, type) => {
-  emits('basic-filter-change', value, type);
+  emit('basicFilterChange', value, type);
 };
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="save"
-          @click="emits('add-folders')"
+          @click="emit('addFolders')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="dismiss-circle"
-          @click="emits('reset-filters')"
+          @click="emit('resetFilters')"
         />
       </div>
       <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="edit"
-          @click="emits('filters-modal')"
+          @click="emit('filtersModal')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="delete"
-          @click="emits('delete-folders')"
+          @click="emit('deleteFolders')"
         />
       </div>
       <woot-button
@@ -104,9 +104,9 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         color-scheme="secondary"
         icon="filter"
         size="tiny"
-        @click="emits('filters-modal')"
+        @click="emit('filtersModal')"
       />
-      <conversation-basic-filter
+      <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @changeFilter="onBasicFilterChange"
       />
diff --git a/app/javascript/dashboard/components/Code.vue b/app/javascript/dashboard/components/Code.vue
index 8d1fa4398..d8656da75 100644
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="code--container">
-    <div class="code--action-area">
-      <form
-        v-if="enableCodePen"
-        class="code--codeopen-form"
-        action="https://codepen.io/pen/define"
-        method="POST"
-        target="_blank"
-      >
-        <input type="hidden" name="data" :value="codepenScriptValue" />
-
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
-      </form>
-      <button class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
-    </div>
-    <highlightjs v-if="script" :language="lang" :code="script" />
-  </div>
-</template>
-
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -66,6 +42,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="code--container">
+    <div class="code--action-area">
+      <form
+        v-if="enableCodePen"
+        class="code--codeopen-form"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+
+        <button type="submit" class="button secondary tiny">
+          {{ $t('COMPONENTS.CODE.CODEPEN') }}
+        </button>
+      </form>
+      <button class="button secondary tiny" @click="onCopy">
+        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+      </button>
+    </div>
+    <highlightjs v-if="script" :language="lang" :code="script" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .code--container {
   position: relative;
diff --git a/app/javascript/dashboard/components/ConversationItem.vue b/app/javascript/dashboard/components/ConversationItem.vue
index b013b0171..55721ac21 100644
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -1,26 +1,3 @@
-<template>
-  <conversation-card
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    :enable-context-menu="true"
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
-  />
-</template>
-
 <script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
 export default {
@@ -70,3 +47,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ConversationCard
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    enable-context-menu
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index 3bd08dac7..e42660ed7 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -1,139 +1,3 @@
-<template>
-  <div class="py-3 px-4">
-    <div class="flex items-center mb-1">
-      <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
-          <input
-            v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
-            type="checkbox"
-            @change="onUpdate"
-          />
-        </div>
-        <div class="flex items-center justify-between w-full">
-          <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
-            :class="
-              v$.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
-            "
-          >
-            {{ label }}
-            <helper-text-popup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
-          </span>
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end w-4"
-            @click="onDelete"
-          />
-        </div>
-      </h4>
-    </div>
-    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="mb-2 w-full flex items-center">
-          <input
-            ref="inputfield"
-            v-model="editedValue"
-            :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
-            autofocus="true"
-            :class="{ error: v$.editedValue.$error }"
-            @blur="v$.editedValue.$touch"
-            @keyup.enter="onUpdate"
-          />
-          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
-              @click="onUpdate"
-            />
-          </div>
-        </div>
-        <span
-          v-if="shouldShowErrorMessage"
-          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
-        >
-          {{ errorMessage }}
-        </span>
-      </div>
-      <div
-        v-show="!isEditing"
-        class="flex group"
-        :class="{ 'is-editable': showActions }"
-      >
-        <a
-          v-if="isAttributeTypeLink"
-          :href="hrefURL"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ urlValue }}
-        </a>
-        <p
-          v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ displayValue || '---' }}
-        </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onCopy"
-          />
-          <woot-button
-            v-if="showActions"
-            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onEdit"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="isAttributeTypeList">
-      <multiselect-dropdown
-        :options="listOptions"
-        :selected-item="selectedItem"
-        :has-thumbnail="false"
-        :multiselector-placeholder="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
-        "
-        :input-placeholder="
-          $t(
-            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
-          )
-        "
-        @click="onUpdateListValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { format, parseISO } from 'date-fns';
 import { required, url } from '@vuelidate/validators';
@@ -164,7 +28,6 @@ export default {
       default: null,
     },
     regexCue: { type: String, default: null },
-    regexEnabled: { type: Boolean, default: false },
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
@@ -330,6 +193,142 @@ export default {
 };
 </script>
 
+<template>
+  <div class="px-4 py-3">
+    <div class="flex items-center mb-1">
+      <h4 class="flex items-center w-full m-0 text-sm error">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
+          <input
+            v-model="editedValue"
+            class="!my-0 mr-2 ml-0"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <span
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              v$.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
+          >
+            {{ label }}
+            <HelperTextPopup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
+          </span>
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="delete"
+            class-names="flex justify-end w-4"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
+        <div class="flex items-center w-full mb-2">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            autofocus="true"
+            :class="{ error: v$.editedValue.$error }"
+            @blur="v$.editedValue.$touch"
+            @keyup.enter="onUpdate"
+          />
+          <div>
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="rounded-l-none rtl:rounded-r-none"
+              @click="onUpdate"
+            />
+          </div>
+        </div>
+        <span
+          v-if="shouldShowErrorMessage"
+          class="block w-full -mt-px text-sm font-normal text-red-400 dark:text-red-500"
+        >
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="flex group"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :href="hrefURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ urlValue }}
+        </a>
+        <p
+          v-else
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ displayValue || '---' }}
+        </p>
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="clipboard"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onCopy"
+          />
+          <woot-button
+            v-if="showActions"
+            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="edit"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="isAttributeTypeList">
+      <MultiselectDropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @click="onUpdateListValue"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .selector-wrap {
diff --git a/app/javascript/dashboard/components/CustomSnoozeModal.vue b/app/javascript/dashboard/components/CustomSnoozeModal.vue
index 65f943d41..4b5a41951 100644
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="modal-content" @submit.prevent="chooseTime">
-      <date-picker
-        v-model="snoozeTime"
-        type="datetime"
-        inline
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-        :popup-style="{ width: '100%' }"
-      />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 
@@ -47,7 +22,7 @@ export default {
       this.$emit('close');
     },
     chooseTime() {
-      this.$emit('choose-time', this.snoozeTime);
+      this.$emit('chooseTime', this.snoozeTime);
     },
     disabledDate(date) {
       // Disable all the previous dates
@@ -64,6 +39,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form class="modal-content" @submit.prevent="chooseTime">
+      <DatePicker
+        v-model="snoozeTime"
+        type="datetime"
+        inline
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-5 pb-6;
diff --git a/app/javascript/dashboard/components/FormSection.vue b/app/javascript/dashboard/components/FormSection.vue
index 8a22d5e8a..481006adb 100644
--- a/app/javascript/dashboard/components/FormSection.vue
+++ b/app/javascript/dashboard/components/FormSection.vue
@@ -1,3 +1,16 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div class="flex flex-col items-start w-full gap-6">
     <div class="flex flex-col w-full gap-4">
@@ -16,16 +29,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/components/IntersectionObserver.vue b/app/javascript/dashboard/components/IntersectionObserver.vue
index 215c054ff..2268e0ccd 100644
--- a/app/javascript/dashboard/components/IntersectionObserver.vue
+++ b/app/javascript/dashboard/components/IntersectionObserver.vue
@@ -1,7 +1,3 @@
-<template>
-  <div ref="observedElement" class="h-6 w-full" />
-</template>
-
 <script>
 export default {
   props: {
@@ -32,3 +28,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>
diff --git a/app/javascript/dashboard/components/MaskedText.vue b/app/javascript/dashboard/components/MaskedText.vue
index e9fa613cb..e981986c0 100644
--- a/app/javascript/dashboard/components/MaskedText.vue
+++ b/app/javascript/dashboard/components/MaskedText.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="text--container">
-    <woot-button size="small" class="button--text" @click="onCopy">
-      {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-    </woot-button>
-    <woot-button
-      variant="clear"
-      size="small"
-      class="button--visibility"
-      color-scheme="secondary"
-      :icon="masked ? 'eye-show' : 'eye-hide'"
-      @click.prevent="toggleMasked"
-    />
-    <highlightjs v-if="value" :code="masked ? '•'.repeat(10) : value" />
-  </div>
-</template>
-
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -45,6 +28,23 @@ export default {
 };
 </script>
 
+<template>
+  <div class="text--container">
+    <woot-button size="small" class="button--text" @click="onCopy">
+      {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+    </woot-button>
+    <woot-button
+      variant="clear"
+      size="small"
+      class="button--visibility"
+      color-scheme="secondary"
+      :icon="masked ? 'eye-show' : 'eye-hide'"
+      @click.prevent="toggleMasked"
+    />
+    <highlightjs v-if="value" :code="masked ? '•'.repeat(10) : value" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .text--container {
   position: relative;
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index bfe7dc30b..ae126aa11 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -1,36 +1,3 @@
-<template>
-  <transition name="modal-fade">
-    <div
-      v-if="show"
-      :class="modalClassName"
-      transition="modal"
-      @mousedown="handleMouseDown"
-    >
-      <div
-        :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
-          'rounded-xl w-[37.5rem]': !fullWidth,
-          'items-center rounded-none flex h-full justify-center w-full':
-            fullWidth,
-          [size]: true,
-        }"
-        @mouse.stop
-        @mousedown="event => event.stopPropagation()"
-      >
-        <woot-button
-          v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
-          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
-          @click="close"
-        />
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
 <script>
 export default {
   props: {
@@ -108,6 +75,39 @@ export default {
 };
 </script>
 
+<template>
+  <transition name="modal-fade">
+    <div
+      v-if="show"
+      :class="modalClassName"
+      transition="modal"
+      @mousedown="handleMouseDown"
+    >
+      <div
+        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        :class="{
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
+        <woot-button
+          v-if="showCloseButton"
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          @click="close"
+        />
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style lang="scss">
 .modal-mask {
   @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 332ca069f..63d361278 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,3 +1,28 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
@@ -23,26 +48,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-    headerContentValue: {
-      type: String,
-      default: '',
-    },
-    headerImage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index d59a9dc01..ee3509d64 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      default: true,
+    },
+    note: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
@@ -30,26 +53,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    showBorder: {
-      type: Boolean,
-      default: true,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index 6106b9ad0..74739a8b1 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,14 +1,3 @@
-<template>
-  <woot-button
-    :size="size"
-    variant="clear"
-    color-scheme="secondary"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
-    @click="onMenuItemClick"
-  />
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -26,3 +15,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-button
+    :size="size"
+    variant="clear"
+    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
+    icon="list"
+    @click="onMenuItemClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue
index 213284484..3a23a15ef 100644
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/app/javascript/dashboard/components/Snackbar.vue
@@ -1,24 +1,3 @@
-<template>
-  <div>
-    <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
-    >
-      <div class="text-white dark:text-white text-sm font-medium">
-        {{ message }}
-      </div>
-      <div v-if="action">
-        <router-link
-          v-if="action.type == 'link'"
-          :to="action.to"
-          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
-        >
-          {{ action.message }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,11 +6,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    showButton: Boolean,
-    duration: {
-      type: [String, Number],
-      default: 3000,
-    },
   },
   data() {
     return {
@@ -42,3 +16,24 @@ export default {
   methods: {},
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-sm font-medium text-white dark:text-white">
+        {{ message }}
+      </div>
+      <div v-if="action">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
+        >
+          {{ action.message }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 976797623..26bb040be 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,18 +1,3 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
-  >
-    <woot-snackbar
-      v-for="snackMessage in snackMessages"
-      :key="snackMessage.key"
-      :message="snackMessage.message"
-      :action="snackMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import WootSnackbar from './Snackbar.vue';
 
@@ -53,3 +38,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
+  >
+    <WootSnackbar
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage.key"
+      :message="snackMessage.message"
+      :action="snackMessage.action"
+    />
+  </transition-group>
+</template>
diff --git a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
index 036326970..bd41bde6a 100644
--- a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -1,14 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -86,3 +75,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
index 97b5105a4..3c8736438 100644
--- a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
+++ b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
@@ -1,15 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    action-button-icon="mail"
-    has-action-button
-    @click="resendVerificationEmail"
-  />
-</template>
-
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
@@ -41,3 +29,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    action-button-icon="mail"
+    has-action-button
+    @click="resendVerificationEmail"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/app/UpdateBanner.vue b/app/javascript/dashboard/components/app/UpdateBanner.vue
index 57f54ff5b..382b3c3f8 100644
--- a/app/javascript/dashboard/components/app/UpdateBanner.vue
+++ b/app/javascript/dashboard/components/app/UpdateBanner.vue
@@ -1,14 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="primary"
-    :banner-message="bannerMessage"
-    href-link="https://github.com/chatwoot/chatwoot/releases"
-    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
-    has-close-button
-    @close="dismissUpdateBanner"
-  />
-</template>
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -77,3 +66,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="primary"
+    :banner-message="bannerMessage"
+    href-link="https://github.com/chatwoot/chatwoot/releases"
+    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
+    has-close-button
+    @close="dismissUpdateBanner"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/app/UpgradeBanner.vue b/app/javascript/dashboard/components/app/UpgradeBanner.vue
index b387956ad..4cd1b8f4f 100644
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -1,14 +1,3 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
-
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
@@ -86,3 +75,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/base/Hotkey.vue b/app/javascript/dashboard/components/base/Hotkey.vue
index ca45559f3..a02839111 100644
--- a/app/javascript/dashboard/components/base/Hotkey.vue
+++ b/app/javascript/dashboard/components/base/Hotkey.vue
@@ -1,8 +1,3 @@
-<template>
-  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
-    <slot />
-  </kbd>
-</template>
 <script>
 export default {
   props: {
@@ -14,6 +9,12 @@ export default {
 };
 </script>
 
+<template>
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+    <slot />
+  </kbd>
+</template>
+
 <style lang="scss">
 kbd.hotkey {
   @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
index 733b84639..32c2e923a 100644
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -1,18 +1,10 @@
-<template>
-  <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <fluent-icon
-      v-if="!isLoading && icon"
-      class="icon"
-      :class="buttonIconClass"
-      :icon="icon"
-    />
-    <spinner v-if="isLoading" />
-    <slot />
-  </button>
-</template>
-
 <script>
+import Spinner from 'shared/components/Spinner.vue';
+
 export default {
+  components: {
+    Spinner,
+  },
   props: {
     isLoading: {
       type: Boolean,
@@ -42,3 +34,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <fluent-icon
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass"
+      :icon="icon"
+    />
+    <Spinner v-if="isLoading" />
+    <slot />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index 7dcc15488..b29b6b538 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <span>{{ buttonText }}</span>
-    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,6 +47,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <span>{{ buttonText }}</span>
+    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+  </button>
+</template>
+
 <style lang="scss" scoped>
 button:disabled {
   @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 7acf26da3..fb30a4d6c 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -1,81 +1,3 @@
-<template>
-  <div class="relative flex items-center justify-end resolve-actions">
-    <div class="button-group">
-      <woot-button
-        v-if="isOpen"
-        class-names="resolve"
-        color-scheme="success"
-        icon="checkmark"
-        emoji="✅"
-        :is-loading="isLoading"
-        @click="onCmdResolveConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
-      </woot-button>
-      <woot-button
-        v-else-if="isResolved"
-        class-names="resolve"
-        color-scheme="warning"
-        icon="arrow-redo"
-        emoji="👀"
-        :is-loading="isLoading"
-        @click="onCmdOpenConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
-      </woot-button>
-      <woot-button
-        v-else-if="showOpenButton"
-        class-names="resolve"
-        color-scheme="primary"
-        icon="person"
-        :is-loading="isLoading"
-        @click="onCmdOpenConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
-      </woot-button>
-      <woot-button
-        v-if="showAdditionalActions"
-        ref="arrowDownButton"
-        :color-scheme="buttonClass"
-        :disabled="isLoading"
-        icon="chevron-down"
-        emoji="🔽"
-        @click="openDropdown"
-      />
-    </div>
-    <div
-      v-if="showActionsDropdown"
-      v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open"
-    >
-      <woot-dropdown-menu class="mb-0">
-        <woot-dropdown-item v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="snooze"
-            @click="() => openSnoozeModal()"
-          >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="book-clock"
-            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
-          >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
-          </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -95,7 +17,6 @@ export default {
     WootDropdownMenu,
   },
   mixins: [keyboardEventListenerMixins],
-  props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
       isLoading: false,
@@ -220,6 +141,85 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center justify-end resolve-actions">
+    <div class="button-group">
+      <woot-button
+        v-if="isOpen"
+        class-names="resolve"
+        color-scheme="success"
+        icon="checkmark"
+        emoji="✅"
+        :is-loading="isLoading"
+        @click="onCmdResolveConversation"
+      >
+        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-else-if="isResolved"
+        class-names="resolve"
+        color-scheme="warning"
+        icon="arrow-redo"
+        emoji="👀"
+        :is-loading="isLoading"
+        @click="onCmdOpenConversation"
+      >
+        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-else-if="showOpenButton"
+        class-names="resolve"
+        color-scheme="primary"
+        icon="person"
+        :is-loading="isLoading"
+        @click="onCmdOpenConversation"
+      >
+        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
+      </woot-button>
+      <woot-button
+        v-if="showAdditionalActions"
+        ref="arrowDownButton"
+        :color-scheme="buttonClass"
+        :disabled="isLoading"
+        icon="chevron-down"
+        emoji="🔽"
+        @click="openDropdown"
+      />
+    </div>
+    <div
+      v-if="showActionsDropdown"
+      v-on-clickaway="closeDropdown"
+      class="dropdown-pane dropdown-pane--open"
+    >
+      <WootDropdownMenu class="mb-0">
+        <WootDropdownItem v-if="!isPending">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="snooze"
+            @click="() => openSnoozeModal()"
+          >
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="!isPending">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="book-clock"
+            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
+          >
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+          </woot-button>
+        </WootDropdownItem>
+      </WootDropdownMenu>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index 3f7e86359..c4bb78ebe 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -1,50 +1,3 @@
-<template>
-  <woot-dropdown-menu>
-    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <woot-dropdown-item
-      v-for="status in availabilityStatuses"
-      :key="status.value"
-      class="flex items-baseline"
-    >
-      <woot-button
-        size="small"
-        :color-scheme="status.disabled ? '' : 'secondary'"
-        :variant="status.disabled ? 'smooth' : 'clear'"
-        class-names="status-change--dropdown-button"
-        @click="changeAvailabilityStatus(status.value)"
-      >
-        <availability-status-badge :status="status.value" />
-        {{ status.label }}
-      </woot-button>
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-    <woot-dropdown-item class="flex items-center justify-between p-2 m-0">
-      <div class="flex items-center">
-        <fluent-icon
-          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
-          icon="info"
-          size="14"
-          class="mt-px"
-        />
-
-        <span
-          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
-        >
-          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
-        </span>
-      </div>
-
-      <woot-switch
-        size="small"
-        class="mx-1 mt-px mb-0"
-        :value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-  </woot-dropdown-menu>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -136,3 +89,50 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootDropdownMenu>
+    <WootDropdownHeader :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <WootDropdownItem
+      v-for="status in availabilityStatuses"
+      :key="status.value"
+      class="flex items-baseline"
+    >
+      <woot-button
+        size="small"
+        :color-scheme="status.disabled ? '' : 'secondary'"
+        :variant="status.disabled ? 'smooth' : 'clear'"
+        class-names="status-change--dropdown-button"
+        @click="changeAvailabilityStatus(status.value)"
+      >
+        <AvailabilityStatusBadge :status="status.value" />
+        {{ status.label }}
+      </woot-button>
+    </WootDropdownItem>
+    <WootDropdownDivider />
+    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
+      <div class="flex items-center">
+        <fluent-icon
+          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
+          icon="info"
+          size="14"
+          class="mt-px"
+        />
+
+        <span
+          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
+        >
+          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+        </span>
+      </div>
+
+      <woot-switch
+        size="small"
+        class="mx-1 mt-px mb-0"
+        :value="currentUserAutoOffline"
+        @input="updateAutoOffline"
+      />
+    </WootDropdownItem>
+    <WootDropdownDivider />
+  </WootDropdownMenu>
+</template>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 3944af07a..9ca958bc4 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,33 +1,3 @@
-<template>
-  <aside class="flex h-full">
-    <primary-sidebar
-      :logo-source="globalConfig.logoThumbnail"
-      :installation-name="globalConfig.installationName"
-      :is-a-custom-branded-instance="isACustomBrandedInstance"
-      :account-id="accountId"
-      :menu-items="primaryMenuItems"
-      :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
-    />
-    <secondary-sidebar
-      v-if="showSecondarySidebar"
-      :class="sidebarClassName"
-      :account-id="accountId"
-      :inboxes="inboxes"
-      :labels="labels"
-      :teams="teams"
-      :custom-views="customViews"
-      :menu-config="activeSecondaryMenu"
-      :current-user="currentUser"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
-    />
-  </aside>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
@@ -63,7 +33,6 @@ export default {
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
-      currentRole: 'getCurrentRole',
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',
@@ -163,10 +132,10 @@ export default {
       }
     },
     toggleKeyShortcutModal() {
-      this.$emit('open-key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
     },
     closeKeyShortcutModal() {
-      this.$emit('close-key-shortcut-modal');
+      this.$emit('closeKeyShortcutModal');
     },
     getKeyboardEvents() {
       return {
@@ -198,14 +167,44 @@ export default {
       window.$chatwoot.toggle();
     },
     toggleAccountModal() {
-      this.$emit('toggle-account-modal');
+      this.$emit('toggleAccountModal');
     },
     showAddLabelPopup() {
-      this.$emit('show-add-label-popup');
+      this.$emit('showAddLabelPopup');
     },
     openNotificationPanel() {
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
+
+<template>
+  <aside class="flex h-full">
+    <PrimarySidebar
+      :logo-source="globalConfig.logoThumbnail"
+      :installation-name="globalConfig.installationName"
+      :is-a-custom-branded-instance="isACustomBrandedInstance"
+      :account-id="accountId"
+      :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
+      @toggleAccounts="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @openNotificationPanel="openNotificationPanel"
+    />
+    <SecondarySidebar
+      v-if="showSecondarySidebar"
+      :class="sidebarClassName"
+      :account-id="accountId"
+      :inboxes="inboxes"
+      :labels="labels"
+      :teams="teams"
+      :custom-views="customViews"
+      :menu-config="activeSecondaryMenu"
+      :current-user="currentUser"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      @addLabel="showAddLabelPopup"
+      @toggleAccounts="toggleAccountModal"
+    />
+  </aside>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index ec0d986c2..4a000a447 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,35 +1,3 @@
-<template>
-  <div
-    v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
-    @mouseover="setShowSwitch"
-    @mouseleave="resetShowSwitch"
-  >
-    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p
-      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
-    >
-      {{ account.name }}
-    </p>
-    <transition name="fade">
-      <div
-        v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
-      >
-        <div class="my-0 mx-2">
-          <woot-button
-            variant="clear"
-            size="tiny"
-            icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
-          >
-            {{ $t('SIDEBAR.SWITCH') }}
-          </woot-button>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -56,6 +24,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="showShowCurrentAccountContext"
+    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
+    @mouseover="setShowSwitch"
+    @mouseleave="resetShowSwitch"
+  >
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p
+      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
+    >
+      {{ account.name }}
+    </p>
+    <transition name="fade">
+      <div
+        v-if="showSwitchButton"
+        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
+      >
+        <div class="mx-2 my-0">
+          <woot-button
+            variant="clear"
+            size="tiny"
+            icon="arrow-swap"
+            @click="$emit('toggleAccounts')"
+          >
+            {{ $t('SIDEBAR.SWITCH') }}
+          </woot-button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 3e8f1e6ab..73f727a0e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -1,62 +1,3 @@
-<template>
-  <woot-modal
-    :show="showAccountModal"
-    :on-close="() => $emit('close-account-modal')"
-  >
-    <woot-modal-header
-      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
-      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
-    />
-    <div class="px-8 py-4">
-      <div
-        v-for="account in currentUser.accounts"
-        :id="`account-${account.id}`"
-        :key="account.id"
-        class="pt-0 pb-0"
-      >
-        <button
-          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
-          @click="onChangeAccount(account.id)"
-        >
-          <span class="w-full">
-            <label :for="account.name" class="text-left rtl:text-right">
-              <div
-                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
-              >
-                {{ account.name }}
-              </div>
-              <div
-                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
-              >
-                {{ account.role }}
-              </div>
-            </label>
-          </span>
-          <fluent-icon
-            v-show="account.id === accountId"
-            class="text-slate-800 dark:text-slate-100"
-            icon="checkmark-circle"
-            type="solid"
-            size="24"
-          />
-        </button>
-      </div>
-    </div>
-
-    <div
-      v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
-    >
-      <button
-        class="button success large expanded nice w-full"
-        @click="$emit('show-create-account-modal')"
-      >
-        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-      </button>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -82,3 +23,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal
+    :show="showAccountModal"
+    :on-close="() => $emit('closeAccountModal')"
+  >
+    <woot-modal-header
+      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
+      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
+    />
+    <div class="px-8 py-4">
+      <div
+        v-for="account in currentUser.accounts"
+        :id="`account-${account.id}`"
+        :key="account.id"
+        class="pt-0 pb-0"
+      >
+        <button
+          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
+          @click="onChangeAccount(account.id)"
+        >
+          <span class="w-full">
+            <label :for="account.name" class="text-left rtl:text-right">
+              <div
+                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
+              >
+                {{ account.name }}
+              </div>
+              <div
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
+              >
+                {{ account.role }}
+              </div>
+            </label>
+          </span>
+          <fluent-icon
+            v-show="account.id === accountId"
+            class="text-slate-800 dark:text-slate-100"
+            icon="checkmark-circle"
+            type="solid"
+            size="24"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="globalConfig.createNewAccountFromDashboard"
+      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
+    >
+      <button
+        class="w-full button success large expanded nice"
+        @click="$emit('showCreateAccountModal')"
+      >
+        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+      </button>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index c544842a5..c36a108ab 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -1,53 +1,3 @@
-<template>
-  <woot-modal
-    :show="show"
-    :on-close="() => $emit('close-account-create-modal')"
-  >
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
-        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
-      />
-      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
-        <div class="items-center rounded-md flex alert">
-          <div class="ml-1 mr-3">
-            <fluent-icon icon="warning" />
-          </div>
-          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
-        </div>
-      </div>
-
-      <form class="flex flex-col w-full" @submit.prevent="addAccount">
-        <div class="w-full">
-          <label :class="{ error: v$.accountName.$error }">
-            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="accountName"
-              type="text"
-              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="v$.accountName.$touch"
-            />
-          </label>
-        </div>
-        <div class="w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                v$.accountName.$invalid ||
-                v$.accountName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-              button-class="large expanded"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -90,7 +40,7 @@ export default {
         const account_id = await this.$store.dispatch('accounts/create', {
           account_name: this.accountName,
         });
-        this.$emit('close-account-create-modal');
+        this.$emit('closeAccountCreateModal');
         useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
         window.location = `/app/accounts/${account_id}/dashboard`;
       } catch (error) {
@@ -104,3 +54,50 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+      />
+      <div v-if="!hasAccounts" class="mx-8 mt-6 mb-0 text-sm">
+        <div class="flex items-center rounded-md alert">
+          <div class="ml-1 mr-3">
+            <fluent-icon icon="warning" />
+          </div>
+          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
+        </div>
+      </div>
+
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
+          <label :class="{ error: v$.accountName.$error }">
+            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="accountName"
+              type="text"
+              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+              @input="v$.accountName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                v$.accountName.$invalid ||
+                v$.accountName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+              button-class="large expanded"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
index 7683a40b2..ff526533f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -1,19 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    variant="link"
-    class="items-center flex rounded-full"
-    @click="handleClick"
-  >
-    <thumbnail
-      :src="currentUser.avatar_url"
-      :username="currentUser.name"
-      :status="statusOfAgent"
-      should-show-status-always
-      size="32px"
-    />
-  </woot-button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../../widgets/Thumbnail.vue';
@@ -33,8 +17,25 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('toggle-menu');
+      this.$emit('toggleMenu');
     },
   },
 };
 </script>
+
+<template>
+  <woot-button
+    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
+    variant="link"
+    class="flex items-center rounded-full"
+    @click="handleClick"
+  >
+    <Thumbnail
+      :src="currentUser.avatar_url"
+      :username="currentUser.name"
+      :status="statusOfAgent"
+      should-show-status-always
+      size="32px"
+    />
+  </woot-button>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
index f470bc5b6..38615fff0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="w-8 h-8">
-    <router-link :to="dashboardPath" replace>
-      <img :src="source" :alt="name" />
-    </router-link>
-  </div>
-</template>
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
@@ -30,3 +23,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-8 h-8">
+    <router-link :to="dashboardPath" replace>
+      <img :src="source" :alt="name" />
+    </router-link>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index f3a394f4b..48e5aef7f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,7 +1,38 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    unreadCount() {
+      if (!this.notificationMetadata.unreadCount) {
+        return '';
+      }
+
+      return this.notificationMetadata.unreadCount < 100
+        ? `${this.notificationMetadata.unreadCount}`
+        : '99+';
+    },
+    isNotificationPanelActive() {
+      return this.$route.name === 'notifications_index';
+    },
+  },
+  methods: {
+    openNotificationPanel() {
+      if (this.$route.name !== 'notifications_index') {
+        this.$emit('openNotificationPanel');
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isNotificationPanelActive,
@@ -23,34 +54,3 @@
     </button>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    unreadCount() {
-      if (!this.notificationMetadata.unreadCount) {
-        return '';
-      }
-
-      return this.notificationMetadata.unreadCount < 100
-        ? `${this.notificationMetadata.unreadCount}`
-        : '99+';
-    },
-    isNotificationPanelActive() {
-      return this.$route.name === 'notifications_index';
-    },
-  },
-  methods: {
-    openNotificationPanel() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$emit('open-notification-panel');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 01dce6bf1..707639b57 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -1,110 +1,3 @@
-<template>
-  <transition name="menu-slide">
-    <div
-      v-if="show"
-      v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
-      :class="{ 'block visible': show }"
-    >
-      <availability-status />
-      <woot-dropdown-menu>
-        <woot-dropdown-item v-if="showChangeAccountOption">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="chat-help"
-            @click="$emit('show-support-chat-window')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="keyboard"
-            @click="handleKeyboardHelpClick"
-          >
-            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <router-link
-            v-slot="{ href, isActive, navigate }"
-            :to="`/app/accounts/${accountId}/profile/settings`"
-            custom
-          >
-            <a
-              :href="href"
-              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
-              :class="{ 'is-active': isActive }"
-              @click="e => handleProfileSettingClick(e, navigate)"
-            >
-              <fluent-icon icon="person" size="14" class="icon icon--font" />
-              <span class="button__content">
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-              </span>
-            </a>
-          </router-link>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="appearance"
-            @click="openAppearanceOptions"
-          >
-            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
-          <a
-            href="/super_admin"
-            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-            @click="$emit('close')"
-          >
-            <fluent-icon
-              icon="content-settings"
-              size="14"
-              class="icon icon--font"
-            />
-            <span class="button__content">
-              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-            </span>
-          </a>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="power"
-            @click="logout"
-          >
-            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-          </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
-    </div>
-  </transition>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
@@ -145,7 +38,7 @@ export default {
       navigate(e);
     },
     handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
       this.$emit('close');
     },
     logout() {
@@ -161,3 +54,110 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition name="menu-slide">
+    <div
+      v-if="show"
+      v-on-clickaway="onClickAway"
+      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
+      :class="{ 'block visible': show }"
+    >
+      <AvailabilityStatus />
+      <WootDropdownMenu>
+        <WootDropdownItem v-if="showChangeAccountOption">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="arrow-swap"
+            @click="$emit('toggleAccounts')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="chat-help"
+            @click="$emit('showSupportChatWindow')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="keyboard"
+            @click="handleKeyboardHelpClick"
+          >
+            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <router-link
+            v-slot="{ href, isActive, navigate }"
+            :to="`/app/accounts/${accountId}/profile/settings`"
+            custom
+          >
+            <a
+              :href="href"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
+              :class="{ 'is-active': isActive }"
+              @click="e => handleProfileSettingClick(e, navigate)"
+            >
+              <fluent-icon icon="person" size="14" class="icon icon--font" />
+              <span class="button__content">
+                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+              </span>
+            </a>
+          </router-link>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
+            @click="openAppearanceOptions"
+          >
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
+          <a
+            href="/super_admin"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            @click="$emit('close')"
+          >
+            <fluent-icon
+              icon="content-settings"
+              size="14"
+              class="icon icon--font"
+            />
+            <span class="button__content">
+              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            </span>
+          </a>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="power"
+            @click="logout"
+          >
+            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+          </woot-button>
+        </WootDropdownItem>
+      </WootDropdownMenu>
+    </div>
+  </transition>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index c42d23448..12edff7c0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -1,43 +1,3 @@
-<template>
-  <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
-  >
-    <div class="flex flex-col items-center">
-      <logo
-        :source="logoSource"
-        :name="installationName"
-        :account-id="accountId"
-        class="m-4 mb-10"
-      />
-      <primary-nav-item
-        v-for="menuItem in menuItems"
-        :key="menuItem.toState"
-        :icon="menuItem.icon"
-        :name="menuItem.label"
-        :to="menuItem.toState"
-        :is-child-menu-active="menuItem.key === activeMenuItem"
-      />
-    </div>
-    <div class="flex flex-col items-center justify-end pb-6">
-      <primary-nav-item
-        v-if="!isACustomBrandedInstance"
-        icon="book-open-globe"
-        name="DOCS"
-        :open-in-new-page="true"
-        :to="helpDocsURL"
-      />
-      <notification-bell @open-notification-panel="openNotificationPanel" />
-      <agent-details @toggle-menu="toggleOptions" />
-      <options-menu
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="$emit('key-shortcut-modal')"
-        @close="toggleOptions"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import Logo from './Logo.vue';
 import PrimaryNavItem from './PrimaryNavItem.vue';
@@ -94,15 +54,56 @@ export default {
       this.showOptionsMenu = !this.showOptionsMenu;
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
     openNotificationPanel() {
       this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
+  >
+    <div class="flex flex-col items-center">
+      <Logo
+        :source="logoSource"
+        :name="installationName"
+        :account-id="accountId"
+        class="m-4 mb-10"
+      />
+      <PrimaryNavItem
+        v-for="menuItem in menuItems"
+        :key="menuItem.toState"
+        :icon="menuItem.icon"
+        :name="menuItem.label"
+        :to="menuItem.toState"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
+      />
+    </div>
+    <div class="flex flex-col items-center justify-end pb-6">
+      <PrimaryNavItem
+        v-if="!isACustomBrandedInstance"
+        icon="book-open-globe"
+        name="DOCS"
+        open-in-new-page
+        :to="helpDocsURL"
+      />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
+      <OptionsMenu
+        :show="showOptionsMenu"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @close="toggleOptions"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index f23d62347..8951f946c 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -1,33 +1,3 @@
-<template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
-    <a
-      v-tooltip.right="$t(`SIDEBAR.${name}`)"
-      :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isActive || isChildMenuActive,
-      }"
-      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
-      :target="openInNewPage ? '_blank' : undefined"
-      @click="navigate"
-    >
-      <fluent-icon
-        :icon="icon"
-        :class="{
-          'text-woot-500': isActive || isChildMenuActive,
-        }"
-      />
-      <span class="sr-only">{{ name }}</span>
-      <span
-        v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
-      >
-        {{ count }}
-      </span>
-    </a>
-  </router-link>
-</template>
 <script>
 export default {
   props: {
@@ -58,3 +28,34 @@ export default {
   },
 };
 </script>
+
+<template>
+  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+    <a
+      v-tooltip.right="$t(`SIDEBAR.${name}`)"
+      :href="href"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isActive || isChildMenuActive,
+      }"
+      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
+      :target="openInNewPage ? '_blank' : undefined"
+      @click="navigate"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isActive || isChildMenuActive,
+        }"
+      />
+      <span class="sr-only">{{ name }}</span>
+      <span
+        v-if="count"
+        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+      >
+        {{ count }}
+      </span>
+    </a>
+  </router-link>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index b4cd3ca90..6de03af53 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
-  >
-    <account-context @toggle-accounts="toggleAccountModal" />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="pt-2 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
-      />
-    </transition-group>
-  </div>
-</template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
@@ -248,10 +223,10 @@ export default {
   },
   methods: {
     showAddLabelPopup() {
-      this.$emit('add-label');
+      this.$emit('addLabel');
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     showNewLink(featureFlag) {
       return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
@@ -259,3 +234,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="hasSecondaryMenu"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
+  >
+    <AccountContext @toggleAccounts="toggleAccountModal" />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 mb-0 ml-0 list-none"
+    >
+      <SecondaryNavItem
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <SecondaryNavItem
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @addLabel="showAddLabelPopup"
+      />
+    </transition-group>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 24ad62353..f8f75ffe7 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -1,3 +1,55 @@
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelColor: {
+      type: String,
+      default: '',
+    },
+    shouldTruncate: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
+    showChildCount: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    showIcon() {
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
+    },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
+    menuTitle() {
+      return this.shouldTruncate ? this.label : '';
+    },
+  },
+};
+</script>
+
 <template>
   <router-link
     v-slot="{ href, isActive, navigate }"
@@ -78,54 +130,3 @@
     </li>
   </router-link>
 </template>
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelColor: {
-      type: String,
-      default: '',
-    },
-    shouldTruncate: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    warningIcon: {
-      type: String,
-      default: '',
-    },
-    showChildCount: {
-      type: Boolean,
-      default: false,
-    },
-    childItemCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    showIcon() {
-      return {
-        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
-      };
-    },
-    isCountZero() {
-      return this.childItemCount === 0;
-    },
-    menuTitle() {
-      return this.shouldTruncate ? this.label : '';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 57408e1f4..2132ffc9e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,97 +1,3 @@
-<template>
-  <li v-show="isMenuItemVisible" class="mt-1">
-    <div v-if="hasSubMenu" class="flex justify-between">
-      <span
-        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
-      >
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </span>
-      <div v-if="menuItem.showNewButton" class="flex items-center">
-        <woot-button
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="p-0 ml-2"
-          @click="onClickOpen"
-        />
-      </div>
-    </div>
-    <router-link
-      v-else
-      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
-      :class="computedClass"
-      :to="menuItem && menuItem.toState"
-    >
-      <fluent-icon
-        :icon="menuItem.icon"
-        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
-        size="14"
-      />
-      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
-        :class="{
-          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
-          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
-            isActiveView,
-          'bg-slate-50 dark:bg-slate-700': !isActiveView,
-        }"
-      >
-        {{ `${menuItem.count}` }}
-      </span>
-      <span
-        v-if="menuItem.beta"
-        data-view-component="true"
-        label="Beta"
-        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
-      >
-        {{ $t('SIDEBAR.BETA') }}
-      </span>
-    </router-link>
-
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
-      <secondary-child-nav-item
-        v-for="child in menuItem.children"
-        :key="child.id"
-        :to="child.toState"
-        :label="child.label"
-        :label-color="child.color"
-        :should-truncate="child.truncateLabel"
-        :icon="computedInboxClass(child)"
-        :warning-icon="computedInboxErrorClass(child)"
-        :show-child-count="showChildCount(child.count)"
-        :child-item-count="child.count"
-      />
-      <Policy :permissions="['administrator']">
-        <router-link
-          v-if="menuItem.newLink"
-          v-slot="{ href, navigate }"
-          :to="menuItem.toState"
-          custom
-        >
-          <li class="pl-1">
-            <a :href="href">
-              <woot-button
-                size="tiny"
-                variant="clear"
-                color-scheme="secondary"
-                icon="add"
-                :data-testid="menuItem.dataTestid"
-                @click="e => newLinkClick(e, navigate)"
-              >
-                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-              </woot-button>
-            </a>
-          </li>
-        </router-link>
-      </Policy>
-    </ul>
-  </li>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -263,7 +169,7 @@ export default {
       } else if (this.menuItem.showModalForNewItem) {
         if (this.menuItem.modalName === 'AddLabel') {
           e.preventDefault();
-          this.$emit('add-label');
+          this.$emit('addLabel');
         }
       }
     },
@@ -279,3 +185,97 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li v-show="isMenuItemVisible" class="mt-1">
+    <div v-if="hasSubMenu" class="flex justify-between">
+      <span
+        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
+      >
+        {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      </span>
+      <div v-if="menuItem.showNewButton" class="flex items-center">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          icon="add"
+          class="p-0 ml-2"
+          @click="onClickOpen"
+        />
+      </div>
+    </div>
+    <router-link
+      v-else
+      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      :class="computedClass"
+      :to="menuItem && menuItem.toState"
+    >
+      <fluent-icon
+        :icon="menuItem.icon"
+        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
+        size="14"
+      />
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      <span
+        v-if="showChildCount(menuItem.count)"
+        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        :class="{
+          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
+          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+            isActiveView,
+          'bg-slate-50 dark:bg-slate-700': !isActiveView,
+        }"
+      >
+        {{ `${menuItem.count}` }}
+      </span>
+      <span
+        v-if="menuItem.beta"
+        data-view-component="true"
+        label="Beta"
+        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+      >
+        {{ $t('SIDEBAR.BETA') }}
+      </span>
+    </router-link>
+
+    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+      <SecondaryChildNavItem
+        v-for="child in menuItem.children"
+        :key="child.id"
+        :to="child.toState"
+        :label="child.label"
+        :label-color="child.color"
+        :should-truncate="child.truncateLabel"
+        :icon="computedInboxClass(child)"
+        :warning-icon="computedInboxErrorClass(child)"
+        :show-child-count="showChildCount(child.count)"
+        :child-item-count="child.count"
+      />
+      <Policy :permissions="['administrator']">
+        <router-link
+          v-if="menuItem.newLink"
+          v-slot="{ href, navigate }"
+          :to="menuItem.toState"
+          custom
+        >
+          <li class="pl-1">
+            <a :href="href">
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
+                :data-testid="menuItem.dataTestid"
+                @click="e => newLinkClick(e, navigate)"
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
+            </a>
+          </li>
+        </router-link>
+      </Policy>
+    </ul>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
index b2ed04c5d..5d49bc786 100644
--- a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
+++ b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="announcement-popup">
-    <span v-if="popupMessage" class="popup-content">
-      {{ popupMessage }}
-      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
-        {{ routeText }}
-      </span>
-    </span>
-    <div v-if="hasCloseButton" class="popup-close">
-      <woot-button
-        v-if="hasCloseButton"
-        color-scheme="primary"
-        variant="link"
-        size="small"
-        @click="onClickClose"
-      >
-        {{ closeButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -50,6 +29,28 @@ export default {
 };
 </script>
 
+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 .announcement-popup {
   max-width: 15rem;
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 3473111ae..a4372149d 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -1,45 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
-    :class="bannerClasses"
-  >
-    <span class="banner-message">
-      {{ bannerMessage }}
-      <a
-        v-if="hrefLink"
-        :href="hrefLink"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        {{ hrefLinkText }}
-      </a>
-    </span>
-    <div class="actions">
-      <woot-button
-        v-if="hasActionButton"
-        size="tiny"
-        :icon="actionButtonIcon"
-        :variant="actionButtonVariant"
-        color-scheme="primary"
-        class-names="banner-action__button"
-        @click="onClick"
-      >
-        {{ actionButtonLabel }}
-      </woot-button>
-      <woot-button
-        v-if="hasCloseButton"
-        size="tiny"
-        :color-scheme="colorScheme"
-        icon="dismiss-circle"
-        class-names="banner-action__button"
-        @click="onClickClose"
-      >
-        {{ $t('GENERAL_SETTINGS.DISMISS') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -101,6 +59,48 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
+    :class="bannerClasses"
+  >
+    <span class="banner-message">
+      {{ bannerMessage }}
+      <a
+        v-if="hrefLink"
+        :href="hrefLink"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        {{ hrefLinkText }}
+      </a>
+    </span>
+    <div class="actions">
+      <woot-button
+        v-if="hasActionButton"
+        size="tiny"
+        :icon="actionButtonIcon"
+        :variant="actionButtonVariant"
+        color-scheme="primary"
+        class-names="banner-action__button"
+        @click="onClick"
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
+        v-if="hasCloseButton"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
+        @click="onClickClose"
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .banner {
   &.primary {
diff --git a/app/javascript/dashboard/components/ui/ContextMenu.vue b/app/javascript/dashboard/components/ui/ContextMenu.vue
index 72722c0c4..acf9ab23b 100644
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -40,3 +30,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="fixed outline-none z-[9999] cursor-pointer"
+    :style="style"
+    tabindex="0"
+    @blur="$emit('close')"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
index 9b84d6548..20d78db3b 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -31,6 +31,7 @@ import CalendarMonth from './components/CalendarMonth.vue';
 import CalendarWeek from './components/CalendarWeek.vue';
 import CalendarFooter from './components/CalendarFooter.vue';
 
+const emit = defineEmits(['dateRangeChanged']);
 const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
 const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
 const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
@@ -54,8 +55,6 @@ const hoveredEndDate = ref(null);
 const manualStartDate = ref(selectedStartDate.value);
 const manualEndDate = ref(selectedEndDate.value);
 
-const emit = defineEmits(['change']);
-
 // Watcher will set the start and end dates based on the selected range
 watch(selectedRange, newRange => {
   if (newRange !== CUSTOM_RANGE) {
@@ -223,7 +222,7 @@ const emitDateRange = () => {
     >
       <CalendarDateRange
         :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="setDateRange"
       />
       <div
         class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -265,15 +264,15 @@ const emitDateRange = () => {
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                 />
                 <CalendarMonth
                   v-else-if="calendarViews[calendar] === MONTH"
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev', YEAR)"
                   @next="moveCalendar(calendar, 'next', YEAR)"
                 />
@@ -287,9 +286,9 @@ const emitDateRange = () => {
                   :selected-end-date="selectedEndDate"
                   :selecting-end-date="selectingEndDate"
                   :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
index 447a83bf3..3efce5541 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
@@ -19,7 +19,7 @@ defineProps({
     default: '',
   },
 });
-const emit = defineEmits(['prev', 'next', 'set-view']);
+const emit = defineEmits(['prev', 'next', 'setView']);
 
 const { YEAR } = CALENDAR_PERIODS;
 
@@ -32,7 +32,7 @@ const onClickNext = type => {
 };
 
 const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
index 38d4dd76f..b23f95d79 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -8,10 +8,10 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['set-range']);
+const emit = defineEmits(['setRange']);
 
 const setDateRange = range => {
-  emit('set-range', range);
+  emit('setRange', range);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
index 828044e1c..199affe45 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'apply']);
+const emit = defineEmits(['clear', 'clear']);
 
 const onClickClear = () => {
   emit('clear');
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
index ee68e7341..8347b7006 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -18,6 +18,7 @@ const props = defineProps({
   endCurrentDate: Date,
 });
 
+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH, YEAR } = CALENDAR_PERIODS;
 
@@ -33,10 +34,8 @@ const activeMonthIndex = computed(() => {
   return getMonth(date);
 });
 
-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
-
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const onClickPrev = () => {
@@ -48,7 +47,7 @@ const onClickNext = () => {
 };
 
 const selectMonth = index => {
-  emit('select-month', index);
+  emit('selectMonth', index);
 };
 </script>
 
@@ -63,7 +62,7 @@ const selectMonth = index => {
           MONTH
         )
       "
-      @set-view="setViewMode"
+      @setView="setViewMode"
       @prev="onClickPrev"
       @next="onClickNext"
     />
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
index c448e3eb1..d4962d21a 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -31,22 +31,22 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
+  'updateHoveredEndDate',
+  'selectDate',
   'prev',
   'next',
-  'set-view',
+  'setView',
 ]);
 
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH } = CALENDAR_PERIODS;
 
 const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
+  emit('updateHoveredEndDate', day);
 };
 
 const emitSelectDate = day => {
-  emit('select-date', day);
+  emit('selectDate', day);
 };
 const onClickPrev = () => {
   emit('prev');
@@ -57,7 +57,7 @@ const onClickNext = () => {
 };
 
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const weeks = calendarType => {
@@ -139,7 +139,7 @@ const dayClasses = day => ({
       "
       @prev="onClickPrev"
       @next="onClickNext"
-      @set-view="setViewMode"
+      @setView="setViewMode"
     />
     <CalendarWeekLabel />
     <div
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
index 1f5e7224f..725925f07 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -14,6 +14,8 @@ const props = defineProps({
   endCurrentDate: Date,
 });
 
+const emit = defineEmits(['selectYear']);
+
 const { START_CALENDAR } = CALENDAR_TYPES;
 
 const calculateStartYear = date => {
@@ -52,10 +54,8 @@ const onClickNext = () => {
   startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };
 
-const emit = defineEmits(['select-year']);
-
 const selectYear = year => {
-  emit('select-year', year);
+  emit('selectYear', year);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
index c5ae54b6f..9a1561eb5 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -12,6 +12,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['open']);
+
 const formatDateRange = computed(() => {
   const startDate = props.selectedStartDate;
   const endDate = props.selectedEndDate;
@@ -39,8 +41,6 @@ const activeDateRange = computed(
   () => dateRanges.find(range => range.value === props.selectedRange).label
 );
 
-const emit = defineEmits(['open']);
-
 const openDatePicker = () => {
   emit('open');
 };
diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index 08ce0e0c1..7787ab83d 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      :range="true"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 export default {
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      range
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DateTimePicker.vue b/app/javascript/dashboard/components/ui/DateTimePicker.vue
index 979136695..439bc873e 100644
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      type="datetime"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      :disabled-date="disableBeforeToday"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import addDays from 'date-fns/addDays';
 import DatePicker from 'vue2-datepicker';
@@ -45,3 +29,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      type="datetime"
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
index 3bbfb415c..fecfd5b6f 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
@@ -14,6 +14,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <button
     class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
index ccf9b2b1e..9c8e7155a 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index 0c6942e1b..c03346a49 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -38,13 +38,13 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['on-search']);
+const emit = defineEmits(['onSearch']);
 
 const searchTerm = ref('');
 
 const onSearch = debounce(value => {
   searchTerm.value = value;
-  emits('on-search', value);
+  emit('onSearch', value);
 }, 300);
 
 const filteredListItems = computed(() => {
@@ -71,13 +71,14 @@ const shouldShowEmptyState = computed(() => {
   return !props.isLoading && isDropdownListEmpty.value;
 });
 </script>
+
 <template>
   <div
     class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
     @click.stop
   >
     <slot name="search">
-      <dropdown-search
+      <DropdownSearch
         v-if="enableSearch"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
@@ -87,15 +88,15 @@ const shouldShowEmptyState = computed(() => {
       />
     </slot>
     <slot name="listItem">
-      <dropdown-loading-state
+      <DropdownLoadingState
         v-if="shouldShowLoadingState"
         :message="loadingPlaceholder"
       />
-      <dropdown-empty-state
+      <DropdownEmptyState
         v-else-if="shouldShowEmptyState"
         :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
       />
-      <list-item-button
+      <ListItemButton
         v-for="item in filteredListItems"
         :key="item.id"
         :is-active="isFilterActive(item.id)"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
index f9a90297d..9cabd5117 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
@@ -10,6 +10,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <button
     class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
index ccf9b2b1e..9c8e7155a 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
index c153a82a7..53611208c 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
@@ -14,6 +14,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
diff --git a/app/javascript/dashboard/components/ui/HelperTextPopup.vue b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
index fb14692f6..eed0e2755 100644
--- a/app/javascript/dashboard/components/ui/HelperTextPopup.vue
+++ b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div class="relative group w-[inherit] whitespace-normal z-20">
     <fluent-icon
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index e2d1322ef..4bdac728d 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,32 +1,3 @@
-<template>
-  <div
-    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
-    :class="labelClass"
-    :style="labelStyle"
-    :title="description"
-  >
-    <span v-if="icon" class="label-action--button">
-      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
-    </span>
-    <span
-      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
-      :style="{ background: color }"
-      class="label-color-dot flex-shrink-0"
-    />
-    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
-      {{ title }}
-    </span>
-    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <button
-      v-if="showClose"
-      class="label-close--button p-0"
-      :style="{ color: textColor }"
-      @click="onClick"
-    >
-      <fluent-icon icon="dismiss" size="12" class="close--icon" />
-    </button>
-  </div>
-</template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';
 
@@ -109,6 +80,36 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
+    :class="labelClass"
+    :style="labelStyle"
+    :title="description"
+  >
+    <span v-if="icon" class="label-action--button">
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
+    </span>
+    <span
+      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
+      :style="{ background: color }"
+      class="label-color-dot flex-shrink-0"
+    />
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <button
+      v-if="showClose"
+      class="label-close--button p-0"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .label {
   @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index ec0dd5539..069ea37a9 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
@@ -13,7 +36,7 @@
           active,
       }"
     >
-      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
       <fluent-icon
         v-if="active"
         icon="checkmark-circle"
@@ -41,30 +64,3 @@
     <slot v-else />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    heading: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: 'Active',
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index 3aa8f15a5..c86582fc6 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,16 +1,3 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button p-0"
-    :class="{ active: value, small: size === 'small' }"
-    role="switch"
-    :aria-checked="value.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active: value }" />
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -24,6 +11,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    type="button"
+    class="toggle-button p-0"
+    :class="{ active: value, small: size === 'small' }"
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span aria-hidden="true" :class="{ active: value }" />
+  </button>
+</template>
+
 <style lang="scss" scoped>
 .toggle-button {
   @apply bg-slate-200 dark:bg-slate-600;
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 340aa4f90..d6356aa9f 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,20 +1,3 @@
-<template>
-  <li
-    :class="{
-      'tabs-title': true,
-      'is-active': active,
-    }"
-  >
-    <a @click="onTabClick">
-      {{ name }}
-      <div v-if="showBadge" class="badge min-w-[20px]">
-        <span>
-          {{ getItemCount }}
-        </span>
-      </div>
-    </a>
-  </li>
-</template>
 <script>
 export default {
   name: 'WootTabsItem',
@@ -61,3 +44,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li
+    class="tabs-title"
+    :class="{
+      'is-active': active,
+    }"
+  >
+    <a @click="onTabClick">
+      {{ name }}
+      <div v-if="showBadge" class="badge min-w-[20px]">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 14dcc82d5..671f5ed09 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    v-tooltip.top="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
-  >
-    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
-  </div>
-</template>
-
 <script>
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
@@ -118,3 +105,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 9c887c853..4b45b6ef5 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -1,39 +1,3 @@
-<template>
-  <transition-group
-    name="wizard-items"
-    tag="div"
-    class="wizard-box"
-    :class="classObject"
-  >
-    <div
-      v-for="item in items"
-      :key="item.route"
-      class="item"
-      :class="{ active: isActive(item), over: isOver(item) }"
-    >
-      <div class="flex items-center">
-        <h3
-          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
-        >
-          {{ item.title }}
-        </h3>
-        <span
-          v-if="isOver(item)"
-          class="text-green-500 dark:text-green-500 ml-1"
-        >
-          <fluent-icon icon="checkmark" />
-        </span>
-      </div>
-      <span class="step">
-        {{ items.indexOf(item) + 1 }}
-      </span>
-      <p class="text-slate-600 dark:text-slate-300 text-sm m-0 pl-6">
-        {{ item.body }}
-      </p>
-    </div>
-  </transition-group>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -41,7 +5,6 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 export default {
   mixins: [globalConfigMixin],
   props: {
-    isFullwidth: Boolean,
     items: {
       type: Array,
       default: () => [],
@@ -65,6 +28,43 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box"
+    :class="classObject"
+  >
+    <div
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
+    >
+      <div class="flex items-center">
+        <h3
+          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
+        >
+          {{ item.title }}
+        </h3>
+        <span
+          v-if="isOver(item)"
+          class="ml-1 text-green-500 dark:text-green-500"
+        >
+          <fluent-icon icon="checkmark" />
+        </span>
+      </div>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
+        {{ item.body }}
+      </p>
+    </div>
+  </transition-group>
+</template>
+
 <style lang="scss" scoped>
 .wizard-box {
   .item {
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index 462a6fd3c..8b3c789e7 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -1,32 +1,3 @@
-<template>
-  <button
-    class="button"
-    :type="type"
-    :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
-    @click="handleClick"
-  >
-    <spinner
-      v-if="isLoading"
-      size="small"
-      :color-scheme="showDarkSpinner ? 'dark' : ''"
-    />
-    <emoji-or-icon
-      v-else-if="icon || emoji"
-      class="icon"
-      :emoji="emoji"
-      :icon="icon"
-      :icon-size="iconSize"
-    />
-    <span
-      v-if="$slots.default"
-      class="button__content"
-      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
-    >
-      <slot />
-    </span>
-  </button>
-</template>
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
@@ -132,3 +103,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    class="button"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <Spinner
+      v-if="isLoading"
+      size="small"
+      :color-scheme="showDarkSpinner ? 'dark' : ''"
+    />
+    <EmojiOrIcon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+      :icon-size="iconSize"
+    />
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index 02e128688..46a48e149 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -1,38 +1,3 @@
-<template>
-  <div v-if="!isFetchingAppIntegrations">
-    <div v-if="isAIIntegrationEnabled" class="relative">
-      <AIAssistanceCTAButton
-        v-if="shouldShowAIAssistCTAButton"
-        @click="openAIAssist"
-      />
-      <woot-button
-        v-else
-        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
-        icon="wand"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="openAIAssist"
-      />
-      <woot-modal
-        :show.sync="showAIAssistanceModal"
-        :on-close="hideAIAssistanceModal"
-      >
-        <AIAssistanceModal
-          :ai-option="aiOption"
-          @apply-text="insertText"
-          @close="hideAIAssistanceModal"
-        />
-      </woot-modal>
-    </div>
-    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
-      <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
-        <AICTAModal @close="hideAICtaModal" />
-      </woot-modal>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -69,7 +34,6 @@ export default {
   }),
   computed: {
     ...mapGetters({
-      currentChat: 'getSelectedChat',
       isAChatwootInstance: 'globalConfig/isAChatwootInstance',
     }),
     isAICTAModalDismissed() {
@@ -101,7 +65,7 @@ export default {
         '$mod+KeyZ': {
           action: () => {
             if (this.initialMessage) {
-              this.$emit('replace-text', this.initialMessage);
+              this.$emit('replaceText', this.initialMessage);
               this.initialMessage = '';
             }
           },
@@ -136,8 +100,44 @@ export default {
       this.showAIAssistanceModal = true;
     },
     insertText(message) {
-      this.$emit('replace-text', message);
+      this.$emit('replaceText', message);
     },
   },
 };
 </script>
+
+<template>
+  <div v-if="!isFetchingAppIntegrations">
+    <div v-if="isAIIntegrationEnabled" class="relative">
+      <AIAssistanceCTAButton
+        v-if="shouldShowAIAssistCTAButton"
+        @click="openAIAssist"
+      />
+      <woot-button
+        v-else
+        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
+        icon="wand"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="openAIAssist"
+      />
+      <woot-modal
+        :show.sync="showAIAssistanceModal"
+        :on-close="hideAIAssistanceModal"
+      >
+        <AIAssistanceModal
+          :ai-option="aiOption"
+          @applyText="insertText"
+          @close="hideAIAssistanceModal"
+        />
+      </woot-modal>
+    </div>
+    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
+      <AIAssistanceCTAButton @click="openAICta" />
+      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+        <AICTAModal @close="hideAICtaModal" />
+      </woot-modal>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
index 155311246..fb57232ad 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="relative">
     <woot-button
@@ -19,15 +29,7 @@
     />
   </div>
 </template>
-<script>
-export default {
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index df30d461d..5435407f0 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -1,44 +1,4 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="headerTitle" />
-    <form
-      class="modal-content flex flex-col w-full"
-      @submit.prevent="applyText"
-    >
-      <div v-if="draftMessage" class="w-full">
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
-          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
-        </h4>
-        <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
-          }}
-        </h4>
-      </div>
-      <div>
-        <AILoader v-if="isGenerating" />
-        <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
-      </div>
-
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
-          }}
-        </woot-button>
-        <woot-button :disabled="!generatedContent">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
-          }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AILoader from './AILoader.vue';
 import aiMixin from 'dashboard/mixins/aiMixin';
@@ -62,9 +22,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
     headerTitle() {
       const translationKey = this.aiOption?.toUpperCase();
       return translationKey
@@ -92,13 +49,52 @@ export default {
     },
     applyText() {
       this.recordAnalytics(this.aiOption);
-      this.$emit('apply-text', this.generatedContent);
+      this.$emit('applyText', this.generatedContent);
       this.onClose();
     },
   },
 };
 </script>
 
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="headerTitle" />
+    <form
+      class="flex flex-col w-full modal-content"
+      @submit.prevent="applyText"
+    >
+      <div v-if="draftMessage" class="w-full">
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
+        </h4>
+        <p v-dompurify-html="formatMessage(draftMessage, false)" />
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
+          }}
+        </h4>
+      </div>
+      <div>
+        <AILoader v-if="isGenerating" />
+        <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
+      </div>
+
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
+          }}
+        </woot-button>
+        <woot-button :disabled="!generatedContent">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
+          }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-8 pb-8;
diff --git a/app/javascript/dashboard/components/widgets/AICTAModal.vue b/app/javascript/dashboard/components/widgets/AICTAModal.vue
index eccc44f6c..b68da39d8 100644
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/app/javascript/dashboard/components/widgets/AICTAModal.vue
@@ -1,45 +1,6 @@
-<template>
-  <div class="flex-1 min-w-0 px-0">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.TITLE')"
-      :header-content="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DESC')"
-    />
-    <form
-      class="flex flex-col flex-wrap modal-content"
-      @submit.prevent="finishOpenAI"
-    >
-      <div class="w-full mt-2">
-        <woot-input
-          v-model="value"
-          type="text"
-          :class="{ error: v$.value.$error }"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
-          "
-          @blur="v$.value.$touch"
-        />
-      </div>
-      <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
-        <woot-button variant="link" @click.prevent="openOpenAIDoc">
-          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
-        </woot-button>
-        <div class="flex items-center gap-1">
-          <woot-button variant="clear" @click.prevent="onDismiss">
-            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
-          </woot-button>
-          <woot-button :is-disabled="v$.value.$invalid">
-            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
-          </woot-button>
-        </div>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import aiMixin from 'dashboard/mixins/aiMixin';
@@ -63,11 +24,6 @@ export default {
       required,
     },
   },
-  computed: {
-    ...mapGetters({
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
-  },
   methods: {
     onClose() {
       this.$emit('close');
@@ -113,3 +69,41 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 min-w-0 px-0">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.TITLE')"
+      :header-content="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DESC')"
+    />
+    <form
+      class="flex flex-col flex-wrap modal-content"
+      @submit.prevent="finishOpenAI"
+    >
+      <div class="w-full mt-2">
+        <woot-input
+          v-model="value"
+          type="text"
+          :class="{ error: v$.value.$error }"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
+          "
+          @blur="v$.value.$touch"
+        />
+      </div>
+      <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
+        <woot-button variant="link" @click.prevent="openOpenAIDoc">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
+        </woot-button>
+        <div class="flex items-center gap-1">
+          <woot-button variant="clear" @click.prevent="onDismiss">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
+          </woot-button>
+          <woot-button :is-disabled="v$.value.$invalid">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
+          </woot-button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AILoader.vue b/app/javascript/dashboard/components/widgets/AILoader.vue
index cc2879473..ad6735251 100644
--- a/app/javascript/dashboard/components/widgets/AILoader.vue
+++ b/app/javascript/dashboard/components/widgets/AILoader.vue
@@ -12,8 +12,6 @@
   </div>
 </template>
 
-<script></script>
-
 <style lang="scss" scoped>
 .animation-container {
   position: relative;
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 32af9e499..69d559509 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -1,3 +1,48 @@
+<script setup>
+import { computed } from 'vue';
+import { formatBytes } from 'shared/helpers/FileHelper';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['removeAttachment']);
+
+const nonRecordedAudioAttachments = computed(() => {
+  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
+});
+
+const recordedAudioAttachments = computed(() =>
+  props.attachments.filter(attachment => attachment.isRecordedAudio)
+);
+
+const onRemoveAttachment = itemIndex => {
+  emit(
+    'removeAttachment',
+    nonRecordedAudioAttachments.value
+      .filter((_, index) => index !== itemIndex)
+      .concat(recordedAudioAttachments.value)
+  );
+};
+
+const formatFileSize = file => {
+  const size = file.byte_size || file.size;
+  return formatBytes(size, 0);
+};
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const fileName = file => {
+  return file.filename || file.name;
+};
+</script>
+
 <template>
   <div class="flex overflow-auto max-h-[12.5rem]">
     <div
@@ -37,48 +82,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-import { formatBytes } from 'shared/helpers/FileHelper';
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emits = defineEmits(['remove-attachment']);
-
-const nonRecordedAudioAttachments = computed(() => {
-  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
-});
-
-const recordedAudioAttachments = computed(() =>
-  props.attachments.filter(attachment => attachment.isRecordedAudio)
-);
-
-const onRemoveAttachment = itemIndex => {
-  emits(
-    'remove-attachment',
-    nonRecordedAudioAttachments.value
-      .filter((_, index) => index !== itemIndex)
-      .concat(recordedAudioAttachments.value)
-  );
-};
-
-const formatFileSize = file => {
-  const size = file.byte_size || file.size;
-  return formatBytes(size, 0);
-};
-
-const isTypeImage = file => {
-  const type = file.content_type || file.type;
-  return type.includes('image');
-};
-
-const fileName = file => {
-  return file.filename || file.name;
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index b64484fe1..28810fd4e 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -1,107 +1,3 @@
-<template>
-  <div class="filter" :class="actionInputStyles">
-    <div class="filter-inputs">
-      <select
-        v-model="action_name"
-        class="action__question"
-        :class="{ 'full-width': !showActionInput }"
-        @change="resetAction()"
-      >
-        <option
-          v-for="attribute in actionTypes"
-          :key="attribute.key"
-          :value="attribute.key"
-        >
-          {{ attribute.label }}
-        </option>
-      </select>
-      <div v-if="showActionInput" class="filter__answer--wrap">
-        <div v-if="inputType" class="w-full">
-          <div
-            v-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="action_params"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            />
-          </div>
-          <div
-            v-else-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="action_params"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              :multiple="true"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            />
-          </div>
-          <input
-            v-else-if="inputType === 'email'"
-            v-model="action_params"
-            type="email"
-            class="answer--text-input"
-            placeholder="Enter email"
-          />
-          <input
-            v-else-if="inputType === 'url'"
-            v-model="action_params"
-            type="url"
-            class="answer--text-input"
-            placeholder="Enter url"
-          />
-          <automation-action-file-input
-            v-if="inputType === 'attachment'"
-            v-model="action_params"
-            :initial-file-name="initialFileName"
-          />
-        </div>
-      </div>
-      <woot-button
-        v-if="!isMacro"
-        icon="dismiss"
-        variant="clear"
-        color-scheme="secondary"
-        @click="removeAction"
-      />
-    </div>
-    <automation-action-team-message-input
-      v-if="inputType === 'team_message'"
-      v-model="action_params"
-      :teams="dropdownValues"
-    />
-    <woot-message-editor
-      v-if="inputType === 'textarea'"
-      v-model="castMessageVmodel"
-      rows="4"
-      :enable-variables="true"
-      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-      class="action-message"
-    />
-    <p v-if="errorMessage" class="filter-error">
-      {{ errorMessage }}
-    </p>
-  </div>
-</template>
-
 <script>
 import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
 import AutomationActionFileInput from './AutomationFileInput.vue';
@@ -196,6 +92,110 @@ export default {
 };
 </script>
 
+<template>
+  <div class="filter" :class="actionInputStyles">
+    <div class="filter-inputs">
+      <select
+        v-model="action_name"
+        class="action__question"
+        :class="{ 'full-width': !showActionInput }"
+        @change="resetAction()"
+      >
+        <option
+          v-for="attribute in actionTypes"
+          :key="attribute.key"
+          :value="attribute.key"
+        >
+          {{ attribute.label }}
+        </option>
+      </select>
+      <div v-if="showActionInput" class="filter__answer--wrap">
+        <div v-if="inputType" class="w-full">
+          <div
+            v-if="inputType === 'search_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="action_params"
+              track-by="id"
+              label="name"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="action_params"
+              track-by="id"
+              label="name"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
+              multiple
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <input
+            v-else-if="inputType === 'email'"
+            v-model="action_params"
+            type="email"
+            class="answer--text-input"
+            :placeholder="$t('AUTOMATION.ACTION.EMAIL_INPUT_PLACEHOLDER')"
+          />
+          <input
+            v-else-if="inputType === 'url'"
+            v-model="action_params"
+            type="url"
+            class="answer--text-input"
+            :placeholder="$t('AUTOMATION.ACTION.URL_INPUT_PLACEHOLDER')"
+          />
+          <AutomationActionFileInput
+            v-if="inputType === 'attachment'"
+            v-model="action_params"
+            :initial-file-name="initialFileName"
+          />
+        </div>
+      </div>
+      <woot-button
+        v-if="!isMacro"
+        icon="dismiss"
+        variant="clear"
+        color-scheme="secondary"
+        @click="removeAction"
+      />
+    </div>
+    <AutomationActionTeamMessageInput
+      v-if="inputType === 'team_message'"
+      v-model="action_params"
+      :teams="dropdownValues"
+    />
+    <WootMessageEditor
+      v-if="inputType === 'textarea'"
+      v-model="castMessageVmodel"
+      rows="4"
+      enable-variables
+      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+      class="action-message"
+    />
+    <p v-if="errorMessage" class="filter-error">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .filter {
   @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index 61eb74f22..1188ad281 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -1,30 +1,3 @@
-<template>
-  <div>
-    <div class="multiselect-wrap--small">
-      <multiselect
-        v-model="selectedTeams"
-        track-by="id"
-        label="name"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        :multiple="true"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        deselect-label=""
-        :max-height="160"
-        :options="teams"
-        :allow-empty="false"
-        @input="updateValue"
-      />
-      <textarea
-        v-model="message"
-        rows="4"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-        @input="updateValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   // The value types are dynamic, hence prop validation removed to work with our action schema
@@ -52,6 +25,33 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="multiselect-wrap--small">
+      <multiselect
+        v-model="selectedTeams"
+        track-by="id"
+        label="name"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
+        multiple
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :max-height="160"
+        :options="teams"
+        :allow-empty="false"
+        @input="updateValue"
+      />
+      <textarea
+        v-model="message"
+        rows="4"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        @input="updateValue"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .multiselect {
   margin: var(--space-smaller) var(--space-zero);
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index ab02a76b3..8cd1c6b00 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -1,30 +1,3 @@
-<template>
-  <label class="input-wrapper" :class="uploadState">
-    <input
-      v-if="uploadState !== 'processing'"
-      type="file"
-      name="attachment"
-      :class="uploadState === 'processing' ? 'disabled' : ''"
-      @change="onChangeFile"
-    />
-    <spinner v-if="uploadState === 'processing'" />
-    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
-    <fluent-icon
-      v-if="uploadState === 'uploaded'"
-      icon="checkmark-circle"
-      type="outline"
-      class="success-icon"
-    />
-    <fluent-icon
-      v-if="uploadState === 'failed'"
-      icon="dismiss-circle"
-      type="outline"
-      class="error-icon"
-    />
-    <p class="file-button">{{ label }}</p>
-  </label>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import Spinner from 'shared/components/Spinner.vue';
@@ -33,10 +6,6 @@ export default {
     Spinner,
   },
   props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
     initialFileName: {
       type: String,
       default: '',
@@ -77,6 +46,33 @@ export default {
 };
 </script>
 
+<template>
+  <label class="input-wrapper" :class="uploadState">
+    <input
+      v-if="uploadState !== 'processing'"
+      type="file"
+      name="attachment"
+      :class="uploadState === 'processing' ? 'disabled' : ''"
+      @change="onChangeFile"
+    />
+    <Spinner v-if="uploadState === 'processing'" />
+    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
+    <fluent-icon
+      v-if="uploadState === 'uploaded'"
+      icon="checkmark-circle"
+      type="outline"
+      class="success-icon"
+    />
+    <fluent-icon
+      v-if="uploadState === 'failed'"
+      icon="dismiss-circle"
+      type="outline"
+      class="error-icon"
+    />
+    <p class="file-button">{{ label }}</p>
+  </label>
+</template>
+
 <style scoped>
 input[type='file'] {
   @apply hidden;
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 1fad70eef..2c7ad01c0 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="avatar-container" :style="style" aria-hidden="true">
-    <slot>{{ userInitial }}</slot>
-  </div>
-</template>
-
 <script>
 export default {
   name: 'Avatar',
@@ -38,6 +32,12 @@ export default {
 };
 </script>
 
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 111e838cb..5051b2599 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -30,7 +30,7 @@ const buttonStyleClass = props.compact
 
 <template>
   <button
-    class="flex items-center font-normal p-0 cursor-pointer"
+    class="flex items-center p-0 font-normal cursor-pointer"
     :class="buttonStyleClass"
     @click.capture="goBack"
   >
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index fe47f3b96..95bd7d0e1 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -1,11 +1,3 @@
-<template>
-  <channel-selector
-    :class="{ inactive: !isActive }"
-    :title="channel.name"
-    :src="getChannelThumbnail()"
-    @click="onItemClick"
-  />
-</template>
 <script>
 import ChannelSelector from '../ChannelSelector.vue';
 export default {
@@ -59,9 +51,18 @@ export default {
     },
     onItemClick() {
       if (this.isActive) {
-        this.$emit('channel-item-click', this.channel.key);
+        this.$emit('channelItemClick', this.channel.key);
       }
     },
   },
 };
 </script>
+
+<template>
+  <ChannelSelector
+    :class="{ inactive: !isActive }"
+    :title="channel.name"
+    :src="getChannelThumbnail()"
+    @click="onItemClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 86e80748d..f4d1a7c60 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-tabs :index="activeTabIndex" @change="onTabChange">
-    <woot-tabs-item
-      v-for="item in items"
-      :key="item.key"
-      :name="item.name"
-      :count="item.count"
-    />
-  </woot-tabs>
-</template>
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -51,3 +41,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-tabs :index="activeTabIndex" @change="onTabChange">
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.key"
+      :name="item.name"
+      :count="item.count"
+    />
+  </woot-tabs>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 12b9124cf..732de3ced 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="colorpicker">
-    <div
-      class="colorpicker--selected"
-      :style="`background-color: ${value}`"
-      @click.prevent="toggleColorPicker"
-    />
-    <chrome
-      v-if="isPickerOpen"
-      v-on-clickaway="closeTogglePicker"
-      :disable-alpha="true"
-      :value="value"
-      class="colorpicker--chrome"
-      @input="updateColor"
-    />
-  </div>
-</template>
-
 <script>
 import { Chrome } from 'vue-color';
 
@@ -50,6 +32,24 @@ export default {
 };
 </script>
 
+<template>
+  <div class="colorpicker">
+    <div
+      class="colorpicker--selected"
+      :style="`background-color: ${value}`"
+      @click.prevent="toggleColorPicker"
+    />
+    <Chrome
+      v-if="isPickerOpen"
+      v-on-clickaway="closeTogglePicker"
+      disable-alpha
+      :value="value"
+      class="colorpicker--chrome"
+      @input="updateColor"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
 @import '~dashboard/assets/scss/mixins';
diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index a13c3510a..824ff58ca 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -1,25 +1,3 @@
-<template>
-  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
-    <div
-      v-for="(configItem, index) in config"
-      :key="index"
-      class="dashboard-app--list"
-    >
-      <loading-state
-        v-if="iframeLoading"
-        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
-        class="dashboard-app_loading-container"
-      />
-      <iframe
-        v-if="configItem.type === 'frame' && configItem.url"
-        :id="getFrameId(index)"
-        :src="configItem.url"
-        @load="() => onIframeLoad(index)"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 export default {
@@ -102,6 +80,28 @@ export default {
 };
 </script>
 
+<template>
+  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+    <div
+      v-for="(configItem, index) in config"
+      :key="index"
+      class="dashboard-app--list"
+    >
+      <LoadingState
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
+      <iframe
+        v-if="configItem.type === 'frame' && configItem.url"
+        :id="getFrameId(index)"
+        :src="configItem.url"
+        @load="() => onIframeLoad(index)"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .dashboard-app--container,
 .dashboard-app--list,
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index fe7b03942..6e2101917 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  props: {
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="empty-state py-16 px-1 ml-0 mr-0">
     <h3
@@ -15,12 +24,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/FeatureToggle.vue b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
index ec7759a9c..114922042 100644
--- a/app/javascript/dashboard/components/widgets/FeatureToggle.vue
+++ b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
@@ -1,8 +1,3 @@
-<template>
-  <div v-if="isFeatureEnabled">
-    <slot />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -23,3 +18,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="isFeatureEnabled">
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index 5bf1df37b..c0369f5eb 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -1,147 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <div
-      class="rounded-md p-2 border border-solid"
-      :class="getInputErrorClass(errorMessage)"
-    >
-      <div class="flex">
-        <select
-          v-if="groupedFilters"
-          v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-          @change="resetFilter()"
-        >
-          <optgroup
-            v-for="(group, i) in filterGroups"
-            :key="i"
-            :label="group.name"
-          >
-            <option
-              v-for="attribute in group.attributes"
-              :key="attribute.key"
-              :value="attribute.key"
-            >
-              {{ attribute.name }}
-            </option>
-          </optgroup>
-        </select>
-        <select
-          v-else
-          v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-          @change="resetFilter()"
-        >
-          <option
-            v-for="attribute in filterAttributes"
-            :key="attribute.key"
-            :value="attribute.key"
-            :disabled="attribute.disabled"
-          >
-            {{ attribute.name }}
-          </option>
-        </select>
-
-        <select
-          v-model="filterOperator"
-          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-        >
-          <option
-            v-for="(operator, o) in operators"
-            :key="o"
-            :value="operator.value"
-          >
-            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-          </option>
-        </select>
-
-        <div v-if="showUserInput" class="filter__answer--wrap mr-1 flex-grow">
-          <div
-            v-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="'Select'"
-              :multiple="true"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-            />
-          </div>
-          <div
-            v-else-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="'Select'"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            />
-          </div>
-          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
-            <input
-              v-model="values"
-              type="date"
-              :editable="false"
-              class="mb-0 datepicker"
-            />
-          </div>
-          <input
-            v-else
-            v-model="values"
-            type="text"
-            class="mb-0"
-            placeholder="Enter value"
-          />
-        </div>
-        <woot-button
-          icon="dismiss"
-          variant="clear"
-          color-scheme="secondary"
-          @click="removeFilter"
-        />
-      </div>
-      <p v-if="errorMessage" class="filter-error">
-        {{ errorMessage }}
-      </p>
-    </div>
-
-    <div
-      v-if="showQueryOperator"
-      class="flex items-center justify-center relative my-2.5 mx-0"
-    >
-      <hr
-        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
-      />
-      <select
-        v-model="query_operator"
-        class="bg-white dark:bg-slate-900 mb-0 w-auto relative text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-      >
-        <option value="and">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-        </option>
-        <option value="or">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -157,10 +13,6 @@ export default {
       type: String,
       default: 'plain_text',
     },
-    dataType: {
-      type: String,
-      default: 'plain_text',
-    },
     operators: {
       type: Array,
       default: () => [],
@@ -279,6 +131,151 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div>
+    <div
+      class="p-2 border border-solid rounded-md"
+      :class="getInputErrorClass(errorMessage)"
+    >
+      <div class="flex">
+        <select
+          v-if="groupedFilters"
+          v-model="attributeKey"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          @change="resetFilter()"
+        >
+          <optgroup
+            v-for="(group, i) in filterGroups"
+            :key="i"
+            :label="group.name"
+          >
+            <option
+              v-for="attribute in group.attributes"
+              :key="attribute.key"
+              :value="attribute.key"
+            >
+              {{ attribute.name }}
+            </option>
+          </optgroup>
+        </select>
+        <select
+          v-else
+          v-model="attributeKey"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          @change="resetFilter()"
+        >
+          <option
+            v-for="attribute in filterAttributes"
+            :key="attribute.key"
+            :value="attribute.key"
+            :disabled="attribute.disabled"
+          >
+            {{ attribute.name }}
+          </option>
+        </select>
+
+        <select
+          v-model="filterOperator"
+          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+        >
+          <option
+            v-for="(operator, o) in operators"
+            :key="o"
+            :value="operator.value"
+          >
+            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
+          </option>
+        </select>
+
+        <div v-if="showUserInput" class="flex-grow mr-1 filter__answer--wrap">
+          <div
+            v-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              placeholder="Select"
+              multiple
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'search_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              placeholder="Select"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
+            <input
+              v-model="values"
+              type="date"
+              :editable="false"
+              class="mb-0 datepicker"
+            />
+          </div>
+          <input
+            v-else
+            v-model="values"
+            type="text"
+            class="mb-0"
+            :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
+          />
+        </div>
+        <woot-button
+          icon="dismiss"
+          variant="clear"
+          color-scheme="secondary"
+          @click="removeFilter"
+        />
+      </div>
+      <p v-if="errorMessage" class="filter-error">
+        {{ errorMessage }}
+      </p>
+    </div>
+
+    <div
+      v-if="showQueryOperator"
+      class="flex items-center justify-center relative my-2.5 mx-0"
+    >
+      <hr
+        class="absolute w-full border-b border-solid border-slate-75 dark:border-slate-800"
+      />
+      <select
+        v-model="query_operator"
+        class="relative w-auto mb-0 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+      >
+        <option value="and">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
+        </option>
+        <option value="or">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .filter__answer--wrap {
   input {
diff --git a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
index 6d5efdf90..e2a9a9d46 100644
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
+++ b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
-    <span
-      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
-    >
-      <fluent-icon
-        :icon="computedInboxIcon"
-        size="14"
-        class="text-slate-800 dark:text-slate-200"
-      />
-    </span>
-    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
-      <h5 class="option__title">
-        {{ name }}
-      </h5>
-      <p
-        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
-        :title="inboxIdentifier"
-      >
-        {{ inboxIdentifier || computedInboxType }}
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   getInboxClassByType,
@@ -66,6 +41,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
+    <span
+      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
+    >
+      <fluent-icon
+        :icon="computedInboxIcon"
+        size="14"
+        class="text-slate-800 dark:text-slate-200"
+      />
+    </span>
+    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
+      <h5 class="option__title">
+        {{ name }}
+      </h5>
+      <p
+        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
+        :title="inboxIdentifier"
+      >
+        {{ inboxIdentifier || computedInboxType }}
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option__body {
   @apply inline-block text-slate-600 dark:text-slate-200 leading-[1.3] min-w-0 m-0;
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index 8b604b323..9a43d5f45 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
-  >
-    <fluent-icon
-      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
-      :icon="computedInboxClass"
-      size="12"
-    />
-    {{ inbox.name }}
-  </div>
-</template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
 
@@ -29,3 +17,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
+    />
+    {{ inbox.name }}
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index b5d02b841..c2accc64a 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -1,34 +1,3 @@
-<template>
-  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
-    <add-label @add="toggleLabels" />
-    <woot-label
-      v-for="label in savedLabels"
-      :key="label.id"
-      :title="label.title"
-      :description="label.description"
-      :show-close="true"
-      :color="label.color"
-      variant="smooth"
-      @click="removeItem"
-    />
-    <div class="dropdown-wrap">
-      <div
-        :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-        class="dropdown-pane"
-      >
-        <label-dropdown
-          v-if="showSearchDropdownLabel"
-          :account-labels="allLabels"
-          :selected-labels="selectedLabels"
-          :allow-creation="isAdmin"
-          @add="addItem"
-          @remove="removeItem"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -107,6 +76,37 @@ export default {
 };
 </script>
 
+<template>
+  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
+    <AddLabel @add="toggleLabels" />
+    <woot-label
+      v-for="label in savedLabels"
+      :key="label.id"
+      :title="label.title"
+      :description="label.description"
+      show-close
+      :color="label.color"
+      variant="smooth"
+      @click="removeItem"
+    />
+    <div class="dropdown-wrap">
+      <div
+        :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
+        class="dropdown-pane"
+      >
+        <LabelDropdown
+          v-if="showSearchDropdownLabel"
+          :account-labels="allLabels"
+          :selected-labels="selectedLabels"
+          :allow-creation="isAdmin"
+          @add="addItem"
+          @remove="removeItem"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .title-icon {
   margin-right: var(--space-smaller);
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index 76aaef3eb..dfba6b43e 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,3 +1,11 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="flex items-center justify-center p-8">
     <h6
@@ -10,10 +18,3 @@
     </h6>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    message: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 9f99d5ba2..c2e6c48c3 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
@@ -14,18 +29,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/ShowMore.vue b/app/javascript/dashboard/components/widgets/ShowMore.vue
index 980889122..c17c32e2a 100644
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -1,15 +1,3 @@
-<template>
-  <span>
-    {{ textToBeDisplayed }}
-    <button
-      v-if="text.length > limit"
-      class="show-more--button"
-      @click="toggleShowMore"
-    >
-      {{ buttonLabel }}
-    </button>
-  </span>
-</template>
 <script>
 export default {
   props: {
@@ -47,6 +35,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span>
+    {{ textToBeDisplayed }}
+    <button
+      v-if="text.length > limit"
+      class="show-more--button"
+      @click="toggleShowMore"
+    >
+      {{ buttonLabel }}
+    </button>
+  </span>
+</template>
+
 <style scoped>
 .show-more--button {
   color: var(--w-500);
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index b3a671771..7809cfdb2 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -1,24 +1,3 @@
-<template>
-  <footer
-    v-if="isFooterVisible"
-    class="h-12 flex items-center justify-between px-6"
-  >
-    <table-footer-results
-      :first-index="firstIndex"
-      :last-index="lastIndex"
-      :total-count="totalCount"
-    />
-    <table-footer-pagination
-      v-if="totalCount"
-      :current-page="currentPage"
-      :total-pages="totalPages"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      @page-change="$emit('page-change', $event)"
-    />
-  </footer>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import TableFooterResults from './TableFooterResults.vue';
@@ -46,3 +25,24 @@ const isFooterVisible = computed(
   () => props.totalCount && !(firstIndex.value > props.totalCount)
 );
 </script>
+
+<template>
+  <footer
+    v-if="isFooterVisible"
+    class="flex items-center justify-between h-12 px-6"
+  >
+    <TableFooterResults
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <TableFooterPagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @pageChange="$emit('pageChange', $event)"
+    />
+  </footer>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
index 38ebdc69c..6c9a38995 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -1,5 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['pageChange']);
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
+function onPageChange(newPage) {
+  emit('pageChange', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
+
 <template>
-  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+  <div class="flex items-center h-8 rounded-lg bg-slate-50 dark:bg-slate-800">
     <woot-button
       size="small"
       variant="smooth"
@@ -16,7 +72,7 @@
         :class="hasFirstPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
@@ -35,7 +91,7 @@
     </woot-button>
 
     <div
-      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+      class="flex items-center gap-3 px-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
     >
       <span class="text-sm text-slate-800 dark:text-slate-75">
         {{ currentPage }}
@@ -61,7 +117,7 @@
         :class="hasNextPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
@@ -80,64 +136,3 @@
     </woot-button>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-
-// Props
-const props = defineProps({
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalCount: {
-    type: Number,
-    default: 0,
-  },
-  totalPages: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const hasLastPage = computed(
-  () => props.currentPage === props.totalPages || props.totalPages === 1
-);
-const hasFirstPage = computed(() => props.currentPage === 1);
-const hasNextPage = computed(() => props.currentPage === props.totalPages);
-const hasPrevPage = computed(() => props.currentPage === 1);
-
-const emit = defineEmits(['page-change']);
-
-function buttonClass(hasPage) {
-  if (hasPage) {
-    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
-  }
-  return 'dark:hover:!bg-slate-700/50';
-}
-
-function onPageChange(newPage) {
-  emit('page-change', newPage);
-}
-
-const onNextPage = () => {
-  if (!onNextPage.value) {
-    onPageChange(props.currentPage + 1);
-  }
-};
-const onPrevPage = () => {
-  if (!hasPrevPage.value) {
-    onPageChange(props.currentPage - 1);
-  }
-};
-const onFirstPage = () => {
-  if (!hasFirstPage.value) {
-    onPageChange(1);
-  }
-};
-const onLastPage = () => {
-  if (!hasLastPage.value) {
-    onPageChange(props.totalPages);
-  }
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterResults.vue b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
index 305933059..23a3c3a0d 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterResults.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
@@ -1,15 +1,3 @@
-<template>
-  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
-    {{
-      $t('GENERAL.SHOWING_RESULTS', {
-        firstIndex,
-        lastIndex,
-        totalCount,
-      })
-    }}
-  </span>
-</template>
-
 <script setup>
 defineProps({
   firstIndex: {
@@ -26,3 +14,15 @@ defineProps({
   },
 });
 </script>
+
+<template>
+  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
index 8e2cd6326..ce3cb21ac 100644
--- a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -8,7 +8,6 @@ const props = defineProps({
   label: {
     type: String,
     required: true,
-    default: '',
   },
 });
 
@@ -27,6 +26,7 @@ const spanClass = computed(() => {
   return 'col-span-1';
 });
 </script>
+
 <template>
   <div
     class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 6c864e95b..7b222aa7e 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    :class="thumbnailBoxClass"
-    :style="{ height: size, width: size }"
-    :title="title"
-  >
-    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
-    <slot>
-      <img
-        v-show="shouldShowImage"
-        :src="src"
-        draggable="false"
-        :class="thumbnailClass"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <Avatar
-        v-show="!shouldShowImage"
-        :username="userNameWithoutEmoji"
-        :class="thumbnailClass"
-        :size="avatarSize"
-      />
-    </slot>
-    <img
-      v-if="badgeSrc"
-      class="source-badge"
-      :style="badgeStyle"
-      :src="`/integrations/channels/badges/${badgeSrc}.png`"
-      alt="Badge"
-    />
-    <div
-      v-if="showStatusIndicator"
-      :class="`source-badge user-online-status user-online-status--${status}`"
-      :style="statusStyle"
-    />
-  </div>
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -168,6 +131,44 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
+    <slot>
+      <img
+        v-show="shouldShowImage"
+        :src="src"
+        draggable="false"
+        :class="thumbnailClass"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <Avatar
+        v-show="!shouldShowImage"
+        :username="userNameWithoutEmoji"
+        :class="thumbnailClass"
+        :size="avatarSize"
+      />
+    </slot>
+    <img
+      v-if="badgeSrc"
+      class="source-badge"
+      :style="badgeStyle"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
+    />
+    <div
+      v-if="showStatusIndicator"
+      :class="`source-badge user-online-status user-online-status--${status}`"
+      :style="statusStyle"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .user-thumbnail-box {
   flex: 0 0 auto;
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index a9c521bbb..5f35f62fa 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="overlapping-thumbnails">
-    <thumbnail
-      v-for="user in usersList"
-      :key="user.id"
-      v-tooltip="user.name"
-      :title="user.name"
-      :src="user.thumbnail"
-      :username="user.name"
-      :has-border="true"
-      :size="size"
-      :class="`overlapping-thumbnail gap-${gap}`"
-    />
-    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
-      {{ moreThumbnailsText }}
-    </span>
-  </div>
-</template>
 <script>
 import Thumbnail from './Thumbnail.vue';
 
@@ -52,6 +34,25 @@ export default {
 };
 </script>
 
+<template>
+  <div class="overlapping-thumbnails">
+    <Thumbnail
+      v-for="user in usersList"
+      :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
+      :src="user.thumbnail"
+      :username="user.name"
+      has-border
+      :size="size"
+      :class="`overlapping-thumbnail gap-${gap}`"
+    />
+    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
+      {{ moreThumbnailsText }}
+    </span>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .overlapping-thumbnails {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 07e3e5ed6..d54e7ea4f 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="flex items-center gap-1.5 text-left">
-    <thumbnail
-      :src="user.thumbnail"
-      :size="size"
-      :username="user.name"
-      :status="user.availability_status"
-    />
-    <h6
-      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
-      :class="textClass"
-    >
-      {{ user.name }}
-    </h6>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -37,3 +21,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center gap-1.5 text-left">
+    <Thumbnail
+      :src="user.thumbnail"
+      :size="size"
+      :username="user.name"
+      :status="user.availability_status"
+    />
+    <h6
+      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+      :class="textClass"
+    >
+      {{ user.name }}
+    </h6>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/VideoCallButton.vue b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
index 10bf424fb..4f6ebf81d 100644
--- a/app/javascript/dashboard/components/widgets/VideoCallButton.vue
+++ b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <woot-button
-    v-if="isVideoIntegrationEnabled"
-    v-tooltip.top-end="
-      $t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
-    "
-    icon="video"
-    :is-loading="isLoading"
-    color-scheme="secondary"
-    variant="smooth"
-    size="small"
-    @click="onClick"
-  />
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import DyteAPI from 'dashboard/api/integrations/dyte';
@@ -54,3 +40,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-button
+    v-if="isVideoIntegrationEnabled"
+    v-tooltip.top-end="
+      $t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
+    "
+    icon="video"
+    :is-loading="isLoading"
+    color-scheme="secondary"
+    variant="smooth"
+    size="small"
+    @click="onClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 3b3e23be7..0e04c3c5d 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="audio-wave-wrapper">
-    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
-  </div>
-</template>
-
 <script>
 import getUuid from 'widget/helpers/uuid';
 import 'video.js/dist/video-js.css';
@@ -55,10 +49,6 @@ export default {
       type: String,
       default: AUDIO_FORMATS.WAV,
     },
-    isAWhatsAppChannel: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -223,7 +213,7 @@ export default {
       this.player.wavesurfer().pause();
     },
     fireRecorderBlob(blob) {
-      this.$emit('finish-record', {
+      this.$emit('finishRecord', {
         name: blob.name,
         type: blob.type,
         size: blob.size,
@@ -231,15 +221,21 @@ export default {
       });
     },
     fireStateRecorderChanged(state) {
-      this.$emit('state-recorder-changed', state);
+      this.$emit('stateRecorderChanged', state);
     },
     fireProgressRecord(duration) {
-      this.$emit('state-recorder-progress-changed', duration);
+      this.$emit('stateRecorderProgressChanged', duration);
     },
   },
 };
 </script>
 
+<template>
+  <div class="audio-wave-wrapper">
+    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
+  </div>
+</template>
+
 <style lang="scss">
 .audio-wave-wrapper {
   @apply h-20 min-h-[5rem];
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 9c99370c1..8fe929354 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -1,49 +1,3 @@
-<template>
-  <div ref="editorRoot" class="relative editor-root">
-    <tag-agents
-      v-if="showUserMentions && isPrivate"
-      :search-key="mentionSearchKey"
-      @click="insertMentionNode"
-    />
-    <canned-response
-      v-if="shouldShowCannedResponses"
-      :search-key="cannedSearchTerm"
-      @click="insertCannedResponse"
-    />
-    <variable-list
-      v-if="shouldShowVariables"
-      :search-key="variableSearchTerm"
-      @click="insertVariable"
-    />
-    <input
-      ref="imageUpload"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onFileChange"
-    />
-    <div ref="editor" />
-    <div
-      v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
-      :style="{
-        top: toolbarPosition.top,
-        left: toolbarPosition.left,
-      }"
-    >
-      <button
-        v-for="size in sizes"
-        :key="size.name"
-        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
-        @click="setURLWithQueryAndImageSize(size)"
-      >
-        {{ size.name }}
-      </button>
-    </div>
-    <slot name="footer" />
-  </div>
-</template>
-
 <script>
 import {
   messageSchema,
@@ -155,10 +109,10 @@ export default {
     return {
       typingIndicator: createTypingIndicator(
         () => {
-          this.$emit('typing-on');
+          this.$emit('typingOn');
         },
         () => {
-          this.$emit('typing-off');
+          this.$emit('typingOff');
         },
         TYPING_INDICATOR_IDLE_TIME
       ),
@@ -298,13 +252,13 @@ export default {
   },
   watch: {
     showUserMentions(updatedValue) {
-      this.$emit('toggle-user-mention', this.isPrivate && updatedValue);
+      this.$emit('toggleUserMention', this.isPrivate && updatedValue);
     },
     showCannedMenu(updatedValue) {
-      this.$emit('toggle-canned-menu', !this.isPrivate && updatedValue);
+      this.$emit('toggleCannedMenu', !this.isPrivate && updatedValue);
     },
     showVariables(updatedValue) {
-      this.$emit('toggle-variables-menu', !this.isPrivate && updatedValue);
+      this.$emit('toggleVariablesMenu', !this.isPrivate && updatedValue);
     },
     value(newVal = '') {
       if (newVal !== this.contentFromEditor) {
@@ -333,7 +287,7 @@ export default {
           this.state = this.editorView.state.apply(tr);
           this.editorView.updateState(this.state);
           this.emitOnChange();
-          this.$emit('clear-selection');
+          this.$emit('clearSelection');
         }
       }
       return null;
@@ -728,6 +682,52 @@ export default {
 };
 </script>
 
+<template>
+  <div ref="editorRoot" class="relative editor-root">
+    <TagAgents
+      v-if="showUserMentions && isPrivate"
+      :search-key="mentionSearchKey"
+      @click="insertMentionNode"
+    />
+    <CannedResponse
+      v-if="shouldShowCannedResponses"
+      :search-key="cannedSearchTerm"
+      @click="insertCannedResponse"
+    />
+    <VariableList
+      v-if="shouldShowVariables"
+      :search-key="variableSearchTerm"
+      @click="insertVariable"
+    />
+    <input
+      ref="imageUpload"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      hidden
+      @change="onFileChange"
+    />
+    <div ref="editor" />
+    <div
+      v-show="isImageNodeSelected && showImageResizeToolbar"
+      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
+      :style="{
+        top: toolbarPosition.top,
+        left: toolbarPosition.left,
+      }"
+    >
+      <button
+        v-for="size in sizes"
+        :key="size.name"
+        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
+        @click="setURLWithQueryAndImageSize(size)"
+      >
+        {{ size.name }}
+      </button>
+    </div>
+    <slot name="footer" />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
index 67f2dc5a9..ab4be9342 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -1,18 +1,3 @@
-<template>
-  <div>
-    <div class="editor-root editor--article">
-      <input
-        ref="imageUploadInput"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        hidden
-        @change="onFileChange"
-      />
-      <div ref="editor" />
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   fullSchema,
@@ -223,6 +208,21 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="editor-root editor--article">
+      <input
+        ref="imageUploadInput"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        hidden
+        @change="onFileChange"
+      />
+      <div ref="editor" />
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 @import '~@chatwoot/prosemirror-schema/src/styles/article.scss';
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index e9018b534..2f65987f9 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -1,138 +1,3 @@
-<template>
-  <div class="bottom-box" :class="wrapClass">
-    <div class="left-wrap">
-      <woot-button
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="emoji"
-        emoji="😊"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="toggleEmojiPicker"
-      />
-      <file-upload
-        ref="upload"
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-        input-id="conversationAttachment"
-        :size="4096 * 4096"
-        :accept="allowedFileTypes"
-        :multiple="enableMultipleFileUpload"
-        :drop="enableDragAndDrop"
-        :drop-directory="false"
-        :data="{
-          direct_upload_url: '/rails/active_storage/direct_uploads',
-          direct_upload: true,
-        }"
-        @input-file="onFileUpload"
-      >
-        <woot-button
-          v-if="showAttachButton"
-          class-names="button--upload"
-          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="attach"
-          emoji="📎"
-          color-scheme="secondary"
-          variant="smooth"
-          size="small"
-        />
-      </file-upload>
-      <woot-button
-        v-if="showAudioRecorderButton"
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
-        :icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
-        emoji="🎤"
-        :color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
-        variant="smooth"
-        size="small"
-        @click="toggleAudioRecorder"
-      />
-      <woot-button
-        v-if="showEditorToggle"
-        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
-        icon="quote"
-        emoji="🖊️"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="$emit('toggle-editor')"
-      />
-      <woot-button
-        v-if="showAudioPlayStopButton"
-        :icon="audioRecorderPlayStopIcon"
-        emoji="🎤"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="toggleAudioRecorderPlayPause"
-      >
-        <span>{{ recordingAudioDurationText }}</span>
-      </woot-button>
-      <woot-button
-        v-if="showMessageSignatureButton"
-        v-tooltip.top-end="signatureToggleTooltip"
-        icon="signature"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="signatureToggleTooltip"
-        @click="toggleMessageSignature"
-      />
-      <woot-button
-        v-if="hasWhatsappTemplates"
-        v-tooltip.top-end="'Whatsapp Templates'"
-        icon="whatsapp"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="'Whatsapp Templates'"
-        @click="$emit('selectWhatsappTemplate')"
-      />
-      <video-call-button
-        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
-        :conversation-id="conversationId"
-      />
-      <AIAssistanceButton
-        :conversation-id="conversationId"
-        :is-private-note="isOnPrivateNote"
-        :message="message"
-        @replace-text="replaceText"
-      />
-      <transition name="modal-fade">
-        <div
-          v-show="$refs.upload && $refs.upload.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
-        >
-          <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
-            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
-          </h4>
-        </div>
-      </transition>
-      <woot-button
-        v-if="enableInsertArticleInReply"
-        v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        icon="document-text-link"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        :title="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        @click="toggleInsertArticle"
-      />
-    </div>
-    <div class="right-wrap">
-      <woot-button
-        size="small"
-        :class-names="buttonClass"
-        :is-disabled="isSendDisabled"
-        @click="onSend"
-      >
-        {{ sendButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import FileUpload from 'vue-upload-component';
@@ -171,6 +36,9 @@ export default {
       type: String,
       default: '',
     },
+    // inbox prop is used in /mixins/inboxMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
     inbox: {
       type: Object,
       default: () => ({}),
@@ -187,10 +55,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    showEmojiPicker: {
-      type: Boolean,
-      default: false,
-    },
     toggleEmojiPicker: {
       type: Function,
       default: () => {},
@@ -362,15 +226,150 @@ export default {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
     },
     replaceText(text) {
-      this.$emit('replace-text', text);
+      this.$emit('replaceText', text);
     },
     toggleInsertArticle() {
-      this.$emit('toggle-insert-article');
+      this.$emit('toggleInsertArticle');
     },
   },
 };
 </script>
 
+<template>
+  <div class="bottom-box" :class="wrapClass">
+    <div class="left-wrap">
+      <woot-button
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
+        :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
+        icon="emoji"
+        emoji="😊"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="toggleEmojiPicker"
+      />
+      <FileUpload
+        ref="upload"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+        input-id="conversationAttachment"
+        :size="4096 * 4096"
+        :accept="allowedFileTypes"
+        :multiple="enableMultipleFileUpload"
+        :drop="enableDragAndDrop"
+        :drop-directory="false"
+        :data="{
+          direct_upload_url: '/rails/active_storage/direct_uploads',
+          direct_upload: true,
+        }"
+        @input-file="onFileUpload"
+      >
+        <woot-button
+          v-if="showAttachButton"
+          class-names="button--upload"
+          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+          icon="attach"
+          emoji="📎"
+          color-scheme="secondary"
+          variant="smooth"
+          size="small"
+        />
+      </FileUpload>
+      <woot-button
+        v-if="showAudioRecorderButton"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
+        :icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
+        emoji="🎤"
+        :color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
+        variant="smooth"
+        size="small"
+        @click="toggleAudioRecorder"
+      />
+      <woot-button
+        v-if="showEditorToggle"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
+        icon="quote"
+        emoji="🖊️"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="$emit('toggleEditor')"
+      />
+      <woot-button
+        v-if="showAudioPlayStopButton"
+        :icon="audioRecorderPlayStopIcon"
+        emoji="🎤"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="toggleAudioRecorderPlayPause"
+      >
+        <span>{{ recordingAudioDurationText }}</span>
+      </woot-button>
+      <woot-button
+        v-if="showMessageSignatureButton"
+        v-tooltip.top-end="signatureToggleTooltip"
+        icon="signature"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="signatureToggleTooltip"
+        @click="toggleMessageSignature"
+      />
+      <woot-button
+        v-if="hasWhatsappTemplates"
+        v-tooltip.top-end="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
+        icon="whatsapp"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
+        @click="$emit('selectWhatsappTemplate')"
+      />
+      <VideoCallButton
+        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
+        :conversation-id="conversationId"
+      />
+      <AIAssistanceButton
+        :conversation-id="conversationId"
+        :is-private-note="isOnPrivateNote"
+        :message="message"
+        @replaceText="replaceText"
+      />
+      <transition name="modal-fade">
+        <div
+          v-show="$refs.upload && $refs.upload.dropActive"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+        >
+          <fluent-icon icon="cloud-backup" size="40" />
+          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
+            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+          </h4>
+        </div>
+      </transition>
+      <woot-button
+        v-if="enableInsertArticleInReply"
+        v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
+        icon="document-text-link"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
+        @click="toggleInsertArticle"
+      />
+    </div>
+    <div class="right-wrap">
+      <woot-button
+        size="small"
+        :class-names="buttonClass"
+        :is-disabled="isSendDisabled"
+        @click="onSend"
+      >
+        {{ sendButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .bottom-box {
   @apply flex justify-between py-3 px-4;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index d916116ac..2a636654f 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
-    <div class="button-group">
-      <woot-button
-        variant="clear"
-        class="button--reply"
-        :class="replyButtonClass"
-        @click="handleReplyClick"
-      >
-        {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
-      </woot-button>
-
-      <woot-button
-        class="button--note"
-        variant="clear"
-        color-scheme="warning"
-        :class="noteButtonClass"
-        @click="handleNoteClick"
-      >
-        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
-      </woot-button>
-    </div>
-    <div class="flex items-center mx-4 my-0">
-      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
-        <span :class="charLengthClass">
-          {{ characterLengthWarning }}
-        </span>
-      </div>
-    </div>
-    <woot-button
-      v-if="popoutReplyBox"
-      variant="clear"
-      icon="dismiss"
-      color-scheme="secondary"
-      class-names="popout-button"
-      @click="$emit('click')"
-    />
-    <woot-button
-      v-else
-      variant="clear"
-      icon="resize-large"
-      color-scheme="secondary"
-      class-names="popout-button"
-      @click="$emit('click')"
-    />
-  </div>
-</template>
-
 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -117,6 +69,54 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+    <div class="button-group">
+      <woot-button
+        variant="clear"
+        class="button--reply"
+        :class="replyButtonClass"
+        @click="handleReplyClick"
+      >
+        {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
+      </woot-button>
+
+      <woot-button
+        class="button--note"
+        variant="clear"
+        color-scheme="warning"
+        :class="noteButtonClass"
+        @click="handleNoteClick"
+      >
+        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
+      </woot-button>
+    </div>
+    <div class="flex items-center mx-4 my-0">
+      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
+        <span :class="charLengthClass">
+          {{ characterLengthWarning }}
+        </span>
+      </div>
+    </div>
+    <woot-button
+      v-if="popoutReplyBox"
+      variant="clear"
+      icon="dismiss"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
+    <woot-button
+      v-else
+      variant="clear"
+      icon="resize-large"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .button-group {
   @apply flex border-0 p-0 m-0;
diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
index e6d826d48..97461667a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -1,8 +1,3 @@
-<template>
-  <div
-    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
-  />
-</template>
 <script>
 export default {
   props: {
@@ -10,6 +5,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
+  />
+</template>
+
 <style lang="scss" scoped>
 .status-badge {
   &__online {
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
index c744eaa06..1600a9cff 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -1,15 +1,3 @@
-<template>
-  <mention-box
-    v-if="items.length"
-    :items="items"
-    @mention-select="handleMentionClick"
-  >
-    <template slot-scope="{ item }">
-      <strong>{{ item.label }}</strong> - {{ item.description }}
-    </template>
-  </mention-box>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import MentionBox from '../mentions/MentionBox.vue';
@@ -52,3 +40,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <MentionBox
+    v-if="items.length"
+    :items="items"
+    @mentionSelect="handleMentionClick"
+  >
+    <template slot-scope="{ item }">
+      <strong>{{ item.label }}</strong> - {{ item.description }}
+    </template>
+  </MentionBox>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 8b1cf6dd5..b0be89160 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -1,83 +1,3 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isFolderView">
-        <label class="input-label" :class="{ error: !activeFolderNewName }">
-          {{ $t('FILTER.FOLDER_LABEL') }}
-          <input
-            v-model="activeFolderNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeFolderNewName" class="message">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="mb-1">
-          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <filter-input-box
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :grouped-filters="true"
-          :error-message="validationErrors[`filter_${i}`]"
-          @resetFilter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isFolderView"
-            :disabled="!activeFolderNewName"
-            @click="updateSavedCustomViews"
-          >
-            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import FilterInputBox from '../FilterInput/Index.vue';
@@ -362,6 +282,87 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="filterModalHeaderTitle">
+      <p class="text-slate-600 dark:text-slate-200">
+        {{ filterModalSubTitle }}
+      </p>
+    </woot-modal-header>
+    <div class="p-8">
+      <div v-if="isFolderView">
+        <label class="input-label" :class="{ error: !activeFolderNewName }">
+          {{ $t('FILTER.FOLDER_LABEL') }}
+          <input
+            v-model="activeFolderNewName"
+            type="text"
+            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+          />
+          <span v-if="!activeFolderNewName" class="message">
+            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+          </span>
+        </label>
+        <label class="mb-1">
+          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
+        </label>
+      </div>
+      <div
+        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
+      >
+        <FilterInputBox
+          v-for="(filter, i) in appliedFilters"
+          :key="i"
+          v-model="appliedFilters[i]"
+          :filter-groups="filterGroups"
+          :input-type="
+            getInputType(
+              appliedFilters[i].attribute_key,
+              appliedFilters[i].filter_operator
+            )
+          "
+          :operators="getOperators(appliedFilters[i].attribute_key)"
+          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
+          :show-query-operator="i !== appliedFilters.length - 1"
+          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
+          grouped-filters
+          :error-message="validationErrors[`filter_${i}`]"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
+        />
+        <div class="mt-4">
+          <woot-button
+            icon="add"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-button class="button clear" @click.prevent="onClose">
+            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button
+            v-if="isFolderView"
+            :disabled="!activeFolderNewName"
+            @click="updateSavedCustomViews"
+          >
+            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button v-else @click="submitFilterQuery">
+            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .folder-input {
   @apply w-[50%];
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index 571415d48..9a822ccff 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -1,47 +1,3 @@
-<template>
-  <div class="relative flex">
-    <woot-button
-      v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
-      @click="toggleDropdown"
-    />
-    <div
-      v-if="showActionsDropdown"
-      v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
-    >
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
-          $t('CHAT_LIST.CHAT_SORT.STATUS')
-        }}</span>
-        <filter-item
-          type="status"
-          :selected-value="chatStatus"
-          :items="chatStatusItems"
-          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @onChangeFilter="onChangeFilter"
-        />
-      </div>
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
-          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
-        }}</span>
-        <filter-item
-          type="sort"
-          :selected-value="sortFilter"
-          :items="chatSortItems"
-          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @onChangeFilter="onChangeFilter"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
@@ -106,6 +62,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex">
+    <woot-button
+      v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
+      variant="smooth"
+      size="tiny"
+      color-scheme="secondary"
+      class="selector-button"
+      icon="sort-icon"
+      @click="toggleDropdown"
+    />
+    <div
+      v-if="showActionsDropdown"
+      v-on-clickaway="closeDropdown"
+      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+    >
+      <div class="flex items-center justify-between last:mt-4">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+          $t('CHAT_LIST.CHAT_SORT.STATUS')
+        }}</span>
+        <FilterItem
+          type="status"
+          :selected-value="chatStatus"
+          :items="chatStatusItems"
+          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
+          @onChangeFilter="onChangeFilter"
+        />
+      </div>
+      <div class="flex items-center justify-between last:mt-4">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
+        }}</span>
+        <FilterItem
+          type="sort"
+          :selected-value="sortFilter"
+          :items="chatSortItems"
+          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
+          @onChangeFilter="onChangeFilter"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .basic-filter {
   @apply w-52 p-4 top-6;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 2ad77452d..9f0b6d1d7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,67 +1,3 @@
-<template>
-  <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
-  >
-    <conversation-header
-      v-if="currentChat.id"
-      :chat="currentChat"
-      :is-inbox-view="isInboxView"
-      :is-contact-panel-open="isContactPanelOpen"
-      :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
-    <woot-tabs
-      v-if="dashboardApps.length && currentChat.id"
-      :index="activeIndex"
-      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
-      @change="onDashboardAppTabChange"
-    >
-      <woot-tabs-item
-        v-for="tab in dashboardAppTabs"
-        :key="tab.key"
-        :name="tab.name"
-        :show-badge="false"
-      />
-    </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
-    >
-      <messages-view
-        v-if="currentChat.id"
-        :inbox-id="inboxId"
-        :is-inbox-view="isInboxView"
-        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
-      />
-      <empty-state
-        v-if="!currentChat.id && !isInboxView"
-        :is-on-expanded-layout="isOnExpandedLayout"
-      />
-      <div
-        v-show="showContactPanel"
-        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
-      >
-        <contact-panel
-          v-if="showContactPanel"
-          :conversation-id="currentChat.id"
-          :inbox-id="currentChat.inbox_id"
-          :on-toggle="onToggleContactPanel"
-        />
-      </div>
-    </div>
-    <dashboard-app-frame
-      v-for="(dashboardApp, index) in dashboardApps"
-      v-show="activeIndex - 1 === index"
-      :key="currentChat.id + '-' + dashboardApp.id"
-      :is-visible="activeIndex - 1 === index"
-      :config="dashboardApps[index].content"
-      :position="index"
-      :current-chat="currentChat"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
@@ -145,7 +81,7 @@ export default {
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
@@ -153,6 +89,72 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    :class="{ 'with-border-right': !isOnExpandedLayout }"
+  >
+    <ConversationHeader
+      v-if="currentChat.id"
+      :chat="currentChat"
+      :is-inbox-view="isInboxView"
+      :is-contact-panel-open="isContactPanelOpen"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
+      @contactPanelToggle="onToggleContactPanel"
+    />
+    <woot-tabs
+      v-if="dashboardApps.length && currentChat.id"
+      :index="activeIndex"
+      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      @change="onDashboardAppTabChange"
+    >
+      <woot-tabs-item
+        v-for="tab in dashboardAppTabs"
+        :key="tab.key"
+        :name="tab.name"
+        :show-badge="false"
+      />
+    </woot-tabs>
+    <div
+      v-show="!activeIndex"
+      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
+    >
+      <MessagesView
+        v-if="currentChat.id"
+        :inbox-id="inboxId"
+        :is-inbox-view="isInboxView"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contactPanelToggle="onToggleContactPanel"
+      />
+      <EmptyState
+        v-if="!currentChat.id && !isInboxView"
+        :is-on-expanded-layout="isOnExpandedLayout"
+      />
+      <div
+        v-show="showContactPanel"
+        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
+      >
+        <ContactPanel
+          v-if="showContactPanel"
+          :conversation-id="currentChat.id"
+          :inbox-id="currentChat.inbox_id"
+          :on-toggle="onToggleContactPanel"
+        />
+      </div>
+    </div>
+    <DashboardAppFrame
+      v-for="(dashboardApp, index) in dashboardApps"
+      v-show="activeIndex - 1 === index"
+      :key="currentChat.id + '-' + dashboardApp.id"
+      :is-visible="activeIndex - 1 === index"
+      :config="dashboardApps[index].content"
+      :position="index"
+      :current-chat="currentChat"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index bb185cc0d..27994fc17 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -1,120 +1,3 @@
-<template>
-  <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
-    :class="{
-      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
-        isActiveChat,
-      'unread-chat': hasUnread,
-      'has-inbox-name': showInboxName,
-      'conversation-selected': selected,
-    }"
-    @mouseenter="onCardHover"
-    @mouseleave="onCardLeave"
-    @click="onCardClick"
-    @contextmenu="openContextMenu($event)"
-  >
-    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
-      <input
-        :value="selected"
-        :checked="selected"
-        class="checkbox"
-        type="checkbox"
-        @change="onSelectConversation($event.target.checked)"
-      />
-    </label>
-    <thumbnail
-      v-if="bulkActionCheck"
-      :src="currentContact.thumbnail"
-      :badge="inboxBadge"
-      :username="currentContact.name"
-      :status="currentContact.availability_status"
-      size="40px"
-    />
-    <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
-    >
-      <div class="flex justify-between">
-        <inbox-name v-if="showInboxName" :inbox="inbox" />
-        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
-          <span
-            v-if="showAssignee && assignee.name"
-            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
-          >
-            <fluent-icon
-              icon="person"
-              size="12"
-              class="text-slate-500 dark:text-slate-400"
-            />
-            {{ assignee.name }}
-          </span>
-          <priority-mark :priority="chat.priority" />
-        </div>
-      </div>
-      <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
-      >
-        {{ currentContact.name }}
-      </h4>
-      <message-preview
-        v-if="lastMessageInChat"
-        :message="lastMessageInChat"
-        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
-      />
-      <p
-        v-else
-        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
-      >
-        <fluent-icon
-          size="16"
-          class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-          icon="info"
-        />
-        <span>
-          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
-        </span>
-      </p>
-      <div class="absolute flex flex-col conversation--meta right-4 top-4">
-        <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
-          <time-ago
-            :last-activity-timestamp="chat.timestamp"
-            :created-at-timestamp="chat.created_at"
-          />
-        </span>
-        <span
-          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
-        >
-          {{ unreadCount > 9 ? '9+' : unreadCount }}
-        </span>
-      </div>
-      <card-labels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
-        <template v-if="hasSlaPolicyId" #before>
-          <SLA-card-label :chat="chat" class="ltr:mr-1 rtl:ml-1" />
-        </template>
-      </card-labels>
-    </div>
-    <woot-context-menu
-      v-if="showContextMenu"
-      ref="menu"
-      :x="contextMenu.x"
-      :y="contextMenu.y"
-      @close="closeContextMenu"
-    >
-      <conversation-context-menu
-        :status="chat.status"
-        :inbox-id="inbox.id"
-        :priority="chat.priority"
-        :chat-id="chat.id"
-        :has-unread-messages="hasUnread"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @assign-priority="assignPriority"
-      />
-    </woot-context-menu>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../Thumbnail.vue';
@@ -199,7 +82,6 @@ export default {
       currentChat: 'getSelectedChat',
       inboxesList: 'inboxes/getInboxes',
       activeInbox: 'getSelectedInbox',
-      currentUser: 'getCurrentUser',
       accountId: 'getCurrentAccountId',
     }),
     bulkActionCheck() {
@@ -296,19 +178,19 @@ export default {
       this.hovered = false;
     },
     onSelectConversation(checked) {
-      const action = checked ? 'select-conversation' : 'de-select-conversation';
+      const action = checked ? 'selectConversation' : 'deSelectConversation';
       this.$emit(action, this.chat.id, this.inbox.id);
     },
     openContextMenu(e) {
       if (!this.enableContextMenu) return;
       e.preventDefault();
-      this.$emit('context-menu-toggle', true);
+      this.$emit('contextMenuToggle', true);
       this.contextMenu.x = e.pageX || e.clientX;
       this.contextMenu.y = e.pageY || e.clientY;
       this.showContextMenu = true;
     },
     closeContextMenu() {
-      this.$emit('context-menu-toggle', false);
+      this.$emit('contextMenuToggle', false);
       this.showContextMenu = false;
       this.contextMenu.x = null;
       this.contextMenu.y = null;
@@ -316,35 +198,153 @@ export default {
     onUpdateConversation(status, snoozedUntil) {
       this.closeContextMenu();
       this.$emit(
-        'update-conversation-status',
+        'updateConversationStatus',
         this.chat.id,
         status,
         snoozedUntil
       );
     },
     async onAssignAgent(agent) {
-      this.$emit('assign-agent', agent, [this.chat.id]);
+      this.$emit('assignAgent', agent, [this.chat.id]);
       this.closeContextMenu();
     },
     async onAssignLabel(label) {
-      this.$emit('assign-label', [label.title], [this.chat.id]);
+      this.$emit('assignLabel', [label.title], [this.chat.id]);
       this.closeContextMenu();
     },
     async onAssignTeam(team) {
-      this.$emit('assign-team', team, this.chat.id);
+      this.$emit('assignTeam', team, this.chat.id);
       this.closeContextMenu();
     },
     async markAsUnread() {
-      this.$emit('mark-as-unread', this.chat.id);
+      this.$emit('markAsUnread', this.chat.id);
       this.closeContextMenu();
     },
     async assignPriority(priority) {
-      this.$emit('assign-priority', priority, this.chat.id);
+      this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
+    :class="{
+      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+        isActiveChat,
+      'unread-chat': hasUnread,
+      'has-inbox-name': showInboxName,
+      'conversation-selected': selected,
+    }"
+    @mouseenter="onCardHover"
+    @mouseleave="onCardLeave"
+    @click="onCardClick"
+    @contextmenu="openContextMenu($event)"
+  >
+    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
+      <input
+        :value="selected"
+        :checked="selected"
+        class="checkbox"
+        type="checkbox"
+        @change="onSelectConversation($event.target.checked)"
+      />
+    </label>
+    <Thumbnail
+      v-if="bulkActionCheck"
+      :src="currentContact.thumbnail"
+      :badge="inboxBadge"
+      :username="currentContact.name"
+      :status="currentContact.availability_status"
+      size="40px"
+    />
+    <div
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
+    >
+      <div class="flex justify-between">
+        <InboxName v-if="showInboxName" :inbox="inbox" />
+        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
+          <span
+            v-if="showAssignee && assignee.name"
+            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
+          >
+            <fluent-icon
+              icon="person"
+              size="12"
+              class="text-slate-500 dark:text-slate-400"
+            />
+            {{ assignee.name }}
+          </span>
+          <PriorityMark :priority="chat.priority" />
+        </div>
+      </div>
+      <h4
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
+      >
+        {{ currentContact.name }}
+      </h4>
+      <MessagePreview
+        v-if="lastMessageInChat"
+        :message="lastMessageInChat"
+        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
+      />
+      <p
+        v-else
+        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+      >
+        <fluent-icon
+          size="16"
+          class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+          icon="info"
+        />
+        <span>
+          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+        </span>
+      </p>
+      <div class="absolute flex flex-col conversation--meta right-4 top-4">
+        <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
+          <TimeAgo
+            :last-activity-timestamp="chat.timestamp"
+            :created-at-timestamp="chat.created_at"
+          />
+        </span>
+        <span
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
+        >
+          {{ unreadCount > 9 ? '9+' : unreadCount }}
+        </span>
+      </div>
+      <CardLabels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
+        <template v-if="hasSlaPolicyId" #before>
+          <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
+        </template>
+      </CardLabels>
+    </div>
+    <woot-context-menu
+      v-if="showContextMenu"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      @close="closeContextMenu"
+    >
+      <ConversationContextMenu
+        :status="chat.status"
+        :inbox-id="inbox.id"
+        :priority="chat.priority"
+        :chat-id="chat.id"
+        :has-unread-messages="hasUnread"
+        @updateConversation="onUpdateConversation"
+        @assignAgent="onAssignAgent"
+        @assignLabel="onAssignLabel"
+        @assignTeam="onAssignTeam"
+        @markAsUnread="markAsUnread"
+        @assignPriority="assignPriority"
+      />
+    </woot-context-menu>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .conversation {
   &.unread-chat {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 64ae36824..11d019314 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,85 +1,3 @@
-<template>
-  <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
-  >
-    <div
-      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
-      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
-    >
-      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        <back-button
-          v-if="showBackButton"
-          :back-url="backButtonUrl"
-          class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
-        />
-        <Thumbnail
-          :src="currentContact.thumbnail"
-          :badge="inboxBadge"
-          :username="currentContact.name"
-          :status="currentContact.availability_status"
-        />
-        <div
-          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
-        >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
-          >
-            <woot-button
-              variant="link"
-              color-scheme="secondary"
-              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
-              @click.prevent="$emit('contact-panel-toggle')"
-            >
-              <span
-                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
-              >
-                {{ currentContact.name }}
-              </span>
-            </woot-button>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
-              icon="warning"
-            />
-          </div>
-
-          <div
-            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
-          >
-            <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span
-              v-if="isSnoozed"
-              class="font-medium text-yellow-600 dark:text-yellow-500"
-            >
-              {{ snoozedDisplayText }}
-            </span>
-            <woot-button
-              class="p-0"
-              size="small"
-              variant="link"
-              @click="$emit('contact-panel-toggle')"
-            >
-              {{ contactPanelToggleText }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
-        :class="{ 'justify-end': isContactPanelOpen }"
-      >
-        <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <linear
-          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-          :conversation-id="currentChat.id"
-        />
-        <more-actions :conversation-id="currentChat.id" />
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import agentMixin from '../../../mixins/agentMixin.js';
@@ -126,7 +44,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
@@ -205,7 +122,7 @@ export default {
     getKeyboardEvents() {
       return {
         'Alt+KeyO': {
-          action: () => this.$emit('contact-panel-toggle'),
+          action: () => this.$emit('contactPanelToggle'),
         },
       };
     },
@@ -213,6 +130,89 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+  >
+    <div
+      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
+      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
+    >
+      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
+        <BackButton
+          v-if="showBackButton"
+          :back-url="backButtonUrl"
+          class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
+        />
+        <Thumbnail
+          :src="currentContact.thumbnail"
+          :badge="inboxBadge"
+          :username="currentContact.name"
+          :status="currentContact.availability_status"
+        />
+        <div
+          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
+        >
+          <div
+            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
+          >
+            <woot-button
+              variant="link"
+              color-scheme="secondary"
+              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
+              @click.prevent="$emit('contactPanelToggle')"
+            >
+              <span
+                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
+              >
+                {{ currentContact.name }}
+              </span>
+            </woot-button>
+            <fluent-icon
+              v-if="!isHMACVerified"
+              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+              size="14"
+              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
+              icon="warning"
+            />
+          </div>
+
+          <div
+            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+          >
+            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
+            <span
+              v-if="isSnoozed"
+              class="font-medium text-yellow-600 dark:text-yellow-500"
+            >
+              {{ snoozedDisplayText }}
+            </span>
+            <woot-button
+              class="p-0"
+              size="small"
+              variant="link"
+              @click="$emit('contactPanelToggle')"
+            >
+              {{ contactPanelToggleText }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
+        :class="{ 'justify-end': isContactPanelOpen }"
+      >
+        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
+        <Linear
+          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+          :conversation-id="currentChat.id"
+        />
+        <MoreActions :conversation-id="currentChat.id" />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .conversation--header--actions {
   ::v-deep .inbox--name {
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
index 744972d03..3d1741fc9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -1,80 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
-        :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
-      />
-      <form class="w-full" @submit.prevent="onSubmit">
-        <div class="w-full">
-          <div
-            v-if="currentChat.meta.sender && currentChat.meta.sender.email"
-            class="flex items-center gap-2"
-          >
-            <input
-              id="contact"
-              v-model="selectedType"
-              type="radio"
-              name="selectedType"
-              value="contact"
-            />
-            <label for="contact">{{
-              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
-            }}</label>
-          </div>
-          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
-            <input
-              id="assignee"
-              v-model="selectedType"
-              type="radio"
-              name="selectedType"
-              value="assignee"
-            />
-            <label for="assignee">{{
-              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
-            }}</label>
-          </div>
-          <div class="flex items-center gap-2">
-            <input
-              id="other_email_address"
-              v-model="selectedType"
-              type="radio"
-              name="selectedType"
-              value="other_email_address"
-            />
-            <label for="other_email_address">{{
-              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
-            }}</label>
-          </div>
-          <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
-            <label :class="{ error: v$.email.$error }">
-              <input
-                v-model.trim="email"
-                type="text"
-                :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
-                @input="v$.email.$touch"
-              />
-              <span v-if="v$.email.$error" class="message">
-                {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
-              </span>
-            </label>
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
-            :disabled="!isFormValid"
-          />
-          <button class="button clear" @click.prevent="onCancel">
-            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
@@ -156,3 +79,80 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
+        :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
+      />
+      <form class="w-full" @submit.prevent="onSubmit">
+        <div class="w-full">
+          <div
+            v-if="currentChat.meta.sender && currentChat.meta.sender.email"
+            class="flex items-center gap-2"
+          >
+            <input
+              id="contact"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="contact"
+            />
+            <label for="contact">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
+            }}</label>
+          </div>
+          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
+            <input
+              id="assignee"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="assignee"
+            />
+            <label for="assignee">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
+            }}</label>
+          </div>
+          <div class="flex items-center gap-2">
+            <input
+              id="other_email_address"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="other_email_address"
+            />
+            <label for="other_email_address">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
+            }}</label>
+          </div>
+          <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
+            <label :class="{ error: v$.email.$error }">
+              <input
+                v-model.trim="email"
+                type="text"
+                :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
+                @input="v$.email.$touch"
+              />
+              <span v-if="v$.email.$error" class="message">
+                {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-submit-button
+            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+            :disabled="!isFormValid"
+          />
+          <button class="button clear" @click.prevent="onCancel">
+            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
index 7248b85a8..e3de9eb3f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
@@ -1,38 +1,3 @@
-<template>
-  <div :class="emptyClassName">
-    <woot-loading-state
-      v-if="uiFlags.isFetching || loadingChatList"
-      :message="loadingIndicatorMessage"
-    />
-    <!-- No inboxes attached -->
-    <div
-      v-if="!inboxesList.length && !uiFlags.isFetching && !loadingChatList"
-      class="clearfix"
-    >
-      <onboarding-view v-if="isAdmin" />
-      <empty-state-message
-        v-else
-        :message="$t('CONVERSATION.NO_INBOX_AGENT')"
-      />
-    </div>
-    <!-- Show empty state images if not loading -->
-
-    <div
-      v-else-if="!uiFlags.isFetching && !loadingChatList"
-      class="flex flex-col items-center justify-center h-full"
-    >
-      <!-- No conversations available -->
-      <empty-state-message
-        v-if="!allConversations.length"
-        :message="$t('CONVERSATION.NO_MESSAGE_1')"
-      />
-      <empty-state-message
-        v-else-if="allConversations.length && !currentChat.id"
-        :message="conversationMissingMessage"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -95,3 +60,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div :class="emptyClassName">
+    <woot-loading-state
+      v-if="uiFlags.isFetching || loadingChatList"
+      :message="loadingIndicatorMessage"
+    />
+    <!-- No inboxes attached -->
+    <div
+      v-if="!inboxesList.length && !uiFlags.isFetching && !loadingChatList"
+      class="clearfix"
+    >
+      <OnboardingView v-if="isAdmin" />
+      <EmptyStateMessage v-else :message="$t('CONVERSATION.NO_INBOX_AGENT')" />
+    </div>
+    <!-- Show empty state images if not loading -->
+
+    <div
+      v-else-if="!uiFlags.isFetching && !loadingChatList"
+      class="flex flex-col items-center justify-center h-full"
+    >
+      <!-- No conversations available -->
+      <EmptyStateMessage
+        v-if="!allConversations.length"
+        :message="$t('CONVERSATION.NO_MESSAGE_1')"
+      />
+      <EmptyStateMessage
+        v-else-if="allConversations.length && !currentChat.id"
+        :message="conversationMissingMessage"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
index 209cd3440..40c7dd557 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
@@ -1,3 +1,16 @@
+<script>
+import FeaturePlaceholder from './FeaturePlaceholder.vue';
+export default {
+  components: { FeaturePlaceholder },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col items-center justify-center h-full">
     <img
@@ -17,19 +30,6 @@
       <br />
     </span>
     <!-- Cmd bar, keyboard shortcuts placeholder -->
-    <feature-placeholder />
+    <FeaturePlaceholder />
   </div>
 </template>
-
-<script>
-import FeaturePlaceholder from './FeaturePlaceholder.vue';
-export default {
-  components: { FeaturePlaceholder },
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
index 127e42c61..6cd447fab 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="flex flex-col gap-2 mt-9">
-    <div
-      v-for="keyShortcut in keyShortcuts"
-      :key="keyShortcut.key"
-      class="flex gap-2 items-center"
-    >
-      <div class="flex gap-2 items-center">
-        <hotkey
-          custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
-        >
-          ⌘
-        </hotkey>
-        <hotkey
-          custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
-        >
-          {{ keyShortcut.key }}
-        </hotkey>
-      </div>
-      <span
-        class="text-sm text-slate-700 dark:text-slate-300 font-medium text-center"
-      >
-        {{ keyShortcut.description }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
@@ -49,3 +21,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col gap-2 mt-9">
+    <div
+      v-for="keyShortcut in keyShortcuts"
+      :key="keyShortcut.key"
+      class="flex items-center gap-2"
+    >
+      <div class="flex items-center gap-2">
+        <Hotkey
+          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-7000 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+        >
+          ⌘
+        </Hotkey>
+        <Hotkey
+          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+        >
+          {{ keyShortcut.key }}
+        </Hotkey>
+      </div>
+      <span
+        class="text-sm font-medium text-center text-slate-700 dark:text-slate-300"
+      >
+        {{ keyShortcut.description }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index c324b823a..05d6fe4db 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -1,14 +1,3 @@
-<template>
-  <select
-    v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
-    @change="onTabChange()"
-  >
-    <option v-for="(value, status) in items" :key="status" :value="status">
-      {{ $t(`${pathPrefix}.${status}.TEXT`) }}
-    </option>
-  </select>
-</template>
 <script>
 export default {
   props: {
@@ -46,3 +35,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <select
+    v-model="activeValue"
+    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    @change="onTabChange()"
+  >
+    <option v-for="(value, status) in items" :key="status" :value="status">
+      {{ $t(`${pathPrefix}.${status}.TEXT`) }}
+    </option>
+  </select>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index b7b578cee..7ab868e93 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -1,147 +1,3 @@
-<template>
-  <li
-    v-if="shouldRenderMessage"
-    :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
-  >
-    <div :class="wrapClass">
-      <div
-        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
-        class="message-failed--alert"
-      >
-        <woot-button
-          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          size="tiny"
-          color-scheme="alert"
-          variant="clear"
-          icon="arrow-clockwise"
-          @click="retrySendMessage"
-        />
-      </div>
-      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
-        <bubble-mail-head
-          :email-attributes="contentAttributes.email"
-          :cc="emailHeadAttributes.cc"
-          :bcc="emailHeadAttributes.bcc"
-          :is-incoming="isIncoming"
-        />
-        <instagram-story-reply v-if="storyUrl" :story-url="storyUrl" />
-        <bubble-reply-to
-          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
-          :message="inReplyTo"
-          :message-type="data.message_type"
-          :parent-has-attachments="hasAttachments"
-        />
-        <div v-if="isUnsupported">
-          <template v-if="isAFacebookInbox && isInstagram">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
-          </template>
-          <template v-else-if="isAFacebookInbox">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
-          </template>
-          <template v-else>
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
-          </template>
-        </div>
-        <bubble-text
-          v-else-if="data.content"
-          :message="message"
-          :is-email="isEmailContentType"
-          :display-quoted-button="displayQuotedButton"
-        />
-        <bubble-integration
-          :message-id="data.id"
-          :content-attributes="contentAttributes"
-          :inbox-id="data.inbox_id"
-        />
-        <span
-          v-if="isPending && hasAttachments"
-          class="chat-bubble has-attachment agent"
-        >
-          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
-        </span>
-        <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in attachments" :key="attachment.id">
-            <instagram-story
-              v-if="isAnInstagramStory"
-              :story-url="attachment.data_url"
-              @error="onMediaLoadError"
-            />
-            <bubble-image-audio-video
-              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
-              :attachment="attachment"
-              @error="onMediaLoadError"
-            />
-            <bubble-location
-              v-else-if="attachment.file_type === 'location'"
-              :latitude="attachment.coordinates_lat"
-              :longitude="attachment.coordinates_long"
-              :name="attachment.fallback_title"
-            />
-            <bubble-contact
-              v-else-if="attachment.file_type === 'contact'"
-              :name="data.content"
-              :phone-number="attachment.fallback_title"
-            />
-            <bubble-file v-else :url="attachment.data_url" />
-          </div>
-        </div>
-        <bubble-actions
-          :id="data.id"
-          :sender="data.sender"
-          :story-sender="storySender"
-          :external-error="errorMessageTooltip"
-          :story-id="`${storyId}`"
-          :is-a-tweet="isATweet"
-          :is-a-whatsapp-channel="isAWhatsAppChannel"
-          :is-email="isEmailContentType"
-          :is-private="data.private"
-          :message-type="data.message_type"
-          :message-status="status"
-          :source-id="data.source_id"
-          :inbox-id="data.inbox_id"
-          :created-at="createdAt"
-        />
-      </div>
-      <spinner v-if="isPending" size="tiny" />
-      <div
-        v-if="showAvatar"
-        v-tooltip.left="tooltipForSender"
-        class="sender--info"
-      >
-        <woot-thumbnail
-          :src="sender.thumbnail"
-          :username="senderNameForAvatar"
-          size="16px"
-        />
-        <a
-          v-if="isATweet && isIncoming"
-          class="sender--available-name"
-          :href="twitterProfileLink"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {{ sender.name }}
-        </a>
-      </div>
-    </div>
-    <div
-      v-if="shouldShowContextMenu"
-      class="invisible context-menu-wrap group-hover:visible"
-    >
-      <context-menu
-        v-if="isBubble && !isMessageDeleted"
-        :context-menu-position="contextMenuPosition"
-        :is-open="showContextMenu"
-        :enabled-options="contextMenuEnabledOptions"
-        :message="data"
-        @open="openContextMenu"
-        @close="closeContextMenu"
-        @replyTo="handleReplyTo"
-      />
-    </div>
-  </li>
-</template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import BubbleActions from './bubble/Actions.vue';
@@ -205,10 +61,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isWebWidgetInbox: {
-      type: Boolean,
-      default: false,
-    },
     isAnEmailInbox: {
       type: Boolean,
       default: false,
@@ -582,6 +434,153 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li
+    v-if="shouldRenderMessage"
+    :id="`message${data.id}`"
+    class="group"
+    :class="[alignBubble]"
+  >
+    <div :class="wrapClass">
+      <div
+        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
+        class="message-failed--alert"
+      >
+        <woot-button
+          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
+          size="tiny"
+          color-scheme="alert"
+          variant="clear"
+          icon="arrow-clockwise"
+          @click="retrySendMessage"
+        />
+      </div>
+      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
+        <BubbleMailHead
+          :email-attributes="contentAttributes.email"
+          :cc="emailHeadAttributes.cc"
+          :bcc="emailHeadAttributes.bcc"
+          :is-incoming="isIncoming"
+        />
+        <InstagramStoryReply v-if="storyUrl" :story-url="storyUrl" />
+        <BubbleReplyTo
+          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
+          :message="inReplyTo"
+          :message-type="data.message_type"
+          :parent-has-attachments="hasAttachments"
+        />
+        <div v-if="isUnsupported">
+          <template v-if="isAFacebookInbox && isInstagram">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
+          </template>
+          <template v-else-if="isAFacebookInbox">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
+          </template>
+          <template v-else>
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+          </template>
+        </div>
+        <BubbleText
+          v-else-if="data.content"
+          :message="message"
+          :is-email="isEmailContentType"
+          :display-quoted-button="displayQuotedButton"
+        />
+        <BubbleIntegration
+          :message-id="data.id"
+          :content-attributes="contentAttributes"
+          :inbox-id="data.inbox_id"
+        />
+        <span
+          v-if="isPending && hasAttachments"
+          class="chat-bubble has-attachment agent"
+        >
+          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
+        </span>
+        <div v-if="!isPending && hasAttachments">
+          <div v-for="attachment in attachments" :key="attachment.id">
+            <InstagramStory
+              v-if="isAnInstagramStory"
+              :story-url="attachment.data_url"
+              @error="onMediaLoadError"
+            />
+            <BubbleImageAudioVideo
+              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
+              :attachment="attachment"
+              @error="onMediaLoadError"
+            />
+            <BubbleLocation
+              v-else-if="attachment.file_type === 'location'"
+              :latitude="attachment.coordinates_lat"
+              :longitude="attachment.coordinates_long"
+              :name="attachment.fallback_title"
+            />
+            <BubbleContact
+              v-else-if="attachment.file_type === 'contact'"
+              :name="data.content"
+              :phone-number="attachment.fallback_title"
+            />
+            <BubbleFile v-else :url="attachment.data_url" />
+          </div>
+        </div>
+        <BubbleActions
+          :id="data.id"
+          :sender="data.sender"
+          :story-sender="storySender"
+          :external-error="errorMessageTooltip"
+          :story-id="`${storyId}`"
+          :is-a-tweet="isATweet"
+          :is-a-whatsapp-channel="isAWhatsAppChannel"
+          :is-email="isEmailContentType"
+          :is-private="data.private"
+          :message-type="data.message_type"
+          :message-status="status"
+          :source-id="data.source_id"
+          :inbox-id="data.inbox_id"
+          :created-at="createdAt"
+        />
+      </div>
+      <Spinner v-if="isPending" size="tiny" />
+      <div
+        v-if="showAvatar"
+        v-tooltip.left="tooltipForSender"
+        class="sender--info"
+      >
+        <woot-thumbnail
+          :src="sender.thumbnail"
+          :username="senderNameForAvatar"
+          size="16px"
+        />
+        <a
+          v-if="isATweet && isIncoming"
+          class="sender--available-name"
+          :href="twitterProfileLink"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          {{ sender.name }}
+        </a>
+      </div>
+    </div>
+    <div
+      v-if="shouldShowContextMenu"
+      class="invisible context-menu-wrap group-hover:visible"
+    >
+      <ContextMenu
+        v-if="isBubble && !isMessageDeleted"
+        :context-menu-position="contextMenuPosition"
+        :is-open="showContextMenu"
+        :enabled-options="contextMenuEnabledOptions"
+        :message="data"
+        @open="openContextMenu"
+        @close="closeContextMenu"
+        @replyTo="handleReplyTo"
+      />
+    </div>
+  </li>
+</template>
+
 <style lang="scss">
 .wrap {
   > .bubble {
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
index 22d69439e..af1c3e06d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-    <template v-if="showMessageType">
-      <fluent-icon
-        v-if="isMessagePrivate"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="lock-closed"
-      />
-      <fluent-icon
-        v-else-if="messageByAgent"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="arrow-reply"
-      />
-      <fluent-icon
-        v-else-if="isMessageAnActivity"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="info"
-      />
-    </template>
-    <span v-if="message.content && isMessageSticker">
-      <fluent-icon
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        icon="image"
-      />
-      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
-    </span>
-    <span v-else-if="message.content">
-      {{ parsedLastMessage }}
-    </span>
-    <span v-else-if="message.attachments">
-      <fluent-icon
-        v-if="attachmentIcon && showMessageType"
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        :icon="attachmentIcon"
-      />
-      {{ $t(`${attachmentMessageContent}`) }}
-    </span>
-    <span v-else>
-      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -102,3 +54,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+    <template v-if="showMessageType">
+      <fluent-icon
+        v-if="isMessagePrivate"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="lock-closed"
+      />
+      <fluent-icon
+        v-else-if="messageByAgent"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="arrow-reply"
+      />
+      <fluent-icon
+        v-else-if="isMessageAnActivity"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="info"
+      />
+    </template>
+    <span v-if="message.content && isMessageSticker">
+      <fluent-icon
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        icon="image"
+      />
+      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+    </span>
+    <span v-else-if="message.content">
+      {{ parsedLastMessage }}
+    </span>
+    <span v-else-if="message.attachments">
+      <fluent-icon
+        v-if="attachmentIcon && showMessageType"
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        :icon="attachmentIcon"
+      />
+      {{ $t(`${attachmentMessageContent}`) }}
+    </span>
+    <span v-else>
+      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
index 81e4531af..15793f4c8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    openProfileSettings() {
+      return this.$router.push({ name: 'profile_settings_index' });
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto"
@@ -14,15 +24,3 @@
     </p>
   </div>
 </template>
-
-<script>
-export default {
-  methods: {
-    openProfileSettings() {
-      return this.$router.push({ name: 'profile_settings_index' });
-    },
-  },
-};
-</script>
-
-<style></style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index df61e9de1..b157bbd3a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -1,105 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
-    <banner
-      v-if="!currentChat.can_reply"
-      color-scheme="alert"
-      :banner-message="replyWindowBannerMessage"
-      :href-link="replyWindowLink"
-      :href-link-text="replyWindowLinkText"
-    />
-    <div class="flex justify-end">
-      <woot-button
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
-        :class="
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
-        :icon="isRightOrLeftIcon"
-        @click="onToggleContactPanel"
-      />
-    </div>
-    <ul class="conversation-panel">
-      <transition name="slide-up">
-        <li class="min-h-[4rem]">
-          <span v-if="shouldShowSpinner" class="spinner message" />
-        </li>
-      </transition>
-      <message
-        v-for="message in getReadMessages"
-        :key="message.id"
-        class="message--read ph-no-capture"
-        data-clarity-mask="True"
-        :data="message"
-        :is-a-tweet="isATweet"
-        :is-a-whatsapp-channel="isAWhatsAppChannel"
-        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-an-email-inbox="isAnEmailChannel"
-        :is-instagram="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
-      />
-      <li v-show="unreadMessageCount != 0" class="unread--toast">
-        <span>
-          {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
-          {{
-            unreadMessageCount > 1
-              ? $t('CONVERSATION.UNREAD_MESSAGES')
-              : $t('CONVERSATION.UNREAD_MESSAGE')
-          }}
-        </span>
-      </li>
-      <message
-        v-for="message in getUnReadMessages"
-        :key="message.id"
-        class="message--unread ph-no-capture"
-        data-clarity-mask="True"
-        :data="message"
-        :is-a-tweet="isATweet"
-        :is-a-whatsapp-channel="isAWhatsAppChannel"
-        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-instagram-dm="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
-      />
-      <conversation-label-suggestion
-        v-if="shouldShowLabelSuggestions"
-        :suggested-labels="labelSuggestions"
-        :chat-labels="currentChat.labels"
-        :conversation-id="currentChat.id"
-      />
-    </ul>
-    <div
-      class="conversation-footer"
-      :class="{ 'modal-mask': isPopoutReplyBox }"
-    >
-      <div
-        v-if="isAnyoneTyping"
-        class="items-center flex h-0 absolute w-full -top-7"
-      >
-        <div
-          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
-        >
-          {{ typingUserNames }}
-          <img
-            class="ltr:ml-2 rtl:mr-2 w-6"
-            src="~dashboard/assets/images/typing.gif"
-            alt="Someone is typing"
-          />
-        </div>
-      </div>
-      <reply-box
-        :conversation-id="currentChat.id"
-        :popout-reply-box.sync="isPopoutReplyBox"
-        @click="showPopoutReplyBox"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 // components
 import ReplyBox from './ReplyBox.vue';
@@ -170,14 +68,8 @@ export default {
 
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       currentChat: 'getSelectedChat',
-      allConversations: 'getAllConversations',
-      inboxesList: 'inboxes/getInboxes',
       listLoadingStatus: 'getAllMessagesLoaded',
-      loadingChatList: 'getChatListLoadingStatus',
-      appIntegrations: 'integrations/getAppIntegrations',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       currentAccountId: 'getCurrentAccountId',
     }),
     isOpen() {
@@ -468,7 +360,7 @@ export default {
       );
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
@@ -538,6 +430,108 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
+    <Banner
+      v-if="!currentChat.can_reply"
+      color-scheme="alert"
+      :banner-message="replyWindowBannerMessage"
+      :href-link="replyWindowLink"
+      :href-link-text="replyWindowLinkText"
+    />
+    <div class="flex justify-end">
+      <woot-button
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
+        :class="
+          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
+        "
+        :icon="isRightOrLeftIcon"
+        @click="onToggleContactPanel"
+      />
+    </div>
+    <ul class="conversation-panel">
+      <transition name="slide-up">
+        <li class="min-h-[4rem]">
+          <span v-if="shouldShowSpinner" class="spinner message" />
+        </li>
+      </transition>
+      <Message
+        v-for="message in getReadMessages"
+        :key="message.id"
+        class="message--read ph-no-capture"
+        data-clarity-mask="True"
+        :data="message"
+        :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-an-email-inbox="isAnEmailChannel"
+        :is-instagram="isInstagramDM"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :in-reply-to="getInReplyToMessage(message)"
+      />
+      <li v-show="unreadMessageCount != 0" class="unread--toast">
+        <span>
+          {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
+          {{
+            unreadMessageCount > 1
+              ? $t('CONVERSATION.UNREAD_MESSAGES')
+              : $t('CONVERSATION.UNREAD_MESSAGE')
+          }}
+        </span>
+      </li>
+      <Message
+        v-for="message in getUnReadMessages"
+        :key="message.id"
+        class="message--unread ph-no-capture"
+        data-clarity-mask="True"
+        :data="message"
+        :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-instagram-dm="isInstagramDM"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :in-reply-to="getInReplyToMessage(message)"
+      />
+      <ConversationLabelSuggestion
+        v-if="shouldShowLabelSuggestions"
+        :suggested-labels="labelSuggestions"
+        :chat-labels="currentChat.labels"
+        :conversation-id="currentChat.id"
+      />
+    </ul>
+    <div
+      class="conversation-footer"
+      :class="{ 'modal-mask': isPopoutReplyBox }"
+    >
+      <div
+        v-if="isAnyoneTyping"
+        class="absolute flex items-center w-full h-0 -top-7"
+      >
+        <div
+          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
+        >
+          {{ typingUserNames }}
+          <img
+            class="w-6 ltr:ml-2 rtl:mr-2"
+            src="~dashboard/assets/images/typing.gif"
+            alt="Someone is typing"
+          />
+        </div>
+      </div>
+      <ReplyBox
+        :conversation-id="currentChat.id"
+        :popout-reply-box.sync="isPopoutReplyBox"
+        @click="showPopoutReplyBox"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index b0786ed3d..dcfc51b2a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="relative flex items-center gap-2 actions--container">
-    <woot-button
-      v-if="!currentChat.muted"
-      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-mute"
-      @click="mute"
-    />
-    <woot-button
-      v-else
-      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-1"
-      @click="unmute"
-    />
-    <woot-button
-      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="share"
-      @click="toggleEmailActionsModal"
-    />
-    <resolve-action
-      :conversation-id="currentChat.id"
-      :status="currentChat.status"
-    />
-    <email-transcript-modal
-      v-if="showEmailActionsModal"
-      :show="showEmailActionsModal"
-      :current-chat="currentChat"
-      @cancel="toggleEmailActionsModal"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -84,6 +47,45 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center gap-2 actions--container">
+    <woot-button
+      v-if="!currentChat.muted"
+      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
+      variant="clear"
+      color-scheme="secondary"
+      icon="speaker-mute"
+      @click="mute"
+    />
+    <woot-button
+      v-else
+      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
+      variant="clear"
+      color-scheme="secondary"
+      icon="speaker-1"
+      @click="unmute"
+    />
+    <woot-button
+      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
+      variant="clear"
+      color-scheme="secondary"
+      icon="share"
+      @click="toggleEmailActionsModal"
+    />
+    <ResolveAction
+      :conversation-id="currentChat.id"
+      :status="currentChat.status"
+    />
+    <EmailTranscriptModal
+      v-if="showEmailActionsModal"
+      :show="showEmailActionsModal"
+      :current-chat="currentChat"
+      @cancel="toggleEmailActionsModal"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .more--button {
   @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index 5824da0bd..6d596971b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -1,3 +1,24 @@
+<script>
+import { mapGetters } from 'vuex';
+import accountMixin from '../../../mixins/account';
+
+export default {
+  mixins: [accountMixin],
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    newInboxURL() {
+      return this.addAccountScoping('settings/inboxes/new');
+    },
+    newAgentURL() {
+      return this.addAccountScoping('settings/agents/list');
+    },
+    newLabelsURL() {
+      return this.addAccountScoping('settings/labels/list');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="onboarding-wrap">
     <div class="onboarding">
@@ -78,26 +99,7 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import accountMixin from '../../../mixins/account';
 
-export default {
-  mixins: [accountMixin],
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    newInboxURL() {
-      return this.addAccountScoping('settings/inboxes/new');
-    },
-    newAgentURL() {
-      return this.addAccountScoping('settings/agents/list');
-    },
-    newLabelsURL() {
-      return this.addAccountScoping('settings/labels/list');
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .onboarding-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index 3a0e2b63a..398dc013a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -1,27 +1,3 @@
-<template>
-  <span
-    v-if="priority"
-    v-tooltip="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
-    :class="{
-      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
-        isUrgent,
-      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
-        !isUrgent,
-    }"
-  >
-    <fluent-icon
-      :icon="`priority-${priority.toLowerCase()}`"
-      size="14"
-      view-box="0 0 14 14"
-    />
-  </span>
-</template>
-
 <script>
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 
@@ -52,3 +28,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span
+    v-if="priority"
+    v-tooltip="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
+    :class="{
+      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
+        isUrgent,
+      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
+        !isUrgent,
+    }"
+  >
+    <fluent-icon
+      :icon="`priority-${priority.toLowerCase()}`"
+      size="14"
+      view-box="0 0 14 14"
+    />
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 0e1061d57..12535362f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,156 +1,3 @@
-<template>
-  <div class="reply-box" :class="replyBoxClass">
-    <banner
-      v-if="showSelfAssignBanner"
-      action-button-variant="clear"
-      color-scheme="secondary"
-      class="banner--self-assign"
-      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-      :has-action-button="true"
-      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @click="onClickSelfAssign"
-    />
-    <reply-top-panel
-      :mode="replyType"
-      :set-reply-mode="setReplyMode"
-      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
-      :characters-remaining="charactersRemaining"
-      :popout-reply-box="popoutReplyBox"
-      @click="$emit('click')"
-    />
-    <article-search-popover
-      v-if="showArticleSearchPopover && connectedPortalSlug"
-      :selected-portal-slug="connectedPortalSlug"
-      @insert="handleInsert"
-      @close="onSearchPopoverClose"
-    />
-    <div class="reply-box__top">
-      <reply-to-message
-        v-if="shouldShowReplyToMessage"
-        :message="inReplyTo"
-        @dismiss="resetReplyToMessage"
-      />
-      <canned-response
-        v-if="showMentions && hasSlashCommand"
-        v-on-clickaway="hideMentions"
-        class="normal-editor__canned-box"
-        :search-key="mentionSearchKey"
-        @click="replaceText"
-      />
-      <emoji-input
-        v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
-        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
-        :on-click="addIntoEditor"
-      />
-      <reply-email-head
-        v-if="showReplyHead"
-        :cc-emails.sync="ccEmails"
-        :bcc-emails.sync="bccEmails"
-        :to-emails.sync="toEmails"
-      />
-      <woot-audio-recorder
-        v-if="showAudioRecorderEditor"
-        ref="audioRecorderInput"
-        :audio-record-format="audioRecordFormat"
-        @state-recorder-progress-changed="onStateProgressRecorderChanged"
-        @state-recorder-changed="onStateRecorderChanged"
-        @finish-record="onFinishRecorder"
-      />
-      <resizable-text-area
-        v-else-if="!showRichContentEditor"
-        ref="messageInput"
-        v-model="message"
-        class="input"
-        :placeholder="messagePlaceHolder"
-        :min-height="4"
-        :signature="signatureToApply"
-        :allow-signature="true"
-        :send-with-signature="sendWithSignature"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <woot-message-editor
-        v-else
-        v-model="message"
-        :editor-id="editorStateId"
-        class="input"
-        :is-private="isOnPrivateNote"
-        :placeholder="messagePlaceHolder"
-        :update-selection-with="updateEditorSelectionWith"
-        :min-height="4"
-        :enable-variables="true"
-        :variables="messageVariables"
-        :signature="signatureToApply"
-        :allow-signature="true"
-        :channel-type="channelType"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
-        @focus="onFocus"
-        @blur="onBlur"
-        @toggle-user-mention="toggleUserMention"
-        @toggle-canned-menu="toggleCannedMenu"
-        @toggle-variables-menu="toggleVariablesMenu"
-        @clear-selection="clearEditorSelection"
-      />
-    </div>
-    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
-      <attachment-preview
-        class="flex-col mt-4"
-        :attachments="attachedFiles"
-        @remove-attachment="removeAttachment"
-      />
-    </div>
-    <message-signature-missing-alert
-      v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
-    />
-    <reply-bottom-panel
-      :conversation-id="conversationId"
-      :enable-multiple-file-upload="enableMultipleFileUpload"
-      :has-whatsapp-templates="hasWhatsappTemplates"
-      :inbox="inbox"
-      :is-on-private-note="isOnPrivateNote"
-      :is-recording-audio="isRecordingAudio"
-      :is-send-disabled="isReplyButtonDisabled"
-      :mode="replyType"
-      :on-file-upload="onFileUpload"
-      :on-send="onSendReply"
-      :recording-audio-duration-text="recordingAudioDurationText"
-      :recording-audio-state="recordingAudioState"
-      :send-button-text="replyButtonLabel"
-      :show-audio-recorder="showAudioRecorder"
-      :show-editor-toggle="isAPIInbox && !isOnPrivateNote"
-      :show-emoji-picker="showEmojiPicker"
-      :show-file-upload="showFileUpload"
-      :toggle-audio-recorder-play-pause="toggleAudioRecorderPlayPause"
-      :toggle-audio-recorder="toggleAudioRecorder"
-      :toggle-emoji-picker="toggleEmojiPicker"
-      :message="message"
-      :portal-slug="connectedPortalSlug"
-      :new-conversation-modal-active="newConversationModalActive"
-      @selectWhatsappTemplate="openWhatsappTemplateModal"
-      @toggle-editor="toggleRichContentEditor"
-      @replace-text="replaceText"
-      @toggle-insert-article="toggleInsertArticle"
-    />
-    <whatsapp-templates
-      :inbox-id="inbox.id"
-      :show="showWhatsAppTemplatesModal"
-      @close="hideWhatsappTemplatesModal"
-      @on-send="onSendWhatsAppReply"
-      @cancel="hideWhatsappTemplatesModal"
-    />
-
-    <woot-confirm-modal
-      ref="confirmDialog"
-      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
-      :description="undefinedVariableMessage"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -279,8 +126,6 @@ export default {
       currentUser: 'getCurrentUser',
       lastEmail: 'getLastEmailInSelectedChat',
       globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     currentContact() {
       return this.$store.getters['contacts/getContact'](
@@ -1232,6 +1077,159 @@ export default {
 };
 </script>
 
+<template>
+  <div class="reply-box" :class="replyBoxClass">
+    <Banner
+      v-if="showSelfAssignBanner"
+      action-button-variant="clear"
+      color-scheme="secondary"
+      class="banner--self-assign"
+      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
+      has-action-button
+      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+      @click="onClickSelfAssign"
+    />
+    <ReplyTopPanel
+      :mode="replyType"
+      :set-reply-mode="setReplyMode"
+      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
+      :characters-remaining="charactersRemaining"
+      :popout-reply-box="popoutReplyBox"
+      @click="$emit('click')"
+    />
+    <ArticleSearchPopover
+      v-if="showArticleSearchPopover && connectedPortalSlug"
+      :selected-portal-slug="connectedPortalSlug"
+      @insert="handleInsert"
+      @close="onSearchPopoverClose"
+    />
+    <div class="reply-box__top">
+      <ReplyToMessage
+        v-if="shouldShowReplyToMessage"
+        :message="inReplyTo"
+        @dismiss="resetReplyToMessage"
+      />
+      <CannedResponse
+        v-if="showMentions && hasSlashCommand"
+        v-on-clickaway="hideMentions"
+        class="normal-editor__canned-box"
+        :search-key="mentionSearchKey"
+        @click="replaceText"
+      />
+      <EmojiInput
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
+        :on-click="addIntoEditor"
+      />
+      <ReplyEmailHead
+        v-if="showReplyHead"
+        :cc-emails.sync="ccEmails"
+        :bcc-emails.sync="bccEmails"
+        :to-emails.sync="toEmails"
+      />
+      <WootAudioRecorder
+        v-if="showAudioRecorderEditor"
+        ref="audioRecorderInput"
+        :audio-record-format="audioRecordFormat"
+        @stateRecorderProgressChanged="onStateProgressRecorderChanged"
+        @stateRecorderChanged="onStateRecorderChanged"
+        @finishRecord="onFinishRecorder"
+      />
+      <ResizableTextArea
+        v-else-if="!showRichContentEditor"
+        ref="messageInput"
+        v-model="message"
+        class="input"
+        :placeholder="messagePlaceHolder"
+        :min-height="4"
+        :signature="signatureToApply"
+        allow-signature
+        :send-with-signature="sendWithSignature"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <WootMessageEditor
+        v-else
+        v-model="message"
+        :editor-id="editorStateId"
+        class="input"
+        :is-private="isOnPrivateNote"
+        :placeholder="messagePlaceHolder"
+        :update-selection-with="updateEditorSelectionWith"
+        :min-height="4"
+        enable-variables
+        :variables="messageVariables"
+        :signature="signatureToApply"
+        allow-signature
+        :channel-type="channelType"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
+        @focus="onFocus"
+        @blur="onBlur"
+        @toggleUserMention="toggleUserMention"
+        @toggleCannedMenu="toggleCannedMenu"
+        @toggleVariablesMenu="toggleVariablesMenu"
+        @clearSelection="clearEditorSelection"
+      />
+    </div>
+    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
+      <AttachmentPreview
+        class="flex-col mt-4"
+        :attachments="attachedFiles"
+        @removeAttachment="removeAttachment"
+      />
+    </div>
+    <MessageSignatureMissingAlert
+      v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
+    />
+    <ReplyBottomPanel
+      :conversation-id="conversationId"
+      :enable-multiple-file-upload="enableMultipleFileUpload"
+      :has-whatsapp-templates="hasWhatsappTemplates"
+      :inbox="inbox"
+      :is-on-private-note="isOnPrivateNote"
+      :is-recording-audio="isRecordingAudio"
+      :is-send-disabled="isReplyButtonDisabled"
+      :mode="replyType"
+      :on-file-upload="onFileUpload"
+      :on-send="onSendReply"
+      :recording-audio-duration-text="recordingAudioDurationText"
+      :recording-audio-state="recordingAudioState"
+      :send-button-text="replyButtonLabel"
+      :show-audio-recorder="showAudioRecorder"
+      :show-editor-toggle="isAPIInbox && !isOnPrivateNote"
+      :show-emoji-picker="showEmojiPicker"
+      :show-file-upload="showFileUpload"
+      :toggle-audio-recorder-play-pause="toggleAudioRecorderPlayPause"
+      :toggle-audio-recorder="toggleAudioRecorder"
+      :toggle-emoji-picker="toggleEmojiPicker"
+      :message="message"
+      :portal-slug="connectedPortalSlug"
+      :new-conversation-modal-active="newConversationModalActive"
+      @selectWhatsappTemplate="openWhatsappTemplateModal"
+      @toggleEditor="toggleRichContentEditor"
+      @replaceText="replaceText"
+      @toggleInsertArticle="toggleInsertArticle"
+    />
+    <WhatsappTemplates
+      :inbox-id="inbox.id"
+      :show="showWhatsAppTemplatesModal"
+      @close="hideWhatsappTemplatesModal"
+      @onSend="onSendWhatsAppReply"
+      @cancel="hideWhatsappTemplatesModal"
+    />
+
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
+      :description="undefinedVariableMessage"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .send-button {
   @apply mb-0;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index ab507febe..08ca1eba6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,75 +1,3 @@
-<template>
-  <div>
-    <div v-if="toEmails">
-      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
-        <label class="input-group-label">
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
-        </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
-          <woot-input
-            v-model.trim="v$.toEmailsVal.$model"
-            type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: v$.toEmailsVal.$error }"
-            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
-            @blur="onBlur"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="input-group-wrap">
-      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
-        <label class="input-group-label">
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
-        </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
-          <woot-input
-            v-model.trim="v$.ccEmailsVal.$model"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            type="text"
-            :class="{ error: v$.ccEmailsVal.$error }"
-            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
-            @blur="onBlur"
-          />
-        </div>
-        <woot-button
-          v-if="!showBcc"
-          variant="clear"
-          size="small"
-          @click="handleAddBcc"
-        >
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
-        </woot-button>
-      </div>
-      <span v-if="v$.ccEmailsVal.$error" class="message">
-        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
-      </span>
-    </div>
-    <div v-if="showBcc" class="input-group-wrap">
-      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
-        <label class="input-group-label">
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
-        </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
-          <woot-input
-            v-model.trim="v$.bccEmailsVal.$model"
-            type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
-            :class="{ error: v$.bccEmailsVal.$error }"
-            :placeholder="
-              $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
-            "
-            @blur="onBlur"
-          />
-        </div>
-      </div>
-      <span v-if="v$.bccEmailsVal.$error" class="message">
-        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 import { useVuelidate } from '@vuelidate/core';
@@ -152,6 +80,79 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <div v-if="toEmails">
+      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
+        <label class="input-group-label">
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
+        </label>
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+          <woot-input
+            v-model.trim="v$.toEmailsVal.$model"
+            type="text"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            :class="{ error: v$.toEmailsVal.$error }"
+            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
+            @blur="onBlur"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="input-group-wrap">
+      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
+        <label class="input-group-label">
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
+        </label>
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+          <woot-input
+            v-model.trim="v$.ccEmailsVal.$model"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            type="text"
+            :class="{ error: v$.ccEmailsVal.$error }"
+            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
+            @blur="onBlur"
+          />
+        </div>
+        <woot-button
+          v-if="!showBcc"
+          variant="clear"
+          size="small"
+          @click="handleAddBcc"
+        >
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
+        </woot-button>
+      </div>
+      <span v-if="v$.ccEmailsVal.$error" class="message">
+        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
+      </span>
+    </div>
+    <div v-if="showBcc" class="input-group-wrap">
+      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
+        <label class="input-group-label">
+          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
+        </label>
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+          <woot-input
+            v-model.trim="v$.bccEmailsVal.$model"
+            type="text"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            :class="{ error: v$.bccEmailsVal.$error }"
+            :placeholder="
+              $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
+            "
+            @blur="onBlur"
+          />
+        </div>
+      </div>
+      <span v-if="v$.bccEmailsVal.$error" class="message">
+        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
+      </span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input-group-wrap .message {
   @apply text-sm text-red-500 dark:text-red-500;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
index ce24f4ce1..2db7d6a65 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
@@ -1,3 +1,17 @@
+<script>
+import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
+
+export default {
+  components: { MessagePreview },
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
@@ -5,7 +19,7 @@
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
     <div class="flex-grow gap-1 mt-px text-xs truncate">
       {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
-      <message-preview
+      <MessagePreview
         :message="message"
         :show-message-type="false"
         :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
@@ -24,20 +38,6 @@
   </div>
 </template>
 
-<script>
-import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
-
-export default {
-  components: { MessagePreview },
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
 <style lang="scss">
 // TODO: Remove this
 // override for dashboard/assets/scss/widgets/_reply-box.scss
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index a3a26db73..a6fdb6b8a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -1,43 +1,3 @@
-<template>
-  <ul
-    v-if="items.length"
-    class="vertical dropdown menu mention--box"
-    :class="{ 'with-bottom-border': items.length <= 4 }"
-  >
-    <li
-      v-for="(agent, index) in items"
-      :id="`mention-item-${index}`"
-      :key="agent.id"
-      :class="{ active: index === selectedIndex }"
-      class="last:mb-2 items-center rounded-md flex p-2"
-      @click="onAgentSelect(index)"
-      @mouseover="onHover(index)"
-    >
-      <div class="mr-2">
-        <woot-thumbnail
-          :src="agent.thumbnail"
-          :username="agent.name"
-          size="32px"
-        />
-      </div>
-      <div
-        class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
-      >
-        <h5
-          class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
-        >
-          {{ agent.name }}
-        </h5>
-        <div
-          class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
-        >
-          {{ agent.email }}
-        </div>
-      </div>
-    </li>
-  </ul>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import mentionSelectionKeyboardMixin from '../mentions/mentionSelectionKeyboardMixin';
@@ -94,6 +54,46 @@ export default {
 };
 </script>
 
+<template>
+  <ul
+    v-if="items.length"
+    class="vertical dropdown menu mention--box"
+    :class="{ 'with-bottom-border': items.length <= 4 }"
+  >
+    <li
+      v-for="(agent, index) in items"
+      :id="`mention-item-${index}`"
+      :key="agent.id"
+      :class="{ active: index === selectedIndex }"
+      class="last:mb-2 items-center rounded-md flex p-2"
+      @click="onAgentSelect(index)"
+      @mouseover="onHover(index)"
+    >
+      <div class="mr-2">
+        <woot-thumbnail
+          :src="agent.thumbnail"
+          :username="agent.name"
+          size="32px"
+        />
+      </div>
+      <div
+        class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
+      >
+        <h5
+          class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
+        >
+          {{ agent.name }}
+        </h5>
+        <div
+          class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
+        >
+          {{ agent.email }}
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
 <style scoped lang="scss">
 .mention--box {
   @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index 48b1dcea3..66ad8965d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -1,19 +1,3 @@
-<template>
-  <mention-box
-    v-if="items.length"
-    type="variable"
-    :items="items"
-    @mention-select="handleVariableClick"
-  >
-    <template slot-scope="{ item }">
-      <span class="text-capitalize variable--list-label">
-        {{ item.description }}
-      </span>
-      ({{ item.label }})
-    </template>
-  </mention-box>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { MESSAGE_VARIABLES } from 'shared/constants/messages';
@@ -71,6 +55,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <MentionBox
+    v-if="items.length"
+    type="variable"
+    :items="items"
+    @mentionSelect="handleVariableClick"
+  >
+    <template slot-scope="{ item }">
+      <span class="text-capitalize variable--list-label">
+        {{ item.description }}
+      </span>
+      ({{ item.label }})
+    </template>
+  </MentionBox>
+</template>
+
 <style scoped>
 .variable--list-label {
   font-weight: var(--font-weight-bold);
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
index 6c4523f9a..de025a1e5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
@@ -1,26 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
-    <woot-modal-header
-      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
-      :header-content="modalHeaderContent"
-    />
-    <div class="row modal-content">
-      <templates-picker
-        v-if="!selectedWaTemplate"
-        :inbox-id="inboxId"
-        @onSelect="pickTemplate"
-      />
-      <template-parser
-        v-else
-        :template="selectedWaTemplate"
-        @resetTemplate="onResetTemplate"
-        @sendMessage="onSendMessage"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
@@ -61,7 +38,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
@@ -70,6 +47,29 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
+    <woot-modal-header
+      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
+      :header-content="modalHeaderContent"
+    />
+    <div class="row modal-content">
+      <TemplatesPicker
+        v-if="!selectedWaTemplate"
+        :inbox-id="inboxId"
+        @onSelect="pickTemplate"
+      />
+      <TemplateParser
+        v-else
+        :template="selectedWaTemplate"
+        @resetTemplate="onResetTemplate"
+        @sendMessage="onSendMessage"
+      />
+    </div>
+  </woot-modal>
+</template>
+
 <style scoped>
 .modal-content {
   padding: 1.5625rem 2rem;
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
index c9e827842..23918ddd3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="w-full">
-    <textarea
-      v-model="processedString"
-      rows="4"
-      readonly
-      class="template-input"
-    />
-    <div v-if="variables" class="template__variables-container">
-      <p class="variables-label">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-      </p>
-      <div
-        v-for="(variable, key) in processedParams"
-        :key="key"
-        class="template__variable-item"
-      >
-        <span class="variable-label">
-          {{ key }}
-        </span>
-        <woot-input
-          v-model="processedParams[key]"
-          type="text"
-          class="variable-input"
-          :styles="{ marginBottom: 0 }"
-        />
-      </div>
-      <p v-if="v$.$dirty && v$.$invalid" class="error">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
-      </p>
-    </div>
-    <footer>
-      <woot-button variant="smooth" @click="resetTemplate">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
-      </woot-button>
-      <woot-button type="button" @click="sendMessage">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
-      </woot-button>
-    </footer>
-  </div>
-</template>
-
 <script>
 /**
  * This component handles parsing and sending WhatsApp message templates.
@@ -147,6 +105,48 @@ export default {
 };
 </script>
 
+<template>
+  <div class="w-full">
+    <textarea
+      v-model="processedString"
+      rows="4"
+      readonly
+      class="template-input"
+    />
+    <div v-if="variables" class="template__variables-container">
+      <p class="variables-label">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+      </p>
+      <div
+        v-for="(variable, key) in processedParams"
+        :key="key"
+        class="template__variable-item"
+      >
+        <span class="variable-label">
+          {{ key }}
+        </span>
+        <woot-input
+          v-model="processedParams[key]"
+          type="text"
+          class="variable-input"
+          :styles="{ marginBottom: 0 }"
+        />
+      </div>
+      <p v-if="v$.$dirty && v$.$invalid" class="error">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+    <footer>
+      <woot-button variant="smooth" @click="resetTemplate">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
+      </woot-button>
+      <woot-button type="button" @click="sendMessage">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
+      </woot-button>
+    </footer>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .template__variables-container {
   @apply p-2.5;
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
index 7f0077f4b..e7f69934c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -1,59 +1,3 @@
-<template>
-  <div class="w-full">
-    <div class="templates__list-search gap-1">
-      <fluent-icon icon="search" class="search-icon" size="16" />
-      <input
-        ref="search"
-        v-model="query"
-        type="search"
-        :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
-        class="templates__search-input"
-      />
-    </div>
-    <div class="template__list-container">
-      <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
-        <button
-          class="template__list-item"
-          @click="$emit('onSelect', template)"
-        >
-          <div>
-            <div class="flex items-center justify-between mb-2.5">
-              <p class="label-title">
-                {{ template.name }}
-              </p>
-              <span
-                class="inline-block py-1 px-2 rounded-sm text-xs leading-none cursor-default bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100"
-              >
-                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
-                {{ template.language }}
-              </span>
-            </div>
-            <div>
-              <p class="strong">
-                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
-              </p>
-              <p class="label-body">{{ getTemplatebody(template) }}</p>
-            </div>
-            <div class="label-category">
-              <p class="strong">
-                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
-              </p>
-              <p>{{ template.category }}</p>
-            </div>
-          </div>
-        </button>
-        <hr v-if="i != filteredTemplateMessages.length - 1" :key="`hr-${i}`" />
-      </div>
-      <div v-if="!filteredTemplateMessages.length">
-        <p>
-          {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
-          <strong>{{ query }}</strong>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 // TODO: Remove this when we support all formats
 const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
@@ -96,6 +40,61 @@ export default {
 };
 </script>
 
+<template>
+  <div class="w-full">
+    <div class="gap-1 templates__list-search">
+      <fluent-icon icon="search" class="search-icon" size="16" />
+      <input
+        v-model="query"
+        type="search"
+        :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
+        class="templates__search-input"
+      />
+    </div>
+    <div class="template__list-container">
+      <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
+        <button
+          class="template__list-item"
+          @click="$emit('onSelect', template)"
+        >
+          <div>
+            <div class="flex items-center justify-between mb-2.5">
+              <p class="label-title">
+                {{ template.name }}
+              </p>
+              <span
+                class="inline-block px-2 py-1 text-xs leading-none bg-white rounded-sm cursor-default dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+              >
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
+                {{ template.language }}
+              </span>
+            </div>
+            <div>
+              <p class="strong">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
+              </p>
+              <p class="label-body">{{ getTemplatebody(template) }}</p>
+            </div>
+            <div class="label-category">
+              <p class="strong">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
+              </p>
+              <p>{{ template.category }}</p>
+            </div>
+          </div>
+        </button>
+        <hr v-if="i != filteredTemplateMessages.length - 1" :key="`hr-${i}`" />
+      </div>
+      <div v-if="!filteredTemplateMessages.length">
+        <p>
+          {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
+          <strong>{{ query }}</strong>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .templates__list-search {
   @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index b7b8ce2e5..f3ed9ac51 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -1,82 +1,6 @@
-<template>
-  <div class="message-text--metadata">
-    <span
-      class="time"
-      :class="{
-        'has-status-icon':
-          showSentIndicator || showDeliveredIndicator || showReadIndicator,
-      }"
-    >
-      {{ readableTime }}
-    </span>
-    <span v-if="externalError" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="externalError"
-        icon="error-circle"
-        class="action--icon"
-        size="14"
-      />
-    </span>
-    <span v-if="showReadIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
-        icon="checkmark-double"
-        class="action--icon read-tick read-indicator"
-        size="14"
-      />
-    </span>
-    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
-        icon="checkmark-double"
-        class="action--icon read-tick"
-        size="14"
-      />
-    </span>
-    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        icon="checkmark"
-        class="action--icon read-tick"
-        size="14"
-      />
-    </span>
-    <fluent-icon
-      v-if="isEmail"
-      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      icon="mail"
-      class="action--icon"
-      size="16"
-    />
-    <fluent-icon
-      v-if="isPrivate"
-      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      icon="lock-closed"
-      class="action--icon lock--icon--private"
-      size="16"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
-    />
-    <a
-      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
-      :href="linkToTweet"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        icon="open"
-        class="cursor-pointer action--icon"
-        size="16"
-      />
-    </a>
-  </div>
-</template>
-
 <script>
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import { mapGetters } from 'vuex';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 export default {
@@ -126,17 +50,12 @@ export default {
       type: String,
       default: '',
     },
-    id: {
-      type: [String, Number],
-      default: '',
-    },
     inboxId: {
       type: [String, Number],
       default: 0,
     },
   },
   computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.inboxId);
     },
@@ -257,6 +176,81 @@ export default {
 };
 </script>
 
+<template>
+  <div class="message-text--metadata">
+    <span
+      class="time"
+      :class="{
+        'has-status-icon':
+          showSentIndicator || showDeliveredIndicator || showReadIndicator,
+      }"
+    >
+      {{ readableTime }}
+    </span>
+    <span v-if="externalError" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="externalError"
+        icon="error-circle"
+        class="action--icon"
+        size="14"
+      />
+    </span>
+    <span v-if="showReadIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
+        icon="checkmark-double"
+        class="action--icon read-tick read-indicator"
+        size="14"
+      />
+    </span>
+    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
+        icon="checkmark-double"
+        class="action--icon read-tick"
+        size="14"
+      />
+    </span>
+    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
+        icon="checkmark"
+        class="action--icon read-tick"
+        size="14"
+      />
+    </span>
+    <fluent-icon
+      v-if="isEmail"
+      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
+      icon="mail"
+      class="action--icon"
+      size="16"
+    />
+    <fluent-icon
+      v-if="isPrivate"
+      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
+      icon="lock-closed"
+      class="action--icon lock--icon--private"
+      size="16"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    />
+    <a
+      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
+      :href="linkToTweet"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
+        icon="open"
+        class="cursor-pointer action--icon"
+        size="16"
+      />
+    </a>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .right {
   .message-text--metadata {
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
index 83a44cc79..2d0b3d3a3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="contact--group">
-    <fluent-icon icon="call" class="file--icon" size="18" />
-    <div class="meta">
-      <p
-        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
-      >
-        {{ phoneNumber }}
-      </p>
-    </div>
-    <div v-if="formattedPhoneNumber" class="link-wrap">
-      <woot-button variant="clear" size="small" @click.prevent="addContact">
-        {{ $t('CONVERSATION.SAVE_CONTACT') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import {
@@ -98,6 +80,24 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact--group">
+    <fluent-icon icon="call" class="file--icon" size="18" />
+    <div class="meta">
+      <p
+        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
+      >
+        {{ phoneNumber }}
+      </p>
+    </div>
+    <div v-if="formattedPhoneNumber" class="link-wrap">
+      <woot-button variant="clear" size="small" @click.prevent="addContact">
+        {{ $t('CONVERSATION.SAVE_CONTACT') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .contact--group {
   align-items: center;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
index d5e0375cd..edbe12172 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="file message-text__wrap">
-    <div class="icon-wrap">
-      <fluent-icon icon="document" class="file--icon" size="32" />
-    </div>
-    <div class="meta">
-      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
-        {{ decodeURI(fileName) }}
-      </h5>
-      <a
-        class="download clear link button small"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        :href="url"
-      >
-        {{ $t('CONVERSATION.DOWNLOAD') }}
-      </a>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -45,6 +24,27 @@ export default {
 };
 </script>
 
+<template>
+  <div class="file message-text__wrap">
+    <div class="icon-wrap">
+      <fluent-icon icon="document" class="file--icon" size="32" />
+    </div>
+    <div class="meta">
+      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
+        {{ decodeURI(fileName) }}
+      </h5>
+      <a
+        class="download clear link button small"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        :href="url"
+      >
+        {{ $t('CONVERSATION.DOWNLOAD') }}
+      </a>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
index d763d6bec..d5368e4aa 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -1,12 +1,3 @@
-<template>
-  <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
-      <img :src="url" class="modal-image skip-context-menu" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 export default {
   components: {},
@@ -31,3 +22,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="image message-text__wrap">
+    <img :src="url" @click="onClick" @error="$emit('error')" />
+    <woot-modal full-width :show.sync="show" :on-close="onClose">
+      <img :src="url" class="modal-image skip-context-menu" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
index b98953341..ec021e0b9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="message-text__wrap" :class="attachmentTypeClasses">
-    <img
-      v-if="isImage && !isImageError"
-      class="bg-woot-200 dark:bg-woot-900"
-      :src="dataUrl"
-      :width="imageWidth"
-      :height="imageHeight"
-      @click="onClick"
-      @error="onImgError"
-    />
-    <video
-      v-if="isVideo"
-      :src="dataUrl"
-      muted
-      playsInline
-      @error="onImgError"
-      @click="onClick"
-    />
-    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
-      <source :src="`${dataUrl}?t=${Date.now()}`" />
-    </audio>
-    <gallery-view
-      v-if="show"
-      :show.sync="show"
-      :attachment="attachment"
-      :all-attachments="filteredCurrentChatAttachments"
-      @error="onImgError"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
@@ -120,3 +87,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="message-text__wrap" :class="attachmentTypeClasses">
+    <img
+      v-if="isImage && !isImageError"
+      class="bg-woot-200 dark:bg-woot-900"
+      :src="dataUrl"
+      :width="imageWidth"
+      :height="imageHeight"
+      @click="onClick"
+      @error="onImgError"
+    />
+    <video
+      v-if="isVideo"
+      :src="dataUrl"
+      muted
+      playsInline
+      @error="onImgError"
+      @click="onClick"
+    />
+    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
+      <source :src="`${dataUrl}?t=${Date.now()}`" />
+    </audio>
+    <GalleryView
+      v-if="show"
+      :show.sync="show"
+      :attachment="attachment"
+      :all-attachments="filteredCurrentChatAttachments"
+      @error="onImgError"
+      @close="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
index 8716d9ac9..11a6eaf73 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
@@ -1,16 +1,3 @@
-<template>
-  <bubble-image
-    v-if="!hasImgStoryError"
-    :url="storyUrl"
-    @error="onImageLoadError"
-  />
-  <bubble-video
-    v-else-if="!hasVideoStoryError"
-    :url="storyUrl"
-    @error="onVideoLoadError"
-  />
-  <instagram-story-error-place-holder v-else />
-</template>
 <script>
 import BubbleImage from './Image.vue';
 import BubbleVideo from './Video.vue';
@@ -49,3 +36,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BubbleImage
+    v-if="!hasImgStoryError"
+    :url="storyUrl"
+    @error="onImageLoadError"
+  />
+  <BubbleVideo
+    v-else-if="!hasVideoStoryError"
+    :url="storyUrl"
+    @error="onVideoLoadError"
+  />
+  <InstagramStoryErrorPlaceHolder v-else />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
index db70afac5..07781df88 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
@@ -1,3 +1,7 @@
+<script>
+export default {};
+</script>
+
 <template>
   <div
     class="flex items-center justify-center px-8 h-28 w-full bg-slate-100 text-slate-700 dark:bg-slate-500 dark:text-slate-75"
@@ -8,7 +12,3 @@
     </p>
   </div>
 </template>
-
-<script>
-export default {};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
index baa41d81c..a42f694fd 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
@@ -1,11 +1,3 @@
-<template>
-  <blockquote
-    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
-  >
-    <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
-    <instagram-story :story-url="storyUrl" class="mt-3 rounded-md" />
-  </blockquote>
-</template>
 <script>
 import InstagramStory from './InstagramStory.vue';
 
@@ -33,3 +25,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <blockquote
+    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
+  >
+    <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
+    <InstagramStory :story-url="storyUrl" class="mt-3 rounded-md" />
+  </blockquote>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
index 80843854d..b31153f1b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
@@ -1,10 +1,3 @@
-<template>
-  <dyte-video-call
-    v-if="showDyteIntegration"
-    :message-id="messageId"
-    :meeting-data="contentAttributes.data"
-  />
-</template>
 <script>
 import DyteVideoCall from './integrations/Dyte.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
@@ -37,3 +30,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <DyteVideoCall
+    v-if="showDyteIntegration"
+    :message-id="messageId"
+    :meeting-data="contentAttributes.data"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
index 66365e85c..645b25017 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    v-if="showHead"
-    class="message__mail-head"
-    :class="{ 'is-incoming': isIncoming }"
-  >
-    <div v-if="fromMail" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
-      <span>{{ fromMail }}</span>
-    </div>
-    <div v-if="toMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
-      <span>{{ toMails }}</span>
-    </div>
-    <div v-if="ccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
-      <span>{{ ccMails }}</span>
-    </div>
-    <div v-if="bccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
-      <span>{{ bccMails }}</span>
-    </div>
-    <div v-if="subject" class="meta-wrap">
-      <span class="message__content--type">
-        {{ $t('EMAIL_HEADER.SUBJECT') }}:
-      </span>
-      <span>{{ subject }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -75,6 +44,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="showHead"
+    class="message__mail-head"
+    :class="{ 'is-incoming': isIncoming }"
+  >
+    <div v-if="fromMail" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
+      <span>{{ fromMail }}</span>
+    </div>
+    <div v-if="toMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
+      <span>{{ toMails }}</span>
+    </div>
+    <div v-if="ccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
+      <span>{{ ccMails }}</span>
+    </div>
+    <div v-if="bccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
+      <span>{{ bccMails }}</span>
+    </div>
+    <div v-if="subject" class="meta-wrap">
+      <span class="message__content--type">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+      </span>
+      <span>{{ subject }}</span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .message__mail-head {
   padding-bottom: var(--space-small);
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
index 5cb063d23..f3cec8480 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
@@ -1,23 +1,3 @@
-<template>
-  <div
-    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
-    :class="{
-      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
-        messageType === MESSAGE_TYPE.INCOMING,
-      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
-      '-mx-2': !parentHasAttachments,
-    }"
-    @click="scrollToMessage"
-  >
-    <message-preview
-      class="cursor-pointer"
-      :message="message"
-      :show-message-type="false"
-      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
-    />
-  </div>
-</template>
-
 <script>
 import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
@@ -54,3 +34,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
+    :class="{
+      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
+        messageType === MESSAGE_TYPE.INCOMING,
+      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
+      '-mx-2': !parentHasAttachments,
+    }"
+    @click="scrollToMessage"
+  >
+    <MessagePreview
+      class="cursor-pointer"
+      :message="message"
+      :show-message-type="false"
+      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index bc24ed90f..ab7c81623 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -1,43 +1,3 @@
-<template>
-  <div
-    class="message-text__wrap"
-    :class="{
-      'show--quoted': isQuotedContentPresent,
-      'hide--quoted': !isQuotedContentPresent,
-    }"
-  >
-    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
-    <div v-else @click="handleClickOnContent">
-      <letter
-        class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
-        :html="message"
-      />
-    </div>
-    <button
-      v-if="showQuoteToggle"
-      class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
-      @click="toggleQuotedContent"
-    >
-      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-up" size="16" />
-        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
-      </span>
-      <span v-else class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-down" size="16" />
-        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
-      </span>
-    </button>
-    <gallery-view
-      v-if="showGalleryViewer"
-      :show.sync="showGalleryViewer"
-      :attachment="attachment"
-      :all-attachments="availableAttachments"
-      @error="onClose"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import Letter from 'vue-letter';
 import GalleryView from '../components/GalleryView.vue';
@@ -114,6 +74,47 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="message-text__wrap"
+    :class="{
+      'show--quoted': isQuotedContentPresent,
+      'hide--quoted': !isQuotedContentPresent,
+    }"
+  >
+    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
+    <div v-else @click="handleClickOnContent">
+      <Letter
+        class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
+        :html="message"
+      />
+    </div>
+    <button
+      v-if="showQuoteToggle"
+      class="py-1 text-xs cursor-pointer text-slate-300 dark:text-slate-300"
+      @click="toggleQuotedContent"
+    >
+      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-up" size="16" />
+        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+      </span>
+      <span v-else class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-down" size="16" />
+        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+      </span>
+    </button>
+    <GalleryView
+      v-if="showGalleryViewer"
+      :show.sync="showGalleryViewer"
+      :attachment="attachment"
+      :all-attachments="availableAttachments"
+      @error="onClose"
+      @close="onClose"
+    />
+  </div>
+</template>
+
 <style lang="scss">
 .text-content {
   overflow: auto;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
index 94a24e575..aac444888 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
@@ -1,3 +1,31 @@
+<script>
+export default {
+  props: {
+    contentAttributes: {
+      type: Object,
+      default: () => ({}),
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    translationsAvailable() {
+      return !!Object.keys(this.translations).length;
+    },
+    translations() {
+      return this.contentAttributes.translations || {};
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <woot-modal
     modal-type="right-aligned"
@@ -30,30 +58,3 @@
     </div>
   </woot-modal>
 </template>
-<script>
-export default {
-  props: {
-    contentAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    translationsAvailable() {
-      return !!Object.keys(this.translations).length;
-    },
-    translations() {
-      return this.contentAttributes.translations || {};
-    },
-  },
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
index 6ff96bb5b..f6275c476 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="video message-text__wrap">
-    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal :show.sync="show" :on-close="onClose">
-      <video
-        :src="url"
-        controls
-        playsInline
-        class="modal-video skip-context-menu mx-auto"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -40,3 +26,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="video message-text__wrap">
+    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
+    <woot-modal :show.sync="show" :on-close="onClose">
+      <video
+        :src="url"
+        controls
+        playsInline
+        class="modal-video skip-context-menu mx-auto"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
index 7a8e7ff57..a75731183 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
@@ -1,33 +1,3 @@
-<template>
-  <div>
-    <woot-button
-      size="small"
-      variant="smooth"
-      color-scheme="secondary"
-      icon="video-add"
-      class="join-call-button"
-      :is-loading="isLoading"
-      @click="joinTheCall"
-    >
-      {{ $t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN') }}
-    </woot-button>
-    <div v-if="dyteAuthToken" class="video-call--container">
-      <iframe
-        :src="meetingLink"
-        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
-      />
-      <woot-button
-        size="small"
-        variant="smooth"
-        color-scheme="secondary"
-        class="join-call-button"
-        @click="leaveTheRoom"
-      >
-        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 import DyteAPI from 'dashboard/api/integrations/dyte';
 import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
@@ -71,6 +41,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      icon="video-add"
+      class="join-call-button"
+      :is-loading="isLoading"
+      @click="joinTheCall"
+    >
+      {{ $t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </woot-button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <woot-button
+        size="small"
+        variant="smooth"
+        color-scheme="secondary"
+        class="join-call-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 .join-call-button {
   margin: var(--space-small) 0;
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index abb31f8fc..e79bf658c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -1,184 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal
-    full-width
-    :show.sync="show"
-    :show-close-button="false"
-    :on-close="onClose"
-  >
-    <div
-      v-on-clickaway="onClose"
-      class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
-      @click="onClose"
-    >
-      <div
-        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
-        @click.stop
-      >
-        <div
-          v-if="senderDetails"
-          class="items-center flex justify-start min-w-[15rem]"
-        >
-          <thumbnail
-            v-if="senderDetails.avatar"
-            :username="senderDetails.name"
-            :src="senderDetails.avatar"
-          />
-          <div
-            class="flex flex-col items-start justify-center ml-2 rtl:ml-0 rtl:mr-2"
-          >
-            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
-              <span
-                class="overflow-hidden text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-              >
-                {{ senderDetails.name }}
-              </span>
-            </h3>
-            <span
-              class="p-0 m-0 overflow-hidden text-xs text-slate-400 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-            >
-              {{ readableTime }}
-            </span>
-          </div>
-        </div>
-        <div
-          class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
-        >
-          <span
-            v-dompurify-html="fileNameFromDataUrl"
-            class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-          />
-        </div>
-        <div
-          class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
-        >
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="zoom-in"
-            @click="onZoom(0.1)"
-          />
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="zoom-out"
-            @click="onZoom(-0.1)"
-          />
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-rotate-counter-clockwise"
-            @click="onRotate('counter-clockwise')"
-          />
-          <woot-button
-            v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-rotate-clockwise"
-            @click="onRotate('clockwise')"
-          />
-          <woot-button
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-download"
-            @click="onClickDownload"
-          />
-          <woot-button
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="dismiss"
-            @click="onClose"
-          />
-        </div>
-      </div>
-      <div class="flex items-center justify-center w-full h-full">
-        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
-          <woot-button
-            v-if="hasMoreThanOneAttachment"
-            class="z-10"
-            size="large"
-            variant="smooth"
-            color-scheme="primary"
-            icon="chevron-left"
-            :disabled="activeImageIndex === 0"
-            @click.stop="
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex - 1],
-                activeImageIndex - 1
-              )
-            "
-          />
-        </div>
-        <div class="flex flex-col items-center justify-center w-full h-full">
-          <div>
-            <img
-              v-if="isImage"
-              :key="activeAttachment.message_id"
-              :src="activeAttachment.data_url"
-              class="mx-auto my-0 duration-150 ease-in-out transform modal-image skip-context-menu"
-              :style="imageRotationStyle"
-              @click.stop="onClickZoomImage"
-              @wheel.stop="onWheelImageZoom"
-            />
-            <video
-              v-if="isVideo"
-              :key="activeAttachment.message_id"
-              :src="activeAttachment.data_url"
-              controls
-              playsInline
-              class="mx-auto my-0 modal-video skip-context-menu"
-              @click.stop
-            />
-            <audio
-              v-if="isAudio"
-              :key="activeAttachment.message_id"
-              controls
-              class="skip-context-menu"
-              @click.stop
-            >
-              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
-            </audio>
-          </div>
-        </div>
-        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
-          <woot-button
-            v-if="hasMoreThanOneAttachment"
-            class="z-10"
-            size="large"
-            variant="smooth"
-            color-scheme="primary"
-            :disabled="activeImageIndex === allAttachments.length - 1"
-            icon="chevron-right"
-            @click.stop="
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex + 1],
-                activeImageIndex + 1
-              )
-            "
-          />
-        </div>
-      </div>
-      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
-        <div
-          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
-        >
-          <span class="count">
-            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </woot-modal>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -385,3 +204,185 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal
+    full-width
+    :show.sync="show"
+    :show-close-button="false"
+    :on-close="onClose"
+  >
+    <div
+      v-on-clickaway="onClose"
+      class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
+      @click="onClose"
+    >
+      <div
+        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
+        @click.stop
+      >
+        <div
+          v-if="senderDetails"
+          class="items-center flex justify-start min-w-[15rem]"
+        >
+          <Thumbnail
+            v-if="senderDetails.avatar"
+            :username="senderDetails.name"
+            :src="senderDetails.avatar"
+          />
+          <div
+            class="flex flex-col items-start justify-center ml-2 rtl:ml-0 rtl:mr-2"
+          >
+            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
+              <span
+                class="overflow-hidden text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+              >
+                {{ senderDetails.name }}
+              </span>
+            </h3>
+            <span
+              class="p-0 m-0 overflow-hidden text-xs text-slate-400 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+            >
+              {{ readableTime }}
+            </span>
+          </div>
+        </div>
+        <div
+          class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
+        >
+          <span
+            v-dompurify-html="fileNameFromDataUrl"
+            class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+          />
+        </div>
+        <div
+          class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
+        >
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="zoom-in"
+            @click="onZoom(0.1)"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="zoom-out"
+            @click="onZoom(-0.1)"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-rotate-counter-clockwise"
+            @click="onRotate('counter-clockwise')"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-rotate-clockwise"
+            @click="onRotate('clockwise')"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-download"
+            @click="onClickDownload"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="dismiss"
+            @click="onClose"
+          />
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-full h-full">
+        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            class="z-10"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            icon="chevron-left"
+            :disabled="activeImageIndex === 0"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex - 1],
+                activeImageIndex - 1
+              )
+            "
+          />
+        </div>
+        <div class="flex flex-col items-center justify-center w-full h-full">
+          <div>
+            <img
+              v-if="isImage"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              class="mx-auto my-0 duration-150 ease-in-out transform modal-image skip-context-menu"
+              :style="imageRotationStyle"
+              @click.stop="onClickZoomImage"
+              @wheel.stop="onWheelImageZoom"
+            />
+            <video
+              v-if="isVideo"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              controls
+              playsInline
+              class="mx-auto my-0 modal-video skip-context-menu"
+              @click.stop
+            />
+            <audio
+              v-if="isAudio"
+              :key="activeAttachment.message_id"
+              controls
+              class="skip-context-menu"
+              @click.stop
+            >
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+            </audio>
+          </div>
+        </div>
+        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            class="z-10"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            :disabled="activeImageIndex === allAttachments.length - 1"
+            icon="chevron-right"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex + 1],
+                activeImageIndex + 1
+              )
+            "
+          />
+        </div>
+      </div>
+      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
+        <div
+          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
+        >
+          <span class="count">
+            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index 042e25838..9d15fc884 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -1,53 +1,3 @@
-<template>
-  <div
-    v-if="hasSlaThreshold"
-    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
-    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
-  >
-    <div
-      v-on-clickaway="closeSlaPopover"
-      class="flex items-center w-full truncate"
-      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
-      @mouseover="openSlaPopover()"
-    >
-      <div
-        class="flex items-center gap-1"
-        :class="
-          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
-        "
-      >
-        <fluent-icon
-          size="14"
-          :icon="slaStatus.icon"
-          type="outline"
-          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
-          class="flex-shrink-0"
-          :class="slaTextStyles"
-        />
-        <span
-          v-if="showExtendedInfo"
-          class="text-xs font-medium"
-          :class="slaTextStyles"
-        >
-          {{ slaStatusText }}
-        </span>
-      </div>
-      <span
-        class="text-xs font-medium"
-        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
-      >
-        {{ slaStatus.threshold }}
-      </span>
-    </div>
-    <SLA-popover-card
-      v-if="showSlaPopoverCard"
-      :sla-missed-events="slaEvents"
-      class="right-0 top-7"
-    />
-  </div>
-</template>
-
 <script>
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
@@ -152,3 +102,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
+    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
+  >
+    <div
+      v-on-clickaway="closeSlaPopover"
+      class="flex items-center w-full truncate"
+      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
+      @mouseover="openSlaPopover()"
+    >
+      <div
+        class="flex items-center gap-1"
+        :class="
+          showExtendedInfo &&
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+        "
+      >
+        <fluent-icon
+          size="14"
+          :icon="slaStatus.icon"
+          type="outline"
+          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
+          class="flex-shrink-0"
+          :class="slaTextStyles"
+        />
+        <span
+          v-if="showExtendedInfo"
+          class="text-xs font-medium"
+          :class="slaTextStyles"
+        >
+          {{ slaStatusText }}
+        </span>
+      </div>
+      <span
+        class="text-xs font-medium"
+        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
+      >
+        {{ slaStatus.threshold }}
+      </span>
+    </div>
+    <SLAPopoverCard
+      v-if="showSlaPopoverCard"
+      :sla-missed-events="slaEvents"
+      class="right-0 top-7"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
index 3affa52c8..82774cbe0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
@@ -14,6 +14,7 @@ defineProps({
 const formatDate = timestamp =>
   format(fromUnixTime(timestamp), 'MMM dd, yyyy, hh:mm a');
 </script>
+
 <template>
   <div class="flex justify-between w-full">
     <span
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 655a42948..6b1c66d02 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -4,8 +4,6 @@ import { ref, computed } from 'vue';
 import wootConstants from 'dashboard/constants/globals';
 import SLAEventItem from './SLAEventItem.vue';
 
-const { SLA_MISS_TYPES } = wootConstants;
-
 const props = defineProps({
   slaMissedEvents: {
     type: Array,
@@ -13,6 +11,8 @@ const props = defineProps({
   },
 });
 
+const { SLA_MISS_TYPES } = wootConstants;
+
 const shouldShowAllNrts = ref(false);
 
 const frtMisses = computed(() =>
@@ -37,6 +37,7 @@ const toggleShowAllNRT = () => {
   shouldShowAllNrts.value = !shouldShowAllNrts.value;
 };
 </script>
+
 <template>
   <div
     class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
@@ -44,12 +45,12 @@ const toggleShowAllNRT = () => {
     <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
-    <SLA-event-item
+    <SLAEventItem
       v-if="frtMisses.length"
       :label="$t('SLA.EVENTS.FRT')"
       :items="frtMisses"
     />
-    <SLA-event-item
+    <SLAEventItem
       v-if="nrtMisses.length"
       :label="$t('SLA.EVENTS.NRT')"
       :items="nrtMisses"
@@ -75,8 +76,8 @@ const toggleShowAllNRT = () => {
           </woot-button>
         </div>
       </template>
-    </SLA-event-item>
-    <SLA-event-item
+    </SLAEventItem>
+    <SLAEventItem
       v-if="rtMisses.length"
       :label="$t('SLA.EVENTS.RT')"
       :items="rtMisses"
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index ca07fb6fc..fc9ec29fe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -1,76 +1,3 @@
-<template>
-  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
-    <menu-item
-      v-if="!hasUnreadMessages"
-      :option="unreadOption"
-      variant="icon"
-      @click="$emit('mark-as-unread')"
-    />
-    <template v-for="option in statusMenuConfig">
-      <menu-item
-        v-if="show(option.key)"
-        :key="option.key"
-        :option="option"
-        variant="icon"
-        @click="toggleStatus(option.key, null)"
-      />
-    </template>
-    <menu-item
-      v-if="showSnooze"
-      :option="snoozeOption"
-      variant="icon"
-      @click="snoozeConversation()"
-    />
-
-    <menu-item-with-submenu :option="priorityConfig">
-      <menu-item
-        v-for="(option, i) in priorityConfig.options"
-        :key="i"
-        :option="option"
-        @click="assignPriority(option.key)"
-      />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="labelMenuConfig"
-      :sub-menu-available="!!labels.length"
-    >
-      <menu-item
-        v-for="label in labels"
-        :key="label.id"
-        :option="generateMenuLabelConfig(label, 'label')"
-        variant="label"
-        @click="$emit('assign-label', label)"
-      />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="agentMenuConfig"
-      :sub-menu-available="!!assignableAgents.length"
-    >
-      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
-      <template v-else>
-        <menu-item
-          v-for="agent in assignableAgents"
-          :key="agent.id"
-          :option="generateMenuLabelConfig(agent, 'agent')"
-          variant="agent"
-          @click="$emit('assign-agent', agent)"
-        />
-      </template>
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="teamMenuConfig"
-      :sub-menu-available="!!teams.length"
-    >
-      <menu-item
-        v-for="team in teams"
-        :key="team.id"
-        :option="generateMenuLabelConfig(team, 'team')"
-        @click="$emit('assign-team', team)"
-      />
-    </menu-item-with-submenu>
-  </div>
-</template>
-
 <script>
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
@@ -219,7 +146,7 @@ export default {
   },
   methods: {
     toggleStatus(status, snoozedUntil) {
-      this.$emit('update-conversation', status, snoozedUntil);
+      this.$emit('updateConversation', status, snoozedUntil);
     },
     async snoozeConversation() {
       await this.$store.dispatch('setContextMenuChatId', this.chatId);
@@ -227,7 +154,7 @@ export default {
       ninja.open({ parent: 'snooze_conversation' });
     },
     assignPriority(priority) {
-      this.$emit('assign-priority', priority);
+      this.$emit('assignPriority', priority);
     },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
@@ -250,3 +177,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="p-1 bg-white rounded-md shadow-xl dark:bg-slate-700">
+    <MenuItem
+      v-if="!hasUnreadMessages"
+      :option="unreadOption"
+      variant="icon"
+      @click="$emit('markAsUnread')"
+    />
+    <template v-for="option in statusMenuConfig">
+      <MenuItem
+        v-if="show(option.key)"
+        :key="option.key"
+        :option="option"
+        variant="icon"
+        @click="toggleStatus(option.key, null)"
+      />
+    </template>
+    <MenuItem
+      v-if="showSnooze"
+      :option="snoozeOption"
+      variant="icon"
+      @click="snoozeConversation()"
+    />
+
+    <MenuItemWithSubmenu :option="priorityConfig">
+      <MenuItem
+        v-for="(option, i) in priorityConfig.options"
+        :key="i"
+        :option="option"
+        @click="assignPriority(option.key)"
+      />
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="labelMenuConfig"
+      :sub-menu-available="!!labels.length"
+    >
+      <MenuItem
+        v-for="label in labels"
+        :key="label.id"
+        :option="generateMenuLabelConfig(label, 'label')"
+        variant="label"
+        @click="$emit('assignLabel', label)"
+      />
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="agentMenuConfig"
+      :sub-menu-available="!!assignableAgents.length"
+    >
+      <AgentLoadingPlaceholder v-if="assignableAgentsUiFlags.isFetching" />
+      <template v-else>
+        <MenuItem
+          v-for="agent in assignableAgents"
+          :key="agent.id"
+          :option="generateMenuLabelConfig(agent, 'agent')"
+          variant="agent"
+          @click="$emit('assignAgent', agent)"
+        />
+      </template>
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="teamMenuConfig"
+      :sub-menu-available="!!teams.length"
+    >
+      <MenuItem
+        v-for="team in teams"
+        :key="team.id"
+        :option="generateMenuLabelConfig(team, 'team')"
+        @click="$emit('assignTeam', team)"
+      />
+    </MenuItemWithSubmenu>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
index 17962a169..f62117f96 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="agent-placeholder">
-    <spinner />
-    <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -15,6 +8,13 @@ export default {
 };
 </script>
 
+<template>
+  <div class="agent-placeholder">
+    <Spinner />
+    <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .agent-placeholder {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 0a132de73..578618e03 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    class="menu text-slate-800 dark:text-slate-100"
-    role="button"
-    @click.stop="$emit('click')"
-  >
-    <fluent-icon
-      v-if="variant === 'icon' && option.icon"
-      :icon="option.icon"
-      size="14"
-      class="menu-icon"
-    />
-    <span
-      v-if="variant === 'label' && option.color"
-      class="label-pill"
-      :style="{ backgroundColor: option.color }"
-    />
-    <thumbnail
-      v-if="variant === 'agent'"
-      :username="option.label"
-      :src="option.thumbnail"
-      :status="option.status"
-      size="20px"
-      class="agent-thumbnail"
-    />
-    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
-      {{ option.label }}
-    </p>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
@@ -48,6 +17,37 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="menu text-slate-800 dark:text-slate-100"
+    role="button"
+    @click.stop="$emit('click')"
+  >
+    <fluent-icon
+      v-if="variant === 'icon' && option.icon"
+      :icon="option.icon"
+      size="14"
+      class="menu-icon"
+    />
+    <span
+      v-if="variant === 'label' && option.color"
+      class="label-pill"
+      :style="{ backgroundColor: option.color }"
+    />
+    <Thumbnail
+      v-if="variant === 'agent'"
+      :username="option.label"
+      :src="option.thumbnail"
+      :status="option.status"
+      size="20px"
+      class="agent-thumbnail"
+    />
+    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
+      {{ option.label }}
+    </p>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .menu {
   width: calc(var(--space-mega) * 2);
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 619b5aeab..37fa5a36c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
@@ -17,21 +32,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    subMenuAvailable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .menu-with-submenu {
   min-width: calc(6.25rem * 2);
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index 115cb64ff..889051674 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -1,93 +1,3 @@
-<template>
-  <li
-    v-if="shouldShowSuggestions"
-    class="label-suggestion right"
-    @mouseover="isHovered = true"
-    @mouseleave="isHovered = false"
-  >
-    <div class="wrap">
-      <div class="label-suggestion--container">
-        <h6 class="label-suggestion--title">Suggested labels</h6>
-        <div class="label-suggestion--options">
-          <button
-            v-for="label in preparedLabels"
-            :key="label.title"
-            v-tooltip.top="{
-              content: selectedLabels.includes(label.title)
-                ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
-                : labelTooltip,
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            class="label-suggestion--option"
-            @click="pushOrAddLabel(label.title)"
-          >
-            <woot-label
-              variant="dashed"
-              v-bind="label"
-              :bg-color="
-                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
-              "
-            />
-          </button>
-          <woot-button
-            v-if="preparedLabels.length === 1"
-            v-tooltip.top="{
-              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            variant="smooth"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
-            @click="dismissSuggestions"
-          />
-        </div>
-        <div v-if="preparedLabels.length > 1">
-          <woot-button
-            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
-            class="label--add"
-            icon="add"
-            size="tiny"
-            @click="addAllLabels"
-          >
-            {{ addButtonText }}
-          </woot-button>
-          <woot-button
-            v-tooltip.top="{
-              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            variant="smooth"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
-            @click="dismissSuggestions"
-          />
-        </div>
-      </div>
-      <div class="sender--info has-tooltip" data-original-title="null">
-        <woot-thumbnail
-          v-tooltip.top="{
-            content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
-            delay: { show: 600, hide: 0 },
-            hideOnClick: true,
-          }"
-          size="16px"
-        >
-          <avatar class="user-thumbnail thumbnail-rounded">
-            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
-          </avatar>
-        </woot-thumbnail>
-      </div>
-    </div>
-  </li>
-</template>
-
 <script>
 // components
 import WootButton from '../../../ui/WootButton.vue';
@@ -229,6 +139,98 @@ export default {
 };
 </script>
 
+<template>
+  <li
+    v-if="shouldShowSuggestions"
+    class="label-suggestion right"
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div class="wrap">
+      <div class="label-suggestion--container">
+        <h6 class="label-suggestion--title">
+          {{ $t('LABEL_MGMT.SUGGESTIONS.SUGGESTED_LABELS') }}
+        </h6>
+        <div class="label-suggestion--options">
+          <button
+            v-for="label in preparedLabels"
+            :key="label.title"
+            v-tooltip.top="{
+              content: selectedLabels.includes(label.title)
+                ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
+                : labelTooltip,
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            class="label-suggestion--option"
+            @click="pushOrAddLabel(label.title)"
+          >
+            <woot-label
+              variant="dashed"
+              v-bind="label"
+              :bg-color="
+                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
+              "
+            />
+          </button>
+          <WootButton
+            v-if="preparedLabels.length === 1"
+            v-tooltip.top="{
+              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            variant="smooth"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
+            class="label--add"
+            icon="dismiss"
+            size="tiny"
+            @click="dismissSuggestions"
+          />
+        </div>
+        <div v-if="preparedLabels.length > 1">
+          <WootButton
+            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
+            class="label--add"
+            icon="add"
+            size="tiny"
+            @click="addAllLabels"
+          >
+            {{ addButtonText }}
+          </WootButton>
+          <WootButton
+            v-tooltip.top="{
+              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
+            variant="smooth"
+            class="label--add"
+            icon="dismiss"
+            size="tiny"
+            @click="dismissSuggestions"
+          />
+        </div>
+      </div>
+      <div class="sender--info has-tooltip" data-original-title="null">
+        <woot-thumbnail
+          v-tooltip.top="{
+            content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
+            delay: { show: 600, hide: 0 },
+            hideOnClick: true,
+          }"
+          size="16px"
+        >
+          <Avatar class="user-thumbnail thumbnail-rounded">
+            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
+          </Avatar>
+        </woot-thumbnail>
+      </div>
+    </div>
+  </li>
+</template>
+
 <style scoped lang="scss">
 .wrap {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 4dd06f673..c1565ea90 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -1,102 +1,3 @@
-<template>
-  <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
-    <div class="triangle">
-      <svg height="12" viewBox="0 0 24 12" width="24">
-        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
-      </svg>
-    </div>
-    <div class="header flex items-center justify-between">
-      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
-    </div>
-    <div class="container">
-      <div
-        v-if="assignableAgentsUiFlags.isFetching"
-        class="agent__list-loading"
-      >
-        <spinner />
-        <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
-      </div>
-      <div v-else class="agent__list-container">
-        <ul v-if="!selectedAgent">
-          <li class="search-container">
-            <div
-              class="agent-list-search h-8 flex justify-between items-center gap-2"
-            >
-              <fluent-icon icon="search" class="search-icon" size="16" />
-              <input
-                ref="search"
-                v-model="query"
-                type="search"
-                placeholder="Search"
-                class="agent--search_input"
-              />
-            </div>
-          </li>
-          <li v-for="agent in filteredAgents" :key="agent.id">
-            <div class="agent-list-item" @click="assignAgent(agent)">
-              <thumbnail
-                :src="agent.thumbnail"
-                :status="agent.availability_status"
-                :username="agent.name"
-                size="22px"
-              />
-              <span class="my-0 text-slate-800 dark:text-slate-75">
-                {{ agent.name }}
-              </span>
-            </div>
-          </li>
-        </ul>
-        <div v-else class="agent-confirmation-container">
-          <p v-if="selectedAgent.id">
-            {{
-              $t('BULK_ACTION.ASSIGN_CONFIRMATION_LABEL', {
-                conversationCount,
-                conversationLabel,
-              })
-            }}
-            <strong>
-              {{ selectedAgent.name }}
-            </strong>
-            <span>?</span>
-          </p>
-          <p v-else>
-            {{
-              $t('BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL', {
-                conversationCount,
-                conversationLabel,
-              })
-            }}
-          </p>
-          <div class="agent-confirmation-actions">
-            <woot-button
-              color-scheme="primary"
-              variant="smooth"
-              @click="goBack"
-            >
-              {{ $t('BULK_ACTION.GO_BACK_LABEL') }}
-            </woot-button>
-            <woot-button
-              color-scheme="primary"
-              variant="flat"
-              :is-loading="uiFlags.isUpdating"
-              @click="submit"
-            >
-              {{ $t('BULK_ACTION.YES') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -127,7 +28,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'bulkActions/getUIFlags',
-      inboxes: 'inboxes/getInboxes',
       assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     filteredAgents() {
@@ -184,6 +84,104 @@ export default {
 };
 </script>
 
+<template>
+  <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between header">
+      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="container">
+      <div
+        v-if="assignableAgentsUiFlags.isFetching"
+        class="agent__list-loading"
+      >
+        <Spinner />
+        <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
+      </div>
+      <div v-else class="agent__list-container">
+        <ul v-if="!selectedAgent">
+          <li class="search-container">
+            <div
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
+            >
+              <fluent-icon icon="search" class="search-icon" size="16" />
+              <input
+                v-model="query"
+                type="search"
+                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+                class="agent--search_input"
+              />
+            </div>
+          </li>
+          <li v-for="agent in filteredAgents" :key="agent.id">
+            <div class="agent-list-item" @click="assignAgent(agent)">
+              <Thumbnail
+                :src="agent.thumbnail"
+                :status="agent.availability_status"
+                :username="agent.name"
+                size="22px"
+              />
+              <span class="my-0 text-slate-800 dark:text-slate-75">
+                {{ agent.name }}
+              </span>
+            </div>
+          </li>
+        </ul>
+        <div v-else class="agent-confirmation-container">
+          <p v-if="selectedAgent.id">
+            {{
+              $t('BULK_ACTION.ASSIGN_CONFIRMATION_LABEL', {
+                conversationCount,
+                conversationLabel,
+              })
+            }}
+            <strong>
+              {{ selectedAgent.name }}
+            </strong>
+            <span>?</span>
+          </p>
+          <p v-else>
+            {{
+              $t('BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL', {
+                conversationCount,
+                conversationLabel,
+              })
+            }}
+          </p>
+          <div class="agent-confirmation-actions">
+            <woot-button
+              color-scheme="primary"
+              variant="smooth"
+              @click="goBack"
+            >
+              {{ $t('BULK_ACTION.GO_BACK_LABEL') }}
+            </woot-button>
+            <woot-button
+              color-scheme="primary"
+              variant="flat"
+              :is-loading="uiFlags.isUpdating"
+              @click="submit"
+            >
+              {{ $t('BULK_ACTION.YES') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .bulk-action__agents {
   @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 198774dad..746b932ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -1,112 +1,3 @@
-<template>
-  <div class="bulk-action__container">
-    <div class="flex items-center justify-between">
-      <label class="bulk-action__panel flex items-center justify-between">
-        <input
-          ref="selectAllCheck"
-          type="checkbox"
-          class="checkbox"
-          :checked="allConversationsSelected"
-          :indeterminate.prop="!allConversationsSelected"
-          @change="selectAll($event)"
-        />
-        <span>
-          {{
-            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-              conversationCount: conversations.length,
-            })
-          }}
-        </span>
-      </label>
-      <div class="bulk-action__actions flex gap-1 items-center">
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="tag"
-          @click="toggleLabelActions"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="repeat"
-          @click="toggleUpdateActions"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="person-assign"
-          @click="toggleAgentList"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="people-team-add"
-          @click="toggleTeamsList"
-        />
-      </div>
-      <transition name="popover-animation">
-        <label-actions
-          v-if="showLabelActions"
-          class="label-actions-box"
-          @assign="assignLabels"
-          @close="showLabelActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <update-actions
-          v-if="showUpdateActions"
-          class="update-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          :show-resolve="!showResolvedAction"
-          :show-reopen="!showOpenAction"
-          :show-snooze="!showSnoozedAction"
-          @update="updateConversations"
-          @close="showUpdateActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <agent-selector
-          v-if="showAgentsList"
-          class="agent-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="submit"
-          @close="showAgentsList = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <team-actions
-          v-if="showTeamsList"
-          class="team-actions-box"
-          @assign-team="assignTeam"
-          @close="showTeamsList = false"
-        />
-      </transition>
-    </div>
-    <div v-if="allConversationsSelected" class="bulk-action__alert">
-      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-    </div>
-    <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
@@ -218,22 +109,22 @@ export default {
       this.showCustomTimeSnoozeModal = false;
     },
     selectAll(e) {
-      this.$emit('select-all-conversations', e.target.checked);
+      this.$emit('selectAllConversations', e.target.checked);
     },
     submit(agent) {
-      this.$emit('assign-agent', agent);
+      this.$emit('assignAgent', agent);
     },
     updateConversations(status, snoozedUntil) {
-      this.$emit('update-conversations', status, snoozedUntil);
+      this.$emit('updateConversations', status, snoozedUntil);
     },
     assignLabels(labels) {
-      this.$emit('assign-labels', labels);
+      this.$emit('assignLabels', labels);
     },
     assignTeam(team) {
-      this.$emit('assign-team', team);
+      this.$emit('assignTeam', team);
     },
     resolveConversations() {
-      this.$emit('resolve-conversations');
+      this.$emit('resolveConversations');
     },
     toggleUpdateActions() {
       this.showUpdateActions = !this.showUpdateActions;
@@ -251,6 +142,114 @@ export default {
 };
 </script>
 
+<template>
+  <div class="bulk-action__container">
+    <div class="flex items-center justify-between">
+      <label class="flex items-center justify-between bulk-action__panel">
+        <input
+          type="checkbox"
+          class="checkbox"
+          :checked="allConversationsSelected"
+          :indeterminate.prop="!allConversationsSelected"
+          @change="selectAll($event)"
+        />
+        <span>
+          {{
+            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+              conversationCount: conversations.length,
+            })
+          }}
+        </span>
+      </label>
+      <div class="flex items-center gap-1 bulk-action__actions">
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="tag"
+          @click="toggleLabelActions"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="repeat"
+          @click="toggleUpdateActions"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="person-assign"
+          @click="toggleAgentList"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="people-team-add"
+          @click="toggleTeamsList"
+        />
+      </div>
+      <transition name="popover-animation">
+        <LabelActions
+          v-if="showLabelActions"
+          class="label-actions-box"
+          @assign="assignLabels"
+          @close="showLabelActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <UpdateActions
+          v-if="showUpdateActions"
+          class="update-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          :show-resolve="!showResolvedAction"
+          :show-reopen="!showOpenAction"
+          :show-snooze="!showSnoozedAction"
+          @update="updateConversations"
+          @close="showUpdateActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <AgentSelector
+          v-if="showAgentsList"
+          class="agent-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          @select="submit"
+          @close="showAgentsList = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <TeamActions
+          v-if="showTeamsList"
+          class="team-actions-box"
+          @assignTeam="assignTeam"
+          @close="showTeamsList = false"
+        />
+      </transition>
+    </div>
+    <div v-if="allConversationsSelected" class="bulk-action__alert">
+      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+    </div>
+    <woot-modal
+      :show.sync="showCustomTimeSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <CustomSnoozeModal
+        @close="hideCustomSnoozeModal"
+        @chooseTime="customSnoozeTime"
+      />
+    </woot-modal>
+  </div>
+</template>
+
 <style scoped lang="scss">
 // For RTL direction view
 .app-rtl--wrapper {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 80224532a..242369e5e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -1,78 +1,3 @@
-<template>
-  <div v-on-clickaway="onClose" class="labels-container">
-    <div class="triangle">
-      <svg height="12" viewBox="0 0 24 12" width="24">
-        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
-      </svg>
-    </div>
-    <div class="header flex items-center justify-between">
-      <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
-    </div>
-    <div class="labels-list">
-      <header class="labels-list__header">
-        <div
-          class="label-list-search h-8 flex justify-between items-center gap-2"
-        >
-          <fluent-icon icon="search" class="search-icon" size="16" />
-          <input
-            ref="search"
-            v-model="query"
-            type="search"
-            placeholder="Search"
-            class="label--search_input"
-          />
-        </div>
-      </header>
-      <ul class="labels-list__body">
-        <li
-          v-for="label in filteredLabels"
-          :key="label.id"
-          class="label__list-item"
-        >
-          <label
-            class="item"
-            :class="{ 'label-selected': isLabelSelected(label.title) }"
-          >
-            <input
-              v-model="selectedLabels"
-              type="checkbox"
-              :value="label.title"
-              class="label-checkbox"
-            />
-            <span
-              class="label-title overflow-hidden whitespace-nowrap text-ellipsis"
-            >
-              {{ label.title }}
-            </span>
-            <span
-              class="label-pill"
-              :style="{ backgroundColor: label.color }"
-            />
-          </label>
-        </li>
-      </ul>
-      <footer class="labels-list__footer">
-        <woot-button
-          size="small"
-          is-expanded
-          color-scheme="primary"
-          :disabled="!selectedLabels.length"
-          @click="$emit('assign', selectedLabels)"
-        >
-          <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
-        </woot-button>
-      </footer>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -105,6 +30,80 @@ export default {
 };
 </script>
 
+<template>
+  <div v-on-clickaway="onClose" class="labels-container">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between header">
+      <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="labels-list">
+      <header class="labels-list__header">
+        <div
+          class="flex items-center justify-between h-8 gap-2 label-list-search"
+        >
+          <fluent-icon icon="search" class="search-icon" size="16" />
+          <input
+            v-model="query"
+            type="search"
+            :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+            class="label--search_input"
+          />
+        </div>
+      </header>
+      <ul class="labels-list__body">
+        <li
+          v-for="label in filteredLabels"
+          :key="label.id"
+          class="label__list-item"
+        >
+          <label
+            class="item"
+            :class="{ 'label-selected': isLabelSelected(label.title) }"
+          >
+            <input
+              v-model="selectedLabels"
+              type="checkbox"
+              :value="label.title"
+              class="label-checkbox"
+            />
+            <span
+              class="overflow-hidden label-title whitespace-nowrap text-ellipsis"
+            >
+              {{ label.title }}
+            </span>
+            <span
+              class="label-pill"
+              :style="{ backgroundColor: label.color }"
+            />
+          </label>
+        </li>
+      </ul>
+      <footer class="labels-list__footer">
+        <woot-button
+          size="small"
+          is-expanded
+          color-scheme="primary"
+          :disabled="!selectedLabels.length"
+          @click="$emit('assign', selectedLabels)"
+        >
+          <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
+        </woot-button>
+      </footer>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .labels-list {
   @apply flex flex-col max-h-[15rem] min-h-[auto];
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index fcfaa61df..e72b7fa69 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -1,3 +1,34 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  data() {
+    return {
+      query: '',
+      selectedteams: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ teams: 'teams/getTeams' }),
+    filteredTeams() {
+      return [
+        { name: 'None', id: 0 },
+        ...this.teams.filter(team =>
+          team.name.toLowerCase().includes(this.query.toLowerCase())
+        ),
+      ];
+    },
+  },
+  methods: {
+    assignTeam(key) {
+      this.$emit('assignTeam', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onClose" class="bulk-action__teams">
     <div class="triangle">
@@ -5,7 +36,7 @@
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex items-center justify-between">
+    <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -20,14 +51,13 @@
         <ul>
           <li class="search-container">
             <div
-              class="agent-list-search h-8 flex justify-between items-center gap-2"
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
-                ref="search"
                 v-model="query"
                 type="search"
-                placeholder="Search"
+                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
                 class="agent--search_input"
               />
             </div>
@@ -58,37 +88,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  data() {
-    return {
-      query: '',
-      selectedteams: [],
-    };
-  },
-  computed: {
-    ...mapGetters({ teams: 'teams/getTeams' }),
-    filteredTeams() {
-      return [
-        { name: 'None', id: 0 },
-        ...this.teams.filter(team =>
-          team.name.toLowerCase().includes(this.query.toLowerCase())
-        ),
-      ];
-    },
-  },
-  methods: {
-    assignTeam(key) {
-      this.$emit('assign-team', key);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .bulk-action__teams {
   @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 0653fc0cc..6deb92683 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -5,19 +5,7 @@ import { ref } from 'vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
-const { t } = useI18n();
-
-const emits = defineEmits(['update', 'close']);
-
 const props = defineProps({
-  selectedInboxes: {
-    type: Array,
-    default: () => [],
-  },
-  conversationCount: {
-    type: Number,
-    default: 0,
-  },
   showResolve: {
     type: Boolean,
     default: true,
@@ -32,6 +20,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['update', 'close']);
+
+const { t } = useI18n();
+
 const actions = ref([
   { icon: 'checkmark', key: 'resolved' },
   { icon: 'arrow-redo', key: 'open' },
@@ -45,12 +37,12 @@ const updateConversations = key => {
     const ninja = document.querySelector('ninja-keys');
     ninja?.open({ parent: 'bulk_action_snooze_conversation' });
   } else {
-    emits('update', key);
+    emit('update', key);
   }
 };
 
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const showAction = key => {
@@ -75,7 +67,7 @@ const actionLabel = key => {
 <template>
   <div
     v-on-clickaway="onClose"
-    class="absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md"
+    class="absolute z-20 w-auto origin-top-right bg-white border border-solid rounded-lg shadow-md right-2 top-12 dark:bg-slate-800 border-slate-50 dark:border-slate-700"
   >
     <div
       class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
@@ -102,9 +94,9 @@ const actionLabel = key => {
       />
     </div>
     <div class="px-2.5 pt-0 pb-2.5">
-      <woot-dropdown-menu class="m-0 list-none">
+      <WootDropdownMenu class="m-0 list-none">
         <template v-for="action in actions">
-          <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
+          <WootDropdownItem v-if="showAction(action.key)" :key="action.key">
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -114,9 +106,9 @@ const actionLabel = key => {
             >
               {{ actionLabel(action.key) }}
             </woot-button>
-          </woot-dropdown-item>
+          </WootDropdownItem>
         </template>
-      </woot-dropdown-menu>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 079d1c7bf..885b59a78 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -1,51 +1,18 @@
-<template>
-  <div
-    v-if="activeLabels.length || $slots.before"
-    ref="labelContainer"
-    v-resize="computeVisibleLabelPosition"
-  >
-    <div
-      class="flex items-end flex-shrink min-w-0 gap-y-1"
-      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
-    >
-      <slot name="before" />
-      <woot-label
-        v-for="(label, index) in activeLabels"
-        :key="label.id"
-        :title="label.title"
-        :description="label.description"
-        :color="label.color"
-        variant="smooth"
-        class="!mb-0 max-w-[calc(100%-0.5rem)]"
-        small
-        :class="{ hidden: !showAllLabels && index > labelPosition }"
-      />
-      <woot-button
-        v-if="showExpandLabelButton"
-        :title="
-          showAllLabels
-            ? $t('CONVERSATION.CARD.HIDE_LABELS')
-            : $t('CONVERSATION.CARD.SHOW_LABELS')
-        "
-        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
-        color-scheme="secondary"
-        variant="hollow"
-        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
-        size="tiny"
-        @click="onShowLabels"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
 export default {
   mixins: [conversationLabelMixin],
   props: {
+    // conversationId prop is used in /conversation/labelMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
     conversationId: {
       type: Number,
       required: true,
     },
+    // conversationLabels prop is used in /conversation/labelMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
     conversationLabels: {
       type: String,
       required: false,
@@ -100,6 +67,46 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="activeLabels.length || $slots.before"
+    ref="labelContainer"
+    v-resize="computeVisibleLabelPosition"
+  >
+    <div
+      class="flex items-end flex-shrink min-w-0 gap-y-1"
+      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
+    >
+      <slot name="before" />
+      <woot-label
+        v-for="(label, index) in activeLabels"
+        :key="label.id"
+        :title="label.title"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        class="!mb-0 max-w-[calc(100%-0.5rem)]"
+        small
+        :class="{ hidden: !showAllLabels && index > labelPosition }"
+      />
+      <woot-button
+        v-if="showExpandLabelButton"
+        :title="
+          showAllLabels
+            ? $t('CONVERSATION.CARD.HIDE_LABELS')
+            : $t('CONVERSATION.CARD.SHOW_LABELS')
+        "
+        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
+        color-scheme="secondary"
+        variant="hollow"
+        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+        size="tiny"
+        @click="onShowLabels"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .show-more--button {
   @apply h-5;
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index e2859e890..a30bcbc77 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -1,63 +1,3 @@
-<template>
-  <div>
-    <woot-input
-      v-model="formState.title"
-      :class="{ error: v$.title.$error }"
-      class="w-full"
-      :styles="{ ...inputStyles, padding: '6px 12px' }"
-      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
-      :placeholder="
-        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
-      "
-      :error="nameError"
-      @input="v$.title.$touch"
-    />
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
-      <textarea
-        v-model="formState.description"
-        :style="{ ...inputStyles, padding: '8px 12px' }"
-        rows="3"
-        class="text-sm"
-        :placeholder="
-          $t(
-            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
-          )
-        "
-      />
-    </label>
-    <div class="flex flex-col gap-4">
-      <searchable-dropdown
-        v-for="dropdown in dropdowns"
-        :key="dropdown.type"
-        :type="dropdown.type"
-        :value="formState[dropdown.type]"
-        :label="$t(dropdown.label)"
-        :items="dropdown.items"
-        :placeholder="$t(dropdown.placeholder)"
-        :error="dropdown.error"
-        @change="onChange"
-      />
-    </div>
-    <div class="flex items-center justify-end w-full gap-2 mt-8">
-      <woot-button
-        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
-        @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
-        :is-loading="isCreating"
-        @click.prevent="createIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { reactive, computed, onMounted, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -69,10 +9,6 @@ import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import SearchableDropdown from './SearchableDropdown.vue';
 
 const props = defineProps({
-  accountId: {
-    type: [Number, String],
-    required: true,
-  },
   conversationId: {
     type: [Number, String],
     required: true,
@@ -266,3 +202,63 @@ const createIssue = async () => {
 
 onMounted(getTeams);
 </script>
+
+<template>
+  <div>
+    <woot-input
+      v-model="formState.title"
+      :class="{ error: v$.title.$error }"
+      class="w-full"
+      :styles="{ ...inputStyles, padding: '6px 12px' }"
+      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
+      :placeholder="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
+      "
+      :error="nameError"
+      @input="v$.title.$touch"
+    />
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
+      <textarea
+        v-model="formState.description"
+        :style="{ ...inputStyles, padding: '8px 12px' }"
+        rows="3"
+        class="text-sm"
+        :placeholder="
+          $t(
+            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
+          )
+        "
+      />
+    </label>
+    <div class="flex flex-col gap-4">
+      <SearchableDropdown
+        v-for="dropdown in dropdowns"
+        :key="dropdown.type"
+        :type="dropdown.type"
+        :value="formState[dropdown.type]"
+        :label="$t(dropdown.label)"
+        :items="dropdown.items"
+        :placeholder="$t(dropdown.placeholder)"
+        :error="dropdown.error"
+        @change="onChange"
+      />
+    </div>
+    <div class="flex items-center justify-end w-full gap-2 mt-8">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isCreating"
+        @click.prevent="createIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index 589178853..139ca9792 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -1,3 +1,53 @@
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { computed, ref } from 'vue';
+import LinkIssue from './LinkIssue.vue';
+import CreateIssue from './CreateIssue.vue';
+
+const props = defineProps({
+  accountId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+
+const selectedTabIndex = ref(0);
+
+const title = computed(() => {
+  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
+  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
+    conversationId: props.conversation.id,
+    name,
+  });
+});
+
+const tabs = ref([
+  {
+    key: 0,
+    name: t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
+  },
+  {
+    key: 1,
+    name: t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE'),
+  },
+]);
+const onClose = () => {
+  emit('close');
+};
+
+const onClickTabChange = index => {
+  selectedTabIndex.value = index;
+};
+</script>
+
 <template>
   <div class="flex flex-col h-auto overflow-auto">
     <woot-modal-header
@@ -23,7 +73,7 @@
         </woot-tabs>
       </div>
       <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
-        <create-issue
+        <CreateIssue
           :account-id="accountId"
           :conversation-id="conversation.id"
           :title="title"
@@ -32,7 +82,7 @@
       </div>
 
       <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue
+        <LinkIssue
           :conversation-id="conversation.id"
           :title="title"
           @close="onClose"
@@ -41,52 +91,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import { useI18n } from 'dashboard/composables/useI18n';
-import { computed, ref } from 'vue';
-import LinkIssue from './LinkIssue.vue';
-import CreateIssue from './CreateIssue.vue';
-
-const props = defineProps({
-  accountId: {
-    type: [Number, String],
-    required: true,
-  },
-  conversation: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const selectedTabIndex = ref(0);
-
-const title = computed(() => {
-  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
-  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
-    conversationId: props.conversation.id,
-    name,
-  });
-});
-
-const emits = defineEmits(['close']);
-
-const tabs = ref([
-  {
-    key: 0,
-    name: t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
-  },
-  {
-    key: 1,
-    name: t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE'),
-  },
-]);
-const onClose = () => {
-  emits('close');
-};
-
-const onClickTabChange = index => {
-  selectedTabIndex.value = index;
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 3304f6040..8113ef29e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -4,13 +4,6 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.
 import IssueHeader from './IssueHeader.vue';
 import { computed } from 'vue';
 
-const priorityMap = {
-  1: 'Urgent',
-  2: 'High',
-  3: 'Medium',
-  4: 'Low',
-};
-
 const props = defineProps({
   issue: {
     type: Object,
@@ -22,7 +15,14 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['unlink-issue']);
+const emit = defineEmits(['unlinkIssue']);
+
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
 
 const formattedDate = computed(() => {
   const { createdAt } = props.issue;
@@ -50,7 +50,7 @@ const priorityLabel = computed(() => {
 });
 
 const unlinkIssue = () => {
-  emit('unlink-issue', props.linkId);
+  emit('unlinkIssue', props.linkId);
 };
 </script>
 
@@ -59,11 +59,11 @@ const unlinkIssue = () => {
     class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
   >
     <div class="flex flex-col w-full">
-      <issue-header
+      <IssueHeader
         :identifier="issue.identifier"
         :link-id="linkId"
         :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
+        @unlinkIssue="unlinkIssue"
       />
 
       <span class="mt-2 text-sm font-medium text-ash-900">
@@ -77,7 +77,7 @@ const unlinkIssue = () => {
       </span>
     </div>
     <div class="flex flex-row items-center h-6 gap-2">
-      <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
+      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
       <div v-if="assignee" class="w-px h-3 bg-ash-200" />
       <div class="flex items-center gap-1 py-1">
         <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
index add7b5608..3b2396a94 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -1,3 +1,29 @@
+<script setup>
+import { inject } from 'vue';
+const props = defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  issueUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlinkIssue']);
+
+const isUnlinking = inject('isUnlinking');
+
+const unlinkIssue = () => {
+  emit('unlinkIssue');
+};
+
+const openIssue = () => {
+  window.open(props.issueUrl, '_blank');
+};
+</script>
+
 <template>
   <div class="flex flex-row justify-between">
     <div
@@ -38,29 +64,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { inject } from 'vue';
-const props = defineProps({
-  identifier: {
-    type: String,
-    required: true,
-  },
-  issueUrl: {
-    type: String,
-    required: true,
-  },
-});
-
-const isUnlinking = inject('isUnlinking');
-
-const emit = defineEmits(['unlink-issue']);
-
-const unlinkIssue = () => {
-  emit('unlink-issue');
-};
-
-const openIssue = () => {
-  window.open(props.issueUrl, '_blank');
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 458871c38..87386f681 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -1,50 +1,3 @@
-<template>
-  <div
-    class="flex flex-col justify-between"
-    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
-  >
-    <filter-button
-      right-icon="chevron-down"
-      :button-text="linkIssueTitle"
-      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
-      @click="toggleDropdown"
-    >
-      <template v-if="shouldShowDropdown" #dropdown>
-        <filter-list-dropdown
-          v-if="issues"
-          v-on-clickaway="toggleDropdown"
-          :show-clear-filter="false"
-          :list-items="issues"
-          :active-filter-id="selectedOption.id"
-          :is-loading="isFetching"
-          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
-          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
-          enable-search
-          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-          @on-search="onSearch"
-          @click="onSelectIssue"
-        />
-      </template>
-    </filter-button>
-    <div class="flex items-center justify-end w-full gap-2 mt-2">
-      <woot-button
-        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
-        @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
-        :is-loading="isLinking"
-        @click.prevent="linkIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
@@ -65,7 +18,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['close']);
+const emit = defineEmits(['close']);
 
 const { t } = useI18n();
 const issues = ref([]);
@@ -96,7 +49,7 @@ const onSelectIssue = item => {
 };
 
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const onSearch = async value => {
@@ -141,3 +94,50 @@ const linkIssue = async () => {
   }
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-between"
+    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
+  >
+    <FilterButton
+      right-icon="chevron-down"
+      :button-text="linkIssueTitle"
+      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+      @click="toggleDropdown"
+    >
+      <template v-if="shouldShowDropdown" #dropdown>
+        <FilterListDropdown
+          v-if="issues"
+          v-on-clickaway="toggleDropdown"
+          :show-clear-filter="false"
+          :list-items="issues"
+          :active-filter-id="selectedOption.id"
+          :is-loading="isFetching"
+          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
+          enable-search
+          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+          @onSearch="onSearch"
+          @click="onSelectIssue"
+        />
+      </template>
+    </FilterButton>
+    <div class="flex items-center justify-end w-full gap-2 mt-2">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isLinking"
+        @click.prevent="linkIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
index 70167147b..dc7c03a2f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
@@ -1,43 +1,8 @@
-<template>
-  <div
-    class="flex w-full"
-    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
-  >
-    <label class="w-full" :class="{ error: hasError }">
-      {{ label }}
-      <filter-button
-        right-icon="chevron-down"
-        :button-text="selectedItemName"
-        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
-        @click="toggleDropdown"
-      >
-        <template v-if="shouldShowDropdown" #dropdown>
-          <filter-list-dropdown
-            v-on-clickaway="toggleDropdown"
-            :show-clear-filter="false"
-            :list-items="items"
-            :active-filter-id="selectedItemId"
-            :input-placeholder="placeholder"
-            enable-search
-            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-            @click="onSelect"
-          />
-        </template>
-      </filter-button>
-      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
-    </label>
-  </div>
-</template>
-
 <script setup>
 import { ref, computed, defineComponent } from 'vue';
 import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
-defineComponent({
-  name: 'SearchableDropdown',
-});
-
 const props = defineProps({
   type: { type: String, required: true },
   label: { type: String, default: null },
@@ -48,6 +13,11 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['change']);
+
+defineComponent({
+  name: 'SearchableDropdown',
+});
+
 const shouldShowDropdown = ref(false);
 
 const toggleDropdown = () => {
@@ -71,3 +41,34 @@ const selectedItemName = computed(
 
 const selectedItemId = computed(() => selectedItem.value?.id || null);
 </script>
+
+<template>
+  <div
+    class="flex w-full"
+    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
+  >
+    <label class="w-full" :class="{ error: hasError }">
+      {{ label }}
+      <FilterButton
+        right-icon="chevron-down"
+        :button-text="selectedItemName"
+        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+        @click="toggleDropdown"
+      >
+        <template v-if="shouldShowDropdown" #dropdown>
+          <FilterListDropdown
+            v-on-clickaway="toggleDropdown"
+            :show-clear-filter="false"
+            :list-items="items"
+            :active-filter-id="selectedItemId"
+            :input-placeholder="placeholder"
+            enable-search
+            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+            @click="onSelect"
+          />
+        </template>
+      </FilterButton>
+      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
+    </label>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index c7861b039..6d2c789c2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="relative" :class="{ group: linkedIssue }">
-    <woot-button
-      v-on-clickaway="closeIssue"
-      v-tooltip="tooltipText"
-      variant="clear"
-      color-scheme="secondary"
-      @click="openIssue"
-    >
-      <fluent-icon
-        icon="linear"
-        size="19"
-        class="text-[#5E6AD2]"
-        view-box="0 0 19 19"
-      />
-      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
-        {{ linkedIssue.issue.identifier }}
-      </span>
-    </woot-button>
-    <issue
-      v-if="linkedIssue"
-      :issue="linkedIssue.issue"
-      :link-id="linkedIssue.id"
-      class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
-    />
-    <woot-modal
-      :show.sync="shouldShowPopup"
-      :on-close="closePopup"
-      :close-on-backdrop-click="false"
-      class="!items-start [&>div]:!top-12 [&>div]:sticky"
-    >
-      <create-or-link-issue
-        :conversation="conversation"
-        :account-id="currentAccountId"
-        @close="closePopup"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script setup>
 import { computed, ref, onMounted, watch, defineComponent, provide } from 'vue';
 import { useAlert } from 'dashboard/composables';
@@ -49,10 +8,6 @@ import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
 import Issue from './Issue.vue';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 
-defineComponent({
-  name: 'Linear',
-});
-
 const props = defineProps({
   conversationId: {
     type: [Number, String],
@@ -60,6 +15,10 @@ const props = defineProps({
   },
 });
 
+defineComponent({
+  name: 'Linear',
+});
+
 const getters = useStoreGetters();
 const { t } = useI18n();
 
@@ -139,3 +98,44 @@ onMounted(() => {
   loadLinkedIssue();
 });
 </script>
+
+<template>
+  <div class="relative" :class="{ group: linkedIssue }">
+    <woot-button
+      v-on-clickaway="closeIssue"
+      v-tooltip="tooltipText"
+      variant="clear"
+      color-scheme="secondary"
+      @click="openIssue"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
+      />
+      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
+        {{ linkedIssue.issue.identifier }}
+      </span>
+    </woot-button>
+    <Issue
+      v-if="linkedIssue"
+      :issue="linkedIssue.issue"
+      :link-id="linkedIssue.id"
+      class="absolute right-0 top-[40px] invisible group-hover:visible"
+      @unlinkIssue="unlinkIssue"
+    />
+    <woot-modal
+      :show.sync="shouldShowPopup"
+      :on-close="closePopup"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <CreateOrLinkIssue
+        :conversation="conversation"
+        :account-id="currentAccountId"
+        @close="closePopup"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index e3dd8c239..f3c57155f 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -1,38 +1,3 @@
-<template>
-  <div>
-    <label>
-      <span v-if="label">{{ label }}</span>
-    </label>
-    <woot-thumbnail
-      v-if="src"
-      size="80px"
-      :src="src"
-      :username="usernameAvatar"
-    />
-    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
-      <woot-button
-        color-scheme="alert"
-        variant="hollow"
-        size="tiny"
-        type="button"
-        @click="onAvatarDelete"
-      >
-        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
-      </woot-button>
-    </div>
-    <label>
-      <input
-        id="file"
-        ref="file"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        @change="handleImageUpload"
-      />
-      <slot />
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -71,6 +36,41 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
+    <woot-thumbnail
+      v-if="src"
+      size="80px"
+      :src="src"
+      :username="usernameAvatar"
+    />
+    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
+      <woot-button
+        color-scheme="alert"
+        variant="hollow"
+        size="tiny"
+        type="button"
+        @click="onAvatarDelete"
+      >
+        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
+      </woot-button>
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        @change="handleImageUpload"
+      />
+      <slot />
+    </label>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .avatar-delete-btn {
   margin-top: var(--space-smaller);
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index 9ddaf3e5c..770f47d14 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -1,24 +1,3 @@
-<template>
-  <label class="input-container">
-    <span v-if="label">{{ label }}</span>
-    <input
-      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-      :value="value"
-      :type="type"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :style="styles"
-      @input="onChange"
-      @blur="onBlur"
-    />
-    <p v-if="helpText" class="help-text">{{ helpText }}</p>
-    <span v-if="error" class="message">
-      {{ error }}
-    </span>
-    <slot name="masked" />
-  </label>
-</template>
-
 <script>
 export default {
   props: {
@@ -65,6 +44,28 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="input-container">
+    <span v-if="label">{{ label }}</span>
+    <input
+      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+      :value="value"
+      :type="type"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :style="styles"
+      @input="onChange"
+      @blur="onBlur"
+    />
+    <p v-if="helpText" class="help-text">{{ helpText }}</p>
+    <span v-if="error" class="message">
+      {{ error }}
+    </span>
+    <slot name="masked" />
+  </label>
+</template>
+
 <style scoped lang="scss">
 .help-text {
   @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 6b09acbac..e08c52e1b 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -1,96 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative">
-    <div
-      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
-      :class="
-        error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
-      "
-    >
-      <div
-        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
-        @click.prevent="toggleCountryDropdown"
-      >
-        <h5 v-if="activeCountry" class="mb-0">
-          {{ activeCountry.emoji }}
-        </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        ref="phoneNumberInput"
-        :value="phoneNumber"
-        type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :style="styles"
-        @input="onChange"
-        @blur="onBlur"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="onOutsideClick"
-      tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
-      @keydown.prevent.up="moveUp"
-      @keydown.prevent.down="moveDown"
-      @keydown.prevent.enter="
-        onSelectCountry(filteredCountriesBySearch[selectedIndex])
-      "
-    >
-      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
-          @input="onSearchCountry"
-        />
-      </div>
-      <div
-        v-for="(country, index) in filteredCountriesBySearch"
-        ref="dropdownItem"
-        :key="index"
-        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
-        :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
-        }"
-        @click="onSelectCountry(country)"
-      >
-        <span class="text-base mr-1">{{ country.emoji }}</span>
-
-        <span
-          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
-        >
-          {{ country.name }}
-        </span>
-        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
-          country.dial_code
-        }}</span>
-      </div>
-      <div v-if="filteredCountriesBySearch.length === 0">
-        <span
-          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
-        >
-          No results found
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
@@ -258,3 +165,96 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative phone-input--wrap">
+    <div
+      class="flex items-center justify-start border border-solid rounded-md dark:bg-slate-900"
+      :class="
+        error
+          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
+          : 'mb-4 border-slate-200 dark:border-slate-600'
+      "
+    >
+      <div
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
+        @click.prevent="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry" class="mb-0">
+          {{ activeCountry.emoji }}
+        </h5>
+        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        ref="phoneNumberInput"
+        :value="phoneNumber"
+        type="tel"
+        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :style="styles"
+        @input="onChange"
+        @blur="onBlur"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="onOutsideClick"
+      tabindex="0"
+      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
+      @keydown.prevent.up="moveUp"
+      @keydown.prevent.down="moveDown"
+      @keydown.prevent.enter="
+        onSelectCountry(filteredCountriesBySearch[selectedIndex])
+      "
+    >
+      <div class="sticky top-0 p-1 bg-white dark:bg-slate-900">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          :placeholder="$t('GENERAL.PHONE_INPUT.PLACEHOLDER')"
+          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-2000 dark:!border-slate-6000"
+          @input="onSearchCountry"
+        />
+      </div>
+      <div
+        v-for="(country, index) in filteredCountriesBySearch"
+        ref="dropdownItem"
+        :key="index"
+        class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-slate-50 dark:hover:bg-slate-700"
+        :class="{
+          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
+          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+        }"
+        @click="onSelectCountry(country)"
+      >
+        <span class="mr-1 text-base">{{ country.emoji }}</span>
+
+        <span
+          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {{ country.name }}
+        </span>
+        <span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
+          country.dial_code
+        }}</span>
+      </div>
+      <div v-if="filteredCountriesBySearch.length === 0">
+        <span
+          class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
+        >
+          {{ $t('GENERAL.PHONE_INPUT.EMPTY_STATE') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index b8780773f..bd1bddbd0 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -1,45 +1,3 @@
-<template>
-  <div
-    ref="mentionsListContainer"
-    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
-  >
-    <ul class="vertical dropdown menu">
-      <woot-dropdown-item
-        v-for="(item, index) in items"
-        :id="`mention-item-${index}`"
-        :key="item.key"
-        class="!mb-0"
-        @mouseover="onHover(index)"
-      >
-        <button
-          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
-          :class="{
-            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
-          }"
-          @click="onListItemSelection(index)"
-        >
-          <p
-            class="text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 font-medium mb-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ item.description }}
-          </p>
-          <p
-            class="text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 mb-0 text-xs overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ variableKey(item) }}
-          </p>
-        </button>
-      </woot-dropdown-item>
-    </ul>
-  </div>
-</template>
-
 <script>
 import mentionSelectionKeyboardMixin from './mentionSelectionKeyboardMixin';
 export default {
@@ -93,7 +51,7 @@ export default {
       this.onSelect();
     },
     onSelect() {
-      this.$emit('mention-select', this.items[this.selectedIndex]);
+      this.$emit('mentionSelect', this.items[this.selectedIndex]);
     },
     variableKey(item = {}) {
       return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
@@ -102,6 +60,48 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    ref="mentionsListContainer"
+    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
+  >
+    <ul class="vertical dropdown menu">
+      <woot-dropdown-item
+        v-for="(item, index) in items"
+        :id="`mention-item-${index}`"
+        :key="item.key"
+        class="!mb-0"
+        @mouseover="onHover(index)"
+      >
+        <button
+          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
+          :class="{
+            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
+          }"
+          @click="onListItemSelection(index)"
+        >
+          <p
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ item.description }}
+          </p>
+          <p
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ variableKey(item) }}
+          </p>
+        </button>
+      </woot-dropdown-item>
+    </ul>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .mention--box {
   .dropdown-menu__item:last-child > button {
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
index e4ba7dd9e..e10f5b334 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
@@ -1,27 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="closeModal">
-    <woot-modal-header :header-title="title" :header-content="message" />
-    <form @submit.prevent="onConfirm">
-      <woot-input
-        v-model="value"
-        type="text"
-        :class="{ error: v$.value.$error }"
-        :placeholder="confirmPlaceHolderText"
-        @blur="v$.value.$touch"
-      />
-      <div class="button-wrapper">
-        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
-          {{ confirmText }}
-        </woot-button>
-        <woot-button class="clear" @click.prevent="closeModal">
-          {{ rejectText }}
-        </woot-button>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
@@ -80,11 +56,35 @@ export default {
   methods: {
     closeModal() {
       this.value = '';
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onConfirm() {
-      this.$emit('on-confirm');
+      this.$emit('onConfirm');
     },
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <Modal :show.sync="show" :on-close="closeModal">
+    <woot-modal-header :header-title="title" :header-content="message" />
+    <form @submit.prevent="onConfirm">
+      <woot-input
+        v-model="value"
+        type="text"
+        :class="{ error: v$.value.$error }"
+        :placeholder="confirmPlaceHolderText"
+        @blur="v$.value.$touch"
+      />
+      <div class="button-wrapper">
+        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
+          {{ confirmText }}
+        </woot-button>
+        <woot-button class="clear" @click.prevent="closeModal">
+          {{ rejectText }}
+        </woot-button>
+      </div>
+    </form>
+  </Modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
index 63765acc0..f1d9d1152 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -1,18 +1,3 @@
-<template>
-  <modal :show.sync="show" :on-close="cancel">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header :header-title="title" :header-content="description" />
-      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
-        <woot-button variant="clear" @click="cancel">
-          {{ cancelLabel }}
-        </woot-button>
-        <woot-button @click="confirm">
-          {{ confirmLabel }}
-        </woot-button>
-      </div>
-    </div>
-  </modal>
-</template>
 <script>
 import Modal from '../../Modal.vue';
 
@@ -64,3 +49,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Modal :show.sync="show" :on-close="cancel">
+    <div class="h-auto overflow-auto flex flex-col">
+      <woot-modal-header :header-title="title" :header-content="description" />
+      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
+        <woot-button variant="clear" @click="cancel">
+          {{ cancelLabel }}
+        </woot-button>
+        <woot-button @click="confirm">
+          {{ confirmLabel }}
+        </woot-button>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
index 5dbc440d5..a69e6dda7 100644
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -1,27 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="title"
-      :header-content="message"
-      :header-content-value="messageValue"
-    />
-    <div class="flex justify-end items-center gap-2 p-8">
-      <woot-button variant="clear" class="action-button" @click="onClose">
-        {{ rejectText }}
-      </woot-button>
-      <woot-button
-        color-scheme="alert"
-        class="action-button"
-        variant="smooth"
-        @click="onConfirm"
-      >
-        {{ confirmText }}
-      </woot-button>
-    </div>
-  </modal>
-</template>
-
 <script>
 import Modal from '../../Modal.vue';
 
@@ -41,6 +17,31 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="title"
+      :header-content="message"
+      :header-content-value="messageValue"
+    />
+    <div class="flex items-center justify-end gap-2 p-8">
+      <woot-button variant="clear" class="action-button" @click="onClose">
+        {{ rejectText }}
+      </woot-button>
+      <woot-button
+        color-scheme="alert"
+        class="action-button"
+        variant="smooth"
+        @click="onConfirm"
+      >
+        {{ confirmText }}
+      </woot-button>
+    </div>
+  </Modal>
+</template>
+
 <style lang="scss" scoped>
 .action-button {
   max-width: var(--space-giga);
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index ffaab7e61..4195c5b91 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -1,91 +1,3 @@
-<template>
-  <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"
-      />
-      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-4 mt-6">
-        <div class="flex justify-between items-center min-w-[25rem]">
-          <h5 class="text-sm text-slate-800 dark:text-slate-100">
-            {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
-          </h5>
-          <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
-              {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </hotkey>
-            <hotkey custom-class="min-h-[28px] min-w-[36px] key">
-              {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-            </hotkey>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8">
-        <div class="flex justify-between items-center min-w-[25rem]">
-          <h5 class="text-sm text-slate-800 dark:text-slate-100">
-            {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
-          </h5>
-          <div class="flex items-center mb-1 ml-2 gap-2">
-            <div class="flex gap-2">
-              <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-              </hotkey>
-              <hotkey custom-class="min-h-[28px] w-9 key"> J </hotkey>
-              <span
-                class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
-              >
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-              </span>
-            </div>
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
-              {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </hotkey>
-            <hotkey custom-class="w-9 key"> K </hotkey>
-          </div>
-        </div>
-
-        <div class="flex justify-between items-center min-w-[25rem]">
-          <h5 class="text-sm text-slate-800 dark:text-slate-100">
-            {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
-          </h5>
-          <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
-              {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </hotkey>
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
-              {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </hotkey>
-            <hotkey custom-class="w-9 key"> E </hotkey>
-          </div>
-        </div>
-        <div
-          v-for="shortcutKey in shortcutKeys"
-          :key="shortcutKey.id"
-          class="flex justify-between items-center min-w-[25rem]"
-        >
-          <h5 class="text-sm text-slate-800 min-w-[36px] dark:text-slate-100">
-            {{ title(shortcutKey) }}
-          </h5>
-          <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey
-              :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
-              custom-class="min-h-[28px] normal-case key"
-            >
-              {{ shortcutKey.firstKey }}
-            </hotkey>
-            <hotkey
-              :class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
-              custom-class="min-h-[28px] min-w-[36px] key"
-            >
-              {{ shortcutKey.secondKey }}
-            </hotkey>
-          </div>
-        </div>
-      </div>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { SHORTCUT_KEYS } from './constants';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
@@ -112,6 +24,95 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"
+      />
+      <div class="grid grid-cols-2 px-8 pt-0 pb-4 mt-6 gap-x-5 gap-y-3">
+        <div class="flex justify-between items-center min-w-[25rem]">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
+            {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
+          </h5>
+          <div class="flex items-center gap-2 mb-1 ml-2">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[36px] key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
+            </Hotkey>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 px-8 pt-0 pb-8 gap-x-5 gap-y-3">
+        <div class="flex justify-between items-center min-w-[25rem]">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
+            {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
+          </h5>
+          <div class="flex items-center gap-2 mb-1 ml-2">
+            <div class="flex gap-2">
+              <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+                {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
+              </Hotkey>
+              <Hotkey custom-class="min-h-[28px] w-9 key"> {{ 'J' }} </Hotkey>
+              <span
+                class="flex items-center text-sm font-semibold text-slate-800 dark:text-slate-100"
+              >
+                {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
+              </span>
+            </div>
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> {{ 'K' }} </Hotkey>
+          </div>
+        </div>
+
+        <div class="flex justify-between items-center min-w-[25rem]">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
+            {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
+          </h5>
+          <div class="flex items-center gap-2 mb-1 ml-2">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> {{ 'E' }} </Hotkey>
+          </div>
+        </div>
+        <div
+          v-for="shortcutKey in shortcutKeys"
+          :key="shortcutKey.id"
+          class="flex justify-between items-center min-w-[25rem]"
+        >
+          <h5 class="text-sm text-slate-800 min-w-[36px] dark:text-slate-100">
+            {{ title(shortcutKey) }}
+          </h5>
+          <div class="flex items-center gap-2 mb-1 ml-2">
+            <Hotkey
+              :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
+              custom-class="min-h-[28px] normal-case key"
+            >
+              {{ shortcutKey.firstKey }}
+            </Hotkey>
+            <Hotkey
+              :class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
+              custom-class="min-h-[28px] min-w-[36px] key"
+            >
+              {{ shortcutKey.secondKey }}
+            </Hotkey>
+          </div>
+        </div>
+      </div>
+    </div>
+  </woot-modal>
+</template>
+
 <style scoped>
 .key {
   @apply py-2 px-2.5 font-semibold text-xs text-slate-700 dark:text-slate-100 bg-slate-75 dark:bg-slate-900 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-slate-200 dark:border-slate-700;
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index 170f01d7f..564bd161b 100644
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "AND",
       "OR": "OR"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Equal to",
       "not_equal_to": "Not equal to",
diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index 7f53eae8e..a933b1853 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -88,7 +88,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "You need to have atleast one action to save",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Enter your message here",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Select teams"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Select teams",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Activate Automation Rule",
diff --git a/app/javascript/dashboard/i18n/locale/en/bulkActions.json b/app/javascript/dashboard/i18n/locale/en/bulkActions.json
index aa5829b8d..dbf37defb 100644
--- a/app/javascript/dashboard/i18n/locale/en/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/en/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "Search",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 4db7fce93..882643434 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contact merged successfully",
       "ERROR_MESSAGE": "Could not merge contacts, try again!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 742a3657e..4cc4b9bed 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter for new line. Start with '/' to select a Canned Response.",
       "PRIVATE_MSG_INPUT": "Shift + enter for new line. This will be visible only to Agents",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Message signature is not configured, please configure it in profile settings.",
-      "CLICK_HERE": "Click here to update"
+      "CLICK_HERE": "Click here to update",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
     },
     "REPLYBOX": {
       "REPLY": "Reply",
diff --git a/app/javascript/dashboard/i18n/locale/en/general.json b/app/javascript/dashboard/i18n/locale/en/general.json
index 25bb4dfb7..78e97db90 100644
--- a/app/javascript/dashboard/i18n/locale/en/general.json
+++ b/app/javascript/dashboard/i18n/locale/en/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Search",
+      "EMPTY_STATE": "No results found"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 6c4238b92..5d77c21aa 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Use the portal as a headless CMS with third party front-end frameworks using our APIs."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
index 978592c83..cb98993bd 100644
--- a/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
@@ -45,7 +45,8 @@
       "DISMISS": "Dismiss",
       "ADD_SELECTED_LABELS": "Add selected labels",
       "ADD_SELECTED_LABEL": "Add selected label",
-      "ADD_ALL_LABELS": "Add all labels"
+      "ADD_ALL_LABELS": "Add all labels",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Add label",
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 172e5501d..da2df93e5 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Conversation Traffic",
       "NO_CONVERSATIONS": "No conversations",
       "CONVERSATION": "%{count} conversation",
-      "CONVERSATIONS": "%{count} conversations"
+      "CONVERSATIONS": "%{count} conversations",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversations by agents",
@@ -536,6 +537,7 @@
       "LABELS": "Label",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/en/search.json b/app/javascript/dashboard/i18n/locale/en/search.json
index 107e64fd8..546982b36 100644
--- a/app/javascript/dashboard/i18n/locale/en/search.json
+++ b/app/javascript/dashboard/i18n/locale/en/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversations",
       "MESSAGES": "Messages"
     },
+    "SEARCHING_DATA": "Searching",
     "EMPTY_STATE": "No %{item} found for query '%{query}'",
     "EMPTY_STATE_FULL": "No results found for query '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ to focus",
diff --git a/app/javascript/dashboard/mixins/fileUploadMixin.js b/app/javascript/dashboard/mixins/fileUploadMixin.js
index c51c243c8..b5313f27c 100644
--- a/app/javascript/dashboard/mixins/fileUploadMixin.js
+++ b/app/javascript/dashboard/mixins/fileUploadMixin.js
@@ -1,3 +1,4 @@
+import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import {
   MAXIMUM_FILE_UPLOAD_SIZE,
@@ -7,6 +8,11 @@ import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { DirectUpload } from 'activestorage';
 
 export default {
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+    }),
+  },
   methods: {
     onFileUpload(file) {
       if (this.globalConfig.directUploadsEnabled) {
diff --git a/app/javascript/dashboard/mixins/macrosMixin.js b/app/javascript/dashboard/mixins/macrosMixin.js
index fc595d5fe..4aea89227 100644
--- a/app/javascript/dashboard/mixins/macrosMixin.js
+++ b/app/javascript/dashboard/mixins/macrosMixin.js
@@ -1,5 +1,13 @@
+import { mapGetters } from 'vuex';
 import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
 export default {
+  computed: {
+    ...mapGetters({
+      labels: 'labels/getLabels',
+      teams: 'teams/getTeams',
+      agents: 'agents/getAgents',
+    }),
+  },
   methods: {
     getDropdownValues(type) {
       switch (type) {
diff --git a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
index 811dd27df..64e654b4c 100644
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -1,23 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('MERGE_CONTACTS.TITLE')"
-      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
-    />
-
-    <merge-contact
-      :primary-contact="primaryContact"
-      :is-searching="isSearching"
-      :is-merging="uiFlags.isMerging"
-      :search-results="searchResults"
-      @search="onContactSearch"
-      @cancel="onClose"
-      @submit="onMergeContacts"
-    />
-  </woot-modal>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
@@ -88,4 +68,23 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped></style>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('MERGE_CONTACTS.TITLE')"
+      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
+    />
+
+    <MergeContact
+      :primary-contact="primaryContact"
+      :is-searching="isSearching"
+      :is-merging="uiFlags.isMerging"
+      :search-results="searchResults"
+      @search="onContactSearch"
+      @cancel="onClose"
+      @submit="onMergeContacts"
+    />
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
index 190e04fe3..21ed33b3d 100644
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -1,41 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
-      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
-    />
-    <form class="w-full" @submit.prevent="addCustomAttribute">
-      <woot-input
-        v-model.trim="attributeName"
-        :class="{ error: v$.attributeName.$error }"
-        class="w-full"
-        :error="attributeNameError"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @input="v$.attributeName.$touch"
-      />
-      <woot-input
-        v-model.trim="attributeValue"
-        class="w-full"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
-      />
-      <div class="flex items-center justify-end gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.attributeName.$invalid || isCreating"
-          :is-loading="isCreating"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -98,3 +60,41 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
+      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
+    />
+    <form class="w-full" @submit.prevent="addCustomAttribute">
+      <woot-input
+        v-model.trim="attributeName"
+        :class="{ error: v$.attributeName.$error }"
+        class="w-full"
+        :error="attributeNameError"
+        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
+        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
+        @input="v$.attributeName.$touch"
+      />
+      <woot-input
+        v-model.trim="attributeValue"
+        class="w-full"
+        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
+        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
+      />
+      <div class="flex items-center justify-end gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.attributeName.$invalid || isCreating"
+          :is-loading="isCreating"
+        >
+          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </Modal>
+</template>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
index 5dcfd568a..52eb6eaa5 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -1,9 +1,47 @@
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+    value: { type: [String, Number], default: '' },
+    showEdit: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      isEditing: false,
+      editedValue: this.value,
+    };
+  },
+  methods: {
+    focusInput() {
+      this.$refs.inputfield.focus();
+    },
+    onEdit() {
+      this.isEditing = true;
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    onUpdate() {
+      this.isEditing = false;
+      this.$emit('update', this.editedValue);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="contact-attribute">
     <div class="title-wrap">
       <h4 class="text-sm title">
         <div class="title--icon">
-          <emoji-or-icon :icon="icon" :emoji="emoji" />
+          <EmojiOrIcon :icon="icon" :emoji="emoji" />
         </div>
         {{ label }}
       </h4>
@@ -49,44 +87,6 @@
   </div>
 </template>
 
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .contact-attribute {
   margin-bottom: var(--space-small);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index a45c5fe2c..ec3865227 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="option-item--user">
-    <thumbnail :src="thumbnail" size="28px" :username="name" />
-    <div class="option__user-data">
-      <h5 class="option__title">
-        {{ name }}
-        <span v-if="identifier" class="user-identifier">
-          (ID: {{ identifier }})
-        </span>
-      </h5>
-      <p class="option__body">
-        <span v-if="email" class="email-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
-          {{ email }}
-        </span>
-        <span v-if="phoneNumber" class="phone-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
-          {{ phoneNumber }}
-        </span>
-        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from '../../../components/widgets/Thumbnail.vue';
 
@@ -55,6 +30,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="option-item--user">
+    <Thumbnail :src="thumbnail" size="28px" :username="name" />
+    <div class="option__user-data">
+      <h5 class="option__title">
+        {{ name }}
+        <span v-if="identifier" class="user-identifier">
+          {{ $t('MERGE_CONTACTS.DROPDOWN_ITEM.ID', { identifier }) }}
+        </span>
+      </h5>
+      <p class="option__body">
+        <span v-if="email" class="email-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
+        </span>
+        <span v-if="phoneNumber" class="phone-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
+          {{ phoneNumber }}
+        </span>
+        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option-item--user {
   @apply flex items-center;
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index b600b3185..fc0cfef0d 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -1,56 +1,3 @@
-<template>
-  <div class="contact-fields">
-    <h3 class="text-lg title">
-      {{ $t('CONTACTS_PAGE.FIELDS') }}
-    </h3>
-    <attribute
-      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="mail"
-      emoji=""
-      :value="contact.email"
-      :show-edit="true"
-      @update="onEmailUpdate"
-    />
-    <attribute
-      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="call"
-      emoji=""
-      :value="contact.phone_number"
-      :show-edit="true"
-      @update="onPhoneUpdate"
-    />
-    <attribute
-      v-if="additionalAttributes.location"
-      :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="map"
-      emoji="🌍"
-      :value="additionalAttributes.location"
-      :show-edit="true"
-      @update="onLocationUpdate"
-    />
-    <div
-      v-for="attribute in customAttributekeys"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <attribute
-        :label="attribute"
-        icon="chevron-right"
-        :value="customAttributes[attribute]"
-        :show-edit="true"
-        @update="value => onCustomAttributeUpdate(attribute, value)"
-      />
-    </div>
-    <woot-button
-      size="small"
-      variant="link"
-      icon="add"
-      @click="handleCustomCreate"
-    >
-      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
-    </woot-button>
-  </div>
-</template>
 <script>
 import Attribute from './ContactAttribute.vue';
 
@@ -93,7 +40,7 @@ export default {
       this.$emit('update', { location: value });
     },
     handleCustomCreate() {
-      this.$emit('create-attribute');
+      this.$emit('createAttribute');
     },
     onCustomAttributeUpdate(key, value) {
       this.$emit('update', { custom_attributes: { [key]: value } });
@@ -102,6 +49,60 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact-fields">
+    <h3 class="text-lg title">
+      {{ $t('CONTACTS_PAGE.FIELDS') }}
+    </h3>
+    <Attribute
+      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
+      icon="mail"
+      emoji=""
+      :value="contact.email"
+      show-edit
+      @update="onEmailUpdate"
+    />
+    <Attribute
+      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
+      icon="call"
+      emoji=""
+      :value="contact.phone_number"
+      show-edit
+      @update="onPhoneUpdate"
+    />
+    <Attribute
+      v-if="additionalAttributes.location"
+      :label="$t('CONTACT_PANEL.LOCATION')"
+      icon="map"
+      emoji="🌍"
+      :value="additionalAttributes.location"
+      show-edit
+      @update="onLocationUpdate"
+    />
+    <div
+      v-for="attribute in customAttributekeys"
+      :key="attribute"
+      class="custom-attribute--row"
+    >
+      <Attribute
+        :label="attribute"
+        icon="chevron-right"
+        :value="customAttributes[attribute]"
+        show-edit
+        @update="value => onCustomAttributeUpdate(attribute, value)"
+      />
+    </div>
+    <woot-button
+      size="small"
+      variant="link"
+      icon="add"
+      @click="handleCustomCreate"
+    >
+      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
+    </woot-button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .contact-fields {
   margin-top: var(--space-medium);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
index 3d1b7222a..bae899dab 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="contact--intro">
-    <thumbnail
-      :src="contact.thumbnail"
-      size="64px"
-      :username="contact.name"
-      :status="contact.availability_status"
-    />
-
-    <div class="contact--details">
-      <h2 class="text-lg contact--name">
-        {{ contact.name }}
-      </h2>
-      <h3 class="text-base contact--work">
-        {{ contact.title }}
-        <i v-if="company.name" class="icon ion-minus-round" />
-        <span class="company-name">{{ company.name }}</span>
-      </h3>
-      <p v-if="additionalAttributes.description" class="contact--bio">
-        {{ additionalAttributes.description }}
-      </p>
-      <social-icons :social-profiles="socialProfiles" />
-    </div>
-    <div class="contact-actions">
-      <woot-button
-        class="new-message"
-        size="small expanded"
-        icon="ion-paper-airplane"
-        @click="onNewMessageClick"
-      >
-        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="small expanded"
-        icon="edit"
-        @click="onEditClick"
-      >
-        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from 'dashboard/routes/dashboard/conversation/contact/SocialIcons.vue';
@@ -85,6 +42,50 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact--intro">
+    <Thumbnail
+      :src="contact.thumbnail"
+      size="64px"
+      :username="contact.name"
+      :status="contact.availability_status"
+    />
+
+    <div class="contact--details">
+      <h2 class="text-lg contact--name">
+        {{ contact.name }}
+      </h2>
+      <h3 class="text-base contact--work">
+        {{ contact.title }}
+        <i v-if="company.name" class="icon ion-minus-round" />
+        <span class="company-name">{{ company.name }}</span>
+      </h3>
+      <p v-if="additionalAttributes.description" class="contact--bio">
+        {{ additionalAttributes.description }}
+      </p>
+      <SocialIcons :social-profiles="socialProfiles" />
+    </div>
+    <div class="contact-actions">
+      <woot-button
+        class="new-message"
+        size="small expanded"
+        icon="ion-paper-airplane"
+        @click="onNewMessageClick"
+      >
+        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="small expanded"
+        icon="edit"
+        @click="onEditClick"
+      >
+        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .contact--details {
   margin-top: var(--space-small);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
index f9e7a99b4..cb7e61607 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
@@ -1,34 +1,3 @@
-<template>
-  <div class="panel">
-    <contact-intro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <contact-fields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <edit-contact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <new-conversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <add-custom-attribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
 <script>
 import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
 import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
@@ -98,6 +67,38 @@ export default {
 };
 </script>
 
+<template>
+  <div class="panel">
+    <ContactIntro
+      :contact="contact"
+      @message="toggleConversationModal"
+      @edit="toggleEditModal"
+    />
+    <ContactFields
+      :contact="contact"
+      @update="updateField"
+      @createAttribute="toggleCustomAttributeModal"
+    />
+    <EditContact
+      v-if="showEditModal"
+      :show="showEditModal"
+      :contact="contact"
+      @cancel="toggleEditModal"
+    />
+    <NewConversation
+      v-if="enableNewConversation"
+      :show="showConversationModal"
+      :contact="contact"
+      @cancel="toggleConversationModal"
+    />
+    <AddCustomAttribute
+      :show="showCustomAttributeModal"
+      @cancel="toggleCustomAttributeModal"
+      @create="createCustomAttribute"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .panel {
   padding: var(--space-normal) var(--space-normal);
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 71783303f..4e5e2104a 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -1,118 +1,3 @@
-<template>
-  <form @submit.prevent="onSubmit">
-    <div>
-      <div>
-        <div
-          class="mt-1 multiselect-wrap--medium"
-          :class="{ error: v$.parentContact.$error }"
-        >
-          <label class="multiselect__label">
-            {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
-            <woot-label
-              :title="$t('MERGE_CONTACTS.PARENT.HELP_LABEL')"
-              color-scheme="success"
-              small
-              class="ml-2"
-            />
-          </label>
-          <multiselect
-            v-model="parentContact"
-            :options="searchResults"
-            label="name"
-            track-by="id"
-            :internal-search="false"
-            :clear-on-select="false"
-            :show-labels="false"
-            :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
-            :allow-empty="true"
-            :loading="isSearching"
-            :max-height="150"
-            open-direction="top"
-            @search-change="searchChange"
-          >
-            <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
-                :thumbnail="props.option.thumbnail"
-                :identifier="props.option.id"
-                :name="props.option.name"
-                :email="props.option.email"
-                :phone-number="props.option.phone_number"
-              />
-            </template>
-            <template slot="option" slot-scope="props">
-              <contact-dropdown-item
-                :thumbnail="props.option.thumbnail"
-                :identifier="props.option.id"
-                :name="props.option.name"
-                :email="props.option.email"
-                :phone-number="props.option.phone_number"
-              />
-            </template>
-            <span slot="noResult">
-              {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
-            </span>
-          </multiselect>
-          <span v-if="v$.parentContact.$error" class="message">
-            {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
-          </span>
-        </div>
-      </div>
-      <div class="flex multiselect-wrap--medium">
-        <div
-          class="w-8 relative text-base text-slate-100 dark:text-slate-600 after:content-[''] after:h-12 after:w-0 after:left-4 after:absolute after:border-l after:border-solid after:border-slate-100 after:dark:border-slate-600 before:content-[''] before:h-0 before:w-4 before:left-4 before:top-12 before:absolute before:border-b before:border-solid before:border-slate-100 before:dark:border-slate-600"
-        >
-          <fluent-icon
-            icon="arrow-up"
-            class="absolute -top-1 left-2"
-            size="17"
-          />
-        </div>
-        <div class="flex flex-col w-full">
-          <label class="multiselect__label">
-            {{ $t('MERGE_CONTACTS.PRIMARY.TITLE') }}
-            <woot-label
-              :title="$t('MERGE_CONTACTS.PRIMARY.HELP_LABEL')"
-              color-scheme="alert"
-              small
-              class="ml-2"
-            />
-          </label>
-          <multiselect
-            :value="primaryContact"
-            disabled
-            :options="[]"
-            :show-labels="false"
-            label="name"
-            track-by="id"
-          >
-            <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
-                :thumbnail="props.option.thumbnail"
-                :name="props.option.name"
-                :identifier="props.option.id"
-                :email="props.option.email"
-                :phone-number="props.option.phoneNumber"
-              />
-            </template>
-          </multiselect>
-        </div>
-      </div>
-    </div>
-    <merge-contact-summary
-      :primary-contact-name="primaryContact.name"
-      :parent-contact-name="parentContactName"
-    />
-    <div class="flex justify-end gap-2 mt-6">
-      <woot-button variant="clear" @click.prevent="onCancel">
-        {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
-      </woot-button>
-      <woot-button type="submit" :is-loading="isMerging">
-        {{ $t('MERGE_CONTACTS.FORM.SUBMIT') }}
-      </woot-button>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
@@ -180,6 +65,121 @@ export default {
 };
 </script>
 
+<template>
+  <form @submit.prevent="onSubmit">
+    <div>
+      <div>
+        <div
+          class="mt-1 multiselect-wrap--medium"
+          :class="{ error: v$.parentContact.$error }"
+        >
+          <label class="multiselect__label">
+            {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
+            <woot-label
+              :title="$t('MERGE_CONTACTS.PARENT.HELP_LABEL')"
+              color-scheme="success"
+              small
+              class="ml-2"
+            />
+          </label>
+          <multiselect
+            v-model="parentContact"
+            :options="searchResults"
+            label="name"
+            track-by="id"
+            :internal-search="false"
+            :clear-on-select="false"
+            :show-labels="false"
+            :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
+            allow-empty
+            :loading="isSearching"
+            :max-height="150"
+            open-direction="top"
+            @search-change="searchChange"
+          >
+            <template slot="singleLabel" slot-scope="props">
+              <ContactDropdownItem
+                :thumbnail="props.option.thumbnail"
+                :identifier="props.option.id"
+                :name="props.option.name"
+                :email="props.option.email"
+                :phone-number="props.option.phone_number"
+              />
+            </template>
+            <template slot="option" slot-scope="props">
+              <ContactDropdownItem
+                :thumbnail="props.option.thumbnail"
+                :identifier="props.option.id"
+                :name="props.option.name"
+                :email="props.option.email"
+                :phone-number="props.option.phone_number"
+              />
+            </template>
+            <span slot="noResult">
+              {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
+            </span>
+          </multiselect>
+          <span v-if="v$.parentContact.$error" class="message">
+            {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
+          </span>
+        </div>
+      </div>
+      <div class="flex multiselect-wrap--medium">
+        <div
+          class="w-8 relative text-base text-slate-100 dark:text-slate-600 after:content-[''] after:h-12 after:w-0 after:left-4 after:absolute after:border-l after:border-solid after:border-slate-100 after:dark:border-slate-600 before:content-[''] before:h-0 before:w-4 before:left-4 before:top-12 before:absolute before:border-b before:border-solid before:border-slate-100 before:dark:border-slate-600"
+        >
+          <fluent-icon
+            icon="arrow-up"
+            class="absolute -top-1 left-2"
+            size="17"
+          />
+        </div>
+        <div class="flex flex-col w-full">
+          <label class="multiselect__label">
+            {{ $t('MERGE_CONTACTS.PRIMARY.TITLE') }}
+            <woot-label
+              :title="$t('MERGE_CONTACTS.PRIMARY.HELP_LABEL')"
+              color-scheme="alert"
+              small
+              class="ml-2"
+            />
+          </label>
+          <multiselect
+            :value="primaryContact"
+            disabled
+            :options="[]"
+            :show-labels="false"
+            label="name"
+            track-by="id"
+          >
+            <template slot="singleLabel" slot-scope="props">
+              <ContactDropdownItem
+                :thumbnail="props.option.thumbnail"
+                :name="props.option.name"
+                :identifier="props.option.id"
+                :email="props.option.email"
+                :phone-number="props.option.phoneNumber"
+              />
+            </template>
+          </multiselect>
+        </div>
+      </div>
+    </div>
+    <MergeContactSummary
+      :primary-contact-name="primaryContact.name"
+      :parent-contact-name="parentContactName"
+    />
+    <div class="flex justify-end gap-2 mt-6">
+      <woot-button variant="clear" @click.prevent="onCancel">
+        {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
+      </woot-button>
+      <woot-button type="submit" :is-loading="isMerging">
+        {{ $t('MERGE_CONTACTS.FORM.SUBMIT') }}
+      </woot-button>
+    </div>
+  </form>
+</template>
+
 <style lang="scss" scoped>
 /* TDOD: Clean errors in forms style */
 .error .message {
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
index 83c588da7..722d7680a 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    parentContactName: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="parentContactName"
@@ -31,18 +46,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    primaryContactName: {
-      type: String,
-      default: '',
-    },
-    parentContactName: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 972a9232f..298b439da 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -1,108 +1,3 @@
-<template>
-  <div class="context-menu">
-    <!-- Add To Canned Responses -->
-    <woot-modal
-      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
-      :show.sync="isCannedResponseModalOpen"
-      :on-close="hideCannedResponseModal"
-    >
-      <add-canned-modal
-        :response-content="plainTextContent"
-        :on-close="hideCannedResponseModal"
-      />
-    </woot-modal>
-    <!-- Translate Content -->
-    <translate-modal
-      v-if="showTranslateModal"
-      :content="messageContent"
-      :content-attributes="contentAttributes"
-      @close="onCloseTranslateModal"
-    />
-    <!-- Confirm Deletion -->
-    <woot-delete-modal
-      v-if="showDeleteModal"
-      class="context-menu--delete-modal"
-      :show.sync="showDeleteModal"
-      :on-close="closeDeleteModal"
-      :on-confirm="confirmDeletion"
-      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
-      :message="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.MESSAGE')"
-      :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
-      :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
-    />
-    <woot-button
-      icon="more-vertical"
-      color-scheme="secondary"
-      variant="clear"
-      size="small"
-      @click="handleOpen"
-    />
-    <woot-context-menu
-      v-if="isOpen && !isCannedResponseModalOpen"
-      :x="contextMenuPosition.x"
-      :y="contextMenuPosition.y"
-      @close="handleClose"
-    >
-      <div class="menu-container">
-        <menu-item
-          v-if="enabledOptions['replyTo']"
-          :option="{
-            icon: 'arrow-reply',
-            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
-          }"
-          variant="icon"
-          @click="handleReplyTo"
-        />
-        <menu-item
-          v-if="enabledOptions['copy']"
-          :option="{
-            icon: 'clipboard',
-            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
-          }"
-          variant="icon"
-          @click="handleCopy"
-        />
-        <menu-item
-          v-if="enabledOptions['copy']"
-          :option="{
-            icon: 'translate',
-            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
-          }"
-          variant="icon"
-          @click="handleTranslate"
-        />
-        <hr />
-        <menu-item
-          :option="{
-            icon: 'link',
-            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
-          }"
-          variant="icon"
-          @click="copyLinkToMessage"
-        />
-        <menu-item
-          v-if="enabledOptions['cannedResponse']"
-          :option="{
-            icon: 'comment-add',
-            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
-          }"
-          variant="icon"
-          @click="showCannedResponseModal"
-        />
-        <hr v-if="enabledOptions['delete']" />
-        <menu-item
-          v-if="enabledOptions['delete']"
-          :option="{
-            icon: 'delete',
-            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
-          }"
-          variant="icon"
-          @click="openDeleteModal"
-        />
-      </div>
-    </woot-context-menu>
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
@@ -245,6 +140,113 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="context-menu">
+    <!-- Add To Canned Responses -->
+    <woot-modal
+      v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
+      :show.sync="isCannedResponseModalOpen"
+      :on-close="hideCannedResponseModal"
+    >
+      <AddCannedModal
+        :response-content="plainTextContent"
+        :on-close="hideCannedResponseModal"
+      />
+    </woot-modal>
+    <!-- Translate Content -->
+    <TranslateModal
+      v-if="showTranslateModal"
+      :content="messageContent"
+      :content-attributes="contentAttributes"
+      @close="onCloseTranslateModal"
+    />
+    <!-- Confirm Deletion -->
+    <woot-delete-modal
+      v-if="showDeleteModal"
+      class="context-menu--delete-modal"
+      :show.sync="showDeleteModal"
+      :on-close="closeDeleteModal"
+      :on-confirm="confirmDeletion"
+      :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"
+      :message="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.MESSAGE')"
+      :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
+      :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
+    />
+    <woot-button
+      icon="more-vertical"
+      color-scheme="secondary"
+      variant="clear"
+      size="small"
+      @click="handleOpen"
+    />
+    <woot-context-menu
+      v-if="isOpen && !isCannedResponseModalOpen"
+      :x="contextMenuPosition.x"
+      :y="contextMenuPosition.y"
+      @close="handleClose"
+    >
+      <div class="menu-container">
+        <MenuItem
+          v-if="enabledOptions['replyTo']"
+          :option="{
+            icon: 'arrow-reply',
+            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
+          }"
+          variant="icon"
+          @click="handleReplyTo"
+        />
+        <MenuItem
+          v-if="enabledOptions['copy']"
+          :option="{
+            icon: 'clipboard',
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
+          }"
+          variant="icon"
+          @click="handleCopy"
+        />
+        <MenuItem
+          v-if="enabledOptions['copy']"
+          :option="{
+            icon: 'translate',
+            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
+          }"
+          variant="icon"
+          @click="handleTranslate"
+        />
+        <hr />
+        <MenuItem
+          :option="{
+            icon: 'link',
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
+          }"
+          variant="icon"
+          @click="copyLinkToMessage"
+        />
+        <MenuItem
+          v-if="enabledOptions['cannedResponse']"
+          :option="{
+            icon: 'comment-add',
+            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
+          }"
+          variant="icon"
+          @click="showCannedResponseModal"
+        />
+        <hr v-if="enabledOptions['delete']" />
+        <MenuItem
+          v-if="enabledOptions['delete']"
+          :option="{
+            icon: 'delete',
+            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
+          }"
+          variant="icon"
+          @click="openDeleteModal"
+        />
+      </div>
+    </woot-context-menu>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .menu-container {
   @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
diff --git a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
index 6690b2d11..caaa9285d 100644
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
@@ -1,12 +1,3 @@
-<template>
-  <note-list
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import NoteList from './components/NoteList.vue';
@@ -48,3 +39,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <NoteList
+    :is-fetching="uiFlags.isFetching"
+    :notes="notes"
+    @add="onAdd"
+    @delete="onDelete"
+  />
+</template>
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index 69f999e17..2b325759b 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -1,26 +1,3 @@
-<template>
-  <div
-    class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
-  >
-    <woot-message-editor
-      v-model="noteContent"
-      class="input--note"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-      :enable-suggestions="false"
-    />
-    <div class="flex justify-end w-full">
-      <woot-button
-        color-scheme="warning"
-        :title="$t('NOTES.ADD.TITLE')"
-        :is-disabled="buttonDisabled"
-        @click="onAdd"
-      >
-        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -59,6 +36,29 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
+  >
+    <WootMessageEditor
+      v-model="noteContent"
+      class="input--note"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      :enable-suggestions="false"
+    />
+    <div class="flex justify-end w-full">
+      <woot-button
+        color-scheme="warning"
+        :title="$t('NOTES.ADD.TITLE')"
+        :is-disabled="buttonDisabled"
+        @click="onAdd"
+      >
+        {{ $t('NOTES.ADD.BUTTON') }} {{ '(⌘⏎)' }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input--note {
   &::v-deep .ProseMirror-menubar {
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index 506049af3..cba9b8cc9 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -1,55 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-  >
-    <div class="flex items-end justify-between gap-1 text-xs">
-      <div class="flex items-center">
-        <thumbnail
-          :title="noteAuthorName"
-          :src="noteAuthor.thumbnail"
-          :username="noteAuthorName"
-          size="20px"
-        />
-        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="font-medium text-slate-800 dark:text-slate-100">
-            {{ noteAuthorName }}
-          </span>
-          <span class="text-slate-700 dark:text-slate-100">
-            {{ $t('NOTES.LIST.LABEL') }}
-          </span>
-          <span class="font-medium text-slate-700 dark:text-slate-100">
-            {{ readableTime }}
-          </span>
-        </div>
-      </div>
-      <div class="flex invisible actions">
-        <woot-button
-          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
-          variant="smooth"
-          size="tiny"
-          icon="delete"
-          color-scheme="secondary"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <woot-delete-modal
-        v-if="showDeleteModal"
-        :show.sync="showDeleteModal"
-        :on-close="closeDelete"
-        :on-confirm="confirmDeletion"
-        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
-        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
-        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
-        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
-      />
-    </div>
-    <p
-      v-dompurify-html="formatMessage(note || '')"
-      class="mt-4 note__content"
-    />
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -115,6 +63,58 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
+  >
+    <div class="flex items-end justify-between gap-1 text-xs">
+      <div class="flex items-center">
+        <Thumbnail
+          :title="noteAuthorName"
+          :src="noteAuthor.thumbnail"
+          :username="noteAuthorName"
+          size="20px"
+        />
+        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
+          <span class="font-medium text-slate-800 dark:text-slate-100">
+            {{ noteAuthorName }}
+          </span>
+          <span class="text-slate-700 dark:text-slate-100">
+            {{ $t('NOTES.LIST.LABEL') }}
+          </span>
+          <span class="font-medium text-slate-700 dark:text-slate-100">
+            {{ readableTime }}
+          </span>
+        </div>
+      </div>
+      <div class="flex invisible actions">
+        <woot-button
+          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
+          variant="smooth"
+          size="tiny"
+          icon="delete"
+          color-scheme="secondary"
+          @click="toggleDeleteModal"
+        />
+      </div>
+      <woot-delete-modal
+        v-if="showDeleteModal"
+        :show.sync="showDeleteModal"
+        :on-close="closeDelete"
+        :on-confirm="confirmDeletion"
+        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
+        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
+        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
+        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
+      />
+    </div>
+    <p
+      v-dompurify-html="formatMessage(note || '')"
+      class="mt-4 note__content"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 // For RTL direction view
 .app-rtl--wrapper {
diff --git a/app/javascript/dashboard/modules/notes/components/NoteList.vue b/app/javascript/dashboard/modules/notes/components/NoteList.vue
index 6061fc769..99d15862b 100644
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -1,27 +1,3 @@
-<template>
-  <div>
-    <add-note @add="onAddNote" />
-    <contact-note
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 import AddNote from './AddNote.vue';
 import ContactNote from './ContactNote.vue';
@@ -58,3 +34,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <AddNote @add="onAddNote" />
+    <ContactNote
+      v-for="note in notes"
+      :id="note.id"
+      :key="note.id"
+      :note="note.content"
+      :user="note.user"
+      :created-at="note.created_at"
+      @edit="onEditNote"
+      @delete="onDeleteNote"
+    />
+
+    <div v-if="isFetching" class="text-center p-4 text-base">
+      <Spinner size="" />
+      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
+    </div>
+    <div v-else-if="!notes.length" class="text-center p-4 text-base">
+      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 4c86862f5..e75b082ab 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -1,20 +1,3 @@
-<template>
-  <blockquote
-    ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
-  >
-    <p class="header">
-      <strong class="text-slate-700 dark:text-slate-100">
-        {{ author }}
-      </strong>
-      {{ $t('SEARCH.WROTE') }}
-    </p>
-    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
-      <div v-dompurify-html="prepareContent(content)" class="message-content" />
-    </read-more>
-  </blockquote>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ReadMore from './ReadMore.vue';
@@ -81,6 +64,23 @@ export default {
 };
 </script>
 
+<template>
+  <blockquote
+    ref="messageContainer"
+    class="message border-l-2 border-slate-100 dark:border-slate-700"
+  >
+    <p class="header">
+      <strong class="text-slate-700 dark:text-slate-100">
+        {{ author }}
+      </strong>
+      {{ $t('SEARCH.WROTE') }}
+    </p>
+    <ReadMore :shrink="isOverflowing" @expand="isOverflowing = false">
+      <div v-dompurify-html="prepareContent(content)" class="message-content" />
+    </ReadMore>
+  </blockquote>
+</template>
+
 <style scoped lang="scss">
 .message {
   @apply py-0 px-2 mt-2;
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index f94af7b5f..06e128ec2 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -1,7 +1,17 @@
+<script>
+export default {
+  props: {
+    shrink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="read-more">
     <div
-      ref="content"
       :class="{
         'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
           shrink,
@@ -22,17 +32,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    shrink: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
 <style scoped>
 @tailwind components;
 @layer components {
@@ -56,7 +55,6 @@ export default {
   @apply max-h-[100px] overflow-hidden relative;
 }
 .shrink-container::after {
-  @apply content-[''] absolute bottom-0 left-0 right-0 h-[50px] z-10;
 }
 .read-more-button {
   @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index c828f8b0a..431f39d9f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
-    </div>
-    <input
-      ref="searchInput"
-      type="search"
-      class="dark:bg-slate-900"
-      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
-      :value="searchQuery"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="debounceSearch"
-    />
-    <woot-label
-      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
-      :show-close="false"
-      small
-      class="helper-label"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -71,6 +47,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
+    <div class="icon-container">
+      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+    </div>
+    <input
+      ref="searchInput"
+      type="search"
+      class="dark:bg-slate-900"
+      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
+      :value="searchQuery"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="debounceSearch"
+    />
+    <woot-label
+      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
+      :show-close="false"
+      small
+      class="helper-label"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input-container {
   transition: border-bottom 0.2s ease-in-out;
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
index cfddfcfe6..f74c4dce8 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -9,7 +9,7 @@
       <div class="search-input">
         <fluent-icon icon="search" size="14px" class="search--icon" />
         <span
-          class="text-ellipsis overflow-hidden whitespace-nowrap search-placeholder"
+          class="overflow-hidden text-ellipsis whitespace-nowrap search-placeholder"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </span>
@@ -18,20 +18,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    tabs: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {},
-};
-</script>
 <style lang="scss" scoped>
 .search-input-box {
   @apply p-2;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index 1f5266b5d..9c38bca85 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -1,27 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="contact-item">
-    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
-    <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
-        {{ name }}
-      </h5>
-      <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
-      >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
-          email
-        }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
-          •
-        </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
-          {{ phone }}
-        </span>
-      </p>
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -59,6 +35,30 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="contact-item">
+    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
+    <div class="ml-2 rtl:mr-2 rtl:ml-0">
+      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+        {{ name }}
+      </h5>
+      <p
+        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+      >
+        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+          email
+        }}</span>
+        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+          •
+        </span>
+        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+          {{ phone }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .contact-item {
   @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index deaae694c..872ef1b27 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONTACTS')"
-    :empty="!contacts.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="contacts.length" class="search-list">
-      <li v-for="contact in contacts" :key="contact.id">
-        <search-result-contact-item
-          :id="contact.id"
-          :name="contact.name"
-          :email="contact.email"
-          :phone="contact.phone_number"
-          :account-id="accountId"
-          :thumbnail="contact.thumbnail"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -57,3 +34,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.CONTACTS')"
+    :empty="!contacts.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="contacts.length" class="search-list">
+      <li v-for="contact in contacts" :key="contact.id">
+        <SearchResultContactItem
+          :id="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :phone="contact.phone_number"
+          :account-id="accountId"
+          :thumbnail="contact.thumbnail"
+        />
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index dc15a6bc4..cd4ead3ad 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -1,43 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="conversation-item">
-    <div class="icon-wrap">
-      <fluent-icon icon="chat-multiple" :size="14" />
-    </div>
-    <div class="conversation-details">
-      <div class="meta-wrap">
-        <div class="flex">
-          <woot-label
-            class="conversation-id"
-            :title="`#${id}`"
-            :show-close="false"
-            small
-          />
-          <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
-          </div>
-        </div>
-        <div>
-          <span class="created-at">{{ createdAtTime }}</span>
-        </div>
-      </div>
-      <div class="user-details">
-        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
-          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
-          {{ name }}
-        </h5>
-        <h5
-          v-if="email"
-          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-        >
-          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
-          {{ email }}
-        </h5>
-      </div>
-      <slot />
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime } from 'shared/helpers/timeHelper';
@@ -95,6 +55,46 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="conversation-item">
+    <div class="icon-wrap">
+      <fluent-icon icon="chat-multiple" :size="14" />
+    </div>
+    <div class="conversation-details">
+      <div class="meta-wrap">
+        <div class="flex">
+          <woot-label
+            class="conversation-id"
+            :title="`#${id}`"
+            :show-close="false"
+            small
+          />
+          <div class="inbox-name-wrap">
+            <InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+          </div>
+        </div>
+        <div>
+          <span class="created-at">{{ createdAtTime }}</span>
+        </div>
+      </div>
+      <div class="user-details">
+        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
+          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
+          {{ name }}
+        </h5>
+        <h5
+          v-if="email"
+          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+        >
+          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          {{ email }}
+        </h5>
+      </div>
+      <slot />
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .conversation-item {
   @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index 3c646a85e..c7f369e44 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
-    :empty="!conversations.length"
-    :query="query"
-    :show-title="showTitle || isFetching"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="conversations.length" class="search-list">
-      <li v-for="conversation in conversations" :key="conversation.id">
-        <search-result-conversation-item
-          :id="conversation.id"
-          :name="conversation.contact.name"
-          :email="conversation.contact.email"
-          :account-id="accountId"
-          :inbox="conversation.inbox"
-          :created-at="conversation.created_at"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultSection from './SearchResultSection.vue';
@@ -56,3 +33,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
+    :empty="!conversations.length"
+    :query="query"
+    :show-title="showTitle || isFetching"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="conversations.length" class="search-list">
+      <li v-for="conversation in conversations" :key="conversation.id">
+        <SearchResultConversationItem
+          :id="conversation.id"
+          :name="conversation.contact.name"
+          :email="conversation.contact.email"
+          :account-id="accountId"
+          :inbox="conversation.inbox"
+          :created-at="conversation.created_at"
+        />
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index d2cdf0cb4..92e813e99 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -1,31 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.MESSAGES')"
-    :empty="!messages.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="messages.length" class="search-list">
-      <li v-for="message in messages" :key="message.id">
-        <search-result-conversation-item
-          :id="message.conversation_id"
-          :account-id="accountId"
-          :inbox="message.inbox"
-          :created-at="message.created_at"
-          :message-id="message.id"
-        >
-          <message-content
-            :author="getName(message)"
-            :content="message.content"
-            :search-term="query"
-          />
-        </search-result-conversation-item>
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
@@ -70,3 +42,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.MESSAGES')"
+    :empty="!messages.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="messages.length" class="search-list">
+      <li v-for="message in messages" :key="message.id">
+        <SearchResultConversationItem
+          :id="message.conversation_id"
+          :account-id="accountId"
+          :inbox="message.inbox"
+          :created-at="message.created_at"
+          :message-id="message.id"
+        >
+          <MessageContent
+            :author="getName(message)"
+            :content="message.content"
+            :search-term="query"
+          />
+        </SearchResultConversationItem>
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index 709936122..8a417db90 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,19 +1,3 @@
-<template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
-    </div>
-    <woot-loading-state v-if="isFetching" :message="'Searching'" />
-    <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
-        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
-      </p>
-    </div>
-  </section>
-</template>
-
 <script>
 export default {
   props: {
@@ -46,6 +30,25 @@ export default {
 };
 </script>
 
+<template>
+  <section class="result-section">
+    <div v-if="showTitle" class="header">
+      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+    </div>
+    <woot-loading-state
+      v-if="isFetching"
+      :message="$t('SEARCH.SEARCHING_DATA')"
+    />
+    <slot v-else />
+    <div v-if="empty && !isFetching" class="empty">
+      <fluent-icon icon="info" size="16px" class="icon" />
+      <p class="empty-state__text">
+        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
+      </p>
+    </div>
+  </section>
+</template>
+
 <style scoped lang="scss">
 .result-section {
   @apply my-2 mx-0;
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 93a1e59af..b76e2194e 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="tab-container">
-    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
-      <woot-tabs-item
-        v-for="item in tabs"
-        :key="item.key"
-        :name="item.name"
-        :count="item.count"
-      />
-    </woot-tabs>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -38,11 +25,25 @@ export default {
   methods: {
     onTabChange(index) {
       this.activeTab = index;
-      this.$emit('tab-change', this.tabs[index].key);
+      this.$emit('tabChange', this.tabs[index].key);
     },
   },
 };
 </script>
+
+<template>
+  <div class="tab-container">
+    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
+      <woot-tabs-item
+        v-for="item in tabs"
+        :key="item.key"
+        :name="item.name"
+        :count="item.count"
+      />
+    </woot-tabs>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .tab-container {
   @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index c9b122b32..a5472e6e4 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -1,71 +1,3 @@
-<template>
-  <div class="search-page">
-    <div class="page-header">
-      <woot-button
-        icon="chevron-left"
-        variant="smooth"
-        size="small "
-        class="back-button"
-        @click="onBack"
-      >
-        {{ $t('GENERAL_SETTINGS.BACK') }}
-      </woot-button>
-    </div>
-    <section class="search-root">
-      <header>
-        <search-header @search="onSearch" />
-        <search-tabs
-          v-if="query"
-          :tabs="tabs"
-          :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
-        />
-      </header>
-      <div class="search-results">
-        <div v-if="showResultsSection">
-          <search-result-contacts-list
-            v-if="filterContacts"
-            :is-fetching="uiFlags.contact.isFetching"
-            :contacts="contacts"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-messages-list
-            v-if="filterMessages"
-            :is-fetching="uiFlags.message.isFetching"
-            :messages="messages"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-conversations-list
-            v-if="filterConversations"
-            :is-fetching="uiFlags.conversation.isFetching"
-            :conversations="conversations"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-        </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
-          </p>
-        </div>
-        <div v-else class="empty text-center">
-          <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
-          </p>
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
-          </p>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script>
 import SearchHeader from './SearchHeader.vue';
 import SearchTabs from './SearchTabs.vue';
@@ -208,6 +140,74 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-page">
+    <div class="page-header">
+      <woot-button
+        icon="chevron-left"
+        variant="smooth"
+        size="small "
+        class="back-button"
+        @click="onBack"
+      >
+        {{ $t('GENERAL_SETTINGS.BACK') }}
+      </woot-button>
+    </div>
+    <section class="search-root">
+      <header>
+        <SearchHeader @search="onSearch" />
+        <SearchTabs
+          v-if="query"
+          :tabs="tabs"
+          :selected-tab="activeTabIndex"
+          @tabChange="tab => (selectedTab = tab)"
+        />
+      </header>
+      <div class="search-results">
+        <div v-if="showResultsSection">
+          <SearchResultContactsList
+            v-if="filterContacts"
+            :is-fetching="uiFlags.contact.isFetching"
+            :contacts="contacts"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <SearchResultMessagesList
+            v-if="filterMessages"
+            :is-fetching="uiFlags.message.isFetching"
+            :messages="messages"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <SearchResultConversationsList
+            v-if="filterConversations"
+            :is-fetching="uiFlags.conversation.isFetching"
+            :conversations="conversations"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+        </div>
+        <div v-else-if="showEmptySearchResults" class="empty">
+          <fluent-icon icon="info" size="16px" class="icon" />
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+          </p>
+        </div>
+        <div v-else class="text-center empty">
+          <p class="text-center margin-bottom-0">
+            <fluent-icon icon="search" size="24px" class="icon" />
+          </p>
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-page {
   @apply flex flex-col w-full bg-white dark:bg-slate-900;
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index a083cc522..ce1277c85 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -1,52 +1,3 @@
-<template>
-  <div class="widget-preview-container">
-    <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
-        name="widget-screen"
-        :items="widgetScreens"
-        :action="handleScreenChange"
-      />
-    </div>
-    <div v-if="isWidgetVisible" class="widget-wrapper">
-      <WidgetHead :config="getWidgetHeadConfig" />
-      <div>
-        <WidgetBody :config="getWidgetBodyConfig" />
-        <WidgetFooter :config="getWidgetFooterConfig" />
-        <div class="branding">
-          <a class="branding-link">
-            <img class="branding-image" :src="globalConfig.logoThumbnail" />
-            <span>
-              {{
-                useInstallationName(
-                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
-                  globalConfig.installationName
-                )
-              }}
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="widget-bubble" :style="getBubblePositionStyle">
-      <button
-        class="bubble"
-        :class="getBubbleTypeClass"
-        :style="{ background: color }"
-        @click="toggleWidget"
-      >
-        <img
-          v-if="!isWidgetVisible"
-          src="~dashboard/assets/images/bubble-logo.svg"
-          alt=""
-        />
-        <div>
-          {{ getWidgetBubbleLauncherTitle }}
-        </div>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
@@ -75,7 +26,6 @@ export default {
     },
     websiteName: {
       type: String,
-      default: '',
       required: true,
     },
     logo: {
@@ -198,6 +148,55 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-preview-container">
+    <div v-if="isWidgetVisible" class="screen-selector">
+      <InputRadioGroup
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div v-if="isWidgetVisible" class="widget-wrapper">
+      <WidgetHead :config="getWidgetHeadConfig" />
+      <div>
+        <WidgetBody :config="getWidgetBodyConfig" />
+        <WidgetFooter :config="getWidgetFooterConfig" />
+        <div class="branding">
+          <a class="branding-link">
+            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+            <span>
+              {{
+                useInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
+                  globalConfig.installationName
+                )
+              }}
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="widget-bubble" :style="getBubblePositionStyle">
+      <button
+        class="bubble"
+        :class="getBubbleTypeClass"
+        :style="{ background: color }"
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+        />
+        <div>
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .screen-selector {
   display: flex;
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 5ab15d5fd..93d63f0ef 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="widget-body-container">
-    <div v-if="config.isDefaultScreen" class="availability-content">
-      <div class="availability-info">
-        <div class="team-status">
-          {{ getStatusText }}
-        </div>
-        <div class="reply-wait-message">
-          {{ config.replyTime }}
-        </div>
-      </div>
-      <thumbnail username="J" size="40px" />
-    </div>
-    <div v-else class="conversation-content">
-      <div class="conversation-wrap">
-        <div class="message-wrap">
-          <div class="user-message-wrap">
-            <div class="user-message">
-              <div class="message-wrap">
-                <div
-                  class="chat-bubble user"
-                  :style="{ background: config.color }"
-                >
-                  <p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="agent-message-wrap">
-          <div class="agent-message">
-            <div class="avatar-wrap" />
-            <div class="message-wrap">
-              <div class="chat-bubble agent">
-                <div class="message-content">
-                  <p>
-                    {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
@@ -85,6 +37,54 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-body-container">
+    <div v-if="config.isDefaultScreen" class="availability-content">
+      <div class="availability-info">
+        <div class="team-status">
+          {{ getStatusText }}
+        </div>
+        <div class="reply-wait-message">
+          {{ config.replyTime }}
+        </div>
+      </div>
+      <Thumbnail username="J" size="40px" />
+    </div>
+    <div v-else class="conversation-content">
+      <div class="conversation-wrap">
+        <div class="message-wrap">
+          <div class="user-message-wrap">
+            <div class="user-message">
+              <div class="message-wrap">
+                <div
+                  class="chat-bubble user"
+                  :style="{ background: config.color }"
+                >
+                  <p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="agent-message-wrap">
+          <div class="agent-message">
+            <div class="avatar-wrap" />
+            <div class="message-wrap">
+              <div class="chat-bubble agent">
+                <div class="message-content">
+                  <p>
+                    {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .widget-body-container {
   .availability-content {
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index b5d4bbc28..34e0f58d2 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="footer-wrap">
-    <custom-button
-      v-if="config.isDefaultScreen"
-      class="start-conversation"
-      :style="{ background: config.color }"
-    >
-      {{
-        $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
-      }}
-    </custom-button>
-    <div v-else class="chat-message-input is-focused">
-      <resizable-text-area
-        id="chat-input"
-        :rows="1"
-        :placeholder="
-          $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
-        "
-        class="user-message-input is-focused"
-      />
-      <div class="button-wrap">
-        <fluent-icon icon="emoji" />
-        <fluent-icon class="icon-send" icon="send" />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import CustomButton from 'dashboard/components/buttons/Button.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -44,6 +16,34 @@ export default {
 };
 </script>
 
+<template>
+  <div class="footer-wrap">
+    <CustomButton
+      v-if="config.isDefaultScreen"
+      class="start-conversation"
+      :style="{ background: config.color }"
+    >
+      {{
+        $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
+      }}
+    </CustomButton>
+    <div v-else class="chat-message-input is-focused">
+      <ResizableTextArea
+        id="chat-input"
+        :rows="1"
+        :placeholder="
+          $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
+        "
+        class="user-message-input is-focused"
+      />
+      <div class="button-wrap">
+        <fluent-icon icon="emoji" />
+        <fluent-icon class="icon-send" icon="send" />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .footer-wrap {
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index e59a00488..70d343f59 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -1,3 +1,25 @@
+<script>
+export default {
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    isDefaultScreen() {
+      return (
+        this.config.isDefaultScreen &&
+        ((this.config.welcomeHeading &&
+          this.config.welcomeHeading.length !== 0) ||
+          (this.config.welcomeTagLine &&
+            this.config.welcomeTagline.length !== 0))
+      );
+    },
+  },
+};
+</script>
+
 <template>
   <div class="header-wrapper">
     <div class="header-branding">
@@ -24,28 +46,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    isDefaultScreen() {
-      return (
-        this.config.isDefaultScreen &&
-        ((this.config.welcomeHeading &&
-          this.config.welcomeHeading.length !== 0) ||
-          (this.config.welcomeTagLine &&
-            this.config.welcomeTagline.length !== 0))
-      );
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .header-wrapper {
   background-color: var(--white);
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 338bb2d39..77f7d879f 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,44 +1,3 @@
-<template>
-  <div
-    class="flex flex-wrap flex-grow-0 w-full h-full max-w-full min-h-0 ml-auto mr-auto app-wrapper dark:text-slate-300"
-  >
-    <sidebar
-      :route="currentRoute"
-      :show-secondary-sidebar="isSidebarOpen"
-      @open-notification-panel="openNotificationPanel"
-      @toggle-account-modal="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @show-add-label-popup="showAddLabelPopup"
-    />
-    <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
-      <router-view />
-      <command-bar />
-      <account-selector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
-      />
-      <add-account-modal
-        :show="showCreateAccountModal"
-        @close-account-create-modal="closeCreateAccountModal"
-      />
-      <woot-key-shortcut-modal
-        :show.sync="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
-      <notification-panel
-        v-if="isNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
-        <add-label-modal @close="hideAddLabelPopup" />
-      </woot-modal>
-    </section>
-  </div>
-</template>
-
 <script>
 import Sidebar from '../../components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -181,3 +140,44 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-wrap flex-grow-0 w-full h-full max-w-full min-h-0 ml-auto mr-auto app-wrapper dark:text-slate-300"
+  >
+    <Sidebar
+      :route="currentRoute"
+      :show-secondary-sidebar="isSidebarOpen"
+      @openNotificationPanel="openNotificationPanel"
+      @toggleAccountModal="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @closeKeyShortcutModal="closeKeyShortcutModal"
+      @showAddLabelPopup="showAddLabelPopup"
+    />
+    <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
+      <router-view />
+      <CommandBar />
+      <AccountSelector
+        :show-account-modal="showAccountModal"
+        @closeAccountModal="toggleAccountModal"
+        @showCreateAccountModal="openCreateAccountModal"
+      />
+      <AddAccountModal
+        :show="showCreateAccountModal"
+        @closeAccountCreateModal="closeCreateAccountModal"
+      />
+      <WootKeyShortcutModal
+        :show.sync="showShortcutModal"
+        @close="closeKeyShortcutModal"
+        @clickaway="closeKeyShortcutModal"
+      />
+      <NotificationPanel
+        v-if="isNotificationPanel"
+        @close="closeNotificationPanel"
+      />
+      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
+        <AddLabelModal @close="hideAddLabelPopup" />
+      </woot-modal>
+    </section>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 3dcf4cf05..dcc25e223 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -1,15 +1,4 @@
 <!-- eslint-disable vue/attribute-hyphenation -->
-<template>
-  <ninja-keys
-    ref="ninjakeys"
-    :no-auto-load-md-icons="true"
-    hideBreadcrumbs
-    :placeholder="placeholder"
-    @selected="onSelected"
-    @closed="onClosed"
-  />
-</template>
-
 <script>
 import '@chatwoot/ninja-keys';
 import wootConstants from 'dashboard/constants/globals';
@@ -108,6 +97,17 @@ export default {
 };
 </script>
 
+<template>
+  <ninja-keys
+    ref="ninjakeys"
+    no-auto-load-md-icons
+    hide-breadcrumbs
+    :placeholder="placeholder"
+    @selected="onSelected"
+    @closed="onClosed"
+  />
+</template>
+
 <style lang="scss">
 ninja-keys {
   --ninja-accent-color: var(--w-500);
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
index 54e900c30..b6ccce531 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
@@ -1,3 +1,46 @@
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      content: '',
+      date: '',
+      label: '',
+    };
+  },
+  computed: {
+    buttonDisabled() {
+      return this.content && this.date === '';
+    },
+  },
+  methods: {
+    resetValue() {
+      this.content = '';
+      this.date = '';
+    },
+
+    optionSelected(event) {
+      this.label = event.target.value;
+    },
+
+    onAdd() {
+      const task = {
+        content: this.content,
+        date: this.date,
+        label: this.label,
+      };
+      this.$emit('add', task);
+      this.resetValue();
+    },
+  },
+};
+</script>
+
 <template>
   <div class="wrap">
     <div class="input-select-wrap">
@@ -47,49 +90,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      content: '',
-      date: '',
-      label: '',
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return this.content && this.date === '';
-    },
-  },
-  methods: {
-    resetValue() {
-      this.content = '';
-      this.date = '';
-    },
-
-    optionSelected(event) {
-      this.label = event.target.value;
-    },
-
-    onAdd() {
-      const task = {
-        content: this.content,
-        date: this.date,
-        label: this.label,
-      };
-      this.$emit('add', task);
-      this.resetValue();
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 96b2cbf26..3b0133048 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,84 +1,3 @@
-<template>
-  <div
-    class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
-    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
-  >
-    <contact-info
-      :show-close-button="showCloseButton"
-      :show-avatar="showAvatar"
-      :contact="contact"
-      close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
-    />
-    <draggable
-      :list="contactSidebarItems"
-      :disabled="!dragEnabled"
-      class="list-group"
-      ghost-class="ghost"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <transition-group>
-        <div
-          v-for="element in contactSidebarItems"
-          :key="element.name"
-          class="list-group-item"
-        >
-          <div v-if="element.name === 'contact_attributes'">
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-              :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
-              compact
-              @click="
-                value => toggleSidebarUIState('is_ct_custom_attr_open', value)
-              "
-            >
-              <custom-attributes
-                :contact-id="contact.id"
-                attribute-type="contact_attribute"
-                attribute-class="conversation--attribute"
-                attribute-from="contact_panel"
-                :custom-attributes="contact.custom_attributes"
-                :empty-state-message="
-                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
-                "
-                class="even"
-              />
-            </accordion-item>
-          </div>
-          <div v-if="element.name === 'contact_labels'">
-            <accordion-item
-              :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
-              :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
-              @click="value => toggleSidebarUIState('is_ct_labels_open', value)"
-            >
-              <contact-label :contact-id="contact.id" class="contact-labels" />
-            </accordion-item>
-          </div>
-          <div v-if="element.name === 'previous_conversation'">
-            <accordion-item
-              :title="
-                $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
-              "
-              :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
-              @click="
-                value => toggleSidebarUIState('is_ct_prev_conv_open', value)
-              "
-            >
-              <contact-conversations
-                v-if="contact.id"
-                :contact-id="contact.id"
-                conversation-id=""
-              />
-            </accordion-item>
-          </div>
-        </div>
-      </transition-group>
-    </draggable>
-  </div>
-</template>
-
 <script>
 import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
@@ -95,7 +14,7 @@ export default {
     ContactInfo,
     ContactLabel,
     CustomAttributes,
-    draggable,
+    Draggable: draggable,
   },
   props: {
     contact: {
@@ -157,6 +76,87 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
+    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
+  >
+    <ContactInfo
+      :show-close-button="showCloseButton"
+      :show-avatar="showAvatar"
+      :contact="contact"
+      close-icon-name="dismiss"
+      @panelClose="onClose"
+      @togglePanel="onClose"
+    />
+    <Draggable
+      :list="contactSidebarItems"
+      :disabled="!dragEnabled"
+      class="list-group"
+      ghost-class="ghost"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <transition-group>
+        <div
+          v-for="element in contactSidebarItems"
+          :key="element.name"
+          class="list-group-item"
+        >
+          <div v-if="element.name === 'contact_attributes'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
+              :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
+              compact
+              @click="
+                value => toggleSidebarUIState('is_ct_custom_attr_open', value)
+              "
+            >
+              <CustomAttributes
+                :contact-id="contact.id"
+                attribute-type="contact_attribute"
+                attribute-class="conversation--attribute"
+                attribute-from="contact_panel"
+                :custom-attributes="contact.custom_attributes"
+                :empty-state-message="
+                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
+                "
+                class="even"
+              />
+            </AccordionItem>
+          </div>
+          <div v-if="element.name === 'contact_labels'">
+            <AccordionItem
+              :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
+              :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
+              @click="value => toggleSidebarUIState('is_ct_labels_open', value)"
+            >
+              <ContactLabel :contact-id="contact.id" class="contact-labels" />
+            </AccordionItem>
+          </div>
+          <div v-if="element.name === 'previous_conversation'">
+            <AccordionItem
+              :title="
+                $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
+              "
+              :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
+              @click="
+                value => toggleSidebarUIState('is_ct_prev_conv_open', value)
+              "
+            >
+              <ContactConversations
+                v-if="contact.id"
+                :contact-id="contact.id"
+                conversation-id=""
+              />
+            </AccordionItem>
+          </div>
+        </div>
+      </transition-group>
+    </Draggable>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
index 7932d2c8b..921c86a85 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
@@ -1,12 +1,3 @@
-<template>
-  <label-selector
-    :all-labels="allLabels"
-    :saved-labels="savedLabels"
-    @add="addItem"
-    @remove="removeItem"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -32,7 +23,6 @@ export default {
     },
 
     ...mapGetters({
-      labelUiFlags: 'contactLabels/getUIFlags',
       allLabels: 'labels/getLabels',
     }),
   },
@@ -85,4 +75,11 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <LabelSelector
+    :all-labels="allLabels"
+    :saved-labels="savedLabels"
+    @add="addItem"
+    @remove="removeItem"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index f6e00b70b..41c986d03 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -1,93 +1,3 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isSegmentsView">
-        <label class="input-label" :class="{ error: !activeSegmentNewName }">
-          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
-          <input
-            v-model="activeSegmentNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeSegmentNewName" class="message">
-            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="input-label">
-          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <filter-input-box
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :grouped-filters="true"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="validationErrors[`filter_${i}`]"
-          @resetFilter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-          <woot-button
-            v-if="hasAppliedFilters && !isSegmentsView"
-            icon="subtract"
-            color-scheme="alert"
-            variant="smooth"
-            size="small"
-            @click="clearFilters"
-          >
-            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isSegmentsView"
-            :disabled="!activeSegmentNewName"
-            @click="updateSegment"
-          >
-            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
@@ -343,6 +253,97 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="filterModalHeaderTitle">
+      <p class="text-slate-600 dark:text-slate-200">
+        {{ filterModalSubTitle }}
+      </p>
+    </woot-modal-header>
+    <div class="p-8">
+      <div v-if="isSegmentsView">
+        <label class="input-label" :class="{ error: !activeSegmentNewName }">
+          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
+          <input
+            v-model="activeSegmentNewName"
+            type="text"
+            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+          />
+          <span v-if="!activeSegmentNewName" class="message">
+            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
+          </span>
+        </label>
+        <label class="input-label">
+          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
+        </label>
+      </div>
+      <div
+        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
+      >
+        <FilterInputBox
+          v-for="(filter, i) in appliedFilters"
+          :key="i"
+          v-model="appliedFilters[i]"
+          :filter-groups="filterGroups"
+          grouped-filters
+          :input-type="
+            getInputType(
+              appliedFilters[i].attribute_key,
+              appliedFilters[i].filter_operator
+            )
+          "
+          :operators="getOperators(appliedFilters[i].attribute_key)"
+          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
+          :show-query-operator="i !== appliedFilters.length - 1"
+          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
+          :error-message="validationErrors[`filter_${i}`]"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
+        />
+        <div class="mt-4">
+          <woot-button
+            icon="add"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
+          <woot-button
+            v-if="hasAppliedFilters && !isSegmentsView"
+            icon="subtract"
+            color-scheme="alert"
+            variant="smooth"
+            size="small"
+            @click="clearFilters"
+          >
+            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
+          </woot-button>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-button class="button clear" @click.prevent="onClose">
+            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button
+            v-if="isSegmentsView"
+            :disabled="!activeSegmentNewName"
+            @click="updateSegment"
+          >
+            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button v-else @click="submitFilterQuery">
+            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .folder-input {
   @apply w-[50%];
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 1ec7596ae..3486f6f96 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -1,32 +1,3 @@
-<template>
-  <section
-    class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
-  >
-    <ve-table
-      :fixed-header="true"
-      max-height="calc(100vh - 7.125rem)"
-      scroll-width="187rem"
-      :columns="columns"
-      :table-data="tableData"
-      :border-around="false"
-      :sort-option="sortOption"
-    />
-
-    <empty-state
-      v-if="showSearchEmptyState"
-      :title="$t('CONTACTS_PAGE.LIST.404')"
-    />
-    <empty-state
-      v-else-if="!isLoading && !contacts.length"
-      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
-    />
-    <div v-if="isLoading" class="flex items-center justify-center text-base">
-      <spinner />
-      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-  </section>
-</template>
-
 <script>
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
@@ -62,10 +33,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    activeContactId: {
-      type: [String, Number],
-      default: '',
-    },
     sortParam: {
       type: String,
       default: 'last_activity_at',
@@ -80,7 +47,7 @@ export default {
       sortConfig: {},
       sortOption: {
         sortAlways: true,
-        sortChange: params => this.$emit('on-sort-change', params),
+        sortChange: params => this.$emit('onSortChange', params),
       },
     };
   },
@@ -277,6 +244,35 @@ export default {
 };
 </script>
 
+<template>
+  <section
+    class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
+  >
+    <VeTable
+      fixed-header
+      max-height="calc(100vh - 7.125rem)"
+      scroll-width="187rem"
+      :columns="columns"
+      :table-data="tableData"
+      :border-around="false"
+      :sort-option="sortOption"
+    />
+
+    <EmptyState
+      v-if="showSearchEmptyState"
+      :title="$t('CONTACTS_PAGE.LIST.404')"
+    />
+    <EmptyState
+      v-else-if="!isLoading && !contacts.length"
+      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
+    />
+    <div v-if="isLoading" class="flex items-center justify-center text-base">
+      <Spinner />
+      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
+    </div>
+  </section>
+</template>
+
 <style lang="scss" scoped>
 .contacts-table-wrap::v-deep {
   .ve-table {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index 43c19d288..98037a821 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -1,84 +1,3 @@
-<template>
-  <div class="flex flex-row w-full">
-    <div class="flex flex-col h-full" :class="wrapClass">
-      <contacts-header
-        :search-query="searchQuery"
-        :header-title="pageTitle"
-        :segments-id="segmentsId"
-        this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
-      />
-      <contacts-table
-        :contacts="records"
-        :show-search-empty-state="showEmptySearchResult"
-        :is-loading="uiFlags.isFetching"
-        :on-click-contact="openContactInfoPanel"
-        :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
-      />
-      <table-footer
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-
-    <add-custom-views
-      v-if="showAddSegmentsModal"
-      :custom-views-query="segmentsQuery"
-      :filter-type="filterType"
-      :open-last-saved-item="openSavedItemInSegment"
-      @close="onCloseAddSegmentsModal"
-    />
-    <delete-custom-views
-      v-if="showDeleteSegmentsModal"
-      :show-delete-popup.sync="showDeleteSegmentsModal"
-      :active-custom-view="activeSegment"
-      :custom-views-id="segmentsId"
-      :active-filter-type="filterType"
-      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
-      @close="onCloseDeleteSegmentsModal"
-    />
-
-    <contact-info-panel
-      v-if="showContactViewPane"
-      :contact="selectedContact"
-      :on-close="closeContactInfoPanel"
-    />
-    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
-      <import-contacts v-if="showImportModal" :on-close="onToggleImport" />
-    </woot-modal>
-    <woot-modal
-      :show.sync="showFiltersModal"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <contacts-advanced-filters
-        v-if="showFiltersModal"
-        :on-close="closeAdvanceFiltersModal"
-        :initial-filter-types="contactFilterItems"
-        :initial-applied-filters="appliedFilter"
-        :active-segment-name="activeSegmentName"
-        :is-segments-view="hasActiveSegments"
-        @applyFilter="onApplyFilter"
-        @updateSegment="onUpdateSegment"
-        @clearFilters="clearFilters"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -468,3 +387,84 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-col h-full" :class="wrapClass">
+      <ContactsHeader
+        :search-query="searchQuery"
+        :header-title="pageTitle"
+        :segments-id="segmentsId"
+        this-selected-contact-id=""
+        @onInputSearch="onInputSearch"
+        @onToggleCreate="onToggleCreate"
+        @onToggleFilter="onToggleFilters"
+        @onSearchSubmit="onSearchSubmit"
+        @onToggleImport="onToggleImport"
+        @onExportSubmit="onExportSubmit"
+        @onToggleSaveFilter="onToggleSaveFilters"
+        @onToggleDeleteFilter="onToggleDeleteFilters"
+        @onToggleEditFilter="onToggleFilters"
+      />
+      <ContactsTable
+        :contacts="records"
+        :show-search-empty-state="showEmptySearchResult"
+        :is-loading="uiFlags.isFetching"
+        :on-click-contact="openContactInfoPanel"
+        :active-contact-id="selectedContactId"
+        @onSortChange="onSortChange"
+      />
+      <TableFooter
+        class="border-t border-slate-75 dark:border-slate-700/50"
+        :current-page="Number(meta.currentPage)"
+        :total-count="meta.count"
+        :page-size="15"
+        @pageChange="onPageChange"
+      />
+    </div>
+
+    <AddCustomViews
+      v-if="showAddSegmentsModal"
+      :custom-views-query="segmentsQuery"
+      :filter-type="filterType"
+      :open-last-saved-item="openSavedItemInSegment"
+      @close="onCloseAddSegmentsModal"
+    />
+    <DeleteCustomViews
+      v-if="showDeleteSegmentsModal"
+      :show-delete-popup.sync="showDeleteSegmentsModal"
+      :active-custom-view="activeSegment"
+      :custom-views-id="segmentsId"
+      :active-filter-type="filterType"
+      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
+      @close="onCloseDeleteSegmentsModal"
+    />
+
+    <ContactInfoPanel
+      v-if="showContactViewPane"
+      :contact="selectedContact"
+      :on-close="closeContactInfoPanel"
+    />
+    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
+    <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
+      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
+    </woot-modal>
+    <woot-modal
+      :show.sync="showFiltersModal"
+      :on-close="closeAdvanceFiltersModal"
+      size="medium"
+    >
+      <ContactsAdvancedFilters
+        v-if="showFiltersModal"
+        :on-close="closeAdvanceFiltersModal"
+        :initial-filter-types="contactFilterItems"
+        :initial-applied-filters="appliedFilter"
+        :active-segment-name="activeSegmentName"
+        :is-segments-view="hasActiveSegments"
+        @applyFilter="onApplyFilter"
+        @updateSegment="onUpdateSegment"
+        @clearFilters="clearFilters"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 583ce5c6d..d4b992abd 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -1,3 +1,92 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    searchQuery: {
+      type: String,
+      default: '',
+    },
+    segmentsId: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
+  data() {
+    return {
+      showCreateModal: false,
+      showImportModal: false,
+    };
+  },
+  computed: {
+    searchButtonClass() {
+      return this.searchQuery !== ''
+        ? 'opacity-100 translate-x-0 visible'
+        : '-translate-x-px opacity-0 invisible';
+    },
+    ...mapGetters({
+      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
+    }),
+    hasAppliedFilters() {
+      return this.getAppliedContactFilters.length;
+    },
+    hasActiveSegments() {
+      return this.segmentsId !== 0;
+    },
+    exportDescription() {
+      return this.hasAppliedFilters
+        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
+        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
+    },
+  },
+  methods: {
+    onToggleSegmentsModal() {
+      this.$emit('onToggleSaveFilter');
+    },
+    onToggleEditSegmentsModal() {
+      this.$emit('onToggleEditFilter');
+    },
+    onToggleDeleteSegmentsModal() {
+      this.$emit('onToggleDeleteFilter');
+    },
+    toggleCreate() {
+      this.$emit('onToggleCreate');
+    },
+    toggleFilter() {
+      this.$emit('onToggleFilter');
+    },
+    toggleImport() {
+      this.$emit('onToggleImport');
+    },
+    async submitExport() {
+      const ok =
+        await this.$refs.confirmExportContactsDialog.showConfirmation();
+
+      if (ok) {
+        this.$emit('onExportSubmit');
+      }
+    },
+    submitSearch() {
+      this.$emit('onSearchSubmit');
+    },
+    inputSearch(event) {
+      this.$emit('onInputSearch', event);
+    },
+  },
+};
+</script>
+
 <template>
   <header
     class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
@@ -128,92 +217,3 @@
     />
   </header>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    searchQuery: {
-      type: String,
-      default: '',
-    },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      showCreateModal: false,
-      showImportModal: false,
-    };
-  },
-  computed: {
-    searchButtonClass() {
-      return this.searchQuery !== ''
-        ? 'opacity-100 translate-x-0 visible'
-        : '-translate-x-px opacity-0 invisible';
-    },
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.segmentsId !== 0;
-    },
-    exportDescription() {
-      return this.hasAppliedFilters
-        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
-        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
-    },
-  },
-  methods: {
-    onToggleSegmentsModal() {
-      this.$emit('on-toggle-save-filter');
-    },
-    onToggleEditSegmentsModal() {
-      this.$emit('on-toggle-edit-filter');
-    },
-    onToggleDeleteSegmentsModal() {
-      this.$emit('on-toggle-delete-filter');
-    },
-    toggleCreate() {
-      this.$emit('on-toggle-create');
-    },
-    toggleFilter() {
-      this.$emit('on-toggle-filter');
-    },
-    toggleImport() {
-      this.$emit('on-toggle-import');
-    },
-    async submitExport() {
-      const ok =
-        await this.$refs.confirmExportContactsDialog.showConfirmation();
-
-      if (ok) {
-        this.$emit('on-export-submit');
-      }
-    },
-    submitSearch() {
-      this.$emit('on-search-submit');
-    },
-    inputSearch(event) {
-      this.$emit('on-input-search', event);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
index 5696608a4..6e536b555 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
@@ -1,46 +1,3 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
-        <p>
-          {{ $t('IMPORT_CONTACTS.DESC') }}
-          <a :href="csvUrl" download="import-contacts-sample">{{
-            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
-          }}</a>
-        </p>
-      </woot-modal-header>
-      <div class="flex flex-col p-8">
-        <div class="w-full">
-          <label>
-            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
-            <input
-              id="file"
-              ref="file"
-              type="file"
-              accept="text/csv"
-              @change="handleFileUpload"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-button
-              :disabled="uiFlags.isCreating || !file"
-              :loading="uiFlags.isCreating"
-              @click="uploadFile"
-            >
-              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
-            </woot-button>
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -93,3 +50,46 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
+        <p>
+          {{ $t('IMPORT_CONTACTS.DESC') }}
+          <a :href="csvUrl" download="import-contacts-sample">{{
+            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
+          }}</a>
+        </p>
+      </woot-modal-header>
+      <div class="flex flex-col p-8">
+        <div class="w-full">
+          <label>
+            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
+            <input
+              id="file"
+              ref="file"
+              type="file"
+              accept="text/csv"
+              @change="handleFileUpload"
+            />
+          </label>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <div class="w-full">
+            <woot-button
+              :disabled="uiFlags.isCreating || !file"
+              :loading="uiFlags.isCreating"
+              @click="uploadFile"
+            >
+              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
+            </woot-button>
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
index 531e9141e..8909a0376 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
@@ -1,3 +1,42 @@
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    isCompleted: {
+      type: Boolean,
+      default: false,
+    },
+    date: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('completed', this.isCompleted);
+    },
+    onEdit() {
+      this.$emit('edit', this.id);
+    },
+    onDelete() {
+      this.$emit('delete', this.id);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="reminder-wrap">
     <div class="status-wrap">
@@ -44,45 +83,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    isCompleted: {
-      type: Boolean,
-      default: false,
-    },
-    date: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('completed', this.isCompleted);
-    },
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .reminder-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
index a9e6c8cdb..6940b9122 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
@@ -1,3 +1,21 @@
+<script>
+export default {
+  methods: {
+    onClickNotes() {
+      this.$emit('notes');
+    },
+
+    onClickEvents() {
+      this.$emit('events');
+    },
+
+    onClickConversation() {
+      this.$emit('conversation');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="wrap">
     <div class="header">
@@ -37,24 +55,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  methods: {
-    onClickNotes() {
-      this.$emit('notes');
-    },
-
-    onClickEvents() {
-      this.$emit('events');
-    },
-
-    onClickConversation() {
-      this.$emit('conversation');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
   width: 100%;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
index da273d3fd..8eb1fc8e7 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
@@ -1,32 +1,4 @@
-<template>
-  <div class="timeline-card-wrap">
-    <div class="icon-chatbox">
-      <i class="ion-chatboxes" />
-    </div>
-    <div class="card-wrap">
-      <div class="header">
-        <div class="text-wrap">
-          <h6 class="text-sm">
-            {{ eventType }}
-          </h6>
-          <span class="event-path">on {{ eventPath }}</span>
-        </div>
-        <div class="date-wrap">
-          <span>{{ readableTime }}</span>
-        </div>
-      </div>
-      <div class="comment-wrap">
-        <p class="comment">
-          {{ eventBody }}
-        </p>
-      </div>
-    </div>
-    <div class="icon-more" @click="onClick">
-      <i class="ion-android-more-vertical" />
-    </div>
-  </div>
-</template>
-
+<!-- Unused file deprecated -->
 <script>
 import { dynamicTime } from 'shared/helpers/timeHelper';
 export default {
@@ -63,6 +35,35 @@ export default {
 };
 </script>
 
+<template>
+  <div class="timeline-card-wrap">
+    <div class="icon-chatbox">
+      <i class="ion-chatboxes" />
+    </div>
+    <div class="card-wrap">
+      <div class="header">
+        <div class="text-wrap">
+          <h6 class="text-sm">
+            {{ eventType }}
+          </h6>
+          <span class="event-path">{{ 'on' }} {{ eventPath }}</span>
+        </div>
+        <div class="date-wrap">
+          <span>{{ readableTime }}</span>
+        </div>
+      </div>
+      <div class="comment-wrap">
+        <p class="comment">
+          {{ eventBody }}
+        </p>
+      </div>
+    </div>
+    <div class="icon-more" @click="onClick">
+      <i class="ion-android-more-vertical" />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .timeline-card-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index a6f44ac6b..8f6658392 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,58 +1,3 @@
-<template>
-  <div
-    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
-  >
-    <settings-header
-      button-route="new"
-      :header-title="contact.name"
-      show-back-button
-      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
-      :back-url="backUrl"
-      :show-new-button="false"
-    >
-      <thumbnail
-        v-if="contact.thumbnail"
-        :src="contact.thumbnail"
-        :username="contact.name"
-        size="32px"
-        class="mr-2 rtl:mr-0 rtl:ml-2"
-      />
-    </settings-header>
-
-    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <spinner size="" />
-      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
-    </div>
-    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
-      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-        <contact-info-panel
-          :show-close-button="false"
-          :show-avatar="false"
-          :contact="contact"
-        />
-        <div class="w-3/4 h-full">
-          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-            <woot-tabs-item
-              v-for="tab in tabs"
-              :key="tab.key"
-              :name="tab.name"
-              :show-badge="false"
-            />
-          </woot-tabs>
-          <div
-            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
-          >
-            <contact-notes
-              v-if="selectedTabIndex === 0"
-              :contact-id="Number(contactId)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactInfoPanel from '../components/ContactInfoPanel.vue';
@@ -117,3 +62,58 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+  >
+    <SettingsHeader
+      button-route="new"
+      :header-title="contact.name"
+      show-back-button
+      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
+      :back-url="backUrl"
+      :show-new-button="false"
+    >
+      <Thumbnail
+        v-if="contact.thumbnail"
+        :src="contact.thumbnail"
+        :username="contact.name"
+        size="32px"
+        class="mr-2 rtl:mr-0 rtl:ml-2"
+      />
+    </SettingsHeader>
+
+    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
+      <Spinner size="" />
+      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
+    </div>
+    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
+      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
+        <ContactInfoPanel
+          :show-close-button="false"
+          :show-avatar="false"
+          :contact="contact"
+        />
+        <div class="w-3/4 h-full">
+          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+            <woot-tabs-item
+              v-for="tab in tabs"
+              :key="tab.key"
+              :name="tab.name"
+              :show-badge="false"
+            />
+          </woot-tabs>
+          <div
+            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
+          >
+            <ContactNotes
+              v-if="selectedTabIndex === 0"
+              :contact-id="Number(contactId)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index f78202075..1070566b0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="contact-conversation--panel">
-    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
-      <div v-if="!previousConversations.length" class="no-label-message">
-        <span>
-          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-        </span>
-      </div>
-      <div v-else class="contact-conversation--list">
-        <conversation-card
-          v-for="conversation in previousConversations"
-          :key="conversation.id"
-          :chat="conversation"
-          :hide-inbox-name="false"
-          :hide-thumbnail="true"
-          class="compact"
-        />
-      </div>
-    </div>
-    <spinner v-else />
-  </div>
-</template>
-
 <script>
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
@@ -69,6 +46,29 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact-conversation--panel">
+    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
+      <div v-if="!previousConversations.length" class="no-label-message">
+        <span>
+          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+        </span>
+      </div>
+      <div v-else class="contact-conversation--list">
+        <ConversationCard
+          v-for="conversation in previousConversations"
+          :key="conversation.id"
+          :chat="conversation"
+          :hide-inbox-name="false"
+          hide-thumbnail
+          class="compact"
+        />
+      </div>
+    </div>
+    <Spinner v-else />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .no-label-message {
   @apply text-slate-500 dark:text-slate-400 mb-4;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
index bf3ee8140..0a409e65d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="custom-attributes--panel">
-    <div
-      v-for="attribute in listOfAttributes"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <div class="custom-attribute--row__attribute">
-        {{ attribute }}
-      </div>
-      <div>
-        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
-      </div>
-    </div>
-    <p v-if="!listOfAttributes.length">
-      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
-    </p>
-  </div>
-</template>
-
 <script>
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
@@ -56,6 +36,26 @@ export default {
 };
 </script>
 
+<template>
+  <div class="custom-attributes--panel">
+    <div
+      v-for="attribute in listOfAttributes"
+      :key="attribute"
+      class="custom-attribute--row"
+    >
+      <div class="custom-attribute--row__attribute">
+        {{ attribute }}
+      </div>
+      <div>
+        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
+      </div>
+    </div>
+    <p v-if="!listOfAttributes.length">
+      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
+    </p>
+  </div>
+</template>
+
 <style scoped>
 .custom-attributes--panel {
   margin-bottom: var(--space-normal);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index bfb868892..1bba00568 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -1,7 +1,17 @@
+<script>
+export default {
+  props: {
+    title: { type: String, required: true },
+    value: { type: [String, Number], default: '' },
+    compact: { type: Boolean, default: false },
+  },
+};
+</script>
+
 <template>
   <div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
     <div class="items-center flex justify-between mb-1.5">
-      <span class="text-slate-800 font-medium dark:text-slate-100 text-sm">
+      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
         {{ title }}
       </span>
       <slot name="button" />
@@ -13,15 +23,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    compact: { type: Boolean, default: false },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index bdc52883e..ff61d994d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,136 +1,3 @@
-<template>
-  <div
-    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
-  >
-    <contact-info
-      :contact="contact"
-      :channel-type="channelType"
-      @toggle-panel="onPanelToggle"
-    />
-    <draggable
-      :list="conversationSidebarItems"
-      :disabled="!dragEnabled"
-      animation="200"
-      class="list-group"
-      ghost-class="ghost"
-      handle=".drag-handle"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <transition-group>
-        <div
-          v-for="element in conversationSidebarItems"
-          :key="element.name"
-          class="bg-white dark:bg-gray-800"
-        >
-          <div
-            v-if="element.name === 'conversation_actions'"
-            class="conversation--actions"
-          >
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
-              :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
-              @click="
-                value => toggleSidebarUIState('is_conv_actions_open', value)
-              "
-            >
-              <conversation-action
-                :conversation-id="conversationId"
-                :inbox-id="inboxId"
-              />
-            </accordion-item>
-          </div>
-          <div
-            v-else-if="element.name === 'conversation_participants'"
-            class="conversation--actions"
-          >
-            <accordion-item
-              :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
-              :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
-              @click="
-                value =>
-                  toggleSidebarUIState('is_conv_participants_open', value)
-              "
-            >
-              <conversation-participant
-                :conversation-id="conversationId"
-                :inbox-id="inboxId"
-              />
-            </accordion-item>
-          </div>
-          <div v-else-if="element.name === 'conversation_info'">
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
-              :is-open="isContactSidebarItemOpen('is_conv_details_open')"
-              compact
-              @click="
-                value => toggleSidebarUIState('is_conv_details_open', value)
-              "
-            >
-              <conversation-info
-                :conversation-attributes="conversationAdditionalAttributes"
-                :contact-attributes="contactAdditionalAttributes"
-              />
-            </accordion-item>
-          </div>
-          <div v-else-if="element.name === 'contact_attributes'">
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-              :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
-              compact
-              @click="
-                value =>
-                  toggleSidebarUIState('is_contact_attributes_open', value)
-              "
-            >
-              <custom-attributes
-                attribute-type="contact_attribute"
-                attribute-class="conversation--attribute"
-                class="even"
-                attribute-from="conversation_contact_panel"
-                :contact-id="contact.id"
-                :empty-state-message="
-                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
-                "
-              />
-            </accordion-item>
-          </div>
-          <div v-else-if="element.name === 'previous_conversation'">
-            <accordion-item
-              v-if="contact.id"
-              :title="
-                $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
-              "
-              :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
-              @click="
-                value => toggleSidebarUIState('is_previous_conv_open', value)
-              "
-            >
-              <contact-conversations
-                :contact-id="contact.id"
-                :conversation-id="conversationId"
-              />
-            </accordion-item>
-          </div>
-          <woot-feature-toggle
-            v-else-if="element.name === 'macros'"
-            feature-key="macros"
-          >
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
-              :is-open="isContactSidebarItemOpen('is_macro_open')"
-              compact
-              @click="value => toggleSidebarUIState('is_macro_open', value)"
-            >
-              <macros-list :conversation-id="conversationId" />
-            </accordion-item>
-          </woot-feature-toggle>
-        </div>
-      </transition-group>
-    </draggable>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -153,7 +20,7 @@ export default {
     CustomAttributes,
     ConversationAction,
     ConversationParticipant,
-    draggable,
+    Draggable: draggable,
     MacrosList,
   },
   props: {
@@ -195,8 +62,6 @@ export default {
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
-      currentUser: 'getCurrentUser',
-      uiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     conversationAdditionalAttributes() {
       return this.currentConversationMetaData.additional_attributes || {};
@@ -266,6 +131,139 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
+  >
+    <ContactInfo
+      :contact="contact"
+      :channel-type="channelType"
+      @toggle-panel="onPanelToggle"
+    />
+    <Draggable
+      :list="conversationSidebarItems"
+      :disabled="!dragEnabled"
+      animation="200"
+      class="list-group"
+      ghost-class="ghost"
+      handle=".drag-handle"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <transition-group>
+        <div
+          v-for="element in conversationSidebarItems"
+          :key="element.name"
+          class="bg-white dark:bg-gray-800"
+        >
+          <div
+            v-if="element.name === 'conversation_actions'"
+            class="conversation--actions"
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
+              :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
+              @click="
+                value => toggleSidebarUIState('is_conv_actions_open', value)
+              "
+            >
+              <ConversationAction
+                :conversation-id="conversationId"
+                :inbox-id="inboxId"
+              />
+            </AccordionItem>
+          </div>
+          <div
+            v-else-if="element.name === 'conversation_participants'"
+            class="conversation--actions"
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
+              :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
+              @click="
+                value =>
+                  toggleSidebarUIState('is_conv_participants_open', value)
+              "
+            >
+              <ConversationParticipant
+                :conversation-id="conversationId"
+                :inbox-id="inboxId"
+              />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'conversation_info'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
+              :is-open="isContactSidebarItemOpen('is_conv_details_open')"
+              compact
+              @click="
+                value => toggleSidebarUIState('is_conv_details_open', value)
+              "
+            >
+              <ConversationInfo
+                :conversation-attributes="conversationAdditionalAttributes"
+                :contact-attributes="contactAdditionalAttributes"
+              />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'contact_attributes'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
+              :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
+              compact
+              @click="
+                value =>
+                  toggleSidebarUIState('is_contact_attributes_open', value)
+              "
+            >
+              <CustomAttributes
+                attribute-type="contact_attribute"
+                attribute-class="conversation--attribute"
+                class="even"
+                attribute-from="conversation_contact_panel"
+                :contact-id="contact.id"
+                :empty-state-message="
+                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
+                "
+              />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'previous_conversation'">
+            <AccordionItem
+              v-if="contact.id"
+              :title="
+                $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
+              "
+              :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
+              @click="
+                value => toggleSidebarUIState('is_previous_conv_open', value)
+              "
+            >
+              <ContactConversations
+                :contact-id="contact.id"
+                :conversation-id="conversationId"
+              />
+            </AccordionItem>
+          </div>
+          <woot-feature-toggle
+            v-else-if="element.name === 'macros'"
+            feature-key="macros"
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
+              :is-open="isContactSidebarItemOpen('is_macro_open')"
+              compact
+              @click="value => toggleSidebarUIState('is_macro_open', value)"
+            >
+              <MacrosList :conversation-id="conversationId" />
+            </AccordionItem>
+          </woot-feature-toggle>
+        </div>
+      </transition-group>
+    </Draggable>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 3d5f6cb00..96b30d1fd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -1,85 +1,4 @@
 <!-- eslint-disable vue/v-slot-style -->
-<template>
-  <div class="bg-white dark:bg-slate-900">
-    <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
-      >
-        <template v-slot:button>
-          <woot-button
-            v-if="showSelfAssign"
-            icon="arrow-right"
-            variant="link"
-            size="small"
-            @click="onSelfAssign"
-          >
-            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
-          </woot-button>
-        </template>
-      </contact-details-item>
-      <multiselect-dropdown
-        :options="agentsList"
-        :selected-item="assignedAgent"
-        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
-        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
-        :no-search-result="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
-        "
-        :input-placeholder="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
-        "
-        @click="onClickAssignAgent"
-      />
-    </div>
-    <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
-      />
-      <multiselect-dropdown
-        :options="teamsList"
-        :selected-item="assignedTeam"
-        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
-        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
-        :no-search-result="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
-        "
-        :input-placeholder="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT')
-        "
-        @click="onClickAssignTeam"
-      />
-    </div>
-    <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION.PRIORITY.TITLE')"
-      />
-      <multiselect-dropdown
-        :options="priorityOptions"
-        :selected-item="assignedPriority"
-        :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
-        :multiselector-placeholder="
-          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SELECT_PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.NO_RESULTS')
-        "
-        :input-placeholder="
-          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.INPUT_PLACEHOLDER')
-        "
-        @click="onClickAssignPriority"
-      />
-    </div>
-    <contact-details-item
-      compact
-      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
-    />
-    <conversation-labels :conversation-id="conversationId" />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -103,6 +22,9 @@ export default {
       type: [Number, String],
       required: true,
     },
+    // inboxId prop is used in /mixins/agentMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
     inboxId: {
       type: Number,
       default: undefined,
@@ -270,3 +192,81 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="bg-white dark:bg-slate-900">
+    <div class="multiselect-wrap--small">
+      <ContactDetailsItem
+        compact
+        :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
+      >
+        <template #button>
+          <woot-button
+            v-if="showSelfAssign"
+            icon="arrow-right"
+            variant="link"
+            size="small"
+            @click="onSelfAssign"
+          >
+            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
+          </woot-button>
+        </template>
+      </ContactDetailsItem>
+      <MultiselectDropdown
+        :options="agentsList"
+        :selected-item="assignedAgent"
+        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
+        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
+        :no-search-result="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
+        "
+        :input-placeholder="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
+        "
+        @click="onClickAssignAgent"
+      />
+    </div>
+    <div class="multiselect-wrap--small">
+      <ContactDetailsItem
+        compact
+        :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
+      />
+      <MultiselectDropdown
+        :options="teamsList"
+        :selected-item="assignedTeam"
+        :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
+        :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
+        :no-search-result="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
+        "
+        :input-placeholder="
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT')
+        "
+        @click="onClickAssignTeam"
+      />
+    </div>
+    <div class="multiselect-wrap--small">
+      <ContactDetailsItem compact :title="$t('CONVERSATION.PRIORITY.TITLE')" />
+      <MultiselectDropdown
+        :options="priorityOptions"
+        :selected-item="assignedPriority"
+        :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
+        :multiselector-placeholder="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SELECT_PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.NO_RESULTS')
+        "
+        :input-placeholder="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.INPUT_PLACEHOLDER')
+        "
+        @click="onClickAssignPriority"
+      />
+    </div>
+    <ContactDetailsItem
+      compact
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
+    />
+    <ConversationLabels :conversation-id="conversationId" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 2a095c063..38cefc5aa 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -99,6 +99,7 @@ const staticElements = computed(() =>
     />
   </div>
 </template>
+
 <style scoped lang="scss">
 .conversation--attribute {
   @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index d788149d1..f59f69b87 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -1,82 +1,3 @@
-<template>
-  <div class="relative bg-white dark:bg-slate-900">
-    <div class="flex justify-between">
-      <div class="flex justify-between w-full mb-1">
-        <div>
-          <p v-if="watchersList.length" class="total-watchers m-0 text-sm">
-            <spinner v-if="watchersUiFlas.isFetching" size="tiny" />
-            {{ totalWatchersText }}
-          </p>
-          <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
-            {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
-          </p>
-        </div>
-        <woot-button
-          v-tooltip.left="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
-          :title="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
-          icon="settings"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          @click="onOpenDropdown"
-        />
-      </div>
-    </div>
-    <div class="flex justify-between items-center">
-      <thumbnail-group
-        :more-thumbnails-text="moreThumbnailsText"
-        :show-more-thumbnails-count="showMoreThumbs"
-        :users-list="thumbnailList"
-      />
-      <p
-        v-if="isUserWatching"
-        class="text-slate-300 dark:text-slate-300 m-0 text-sm"
-      >
-        {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
-      </p>
-      <woot-button
-        v-else
-        icon="arrow-right"
-        variant="link"
-        size="small"
-        @click="onSelfAssign"
-      >
-        {{ $t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION') }}
-      </woot-button>
-    </div>
-    <div
-      v-on-clickaway="
-        () => {
-          onCloseDropdown();
-        }
-      "
-      :class="{ 'dropdown-pane--open': showDropDown }"
-      class="dropdown-pane"
-    >
-      <div class="flex justify-between items-center mb-1">
-        <h4
-          class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
-        </h4>
-        <woot-button
-          icon="dismiss"
-          size="tiny"
-          color-scheme="secondary"
-          variant="clear"
-          @click="onCloseDropdown"
-        />
-      </div>
-      <multiselect-dropdown-items
-        :options="agentsList"
-        :selected-items="selectedWatchers"
-        :has-thumbnail="true"
-        @click="onClickItem"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import { useAlert } from 'dashboard/composables';
@@ -97,6 +18,9 @@ export default {
       type: [Number, String],
       required: true,
     },
+    // inboxId prop is used in /mixins/agentMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
     inboxId: {
       type: Number,
       default: undefined,
@@ -228,6 +152,86 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative bg-white dark:bg-slate-900">
+    <div class="flex justify-between">
+      <div class="flex justify-between w-full mb-1">
+        <div>
+          <p v-if="watchersList.length" class="m-0 text-sm total-watchers">
+            <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
+            {{ totalWatchersText }}
+          </p>
+          <p v-else class="m-0 text-sm text-slate-400 dark:text-slate-700">
+            {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
+          </p>
+        </div>
+        <woot-button
+          v-tooltip.left="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
+          :title="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
+          icon="settings"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          @click="onOpenDropdown"
+        />
+      </div>
+    </div>
+    <div class="flex items-center justify-between">
+      <ThumbnailGroup
+        :more-thumbnails-text="moreThumbnailsText"
+        :show-more-thumbnails-count="showMoreThumbs"
+        :users-list="thumbnailList"
+      />
+      <p
+        v-if="isUserWatching"
+        class="m-0 text-sm text-slate-300 dark:text-slate-300"
+      >
+        {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
+      </p>
+      <woot-button
+        v-else
+        icon="arrow-right"
+        variant="link"
+        size="small"
+        @click="onSelfAssign"
+      >
+        {{ $t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION') }}
+      </woot-button>
+    </div>
+    <div
+      v-on-clickaway="
+        () => {
+          onCloseDropdown();
+        }
+      "
+      :class="{ 'dropdown-pane--open': showDropDown }"
+      class="dropdown-pane"
+    >
+      <div class="flex items-center justify-between mb-1">
+        <h4
+          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+        >
+          {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
+        </h4>
+        <woot-button
+          icon="dismiss"
+          size="tiny"
+          color-scheme="secondary"
+          variant="clear"
+          @click="onCloseDropdown"
+        />
+      </div>
+      <MultiselectDropdownItems
+        :options="agentsList"
+        :selected-items="selectedWatchers"
+        has-thumbnail
+        @click="onClickItem"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-8 w-full;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 1d88921ff..a4838a482 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,39 +1,3 @@
-<template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
-    <chat-list
-      :show-conversation-list="showConversationList"
-      :conversation-inbox="inboxId"
-      :label="label"
-      :team-id="teamId"
-      :conversation-type="conversationType"
-      :folders-id="foldersId"
-      :is-on-expanded-layout="isOnExpandedLayout"
-      @conversation-load="onConversationLoad"
-    >
-      <pop-over-search
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
-      />
-    </chat-list>
-    <conversation-box
-      v-if="showMessageView"
-      :inbox-id="inboxId"
-      :is-contact-panel-open="isContactPanelOpen"
-      :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
-      />
-    </woot-modal>
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -254,6 +218,43 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="bg-white conversation-page dark:bg-slate-900">
+    <ChatList
+      :show-conversation-list="showConversationList"
+      :conversation-inbox="inboxId"
+      :label="label"
+      :team-id="teamId"
+      :conversation-type="conversationType"
+      :folders-id="foldersId"
+      :is-on-expanded-layout="isOnExpandedLayout"
+      @conversationLoad="onConversationLoad"
+    >
+      <PopOverSearch
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggleConversationLayout="toggleConversationLayout"
+      />
+    </ChatList>
+    <ConversationBox
+      v-if="showMessageView"
+      :inbox-id="inboxId"
+      :is-contact-panel-open="isContactPanelOpen"
+      :is-on-expanded-layout="isOnExpandedLayout"
+      @contactPanelToggle="onToggleContactPanel"
+    />
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <CustomSnoozeModal
+        @close="hideCustomSnoozeModal"
+        @chooseTime="chooseSnoozeTime"
+      />
+    </woot-modal>
+  </section>
+</template>
+
 <style lang="scss" scoped>
 .conversation-page {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
index a2bade368..c4ca6e3d2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -1,37 +1,3 @@
-<template>
-  <div>
-    <div
-      v-if="!uiFlags.isFetching && !macros.length"
-      class="macros_list--empty-state"
-    >
-      <p class="flex h-full items-center flex-col justify-center">
-        {{ $t('MACROS.LIST.404') }}
-      </p>
-      <router-link :to="addAccountScoping('settings/macros')">
-        <woot-button
-          variant="smooth"
-          icon="add"
-          size="tiny"
-          class="macros_add-button"
-        >
-          {{ $t('MACROS.HEADER_BTN_TXT') }}
-        </woot-button>
-      </router-link>
-    </div>
-    <woot-loading-state
-      v-if="uiFlags.isFetching"
-      :message="$t('MACROS.LOADING')"
-    />
-    <div v-if="!uiFlags.isFetching && macros.length" class="macros-list">
-      <macro-item
-        v-for="macro in macros"
-        :key="macro.id"
-        :macro="macro"
-        :conversation-id="conversationId"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import MacroItem from './MacroItem.vue';
@@ -59,6 +25,42 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <div
+      v-if="!uiFlags.isFetching && !macros.length"
+      class="macros_list--empty-state"
+    >
+      <p class="flex h-full items-center flex-col justify-center">
+        {{ $t('MACROS.LIST.404') }}
+      </p>
+      <router-link :to="addAccountScoping('settings/macros')">
+        <woot-button
+          variant="smooth"
+          icon="add"
+          size="tiny"
+          class="macros_add-button"
+        >
+          {{ $t('MACROS.HEADER_BTN_TXT') }}
+        </woot-button>
+      </router-link>
+    </div>
+    <woot-loading-state
+      v-if="uiFlags.isFetching"
+      :message="$t('MACROS.LOADING')"
+    />
+    <div v-if="!uiFlags.isFetching && macros.length" class="macros-list">
+      <MacroItem
+        v-for="macro in macros"
+        :key="macro.id"
+        :macro="macro"
+        :conversation-id="conversationId"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macros-list {
   padding: var(--space-smaller);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 63f07778d..8f2881f0b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="macro button secondary clear">
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
-      macro.name
-    }}</span>
-    <div class="flex items-center gap-1 macros-actions">
-      <woot-button
-        v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
-        size="tiny"
-        variant="smooth"
-        color-scheme="secondary"
-        icon="info"
-        @click="toggleMacroPreview(macro)"
-      />
-      <woot-button
-        v-tooltip.left-start="$t('MACROS.EXECUTE.BUTTON_TOOLTIP')"
-        size="tiny"
-        variant="smooth"
-        color-scheme="secondary"
-        icon="play-circle"
-        :is-loading="isExecuting"
-        @click="executeMacro(macro)"
-      />
-    </div>
-    <transition name="menu-slide">
-      <macro-preview
-        v-if="showPreview"
-        v-on-clickaway="closeMacroPreview"
-        :macro="macro"
-      />
-    </transition>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import MacroPreview from './MacroPreview.vue';
@@ -83,6 +49,40 @@ export default {
 };
 </script>
 
+<template>
+  <div class="macro button secondary clear">
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
+      macro.name
+    }}</span>
+    <div class="flex items-center gap-1 macros-actions">
+      <woot-button
+        v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
+        size="tiny"
+        variant="smooth"
+        color-scheme="secondary"
+        icon="info"
+        @click="toggleMacroPreview(macro)"
+      />
+      <woot-button
+        v-tooltip.left-start="$t('MACROS.EXECUTE.BUTTON_TOOLTIP')"
+        size="tiny"
+        variant="smooth"
+        color-scheme="secondary"
+        icon="play-circle"
+        :is-loading="isExecuting"
+        @click="executeMacro(macro)"
+      />
+    </div>
+    <transition name="menu-slide">
+      <MacroPreview
+        v-if="showPreview"
+        v-on-clickaway="closeMacroPreview"
+        :macro="macro"
+      />
+    </transition>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macro {
   @apply relative flex items-center justify-between leading-4;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index e81d048d1..5b0a33c3a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -1,30 +1,3 @@
-<template>
-  <div
-    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
-  >
-    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
-      {{ macro.name }}
-    </h6>
-    <div
-      v-for="(action, i) in resolvedMacro"
-      :key="i"
-      class="relative pl-4 macro-block"
-    >
-      <div
-        v-if="i !== macro.actions.length - 1"
-        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
-      />
-      <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
-      />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
-        {{ action.actionName }}
-      </p>
-      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   resolveActionName,
@@ -81,6 +54,33 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+  >
+    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+      {{ macro.name }}
+    </h6>
+    <div
+      v-for="(action, i) in resolvedMacro"
+      :key="i"
+      class="relative pl-4 macro-block"
+    >
+      <div
+        v-if="i !== macro.actions.length - 1"
+        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
+      />
+      <div
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
+      />
+      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+        {{ action.actionName }}
+      </p>
+      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .macro-preview {
   .macro-block {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 5a7f866f9..5281ed890 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -1,154 +1,3 @@
-<template>
-  <form
-    class="w-full px-8 pt-6 pb-8 contact--form"
-    @submit.prevent="handleSubmit"
-  >
-    <div>
-      <div class="w-full">
-        <woot-avatar-uploader
-          :label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
-          :src="avatarUrl"
-          :username-avatar="name"
-          :delete-avatar="!!avatarUrl"
-          class="settings-item"
-          @change="handleImageUpload"
-          @onAvatarDelete="handleAvatarDelete"
-        />
-      </div>
-    </div>
-    <div>
-      <div class="w-full">
-        <label :class="{ error: v$.name.$error }">
-          {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
-          <input
-            v-model.trim="name"
-            type="text"
-            :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
-            @input="v$.name.$touch"
-          />
-        </label>
-
-        <label :class="{ error: v$.email.$error }">
-          {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
-          <input
-            v-model.trim="email"
-            type="text"
-            :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
-            @input="v$.email.$touch"
-          />
-          <span v-if="v$.email.$error" class="message">
-            {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
-          </span>
-        </label>
-      </div>
-    </div>
-    <div class="w-full">
-      <label :class="{ error: v$.description.$error }">
-        {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
-        <textarea
-          v-model.trim="description"
-          type="text"
-          :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
-          @input="v$.description.$touch"
-        />
-      </label>
-    </div>
-    <div>
-      <div class="w-full">
-        <label
-          :class="{
-            error: isPhoneNumberNotValid,
-          }"
-        >
-          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
-          <woot-phone-input
-            v-model="phoneNumber"
-            :value="phoneNumber"
-            :error="isPhoneNumberNotValid"
-            :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
-            @input="onPhoneNumberInputChange"
-            @blur="v$.phoneNumber.$touch"
-            @setCode="setPhoneCode"
-          />
-          <span v-if="isPhoneNumberNotValid" class="message">
-            {{ phoneNumberError }}
-          </span>
-        </label>
-        <div
-          v-if="isPhoneNumberNotValid || !phoneNumber"
-          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
-        >
-          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
-        </div>
-      </div>
-    </div>
-    <woot-input
-      v-model.trim="companyName"
-      class="w-full"
-      :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
-      :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
-    />
-    <div>
-      <div class="w-full">
-        <label>
-          {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
-        </label>
-        <multiselect
-          v-model="country"
-          track-by="id"
-          label="name"
-          :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
-          selected-label
-          :select-label="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
-          :deselect-label="$t('CONTACT_FORM.FORM.COUNTRY.REMOVE')"
-          :custom-label="countryNameWithCode"
-          :max-height="160"
-          :options="countries"
-          :allow-empty="true"
-          :option-height="104"
-        />
-      </div>
-    </div>
-    <woot-input
-      v-model="city"
-      class="w-full"
-      :label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
-      :placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
-    />
-
-    <div class="w-full">
-      <label>{{ $t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES') }}</label>
-      <div
-        v-for="socialProfile in socialProfileKeys"
-        :key="socialProfile.key"
-        class="flex items-stretch w-full mb-4"
-      >
-        <span
-          class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-        >
-          {{ socialProfile.prefixURL }}
-        </span>
-        <input
-          v-model="socialProfileUserNames[socialProfile.key]"
-          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
-          type="text"
-        />
-      </div>
-    </div>
-    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-      <div class="w-full">
-        <woot-submit-button
-          :loading="inProgress"
-          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
-        />
-        <button class="button clear" @click.prevent="onCancel">
-          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
-        </button>
-      </div>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import {
@@ -418,6 +267,157 @@ export default {
 };
 </script>
 
+<template>
+  <form
+    class="w-full px-8 pt-6 pb-8 contact--form"
+    @submit.prevent="handleSubmit"
+  >
+    <div>
+      <div class="w-full">
+        <woot-avatar-uploader
+          :label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
+          :src="avatarUrl"
+          :username-avatar="name"
+          :delete-avatar="!!avatarUrl"
+          class="settings-item"
+          @change="handleImageUpload"
+          @onAvatarDelete="handleAvatarDelete"
+        />
+      </div>
+    </div>
+    <div>
+      <div class="w-full">
+        <label :class="{ error: v$.name.$error }">
+          {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
+          <input
+            v-model.trim="name"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
+            @input="v$.name.$touch"
+          />
+        </label>
+
+        <label :class="{ error: v$.email.$error }">
+          {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
+          <input
+            v-model.trim="email"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
+            @input="v$.email.$touch"
+          />
+          <span v-if="v$.email.$error" class="message">
+            {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
+          </span>
+        </label>
+      </div>
+    </div>
+    <div class="w-full">
+      <label :class="{ error: v$.description.$error }">
+        {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
+        <textarea
+          v-model.trim="description"
+          type="text"
+          :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
+          @input="v$.description.$touch"
+        />
+      </label>
+    </div>
+    <div>
+      <div class="w-full">
+        <label
+          :class="{
+            error: isPhoneNumberNotValid,
+          }"
+        >
+          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
+          <woot-phone-input
+            v-model="phoneNumber"
+            :value="phoneNumber"
+            :error="isPhoneNumberNotValid"
+            :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
+            @input="onPhoneNumberInputChange"
+            @blur="v$.phoneNumber.$touch"
+            @setCode="setPhoneCode"
+          />
+          <span v-if="isPhoneNumberNotValid" class="message">
+            {{ phoneNumberError }}
+          </span>
+        </label>
+        <div
+          v-if="isPhoneNumberNotValid || !phoneNumber"
+          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
+        >
+          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
+        </div>
+      </div>
+    </div>
+    <woot-input
+      v-model.trim="companyName"
+      class="w-full"
+      :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
+      :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
+    />
+    <div>
+      <div class="w-full">
+        <label>
+          {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
+        </label>
+        <multiselect
+          v-model="country"
+          track-by="id"
+          label="name"
+          :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
+          selected-label
+          :select-label="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
+          :deselect-label="$t('CONTACT_FORM.FORM.COUNTRY.REMOVE')"
+          :custom-label="countryNameWithCode"
+          :max-height="160"
+          :options="countries"
+          allow-empty
+          :option-height="104"
+        />
+      </div>
+    </div>
+    <woot-input
+      v-model="city"
+      class="w-full"
+      :label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
+      :placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
+    />
+
+    <div class="w-full">
+      <label>{{ $t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES') }}</label>
+      <div
+        v-for="socialProfile in socialProfileKeys"
+        :key="socialProfile.key"
+        class="flex items-stretch w-full mb-4"
+      >
+        <span
+          class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+        >
+          {{ socialProfile.prefixURL }}
+        </span>
+        <input
+          v-model="socialProfileUserNames[socialProfile.key]"
+          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
+          type="text"
+        />
+      </div>
+    </div>
+    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+      <div class="w-full">
+        <woot-submit-button
+          :loading="inProgress"
+          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
+        />
+        <button class="button clear" @click.prevent="onCancel">
+          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
 <style scoped lang="scss">
 ::v-deep {
   .multiselect .multiselect__tags .multiselect__single {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 4e9858a87..696d75848 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -1,170 +1,3 @@
-<template>
-  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
-    <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
-      <div class="flex flex-row justify-between">
-        <thumbnail
-          v-if="showAvatar"
-          :src="contact.thumbnail"
-          size="56px"
-          :username="contact.name"
-          :status="contact.availability_status"
-        />
-        <woot-button
-          v-if="showCloseButton"
-          :icon="closeIconName"
-          class="clear secondary rtl:rotate-180"
-          @click="onPanelToggle"
-        />
-      </div>
-
-      <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
-        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
-          <h3
-            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
-          >
-            {{ contact.name }}
-          </h3>
-          <div class="flex flex-row items-center gap-1">
-            <fluent-icon
-              v-if="contact.created_at"
-              v-tooltip.left="
-                `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
-                  contact.created_at
-                )}`
-              "
-              icon="info"
-              size="14"
-              class="mt-0.5"
-            />
-            <a
-              :href="contactProfileLink"
-              class="text-base"
-              target="_blank"
-              rel="noopener nofollow noreferrer"
-            >
-              <woot-button
-                size="tiny"
-                icon="open"
-                variant="clear"
-                color-scheme="secondary"
-              />
-            </a>
-          </div>
-        </div>
-
-        <p v-if="additionalAttributes.description" class="break-words mb-0.5">
-          {{ additionalAttributes.description }}
-        </p>
-        <div class="flex flex-col items-start w-full gap-2">
-          <contact-info-row
-            :href="contact.email ? `mailto:${contact.email}` : ''"
-            :value="contact.email"
-            icon="mail"
-            emoji="✉️"
-            :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-            show-copy
-          />
-          <contact-info-row
-            :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
-            :value="contact.phone_number"
-            icon="call"
-            emoji="📞"
-            :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
-            show-copy
-          />
-          <contact-info-row
-            v-if="contact.identifier"
-            :value="contact.identifier"
-            icon="contact-identify"
-            emoji="🪪"
-            :title="$t('CONTACT_PANEL.IDENTIFIER')"
-          />
-          <contact-info-row
-            :value="additionalAttributes.company_name"
-            icon="building-bank"
-            emoji="🏢"
-            :title="$t('CONTACT_PANEL.COMPANY')"
-          />
-          <contact-info-row
-            v-if="location || additionalAttributes.location"
-            :value="location || additionalAttributes.location"
-            icon="map"
-            emoji="🌍"
-            :title="$t('CONTACT_PANEL.LOCATION')"
-          />
-          <social-icons :social-profiles="socialProfiles" />
-        </div>
-      </div>
-      <div class="flex items-center w-full mt-0.5 gap-2">
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          title="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          icon="chat"
-          size="small"
-          @click="toggleConversationModal"
-        />
-        <woot-button
-          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          title="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          icon="edit"
-          variant="smooth"
-          size="small"
-          @click="toggleEditModal"
-        />
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          title="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          icon="merge"
-          variant="smooth"
-          size="small"
-          color-scheme="secondary"
-          :disabled="uiFlags.isMerging"
-          @click="openMergeModal"
-        />
-        <woot-button
-          v-if="isAdmin"
-          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          title="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          icon="delete"
-          variant="smooth"
-          size="small"
-          color-scheme="alert"
-          :disabled="uiFlags.isDeleting"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <edit-contact
-        v-if="showEditModal"
-        :show="showEditModal"
-        :contact="contact"
-        @cancel="toggleEditModal"
-      />
-      <new-conversation
-        v-if="contact.id"
-        :show="showConversationModal"
-        :contact="contact"
-        @cancel="toggleConversationModal"
-      />
-      <contact-merge-modal
-        v-if="showMergeModal"
-        :primary-contact="contact"
-        :show="showMergeModal"
-        @close="toggleMergeModal"
-      />
-    </div>
-    <woot-delete-modal
-      v-if="showDeleteModal"
-      :show.sync="showDeleteModal"
-      :on-close="closeDelete"
-      :on-confirm="confirmDeletion"
-      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
-      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
-      :message-value="confirmDeleteMessage"
-      :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
-      :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -198,10 +31,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    channelType: {
-      type: String,
-      default: '',
-    },
     showAvatar: {
       type: Boolean,
       default: true,
@@ -272,7 +101,7 @@ export default {
       this.showEditModal = !this.showEditModal;
     },
     onPanelToggle() {
-      this.$emit('toggle-panel');
+      this.$emit('togglePanel');
     },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
@@ -304,7 +133,7 @@ export default {
     async deleteContact({ id }) {
       try {
         await this.$store.dispatch('contacts/delete', id);
-        this.$emit('panel-close');
+        this.$emit('panelClose');
         useAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
 
         if (isAConversationRoute(this.$route.name)) {
@@ -334,3 +163,171 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
+    <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
+      <div class="flex flex-row justify-between">
+        <Thumbnail
+          v-if="showAvatar"
+          :src="contact.thumbnail"
+          size="56px"
+          :username="contact.name"
+          :status="contact.availability_status"
+        />
+        <woot-button
+          v-if="showCloseButton"
+          :icon="closeIconName"
+          class="clear secondary rtl:rotate-180"
+          @click="onPanelToggle"
+        />
+      </div>
+
+      <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
+        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
+          <h3
+            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
+          >
+            {{ contact.name }}
+          </h3>
+          <div class="flex flex-row items-center gap-1">
+            <fluent-icon
+              v-if="contact.created_at"
+              v-tooltip.left="
+                `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
+                  contact.created_at
+                )}`
+              "
+              icon="info"
+              size="14"
+              class="mt-0.5"
+            />
+            <a
+              :href="contactProfileLink"
+              class="text-base"
+              target="_blank"
+              rel="noopener nofollow noreferrer"
+            >
+              <woot-button
+                size="tiny"
+                icon="open"
+                variant="clear"
+                color-scheme="secondary"
+              />
+            </a>
+          </div>
+        </div>
+
+        <p v-if="additionalAttributes.description" class="break-words mb-0.5">
+          {{ additionalAttributes.description }}
+        </p>
+        <div class="flex flex-col items-start w-full gap-2">
+          <ContactInfoRow
+            :href="contact.email ? `mailto:${contact.email}` : ''"
+            :value="contact.email"
+            icon="mail"
+            emoji="✉️"
+            :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
+            show-copy
+          />
+          <ContactInfoRow
+            :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
+            :value="contact.phone_number"
+            icon="call"
+            emoji="📞"
+            :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
+            show-copy
+          />
+          <ContactInfoRow
+            v-if="contact.identifier"
+            :value="contact.identifier"
+            icon="contact-identify"
+            emoji="🪪"
+            :title="$t('CONTACT_PANEL.IDENTIFIER')"
+          />
+          <ContactInfoRow
+            :value="additionalAttributes.company_name"
+            icon="building-bank"
+            emoji="🏢"
+            :title="$t('CONTACT_PANEL.COMPANY')"
+          />
+          <ContactInfoRow
+            v-if="location || additionalAttributes.location"
+            :value="location || additionalAttributes.location"
+            icon="map"
+            emoji="🌍"
+            :title="$t('CONTACT_PANEL.LOCATION')"
+          />
+          <SocialIcons :social-profiles="socialProfiles" />
+        </div>
+      </div>
+      <div class="flex items-center w-full mt-0.5 gap-2">
+        <woot-button
+          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          :title="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          icon="chat"
+          size="small"
+          @click="toggleConversationModal"
+        />
+        <woot-button
+          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          :title="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          icon="edit"
+          variant="smooth"
+          size="small"
+          @click="toggleEditModal"
+        />
+        <woot-button
+          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          :title="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          icon="merge"
+          variant="smooth"
+          size="small"
+          color-scheme="secondary"
+          :disabled="uiFlags.isMerging"
+          @click="openMergeModal"
+        />
+        <woot-button
+          v-if="isAdmin"
+          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          :title="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          icon="delete"
+          variant="smooth"
+          size="small"
+          color-scheme="alert"
+          :disabled="uiFlags.isDeleting"
+          @click="toggleDeleteModal"
+        />
+      </div>
+      <EditContact
+        v-if="showEditModal"
+        :show="showEditModal"
+        :contact="contact"
+        @cancel="toggleEditModal"
+      />
+      <NewConversation
+        v-if="contact.id"
+        :show="showConversationModal"
+        :contact="contact"
+        @cancel="toggleConversationModal"
+      />
+      <ContactMergeModal
+        v-if="showMergeModal"
+        :primary-contact="contact"
+        :show="showMergeModal"
+        @close="toggleMergeModal"
+      />
+    </div>
+    <woot-delete-modal
+      v-if="showDeleteModal"
+      :show.sync="showDeleteModal"
+      :on-close="closeDelete"
+      :on-confirm="confirmDeletion"
+      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
+      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
+      :message-value="confirmDeleteMessage"
+      :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
+      :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 6634f5b1b..3924ec22d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,61 +1,3 @@
-<template>
-  <div class="w-full h-5 ltr:-ml-1 rtl:-mr-1">
-    <a
-      v-if="href"
-      :href="href"
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
-    >
-      <emoji-or-icon
-        :icon="icon"
-        :emoji="emoji"
-        icon-size="14"
-        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
-      />
-      <span
-        v-if="value"
-        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-        :title="value"
-      >
-        {{ value }}
-      </span>
-      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
-
-      <woot-button
-        v-if="showCopy"
-        type="submit"
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="clipboard"
-        class-names="p-0"
-        @click="onCopy"
-      />
-    </a>
-
-    <div
-      v-else
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
-    >
-      <emoji-or-icon
-        :icon="icon"
-        :emoji="emoji"
-        icon-size="14"
-        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
-      />
-      <span
-        v-if="value"
-        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-      >
-        {{ value }}
-      </span>
-      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
-    </div>
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
@@ -96,3 +38,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-full h-5 ltr:-ml-1 rtl:-mr-1">
+    <a
+      v-if="href"
+      :href="href"
+      class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
+    >
+      <EmojiOrIcon
+        :icon="icon"
+        :emoji="emoji"
+        icon-size="14"
+        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
+      />
+      <span
+        v-if="value"
+        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
+        :title="value"
+      >
+        {{ value }}
+      </span>
+      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
+        $t('CONTACT_PANEL.NOT_AVAILABLE')
+      }}</span>
+
+      <woot-button
+        v-if="showCopy"
+        type="submit"
+        variant="clear"
+        size="tiny"
+        color-scheme="secondary"
+        icon="clipboard"
+        class-names="p-0"
+        @click="onCopy"
+      />
+    </a>
+
+    <div
+      v-else
+      class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
+    >
+      <EmojiOrIcon
+        :icon="icon"
+        :emoji="emoji"
+        icon-size="14"
+        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
+      />
+      <span
+        v-if="value"
+        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
+      >
+        {{ value }}
+      </span>
+      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
+        $t('CONTACT_PANEL.NOT_AVAILABLE')
+      }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index e3070a267..8eda0be8d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -1,242 +1,3 @@
-<template>
-  <form class="w-full conversation--form" @submit.prevent="onFormSubmit">
-    <div
-      v-if="showNoInboxAlert"
-      class="relative mx-0 mt-0 mb-2.5 p-2 rounded-none text-sm border border-solid border-yellow-500 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 text-slate-700 dark:text-yellow-400"
-    >
-      <p class="mb-0">
-        {{ $t('NEW_CONVERSATION.NO_INBOX') }}
-      </p>
-    </div>
-    <div v-else>
-      <div class="flex flex-row gap-2">
-        <div class="w-[50%]">
-          <label>
-            {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
-          </label>
-          <div
-            class="multiselect-wrap--small"
-            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
-          >
-            <multiselect
-              v-model="targetInbox"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label=""
-              select-label=""
-              deselect-label=""
-              :max-height="160"
-              :close-on-select="true"
-              :options="[...inboxes]"
-            >
-              <template slot="singleLabel" slot-scope="{ option }">
-                <inbox-dropdown-item
-                  v-if="option.name"
-                  :name="option.name"
-                  :inbox-identifier="computedInboxSource(option)"
-                  :channel-type="option.channel_type"
-                />
-                <span v-else>
-                  {{ $t('NEW_CONVERSATION.FORM.INBOX.PLACEHOLDER') }}
-                </span>
-              </template>
-              <template slot="option" slot-scope="{ option }">
-                <inbox-dropdown-item
-                  :name="option.name"
-                  :inbox-identifier="computedInboxSource(option)"
-                  :channel-type="option.channel_type"
-                />
-              </template>
-            </multiselect>
-          </div>
-          <label :class="{ error: v$.targetInbox.$error }">
-            <span v-if="v$.targetInbox.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-[50%]">
-          <label>
-            {{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
-            <div
-              class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
-            >
-              <thumbnail
-                :src="contact.thumbnail"
-                size="24px"
-                :username="contact.name"
-                :status="contact.availability_status"
-              />
-              <h4
-                class="m-0 ml-2 mr-2 text-sm text-slate-700 dark:text-slate-100"
-              >
-                {{ contact.name }}
-              </h4>
-            </div>
-          </label>
-        </div>
-      </div>
-      <div v-if="isAnEmailInbox" class="w-full">
-        <div class="w-full">
-          <label :class="{ error: v$.subject.$error }">
-            {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
-            <input
-              v-model="subject"
-              type="text"
-              :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
-              @input="v$.subject.$touch"
-            />
-            <span v-if="v$.subject.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
-            </span>
-          </label>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="w-full">
-          <div class="relative">
-            <canned-response
-              v-if="showCannedResponseMenu && hasSlashCommand"
-              :search-key="cannedResponseSearchKey"
-              @click="replaceTextWithCannedResponse"
-            />
-          </div>
-          <div v-if="isEmailOrWebWidgetInbox">
-            <label>
-              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
-            </label>
-            <reply-email-head
-              v-if="isAnEmailInbox"
-              :cc-emails.sync="ccEmails"
-              :bcc-emails.sync="bccEmails"
-            />
-            <div class="editor-wrap">
-              <woot-message-editor
-                v-model="message"
-                class="message-editor"
-                :class="{ editor_warning: v$.message.$error }"
-                :enable-variables="true"
-                :signature="signatureToApply"
-                :allow-signature="true"
-                :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-                @toggle-canned-menu="toggleCannedMenu"
-                @blur="v$.message.$touch"
-              >
-                <template #footer>
-                  <message-signature-missing-alert
-                    v-if="isSignatureEnabledForInbox && !messageSignature"
-                    class="!mx-0 mb-1"
-                  />
-                  <div v-if="isAnEmailInbox" class="mt-px mb-3">
-                    <woot-button
-                      v-tooltip.top-end="signatureToggleTooltip"
-                      icon="signature"
-                      color-scheme="secondary"
-                      variant="smooth"
-                      size="small"
-                      :title="signatureToggleTooltip"
-                      @click.prevent="toggleMessageSignature"
-                    />
-                  </div>
-                </template>
-              </woot-message-editor>
-              <span v-if="v$.message.$error" class="editor-warning__message">
-                {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
-              </span>
-            </div>
-          </div>
-          <whatsapp-templates
-            v-else-if="hasWhatsappTemplates"
-            :inbox-id="selectedInbox.inbox.id"
-            @on-select-template="toggleWaTemplate"
-            @on-send="onSendWhatsAppReply"
-          />
-          <label v-else :class="{ error: v$.message.$error }">
-            {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
-            <textarea
-              v-model="message"
-              class="min-h-[5rem]"
-              type="text"
-              :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-              @input="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
-            </span>
-          </label>
-          <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
-            <file-upload
-              ref="uploadAttachment"
-              input-id="newConversationAttachment"
-              :size="4096 * 4096"
-              :accept="allowedFileTypes"
-              :multiple="true"
-              :drop="true"
-              :drop-directory="false"
-              :data="{
-                direct_upload_url: '/rails/active_storage/direct_uploads',
-                direct_upload: true,
-              }"
-              @input-file="onFileUpload"
-            >
-              <woot-button
-                class-names="button--upload"
-                icon="attach"
-                emoji="📎"
-                color-scheme="secondary"
-                variant="smooth"
-                size="small"
-              >
-                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.SELECT') }}
-              </woot-button>
-              <span
-                class="text-xs font-medium text-slate-500 ltr:ml-1 rtl:mr-1 dark:text-slate-400"
-              >
-                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
-              </span>
-            </file-upload>
-            <div
-              v-if="hasAttachments"
-              class="max-h-20 overflow-y-auto mb-4 mt-1.5"
-            >
-              <attachment-preview
-                class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
-                :attachments="attachedFiles"
-                :remove-attachment="removeAttachment"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="!hasWhatsappTemplates"
-      class="flex flex-row justify-end w-full gap-2 px-0 py-2"
-    >
-      <button class="button clear" @click.prevent="onCancel">
-        {{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
-      </button>
-      <woot-button type="submit" :is-loading="conversationsUiFlags.isCreating">
-        {{ $t('NEW_CONVERSATION.FORM.SUBMIT') }}
-      </woot-button>
-    </div>
-
-    <transition v-if="isEmailOrWebWidgetInbox" name="modal-fade">
-      <div
-        v-show="$refs.uploadAttachment && $refs.uploadAttachment.dropActive"
-        class="absolute top-0 bottom-0 left-0 right-0 z-30 flex flex-col items-center justify-center w-full h-full gap-2 bg-white/80 dark:bg-slate-700/80"
-      >
-        <fluent-icon icon="cloud-backup" size="40" />
-        <h4 class="text-2xl break-words text-slate-600 dark:text-slate-200">
-          {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
-        </h4>
-      </div>
-    </transition>
-  </form>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -472,10 +233,8 @@ export default {
         });
       };
     },
-    removeAttachment(itemIndex) {
-      this.attachedFiles = this.attachedFiles.filter(
-        (item, index) => itemIndex !== index
-      );
+    removeAttachment(attachments) {
+      this.attachedFiles = attachments;
     },
     onCancel() {
       this.$emit('cancel');
@@ -557,6 +316,246 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/prefer-true-attribute-shorthand -->
+<template>
+  <form class="w-full conversation--form" @submit.prevent="onFormSubmit">
+    <div
+      v-if="showNoInboxAlert"
+      class="relative mx-0 mt-0 mb-2.5 p-2 rounded-none text-sm border border-solid border-yellow-500 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 text-slate-700 dark:text-yellow-400"
+    >
+      <p class="mb-0">
+        {{ $t('NEW_CONVERSATION.NO_INBOX') }}
+      </p>
+    </div>
+    <div v-else>
+      <div class="flex flex-row gap-2">
+        <div class="w-[50%]">
+          <label>
+            {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
+          </label>
+          <div
+            class="multiselect-wrap--small"
+            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
+          >
+            <multiselect
+              v-model="targetInbox"
+              track-by="id"
+              label="name"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
+              selected-label=""
+              select-label=""
+              deselect-label=""
+              :max-height="160"
+              close-on-select
+              :options="[...inboxes]"
+            >
+              <template slot="singleLabel" slot-scope="{ option }">
+                <InboxDropdownItem
+                  v-if="option.name"
+                  :name="option.name"
+                  :inbox-identifier="computedInboxSource(option)"
+                  :channel-type="option.channel_type"
+                />
+                <span v-else>
+                  {{ $t('NEW_CONVERSATION.FORM.INBOX.PLACEHOLDER') }}
+                </span>
+              </template>
+              <template slot="option" slot-scope="{ option }">
+                <InboxDropdownItem
+                  :name="option.name"
+                  :inbox-identifier="computedInboxSource(option)"
+                  :channel-type="option.channel_type"
+                />
+              </template>
+            </multiselect>
+          </div>
+          <label :class="{ error: v$.targetInbox.$error }">
+            <span v-if="v$.targetInbox.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="w-[50%]">
+          <label>
+            {{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
+            <div
+              class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
+            >
+              <Thumbnail
+                :src="contact.thumbnail"
+                size="24px"
+                :username="contact.name"
+                :status="contact.availability_status"
+              />
+              <h4
+                class="m-0 ml-2 mr-2 text-sm text-slate-700 dark:text-slate-100"
+              >
+                {{ contact.name }}
+              </h4>
+            </div>
+          </label>
+        </div>
+      </div>
+      <div v-if="isAnEmailInbox" class="w-full">
+        <div class="w-full">
+          <label :class="{ error: v$.subject.$error }">
+            {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
+            <input
+              v-model="subject"
+              type="text"
+              :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
+              @input="v$.subject.$touch"
+            />
+            <span v-if="v$.subject.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
+            </span>
+          </label>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="w-full">
+          <div class="relative">
+            <CannedResponse
+              v-if="showCannedResponseMenu && hasSlashCommand"
+              :search-key="cannedResponseSearchKey"
+              @click="replaceTextWithCannedResponse"
+            />
+          </div>
+          <div v-if="isEmailOrWebWidgetInbox">
+            <label>
+              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
+            </label>
+            <ReplyEmailHead
+              v-if="isAnEmailInbox"
+              :cc-emails.sync="ccEmails"
+              :bcc-emails.sync="bccEmails"
+            />
+            <div class="editor-wrap">
+              <WootMessageEditor
+                v-model="message"
+                class="message-editor"
+                :class="{ editor_warning: v$.message.$error }"
+                enable-variables
+                :signature="signatureToApply"
+                allow-signature
+                :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
+                @toggle-canned-menu="toggleCannedMenu"
+                @blur="v$.message.$touch"
+              >
+                <template #footer>
+                  <MessageSignatureMissingAlert
+                    v-if="isSignatureEnabledForInbox && !messageSignature"
+                    class="!mx-0 mb-1"
+                  />
+                  <div v-if="isAnEmailInbox" class="mt-px mb-3">
+                    <woot-button
+                      v-tooltip.top-end="signatureToggleTooltip"
+                      icon="signature"
+                      color-scheme="secondary"
+                      variant="smooth"
+                      size="small"
+                      :title="signatureToggleTooltip"
+                      @click.prevent="toggleMessageSignature"
+                    />
+                  </div>
+                </template>
+              </WootMessageEditor>
+              <span v-if="v$.message.$error" class="editor-warning__message">
+                {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
+              </span>
+            </div>
+          </div>
+          <WhatsappTemplates
+            v-else-if="hasWhatsappTemplates"
+            :inbox-id="selectedInbox.inbox.id"
+            @on-select-template="toggleWaTemplate"
+            @onSend="onSendWhatsAppReply"
+          />
+          <label v-else :class="{ error: v$.message.$error }">
+            {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
+            <textarea
+              v-model="message"
+              class="min-h-[5rem]"
+              type="text"
+              :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
+              @input="v$.message.$touch"
+            />
+            <span v-if="v$.message.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
+            </span>
+          </label>
+          <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
+            <FileUpload
+              ref="uploadAttachment"
+              input-id="newConversationAttachment"
+              :size="4096 * 4096"
+              :accept="allowedFileTypes"
+              multiple
+              :drop="true"
+              :drop-directory="false"
+              :data="{
+                direct_upload_url: '/rails/active_storage/direct_uploads',
+                direct_upload: true,
+              }"
+              @input-file="onFileUpload"
+            >
+              <woot-button
+                class-names="button--upload"
+                icon="attach"
+                emoji="📎"
+                color-scheme="secondary"
+                variant="smooth"
+                size="small"
+              >
+                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.SELECT') }}
+              </woot-button>
+              <span
+                class="text-xs font-medium text-slate-500 ltr:ml-1 rtl:mr-1 dark:text-slate-400"
+              >
+                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
+              </span>
+            </FileUpload>
+            <div
+              v-if="hasAttachments"
+              class="max-h-20 overflow-y-auto mb-4 mt-1.5"
+            >
+              <AttachmentPreview
+                class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
+                :attachments="attachedFiles"
+                @removeAttachment="removeAttachment"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="!hasWhatsappTemplates"
+      class="flex flex-row justify-end w-full gap-2 px-0 py-2"
+    >
+      <button class="button clear" @click.prevent="onCancel">
+        {{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
+      </button>
+      <woot-button type="submit" :is-loading="conversationsUiFlags.isCreating">
+        {{ $t('NEW_CONVERSATION.FORM.SUBMIT') }}
+      </woot-button>
+    </div>
+
+    <transition v-if="isEmailOrWebWidgetInbox" name="modal-fade">
+      <div
+        v-show="$refs.uploadAttachment && $refs.uploadAttachment.dropActive"
+        class="absolute top-0 bottom-0 left-0 right-0 z-30 flex flex-col items-center justify-center w-full h-full gap-2 bg-white/80 dark:bg-slate-700/80"
+      >
+        <fluent-icon icon="cloud-backup" size="40" />
+        <h4 class="text-2xl break-words text-slate-600 dark:text-slate-200">
+          {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+        </h4>
+      </div>
+    </transition>
+  </form>
+</template>
+
 <style scoped lang="scss">
 .conversation--form {
   @apply pt-4 px-8 pb-8;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
index c33b9031d..b5c3a77a4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -1,21 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('CREATE_CONTACT.TITLE')"
-        :header-content="$t('CREATE_CONTACT.DESC')"
-      />
-      <contact-form
-        :in-progress="uiFlags.isCreating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
@@ -29,10 +11,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
   },
 
   computed: {
@@ -54,3 +32,21 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CREATE_CONTACT.TITLE')"
+        :header-content="$t('CREATE_CONTACT.DESC')"
+      />
+      <ContactForm
+        :in-progress="uiFlags.isCreating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index 8099da416..21f1de0e3 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,24 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
-          contact.name || contact.email
-        }`"
-        :header-content="$t('EDIT_CONTACT.DESC')"
-      />
-      <contact-form
-        :contact="contact"
-        :in-progress="uiFlags.isUpdating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
@@ -61,3 +40,24 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
+          contact.name || contact.email
+        }`"
+        :header-content="$t('EDIT_CONTACT.DESC')"
+      />
+      <ContactForm
+        :contact="contact"
+        :in-progress="uiFlags.isUpdating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
index b7527c096..a0a579bbf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
@@ -1,21 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('NEW_CONVERSATION.TITLE')"
-        :header-content="$t('NEW_CONVERSATION.DESC')"
-      />
-      <conversation-form
-        :contact="contact"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import ConversationForm from './ConversationForm.vue';
 
@@ -59,3 +41,21 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('NEW_CONVERSATION.TITLE')"
+        :header-content="$t('NEW_CONVERSATION.DESC')"
+      />
+      <ConversationForm
+        :contact="contact"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index a4152051d..564e8415d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -1,21 +1,3 @@
-<template>
-  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
-    <a
-      v-for="profile in availableProfiles"
-      :key="profile.key"
-      :href="`${profile.link}${socialProfiles[profile.key]}`"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        :icon="`brand-${profile.key}`"
-        size="16"
-        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-      />
-    </a>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -44,3 +26,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
+    <a
+      v-for="profile in availableProfiles"
+      :key="profile.key"
+      :href="`${profile.link}${socialProfiles[profile.key]}`"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <fluent-icon
+        :icon="`brand-${profile.key}`"
+        size="16"
+        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
index dae4f926b..8ba5b21c9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="mx-0 flex flex-wrap">
-    <templates-picker
-      v-if="!selectedWaTemplate"
-      :inbox-id="inboxId"
-      @onSelect="pickTemplate"
-    />
-    <template-parser
-      v-else
-      :template="selectedWaTemplate"
-      @resetTemplate="onResetTemplate"
-      @sendMessage="onSendMessage"
-    />
-  </div>
-</template>
-
 <script>
 import TemplatesPicker from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue';
 import TemplateParser from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue';
@@ -27,10 +11,6 @@ export default {
       type: Number,
       default: undefined,
     },
-    show: {
-      type: Boolean,
-      default: true,
-    },
   },
   data() {
     return {
@@ -47,7 +27,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
@@ -56,4 +36,18 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <div class="flex flex-wrap mx-0">
+    <TemplatesPicker
+      v-if="!selectedWaTemplate"
+      :inbox-id="inboxId"
+      @onSelect="pickTemplate"
+    />
+    <TemplateParser
+      v-else
+      :template="selectedWaTemplate"
+      @resetTemplate="onResetTemplate"
+      @sendMessage="onSendMessage"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index ae2e6c424..86ef0f91e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="custom-attributes--panel">
-    <custom-attribute
-      v-for="attribute in displayedAttributes"
-      :key="attribute.id"
-      :attribute-key="attribute.attribute_key"
-      :attribute-type="attribute.attribute_display_type"
-      :values="attribute.attribute_values"
-      :label="attribute.attribute_display_name"
-      :description="attribute.attribute_description"
-      :value="attribute.value"
-      :show-actions="true"
-      :attribute-regex="attribute.regex_pattern"
-      :regex-cue="attribute.regex_cue"
-      :class="attributeClass"
-      :contact-id="contactId"
-      @update="onUpdate"
-      @delete="onDelete"
-      @copy="onCopy"
-    />
-    <p
-      v-if="!displayedAttributes.length && emptyStateMessage"
-      class="p-3 text-center"
-    >
-      {{ emptyStateMessage }}
-    </p>
-    <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
-    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
-      <woot-button
-        size="small"
-        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
-        variant="clear"
-        color-scheme="primary"
-        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
-        @click="onClickToggle"
-      >
-        {{ toggleButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -188,6 +146,48 @@ export default {
 };
 </script>
 
+<template>
+  <div class="custom-attributes--panel">
+    <CustomAttribute
+      v-for="attribute in displayedAttributes"
+      :key="attribute.id"
+      :attribute-key="attribute.attribute_key"
+      :attribute-type="attribute.attribute_display_type"
+      :values="attribute.attribute_values"
+      :label="attribute.attribute_display_name"
+      :description="attribute.attribute_description"
+      :value="attribute.value"
+      show-actions
+      :attribute-regex="attribute.regex_pattern"
+      :regex-cue="attribute.regex_cue"
+      :class="attributeClass"
+      :contact-id="contactId"
+      @update="onUpdate"
+      @delete="onDelete"
+      @copy="onCopy"
+    />
+    <p
+      v-if="!displayedAttributes.length && emptyStateMessage"
+      class="p-3 text-center"
+    >
+      {{ emptyStateMessage }}
+    </p>
+    <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
+    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
+      <woot-button
+        size="small"
+        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
+        variant="clear"
+        color-scheme="primary"
+        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
+        @click="onClickToggle"
+      >
+        {{ toggleButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .custom-attributes--panel {
   .conversation--attribute {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 6b4fa0466..86b877733 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -1,48 +1,3 @@
-<template>
-  <div class="sidebar-labels-wrap">
-    <div
-      v-if="!conversationUiFlags.isFetching"
-      class="contact-conversation--list"
-    >
-      <div
-        v-on-clickaway="closeDropdownLabel"
-        class="label-wrap"
-        @keyup.esc="closeDropdownLabel"
-      >
-        <add-label @add="toggleLabels" />
-        <woot-label
-          v-for="label in activeLabels"
-          :key="label.id"
-          :title="label.title"
-          :description="label.description"
-          :show-close="true"
-          :color="label.color"
-          variant="smooth"
-          class="max-w-[calc(100%-0.5rem)]"
-          @click="removeLabelFromConversation"
-        />
-
-        <div class="dropdown-wrap">
-          <div
-            :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-            class="dropdown-pane"
-          >
-            <label-dropdown
-              v-if="showSearchDropdownLabel"
-              :account-labels="accountLabels"
-              :selected-labels="savedLabels"
-              :allow-creation="isAdmin"
-              @add="addLabelToConversation"
-              @remove="removeLabelFromConversation"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <spinner v-else />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -61,6 +16,9 @@ export default {
 
   mixins: [conversationLabelMixin, keyboardEventListenerMixins],
   props: {
+    // conversationId prop is used in /conversation/labelMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
     conversationId: {
       type: Number,
       required: true,
@@ -82,7 +40,6 @@ export default {
   computed: {
     ...mapGetters({
       conversationUiFlags: 'conversationLabels/getUIFlags',
-      labelUiFlags: 'conversationLabels/getUIFlags',
     }),
   },
   methods: {
@@ -114,6 +71,51 @@ export default {
 };
 </script>
 
+<template>
+  <div class="sidebar-labels-wrap">
+    <div
+      v-if="!conversationUiFlags.isFetching"
+      class="contact-conversation--list"
+    >
+      <div
+        v-on-clickaway="closeDropdownLabel"
+        class="label-wrap"
+        @keyup.esc="closeDropdownLabel"
+      >
+        <AddLabel @add="toggleLabels" />
+        <woot-label
+          v-for="label in activeLabels"
+          :key="label.id"
+          :title="label.title"
+          :description="label.description"
+          show-close
+          :color="label.color"
+          variant="smooth"
+          class="max-w-[calc(100%-0.5rem)]"
+          @click="removeLabelFromConversation"
+        />
+
+        <div class="dropdown-wrap">
+          <div
+            :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
+            class="dropdown-pane"
+          >
+            <LabelDropdown
+              v-if="showSearchDropdownLabel"
+              :account-labels="accountLabels"
+              :selected-labels="savedLabels"
+              :allow-creation="isAdmin"
+              @add="addLabelToConversation"
+              @remove="removeLabelFromConversation"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Spinner v-else />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .sidebar-labels-wrap {
   margin-bottom: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 9ac7186b4..b7d5e17dd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="relative">
-    <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
-    >
-      <woot-sidemenu-icon
-        size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
-      />
-      <router-link
-        :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
-      >
-        <div class="flex">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
-            size="16"
-          />
-        </div>
-        <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </p>
-      </router-link>
-      <switch-layout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggle-conversation-layout')"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -65,6 +31,41 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative">
+    <div
+      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+    >
+      <woot-sidemenu-icon
+        size="tiny"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
+      />
+      <router-link
+        :to="searchUrl"
+        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
+      >
+        <div class="flex">
+          <fluent-icon
+            icon="search"
+            class="search--icon text-slate-800 dark:text-slate-200"
+            size="16"
+          />
+        </div>
+        <p
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
+        >
+          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
+        </p>
+      </router-link>
+      <SwitchLayout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="$emit('toggleConversationLayout')"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-link {
   &:hover {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
index 1988e9974..0a4fe57e6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -1,16 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
-    @click="toggle"
-  />
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +14,19 @@ export default {
 };
 </script>
 
+<template>
+  <woot-button
+    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
+    icon="arrow-right-import"
+    size="tiny"
+    variant="smooth"
+    color-scheme="secondary"
+    class="layout-switch__container"
+    :class="{ expanded: isOnExpandedLayout }"
+    @click="toggle"
+  />
+</template>
+
 <style lang="scss" soped>
 .layout-switch__container {
   &.expanded .icon {
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
index 0726606dd..e9ada22ff 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@@ -1,33 +1,3 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
-    <form class="w-full" @submit.prevent="saveCustomViews">
-      <div class="w-full">
-        <woot-input
-          v-model="name"
-          :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
-          type="text"
-          :error="
-            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
-          "
-          :class="{ error: v$.name.$error }"
-          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          @blur="v$.name.$touch"
-        />
-
-        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-          <woot-button :disabled="isButtonDisabled">
-            {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
-          </woot-button>
-          <woot-button variant="clear" @click.prevent="onClose">
-            {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
-          </woot-button>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -110,3 +80,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
+    <form class="w-full" @submit.prevent="saveCustomViews">
+      <div class="w-full">
+        <woot-input
+          v-model="name"
+          :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
+          type="text"
+          :error="
+            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
+          "
+          :class="{ error: v$.name.$error }"
+          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+          @blur="v$.name.$touch"
+        />
+
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <woot-button :disabled="isButtonDisabled">
+            {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
+          </woot-button>
+          <woot-button variant="clear" @click.prevent="onClose">
+            {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
+          </woot-button>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
index c32c449eb..843dea527 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
@@ -1,20 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <woot-delete-modal
-      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="deleteSavedCustomViews"
-      :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
-      :message="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -103,3 +86,20 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div>
+    <woot-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="deleteSavedCustomViews"
+      :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
+      :message="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
index cfa1b9b1b..b1e334b2c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -1,43 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
-      :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <label :class="{ error: v$.selectedLocale.$error }">
-          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
-          <select v-model="selectedLocale">
-            <option
-              v-for="locale in locales"
-              :key="locale.name"
-              :value="locale.id"
-            >
-              {{ locale.name }}-{{ locale.code }}
-            </option>
-          </select>
-          <span v-if="v$.selectedLocale.$error" class="message">
-            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
-          </span>
-        </label>
-
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button>
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modal>
-</template>
-
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -134,6 +94,47 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
+      :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
+    />
+    <form class="w-full" @submit.prevent="onCreate">
+      <div class="w-full">
+        <label :class="{ error: v$.selectedLocale.$error }">
+          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
+          <select v-model="selectedLocale">
+            <option
+              v-for="locale in locales"
+              :key="locale.name"
+              :value="locale.id"
+            >
+              {{ locale.name }}-{{ locale.code }}
+            </option>
+          </select>
+          <span v-if="v$.selectedLocale.$error" class="message">
+            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
+          </span>
+        </label>
+
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button>
+              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </Modal>
+</template>
+
 <style scoped lang="scss">
 .input-container::v-deep {
   margin: 0 0 var(--space-normal);
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index a1d8f2dd3..2b9a09d6d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="edit-article--container">
-    <resizable-text-area
-      v-model="articleTitle"
-      type="text"
-      :rows="1"
-      class="article-heading"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="onTitleInput"
-    />
-    <woot-article-editor
-      v-model="articleContent"
-      class="article-content"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
-      :enabled-menu-options="customEditorMenuOptions"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="onContentInput"
-    />
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -38,10 +14,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    isSettingsSidebarOpen: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -56,7 +28,7 @@ export default {
     this.articleContent = this.article.content;
     this.saveArticle = debounce(
       values => {
-        this.$emit('save-article', values);
+        this.$emit('saveArticle', values);
       },
       300,
       false
@@ -79,6 +51,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="edit-article--container">
+    <ResizableTextArea
+      v-model="articleTitle"
+      type="text"
+      :rows="1"
+      class="article-heading"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onTitleInput"
+    />
+    <WootArticleEditor
+      v-model="articleContent"
+      class="article-content"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuOptions"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onContentInput"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .edit-article--container {
   @apply my-8 mx-auto py-0 max-w-[56rem] w-full;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index 9fbb9729d..18281aec3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,3 +1,88 @@
+<script>
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import portalMixin from '../mixins/portalMixin';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  mixins: [portalMixin],
+  props: {
+    showDragIcon: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: Number,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    author: {
+      type: Object,
+      default: () => {},
+    },
+    category: {
+      type: Object,
+      default: () => {},
+    },
+    views: {
+      type: Number,
+      default: 0,
+    },
+    status: {
+      type: String,
+      default: 'draft',
+      values: ['archived', 'draft', 'published'],
+    },
+    updatedAt: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  computed: {
+    lastUpdatedAt() {
+      return dynamicTime(this.updatedAt);
+    },
+    formattedViewCount() {
+      return Number(this.views || 0).toLocaleString('en');
+    },
+    readableViewCount() {
+      return new Intl.NumberFormat('en-US', {
+        notation: 'compact',
+        compactDisplay: 'short',
+      }).format(this.views || 0);
+    },
+    articleAuthorName() {
+      return this.author?.name || '-';
+    },
+    labelColor() {
+      switch (this.status) {
+        case 'archived':
+          return 'secondary';
+        case 'draft':
+          return 'warning';
+        default:
+          return 'success';
+      }
+    },
+  },
+  methods: {
+    getCategoryRoute(categorySlug) {
+      const { portalSlug, locale } = this.$route.params;
+      return frontendURL(
+        `accounts/${this.accountId}/portals/${portalSlug}/${locale}/categories/${categorySlug}`
+      );
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
@@ -80,89 +165,3 @@
     </span>
   </div>
 </template>
-
-<script>
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import portalMixin from '../mixins/portalMixin';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    showDragIcon: {
-      type: Boolean,
-      default: false,
-    },
-    id: {
-      type: Number,
-      required: true,
-    },
-    title: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    author: {
-      type: Object,
-      default: () => {},
-    },
-    category: {
-      type: Object,
-      default: () => {},
-    },
-    views: {
-      type: Number,
-      default: 0,
-    },
-    status: {
-      type: String,
-      default: 'draft',
-      values: ['archived', 'draft', 'published'],
-    },
-    updatedAt: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  computed: {
-    lastUpdatedAt() {
-      return dynamicTime(this.updatedAt);
-    },
-    formattedViewCount() {
-      return Number(this.views || 0).toLocaleString('en');
-    },
-    readableViewCount() {
-      return new Intl.NumberFormat('en-US', {
-        notation: 'compact',
-        compactDisplay: 'short',
-      }).format(this.views || 0);
-    },
-    articleAuthorName() {
-      return this.author?.name || '-';
-    },
-    labelColor() {
-      switch (this.status) {
-        case 'archived':
-          return 'secondary';
-        case 'draft':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-  },
-  methods: {
-    getCategoryRoute(categorySlug) {
-      const { portalSlug, locale } = this.$route.params;
-      return frontendURL(
-        `accounts/${this.accountId}/portals/${portalSlug}/${locale}/categories/${categorySlug}`
-      );
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
index 2ed565070..79c578c48 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -1,3 +1,49 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
+export default {
+  name: 'ArticleSearchResultItem',
+  props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: 'Untitled',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    category: {
+      type: String,
+      default: '',
+    },
+    locale: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleInsert(e) {
+      e.stopPropagation();
+      this.$emit('insert', this.id);
+    },
+    handlePreview(e) {
+      e.stopPropagation();
+      this.$emit('preview', this.id);
+    },
+    async handleCopy(e) {
+      e.stopPropagation();
+      await copyTextToClipboard(this.url);
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+    },
+  },
+};
+</script>
+
 <template>
   <button
     class="flex flex-col w-full gap-1 px-2 py-1 bg-white border border-transparent border-solid rounded-md cursor-pointer dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 group focus:outline-none focus:bg-slate-25 focus:border-slate-500 dark:focus:border-slate-400 dark:focus:bg-slate-800"
@@ -40,53 +86,3 @@
     </div>
   </button>
 </template>
-
-<script>
-import { useAlert } from 'dashboard/composables';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
-export default {
-  name: 'ArticleSearchResultItem',
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    title: {
-      type: String,
-      default: 'Untitled',
-    },
-    body: {
-      type: String,
-      default: '',
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    handleInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert', this.id);
-    },
-    handlePreview(e) {
-      e.stopPropagation();
-      this.$emit('preview', this.id);
-    },
-    async handleCopy(e) {
-      e.stopPropagation();
-      await copyTextToClipboard(this.url);
-      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
index 168ac792c..704ee64c6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
-    <div class="py-1">
-      <woot-button
-        variant="link"
-        size="small"
-        icon="chevron-left"
-        @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
-      </woot-button>
-    </div>
-    <div class="-ml-4 h-full overflow-y-auto">
-      <div class="w-full h-full min-h-0">
-        <iframe-loader :url="url" />
-      </div>
-    </div>
-
-    <div class="flex justify-end gap-2 py-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        is-expanded
-        color-scheme="secondary"
-        icon="chevron-left"
-        @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
-      </woot-button>
-      <woot-button
-        size="small"
-        is-expanded
-        icon="arrow-download"
-        @click="onInsert"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
@@ -65,3 +24,44 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
+    <div class="py-1">
+      <woot-button
+        variant="link"
+        size="small"
+        icon="chevron-left"
+        @click="onBack"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
+      </woot-button>
+    </div>
+    <div class="-ml-4 h-full overflow-y-auto">
+      <div class="w-full h-full min-h-0">
+        <IframeLoader :url="url" />
+      </div>
+    </div>
+
+    <div class="flex justify-end gap-2 py-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        is-expanded
+        color-scheme="secondary"
+        icon="chevron-left"
+        @click="onBack"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
+      </woot-button>
+      <woot-button
+        size="small"
+        is-expanded
+        icon="arrow-download"
+        @click="onInsert"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index 661473316..87dfcf609 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="flex flex-col py-1">
-    <div class="flex items-center justify-between py-2 mb-1">
-      <h3 class="text-base text-slate-900 dark:text-slate-25">
-        {{ title }}
-      </h3>
-      <woot-button
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
-    </div>
-
-    <div class="relative">
-      <div
-        class="absolute ltr:left-0 rtl:right-0 w-8 top-0.5 h-8 flex justify-center items-center"
-      >
-        <fluent-icon icon="search" class="" size="18" />
-      </div>
-      <input
-        ref="searchInput"
-        type="text"
-        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
-        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
-        :value="searchQuery"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
@@ -80,3 +45,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col py-1">
+    <div class="flex items-center justify-between py-2 mb-1">
+      <h3 class="text-base text-slate-900 dark:text-slate-25">
+        {{ title }}
+      </h3>
+      <woot-button
+        variant="clear"
+        size="tiny"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+
+    <div class="relative">
+      <div
+        class="absolute ltr:left-0 rtl:right-0 w-8 top-0.5 h-8 flex justify-center items-center"
+      >
+        <fluent-icon icon="search" class="" size="18" />
+      </div>
+      <input
+        ref="searchInput"
+        type="text"
+        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
+        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
+        :value="searchQuery"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index ddaa8ac79..ec2d9708a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,37 +1,3 @@
-<template>
-  <div
-    class="fixed top-0 left-0 z-50 flex items-center justify-center w-screen h-screen bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
-  >
-    <div
-      v-on-clickaway="onClose"
-      class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-900 z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
-    >
-      <search-header
-        :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
-        class="w-full sticky top-0 bg-[inherit]"
-        @close="onClose"
-        @search="onSearch"
-      />
-
-      <article-view
-        v-if="activeId"
-        :url="articleViewerUrl"
-        @back="onBack"
-        @insert="onInsert"
-      />
-      <search-results
-        v-else
-        :search-query="searchQuery"
-        :is-loading="isLoading"
-        :portal-slug="selectedPortalSlug"
-        :articles="searchResultsWithUrl"
-        @preview="handlePreview"
-        @insert="onInsert"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
@@ -161,3 +127,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="fixed top-0 left-0 z-50 flex items-center justify-center w-screen h-screen bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+  >
+    <div
+      v-on-clickaway="onClose"
+      class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-900 z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
+    >
+      <SearchHeader
+        :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
+        class="w-full sticky top-0 bg-[inherit]"
+        @close="onClose"
+        @search="onSearch"
+      />
+
+      <ArticleView
+        v-if="activeId"
+        :url="articleViewerUrl"
+        @back="onBack"
+        @insert="onInsert"
+      />
+      <SearchResults
+        v-else
+        :search-query="searchQuery"
+        :is-loading="isLoading"
+        :portal-slug="selectedPortalSlug"
+        :articles="searchResultsWithUrl"
+        @preview="handlePreview"
+        @insert="onInsert"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
index 4a6eb5b8b..ca50c11e0 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="flex justify-end gap-1 py-4 bg-white dark:bg-slate-900 h-full overflow-y-auto"
-  >
-    <div class="flex flex-col gap-1 w-full">
-      <div v-if="isLoading" class="empty-state-message">
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
-      </div>
-      <div v-else-if="showNoResults" class="empty-state-message">
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
-      </div>
-      <search-result-item
-        v-for="article in articles"
-        v-else
-        :id="article.id"
-        :key="article.id"
-        :title="article.title"
-        :body="article.content"
-        :url="article.url"
-        :category="article.category.name"
-        :locale="article.localeName"
-        @preview="handlePreview"
-        @insert="handleInsert"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import SearchResultItem from './ArticleSearchResultItem.vue';
 
@@ -47,10 +19,6 @@ export default {
       type: String,
       default: '',
     },
-    portalSlug: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     showNoResults() {
@@ -67,6 +35,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-end h-full gap-1 py-4 overflow-y-auto bg-white dark:bg-slate-900"
+  >
+    <div class="flex flex-col w-full gap-1">
+      <div v-if="isLoading" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
+      </div>
+      <div v-else-if="showNoResults" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
+      </div>
+      <template v-else>
+        <SearchResultItem
+          v-for="article in articles"
+          :id="article.id"
+          :key="article.id"
+          :title="article.title"
+          :body="article.content"
+          :url="article.url"
+          :category="article.category.name"
+          :locale="article.localeName"
+          @preview="handlePreview"
+          @insert="handleInsert"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .empty-state-message {
   @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 1e8c2e92c..cb0adbdbc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -1,70 +1,3 @@
-<template>
-  <div class="flex-1">
-    <div
-      class="hidden lg:grid py-0 px-6 h-12 content-center grid-cols-12 z-10 gap-4 border-b border-slate-50 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
-      :class="{ draggable: onCategoryPage }"
-    >
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-6"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right hidden lg:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right rtl:text-left hidden md:block col-span-2"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
-      </div>
-    </div>
-    <draggable
-      tag="div"
-      class="border-t-0 px-4 pb-4"
-      :disabled="!dragEnabled"
-      :list="localArticles"
-      ghost-class="article-ghost-class"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <ArticleItem
-        v-for="article in localArticles"
-        :id="article.id"
-        :key="article.id"
-        :class="{ draggable: onCategoryPage }"
-        :title="article.title"
-        :author="article.author"
-        :show-drag-icon="dragEnabled"
-        :category="article.category"
-        :views="article.views"
-        :status="article.status"
-        :updated-at="article.updated_at"
-      />
-    </draggable>
-
-    <table-footer
-      v-if="showArticleFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
 <script>
 import ArticleItem from './ArticleItem.vue';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
@@ -74,7 +7,7 @@ export default {
   components: {
     ArticleItem,
     TableFooter,
-    draggable,
+    Draggable: draggable,
   },
   props: {
     articles: {
@@ -150,11 +83,79 @@ export default {
       this.$emit('reorder', reorderedGroup);
     },
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
 </script>
+
+<template>
+  <div class="flex-1">
+    <div
+      class="sticky z-10 content-center hidden h-12 grid-cols-12 gap-4 px-6 py-0 bg-white border-b lg:grid border-slate-50 dark:border-slate-700 top-16 dark:bg-slate-900"
+      :class="{ draggable: onCategoryPage }"
+    >
+      <div
+        class="col-span-6 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
+      </div>
+      <div
+        class="col-span-2 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
+      </div>
+      <div
+        class="hidden px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right lg:block"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
+      </div>
+      <div
+        class="px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
+      </div>
+      <div
+        class="hidden col-span-2 px-0 py-2 text-sm font-semibold text-right capitalize text-slate-700 dark:text-slate-100 rtl:text-left md:block"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
+      </div>
+    </div>
+    <Draggable
+      tag="div"
+      class="px-4 pb-4 border-t-0"
+      :disabled="!dragEnabled"
+      :list="localArticles"
+      ghost-class="article-ghost-class"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <ArticleItem
+        v-for="article in localArticles"
+        :id="article.id"
+        :key="article.id"
+        :class="{ draggable: onCategoryPage }"
+        :title="article.title"
+        :author="article.author"
+        :show-drag-icon="dragEnabled"
+        :category="article.category"
+        :views="article.views"
+        :status="article.status"
+        :updated-at="article.updated_at"
+      />
+    </Draggable>
+
+    <TableFooter
+      v-if="showArticleFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      class="bottom-0 border-t dark:bg-slate-900 border-slate-75 dark:border-slate-700/50"
+      @pageChange="onPageChange"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 /*
 The .article-ghost-class class is maintained as the vueDraggable doesn't allow multiple classes
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index d946b1b11..7e8c2d428 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -1,142 +1,3 @@
-<template>
-  <div
-    class="flex p-6 items-center justify-between w-full h-16 sticky top-0 z-50 bg-white dark:bg-slate-900"
-  >
-    <div class="flex items-center">
-      <woot-sidemenu-icon />
-      <div class="flex items-center my-0 mx-2">
-        <h3 class="text-xl text-slate-800 dark:text-slate-100 font-medium mb-0">
-          {{ headerTitle }}
-        </h3>
-        <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
-          `(${count})`
-        }}</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-1">
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="filter"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="openFilterModal"
-      >
-        {{ $t('HELP_CENTER.HEADER.FILTER') }}
-      </woot-button>
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="arrow-sort"
-        color-scheme="secondary"
-        size="small"
-        variant="hollow"
-        @click="openDropdown"
-      >
-        {{ $t('HELP_CENTER.HEADER.SORT') }}
-        <span
-          class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
-        >
-          {{ selectedValue }}
-          <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
-        </span>
-      </woot-button>
-      <div
-        v-if="showSortByDropdown"
-        v-on-clickaway="closeDropdown"
-        class="dropdown-pane dropdown-pane--open"
-      >
-        <woot-dropdown-menu>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="send-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
-            </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="dual-screen-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
-            </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="calendar-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
-            </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
-      </div>
-      <woot-button
-        v-if="shouldShowSettings"
-        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
-        icon="settings"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-      />
-      <div class="relative">
-        <woot-button
-          v-if="shouldShowLocaleDropdown"
-          icon="globe"
-          color-scheme="secondary"
-          size="small"
-          variant="hollow"
-          @click="openLocaleDropdown"
-        >
-          <div class="flex justify-between w-full min-w-0 items-center">
-            <span
-              class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
-            >
-              {{ selectedLocale }}
-              <Fluent-icon
-                class="dropdown-arrow"
-                icon="chevron-down"
-                size="14"
-              />
-            </span>
-          </div>
-        </woot-button>
-        <div
-          v-if="showLocaleDropdown"
-          v-on-clickaway="closeLocaleDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <multiselect-dropdown-items
-            :options="switchableLocales"
-            :has-thumbnail="false"
-            :selected-items="[selectedLocale]"
-            :input-placeholder="
-              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
-            "
-            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
-            @click="onClickSelectItem"
-          />
-        </div>
-      </div>
-      <woot-button
-        size="small"
-        icon="add"
-        color-scheme="primary"
-        @click="onClickNewArticlePage"
-      >
-        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -211,7 +72,7 @@ export default {
       this.showLocaleDropdown = false;
     },
     onClickNewArticlePage() {
-      this.$emit('new-article-page');
+      this.$emit('newArticlePage');
     },
     onClickSelectItem(value) {
       const { name, code } = value;
@@ -219,12 +80,151 @@ export default {
       if (!name || name === this.selectedLocale) {
         return;
       }
-      this.$emit('change-locale', code);
+      this.$emit('changeLocale', code);
     },
   },
 };
 </script>
 
+<template>
+  <div
+    class="sticky top-0 z-50 flex items-center justify-between w-full h-16 p-6 bg-white dark:bg-slate-900"
+  >
+    <div class="flex items-center">
+      <woot-sidemenu-icon />
+      <div class="flex items-center mx-2 my-0">
+        <h3 class="mb-0 text-xl font-medium text-slate-800 dark:text-slate-100">
+          {{ headerTitle }}
+        </h3>
+        <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
+          `(${count})`
+        }}</span>
+      </div>
+    </div>
+    <div class="flex items-center gap-1">
+      <woot-button
+        v-if="shouldShowSettings"
+        icon="filter"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="openFilterModal"
+      >
+        {{ $t('HELP_CENTER.HEADER.FILTER') }}
+      </woot-button>
+      <woot-button
+        v-if="shouldShowSettings"
+        icon="arrow-sort"
+        color-scheme="secondary"
+        size="small"
+        variant="hollow"
+        @click="openDropdown"
+      >
+        {{ $t('HELP_CENTER.HEADER.SORT') }}
+        <span
+          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
+        >
+          {{ selectedValue }}
+          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
+        </span>
+      </woot-button>
+      <div
+        v-if="showSortByDropdown"
+        v-on-clickaway="closeDropdown"
+        class="dropdown-pane dropdown-pane--open"
+      >
+        <WootDropdownMenu>
+          <WootDropdownItem>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="send-clock"
+            >
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
+            </woot-button>
+          </WootDropdownItem>
+          <WootDropdownItem>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="dual-screen-clock"
+            >
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
+            </woot-button>
+          </WootDropdownItem>
+          <WootDropdownItem>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="calendar-clock"
+            >
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
+            </woot-button>
+          </WootDropdownItem>
+        </WootDropdownMenu>
+      </div>
+      <woot-button
+        v-if="shouldShowSettings"
+        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
+        icon="settings"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+      />
+      <div class="relative">
+        <woot-button
+          v-if="shouldShowLocaleDropdown"
+          icon="globe"
+          color-scheme="secondary"
+          size="small"
+          variant="hollow"
+          @click="openLocaleDropdown"
+        >
+          <div class="flex items-center justify-between w-full min-w-0">
+            <span
+              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
+            >
+              {{ selectedLocale }}
+              <FluentIcon
+                class="dropdown-arrow"
+                icon="chevron-down"
+                size="14"
+              />
+            </span>
+          </div>
+        </woot-button>
+        <div
+          v-if="showLocaleDropdown"
+          v-on-clickaway="closeLocaleDropdown"
+          class="dropdown-pane dropdown-pane--open"
+        >
+          <MultiselectDropdownItems
+            :options="switchableLocales"
+            :has-thumbnail="false"
+            :selected-items="[selectedLocale]"
+            :input-placeholder="
+              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
+            "
+            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
+            @click="onClickSelectItem"
+          />
+        </div>
+      </div>
+      <woot-button
+        size="small"
+        icon="add"
+        color-scheme="primary"
+        @click="onClickNewArticlePage"
+      >
+        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .dropdown-pane--open {
   @apply absolute top-10 right-0 z-50 min-w-[8rem];
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index e006a7c9f..4555f8f14 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -1,112 +1,3 @@
-<template>
-  <div class="flex items-center justify-between w-full h-16">
-    <div class="flex items-center">
-      <woot-button
-        icon="chevron-left"
-        variant="clear"
-        size="small"
-        color-scheme="primary"
-        class="back-button"
-        @click="onClickGoBack"
-      >
-        {{ backButtonLabel }}
-      </woot-button>
-    </div>
-    <div class="flex items-center gap-1">
-      <span
-        v-if="isUpdating || isSaved"
-        class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
-      >
-        {{ statusText }}
-      </span>
-
-      <woot-button
-        class-names="article--buttons relative"
-        icon="globe"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="showPreview"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
-      </woot-button>
-      <!-- Hidden since this is in V2
-      <woot-button
-        v-if="shouldShowAddLocaleButton"
-        class-names="article--buttons relative"
-        icon="add"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="onClickAdd"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
-      </woot-button> -->
-      <woot-button
-        v-if="!isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
-        icon="pane-open"
-        class-names="article--buttons relative sidebar-button"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        :is-disabled="enableOpenSidebarButton"
-        @click="openSidebar"
-      />
-      <woot-button
-        v-if="isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
-        icon="pane-close"
-        class-names="article--buttons relative"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        @click="closeSidebar"
-      />
-      <div class="article--buttons relative">
-        <div class="button-group">
-          <woot-button
-            class-names="publish-button"
-            size="small"
-            icon="checkmark"
-            color-scheme="primary"
-            :is-disabled="!articleSlug || isPublishedArticle"
-            @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
-          >
-            {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
-          </woot-button>
-          <woot-button
-            ref="arrowDownButton"
-            size="small"
-            icon="chevron-down"
-            :is-disabled="!articleSlug || isArchivedArticle"
-            @click="openActionsDropdown"
-          />
-        </div>
-        <div
-          v-if="showActionsDropdown"
-          v-on-clickaway="closeActionsDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <woot-dropdown-menu>
-            <woot-dropdown-item>
-              <woot-button
-                variant="clear"
-                color-scheme="secondary"
-                size="small"
-                icon="book-clock"
-                @click="updateArticleStatus(ARTICLE_STATUS_TYPES.ARCHIVE)"
-              >
-                {{ $t('HELP_CENTER.EDIT_HEADER.MOVE_TO_ARCHIVE_BUTTON') }}
-              </woot-button>
-            </woot-dropdown-item>
-          </woot-dropdown-menu>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import wootConstants from 'dashboard/constants/globals';
@@ -136,10 +27,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    shouldShowAddLocaleButton: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -187,7 +74,7 @@ export default {
           articleId: this.articleSlug,
           status: status,
         });
-        this.$emit('update-meta');
+        this.$emit('updateMeta');
         this.statusUpdateSuccessMessage(status);
         this.closeActionsDropdown();
         if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
@@ -232,6 +119,114 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex items-center justify-between w-full h-16">
+    <div class="flex items-center">
+      <woot-button
+        icon="chevron-left"
+        variant="clear"
+        size="small"
+        color-scheme="primary"
+        class="back-button"
+        @click="onClickGoBack"
+      >
+        {{ backButtonLabel }}
+      </woot-button>
+    </div>
+    <div class="flex items-center gap-1">
+      <span
+        v-if="isUpdating || isSaved"
+        class="items-center ml-4 mr-1 text-xs draft-status rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300"
+      >
+        {{ statusText }}
+      </span>
+
+      <woot-button
+        class-names="article--buttons relative"
+        icon="globe"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="showPreview"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
+      </woot-button>
+      <!-- Hidden since this is in V2
+      <woot-button
+        v-if="shouldShowAddLocaleButton"
+        class-names="article--buttons relative"
+        icon="add"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="onClickAdd"
+      >
+        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
+      </woot-button> -->
+      <woot-button
+        v-if="!isSidebarOpen"
+        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
+        icon="pane-open"
+        class-names="article--buttons relative sidebar-button"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        :is-disabled="enableOpenSidebarButton"
+        @click="openSidebar"
+      />
+      <woot-button
+        v-if="isSidebarOpen"
+        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
+        icon="pane-close"
+        class-names="article--buttons relative"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        @click="closeSidebar"
+      />
+      <div class="relative article--buttons">
+        <div class="button-group">
+          <woot-button
+            class-names="publish-button"
+            size="small"
+            icon="checkmark"
+            color-scheme="primary"
+            :is-disabled="!articleSlug || isPublishedArticle"
+            @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
+          >
+            {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
+          </woot-button>
+          <woot-button
+            size="small"
+            icon="chevron-down"
+            :is-disabled="!articleSlug || isArchivedArticle"
+            @click="openActionsDropdown"
+          />
+        </div>
+        <div
+          v-if="showActionsDropdown"
+          v-on-clickaway="closeActionsDropdown"
+          class="dropdown-pane dropdown-pane--open"
+        >
+          <woot-dropdown-menu>
+            <woot-dropdown-item>
+              <woot-button
+                variant="clear"
+                color-scheme="secondary"
+                size="small"
+                icon="book-clock"
+                @click="updateArticleStatus(ARTICLE_STATUS_TYPES.ARCHIVE)"
+              >
+                {{ $t('HELP_CENTER.EDIT_HEADER.MOVE_TO_ARCHIVE_BUTTON') }}
+              </woot-button>
+            </woot-dropdown-item>
+          </woot-dropdown-menu>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .article--buttons {
   .dropdown-pane {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 334efb7db..5c204fe4c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -1,62 +1,3 @@
-<template>
-  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
-    <sidebar
-      :route="currentRoute"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-    />
-    <help-center-sidebar
-      v-if="showHelpCenterSidebar"
-      :header-title="headerTitle"
-      :portal-slug="selectedPortalSlug"
-      :locale-slug="selectedLocaleInPortal"
-      :sub-title="localeName(selectedLocaleInPortal)"
-      :accessible-menu-items="accessibleMenuItems"
-      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
-    />
-    <section
-      v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
-    >
-      <router-view @reload-locale="fetchPortalAndItsCategories" />
-      <command-bar />
-      <account-selector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-      />
-      <woot-key-shortcut-modal
-        v-if="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
-      <notification-panel
-        v-if="showNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <portal-popover
-        v-if="showPortalPopover"
-        :portals="portals"
-        :active-portal-slug="selectedPortalSlug"
-        :active-locale="selectedLocaleInPortal"
-        @fetch-portal="fetchPortalAndItsCategories"
-        @close-popover="closePortalPopover"
-      />
-      <add-category
-        v-if="showAddCategoryModal"
-        :show.sync="showAddCategoryModal"
-        :portal-name="selectedPortalName"
-        :locale="selectedLocaleInPortal"
-        :portal-slug="selectedPortalSlug"
-        @cancel="onClickCloseAddCategoryModal"
-      />
-    </section>
-    <upgrade-page v-else />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import UpgradePage from './UpgradePage.vue';
@@ -114,7 +55,6 @@ export default {
       portals: 'portals/allPortals',
       categories: 'categories/allCategories',
       meta: 'portals/getMeta',
-      isFetching: 'portals/isFetchingPortals',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
 
@@ -342,3 +282,63 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
+    <Sidebar
+      :route="currentRoute"
+      @toggleAccountModal="toggleAccountModal"
+      @openNotificationPanel="openNotificationPanel"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @closeKeyShortcutModal="closeKeyShortcutModal"
+    />
+    <HelpCenterSidebar
+      v-if="showHelpCenterSidebar"
+      :header-title="headerTitle"
+      :portal-slug="selectedPortalSlug"
+      :locale-slug="selectedLocaleInPortal"
+      :sub-title="localeName(selectedLocaleInPortal)"
+      :accessible-menu-items="accessibleMenuItems"
+      :additional-secondary-menu-items="additionalSecondaryMenuItems"
+      @openPopover="openPortalPopover"
+      @openModal="onClickOpenAddCategoryModal"
+    />
+    <section
+      v-if="isHelpCenterEnabled"
+      class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
+    >
+      <router-view @reloadLocale="fetchPortalAndItsCategories" />
+      <CommandBar />
+      <AccountSelector
+        :show-account-modal="showAccountModal"
+        @closeAccountModal="toggleAccountModal"
+      />
+      <WootKeyShortcutModal
+        v-if="showShortcutModal"
+        @close="closeKeyShortcutModal"
+        @clickaway="closeKeyShortcutModal"
+      />
+      <NotificationPanel
+        v-if="showNotificationPanel"
+        @close="closeNotificationPanel"
+      />
+      <PortalPopover
+        v-if="showPortalPopover"
+        :portals="portals"
+        :active-portal-slug="selectedPortalSlug"
+        :active-locale="selectedLocaleInPortal"
+        @fetchPortal="fetchPortalAndItsCategories"
+        @closePopover="closePortalPopover"
+      />
+      <AddCategory
+        v-if="showAddCategoryModal"
+        :show.sync="showAddCategoryModal"
+        :portal-name="selectedPortalName"
+        :locale="selectedLocaleInPortal"
+        :portal-slug="selectedPortalSlug"
+        @cancel="onClickCloseAddCategoryModal"
+      />
+    </section>
+    <UpgradePage v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index f2d5ff99b..9a0ffb8a7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -1,9 +1,196 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import LocaleItemTable from './PortalListItemTable.vue';
+import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+
+export default {
+  components: {
+    Thumbnail: thumbnail,
+    LocaleItemTable,
+  },
+  props: {
+    portal: {
+      type: Object,
+      default: () => {},
+    },
+    status: {
+      type: String,
+      default: '',
+      values: ['archived', 'draft', 'published'],
+    },
+  },
+  setup() {
+    const { updateUISettings } = useUISettings();
+
+    return {
+      updateUISettings,
+    };
+  },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+      alertMessage: '',
+      selectedPortalForDelete: {},
+    };
+  },
+  computed: {
+    labelColor() {
+      switch (this.status) {
+        case 'Archived':
+          return 'warning';
+        default:
+          return 'success';
+      }
+    },
+    deleteMessageValue() {
+      return ` ${this.selectedPortalForDelete.name}?`;
+    },
+    locales() {
+      return this.portal ? this.portal.config.allowed_locales : [];
+    },
+    allowedLocales() {
+      return Object.keys(this.locales).map(key => {
+        return this.locales[key].code;
+      });
+    },
+    articleCount() {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.reduce((acc, locale) => {
+        return acc + locale.articles_count;
+      }, 0);
+    },
+  },
+  methods: {
+    addLocale() {
+      this.$emit('addLocale', this.portal.id);
+    },
+    openSite() {
+      this.$emit('openSite', this.portal.slug);
+    },
+    openSettings() {
+      this.fetchPortalAndItsCategories();
+      this.navigateToPortalEdit();
+    },
+    onClickOpenDeleteModal(portal) {
+      this.selectedPortalForDelete = portal;
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    async fetchPortalAndItsCategories() {
+      await this.$store.dispatch('portals/index');
+      const {
+        slug,
+        config: { allowed_locales: allowedLocales },
+      } = this.portal;
+      const selectedPortalParam = {
+        portalSlug: slug,
+        locale: allowedLocales[0].code,
+      };
+      this.$store.dispatch('portals/show', selectedPortalParam);
+      this.$store.dispatch('categories/index', selectedPortalParam);
+    },
+    async onClickDeletePortal() {
+      const { slug } = this.selectedPortalForDelete;
+      try {
+        await this.$store.dispatch('portals/delete', {
+          portalSlug: slug,
+        });
+        this.selectedPortalForDelete = {};
+        this.closeDeletePopup();
+        this.alertMessage = this.$t(
+          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
+        );
+        this.updateUISettings({
+          last_active_portal_slug: undefined,
+          last_active_locale_code: undefined,
+        });
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t(
+            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
+          );
+      } finally {
+        useAlert(this.alertMessage);
+      }
+    },
+    changeDefaultLocale({ localeCode }) {
+      this.updatePortalLocales({
+        allowedLocales: this.allowedLocales,
+        defaultLocale: localeCode,
+        successMessage: this.$t(
+          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
+        ),
+        errorMessage: this.$t(
+          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
+        ),
+      });
+      this.$track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
+        newLocale: localeCode,
+        from: this.$route.name,
+      });
+    },
+    deletePortalLocale({ localeCode }) {
+      const updatedLocales = this.allowedLocales.filter(
+        code => code !== localeCode
+      );
+      const defaultLocale = this.portal.meta.default_locale;
+      this.updatePortalLocales({
+        allowedLocales: updatedLocales,
+        defaultLocale,
+        successMessage: this.$t(
+          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
+        ),
+        errorMessage: this.$t(
+          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
+        ),
+      });
+      this.$track(PORTALS_EVENTS.DELETE_LOCALE, {
+        deletedLocale: localeCode,
+        from: this.$route.name,
+      });
+    },
+    async updatePortalLocales({
+      allowedLocales,
+      defaultLocale,
+      successMessage,
+      errorMessage,
+    }) {
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalSlug: this.portal.slug,
+          config: {
+            default_locale: defaultLocale,
+            allowed_locales: allowedLocales,
+          },
+        });
+        this.alertMessage = successMessage;
+      } catch (error) {
+        this.alertMessage = error?.message || errorMessage;
+      } finally {
+        useAlert(this.alertMessage);
+      }
+    },
+    navigateToPortalEdit() {
+      this.$router.push({
+        name: 'edit_portal_information',
+        params: { portalSlug: this.portal.slug },
+      });
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <div
       class="relative flex p-4 mb-3 bg-white border border-solid rounded-md dark:bg-slate-900 border-slate-100 dark:border-slate-600"
     >
-      <thumbnail :username="portal.name" variant="square" />
+      <Thumbnail :username="portal.name" variant="square" />
       <div class="flex-grow ml-2 rtl:ml-0 rtl:mr-2">
         <header class="flex items-start justify-between mb-8">
           <div>
@@ -167,10 +354,10 @@
               )
             }}
           </h2>
-          <locale-item-table
+          <LocaleItemTable
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
-            @change-default-locale="changeDefaultLocale"
+            @changeDefaultLocale="changeDefaultLocale"
             @delete="deletePortalLocale"
           />
         </div>
@@ -188,190 +375,3 @@
     />
   </div>
 </template>
-
-<script>
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import LocaleItemTable from './PortalListItemTable.vue';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    thumbnail,
-    LocaleItemTable,
-  },
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    status: {
-      type: String,
-      default: '',
-      values: ['archived', 'draft', 'published'],
-    },
-  },
-  setup() {
-    const { updateUISettings } = useUISettings();
-
-    return {
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-      alertMessage: '',
-      selectedPortalForDelete: {},
-    };
-  },
-  computed: {
-    labelColor() {
-      switch (this.status) {
-        case 'Archived':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-    deleteMessageValue() {
-      return ` ${this.selectedPortalForDelete.name}?`;
-    },
-    locales() {
-      return this.portal ? this.portal.config.allowed_locales : [];
-    },
-    allowedLocales() {
-      return Object.keys(this.locales).map(key => {
-        return this.locales[key].code;
-      });
-    },
-    articleCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  methods: {
-    addLocale() {
-      this.$emit('add-locale', this.portal.id);
-    },
-    openSite() {
-      this.$emit('open-site', this.portal.slug);
-    },
-    openSettings() {
-      this.fetchPortalAndItsCategories();
-      this.navigateToPortalEdit();
-    },
-    onClickOpenDeleteModal(portal) {
-      this.selectedPortalForDelete = portal;
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    async fetchPortalAndItsCategories() {
-      await this.$store.dispatch('portals/index');
-      const {
-        slug,
-        config: { allowed_locales: allowedLocales },
-      } = this.portal;
-      const selectedPortalParam = {
-        portalSlug: slug,
-        locale: allowedLocales[0].code,
-      };
-      this.$store.dispatch('portals/show', selectedPortalParam);
-      this.$store.dispatch('categories/index', selectedPortalParam);
-    },
-    async onClickDeletePortal() {
-      const { slug } = this.selectedPortalForDelete;
-      try {
-        await this.$store.dispatch('portals/delete', {
-          portalSlug: slug,
-        });
-        this.selectedPortalForDelete = {};
-        this.closeDeletePopup();
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
-        );
-        this.updateUISettings({
-          last_active_portal_slug: undefined,
-          last_active_locale_code: undefined,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t(
-            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
-          );
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    changeDefaultLocale({ localeCode }) {
-      this.updatePortalLocales({
-        allowedLocales: this.allowedLocales,
-        defaultLocale: localeCode,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-        newLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    deletePortalLocale({ localeCode }) {
-      const updatedLocales = this.allowedLocales.filter(
-        code => code !== localeCode
-      );
-      const defaultLocale = this.portal.meta.default_locale;
-      this.updatePortalLocales({
-        allowedLocales: updatedLocales,
-        defaultLocale,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.DELETE_LOCALE, {
-        deletedLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    async updatePortalLocales({
-      allowedLocales,
-      defaultLocale,
-      successMessage,
-      errorMessage,
-    }) {
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.portal.slug,
-          config: {
-            default_locale: defaultLocale,
-            allowed_locales: allowedLocales,
-          },
-        });
-        this.alertMessage = successMessage;
-      } catch (error) {
-        this.alertMessage = error?.message || errorMessage;
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    navigateToPortalEdit() {
-      this.$router.push({
-        name: 'edit_portal_information',
-        params: { portalSlug: this.portal.slug },
-      });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index 8a07302cf..bf3e08c6f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -1,3 +1,29 @@
+<script>
+import portalMixin from '../mixins/portalMixin';
+export default {
+  mixins: [portalMixin],
+  props: {
+    locales: {
+      type: Array,
+      default: () => [],
+    },
+    selectedLocaleCode: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    changeDefaultLocale(localeCode) {
+      this.$emit('changeDefaultLocale', { localeCode });
+    },
+    deleteLocale(localeCode) {
+      this.$emit('delete', { localeCode });
+    },
+  },
+};
+</script>
+
 <template>
   <table class="woot-table">
     <thead>
@@ -48,7 +74,7 @@
               )
             "
             color-scheme="warning"
-            :small="true"
+            small
             variant="smooth"
             class="default-status"
           />
@@ -95,32 +121,6 @@
   </table>
 </template>
 
-<script>
-import portalMixin from '../mixins/portalMixin';
-export default {
-  mixins: [portalMixin],
-  props: {
-    locales: {
-      type: Array,
-      default: () => [],
-    },
-    selectedLocaleCode: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    changeDefaultLocale(localeCode) {
-      this.$emit('change-default-locale', { localeCode });
-    },
-    deleteLocale(localeCode) {
-      this.$emit('delete', { localeCode });
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 table {
   thead tr th {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 3de2a6f52..a34bfb4fc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -1,3 +1,41 @@
+<script>
+import PortalSwitch from './PortalSwitch.vue';
+export default {
+  components: {
+    PortalSwitch,
+  },
+  props: {
+    portals: {
+      type: Array,
+      default: () => [],
+    },
+    activePortalSlug: {
+      type: String,
+      default: '',
+    },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    closePortalPopover() {
+      this.$emit('closePopover');
+    },
+    openPortalPage() {
+      this.closePortalPopover();
+      this.$router.push({
+        name: 'list_all_portals',
+      });
+    },
+    fetchPortalAndItsCategories() {
+      this.$emit('fetchPortal');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-on-clickaway="closePortalPopover"
@@ -27,59 +65,21 @@
           />
         </div>
       </div>
-      <p class="text-xs text-slate-600 dark:text-slate-300 mt-2">
+      <p class="mt-2 text-xs text-slate-600 dark:text-slate-300">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
       </p>
     </header>
     <div>
-      <portal-switch
+      <PortalSwitch
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
         :active-portal-slug="activePortalSlug"
         :active-locale="activeLocale"
         :active="portal.slug === activePortalSlug"
-        @open-portal-page="closePortalPopover"
-        @fetch-portal="fetchPortalAndItsCategories"
+        @openPortalPage="closePortalPopover"
+        @fetchPortal="fetchPortalAndItsCategories"
       />
     </div>
   </div>
 </template>
-
-<script>
-import PortalSwitch from './PortalSwitch.vue';
-export default {
-  components: {
-    PortalSwitch,
-  },
-  props: {
-    portals: {
-      type: Array,
-      default: () => [],
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    closePortalPopover() {
-      this.$emit('close-popover');
-    },
-    openPortalPage() {
-      this.closePortalPopover();
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-    fetchPortalAndItsCategories() {
-      this.$emit('fetch-portal');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 4417fdf57..fb62b3c94 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -15,15 +15,6 @@ import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { isDomain } from 'shared/helpers/Validators';
 import SettingsLayout from './Layout/SettingsLayout.vue';
 
-const { EXAMPLE_URL } = wootConstants;
-const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-
-const { t } = useI18n();
-
-defineComponent({
-  name: 'PortalSettingsBasicForm',
-});
-
 const props = defineProps({
   portal: {
     type: Object,
@@ -38,6 +29,16 @@ const props = defineProps({
     default: '',
   },
 });
+const emit = defineEmits(['submit', 'deleteLogo']);
+
+defineComponent({
+  name: 'PortalSettingsBasicForm',
+});
+
+const { EXAMPLE_URL } = wootConstants;
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+
+const { t } = useI18n();
 
 const state = reactive({
   name: '',
@@ -97,8 +98,6 @@ const showDeleteButton = computed(() => {
   return hasValidAvatarUrl(state.logoUrl);
 });
 
-const emit = defineEmits(['submit', 'delete-logo']);
-
 onMounted(() => {
   const portal = props.portal || {};
   state.name = portal.name || '';
@@ -135,7 +134,7 @@ function onSubmitClick() {
 async function deleteAvatar() {
   state.logoUrl = '';
   state.avatarBlobId = '';
-  emit('delete-logo');
+  emit('deleteLogo');
 }
 
 async function uploadLogoToStorage(file) {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
index 7572f5b80..4049633df 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -2,20 +2,11 @@
 import { getRandomColor } from 'dashboard/helper/labelColor';
 import SettingsLayout from './Layout/SettingsLayout.vue';
 import wootConstants from 'dashboard/constants/globals';
-const { EXAMPLE_URL } = wootConstants;
-
 import { useVuelidate } from '@vuelidate/core';
 import { url } from '@vuelidate/validators';
 
 import { defineComponent, reactive, computed, onMounted } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
-
-defineComponent({
-  name: 'PortalSettingsCustomizationForm',
-});
-
-const { t } = useI18n();
-
 const props = defineProps({
   portal: {
     type: Object,
@@ -29,6 +20,14 @@ const props = defineProps({
 
 const emit = defineEmits(['submit']);
 
+defineComponent({
+  name: 'PortalSettingsCustomizationForm',
+});
+
+const { t } = useI18n();
+
+const { EXAMPLE_URL } = wootConstants;
+
 const state = reactive({
   color: getRandomColor(),
   pageTitle: '',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 1a6ab873a..886c06200 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -1,82 +1,10 @@
-<template>
-  <div class="portal" :class="{ active }">
-    <thumbnail :username="portal.name" variant="square" />
-    <div class="actions-container">
-      <header class="flex items-center justify-between mb-2.5">
-        <div>
-          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
-            {{ portal.name }}
-          </h3>
-          <p class="text-slate-600 dark:text-slate-200 mb-0 text-xs">
-            {{ articlesCount }}
-            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
-          </p>
-        </div>
-        <woot-label
-          v-if="active"
-          variant="smooth"
-          size="small"
-          color-scheme="success"
-          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
-        />
-      </header>
-      <div class="portal-locales">
-        <h5 class="text-base text-slate-700 dark:text-slate-100">
-          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
-        </h5>
-        <ul>
-          <li v-for="locale in locales" :key="locale.code">
-            <woot-button
-              :variant="`locale-item ${
-                isLocaleActive(locale.code, activePortalSlug)
-                  ? 'smooth'
-                  : 'clear'
-              }`"
-              size="large"
-              color-scheme="secondary"
-              @click="event => onClick(event, locale.code, portal)"
-            >
-              <div class="flex items-center justify-between w-full">
-                <div class="meta">
-                  <h6 class="text-sm text-left mb-0.5">
-                    <span class="text-slate-700 dark:text-slate-100">
-                      {{ localeName(locale.code) }}
-                    </span>
-                    <span
-                      v-if="isLocaleDefault(locale.code)"
-                      class="text-sm text-slate-300 dark:text-slate-200"
-                    >
-                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
-                    </span>
-                  </h6>
-
-                  <span
-                    class="flex text-slate-600 dark:text-slate-200 text-sm text-left leading-4 w-full"
-                  >
-                    {{ locale.articles_count }}
-                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
-                    {{ locale.code }}
-                  </span>
-                </div>
-                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
-                  <fluent-icon icon="checkmark" class="locale__radio" />
-                </div>
-              </div>
-            </woot-button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import portalMixin from '../mixins/portalMixin';
 
 export default {
   components: {
-    thumbnail,
+    Thumbnail,
   },
   mixins: [portalMixin],
   props: {
@@ -126,8 +54,8 @@ export default {
           locale: code,
         },
       });
-      this.$emit('fetch-portal');
-      this.$emit('open-portal-page');
+      this.$emit('fetchPortal');
+      this.$emit('openPortalPage');
     },
     isLocaleActive(code, slug) {
       const isPortalActive = this.portal.slug === slug;
@@ -141,6 +69,78 @@ export default {
 };
 </script>
 
+<template>
+  <div class="portal" :class="{ active }">
+    <Thumbnail :username="portal.name" variant="square" />
+    <div class="actions-container">
+      <header class="flex items-center justify-between mb-2.5">
+        <div>
+          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
+            {{ portal.name }}
+          </h3>
+          <p class="mb-0 text-xs text-slate-600 dark:text-slate-200">
+            {{ articlesCount }}
+            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
+          </p>
+        </div>
+        <woot-label
+          v-if="active"
+          variant="smooth"
+          size="small"
+          color-scheme="success"
+          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
+        />
+      </header>
+      <div class="portal-locales">
+        <h5 class="text-base text-slate-700 dark:text-slate-100">
+          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
+        </h5>
+        <ul>
+          <li v-for="locale in locales" :key="locale.code">
+            <woot-button
+              :variant="`locale-item ${
+                isLocaleActive(locale.code, activePortalSlug)
+                  ? 'smooth'
+                  : 'clear'
+              }`"
+              size="large"
+              color-scheme="secondary"
+              @click="event => onClick(event, locale.code, portal)"
+            >
+              <div class="flex items-center justify-between w-full">
+                <div class="meta">
+                  <h6 class="text-sm text-left mb-0.5">
+                    <span class="text-slate-700 dark:text-slate-100">
+                      {{ localeName(locale.code) }}
+                    </span>
+                    <span
+                      v-if="isLocaleDefault(locale.code)"
+                      class="text-sm text-slate-300 dark:text-slate-200"
+                    >
+                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
+                    </span>
+                  </h6>
+
+                  <span
+                    class="flex w-full text-sm leading-4 text-left text-slate-600 dark:text-slate-200"
+                  >
+                    {{ locale.articles_count }}
+                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
+                    {{ locale.code }}
+                  </span>
+                </div>
+                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
+                  <fluent-icon icon="checkmark" class="locale__radio" />
+                </div>
+              </div>
+            </woot-button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .portal {
   @apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
index f6aceedf5..f0803ac6e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm"
-  >
-    <sidebar-header
-      :thumbnail-src="thumbnailSrc"
-      :header-title="headerTitle"
-      :sub-title="subTitle"
-      :portal-link="portalLink"
-      class="px-4"
-      @open-popover="openPortalPopover"
-    />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="py-2 px-4 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @open="onClickOpenAddCatogoryModal"
-      />
-      <p
-        v-if="!hasCategory"
-        key="empty-category-nessage"
-        class="p-1.5 px-4 text-slate-300"
-      >
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
-    </transition-group>
-  </div>
-</template>
-
 <script>
 import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue';
 import SidebarHeader from './SidebarHeader.vue';
@@ -92,11 +53,50 @@ export default {
       this.$emit('input', value);
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
     onClickOpenAddCatogoryModal() {
-      this.$emit('open-modal');
+      this.$emit('openModal');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col h-full overflow-auto text-sm bg-white border-r w-60 dark:bg-slate-900 dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50"
+  >
+    <SidebarHeader
+      :thumbnail-src="thumbnailSrc"
+      :header-title="headerTitle"
+      :sub-title="subTitle"
+      :portal-link="portalLink"
+      class="px-4"
+      @openPopover="openPortalPopover"
+    />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="px-4 py-2 mb-0 ml-0 list-none"
+    >
+      <SecondaryNavItem
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <SecondaryNavItem
+        v-for="menuItem in additionalSecondaryMenuItems"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @open="onClickOpenAddCatogoryModal"
+      />
+      <p
+        v-if="!hasCategory"
+        key="empty-category-nessage"
+        class="p-1.5 px-4 text-slate-300"
+      >
+        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
+      </p>
+    </transition-group>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
index e3fe22b19..aa72a2bdf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -1,44 +1,3 @@
-<template>
-  <div
-    class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
-  >
-    <div class="flex items-center">
-      <thumbnail
-        size="32px"
-        :src="thumbnailSrc"
-        :username="headerTitle"
-        variant="square"
-      />
-      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
-        <h4
-          class="text-sm w-28 h-4 mb-0 leading-4 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
-        >
-          {{ headerTitle }}
-        </h4>
-        <span class="h-4 leading-4 text-slate-600 dark:text-slate-200 text-xs">
-          {{ subTitle }}
-        </span>
-      </div>
-    </div>
-    <div class="flex items-end">
-      <woot-button
-        variant="clear"
-        color-scheme="secondary"
-        size="small"
-        icon="arrow-up-right"
-        @click="popoutHelpCenter"
-      />
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="arrow-swap"
-        @click="openPortalPopover"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
@@ -68,8 +27,49 @@ export default {
       window.open(this.portalLink, '_blank');
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex items-center justify-between h-16 px-0 py-4 border-b mb-1/4 border-slate-50 dark:border-slate-700"
+  >
+    <div class="flex items-center">
+      <Thumbnail
+        size="32px"
+        :src="thumbnailSrc"
+        :username="headerTitle"
+        variant="square"
+      />
+      <div class="flex flex-col items-start ml-2 rtl:ml-0 rtl:mr-2">
+        <h4
+          class="h-4 mb-0 overflow-hidden text-sm leading-4 w-28 whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+        >
+          {{ headerTitle }}
+        </h4>
+        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
+          {{ subTitle }}
+        </span>
+      </div>
+    </div>
+    <div class="flex items-end">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        size="small"
+        icon="arrow-up-right"
+        @click="popoutHelpCenter"
+      />
+      <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="arrow-swap"
+        @click="openPortalPopover"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
index 8af29af17..72e21bada 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="search-input--wrap">
-    <div class="search-icon--wrap">
-      <fluent-icon icon="search" size="18" class="search-icon" />
-    </div>
-    <input
-      v-model="searchValue"
-      class="search-input"
-      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
-      @input="onSearch"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-input--wrap">
+    <div class="search-icon--wrap">
+      <fluent-icon icon="search" size="18" class="search-icon" />
+    </div>
+    <input
+      v-model="searchValue"
+      class="search-input"
+      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
+      @input="onSearch"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-input--wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
index d16eb87e3..ef4dd2b27 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -1,3 +1,66 @@
+<script>
+import { mapGetters } from 'vuex';
+import wootConstants from 'dashboard/constants/globals';
+export default {
+  data() {
+    return {
+      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
+      upgradeFeature: [
+        {
+          key: 1,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
+          icon: 'book-copy',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
+          ),
+        },
+        {
+          key: 2,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
+          icon: 'globe-line',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
+          ),
+        },
+        {
+          key: 3,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
+          icon: 'heart-handshake',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
+          ),
+        },
+        {
+          key: 4,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
+          icon: 'search-check',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
+          ),
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
+    }),
+  },
+  methods: {
+    openBillingPage() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    openHelpCenterDocs() {
+      window.open(this.helpCenterDocsURL, '_blank');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full h-full max-w-full overflow-auto bg-white dark:bg-slate-900"
@@ -70,66 +133,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-export default {
-  data() {
-    return {
-      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
-      upgradeFeature: [
-        {
-          key: 1,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
-          icon: 'book-copy',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
-          ),
-        },
-        {
-          key: 2,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
-          icon: 'globe-line',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
-          ),
-        },
-        {
-          key: 3,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
-          icon: 'heart-handshake',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
-          ),
-        },
-        {
-          key: 4,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
-          icon: 'search-check',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
-          ),
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
-    }),
-  },
-  methods: {
-    openBillingPage() {
-      this.$router.push({
-        name: 'billing_settings_index',
-        params: { accountId: this.accountId },
-      });
-    },
-    openHelpCenterDocs() {
-      window.open(this.helpCenterDocsURL, '_blank');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index 34df7812f..27cea581c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -1,127 +1,3 @@
-<template>
-  <transition name="popover-animation">
-    <div
-      class="min-w-[15rem] max-w-[22.5rem] p-6 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700"
-    >
-      <h3 class="text-base text-slate-800 dark:text-slate-100">
-        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
-      </h3>
-      <div class="mt-4 mb-6">
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <multiselect-dropdown
-            :options="categories"
-            :selected-item="selectedCategory"
-            :has-thumbnail="false"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
-            "
-            :input-placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
-              )
-            "
-            @click="onClickSelectCategory"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <multiselect-dropdown
-            :options="agents"
-            :selected-item="assignedAuthor"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
-            "
-            :input-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
-            "
-            @click="onClickAssignAuthor"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
-          <textarea
-            v-model="metaTitle"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="metaDescription"
-            class="text-sm"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
-              )
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
-          <multiselect
-            ref="tagInput"
-            v-model="metaTags"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
-            "
-            label="name"
-            :options="metaOptions"
-            track-by="name"
-            :multiple="true"
-            :taggable="true"
-            :close-on-select="false"
-            @search-change="handleSearchChange"
-            @close="onBlur"
-            @tag="addTagValue"
-            @remove="removeTag"
-          />
-        </label>
-      </div>
-      <div class="flex flex-col">
-        <woot-button
-          icon="archive"
-          size="small"
-          variant="clear"
-          color-scheme="secondary"
-          @click="onClickArchiveArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
-        </woot-button>
-        <woot-button
-          icon="delete"
-          size="small"
-          variant="clear"
-          color-scheme="alert"
-          @click="onClickDeleteArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-  </transition>
-</template>
-
 <script>
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import { mapGetters } from 'vuex';
@@ -180,7 +56,7 @@ export default {
   mounted() {
     this.saveArticle = debounce(
       () => {
-        this.$emit('save-article', {
+        this.$emit('saveArticle', {
           meta: {
             title: this.metaTitle,
             description: this.metaDescription,
@@ -219,30 +95,153 @@ export default {
       }
     },
     onClickSelectCategory({ id }) {
-      this.$emit('save-article', { category_id: id });
+      this.$emit('saveArticle', { category_id: id });
     },
     onClickAssignAuthor({ id }) {
-      this.$emit('save-article', { author_id: id });
+      this.$emit('saveArticle', { author_id: id });
       this.updateMeta();
     },
     onChangeMetaInput() {
       this.saveArticle();
     },
     onClickArchiveArticle() {
-      this.$emit('archive-article');
+      this.$emit('archiveArticle');
       this.updateMeta();
     },
     onClickDeleteArticle() {
-      this.$emit('delete-article');
+      this.$emit('deleteArticle');
       this.updateMeta();
     },
     updateMeta() {
-      this.$emit('update-meta');
+      this.$emit('updateMeta');
     },
   },
 };
 </script>
 
+<template>
+  <transition name="popover-animation">
+    <div
+      class="min-w-[15rem] max-w-[22.5rem] p-6 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700"
+    >
+      <h3 class="text-base text-slate-800 dark:text-slate-100">
+        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
+      </h3>
+      <div class="mt-4 mb-6">
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
+          <MultiselectDropdown
+            :options="categories"
+            :selected-item="selectedCategory"
+            :has-thumbnail="false"
+            :multiselector-title="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
+            "
+            :input-placeholder="
+              $t(
+                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
+              )
+            "
+            @click="onClickSelectCategory"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
+          <MultiselectDropdown
+            :options="agents"
+            :selected-item="assignedAuthor"
+            :multiselector-title="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
+            "
+            :input-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
+            "
+            @click="onClickAssignAuthor"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
+          <textarea
+            v-model="metaTitle"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
+            "
+            @input="onChangeMetaInput"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="metaDescription"
+            class="text-sm"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t(
+                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
+              )
+            "
+            @input="onChangeMetaInput"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
+          <multiselect
+            v-model="metaTags"
+            :placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
+            "
+            label="name"
+            :options="metaOptions"
+            track-by="name"
+            multiple
+            taggable
+            :close-on-select="false"
+            @search-change="handleSearchChange"
+            @close="onBlur"
+            @tag="addTagValue"
+            @remove="removeTag"
+          />
+        </label>
+      </div>
+      <div class="flex flex-col">
+        <woot-button
+          icon="archive"
+          size="small"
+          variant="clear"
+          color-scheme="secondary"
+          @click="onClickArchiveArticle"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
+        </woot-button>
+        <woot-button
+          icon="delete"
+          size="small"
+          variant="clear"
+          color-scheme="alert"
+          @click="onClickDeleteArticle"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
+        </woot-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .multiselect {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
index 028d1d6e7..df95c34ee 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
@@ -1,11 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
-  >
-    Loading...
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -66,3 +58,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
+  >
+    {{ $t('HELP_CENTER.LOADING') }}
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
index 962716a1d..5fe13feb5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="flex w-full overflow-auto article-container">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-auto"
-      :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
-    >
-      <edit-article-header
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        :is-updating="isUpdating"
-        :is-saved="isSaved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @show="showArticleInPortal"
-        @update-meta="updateMeta"
-      />
-      <div v-if="isFetching" class="h-full p-4 text-base text-center">
-        <spinner size="" />
-        <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
-      </div>
-      <article-editor
-        v-else
-        :is-settings-sidebar-open="showArticleSettings"
-        :article="article"
-        @save-article="saveArticle"
-      />
-    </div>
-    <article-settings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-      @delete-article="openDeletePopup"
-      @archive-article="archiveArticle"
-      @update-meta="updateMeta"
-    />
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
-      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
-      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
-      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -79,7 +31,6 @@ export default {
   computed: {
     ...mapGetters({
       isFetching: 'articles/isFetching',
-      articles: 'articles/articles',
     }),
     article() {
       return this.$store.getters['articles/articleById'](this.articleId);
@@ -215,3 +166,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex w-full overflow-auto article-container">
+    <div
+      class="flex-1 flex-shrink-0 px-6 overflow-auto"
+      :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
+    >
+      <EditArticleHeader
+        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
+        :is-updating="isUpdating"
+        :is-saved="isSaved"
+        :is-sidebar-open="showArticleSettings"
+        @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
+        @show="showArticleInPortal"
+        @updateMeta="updateMeta"
+      />
+      <div v-if="isFetching" class="h-full p-4 text-base text-center">
+        <Spinner size="" />
+        <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
+      </div>
+      <ArticleEditor
+        v-else
+        :is-settings-sidebar-open="showArticleSettings"
+        :article="article"
+        @saveArticle="saveArticle"
+      />
+    </div>
+    <ArticleSettings
+      v-if="showArticleSettings"
+      :article="article"
+      @saveArticle="saveArticle"
+      @deleteArticle="openDeletePopup"
+      @archiveArticle="archiveArticle"
+      @updateMeta="updateMeta"
+    />
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
+      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
+      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
+      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index ff610e44e..8284e1a80 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
-  >
-    <article-header
-      :header-title="headerTitle"
-      :count="meta.count"
-      :selected-locale="activeLocaleName"
-      :all-locales="allowedLocales"
-      selected-value="Published"
-      class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
-    />
-    <div
-      v-if="isFetching"
-      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
-    >
-      <spinner />
-      <span class="text-slate-600 dark:text-slate-200">
-        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
-      </span>
-    </div>
-    <empty-state
-      v-else-if="shouldShowEmptyState"
-      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
-    />
-    <div v-else class="flex flex-1">
-      <article-table
-        :articles="articles"
-        :current-page="Number(meta.currentPage)"
-        :total-count="Number(meta.count)"
-        @page-change="onPageChange"
-        @reorder="onReorder"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import allLocales from 'shared/constants/locales.js';
@@ -62,7 +23,6 @@ export default {
     ...mapGetters({
       articles: 'articles/allArticles',
       categories: 'categories/allCategories',
-      uiFlags: 'articles/uiFlags',
       meta: 'articles/getMeta',
       isFetching: 'articles/isFetching',
       currentUserId: 'getCurrentUserID',
@@ -188,8 +148,47 @@ export default {
           locale,
         },
       });
-      this.$emit('reload-locale');
+      this.$emit('reloadLocale');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col w-full max-w-full px-0 py-0 overflow-auto bg-white dark:bg-slate-900"
+  >
+    <ArticleHeader
+      :header-title="headerTitle"
+      :count="meta.count"
+      :selected-locale="activeLocaleName"
+      :all-locales="allowedLocales"
+      selected-value="Published"
+      class="border-b border-slate-50 dark:border-slate-700"
+      @newArticlePage="newArticlePage"
+      @changeLocale="onChangeLocale"
+    />
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center px-4 py-6 text-base text-slate-600 dark:text-slate-200"
+    >
+      <Spinner />
+      <span class="text-slate-600 dark:text-slate-200">
+        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
+      </span>
+    </div>
+    <EmptyState
+      v-else-if="shouldShowEmptyState"
+      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
+    />
+    <div v-else class="flex flex-1">
+      <ArticleTable
+        :articles="articles"
+        :current-page="Number(meta.currentPage)"
+        :total-count="Number(meta.count)"
+        @pageChange="onPageChange"
+        @reorder="onReorder"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
index be0673c7e..c636f6101 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to list articles in a category in a portal</div>
+  <div>{{ 'Component to list articles in a category in a portal' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index c39bfc779..f2e3924a5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
-      :class="{ 'flex-grow-1': showArticleSettings }"
-    >
-      <edit-article-header
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        draft-state="saved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @save-article="createNewArticle"
-      />
-      <article-editor :article="newArticle" @save-article="createNewArticle" />
-    </div>
-    <article-settings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -50,7 +25,6 @@ export default {
   computed: {
     ...mapGetters({
       currentUserID: 'getCurrentUserID',
-      articles: 'articles/articles',
       categories: 'categories/allCategories',
     }),
     articleId() {
@@ -117,3 +91,28 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <div
+      class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
+      :class="{ 'flex-grow-1': showArticleSettings }"
+    >
+      <EditArticleHeader
+        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
+        draft-state="saved"
+        :is-sidebar-open="showArticleSettings"
+        @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
+        @save-article="createNewArticle"
+      />
+      <ArticleEditor :article="newArticle" @saveArticle="createNewArticle" />
+    </div>
+    <ArticleSettings
+      v-if="showArticleSettings"
+      :article="article"
+      @saveArticle="saveArticle"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
index f36f1bff0..14aa4e1ca 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -1,71 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <category-name-icon-input
-          :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          @name-change="onNameChange"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model.trim="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="addCategory">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
@@ -178,6 +110,75 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
+      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
+    />
+    <form class="w-full" @submit.prevent="onCreate">
+      <div class="w-full">
+        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
+            </label>
+          </div>
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
+            </label>
+          </div>
+        </div>
+        <CategoryNameIconInput
+          :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
+          :has-error="v$.name.$error"
+          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
+          @nameChange="onNameChange"
+          @iconChange="onClickInsertEmoji"
+        />
+        <woot-input
+          v-model.trim="slug"
+          :class="{ error: v$.slug.$error }"
+          class="w-full"
+          :error="slugError"
+          :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
+          @input="v$.slug.$touch"
+        />
+        <label>
+          {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
+            "
+          />
+        </label>
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button @click="addCategory">
+              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
+
 <style scoped lang="scss">
 .input-container::v-deep {
   @apply mt-0 mb-4 mx-0;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
index d171c3f28..92fccdb49 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -1,3 +1,23 @@
+<script>
+export default {
+  props: {
+    categories: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    editCategory(category) {
+      this.$emit('edit', category);
+    },
+    deleteCategory(category) {
+      this.$emit('delete', category);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <table class="woot-table">
@@ -73,26 +93,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    categories: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  methods: {
-    editCategory(category) {
-      this.$emit('edit', category);
-    },
-    deleteCategory(category) {
-      this.$emit('delete', category);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 table {
   thead tr th {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
index 1e9636bb1..204e9af07 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,73 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onUpdate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <category-name-icon-input
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          :existing-name="category.name"
-          :saved-icon="category.icon"
-          @name-change="changeName"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model.trim="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="editCategory">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
@@ -189,6 +119,77 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
+      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
+    />
+    <form class="w-full" @submit.prevent="onUpdate">
+      <div class="w-full">
+        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
+            </label>
+          </div>
+          <div class="w-[50%]">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
+              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
+            </label>
+          </div>
+        </div>
+        <CategoryNameIconInput
+          :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
+          :has-error="v$.name.$error"
+          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
+          :existing-name="category.name"
+          :saved-icon="category.icon"
+          @nameChange="changeName"
+          @iconChange="onClickInsertEmoji"
+        />
+        <woot-input
+          v-model.trim="slug"
+          :class="{ error: v$.slug.$error }"
+          class="w-full"
+          :error="slugError"
+          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
+          @input="v$.slug.$touch"
+        />
+        <label>
+          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
+            "
+          />
+        </label>
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button @click="editCategory">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
+
 <style scoped lang="scss">
 .article-info {
   width: 100%;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
index 2152fc147..6d3c40e1c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -134,13 +134,13 @@ function changeCurrentCategory(event) {
       </div>
     </header>
     <div class="category-list">
-      <category-list-item
+      <CategoryListItem
         :categories="categoriesByLocaleCode"
         @delete="deleteCategory"
         @edit="openEditCategoryModal"
       />
     </div>
-    <edit-category
+    <EditCategory
       v-if="showEditCategoryModal"
       :show.sync="showEditCategoryModal"
       :portal-name="currentPortalName"
@@ -149,7 +149,7 @@ function changeCurrentCategory(event) {
       :selected-portal-slug="currentPortalSlug"
       @cancel="closeEditCategoryModal"
     />
-    <add-category
+    <AddCategory
       v-if="showAddCategoryModal"
       :show.sync="showAddCategoryModal"
       :portal-name="currentPortalName"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index 2bbfaf391..947ae2e8c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="flex items-center relative">
-    <woot-button
-      variant="hollow"
-      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
-      color-scheme="secondary"
-      @click="toggleEmojiPicker"
-    >
-      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
-      <fluent-icon
-        v-else
-        size="18"
-        icon="emoji-add"
-        type="outline"
-        class="text-slate-400 dark:text-slate-600"
-      />
-    </woot-button>
-    <woot-input
-      v-model="name"
-      :class="{ error: hasError }"
-      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
-      :error="nameErrorMessage"
-      :label="label"
-      :placeholder="placeholder"
-      :help-text="helpText"
-      @input="onNameChange"
-    />
-    <emoji-input
-      v-if="showEmojiPicker"
-      v-on-clickaway="hideEmojiPicker"
-      class="left-0 top-16"
-      :show-remove-button="true"
-      :on-click="onClickInsertEmoji"
-    />
-  </div>
-</template>
-
 <script>
 const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
@@ -98,11 +61,11 @@ export default {
     },
     onClickInsertEmoji(emoji = '') {
       this.icon = emoji;
-      this.$emit('icon-change', emoji);
+      this.$emit('iconChange', emoji);
       this.showEmojiPicker = false;
     },
     onNameChange() {
-      this.$emit('name-change', this.name);
+      this.$emit('nameChange', this.name);
     },
     hideEmojiPicker() {
       if (this.showEmojiPicker) {
@@ -113,6 +76,43 @@ export default {
 };
 </script>
 
+<template>
+  <div class="relative flex items-center">
+    <woot-button
+      variant="hollow"
+      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
+      color-scheme="secondary"
+      @click="toggleEmojiPicker"
+    >
+      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
+      <fluent-icon
+        v-else
+        size="18"
+        icon="emoji-add"
+        type="outline"
+        class="text-slate-400 dark:text-slate-600"
+      />
+    </woot-button>
+    <woot-input
+      v-model="name"
+      :class="{ error: hasError }"
+      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
+      :error="nameErrorMessage"
+      :label="label"
+      :placeholder="placeholder"
+      :help-text="helpText"
+      @input="onNameChange"
+    />
+    <EmojiInput
+      v-if="showEmojiPicker"
+      v-on-clickaway="hideEmojiPicker"
+      class="left-0 top-16"
+      show-remove-button
+      :on-click="onClickInsertEmoji"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .emoji-dialog::before {
   @apply hidden;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
index 722b868a7..6832de1ba 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to create a category</div>
+  <div>{{ 'Component to create a category' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
index bf5385b34..2fec281a7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to show details of a category</div>
+  <div>{{ 'Component to show details of a category' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index cbbb4cb15..231569ab3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -1,38 +1,4 @@
-<template>
-  <div class="wrapper">
-    <settings-header
-      button-route="new"
-      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div class="overflow-auto max-h-[96%]">
-      <setting-intro-banner :header-title="portalName">
-        <woot-tabs
-          :index="activeTabIndex"
-          :border="false"
-          @change="onTabChange"
-        >
-          <woot-tabs-item
-            v-for="tab in tabs"
-            :key="tab.key"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </setting-intro-banner>
-      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
 import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
@@ -44,9 +10,6 @@ export default {
   },
   mixins: [globalConfigMixin],
   computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
     currentPortal() {
       const slug = this.$route.params.portalSlug;
       if (slug) return this.$store.getters['portals/portalBySlug'](slug);
@@ -99,6 +62,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="wrapper">
+    <SettingsHeader
+      button-route="new"
+      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div class="overflow-auto max-h-[96%]">
+      <SettingIntroBanner :header-title="portalName">
+        <woot-tabs
+          :index="activeTabIndex"
+          :border="false"
+          @change="onTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </SettingIntroBanner>
+      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .wrapper {
   flex: 1;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
index aac8125e5..4b2c6ebfe 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -71,7 +71,7 @@ async function deleteLogo() {
 </script>
 
 <template>
-  <portal-settings-basic-form
+  <PortalSettingsBasicForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
@@ -79,6 +79,6 @@ async function deleteLogo() {
       $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
     "
     @submit="updatePortalSettings"
-    @delete-logo="deleteLogo"
+    @deleteLogo="deleteLogo"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
index 902dc3ca6..190d6edae 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
@@ -44,7 +44,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
index de1fd7e65..f8792cb2f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -126,7 +126,7 @@ function addLocale() {
       v-if="currentPortal"
       :locales="locales"
       :selected-locale-code="currentPortal.meta.default_locale"
-      @change-default-locale="changeDefaultLocale"
+      @changeDefaultLocale="changeDefaultLocale"
       @delete="deletePortalLocale"
     />
     <woot-modal
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index ecdd1dab0..9f040f908 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,57 +1,3 @@
-<template>
-  <div class="w-full max-w-full px-4 py-2">
-    <div class="flex items-center justify-between h-12 mx-0 mt-0 mb-2">
-      <div class="flex items-center">
-        <woot-sidemenu-icon />
-        <h1
-          class="mx-2 my-0 text-2xl font-medium text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('HELP_CENTER.PORTAL.HEADER') }}
-        </h1>
-      </div>
-      <woot-button
-        color-scheme="primary"
-        icon="add"
-        size="small"
-        @click="addPortal"
-      >
-        {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-    <div class="h-[90vh] overflow-y-scroll">
-      <portal-list-item
-        v-for="portal in portals"
-        :key="portal.id"
-        :portal="portal"
-        :status="portalStatus"
-        @add-locale="addLocale"
-        @open-site="openPortal"
-      />
-      <div
-        v-if="isFetching"
-        class="flex items-center justify-center p-40 text-base"
-      >
-        <spinner />
-        <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
-      </div>
-      <empty-state
-        v-else-if="shouldShowEmptyState"
-        :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
-      />
-    </div>
-    <woot-modal
-      :show.sync="isAddLocaleModalOpen"
-      :on-close="closeAddLocaleModal"
-    >
-      <add-locale
-        :show="isAddLocaleModalOpen"
-        :portal="selectedPortal"
-        @cancel="closeAddLocaleModal"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import PortalListItem from '../../components/PortalListItem.vue';
@@ -76,7 +22,6 @@ export default {
   computed: {
     ...mapGetters({
       portals: 'portals/allPortals',
-      meta: 'portals/getMeta',
       isFetching: 'portals/isFetchingPortals',
     }),
     portalStatus() {
@@ -104,3 +49,57 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-full max-w-full px-4 py-2">
+    <div class="flex items-center justify-between h-12 mx-0 mt-0 mb-2">
+      <div class="flex items-center">
+        <woot-sidemenu-icon />
+        <h1
+          class="mx-2 my-0 text-2xl font-medium text-slate-800 dark:text-slate-100"
+        >
+          {{ $t('HELP_CENTER.PORTAL.HEADER') }}
+        </h1>
+      </div>
+      <woot-button
+        color-scheme="primary"
+        icon="add"
+        size="small"
+        @click="addPortal"
+      >
+        {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
+      </woot-button>
+    </div>
+    <div class="h-[90vh] overflow-y-scroll">
+      <PortalListItem
+        v-for="portal in portals"
+        :key="portal.id"
+        :portal="portal"
+        :status="portalStatus"
+        @addLocale="addLocale"
+        @openSite="openPortal"
+      />
+      <div
+        v-if="isFetching"
+        class="flex items-center justify-center p-40 text-base"
+      >
+        <Spinner />
+        <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
+      </div>
+      <EmptyState
+        v-else-if="shouldShowEmptyState"
+        :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
+      />
+    </div>
+    <woot-modal
+      :show.sync="isAddLocaleModalOpen"
+      :on-close="closeAddLocaleModal"
+    >
+      <AddLocale
+        :show="isAddLocaleModalOpen"
+        :portal="selectedPortal"
+        @cancel="closeAddLocaleModal"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
index 0222044bc..b656dabb1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,31 +1,3 @@
-<template>
-  <section class="flex-1">
-    <settings-header
-      button-route="new"
-      :header-title="portalHeaderText"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div
-      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
-    >
-      <woot-wizard
-        class="hidden md:block"
-        :global-config="globalConfig"
-        :items="items"
-      />
-      <div
-        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
-      >
-        <router-view />
-      </div>
-    </div>
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -68,3 +40,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="flex-1">
+    <SettingsHeader
+      button-route="new"
+      :header-title="portalHeaderText"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div
+      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
+    >
+      <woot-wizard
+        class="hidden md:block"
+        :global-config="globalConfig"
+        :items="items"
+      />
+      <div
+        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
+      >
+        <router-view />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
index 60420be90..74046cd9b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@@ -59,7 +59,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
index 7450a84ec..cf210a50a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
@@ -1,15 +1,3 @@
-<template>
-  <PortalSettingsBasicForm
-    :is-submitting="uiFlags.isCreating"
-    :submit-button-text="
-      $t(
-        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
-      )
-    "
-    @submit="createPortal"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -68,3 +56,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <PortalSettingsBasicForm
+    :is-submitting="uiFlags.isCreating"
+    :submit-button-text="
+      $t(
+        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
+      )
+    "
+    @submit="createPortal"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
index 3a3e77142..bc8fb85a6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -1,8 +1,16 @@
+<script setup>
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import { defineComponent } from 'vue';
+defineComponent({
+  name: 'PortalSettingsFinish',
+});
+</script>
+
 <template>
   <div
     class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
   >
-    <empty-state
+    <EmptyState
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
       :message="
         $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
@@ -18,14 +26,6 @@
           {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
-
-<script setup>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { defineComponent } from 'vue';
-defineComponent({
-  name: 'PortalSettingsFinish',
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
index fd8c02176..bdbf7ccd8 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to view details of portal</div>
+  <div>{{ 'Component to view details of portal' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
index 49ab0a709..a325ebbe1 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
-  >
-    <span v-if="uiFlags.isFetching" class="spinner my-4" />
-    <div v-else class="flex flex-col items-center gap-2">
-      <fluent-icon
-        icon="mail-inbox"
-        size="40"
-        class="text-slate-600 dark:text-slate-400"
-      />
-      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
-        {{ emptyMessage }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -38,3 +20,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
+  >
+    <span v-if="uiFlags.isFetching" class="spinner my-4" />
+    <div v-else class="flex flex-col items-center gap-2">
+      <fluent-icon
+        icon="mail-inbox"
+        size="40"
+        class="text-slate-600 dark:text-slate-400"
+      />
+      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
+        {{ emptyMessage }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 776275785..fe025ff8d 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -1,49 +1,3 @@
-<template>
-  <section class="flex w-full h-full bg-white dark:bg-slate-900">
-    <div
-      class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
-      :class="!currentNotificationId ? 'flex' : 'hidden md:flex'"
-    >
-      <inbox-list-header
-        :is-context-menu-open="isInboxContextMenuOpen"
-        @filter="onFilterChange"
-        @redirect="redirectToInbox"
-      />
-      <div
-        ref="notificationList"
-        class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
-      >
-        <inbox-card
-          v-for="notificationItem in notifications"
-          :key="notificationItem.id"
-          :active="currentNotificationId === notificationItem.id"
-          :notification-item="notificationItem"
-          @mark-notification-as-read="markNotificationAsRead"
-          @mark-notification-as-unread="markNotificationAsUnRead"
-          @delete-notification="deleteNotification"
-          @context-menu-open="isInboxContextMenuOpen = true"
-          @context-menu-close="isInboxContextMenuOpen = false"
-        />
-        <div v-if="uiFlags.isFetching" class="text-center">
-          <span class="mt-4 mb-4 spinner" />
-        </div>
-        <p
-          v-if="showEmptyState"
-          class="p-4 text-sm font-medium text-center text-slate-400 dark:text-slate-400"
-        >
-          {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
-        </p>
-        <intersection-observer
-          v-if="!showEndOfList && !uiFlags.isFetching"
-          :options="infiniteLoaderOptions"
-          @observed="loadMoreNotifications"
-        />
-      </div>
-    </div>
-    <router-view />
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -84,7 +38,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       meta: 'notifications/getMeta',
       uiFlags: 'notifications/getUIFlags',
       notification: 'notifications/getFilteredNotifications',
@@ -212,3 +165,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="flex w-full h-full bg-white dark:bg-slate-900">
+    <div
+      class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
+      :class="!currentNotificationId ? 'flex' : 'hidden md:flex'"
+    >
+      <InboxListHeader
+        :is-context-menu-open="isInboxContextMenuOpen"
+        @filter="onFilterChange"
+        @redirect="redirectToInbox"
+      />
+      <div
+        ref="notificationList"
+        class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
+      >
+        <InboxCard
+          v-for="notificationItem in notifications"
+          :key="notificationItem.id"
+          :active="currentNotificationId === notificationItem.id"
+          :notification-item="notificationItem"
+          @markNotificationAsRead="markNotificationAsRead"
+          @markNotificationAsUnRead="markNotificationAsUnRead"
+          @deleteNotification="deleteNotification"
+          @contextMenuOpen="isInboxContextMenuOpen = true"
+          @contextMenuClose="isInboxContextMenuOpen = false"
+        />
+        <div v-if="uiFlags.isFetching" class="text-center">
+          <span class="mt-4 mb-4 spinner" />
+        </div>
+        <p
+          v-if="showEmptyState"
+          class="p-4 text-sm font-medium text-center text-slate-400 dark:text-slate-400"
+        >
+          {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
+        </p>
+        <IntersectionObserver
+          v-if="!showEndOfList && !uiFlags.isFetching"
+          :options="infiniteLoaderOptions"
+          @observed="loadMoreNotifications"
+        />
+      </div>
+    </div>
+    <router-view />
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index 111ee733f..2173ec113 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="h-full w-full md:w-[calc(100%-360px)]">
-    <div v-if="showEmptyState" class="flex w-full h-full">
-      <inbox-empty-state
-        :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
-      />
-    </div>
-    <div v-else class="flex flex-col w-full h-full">
-      <inbox-item-header
-        class="flex-1"
-        :total-length="totalNotificationCount"
-        :current-index="activeNotificationIndex"
-        :active-notification="activeNotification"
-        @next="onClickNext"
-        @prev="onClickPrev"
-      />
-      <div
-        v-if="isConversationLoading"
-        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
-      >
-        <span class="my-4 spinner" />
-      </div>
-      <conversation-box
-        v-else
-        class="h-[calc(100%-56px)]"
-        is-inbox-view
-        :inbox-id="inboxId"
-        :is-contact-panel-open="isContactPanelOpen"
-        :is-on-expanded-layout="false"
-        @contact-panel-toggle="onToggleContactPanel"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import InboxItemHeader from './components/InboxItemHeader.vue';
@@ -63,7 +28,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      currentAccountId: 'getCurrentAccountId',
       notification: 'notifications/getFilteredNotifications',
       currentChat: 'getSelectedChat',
       activeNotificationById: 'notifications/getNotificationById',
@@ -207,3 +171,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-full w-full md:w-[calc(100%-360px)]">
+    <div v-if="showEmptyState" class="flex w-full h-full">
+      <InboxEmptyState
+        :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
+      />
+    </div>
+    <div v-else class="flex flex-col w-full h-full">
+      <InboxItemHeader
+        class="flex-1"
+        :total-length="totalNotificationCount"
+        :current-index="activeNotificationIndex"
+        :active-notification="activeNotification"
+        @next="onClickNext"
+        @prev="onClickPrev"
+      />
+      <div
+        v-if="isConversationLoading"
+        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
+      >
+        <span class="my-4 spinner" />
+      </div>
+      <ConversationBox
+        v-else
+        class="h-[calc(100%-56px)]"
+        is-inbox-view
+        :inbox-id="inboxId"
+        :is-contact-panel-open="isContactPanelOpen"
+        :is-on-expanded-layout="false"
+        @contactPanelToggle="onToggleContactPanel"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index e5fb100f5..ac74b92c3 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -1,62 +1,3 @@
-<template>
-  <div
-    role="button"
-    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
-    :class="
-      active
-        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
-        : 'bg-white dark:bg-slate-900'
-    "
-    @contextmenu="openContextMenu($event)"
-    @click="openConversation(notificationItem)"
-  >
-    <div class="relative flex items-center justify-between w-full">
-      <div
-        v-if="isUnread"
-        class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
-      />
-      <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
-
-      <div class="flex gap-2">
-        <PriorityIcon :priority="primaryActor.priority" />
-        <StatusIcon :status="primaryActor.status" />
-      </div>
-    </div>
-
-    <div class="flex flex-row items-center justify-between w-full gap-2">
-      <Thumbnail
-        v-if="assigneeMeta"
-        :src="assigneeMeta.thumbnail"
-        :username="assigneeMeta.name"
-        size="16px"
-      />
-      <span
-        class="flex-1 overflow-hidden text-sm text-slate-800 dark:text-slate-50 text-ellipsis whitespace-nowrap"
-        :class="isUnread ? 'font-medium' : 'font-normal'"
-      >
-        {{ pushTitle }}
-      </span>
-      <span
-        class="text-xs font-medium text-slate-600 dark:text-slate-300 whitespace-nowrap"
-      >
-        {{ lastActivityAt }}
-      </span>
-    </div>
-    <div v-if="snoozedUntilTime" class="flex items-center">
-      <span class="text-xs font-medium text-woot-500 dark:text-woot-500">
-        {{ snoozedDisplayText }}
-      </span>
-    </div>
-    <inbox-context-menu
-      v-if="isContextMenuOpen"
-      :context-menu-position="contextMenuPosition"
-      :menu-items="menuItems"
-      @close="closeContextMenu"
-      @click="handleAction"
-    />
-  </div>
-</template>
-
 <script>
 import PriorityIcon from './PriorityIcon.vue';
 import StatusIcon from './StatusIcon.vue';
@@ -185,7 +126,7 @@ export default {
     closeContextMenu() {
       this.isContextMenuOpen = false;
       this.contextMenuPosition = { x: null, y: null };
-      this.$emit('context-menu-close');
+      this.$emit('contextMenuClose');
     },
     openContextMenu(e) {
       this.closeContextMenu();
@@ -195,18 +136,18 @@ export default {
         y: e.pageY || e.clientY,
       };
       this.isContextMenuOpen = true;
-      this.$emit('context-menu-open');
+      this.$emit('contextMenuOpen');
     },
     handleAction(key) {
       switch (key) {
         case 'mark_as_read':
-          this.$emit('mark-notification-as-read', this.notificationItem);
+          this.$emit('markNotificationAsRead', this.notificationItem);
           break;
         case 'mark_as_unread':
-          this.$emit('mark-notification-as-unread', this.notificationItem);
+          this.$emit('markNotificationAsUnRead', this.notificationItem);
           break;
         case 'delete':
-          this.$emit('delete-notification', this.notificationItem);
+          this.$emit('deleteNotification', this.notificationItem);
           break;
         default:
       }
@@ -215,6 +156,65 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    role="button"
+    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
+    :class="
+      active
+        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
+        : 'bg-white dark:bg-slate-900'
+    "
+    @contextmenu="openContextMenu($event)"
+    @click="openConversation(notificationItem)"
+  >
+    <div class="relative flex items-center justify-between w-full">
+      <div
+        v-if="isUnread"
+        class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
+      />
+      <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
+
+      <div class="flex gap-2">
+        <PriorityIcon :priority="primaryActor.priority" />
+        <StatusIcon :status="primaryActor.status" />
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center justify-between w-full gap-2">
+      <Thumbnail
+        v-if="assigneeMeta"
+        :src="assigneeMeta.thumbnail"
+        :username="assigneeMeta.name"
+        size="16px"
+      />
+      <span
+        class="flex-1 overflow-hidden text-sm text-slate-800 dark:text-slate-50 text-ellipsis whitespace-nowrap"
+        :class="isUnread ? 'font-medium' : 'font-normal'"
+      >
+        {{ pushTitle }}
+      </span>
+      <span
+        class="text-xs font-medium text-slate-600 dark:text-slate-300 whitespace-nowrap"
+      >
+        {{ lastActivityAt }}
+      </span>
+    </div>
+    <div v-if="snoozedUntilTime" class="flex items-center">
+      <span class="text-xs font-medium text-woot-500 dark:text-woot-500">
+        {{ snoozedDisplayText }}
+      </span>
+    </div>
+    <InboxContextMenu
+      v-if="isContextMenuOpen"
+      :context-menu-position="contextMenuPosition"
+      :menu-items="menuItems"
+      @close="closeContextMenu"
+      @click="handleAction"
+    />
+  </div>
+</template>
+
 <style scoped>
 .click-animation {
   animation: click-animation 0.3s ease-in-out;
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
index 50ebd3a5b..b46bb674c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
@@ -1,22 +1,3 @@
-<template>
-  <woot-context-menu
-    :x="contextMenuPosition.x"
-    :y="contextMenuPosition.y"
-    @close="handleClose"
-  >
-    <div
-      class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
-    >
-      <menu-item
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-  </woot-context-menu>
-</template>
-
 <script>
 import MenuItem from './MenuItem.vue';
 export default {
@@ -44,3 +25,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-context-menu
+    :x="contextMenuPosition.x"
+    :y="contextMenuPosition.y"
+    @close="handleClose"
+  >
+    <div
+      class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
+    >
+      <MenuItem
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+  </woot-context-menu>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
index e38a8fba9..4f9b855ca 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
@@ -1,101 +1,3 @@
-<template>
-  <div
-    class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
-  >
-    <div class="flex items-center justify-between p-3 rounded-t-lg h-11">
-      <div class="flex gap-1.5">
-        <fluent-icon
-          icon="arrow-sort"
-          type="outline"
-          size="16"
-          class="text-slate-700 dark:text-slate-100"
-        />
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">
-          {{ $t('INBOX.DISPLAY_MENU.SORT') }}
-        </span>
-      </div>
-      <div class="relative">
-        <div
-          role="button"
-          class="border h-5 flex gap-1 rounded-md items-center pr-1.5 pl-1 py-0.5 w-[70px] justify-between border-slate-100 dark:border-slate-700/50"
-          @click="openSortMenu"
-        >
-          <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
-            {{ activeSortOption }}
-          </span>
-          <fluent-icon
-            icon="chevron-down"
-            size="12"
-            class="text-slate-600 dark:text-slate-200"
-          />
-        </div>
-        <div
-          v-if="showSortMenu"
-          class="absolute flex flex-col gap-0.5 bg-white z-60 dark:bg-slate-800 rounded-md p-0.5 top-0 w-[70px] border border-slate-100 dark:border-slate-700/50"
-        >
-          <div
-            v-for="option in sortOptions"
-            :key="option.key"
-            role="button"
-            class="flex rounded-[4px] h-5 w-full items-center justify-between p-0.5 gap-1"
-            :class="{
-              'bg-woot-50 dark:bg-woot-700/50': activeSort === option.key,
-            }"
-            @click.stop="onSortOptionClick(option)"
-          >
-            <span
-              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
-              :class="{
-                'text-woot-600 dark:text-woot-600': activeSort === option.key,
-                'text-slate-600 dark:text-slate-300': activeSort !== option.key,
-              }"
-            >
-              {{ option.name }}
-            </span>
-            <fluent-icon
-              v-if="activeSort === option.key"
-              icon="checkmark"
-              size="14"
-              class="text-woot-600 dark:text-woot-600"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <span
-        class="px-3 py-4 text-xs font-medium text-slate-400 dark:text-slate-400"
-      >
-        {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
-      </span>
-      <div
-        class="flex flex-col divide-y divide-slate-100 dark:divide-slate-700/50"
-      >
-        <div
-          v-for="option in displayOptions"
-          :key="option.key"
-          class="flex items-center px-3 py-2 gap-1.5 h-9"
-        >
-          <input
-            :id="option.key"
-            type="checkbox"
-            :name="option.key"
-            :checked="option.selected"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @change="updateDisplayOption(option)"
-          />
-          <label
-            :for="option.key"
-            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
-          >
-            {{ option.name }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -203,3 +105,101 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
+  >
+    <div class="flex items-center justify-between p-3 rounded-t-lg h-11">
+      <div class="flex gap-1.5">
+        <fluent-icon
+          icon="arrow-sort"
+          type="outline"
+          size="16"
+          class="text-slate-700 dark:text-slate-100"
+        />
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">
+          {{ $t('INBOX.DISPLAY_MENU.SORT') }}
+        </span>
+      </div>
+      <div class="relative">
+        <div
+          role="button"
+          class="border h-5 flex gap-1 rounded-md items-center pr-1.5 pl-1 py-0.5 w-[70px] justify-between border-slate-100 dark:border-slate-700/50"
+          @click="openSortMenu"
+        >
+          <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
+            {{ activeSortOption }}
+          </span>
+          <fluent-icon
+            icon="chevron-down"
+            size="12"
+            class="text-slate-600 dark:text-slate-200"
+          />
+        </div>
+        <div
+          v-if="showSortMenu"
+          class="absolute flex flex-col gap-0.5 bg-white z-60 dark:bg-slate-800 rounded-md p-0.5 top-0 w-[70px] border border-slate-100 dark:border-slate-700/50"
+        >
+          <div
+            v-for="option in sortOptions"
+            :key="option.key"
+            role="button"
+            class="flex rounded-[4px] h-5 w-full items-center justify-between p-0.5 gap-1"
+            :class="{
+              'bg-woot-50 dark:bg-woot-700/50': activeSort === option.key,
+            }"
+            @click.stop="onSortOptionClick(option)"
+          >
+            <span
+              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
+              :class="{
+                'text-woot-600 dark:text-woot-600': activeSort === option.key,
+                'text-slate-600 dark:text-slate-300': activeSort !== option.key,
+              }"
+            >
+              {{ option.name }}
+            </span>
+            <fluent-icon
+              v-if="activeSort === option.key"
+              icon="checkmark"
+              size="14"
+              class="text-woot-600 dark:text-woot-600"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <span
+        class="px-3 py-4 text-xs font-medium text-slate-400 dark:text-slate-400"
+      >
+        {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
+      </span>
+      <div
+        class="flex flex-col divide-y divide-slate-100 dark:divide-slate-700/50"
+      >
+        <div
+          v-for="option in displayOptions"
+          :key="option.key"
+          class="flex items-center px-3 py-2 gap-1.5 h-9"
+        >
+          <input
+            :id="option.key"
+            type="checkbox"
+            :name="option.key"
+            :checked="option.selected"
+            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            @change="updateDisplayOption(option)"
+          />
+          <label
+            :for="option.key"
+            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
+          >
+            {{ option.name }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 2a6d0948e..271c4460a 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -1,59 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-slate-50 dark:border-slate-800/50"
-  >
-    <woot-button
-      variant="clear link"
-      class="flex md:hidden !pt-1 !pb-1 rounded-md ltr:pr-1 rtl:pl-1 !no-underline"
-      size="medium"
-      color-scheme="primary"
-      icon="chevron-left"
-      @click="onClickGoToInboxList"
-    >
-      {{ $t('INBOX.ACTION_HEADER.BACK') }}
-    </woot-button>
-    <pagination-button
-      v-if="totalLength > 1"
-      :total-length="totalLength"
-      :current-index="currentIndex + 1"
-      @next="onClickNext"
-      @prev="onClickPrev"
-    />
-    <div v-else />
-    <div class="flex items-center gap-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        icon="snooze"
-        class="[&>span]:hidden md:[&>span]:inline-flex"
-        @click="openSnoozeNotificationModal"
-      >
-        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
-      </woot-button>
-      <woot-button
-        icon="delete"
-        size="small"
-        color-scheme="secondary"
-        variant="hollow"
-        class="[&>span]:hidden md:[&>span]:inline-flex"
-        @click="deleteNotification"
-      >
-        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
-      </woot-button>
-    </div>
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="scheduleCustomSnooze"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -156,3 +100,59 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-slate-50 dark:border-slate-800/50"
+  >
+    <woot-button
+      variant="clear link"
+      class="flex md:hidden !pt-1 !pb-1 rounded-md ltr:pr-1 rtl:pl-1 !no-underline"
+      size="medium"
+      color-scheme="primary"
+      icon="chevron-left"
+      @click="onClickGoToInboxList"
+    >
+      {{ $t('INBOX.ACTION_HEADER.BACK') }}
+    </woot-button>
+    <PaginationButton
+      v-if="totalLength > 1"
+      :total-length="totalLength"
+      :current-index="currentIndex + 1"
+      @next="onClickNext"
+      @prev="onClickPrev"
+    />
+    <div v-else />
+    <div class="flex items-center gap-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        icon="snooze"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
+        @click="openSnoozeNotificationModal"
+      >
+        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
+      </woot-button>
+      <woot-button
+        icon="delete"
+        size="small"
+        color-scheme="secondary"
+        variant="hollow"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
+        @click="deleteNotification"
+      >
+        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
+      </woot-button>
+    </div>
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <CustomSnoozeModal
+        @close="hideCustomSnoozeModal"
+        @chooseTime="scheduleCustomSnooze"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 8bbecaa8d..87146a661 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -1,61 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-between w-full py-2 border-b ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 h-14 border-slate-50 dark:border-slate-800/50"
-  >
-    <div class="flex items-center gap-1.5">
-      <h1 class="text-xl font-medium text-slate-900 dark:text-slate-25">
-        {{ $t('INBOX.LIST.TITLE') }}
-      </h1>
-      <div class="relative">
-        <div
-          role="button"
-          class="flex items-center gap-1 px-2 py-1 border rounded-md border-slate-100 dark:border-slate-700/50"
-          @click="openInboxDisplayMenu"
-        >
-          <span
-            class="text-xs font-medium text-center text-slate-600 dark:text-slate-200"
-          >
-            {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
-          </span>
-          <fluent-icon
-            icon="chevron-down"
-            size="12"
-            class="text-slate-600 dark:text-slate-200"
-          />
-        </div>
-        <inbox-display-menu
-          v-if="showInboxDisplayMenu"
-          v-on-clickaway="openInboxDisplayMenu"
-          class="absolute top-9 ltr:left-0 rtl:right-0"
-          @filter="onFilterChange"
-        />
-      </div>
-    </div>
-    <div class="relative flex items-center gap-1">
-      <!-- <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="filter"
-        @click="openInboxFilter"
-      /> -->
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="mail-inbox"
-        @click="openInboxOptionsMenu"
-      />
-      <inbox-option-menu
-        v-if="showInboxOptionMenu"
-        v-on-clickaway="openInboxOptionsMenu"
-        class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
-        @option-click="onInboxOptionMenuClick"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -132,4 +74,60 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <div
+    class="flex items-center justify-between w-full py-2 border-b ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 h-14 border-slate-50 dark:border-slate-800/50"
+  >
+    <div class="flex items-center gap-1.5">
+      <h1 class="text-xl font-medium text-slate-900 dark:text-slate-25">
+        {{ $t('INBOX.LIST.TITLE') }}
+      </h1>
+      <div class="relative">
+        <div
+          role="button"
+          class="flex items-center gap-1 px-2 py-1 border rounded-md border-slate-100 dark:border-slate-700/50"
+          @click="openInboxDisplayMenu"
+        >
+          <span
+            class="text-xs font-medium text-center text-slate-600 dark:text-slate-200"
+          >
+            {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
+          </span>
+          <fluent-icon
+            icon="chevron-down"
+            size="12"
+            class="text-slate-600 dark:text-slate-200"
+          />
+        </div>
+        <InboxDisplayMenu
+          v-if="showInboxDisplayMenu"
+          v-on-clickaway="openInboxDisplayMenu"
+          class="absolute top-9 ltr:left-0 rtl:right-0"
+          @filter="onFilterChange"
+        />
+      </div>
+    </div>
+    <div class="relative flex items-center gap-1">
+      <!-- <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="filter"
+        @click="openInboxFilter"
+      /> -->
+      <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="mail-inbox"
+        @click="openInboxOptionsMenu"
+      />
+      <InboxOptionMenu
+        v-if="showInboxOptionMenu"
+        v-on-clickaway="openInboxOptionsMenu"
+        class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
+        @optionClick="onInboxOptionMenuClick"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
index 0b0ef03ff..3e4a9d8a9 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
@@ -21,6 +21,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <div
     class="inline-flex items-center rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
index f10821677..e5ab0818c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
@@ -1,18 +1,3 @@
-<template>
-  <div
-    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
-  >
-    <div class="flex flex-col">
-      <menu-item
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onClick(item.key)"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import MenuItem from './MenuItem.vue';
 export default {
@@ -39,8 +24,23 @@ export default {
   },
   methods: {
     onClick(key) {
-      this.$emit('option-click', key);
+      this.$emit('optionClick', key);
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="z-50 flex flex-col w-40 gap-1 py-1 bg-white border divide-y shadow-md dark:bg-slate-900 border-slate-100 dark:border-slate-700/50 rounded-xl divide-slate-100 dark:divide-slate-700/50"
+  >
+    <div class="flex flex-col">
+      <MenuItem
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onClick(item.key)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
index cddad0d58..5019d451d 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
@@ -6,16 +6,17 @@ defineProps({
   },
 });
 
-const emits = defineEmits(['click']);
+const emit = defineEmits(['click']);
 
 const onMenuItemClick = () => {
-  emits('click');
+  emit('click');
 };
 </script>
+
 <template>
   <div
     role="button"
-    class="py-1 px-2 w-full h-8 font-medium text-xs text-slate-800 dark:text-slate-100 flex items-center whitespace-nowrap text-ellipsis overflow-hidden hover:text-woot-600 dark:hover:text-woot-500 cursor-pointer rounded-md"
+    class="flex items-center w-full h-8 px-2 py-1 overflow-hidden text-xs font-medium rounded-md cursor-pointer text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis hover:text-woot-600 dark:hover:text-woot-500"
     @click.stop="onMenuItemClick"
   >
     {{ label }}
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
index e361f39df..ed0db6c13 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -1,3 +1,38 @@
+<script>
+export default {
+  props: {
+    totalLength: {
+      type: Number,
+      default: 0,
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    isUpDisabled() {
+      return this.currentIndex === 1;
+    },
+    isDownDisabled() {
+      return this.currentIndex === this.totalLength || this.totalLength <= 1;
+    },
+  },
+  methods: {
+    handleUpClick() {
+      if (this.currentIndex > 1) {
+        this.$emit('prev');
+      }
+    },
+    handleDownClick() {
+      if (this.currentIndex < this.totalLength) {
+        this.$emit('next');
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex gap-2 items-center">
     <div class="flex gap-1 items-center">
@@ -34,37 +69,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    totalLength: {
-      type: Number,
-      default: 0,
-    },
-    currentIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    isUpDisabled() {
-      return this.currentIndex === 1;
-    },
-    isDownDisabled() {
-      return this.currentIndex === this.totalLength || this.totalLength <= 1;
-    },
-  },
-  methods: {
-    handleUpClick() {
-      if (this.currentIndex > 1) {
-        this.$emit('prev');
-      }
-    },
-    handleDownClick() {
-      if (this.currentIndex < this.totalLength) {
-        this.$emit('next');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
index 5f6ddc8d2..8fb66ee1b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
@@ -1,3 +1,21 @@
+<script>
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+export default {
+  props: {
+    status: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      CONVERSATION_STATUS,
+    };
+  },
+};
+</script>
+
 <template>
   <div class="inline-flex items-center justify-center rounded-md">
     <!-- Pending -->
@@ -66,21 +84,3 @@
     </svg>
   </div>
 </template>
-
-<script>
-import { CONVERSATION_STATUS } from 'shared/constants/messages';
-
-export default {
-  props: {
-    status: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_STATUS,
-    };
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index 459f9aaef..cf814fcce 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -1,118 +1,3 @@
-<template>
-  <div class="modal-mask">
-    <div
-      v-on-clickaway="closeNotificationPanel"
-      class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
-    >
-      <div
-        class="flex-row items-center border-b border-solid pt-5 pb-3 px-6 border-slate-50 dark:border-slate-700 w-full flex justify-between"
-      >
-        <div class="items-center flex">
-          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
-            {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
-          </span>
-          <span
-            v-if="totalUnreadNotifications"
-            class="py-1 px-2 font-semibold text-slate-700 dark:text-slate-200 rounded-md text-xxs ml-2 mr-2 bg-slate-50 dark:bg-slate-700"
-          >
-            {{ totalUnreadNotifications }}
-          </span>
-        </div>
-        <div class="flex gap-2">
-          <woot-button
-            v-if="!noUnreadNotificationAvailable"
-            color-scheme="primary"
-            variant="smooth"
-            size="tiny"
-            :is-loading="uiFlags.isUpdating"
-            @click="onMarkAllDoneClick"
-          >
-            {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
-          </woot-button>
-          <woot-button
-            color-scheme="secondary"
-            variant="smooth"
-            size="tiny"
-            icon="settings"
-            @click="openAudioNotificationSettings"
-          />
-          <woot-button
-            color-scheme="secondary"
-            variant="link"
-            size="tiny"
-            icon="dismiss"
-            @click="closeNotificationPanel"
-          />
-        </div>
-      </div>
-      <notification-panel-list
-        :notifications="getUnreadNotifications"
-        :is-loading="uiFlags.isFetching"
-        :on-click-notification="openConversation"
-        :in-last-page="inLastPage"
-        @close="closeNotificationPanel"
-      />
-      <div
-        v-if="records.length !== 0"
-        class="items-center py-1 px-5 flex justify-between"
-      >
-        <div class="flex">
-          <woot-button
-            size="medium"
-            variant="clear"
-            color-scheme="secondary"
-            :is-disabled="inFirstPage"
-            @click="onClickFirstPage"
-          >
-            <fluent-icon icon="chevron-left" size="16" />
-            <fluent-icon
-              icon="chevron-left"
-              size="16"
-              :class="notificationPanelFooterIconClass"
-            />
-          </woot-button>
-          <woot-button
-            color-scheme="secondary"
-            variant="clear"
-            size="medium"
-            icon="chevron-left"
-            :disabled="inFirstPage"
-            @click="onClickPreviousPage"
-          />
-        </div>
-        <span class="text-xxs font-semibold text-slate-500 dark:text-slate-400">
-          {{ currentPage }} - {{ lastPage }}
-        </span>
-        <div class="flex">
-          <woot-button
-            color-scheme="secondary"
-            variant="clear"
-            size="medium"
-            icon="chevron-right"
-            :disabled="inLastPage"
-            @click="onClickNextPage"
-          />
-          <woot-button
-            size="medium"
-            variant="clear"
-            color-scheme="secondary"
-            :disabled="inLastPage"
-            @click="onClickLastPage"
-          >
-            <fluent-icon icon="chevron-right" size="16" />
-            <fluent-icon
-              icon="chevron-right"
-              size="16"
-              :class="notificationPanelFooterIconClass"
-            />
-          </woot-button>
-        </div>
-      </div>
-      <div v-else />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import rtlMixin from 'shared/mixins/rtlMixin';
@@ -132,7 +17,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       meta: 'notifications/getMeta',
       records: 'notifications/getNotifications',
       uiFlags: 'notifications/getUIFlags',
@@ -246,3 +130,118 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="modal-mask">
+    <div
+      v-on-clickaway="closeNotificationPanel"
+      class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
+    >
+      <div
+        class="flex flex-row items-center justify-between w-full px-6 pt-5 pb-3 border-b border-solid border-slate-50 dark:border-slate-700"
+      >
+        <div class="flex items-center">
+          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
+            {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
+          </span>
+          <span
+            v-if="totalUnreadNotifications"
+            class="px-2 py-1 ml-2 mr-2 font-semibold rounded-md text-slate-700 dark:text-slate-200 text-xxs bg-slate-50 dark:bg-slate-700"
+          >
+            {{ totalUnreadNotifications }}
+          </span>
+        </div>
+        <div class="flex gap-2">
+          <woot-button
+            v-if="!noUnreadNotificationAvailable"
+            color-scheme="primary"
+            variant="smooth"
+            size="tiny"
+            :is-loading="uiFlags.isUpdating"
+            @click="onMarkAllDoneClick"
+          >
+            {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
+          </woot-button>
+          <woot-button
+            color-scheme="secondary"
+            variant="smooth"
+            size="tiny"
+            icon="settings"
+            @click="openAudioNotificationSettings"
+          />
+          <woot-button
+            color-scheme="secondary"
+            variant="link"
+            size="tiny"
+            icon="dismiss"
+            @click="closeNotificationPanel"
+          />
+        </div>
+      </div>
+      <NotificationPanelList
+        :notifications="getUnreadNotifications"
+        :is-loading="uiFlags.isFetching"
+        :on-click-notification="openConversation"
+        :in-last-page="inLastPage"
+        @close="closeNotificationPanel"
+      />
+      <div
+        v-if="records.length !== 0"
+        class="flex items-center justify-between px-5 py-1"
+      >
+        <div class="flex">
+          <woot-button
+            size="medium"
+            variant="clear"
+            color-scheme="secondary"
+            :is-disabled="inFirstPage"
+            @click="onClickFirstPage"
+          >
+            <fluent-icon icon="chevron-left" size="16" />
+            <fluent-icon
+              icon="chevron-left"
+              size="16"
+              :class="notificationPanelFooterIconClass"
+            />
+          </woot-button>
+          <woot-button
+            color-scheme="secondary"
+            variant="clear"
+            size="medium"
+            icon="chevron-left"
+            :disabled="inFirstPage"
+            @click="onClickPreviousPage"
+          />
+        </div>
+        <span class="font-semibold text-xxs text-slate-500 dark:text-slate-400">
+          {{ currentPage }} - {{ lastPage }}
+        </span>
+        <div class="flex">
+          <woot-button
+            color-scheme="secondary"
+            variant="clear"
+            size="medium"
+            icon="chevron-right"
+            :disabled="inLastPage"
+            @click="onClickNextPage"
+          />
+          <woot-button
+            size="medium"
+            variant="clear"
+            color-scheme="secondary"
+            :disabled="inLastPage"
+            @click="onClickLastPage"
+          >
+            <fluent-icon icon="chevron-right" size="16" />
+            <fluent-icon
+              icon="chevron-right"
+              size="16"
+              :class="notificationPanelFooterIconClass"
+            />
+          </woot-button>
+        </div>
+      </div>
+      <div v-else />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
index a31172e8a..5257c0740 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -1,3 +1,41 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    notificationItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    notificationAssignee() {
+      const { primary_actor: primaryActor } = this.notificationItem;
+      return primaryActor?.meta?.assignee;
+    },
+    hasNotificationAssignee() {
+      return !!this.notificationAssignee;
+    },
+    notificationAssigneeName() {
+      return this.notificationAssignee?.name || '';
+    },
+    notificationAssigneeThumbnail() {
+      return this.notificationAssignee?.thumbnail || '';
+    },
+  },
+  methods: {
+    dynamicTime,
+    onClickOpenNotification() {
+      this.$emit('openNotification', this.notificationItem);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="w-full">
     <woot-button
@@ -40,7 +78,7 @@
               </span>
             </div>
             <div v-if="hasNotificationAssignee">
-              <thumbnail
+              <Thumbnail
                 :src="notificationAssigneeThumbnail"
                 size="16px"
                 :username="notificationAssigneeName"
@@ -64,41 +102,3 @@
     </woot-button>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    notificationItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    notificationAssignee() {
-      const { primary_actor: primaryActor } = this.notificationItem;
-      return primaryActor?.meta?.assignee;
-    },
-    hasNotificationAssignee() {
-      return !!this.notificationAssignee;
-    },
-    notificationAssigneeName() {
-      return this.notificationAssignee?.name || '';
-    },
-    notificationAssigneeThumbnail() {
-      return this.notificationAssignee?.thumbnail || '';
-    },
-  },
-  methods: {
-    dynamicTime,
-    onClickOpenNotification() {
-      this.$emit('open-notification', this.notificationItem);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index 9ae08b144..d07b9c0c7 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -1,41 +1,4 @@
-<template>
-  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <notification-panel-item
-      v-for="notificationItem in notifications"
-      v-show="!isLoading"
-      :key="notificationItem.id"
-      :notification-item="notificationItem"
-      @open-notification="onClickNotification"
-    />
-    <empty-state
-      v-if="showEmptyResult"
-      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
-    />
-    <woot-button
-      v-if="!isLoading && inLastPage"
-      size="expanded"
-      variant="clear"
-      color-scheme="primary"
-      class-names="mt-3"
-      @click="openNotificationPage"
-    >
-      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
-    </woot-button>
-    <div
-      v-if="isLoading"
-      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
-    >
-      <spinner />
-      <span>{{
-        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
-      }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
-
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import NotificationPanelItem from './NotificationPanelItem.vue';
@@ -65,9 +28,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      notificationMetadata: 'notifications/getMeta',
-    }),
     showEmptyResult() {
       return !this.isLoading && this.notifications.length === 0;
     },
@@ -84,3 +44,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
+    <NotificationPanelItem
+      v-for="notificationItem in notifications"
+      v-show="!isLoading"
+      :key="notificationItem.id"
+      :notification-item="notificationItem"
+      @openNotification="onClickNotification"
+    />
+    <EmptyState
+      v-if="showEmptyResult"
+      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
+    />
+    <woot-button
+      v-if="!isLoading && inLastPage"
+      size="expanded"
+      variant="clear"
+      color-scheme="primary"
+      class-names="mt-3"
+      @click="openNotificationPage"
+    >
+      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
+    </woot-button>
+    <div
+      v-if="isLoading"
+      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
+    >
+      <Spinner />
+      <span>{{
+        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
+      }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 9376f0ced..b378afec2 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -1,3 +1,52 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    Thumbnail,
+    Spinner,
+    EmptyState,
+  },
+  props: {
+    notifications: {
+      type: Array,
+      default: () => [],
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+    onClickNotification: {
+      type: Function,
+      default: () => {},
+    },
+    onMarkAllDoneClick: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  computed: {
+    ...mapGetters({
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    showEmptyResult() {
+      return !this.isLoading && this.notifications.length === 0;
+    },
+  },
+  methods: {
+    dynamicTime,
+  },
+};
+</script>
+
 <template>
   <section
     class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
@@ -50,7 +99,7 @@
             </span>
           </td>
           <td class="thumbnail--column">
-            <thumbnail
+            <Thumbnail
               v-if="notificationItem.primary_actor.meta.assignee"
               :src="notificationItem.primary_actor.meta.assignee.thumbnail"
               size="36px"
@@ -73,66 +122,17 @@
         </tr>
       </tbody>
     </table>
-    <empty-state
+    <EmptyState
       v-if="showEmptyResult"
       :title="$t('NOTIFICATIONS_PAGE.LIST.404')"
     />
     <div v-if="isLoading" class="notifications--loader">
-      <spinner />
+      <Spinner />
       <span>{{ $t('NOTIFICATIONS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
   </section>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import { mapGetters } from 'vuex';
-
-export default {
-  components: {
-    Thumbnail,
-    Spinner,
-    EmptyState,
-  },
-  props: {
-    notifications: {
-      type: Array,
-      default: () => [],
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false,
-    },
-    onClickNotification: {
-      type: Function,
-      default: () => {},
-    },
-    onMarkAllDoneClick: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  computed: {
-    ...mapGetters({
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    showEmptyResult() {
-      return !this.isLoading && this.notifications.length === 0;
-    },
-  },
-  methods: {
-    dynamicTime,
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/mixins';
 
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index b4df7a0e8..8c1454304 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="overflow-y-auto h-full">
-    <div class="flex flex-col h-full">
-      <notification-table
-        :notifications="records"
-        :is-loading="uiFlags.isFetching"
-        :is-updating="uiFlags.isUpdating"
-        :on-click-notification="openConversation"
-        :on-mark-all-done-click="onMarkAllDoneClick"
-      />
-      <table-footer
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
@@ -77,6 +56,27 @@ export default {
 };
 </script>
 
+<template>
+  <div class="h-full overflow-y-auto">
+    <div class="flex flex-col h-full">
+      <NotificationTable
+        :notifications="records"
+        :is-loading="uiFlags.isFetching"
+        :is-updating="uiFlags.isUpdating"
+        :on-click-notification="openConversation"
+        :on-mark-all-done-click="onMarkAllDoneClick"
+      />
+      <TableFooter
+        class="border-t border-slate-75 dark:border-slate-700/50"
+        :current-page="Number(meta.currentPage)"
+        :total-count="meta.count"
+        :page-size="15"
+        @pageChange="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .notification--page {
   background: var(--white);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index b378d8d11..dfc79f820 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,42 +1,4 @@
-<template>
-  <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
-  >
-    <h1
-      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
-    >
-      <woot-sidemenu-icon v-if="showSidemenuIcon" />
-      <back-button
-        v-if="showBackButton"
-        :button-label="backButtonLabel"
-        :back-url="backUrl"
-        class="ml-2 mr-4"
-      />
-      <fluent-icon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClass"
-        class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
-      />
-      <slot />
-      <span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
-        {{ headerTitle }}
-      </span>
-    </h1>
-    <router-link
-      v-if="showNewButton && isAdmin"
-      :to="buttonRoute"
-      class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ buttonText }}
-      </span>
-    </router-link>
-  </div>
-</template>
 <script>
-import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BackButton from '../../../components/widgets/BackButton.vue';
 
@@ -83,12 +45,47 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-    }),
     iconClass() {
       return `icon ${this.icon} header--icon`;
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
+  >
+    <h1
+      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
+    >
+      <woot-sidemenu-icon v-if="showSidemenuIcon" />
+      <BackButton
+        v-if="showBackButton"
+        :button-label="backButtonLabel"
+        :back-url="backUrl"
+        class="ml-2 mr-4"
+      />
+      <fluent-icon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClass"
+        class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
+      />
+      <slot />
+      <span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
+        {{ headerTitle }}
+      </span>
+    </h1>
+    <router-link
+      v-if="showNewButton && isAdmin"
+      :to="buttonRoute"
+      class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
+    >
+      <fluent-icon icon="add-circle" />
+      <span class="button__content">
+        {{ buttonText }}
+      </span>
+    </router-link>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
index 618805309..cfe642f54 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -10,6 +10,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div class="flex flex-col w-full h-full gap-10 font-inter">
     <slot name="header" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index 8f6f46601..d67d96eb5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  props: {
+    headerTitle: { type: String, default: '' },
+    headerContent: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col w-full items-start">
     <h2
@@ -11,12 +20,3 @@
     />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: { type: String, default: '' },
-    headerContent: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 2b2604ac8..6b191983e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
-  >
-    <settings-header
-      button-route="new"
-      :icon="icon"
-      :header-title="$t(headerTitle)"
-      :button-text="$t(headerButtonText)"
-      :show-back-button="showBackButton"
-      :back-url="backUrl"
-      :show-new-button="showNewButton"
-      :show-sidemenu-icon="showSidemenuIcon"
-    />
-    <keep-alive v-if="keepAlive">
-      <router-view />
-    </keep-alive>
-    <router-view v-else />
-  </div>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import SettingsHeader from './SettingsHeader.vue';
@@ -65,3 +44,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
+  >
+    <SettingsHeader
+      button-route="new"
+      :icon="icon"
+      :header-title="$t(headerTitle)"
+      :button-text="$t(headerButtonText)"
+      :show-back-button="showBackButton"
+      :back-url="backUrl"
+      :show-new-button="showNewButton"
+      :show-sidemenu-icon="showSidemenuIcon"
+    />
+    <keep-alive v-if="keepAlive">
+      <router-view />
+    </keep-alive>
+    <router-view v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 8ebd2b18c..ea715ff95 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -1,133 +1,3 @@
-<template>
-  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
-    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
-      <div
-        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
-      >
-        <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
-        >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
-            {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
-          </h4>
-          <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
-        </div>
-        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <label :class="{ error: v$.name.$error }">
-            {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
-            <input
-              v-model="name"
-              type="text"
-              :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
-              @blur="v$.name.$touch"
-            />
-            <span v-if="v$.name.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
-            </span>
-          </label>
-          <label :class="{ error: v$.locale.$error }">
-            {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
-            <select v-model="locale">
-              <option
-                v-for="lang in languagesSortedByCode"
-                :key="lang.iso_639_1_code"
-                :value="lang.iso_639_1_code"
-              >
-                {{ lang.name }}
-              </option>
-            </select>
-            <span v-if="v$.locale.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
-            </span>
-          </label>
-          <label v-if="featureInboundEmailEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
-          </label>
-          <label v-if="featureCustomReplyDomainEnabled">
-            {{
-              $t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
-            }}
-          </label>
-          <label v-if="featureCustomReplyDomainEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
-            <input
-              v-model="domain"
-              type="text"
-              :placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
-            />
-          </label>
-          <label v-if="featureCustomReplyEmailEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
-            <input
-              v-model="supportEmail"
-              type="text"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
-              "
-            />
-          </label>
-          <label
-            v-if="showAutoResolutionConfig"
-            :class="{ error: v$.autoResolveDuration.$error }"
-          >
-            {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
-            <input
-              v-model="autoResolveDuration"
-              type="number"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
-              "
-              @blur="v$.autoResolveDuration.$touch"
-            />
-            <span v-if="v$.autoResolveDuration.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
-            </span>
-          </label>
-        </div>
-      </div>
-
-      <div
-        class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
-      >
-        <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
-        >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
-            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
-          </h4>
-          <p>
-            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
-          </p>
-        </div>
-        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <woot-code :script="getAccountId" />
-        </div>
-      </div>
-      <div class="p-4 text-sm text-center">
-        <div>{{ `v${globalConfig.appVersion}` }}</div>
-        <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
-          {{
-            $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
-              latestChatwootVersion: latestChatwootVersion,
-            })
-          }}
-        </div>
-        <div class="build-id">
-          <div>{{ `Build ${globalConfig.gitSha}` }}</div>
-        </div>
-      </div>
-
-      <woot-submit-button
-        class="button nice success button--fixed-top"
-        :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
-        :loading="isUpdating"
-      />
-    </form>
-
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minValue, maxValue } from '@vuelidate/validators';
@@ -289,3 +159,133 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
+    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
+      <div
+        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
+      >
+        <div
+          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+        >
+          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+            {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
+          </h4>
+          <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
+        </div>
+        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
+          <label :class="{ error: v$.name.$error }">
+            {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
+            <input
+              v-model="name"
+              type="text"
+              :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
+              @blur="v$.name.$touch"
+            />
+            <span v-if="v$.name.$error" class="message">
+              {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
+            </span>
+          </label>
+          <label :class="{ error: v$.locale.$error }">
+            {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
+            <select v-model="locale">
+              <option
+                v-for="lang in languagesSortedByCode"
+                :key="lang.iso_639_1_code"
+                :value="lang.iso_639_1_code"
+              >
+                {{ lang.name }}
+              </option>
+            </select>
+            <span v-if="v$.locale.$error" class="message">
+              {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
+            </span>
+          </label>
+          <label v-if="featureInboundEmailEnabled">
+            {{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
+          </label>
+          <label v-if="featureCustomReplyDomainEnabled">
+            {{
+              $t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
+            }}
+          </label>
+          <label v-if="featureCustomReplyDomainEnabled">
+            {{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
+            <input
+              v-model="domain"
+              type="text"
+              :placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
+            />
+          </label>
+          <label v-if="featureCustomReplyEmailEnabled">
+            {{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
+            <input
+              v-model="supportEmail"
+              type="text"
+              :placeholder="
+                $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
+              "
+            />
+          </label>
+          <label
+            v-if="showAutoResolutionConfig"
+            :class="{ error: v$.autoResolveDuration.$error }"
+          >
+            {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
+            <input
+              v-model="autoResolveDuration"
+              type="number"
+              :placeholder="
+                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
+              "
+              @blur="v$.autoResolveDuration.$touch"
+            />
+            <span v-if="v$.autoResolveDuration.$error" class="message">
+              {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <div
+        class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
+      >
+        <div
+          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+        >
+          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
+          </h4>
+          <p>
+            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
+          </p>
+        </div>
+        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
+          <woot-code :script="getAccountId" />
+        </div>
+      </div>
+      <div class="p-4 text-sm text-center">
+        <div>{{ `v${globalConfig.appVersion}` }}</div>
+        <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
+          {{
+            $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
+              latestChatwootVersion: latestChatwootVersion,
+            })
+          }}
+        </div>
+        <div class="build-id">
+          <div>{{ `Build ${globalConfig.gitSha}` }}</div>
+        </div>
+      </div>
+
+      <woot-submit-button
+        class="button nice success button--fixed-top"
+        :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
+        :loading="isUpdating"
+      />
+    </form>
+
+    <woot-loading-state v-if="uiFlags.isFetchingItem" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index c8c0eb348..886de661e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -1,49 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('AGENT_BOTS.LIST.LOADING')"
-        />
-        <table v-else-if="agentBots.length" class="woot-table">
-          <tbody>
-            <agent-bot-row
-              v-for="(agentBot, index) in agentBots"
-              :key="agentBot.id"
-              :agent-bot="agentBot"
-              :index="index"
-              @delete="onDeleteAgentBot"
-              @edit="onEditAgentBot"
-            />
-          </tbody>
-        </table>
-        <p v-else class="flex flex-col items-center justify-center h-full">
-          {{ $t('AGENT_BOTS.LIST.404') }}
-        </p>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-    >
-      <router-link :to="newAgentBotsURL" class="white-text">
-        {{ $t('AGENT_BOTS.ADD.TITLE') }}
-      </router-link>
-    </woot-button>
-    <woot-confirm-modal
-      ref="confirmDialog"
-      :title="$t('AGENT_BOTS.DELETE.TITLE')"
-      :description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -89,6 +43,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('AGENT_BOTS.LIST.LOADING')"
+        />
+        <table v-else-if="agentBots.length" class="woot-table">
+          <tbody>
+            <AgentBotRow
+              v-for="(agentBot, index) in agentBots"
+              :key="agentBot.id"
+              :agent-bot="agentBot"
+              :index="index"
+              @delete="onDeleteAgentBot"
+              @edit="onEditAgentBot"
+            />
+          </tbody>
+        </table>
+        <p v-else class="flex flex-col items-center justify-center h-full">
+          {{ $t('AGENT_BOTS.LIST.404') }}
+        </p>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+    >
+      <router-link :to="newAgentBotsURL" class="white-text">
+        {{ $t('AGENT_BOTS.ADD.TITLE') }}
+      </router-link>
+    </woot-button>
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="$t('AGENT_BOTS.DELETE.TITLE')"
+      :description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
+    />
+  </div>
+</template>
+
 <style scoped>
 .bots-list {
   list-style: none;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
index 0146e7890..98dab9c5d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -1,35 +1,3 @@
-<template>
-  <tr class="space-x-2">
-    <td class="agent-bot--details">
-      <div class="agent-bot--link">
-        {{ agentBot.name }}
-        (<agent-bot-type :bot-type="agentBot.bot_type" />)
-      </div>
-      <div class="agent-bot--description">
-        <show-more :text="agentBot.description" :limit="120" />
-      </div>
-    </td>
-    <td class="flex justify-end gap-1">
-      <woot-button
-        v-if="isACSMLTypeBot"
-        v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        icon="edit"
-        @click="$emit('edit', agentBot)"
-      />
-      <woot-button
-        v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        @click="$emit('delete', agentBot, index)"
-      />
-    </td>
-  </tr>
-</template>
 <script>
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import AgentBotType from './AgentBotType.vue';
@@ -54,6 +22,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <tr class="space-x-2">
+    <td class="agent-bot--details">
+      <div class="agent-bot--link">
+        {{ agentBot.name }}
+        (<AgentBotType :bot-type="agentBot.bot_type" />)
+      </div>
+      <div class="agent-bot--description">
+        <ShowMore :text="agentBot.description" :limit="120" />
+      </div>
+    </td>
+    <td class="flex justify-end gap-1">
+      <woot-button
+        v-if="isACSMLTypeBot"
+        v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        icon="edit"
+        @click="$emit('edit', agentBot)"
+      />
+      <woot-button
+        v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        @click="$emit('delete', agentBot, index)"
+      />
+    </td>
+  </tr>
+</template>
+
 <style scoped lang="scss">
 .agent-bot--link {
   align-items: center;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
index b379786a3..ac3ac90b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
@@ -1,14 +1,3 @@
-<template>
-  <span class="inline-flex items-center gap-1">
-    <img
-      v-tooltip="botTypeConfig[botType].label"
-      class="agent-bot-type--thumbnail"
-      :src="botTypeConfig[botType].thumbnail"
-      :alt="botTypeConfig[botType].label"
-    />
-    <span>{{ botTypeConfig[botType].label }}</span>
-  </span>
-</template>
 <script>
 export default {
   props: {
@@ -33,6 +22,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span class="inline-flex items-center gap-1">
+    <img
+      v-tooltip="botTypeConfig[botType].label"
+      class="agent-bot-type--thumbnail"
+      :src="botTypeConfig[botType].thumbnail"
+      :alt="botTypeConfig[botType].label"
+    />
+    <span>{{ botTypeConfig[botType].label }}</span>
+  </span>
+</template>
+
 <style scoped>
 .agent-bot-type--thumbnail {
   width: auto;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
index b145f0c6f..9d71657f5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -1,54 +1,3 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <div class="flex flex-row">
-      <div class="w-[68%]">
-        <div class="h-[calc(100vh-56px)] relative">
-          <csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
-          <div
-            v-if="v$.bot.csmlContent.$error"
-            class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
-          >
-            <span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="w-[32%] overflow-auto p-4 h-[calc(100vh-56px)]">
-        <form
-          class="flex flex-col justify-between h-full"
-          @submit.prevent="onSubmit"
-        >
-          <div>
-            <label :class="{ error: v$.bot.name.$error }">
-              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
-              <input
-                v-model="bot.name"
-                type="text"
-                :placeholder="$t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.PLACEHOLDER')"
-              />
-              <span v-if="v$.bot.name.$error" class="message">
-                {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
-              </span>
-            </label>
-            <label>
-              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.LABEL') }}
-              <textarea
-                v-model="bot.description"
-                rows="4"
-                :placeholder="
-                  $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.PLACEHOLDER')
-                "
-              />
-            </label>
-            <woot-button>
-              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT') }}
-            </woot-button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
@@ -94,3 +43,54 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-auto overflow-auto flex flex-col">
+    <div class="flex flex-row">
+      <div class="w-[68%]">
+        <div class="h-[calc(100vh-56px)] relative">
+          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
+          <div
+            v-if="v$.bot.csmlContent.$error"
+            class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
+          >
+            <span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="w-[32%] overflow-auto p-4 h-[calc(100vh-56px)]">
+        <form
+          class="flex flex-col justify-between h-full"
+          @submit.prevent="onSubmit"
+        >
+          <div>
+            <label :class="{ error: v$.bot.name.$error }">
+              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
+              <input
+                v-model="bot.name"
+                type="text"
+                :placeholder="$t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.PLACEHOLDER')"
+              />
+              <span v-if="v$.bot.name.$error" class="message">
+                {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
+              </span>
+            </label>
+            <label>
+              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.LABEL') }}
+              <textarea
+                v-model="bot.description"
+                rows="4"
+                :placeholder="
+                  $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.PLACEHOLDER')
+                "
+              />
+            </label>
+            <woot-button>
+              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT') }}
+            </woot-button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
index e30360647..80987bead 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="csml-editor--container">
-    <loading-state
-      v-if="iframeLoading"
-      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
-      class="dashboard-app_loading-container"
-    />
-    <iframe
-      id="csml-editor--frame"
-      :src="globalConfig.csmlEditorHost"
-      @load="onEditorLoad"
-    />
-  </div>
-</template>
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
@@ -60,6 +46,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="csml-editor--container">
+    <LoadingState
+      v-if="iframeLoading"
+      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
+      class="dashboard-app_loading-container"
+    />
+    <iframe
+      id="csml-editor--frame"
+      :src="globalConfig.csmlEditorHost"
+      @load="onEditorLoad"
+    />
+  </div>
+</template>
+
 <style scoped>
 #csml-editor--frame {
   border: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
index 1b59a5ace..3c909fdba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -1,23 +1,11 @@
-<template>
-  <csml-bot-editor
-    v-if="agentBot.id"
-    :agent-bot="agentBot"
-    @submit="updateBot"
-  />
-  <div v-else class="flex flex-col h-auto overflow-auto no-padding">
-    <spinner />
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import Spinner from 'shared/components/Spinner.vue';
 import CsmlBotEditor from '../components/CSMLBotEditor.vue';
 
-import { mapGetters } from 'vuex';
 export default {
   components: { Spinner, CsmlBotEditor },
   computed: {
-    ...mapGetters({ uiFlags: 'agentBots/uiFlags' }),
     agentBot() {
       return this.$store.getters['agentBots/getBot'](this.$route.params.botId);
     },
@@ -43,3 +31,10 @@ export default {
   },
 };
 </script>
+
+<template>
+  <CsmlBotEditor v-if="agentBot.id" :agent-bot="agentBot" @submit="updateBot" />
+  <div v-else class="flex flex-col h-auto overflow-auto no-padding">
+    <Spinner />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
index 35a64a199..10868e58c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
@@ -1,7 +1,3 @@
-<template>
-  <csml-bot-editor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -39,3 +35,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <CsmlBotEditor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
index 77368cd1b..74720e28a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -1,71 +1,3 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('AGENT_MGMT.ADD.TITLE')"
-        :header-content="$t('AGENT_MGMT.ADD.DESC')"
-      />
-
-      <form
-        class="flex flex-col items-start w-full"
-        @submit.prevent="addAgent()"
-      >
-        <div class="w-full">
-          <label :class="{ error: v$.agentName.$error }">
-            {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="agentName"
-              type="text"
-              :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-              @input="v$.agentName.$touch"
-            />
-          </label>
-        </div>
-        <div class="w-full">
-          <label :class="{ error: v$.agentType.$error }">
-            {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
-            <select v-model="agentType">
-              <option v-for="role in roles" :key="role.name" :value="role.name">
-                {{ role.label }}
-              </option>
-            </select>
-            <span v-if="v$.agentType.$error" class="message">
-              {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-full">
-          <label :class="{ error: v$.agentEmail.$error }">
-            {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
-            <input
-              v-model.trim="agentEmail"
-              type="text"
-              :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
-              @input="v$.agentEmail.$touch"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                v$.agentEmail.$invalid ||
-                v$.agentName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
@@ -154,3 +86,71 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('AGENT_MGMT.ADD.TITLE')"
+        :header-content="$t('AGENT_MGMT.ADD.DESC')"
+      />
+
+      <form
+        class="flex flex-col items-start w-full"
+        @submit.prevent="addAgent()"
+      >
+        <div class="w-full">
+          <label :class="{ error: v$.agentName.$error }">
+            {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="agentName"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+              @input="v$.agentName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full">
+          <label :class="{ error: v$.agentType.$error }">
+            {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
+            <select v-model="agentType">
+              <option v-for="role in roles" :key="role.name" :value="role.name">
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="v$.agentType.$error" class="message">
+              {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="w-full">
+          <label :class="{ error: v$.agentEmail.$error }">
+            {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
+            <input
+              v-model.trim="agentEmail"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
+              @input="v$.agentEmail.$touch"
+            />
+          </label>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                v$.agentEmail.$invalid ||
+                v$.agentName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+            />
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index 3c927b74c..4385723b6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -1,81 +1,3 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="pageTitle" />
-      <form class="w-full" @submit.prevent="editAgent()">
-        <div class="w-full">
-          <label :class="{ error: v$.agentName.$error }">
-            {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="agentName"
-              type="text"
-              :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
-              @input="v$.agentName.$touch"
-            />
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.agentType.$error }">
-            {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
-            <select v-model="agentType">
-              <option v-for="role in roles" :key="role.name" :value="role.name">
-                {{ role.label }}
-              </option>
-            </select>
-            <span v-if="v$.agentType.$error" class="message">
-              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
-            </span>
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.agentAvailability.$error }">
-            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
-            <select v-model="agentAvailability">
-              <option
-                v-for="role in availabilityStatuses"
-                :key="role.value"
-                :value="role.value"
-              >
-                {{ role.label }}
-              </option>
-            </select>
-            <span v-if="v$.agentAvailability.$error" class="message">
-              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-[50%]">
-            <woot-submit-button
-              :disabled="
-                v$.agentType.$invalid ||
-                v$.agentName.$invalid ||
-                uiFlags.isUpdating
-              "
-              :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
-              :loading="uiFlags.isUpdating"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-          <div class="w-[50%] text-right">
-            <woot-button
-              icon="lock-closed"
-              variant="clear"
-              @click.prevent="resetPassword"
-            >
-              {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
-            </woot-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -201,3 +123,81 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="pageTitle" />
+      <form class="w-full" @submit.prevent="editAgent()">
+        <div class="w-full">
+          <label :class="{ error: v$.agentName.$error }">
+            {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="agentName"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
+              @input="v$.agentName.$touch"
+            />
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.agentType.$error }">
+            {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
+            <select v-model="agentType">
+              <option v-for="role in roles" :key="role.name" :value="role.name">
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="v$.agentType.$error" class="message">
+              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
+            </span>
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.agentAvailability.$error }">
+            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
+            <select v-model="agentAvailability">
+              <option
+                v-for="role in availabilityStatuses"
+                :key="role.value"
+                :value="role.value"
+              >
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="v$.agentAvailability.$error" class="message">
+              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <div class="w-[50%]">
+            <WootSubmitButton
+              :disabled="
+                v$.agentType.$invalid ||
+                v$.agentName.$invalid ||
+                uiFlags.isUpdating
+              "
+              :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
+              :loading="uiFlags.isUpdating"
+            />
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
+            </button>
+          </div>
+          <div class="w-[50%] text-right">
+            <woot-button
+              icon="lock-closed"
+              variant="clear"
+              @click.prevent="resetPassword"
+            >
+              {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
+            </woot-button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </Modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 6a2577282..21000a6fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -1,129 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <!-- List Agents -->
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('AGENT_MGMT.LOADING')"
-        />
-        <div v-else>
-          <p v-if="!agentList.length">
-            {{ $t('AGENT_MGMT.LIST.404') }}
-          </p>
-          <table v-else class="woot-table">
-            <tbody>
-              <tr v-for="(agent, index) in agentList" :key="agent.email">
-                <!-- Gravtar Image -->
-                <td>
-                  <thumbnail
-                    :src="agent.thumbnail"
-                    :username="agent.name"
-                    size="40px"
-                    :status="agent.availability_status"
-                  />
-                </td>
-                <!-- Agent Name + Email -->
-                <td>
-                  <span class="agent-name">
-                    {{ agent.name }}
-                  </span>
-                  <span>{{ agent.email }}</span>
-                </td>
-                <!-- Agent Role + Verification Status -->
-                <td>
-                  <span class="agent-name">
-                    {{
-                      $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`)
-                    }}
-                  </span>
-                  <span v-if="agent.confirmed">
-                    {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
-                  </span>
-                  <span v-if="!agent.confirmed">
-                    {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
-                  </span>
-                </td>
-                <!-- Actions -->
-                <td>
-                  <div class="button-wrapper">
-                    <woot-button
-                      v-if="showEditAction(agent)"
-                      v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
-                      variant="smooth"
-                      size="tiny"
-                      color-scheme="secondary"
-                      icon="edit"
-                      class-names="grey-btn"
-                      @click="openEditPopup(agent)"
-                    />
-                    <woot-button
-                      v-if="showDeleteAction(agent)"
-                      v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
-                      variant="smooth"
-                      color-scheme="alert"
-                      size="tiny"
-                      icon="dismiss-circle"
-                      class-names="grey-btn"
-                      :is-loading="loading[agent.id]"
-                      @click="openDeletePopup(agent, index)"
-                    />
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('AGENT_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <!-- Add Agent -->
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-agent :on-close="hideAddPopup" />
-    </woot-modal>
-    <!-- Edit Agent -->
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-agent
-        v-if="showEditPopup"
-        :id="currentAgent.id"
-        :name="currentAgent.name"
-        :type="currentAgent.role"
-        :email="currentAgent.email"
-        :availability="currentAgent.availability_status"
-        :on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <!-- Delete Agent -->
-    <woot-delete-modal
-      :show.sync="showDeletePopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('AGENT_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -248,3 +122,130 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+
+    <!-- List Agents -->
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('AGENT_MGMT.LOADING')"
+        />
+        <div v-else>
+          <p v-if="!agentList.length">
+            {{ $t('AGENT_MGMT.LIST.404') }}
+          </p>
+          <table v-else class="woot-table">
+            <tbody>
+              <tr v-for="(agent, index) in agentList" :key="agent.email">
+                <!-- Gravtar Image -->
+                <td>
+                  <Thumbnail
+                    :src="agent.thumbnail"
+                    :username="agent.name"
+                    size="40px"
+                    :status="agent.availability_status"
+                  />
+                </td>
+                <!-- Agent Name + Email -->
+                <td>
+                  <span class="agent-name">
+                    {{ agent.name }}
+                  </span>
+                  <span>{{ agent.email }}</span>
+                </td>
+                <!-- Agent Role + Verification Status -->
+                <td>
+                  <span class="agent-name">
+                    {{
+                      $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`)
+                    }}
+                  </span>
+                  <span v-if="agent.confirmed">
+                    {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
+                  </span>
+                  <span v-if="!agent.confirmed">
+                    {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
+                  </span>
+                </td>
+                <!-- Actions -->
+                <td>
+                  <div class="button-wrapper">
+                    <woot-button
+                      v-if="showEditAction(agent)"
+                      v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
+                      variant="smooth"
+                      size="tiny"
+                      color-scheme="secondary"
+                      icon="edit"
+                      class-names="grey-btn"
+                      @click="openEditPopup(agent)"
+                    />
+                    <woot-button
+                      v-if="showDeleteAction(agent)"
+                      v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
+                      variant="smooth"
+                      color-scheme="alert"
+                      size="tiny"
+                      icon="dismiss-circle"
+                      class-names="grey-btn"
+                      :is-loading="loading[agent.id]"
+                      @click="openDeletePopup(agent, index)"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('AGENT_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+    <!-- Add Agent -->
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddAgent :on-close="hideAddPopup" />
+    </woot-modal>
+    <!-- Edit Agent -->
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditAgent
+        v-if="showEditPopup"
+        :id="currentAgent.id"
+        :name="currentAgent.name"
+        :type="currentAgent.role"
+        :email="currentAgent.email"
+        :availability="currentAgent.availability_status"
+        :on-close="hideEditPopup"
+      />
+    </woot-modal>
+    <!-- Delete Agent -->
+    <woot-delete-modal
+      :show.sync="showDeletePopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('AGENT_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index a4a489259..1ff257b7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -1,130 +1,3 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
-
-      <form class="flex w-full" @submit.prevent="addAttributes">
-        <div class="w-full">
-          <label :class="{ error: v$.attributeModel.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
-            <select v-model="attributeModel">
-              <option v-for="model in models" :key="model.id" :value="model.id">
-                {{ model.option }}
-              </option>
-            </select>
-            <span v-if="v$.attributeModel.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
-            </span>
-          </label>
-          <woot-input
-            v-model="displayName"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
-            type="text"
-            :class="{ error: v$.displayName.$error }"
-            :error="
-              v$.displayName.$error
-                ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
-                : ''
-            "
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-            @input="onDisplayNameChange"
-            @blur="v$.displayName.$touch"
-          />
-          <woot-input
-            v-model="attributeKey"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
-            type="text"
-            :class="{ error: v$.attributeKey.$error }"
-            :error="v$.attributeKey.$error ? keyErrorMessage : ''"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-            @blur="v$.attributeKey.$touch"
-          />
-          <label :class="{ error: v$.description.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
-            <textarea
-              v-model="description"
-              rows="3"
-              type="text"
-              :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
-              @blur="v$.description.$touch"
-            />
-            <span v-if="v$.description.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
-            </span>
-          </label>
-          <label :class="{ error: v$.attributeType.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
-            <select v-model="attributeType">
-              <option v-for="type in types" :key="type.id" :value="type.id">
-                {{ type.option }}
-              </option>
-            </select>
-            <span v-if="v$.attributeType.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
-            </span>
-          </label>
-          <div v-if="isAttributeTypeList" class="multiselect--wrap">
-            <label>
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
-            </label>
-            <multiselect
-              ref="tagInput"
-              v-model="values"
-              :placeholder="
-                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
-              "
-              label="name"
-              track-by="name"
-              :class="{ invalid: isMultiselectInvalid }"
-              :options="options"
-              :multiple="true"
-              :taggable="true"
-              @close="onTouch"
-              @tag="addTagValue"
-            />
-            <label v-show="isMultiselectInvalid" class="error-message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
-            </label>
-          </div>
-          <div v-if="isAttributeTypeText">
-            <input
-              v-model="regexEnabled"
-              type="checkbox"
-              @input="toggleRegexEnabled"
-            />
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
-          </div>
-          <woot-input
-            v-if="isAttributeTypeText && isRegexEnabled"
-            v-model="regexPattern"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
-            type="text"
-            :placeholder="
-              $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
-            "
-          />
-          <woot-input
-            v-if="isAttributeTypeText && isRegexEnabled"
-            v-model="regexCue"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
-            type="text"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
-          />
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-submit-button
-              :disabled="isButtonDisabled"
-              :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -274,6 +147,134 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
+
+      <form class="flex w-full" @submit.prevent="addAttributes">
+        <div class="w-full">
+          <label :class="{ error: v$.attributeModel.$error }">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
+            <select v-model="attributeModel">
+              <option v-for="model in models" :key="model.id" :value="model.id">
+                {{ model.option }}
+              </option>
+            </select>
+            <span v-if="v$.attributeModel.$error" class="message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
+            </span>
+          </label>
+          <woot-input
+            v-model="displayName"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
+            type="text"
+            :class="{ error: v$.displayName.$error }"
+            :error="
+              v$.displayName.$error
+                ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
+                : ''
+            "
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+            @input="onDisplayNameChange"
+            @blur="v$.displayName.$touch"
+          />
+          <woot-input
+            v-model="attributeKey"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
+            type="text"
+            :class="{ error: v$.attributeKey.$error }"
+            :error="v$.attributeKey.$error ? keyErrorMessage : ''"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
+            @blur="v$.attributeKey.$touch"
+          />
+          <label :class="{ error: v$.description.$error }">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
+            <textarea
+              v-model="description"
+              rows="3"
+              type="text"
+              :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
+              @blur="v$.description.$touch"
+            />
+            <span v-if="v$.description.$error" class="message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
+            </span>
+          </label>
+          <label :class="{ error: v$.attributeType.$error }">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
+            <select v-model="attributeType">
+              <option v-for="type in types" :key="type.id" :value="type.id">
+                {{ type.option }}
+              </option>
+            </select>
+            <span v-if="v$.attributeType.$error" class="message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
+            </span>
+          </label>
+          <div v-if="isAttributeTypeList" class="multiselect--wrap">
+            <label>
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
+            </label>
+            <multiselect
+              ref="tagInput"
+              v-model="values"
+              :placeholder="
+                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
+              "
+              label="name"
+              track-by="name"
+              :class="{ invalid: isMultiselectInvalid }"
+              :options="options"
+              multiple
+              taggable
+              @close="onTouch"
+              @tag="addTagValue"
+            />
+            <label v-show="isMultiselectInvalid" class="error-message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
+            </label>
+          </div>
+          <div v-if="isAttributeTypeText">
+            <input
+              v-model="regexEnabled"
+              type="checkbox"
+              @input="toggleRegexEnabled"
+            />
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+          </div>
+          <woot-input
+            v-if="isAttributeTypeText && isRegexEnabled"
+            v-model="regexPattern"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
+            type="text"
+            :placeholder="
+              $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
+            "
+          />
+          <woot-input
+            v-if="isAttributeTypeText && isRegexEnabled"
+            v-model="regexCue"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
+            type="text"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
+          />
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-submit-button
+              :disabled="isButtonDisabled"
+              :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
+            />
+            <button class="button clear" @click.prevent="onClose">
+              {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
+
 <style lang="scss" scoped>
 .key-value {
   padding: 0 var(--space-small) var(--space-small) 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 179c06d54..5c234ec03 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -1,111 +1,3 @@
-<template>
-  <div class="flex flex-row gap-4 p-8">
-    <div class="w-full lg:w-3/5">
-      <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-        <woot-tabs-item
-          v-for="tab in tabs"
-          :key="tab.key"
-          :name="tab.name"
-          :show-badge="false"
-        />
-      </woot-tabs>
-
-      <div class="w-full">
-        <p
-          v-if="!uiFlags.isFetching && !attributes.length"
-          class="flex items-center justify-center mt-12"
-        >
-          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('ATTRIBUTES_MGMT.LOADING')"
-        />
-        <table
-          v-if="!uiFlags.isFetching && attributes.length"
-          class="w-full mt-2 table-fixed woot-table"
-        >
-          <thead>
-            <th
-              v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
-              :key="tableHeader"
-              class="pl-0 max-w-[6.25rem] min-w-[5rem]"
-            >
-              {{ tableHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="attribute in attributes" :key="attribute.attribute_key">
-              <td
-                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_display_name }}
-              </td>
-              <td
-                class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_description }}
-              </td>
-              <td
-                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_display_type }}
-              </td>
-              <td
-                class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_key }}
-              </td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  icon="edit"
-                  @click="openEditPopup(attribute)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  @click="openDelete(attribute)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div class="hidden w-1/3 lg:block">
-      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
-    </div>
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-attribute
-        :selected-attribute="selectedAttribute"
-        :is-updating="uiFlags.isUpdating"
-        @on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-confirm-delete-modal
-      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
-      :title="confirmDeleteTitle"
-      :message="$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.MESSAGE')"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-      :confirm-value="selectedAttribute.attribute_display_name"
-      :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -212,6 +104,114 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-row gap-4 p-8">
+    <div class="w-full lg:w-3/5">
+      <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+
+      <div class="w-full">
+        <p
+          v-if="!uiFlags.isFetching && !attributes.length"
+          class="flex items-center justify-center mt-12"
+        >
+          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('ATTRIBUTES_MGMT.LOADING')"
+        />
+        <table
+          v-if="!uiFlags.isFetching && attributes.length"
+          class="w-full mt-2 table-fixed woot-table"
+        >
+          <thead>
+            <th
+              v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
+              :key="tableHeader"
+              class="pl-0 max-w-[6.25rem] min-w-[5rem]"
+            >
+              {{ tableHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="attribute in attributes" :key="attribute.attribute_key">
+              <td
+                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_display_name }}
+              </td>
+              <td
+                class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_description }}
+              </td>
+              <td
+                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_display_type }}
+              </td>
+              <td
+                class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_key }}
+              </td>
+              <td class="button-wrapper">
+                <woot-button
+                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  icon="edit"
+                  @click="openEditPopup(attribute)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  icon="dismiss-circle"
+                  class-names="grey-btn"
+                  @click="openDelete(attribute)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="hidden w-1/3 lg:block">
+      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
+    </div>
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditAttribute
+        :selected-attribute="selectedAttribute"
+        :is-updating="uiFlags.isUpdating"
+        @onClose="hideEditPopup"
+      />
+    </woot-modal>
+    <woot-confirm-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :title="confirmDeleteTitle"
+      :message="$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+      :confirm-value="selectedAttribute.attribute_display_name"
+      :confirm-place-holder-text="confirmPlaceHolderText"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .attribute-key {
   font-family: monospace;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index ad1b1ea69..0d237d866 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -1,3 +1,169 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength } from '@vuelidate/validators';
+import { ATTRIBUTE_TYPES } from './constants';
+import customAttributeMixin from '../../../../mixins/customAttributeMixin';
+export default {
+  components: {},
+  mixins: [customAttributeMixin],
+  props: {
+    selectedAttribute: {
+      type: Object,
+      default: () => {},
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      displayName: '',
+      description: '',
+      attributeType: 0,
+      regexPattern: null,
+      regexCue: null,
+      regexEnabled: false,
+      types: ATTRIBUTE_TYPES,
+      show: true,
+      attributeKey: '',
+      values: [],
+      options: [],
+      isTouched: true,
+    };
+  },
+  validations: {
+    displayName: {
+      required,
+    },
+    attributeType: {
+      required,
+    },
+    description: {
+      required,
+      minLength: minLength(1),
+    },
+    attributeKey: {
+      required,
+      isKey(value) {
+        return !(value.indexOf(' ') >= 0);
+      },
+    },
+  },
+  computed: {
+    setAttributeListValue() {
+      return this.selectedAttribute.attribute_values.map(values => ({
+        name: values,
+      }));
+    },
+    updatedAttributeListValues() {
+      return this.values.map(item => item.name);
+    },
+    isButtonDisabled() {
+      return this.v$.description.$invalid || this.isMultiselectInvalid;
+    },
+    isMultiselectInvalid() {
+      return (
+        this.isAttributeTypeList && this.isTouched && this.values.length === 0
+      );
+    },
+
+    pageTitle() {
+      return `${this.$t('ATTRIBUTES_MGMT.EDIT.TITLE')} - ${
+        this.selectedAttribute.attribute_display_name
+      }`;
+    },
+    selectedAttributeType() {
+      return this.types.find(
+        item =>
+          item.option.toLowerCase() ===
+          this.selectedAttribute.attribute_display_type
+      ).id;
+    },
+    keyErrorMessage() {
+      if (!this.v$.attributeKey.isKey) {
+        return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
+      }
+      return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
+    },
+    isAttributeTypeList() {
+      return this.attributeType === 6;
+    },
+    isAttributeTypeText() {
+      return this.attributeType === 0;
+    },
+    isRegexEnabled() {
+      return this.regexEnabled;
+    },
+  },
+  mounted() {
+    this.setFormValues();
+  },
+  methods: {
+    onClose() {
+      this.$emit('onClose');
+    },
+    addTagValue(tagValue) {
+      const tag = {
+        name: tagValue,
+      };
+      this.values.push(tag);
+      this.$refs.tagInput.$el.focus();
+    },
+    setFormValues() {
+      const regexPattern = this.selectedAttribute.regex_pattern
+        ? this.getRegexp(this.selectedAttribute.regex_pattern).source
+        : null;
+      this.displayName = this.selectedAttribute.attribute_display_name;
+      this.description = this.selectedAttribute.attribute_description;
+      this.attributeType = this.selectedAttributeType;
+      this.attributeKey = this.selectedAttribute.attribute_key;
+      this.regexPattern = regexPattern;
+      this.regexCue = this.selectedAttribute.regex_cue;
+      this.regexEnabled = regexPattern != null;
+      this.values = this.setAttributeListValue;
+    },
+    async editAttributes() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      if (!this.regexEnabled) {
+        this.regexPattern = null;
+        this.regexCue = null;
+      }
+      try {
+        await this.$store.dispatch('attributes/update', {
+          id: this.selectedAttribute.id,
+          attribute_description: this.description,
+          attribute_display_name: this.displayName,
+          attribute_values: this.updatedAttributeListValues,
+          regex_pattern: this.regexPattern
+            ? new RegExp(this.regexPattern).toString()
+            : null,
+          regex_cue: this.regexCue,
+        });
+        this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
+        this.onClose();
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage || this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
+      } finally {
+        useAlert(this.alertMessage);
+      }
+    },
+    toggleRegexEnabled() {
+      this.regexEnabled = !this.regexEnabled;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col h-auto overflow-auto">
     <woot-modal-header :header-title="pageTitle" />
@@ -62,8 +228,8 @@
             track-by="name"
             :class="{ invalid: isMultiselectInvalid }"
             :options="options"
-            :multiple="true"
-            :taggable="true"
+            multiple
+            taggable
             @tag="addTagValue"
           />
           <label v-show="isMultiselectInvalid" class="error-message">
@@ -107,175 +273,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required, minLength } from '@vuelidate/validators';
-import { ATTRIBUTE_TYPES } from './constants';
-import customAttributeMixin from '../../../../mixins/customAttributeMixin';
-export default {
-  components: {},
-  mixins: [customAttributeMixin],
-  props: {
-    selectedAttribute: {
-      type: Object,
-      default: () => {},
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      displayName: '',
-      description: '',
-      attributeType: 0,
-      regexPattern: null,
-      regexCue: null,
-      regexEnabled: false,
-      types: ATTRIBUTE_TYPES,
-      show: true,
-      attributeKey: '',
-      values: [],
-      options: [],
-      isTouched: true,
-    };
-  },
-  validations: {
-    displayName: {
-      required,
-    },
-    attributeType: {
-      required,
-    },
-    description: {
-      required,
-      minLength: minLength(1),
-    },
-    attributeKey: {
-      required,
-      isKey(value) {
-        return !(value.indexOf(' ') >= 0);
-      },
-    },
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'attributes/getUIFlags',
-    }),
-    setAttributeListValue() {
-      return this.selectedAttribute.attribute_values.map(values => ({
-        name: values,
-      }));
-    },
-    updatedAttributeListValues() {
-      return this.values.map(item => item.name);
-    },
-    isButtonDisabled() {
-      return this.v$.description.$invalid || this.isMultiselectInvalid;
-    },
-    isMultiselectInvalid() {
-      return (
-        this.isAttributeTypeList && this.isTouched && this.values.length === 0
-      );
-    },
-
-    pageTitle() {
-      return `${this.$t('ATTRIBUTES_MGMT.EDIT.TITLE')} - ${
-        this.selectedAttribute.attribute_display_name
-      }`;
-    },
-    selectedAttributeType() {
-      return this.types.find(
-        item =>
-          item.option.toLowerCase() ===
-          this.selectedAttribute.attribute_display_type
-      ).id;
-    },
-    keyErrorMessage() {
-      if (!this.v$.attributeKey.isKey) {
-        return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
-      }
-      return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
-    },
-    isAttributeTypeList() {
-      return this.attributeType === 6;
-    },
-    isAttributeTypeText() {
-      return this.attributeType === 0;
-    },
-    isRegexEnabled() {
-      return this.regexEnabled;
-    },
-  },
-  mounted() {
-    this.setFormValues();
-  },
-  methods: {
-    onClose() {
-      this.$emit('on-close');
-    },
-    addTagValue(tagValue) {
-      const tag = {
-        name: tagValue,
-      };
-      this.values.push(tag);
-      this.$refs.tagInput.$el.focus();
-    },
-    setFormValues() {
-      const regexPattern = this.selectedAttribute.regex_pattern
-        ? this.getRegexp(this.selectedAttribute.regex_pattern).source
-        : null;
-      this.displayName = this.selectedAttribute.attribute_display_name;
-      this.description = this.selectedAttribute.attribute_description;
-      this.attributeType = this.selectedAttributeType;
-      this.attributeKey = this.selectedAttribute.attribute_key;
-      this.regexPattern = regexPattern;
-      this.regexCue = this.selectedAttribute.regex_cue;
-      this.regexEnabled = regexPattern != null;
-      this.values = this.setAttributeListValue;
-    },
-    async editAttributes() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      if (!this.regexEnabled) {
-        this.regexPattern = null;
-        this.regexCue = null;
-      }
-      try {
-        await this.$store.dispatch('attributes/update', {
-          id: this.selectedAttribute.id,
-          attribute_description: this.description,
-          attribute_display_name: this.displayName,
-          attribute_values: this.updatedAttributeListValues,
-          regex_pattern: this.regexPattern
-            ? new RegExp(this.regexPattern).toString()
-            : null,
-          regex_cue: this.regexCue,
-        });
-        this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
-        this.onClose();
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage || this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    toggleRegexEnabled() {
-      this.regexEnabled = !this.regexEnabled;
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .key-value {
   padding: 0 var(--space-small) var(--space-small) 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 1e6a56bcb..e7670caef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-    <custom-attribute />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-attribute :on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
@@ -39,4 +22,19 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <div class="flex-1 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+    <CustomAttribute />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddAttribute :on-close="hideAddPopup" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index ad75c7188..c6df5a87a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -1,67 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between flex-1 p-4 overflow-auto">
-    <!-- List Audit Logs -->
-    <div>
-      <div>
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('AUDIT_LOGS.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('AUDIT_LOGS.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="w-full woot-table"
-        >
-          <colgroup>
-            <col class="w-3/5" />
-            <col />
-            <col />
-          </colgroup>
-          <thead>
-            <!-- Header -->
-            <th
-              v-for="thHeader in $t('AUDIT_LOGS.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="break-all whitespace-nowrap">
-                {{ generateLogText(auditLogItem) }}
-              </td>
-              <td class="break-all whitespace-nowrap">
-                {{
-                  messageTimestamp(
-                    auditLogItem.created_at,
-                    'MMM dd, yyyy hh:mm a'
-                  )
-                }}
-              </td>
-              <td class="w-[8.75rem]">
-                {{ auditLogItem.remote_address }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <table-footer
-      :current-page="Number(meta.currentPage)"
-      :total-count="meta.totalEntries"
-      :page-size="meta.perPage"
-      class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -134,3 +70,68 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col justify-between flex-1 p-4 overflow-auto">
+    <!-- List Audit Logs -->
+    <div>
+      <div>
+        <p
+          v-if="!uiFlags.fetchingList && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('AUDIT_LOGS.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.fetchingList"
+          :message="$t('AUDIT_LOGS.LOADING')"
+        />
+
+        <table
+          v-if="!uiFlags.fetchingList && records.length"
+          class="w-full woot-table"
+        >
+          <colgroup>
+            <col class="w-3/5" />
+            <col />
+            <col />
+          </colgroup>
+          <thead>
+            <!-- Header -->
+            <th
+              v-for="thHeader in $t('AUDIT_LOGS.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="auditLogItem in records" :key="auditLogItem.id">
+              <td class="break-all whitespace-nowrap">
+                {{ generateLogText(auditLogItem) }}
+              </td>
+              <td class="break-all whitespace-nowrap">
+                {{
+                  messageTimestamp(
+                    auditLogItem.created_at,
+                    'MMM dd, yyyy hh:mm a'
+                  )
+                }}
+              </td>
+              <td class="w-[8.75rem]">
+                {{ auditLogItem.remote_address }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <TableFooter
+      :current-page="Number(meta.currentPage)"
+      :total-count="meta.totalEntries"
+      :page-size="meta.perPage"
+      class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
+      @pageChange="onPageChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 06049a178..8cb143a7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,161 +1,8 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
-    <div class="flex flex-col modal-content">
-      <div class="w-full">
-        <woot-input
-          v-model="automation.name"
-          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: errors.name }"
-          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
-          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-        />
-        <woot-input
-          v-model="automation.description"
-          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
-          type="text"
-          :class="{ error: errors.description }"
-          :error="
-            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
-          "
-          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-        />
-        <div class="mb-6">
-          <label :class="{ error: errors.event_name }">
-            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select
-              v-model="automation.event_name"
-              class="m-0"
-              @change="onEventChange()"
-            >
-              <option
-                v-for="event in automationRuleEvents"
-                :key="event.key"
-                :value="event.key"
-              >
-                {{ event.value }}
-              </option>
-            </select>
-            <span v-if="errors.event_name" class="message">
-              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
-            </span>
-          </label>
-          <p
-            v-if="hasAutomationMutated"
-            class="text-xs text-green-500 dark:text-green-500 text-right"
-          >
-            {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
-          </p>
-        </div>
-        <!-- // Conditions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
-          >
-            <filter-input-box
-              v-for="(condition, i) in automation.conditions"
-              :key="i"
-              v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
-              :dropdown-values="
-                getConditionDropdownValues(
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :show-query-operator="i !== automation.conditions.length - 1"
-              :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
-              "
-              :error-message="
-                errors[`condition_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
-                  : ''
-              "
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewCondition"
-              >
-                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Conditions End -->
-        <!-- // Actions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
-          >
-            <automation-action-input
-              v-for="(action, i) in automation.actions"
-              :key="i"
-              v-model="automation.actions[i]"
-              :action-types="automationActionTypes"
-              :dropdown-values="
-                getActionDropdownValues(automation.actions[i].action_name)
-              "
-              :show-action-input="
-                showActionInput(automation.actions[i].action_name)
-              "
-              :error-message="
-                errors[`action_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
-                  : ''
-              "
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewAction"
-              >
-                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Actions End -->
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
-            <woot-button @click="submitAutomation">
-              {{ $t('AUTOMATION.ADD.SUBMIT') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-// import { useVuelidate } from '@vuelidate/core';
+import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -164,8 +11,8 @@ import {
 } from './constants';
 export default {
   components: {
-    filterInputBox,
-    automationActionInput,
+    FilterInputBox,
+    AutomationActionInput,
   },
   mixins: [automationMethodsMixin],
   props: {
@@ -244,3 +91,155 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
+    <div class="flex flex-col modal-content">
+      <div class="w-full">
+        <woot-input
+          v-model="automation.name"
+          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
+          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
+        />
+        <woot-input
+          v-model="automation.description"
+          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
+          type="text"
+          :class="{ error: errors.description }"
+          :error="
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
+          "
+          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
+        />
+        <div class="mb-6">
+          <label :class="{ error: errors.event_name }">
+            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
+            <select
+              v-model="automation.event_name"
+              class="m-0"
+              @change="onEventChange()"
+            >
+              <option
+                v-for="event in automationRuleEvents"
+                :key="event.key"
+                :value="event.key"
+              >
+                {{ event.value }}
+              </option>
+            </select>
+            <span v-if="errors.event_name" class="message">
+              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
+            </span>
+          </label>
+          <p
+            v-if="hasAutomationMutated"
+            class="text-xs text-right text-green-500 dark:text-green-500"
+          >
+            {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
+          </p>
+        </div>
+        <!-- // Conditions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <FilterInputBox
+              v-for="(condition, i) in automation.conditions"
+              :key="i"
+              v-model="automation.conditions[i]"
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :dropdown-values="
+                getConditionDropdownValues(
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :show-query-operator="i !== automation.conditions.length - 1"
+              :custom-attribute-type="
+                getCustomAttributeType(automation.conditions[i].attribute_key)
+              "
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewCondition"
+              >
+                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Conditions End -->
+        <!-- // Actions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <AutomationActionInput
+              v-for="(action, i) in automation.actions"
+              :key="i"
+              v-model="automation.actions[i]"
+              :action-types="automationActionTypes"
+              :dropdown-values="
+                getActionDropdownValues(automation.actions[i].action_name)
+              "
+              :show-action-input="
+                showActionInput(automation.actions[i].action_name)
+              "
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
+              @resetAction="resetAction(i)"
+              @removeAction="removeAction(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewAction"
+              >
+                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Actions End -->
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
+            </woot-button>
+            <woot-button @click="submitAutomation">
+              {{ $t('AUTOMATION.ADD.SUBMIT') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index c19ef63bd..c11a56fc7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,151 +1,8 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
-    <div class="flex flex-col modal-content">
-      <div v-if="automation" class="w-full">
-        <woot-input
-          v-model="automation.name"
-          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: errors.name }"
-          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
-          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-        />
-        <woot-input
-          v-model="automation.description"
-          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
-          type="text"
-          :class="{ error: errors.description }"
-          :error="
-            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
-          "
-          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-        />
-        <div class="event_wrapper">
-          <label :class="{ error: errors.event_name }">
-            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
-              <option
-                v-for="event in automationRuleEvents"
-                :key="event.key"
-                :value="event.key"
-              >
-                {{ event.value }}
-              </option>
-            </select>
-            <span v-if="errors.event_name" class="message">
-              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <!-- // Conditions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
-          >
-            <filter-input-box
-              v-for="(condition, i) in automation.conditions"
-              :key="i"
-              v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
-              :dropdown-values="
-                getConditionDropdownValues(
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
-              "
-              :show-query-operator="i !== automation.conditions.length - 1"
-              :error-message="
-                errors[`condition_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
-                  : ''
-              "
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewCondition"
-              >
-                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Conditions End -->
-        <!-- // Actions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
-          >
-            <automation-action-input
-              v-for="(action, i) in automation.actions"
-              :key="i"
-              v-model="automation.actions[i]"
-              :action-types="automationActionTypes"
-              :dropdown-values="getActionDropdownValues(action.action_name)"
-              :show-action-input="showActionInput(action.action_name)"
-              :error-message="
-                errors[`action_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
-                  : ''
-              "
-              :initial-file-name="getFileName(action, automation.files)"
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewAction"
-              >
-                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Actions End -->
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button
-              class="button"
-              variant="clear"
-              @click.prevent="onClose"
-            >
-              {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
-            <woot-button @click="submitAutomation">
-              {{ $t('AUTOMATION.EDIT.SUBMIT') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -155,8 +12,8 @@ import {
 
 export default {
   components: {
-    filterInputBox,
-    automationActionInput,
+    FilterInputBox,
+    AutomationActionInput,
   },
   mixins: [automationMethodsMixin],
   props: {
@@ -215,6 +72,150 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
+    <div class="flex flex-col modal-content">
+      <div v-if="automation" class="w-full">
+        <woot-input
+          v-model="automation.name"
+          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
+          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
+        />
+        <woot-input
+          v-model="automation.description"
+          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
+          type="text"
+          :class="{ error: errors.description }"
+          :error="
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
+          "
+          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
+        />
+        <div class="event_wrapper">
+          <label :class="{ error: errors.event_name }">
+            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
+            <select v-model="automation.event_name" @change="onEventChange()">
+              <option
+                v-for="event in automationRuleEvents"
+                :key="event.key"
+                :value="event.key"
+              >
+                {{ event.value }}
+              </option>
+            </select>
+            <span v-if="errors.event_name" class="message">
+              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <!-- // Conditions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <FilterInputBox
+              v-for="(condition, i) in automation.conditions"
+              :key="i"
+              v-model="automation.conditions[i]"
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :dropdown-values="
+                getConditionDropdownValues(
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :custom-attribute-type="
+                getCustomAttributeType(automation.conditions[i].attribute_key)
+              "
+              :show-query-operator="i !== automation.conditions.length - 1"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewCondition"
+              >
+                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Conditions End -->
+        <!-- // Actions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <AutomationActionInput
+              v-for="(action, i) in automation.actions"
+              :key="i"
+              v-model="automation.actions[i]"
+              :action-types="automationActionTypes"
+              :dropdown-values="getActionDropdownValues(action.action_name)"
+              :show-action-input="showActionInput(action.action_name)"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
+              :initial-file-name="getFileName(action, automation.files)"
+              @resetAction="resetAction(i)"
+              @removeAction="removeAction(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewAction"
+              >
+                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Actions End -->
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button
+              class="button"
+              variant="clear"
+              @click.prevent="onClose"
+            >
+              {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
+            </woot-button>
+            <woot-button @click="submitAutomation">
+              {{ $t('AUTOMATION.EDIT.SUBMIT') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .event_wrapper {
   select {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 0958730f2..cbd200f09 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -1,128 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
-    </woot-button>
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!uiFlags.isFetching && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('AUTOMATION.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('AUTOMATION.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t('AUTOMATION.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="(automation, index) in records" :key="index">
-              <td>{{ automation.name }}</td>
-              <td>{{ automation.description }}</td>
-              <td>
-                <woot-switch
-                  :value="automation.active"
-                  @input="toggleAutomation(automation, automation.active)"
-                />
-              </td>
-              <td>{{ readableTime(automation.created_on) }}</td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  :is-loading="loading[automation.id]"
-                  icon="edit"
-                  @click="openEditPopup(automation)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="primary"
-                  class-names="grey-btn"
-                  :is-loading="loading[automation.id]"
-                  icon="copy"
-                  @click="cloneAutomation(automation.id)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[automation.id]"
-                  @click="openDeletePopup(automation, index)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-modal
-      :show.sync="showAddPopup"
-      size="medium"
-      :on-close="hideAddPopup"
-    >
-      <add-automation-rule
-        v-if="showAddPopup"
-        :on-close="hideAddPopup"
-        @saveAutomation="submitAutomation"
-      />
-    </woot-modal>
-
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-
-    <woot-modal
-      :show.sync="showEditPopup"
-      size="medium"
-      :on-close="hideEditPopup"
-    >
-      <edit-automation-rule
-        v-if="showEditPopup"
-        :on-close="hideEditPopup"
-        :selected-response="selectedResponse"
-        @saveAutomation="submitAutomation"
-      />
-    </woot-modal>
-    <woot-confirm-modal
-      ref="confirmDialog"
-      :title="toggleModalTitle"
-      :description="toggleModalDescription"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -282,3 +157,129 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
+    </woot-button>
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!uiFlags.isFetching && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('AUTOMATION.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('AUTOMATION.LOADING')"
+        />
+        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
+          <thead>
+            <th
+              v-for="thHeader in $t('AUTOMATION.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="(automation, index) in records" :key="index">
+              <td>{{ automation.name }}</td>
+              <td>{{ automation.description }}</td>
+              <td>
+                <woot-switch
+                  :value="automation.active"
+                  @input="toggleAutomation(automation, automation.active)"
+                />
+              </td>
+              <td>{{ readableTime(automation.created_on) }}</td>
+              <td class="button-wrapper">
+                <woot-button
+                  v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  :is-loading="loading[automation.id]"
+                  icon="edit"
+                  @click="openEditPopup(automation)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="primary"
+                  class-names="grey-btn"
+                  :is-loading="loading[automation.id]"
+                  icon="copy"
+                  @click="cloneAutomation(automation.id)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  icon="dismiss-circle"
+                  class-names="grey-btn"
+                  :is-loading="loading[automation.id]"
+                  @click="openDeletePopup(automation, index)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-modal
+      :show.sync="showAddPopup"
+      size="medium"
+      :on-close="hideAddPopup"
+    >
+      <AddAutomationRule
+        v-if="showAddPopup"
+        :on-close="hideAddPopup"
+        @saveAutomation="submitAutomation"
+      />
+    </woot-modal>
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+
+    <woot-modal
+      :show.sync="showEditPopup"
+      size="medium"
+      :on-close="hideEditPopup"
+    >
+      <EditAutomationRule
+        v-if="showEditPopup"
+        :on-close="hideEditPopup"
+        :selected-response="selectedResponse"
+        @saveAutomation="submitAutomation"
+      />
+    </woot-modal>
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="toggleModalTitle"
+      :description="toggleModalDescription"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index 24cb2d9da..48273561c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
-    <div v-else-if="!hasABillingPlan">
-      <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
-    </div>
-    <div v-else class="w-full">
-      <div class="current-plan--details">
-        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
-        <div
-          v-dompurify-html="
-            formatMessage(
-              $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
-                plan: planName,
-                quantity: subscribedQuantity,
-              })
-            )
-          "
-        />
-      </div>
-      <billing-item
-        :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
-        :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
-        :button-label="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT')"
-        @click="onClickBillingPortal"
-      />
-      <billing-item
-        :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
-        :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
-        :button-label="$t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT')"
-        button-icon="chat-multiple"
-        @click="onToggleChatWindow"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
@@ -87,6 +50,43 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
+    <woot-loading-state v-if="uiFlags.isFetchingItem" />
+    <div v-else-if="!hasABillingPlan">
+      <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
+    </div>
+    <div v-else class="w-full">
+      <div class="current-plan--details">
+        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
+        <div
+          v-dompurify-html="
+            formatMessage(
+              $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
+                plan: planName,
+                quantity: subscribedQuantity,
+              })
+            )
+          "
+        />
+      </div>
+      <BillingItem
+        :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
+        :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
+        :button-label="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT')"
+        @click="onClickBillingPortal"
+      />
+      <BillingItem
+        :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
+        :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
+        :button-label="$t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT')"
+        button-icon="chat-multiple"
+        @click="onToggleChatWindow"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 .manage-subscription {
   @apply bg-white dark:bg-slate-800 flex justify-between mb-2 py-6 px-4 items-center rounded-md border border-solid border-slate-75 dark:border-slate-700;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
index 6f8ade8a0..90582afa3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="manage-subscription">
-    <div>
-      <h6>{{ title }}</h6>
-      <p class="manage-subscription--description">
-        {{ description }}
-      </p>
-    </div>
-    <div>
-      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
-        {{ buttonLabel }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -36,3 +21,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="manage-subscription">
+    <div>
+      <h6>{{ title }}</h6>
+      <p class="manage-subscription--description">
+        {{ description }}
+      </p>
+    </div>
+    <div>
+      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
+        {{ buttonLabel }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index 898d5612f..8c0dc7b5c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -1,179 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('CAMPAIGN.ADD.TITLE')"
-      :header-content="$t('CAMPAIGN.ADD.DESC')"
-    />
-    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-
-        <div v-if="isOngoingType" class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <div>
-            <woot-message-editor
-              v-model="message"
-              class="message-editor"
-              :class="{ editor_warning: v$.message.$error }"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @blur="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="editor-warning__message">
-              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-            </span>
-          </div>
-        </div>
-
-        <label v-else :class="{ error: v$.message.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          <textarea
-            v-model="message"
-            rows="5"
-            type="text"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @blur="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.name" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOneOffType"
-          class="multiselect-wrap--small"
-          :class="{ error: v$.selectedAudience.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
-          <multiselect
-            v-model="selectedAudience"
-            :options="audienceList"
-            track-by="id"
-            label="title"
-            :multiple="true"
-            :close-on-select="false"
-            :clear-on-select="false"
-            :hide-selected="true"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
-            selected-label
-            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-            @blur="v$.selectedAudience.$touch"
-            @select="v$.selectedAudience.$touch"
-          />
-          <span v-if="v$.selectedAudience.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOngoingType"
-          :class="{ error: v$.selectedSender.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-
-        <label v-if="isOneOffType">
-          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
-          <woot-date-time-picker
-            :value="scheduledAt"
-            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
-            @change="onChange"
-          />
-        </label>
-
-        <woot-input
-          v-if="isOngoingType"
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-if="isOngoingType"
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label v-if="isOngoingType">
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -291,7 +115,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onChange(value) {
       this.scheduledAt = value;
@@ -370,6 +194,183 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('CAMPAIGN.ADD.TITLE')"
+      :header-content="$t('CAMPAIGN.ADD.DESC')"
+    />
+    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
+      <div class="w-full">
+        <woot-input
+          v-model="title"
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
+          type="text"
+          :class="{ error: v$.title.$error }"
+          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+          @blur="v$.title.$touch"
+        />
+
+        <div v-if="isOngoingType" class="editor-wrap">
+          <label>
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          </label>
+          <div>
+            <WootMessageEditor
+              v-model="message"
+              class="message-editor"
+              :class="{ editor_warning: v$.message.$error }"
+              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+              @blur="v$.message.$touch"
+            />
+            <span v-if="v$.message.$error" class="editor-warning__message">
+              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+            </span>
+          </div>
+        </div>
+
+        <label v-else :class="{ error: v$.message.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          <textarea
+            v-model="message"
+            rows="5"
+            type="text"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @blur="v$.message.$touch"
+          />
+          <span v-if="v$.message.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </label>
+
+        <label :class="{ error: v$.selectedInbox.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
+          <select v-model="selectedInbox" @change="onChangeInbox($event)">
+            <option v-for="item in inboxes" :key="item.name" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedInbox.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
+          </span>
+        </label>
+
+        <label
+          v-if="isOneOffType"
+          class="multiselect-wrap--small"
+          :class="{ error: v$.selectedAudience.$error }"
+        >
+          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
+          <multiselect
+            v-model="selectedAudience"
+            :options="audienceList"
+            track-by="id"
+            label="title"
+            multiple
+            :close-on-select="false"
+            :clear-on-select="false"
+            hide-selected
+            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
+            selected-label
+            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+            @blur="v$.selectedAudience.$touch"
+            @select="v$.selectedAudience.$touch"
+          />
+          <span v-if="v$.selectedAudience.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
+          </span>
+        </label>
+
+        <label
+          v-if="isOngoingType"
+          :class="{ error: v$.selectedSender.$error }"
+        >
+          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+          <select v-model="selectedSender">
+            <option
+              v-for="sender in sendersAndBotList"
+              :key="sender.name"
+              :value="sender.id"
+            >
+              {{ sender.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedSender.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+          </span>
+        </label>
+
+        <label v-if="isOneOffType">
+          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
+          <WootDateTimePicker
+            :value="scheduledAt"
+            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
+            @change="onChange"
+          />
+        </label>
+
+        <woot-input
+          v-if="isOngoingType"
+          v-model="endPoint"
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
+          type="text"
+          :class="{ error: v$.endPoint.$error }"
+          :error="
+            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
+          @blur="v$.endPoint.$touch"
+        />
+        <woot-input
+          v-if="isOngoingType"
+          v-model="timeOnPage"
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
+          type="text"
+          :class="{ error: v$.timeOnPage.$error }"
+          :error="
+            v$.timeOnPage.$error
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
+              : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+          @blur="v$.timeOnPage.$touch"
+        />
+        <label v-if="isOngoingType">
+          <input
+            v-model="enabled"
+            type="checkbox"
+            value="enabled"
+            name="enabled"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+        </label>
+        <label v-if="isOngoingType">
+          <input
+            v-model="triggerOnlyDuringBusinessHours"
+            type="checkbox"
+            value="triggerOnlyDuringBusinessHours"
+            name="triggerOnlyDuringBusinessHours"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
+        </label>
+      </div>
+
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :is-loading="uiFlags.isCreating">
+          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep .ProseMirror-woot-style {
   height: 5rem;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
index bbc9fb878..0e8dea361 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -1,30 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <campaigns-table
-      :campaigns="campaigns"
-      :show-empty-result="showEmptyResult"
-      :is-loading="uiFlags.isFetching"
-      :campaign-type="type"
-      @edit="openEditPopup"
-      @delete="openDeletePopup"
-    />
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-campaign
-        :selected-campaign="selectedCampaign"
-        @on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
-      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
-      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
-      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -53,7 +26,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'campaigns/getUIFlags',
-      labelList: 'labels/getLabels',
     }),
     campaigns() {
       return this.$store.getters['campaigns/getCampaigns'](this.campaignType);
@@ -96,6 +68,34 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex-1 overflow-auto">
+    <CampaignsTable
+      :campaigns="campaigns"
+      :show-empty-result="showEmptyResult"
+      :is-loading="uiFlags.isFetching"
+      :campaign-type="type"
+      @edit="openEditPopup"
+      @delete="openDeletePopup"
+    />
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditCampaign
+        :selected-campaign="selectedCampaign"
+        @onClose="hideEditPopup"
+      />
+    </woot-modal>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
+      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
+      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
+      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .button-wrapper {
   @apply flex justify-end pb-2.5;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
index b2b80c4a9..2989db04c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -1,71 +1,3 @@
-<template>
-  <div
-    class="px-5 py-4 mb-2 bg-white border rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-900"
-  >
-    <div class="flex flex-row items-start justify-between">
-      <div class="flex flex-col">
-        <div
-          class="mb-1 -mt-1 text-base font-medium text-slate-900 dark:text-slate-100"
-        >
-          {{ campaign.title }}
-        </div>
-        <div
-          v-dompurify-html="formatMessage(campaign.message)"
-          class="text-sm line-clamp-1 [&>p]:mb-0"
-        />
-      </div>
-      <div class="flex flex-row space-x-4">
-        <woot-button
-          v-if="isOngoingType"
-          variant="link"
-          icon="edit"
-          color-scheme="secondary"
-          size="small"
-          @click="$emit('edit', campaign)"
-        >
-          {{ $t('CAMPAIGN.LIST.BUTTONS.EDIT') }}
-        </woot-button>
-        <woot-button
-          variant="link"
-          icon="dismiss-circle"
-          size="small"
-          color-scheme="secondary"
-          @click="$emit('delete', campaign)"
-        >
-          {{ $t('CAMPAIGN.LIST.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-
-    <div class="flex flex-row items-center mt-5 space-x-3">
-      <woot-label
-        small
-        :title="campaignStatus"
-        :color-scheme="colorScheme"
-        class="mr-3 text-xs"
-      />
-      <inbox-name :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
-      <user-avatar-with-name
-        v-if="campaign.sender"
-        :user="campaign.sender"
-        class="mb-1"
-      />
-      <div
-        v-if="campaign.trigger_rules.url"
-        class="w-1/4 mb-1 text-xs text-woot-600 text-truncate"
-      >
-        {{ campaign.trigger_rules.url }}
-      </div>
-      <div
-        v-if="campaign.scheduled_at"
-        class="mb-1 text-xs text-slate-700 dark:text-slate-500"
-      >
-        {{ messageStamp(new Date(campaign.scheduled_at), 'LLL d, h:mm a') }}
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
@@ -115,3 +47,71 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="px-5 py-4 mb-2 bg-white border rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-900"
+  >
+    <div class="flex flex-row items-start justify-between">
+      <div class="flex flex-col">
+        <div
+          class="mb-1 -mt-1 text-base font-medium text-slate-900 dark:text-slate-100"
+        >
+          {{ campaign.title }}
+        </div>
+        <div
+          v-dompurify-html="formatMessage(campaign.message)"
+          class="text-sm line-clamp-1 [&>p]:mb-0"
+        />
+      </div>
+      <div class="flex flex-row space-x-4">
+        <woot-button
+          v-if="isOngoingType"
+          variant="link"
+          icon="edit"
+          color-scheme="secondary"
+          size="small"
+          @click="$emit('edit', campaign)"
+        >
+          {{ $t('CAMPAIGN.LIST.BUTTONS.EDIT') }}
+        </woot-button>
+        <woot-button
+          variant="link"
+          icon="dismiss-circle"
+          size="small"
+          color-scheme="secondary"
+          @click="$emit('delete', campaign)"
+        >
+          {{ $t('CAMPAIGN.LIST.BUTTONS.DELETE') }}
+        </woot-button>
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center mt-5 space-x-3">
+      <woot-label
+        small
+        :title="campaignStatus"
+        :color-scheme="colorScheme"
+        class="mr-3 text-xs"
+      />
+      <InboxName :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
+      <UserAvatarWithName
+        v-if="campaign.sender"
+        :user="campaign.sender"
+        class="mb-1"
+      />
+      <div
+        v-if="campaign.trigger_rules.url"
+        class="w-1/4 mb-1 text-xs text-woot-600 text-truncate"
+      >
+        {{ campaign.trigger_rules.url }}
+      </div>
+      <div
+        v-if="campaign.scheduled_at"
+        class="mb-1 text-xs text-slate-700 dark:text-slate-500"
+      >
+        {{ messageStamp(new Date(campaign.scheduled_at), 'LLL d, h:mm a') }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index 3c73cbf77..d1abc6490 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="flex items-center flex-col">
-    <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <spinner color-scheme="primary" />
-      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-    <div v-else class="w-full">
-      <empty-state v-if="showEmptyResult" :title="emptyMessage" />
-      <div v-else class="w-full">
-        <campaign-card
-          v-for="campaign in campaigns"
-          :key="campaign.id"
-          :campaign="campaign"
-          :is-ongoing-type="isOngoingType"
-          @edit="campaign => $emit('edit', campaign)"
-          @delete="campaign => $emit('delete', campaign)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -77,3 +55,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center flex-col">
+    <div v-if="isLoading" class="items-center flex text-base justify-center">
+      <Spinner color-scheme="primary" />
+      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
+    </div>
+    <div v-else class="w-full">
+      <EmptyState v-if="showEmptyResult" :title="emptyMessage" />
+      <div v-else class="w-full">
+        <CampaignCard
+          v-for="campaign in campaigns"
+          :key="campaign.id"
+          :campaign="campaign"
+          :is-ongoing-type="isOngoingType"
+          @edit="campaign => $emit('edit', campaign)"
+          @delete="campaign => $emit('delete', campaign)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index bbcb7e3a0..7bd4f2a15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -1,116 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-        <div class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <woot-message-editor
-            v-model="message"
-            class="message-editor"
-            :is-format-mode="true"
-            :class="{ editor_warning: v$.message.$error }"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @input="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="editor-warning__message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </div>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.id" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedSender.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-        <woot-input
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label>
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -214,7 +101,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
 
     async loadInboxMembers() {
@@ -285,6 +172,120 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
+      <div class="w-full">
+        <woot-input
+          v-model="title"
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
+          type="text"
+          :class="{ error: v$.title.$error }"
+          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+          @blur="v$.title.$touch"
+        />
+        <div class="editor-wrap">
+          <label>
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          </label>
+          <WootMessageEditor
+            v-model="message"
+            class="message-editor"
+            is-format-mode
+            :class="{ editor_warning: v$.message.$error }"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @input="v$.message.$touch"
+          />
+          <span v-if="v$.message.$error" class="editor-warning__message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </div>
+
+        <label :class="{ error: v$.selectedInbox.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
+          <select v-model="selectedInbox" @change="onChangeInbox($event)">
+            <option v-for="item in inboxes" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedInbox.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
+          </span>
+        </label>
+
+        <label :class="{ error: v$.selectedSender.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+          <select v-model="selectedSender">
+            <option
+              v-for="sender in sendersAndBotList"
+              :key="sender.name"
+              :value="sender.id"
+            >
+              {{ sender.name }}
+            </option>
+          </select>
+          <span v-if="v$.selectedSender.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+          </span>
+        </label>
+        <woot-input
+          v-model="endPoint"
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
+          type="text"
+          :class="{ error: v$.endPoint.$error }"
+          :error="
+            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
+          @blur="v$.endPoint.$touch"
+        />
+        <woot-input
+          v-model="timeOnPage"
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
+          type="text"
+          :class="{ error: v$.timeOnPage.$error }"
+          :error="
+            v$.timeOnPage.$error
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
+              : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+          @blur="v$.timeOnPage.$touch"
+        />
+        <label>
+          <input
+            v-model="enabled"
+            type="checkbox"
+            value="enabled"
+            name="enabled"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+        </label>
+        <label v-if="isOngoingType">
+          <input
+            v-model="triggerOnlyDuringBusinessHours"
+            type="checkbox"
+            value="triggerOnlyDuringBusinessHours"
+            name="triggerOnlyDuringBusinessHours"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
+        </label>
+      </div>
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :is-loading="uiFlags.isCreating">
+          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep .ProseMirror-woot-style {
   height: 5rem;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index 9004ac22d..d6f1918cf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ buttonText }}
-    </woot-button>
-    <campaign />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign @on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import campaignMixin from 'shared/mixins/campaignMixin';
 import Campaign from './Campaign.vue';
@@ -50,3 +33,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ buttonText }}
+    </woot-button>
+    <Campaign />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddCampaign @onClose="hideAddPopup" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index 010a10236..95f60f5a2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -1,58 +1,3 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('CANNED_MGMT.ADD.TITLE')"
-        :header-content="$t('CANNED_MGMT.ADD.DESC')"
-      />
-      <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
-        <div class="w-full">
-          <label :class="{ error: v$.shortCode.$error }">
-            {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
-            <input
-              v-model.trim="shortCode"
-              type="text"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
-              @input="v$.shortCode.$touch"
-            />
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.content.$error }">
-            {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
-          </label>
-          <div class="editor-wrap">
-            <woot-message-editor
-              v-model="content"
-              class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
-              :enable-canned-responses="false"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-              @blur="v$.content.$touch"
-            />
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :disabled="
-              v$.content.$invalid ||
-              v$.shortCode.$invalid ||
-              addCanned.showLoading
-            "
-            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
-            :loading="addCanned.showLoading"
-          />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -135,6 +80,61 @@ export default {
 };
 </script>
 
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CANNED_MGMT.ADD.TITLE')"
+        :header-content="$t('CANNED_MGMT.ADD.DESC')"
+      />
+      <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
+        <div class="w-full">
+          <label :class="{ error: v$.shortCode.$error }">
+            {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
+            <input
+              v-model.trim="shortCode"
+              type="text"
+              :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
+              @input="v$.shortCode.$touch"
+            />
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.content.$error }">
+            {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
+          </label>
+          <div class="editor-wrap">
+            <WootMessageEditor
+              v-model="content"
+              class="message-editor [&>div]:px-1"
+              :class="{ editor_warning: v$.content.$error }"
+              enable-variables
+              :enable-canned-responses="false"
+              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
+              @blur="v$.content.$touch"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <WootSubmitButton
+            :disabled="
+              v$.content.$invalid ||
+              v$.shortCode.$invalid ||
+              addCanned.showLoading
+            "
+            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
+            :loading="addCanned.showLoading"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </Modal>
+</template>
+
 <style scoped lang="scss">
 ::v-deep {
   .ProseMirror-menubar {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index dc322e6bc..634745b38 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -1,55 +1,3 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="pageTitle" />
-      <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
-        <div class="w-full">
-          <label :class="{ error: v$.shortCode.$error }">
-            {{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
-            <input
-              v-model.trim="shortCode"
-              type="text"
-              :placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
-              @input="v$.shortCode.$touch"
-            />
-          </label>
-        </div>
-
-        <div class="w-full">
-          <label :class="{ error: v$.content.$error }">
-            {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
-          </label>
-          <div class="editor-wrap">
-            <woot-message-editor
-              v-model="content"
-              class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
-              :enable-canned-responses="false"
-              :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
-              @blur="v$.content.$touch"
-            />
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :disabled="
-              v$.content.$invalid ||
-              v$.shortCode.$invalid ||
-              editCanned.showLoading
-            "
-            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
-            :loading="editCanned.showLoading"
-          />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </modal>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import { useVuelidate } from '@vuelidate/core';
@@ -139,6 +87,59 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="pageTitle" />
+      <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
+        <div class="w-full">
+          <label :class="{ error: v$.shortCode.$error }">
+            {{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
+            <input
+              v-model.trim="shortCode"
+              type="text"
+              :placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
+              @input="v$.shortCode.$touch"
+            />
+          </label>
+        </div>
+
+        <div class="w-full">
+          <label :class="{ error: v$.content.$error }">
+            {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
+          </label>
+          <div class="editor-wrap">
+            <WootMessageEditor
+              v-model="content"
+              class="message-editor [&>div]:px-1"
+              :class="{ editor_warning: v$.content.$error }"
+              enable-variables
+              :enable-canned-responses="false"
+              :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
+              @blur="v$.content.$touch"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <WootSubmitButton
+            :disabled="
+              v$.content.$invalid ||
+              v$.shortCode.$invalid ||
+              editCanned.showLoading
+            "
+            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
+            :loading="editCanned.showLoading"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </Modal>
+</template>
+
 <style scoped lang="scss">
 ::v-deep {
   .ProseMirror-menubar {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 609923712..80a50a095 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -1,133 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <!-- List Canned Response -->
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full xl:w-3/5">
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('CANNED_MGMT.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('CANNED_MGMT.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
-        >
-          <thead>
-            <!-- Header -->
-            <th
-              v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
-              :key="thHeader"
-              class="last:text-right first:m-0 first:p-0"
-            >
-              <p v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
-                {{ thHeader }}
-              </p>
-
-              <button
-                v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
-                class="flex items-center p-0 cursor-pointer"
-                @click="toggleSort"
-              >
-                <p class="uppercase">
-                  {{ thHeader }}
-                </p>
-                <fluent-icon
-                  class="mb-2 ml-2"
-                  :icon="sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'"
-                />
-              </button>
-            </th>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(cannedItem, index) in records"
-              :key="cannedItem.short_code"
-            >
-              <!-- Short Code  -->
-              <td
-                class="w-[8.75rem] truncate max-w-[8.75rem]"
-                :title="cannedItem.short_code"
-              >
-                {{ cannedItem.short_code }}
-              </td>
-              <!-- Content -->
-              <td class="break-all whitespace-normal">
-                {{ cannedItem.content }}
-              </td>
-              <!-- Action Buttons -->
-              <td class="flex justify-end gap-1 min-w-[12.5rem]">
-                <woot-button
-                  v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  icon="edit"
-                  @click="openEditPopup(cannedItem)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[cannedItem.id]"
-                  @click="openDeletePopup(cannedItem, index)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 xl:block">
-        <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <!-- Add Agent -->
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-canned :on-close="hideAddPopup" />
-    </woot-modal>
-
-    <!-- Edit Canned Response -->
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-canned
-        v-if="showEditPopup"
-        :id="selectedResponse.id"
-        :edshort-code="selectedResponse.short_code"
-        :edcontent="selectedResponse.content"
-        :on-close="hideEditPopup"
-      />
-    </woot-modal>
-
-    <!-- Delete Canned Response -->
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('CANNED_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -244,3 +114,134 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+
+    <!-- List Canned Response -->
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full xl:w-3/5">
+        <p
+          v-if="!uiFlags.fetchingList && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('CANNED_MGMT.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.fetchingList"
+          :message="$t('CANNED_MGMT.LOADING')"
+        />
+
+        <table
+          v-if="!uiFlags.fetchingList && records.length"
+          class="woot-table"
+        >
+          <thead>
+            <!-- Header -->
+            <th
+              v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
+              :key="thHeader"
+              class="last:text-right first:m-0 first:p-0"
+            >
+              <p v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
+                {{ thHeader }}
+              </p>
+
+              <button
+                v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
+                class="flex items-center p-0 cursor-pointer"
+                @click="toggleSort"
+              >
+                <p class="uppercase">
+                  {{ thHeader }}
+                </p>
+                <fluent-icon
+                  class="mb-2 ml-2"
+                  :icon="sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'"
+                />
+              </button>
+            </th>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(cannedItem, index) in records"
+              :key="cannedItem.short_code"
+            >
+              <!-- Short Code  -->
+              <td
+                class="w-[8.75rem] truncate max-w-[8.75rem]"
+                :title="cannedItem.short_code"
+              >
+                {{ cannedItem.short_code }}
+              </td>
+              <!-- Content -->
+              <td class="break-all whitespace-normal">
+                {{ cannedItem.content }}
+              </td>
+              <!-- Action Buttons -->
+              <td class="flex justify-end gap-1 min-w-[12.5rem]">
+                <woot-button
+                  v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  icon="edit"
+                  @click="openEditPopup(cannedItem)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  icon="dismiss-circle"
+                  class-names="grey-btn"
+                  :is-loading="loading[cannedItem.id]"
+                  @click="openDeletePopup(cannedItem, index)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 xl:block">
+        <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <!-- Add Agent -->
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddCanned :on-close="hideAddPopup" />
+    </woot-modal>
+
+    <!-- Edit Canned Response -->
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditCanned
+        v-if="showEditPopup"
+        :id="selectedResponse.id"
+        :edshort-code="selectedResponse.short_code"
+        :edcontent="selectedResponse.content"
+        :on-close="hideEditPopup"
+      />
+    </woot-modal>
+
+    <!-- Delete Canned Response -->
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('CANNED_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
index 845f355f5..d98a8e243 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -10,6 +10,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 w-full"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index e6b66ac89..2985a34a9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -1,49 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
-      <div class="w-full">
-        <page-header
-          :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
-          :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
-        />
-      </div>
-      <div class="w-3/5">
-        <div class="w-full">
-          <label :class="{ error: v$.selectedAgents.$error }">
-            {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
-            <multiselect
-              v-model="selectedAgents"
-              :options="agentList"
-              track-by="id"
-              label="name"
-              :multiple="true"
-              :close-on-select="false"
-              :clear-on-select="false"
-              :hide-selected="true"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-              :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
-              @select="v$.selectedAgents.$touch"
-            />
-            <span v-if="v$.selectedAgents.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-full">
-          <woot-submit-button
-            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
-            :loading="isCreating"
-          />
-        </div>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import { mapGetters } from 'vuex';
@@ -105,3 +59,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
+      <div class="w-full">
+        <PageHeader
+          :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
+          :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
+        />
+      </div>
+      <div class="w-3/5">
+        <div class="w-full">
+          <label :class="{ error: v$.selectedAgents.$error }">
+            {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
+            <multiselect
+              v-model="selectedAgents"
+              :options="agentList"
+              track-by="id"
+              label="name"
+              multiple
+              :close-on-select="false"
+              :clear-on-select="false"
+              hide-selected
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+              :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
+              @select="v$.selectedAgents.$touch"
+            />
+            <span v-if="v$.selectedAgents.$error" class="message">
+              {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="w-full">
+          <woot-submit-button
+            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
+            :loading="isCreating"
+          />
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 93bff206d..0cbcc554b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      class="max-w-4xl"
-      :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
-      :header-content="
-        useInstallationName(
-          $t('INBOX_MGMT.ADD.AUTH.DESC'),
-          globalConfig.installationName
-        )
-      "
-    />
-    <div
-      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
-    >
-      <channel-item
-        v-for="channel in channelList"
-        :key="channel.key"
-        :channel="channel"
-        :enabled-features="enabledFeatures"
-        @channel-item-click="initChannelAuth"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
 import router from '../../../index';
@@ -87,3 +59,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      class="max-w-4xl"
+      :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
+      :header-content="
+        useInstallationName(
+          $t('INBOX_MGMT.ADD.AUTH.DESC'),
+          globalConfig.installationName
+        )
+      "
+    />
+    <div
+      class="grid max-w-3xl grid-cols-2 mx-0 mt-6 sm:grid-cols-3 lg:grid-cols-4"
+    >
+      <ChannelItem
+        v-for="channel in channelList"
+        :key="channel.key"
+        :channel="channel"
+        :enabled-features="enabledFeatures"
+        @channelItemClick="initChannelAuth"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index d9f0008d5..326295276 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -1,8 +1,80 @@
+<script>
+import configMixin from 'shared/mixins/configMixin';
+import EmptyState from '../../../../components/widgets/EmptyState.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+  mixins: [configMixin],
+  computed: {
+    currentInbox() {
+      return this.$store.getters['inboxes/getInbox'](
+        this.$route.params.inbox_id
+      );
+    },
+    isATwilioInbox() {
+      return this.currentInbox.channel_type === 'Channel::TwilioSms';
+    },
+    isAEmailInbox() {
+      return this.currentInbox.channel_type === 'Channel::Email';
+    },
+    isALineInbox() {
+      return this.currentInbox.channel_type === 'Channel::Line';
+    },
+    isASmsInbox() {
+      return this.currentInbox.channel_type === 'Channel::Sms';
+    },
+    isWhatsAppCloudInbox() {
+      return (
+        this.currentInbox.channel_type === 'Channel::Whatsapp' &&
+        this.currentInbox.provider === 'whatsapp_cloud'
+      );
+    },
+    message() {
+      if (this.isATwilioInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isASmsInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isALineInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isWhatsAppCloudInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
+      if (this.isAEmailInbox && !this.currentInbox.provider) {
+        return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
+      }
+
+      if (this.currentInbox.web_widget_script) {
+        return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
+      }
+
+      return this.$t('INBOX_MGMT.FINISH.MESSAGE');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <empty-state
+    <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
       :message="message"
       :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
@@ -79,78 +151,6 @@
           </router-link>
         </div>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
-
-<script>
-import configMixin from 'shared/mixins/configMixin';
-import EmptyState from '../../../../components/widgets/EmptyState.vue';
-
-export default {
-  components: {
-    EmptyState,
-  },
-  mixins: [configMixin],
-  computed: {
-    currentInbox() {
-      return this.$store.getters['inboxes/getInbox'](
-        this.$route.params.inbox_id
-      );
-    },
-    isATwilioInbox() {
-      return this.currentInbox.channel_type === 'Channel::TwilioSms';
-    },
-    isAEmailInbox() {
-      return this.currentInbox.channel_type === 'Channel::Email';
-    },
-    isALineInbox() {
-      return this.currentInbox.channel_type === 'Channel::Line';
-    },
-    isASmsInbox() {
-      return this.currentInbox.channel_type === 'Channel::Sms';
-    },
-    isWhatsAppCloudInbox() {
-      return (
-        this.currentInbox.channel_type === 'Channel::Whatsapp' &&
-        this.currentInbox.provider === 'whatsapp_cloud'
-      );
-    },
-    message() {
-      if (this.isATwilioInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isASmsInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isALineInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isWhatsAppCloudInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isAEmailInbox && !this.currentInbox.provider) {
-        return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
-      }
-
-      if (this.currentInbox.web_widget_script) {
-        return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
-      }
-
-      return this.$t('INBOX_MGMT.FINISH.MESSAGE');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index 1971f483d..9b3a883ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -1,76 +1,3 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.IMAP.TITLE')"
-      :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
-      :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-imap-enable">
-          <input
-            v-model="isIMAPEnabled"
-            type="checkbox"
-            class="ltr:mr-2 rtl:ml-2"
-            name="toggle-imap-enable"
-          />
-          {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
-        <div v-if="isIMAPEnabled" class="mb-6">
-          <woot-input
-            v-model.trim="address"
-            :class="{ error: v$.address.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
-            @blur="v$.address.$touch"
-          />
-          <woot-input
-            v-model="port"
-            type="number"
-            :class="{ error: v$.port.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
-            @blur="v$.port.$touch"
-          />
-          <woot-input
-            v-model="login"
-            :class="{ error: v$.login.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
-            @blur="v$.login.$touch"
-          />
-          <woot-input
-            v-model="password"
-            :class="{ error: v$.password.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
-            type="password"
-            @blur="v$.password.$touch"
-          />
-          <label for="toggle-enable-ssl">
-            <input
-              v-model="isSSLEnabled"
-              type="checkbox"
-              class="ltr:mr-2 rtl:ml-2"
-              name="toggle-enable-ssl"
-            />
-            {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
-          </label>
-        </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
-          :loading="uiFlags.isUpdatingIMAP"
-          :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
-        />
-      </form>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -164,3 +91,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.IMAP.TITLE')"
+      :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
+      :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-imap-enable">
+          <input
+            v-model="isIMAPEnabled"
+            type="checkbox"
+            class="ltr:mr-2 rtl:ml-2"
+            name="toggle-imap-enable"
+          />
+          {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
+        <div v-if="isIMAPEnabled" class="mb-6">
+          <woot-input
+            v-model.trim="address"
+            :class="{ error: v$.address.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
+            @blur="v$.address.$touch"
+          />
+          <woot-input
+            v-model="port"
+            type="number"
+            :class="{ error: v$.port.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
+            @blur="v$.port.$touch"
+          />
+          <woot-input
+            v-model="login"
+            :class="{ error: v$.login.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
+            @blur="v$.login.$touch"
+          />
+          <woot-input
+            v-model="password"
+            :class="{ error: v$.password.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
+            type="password"
+            @blur="v$.password.$touch"
+          />
+          <label for="toggle-enable-ssl">
+            <input
+              v-model="isSSLEnabled"
+              type="checkbox"
+              class="ltr:mr-2 rtl:ml-2"
+              name="toggle-enable-ssl"
+            />
+            {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
+          </label>
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
+          :loading="uiFlags.isUpdatingIMAP"
+          :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
+        />
+      </form>
+    </SettingsSection>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index ec9dc1ab7..bab39f686 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard
-      class="hidden md:block w-1/4"
-      :global-config="globalConfig"
-      :items="items"
-    />
-    <router-view />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -33,3 +20,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard
+      class="hidden md:block w-1/4"
+      :global-config="globalConfig"
+      :items="items"
+    />
+    <router-view />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 67072bcf7..5cc0bd464 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -1,135 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!inboxesList.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('INBOX_MGMT.LIST.404') }}
-          <router-link
-            v-if="isAdmin"
-            :to="addAccountScoping('settings/inboxes/new')"
-          >
-            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
-          </router-link>
-        </p>
-
-        <table v-if="inboxesList.length" class="woot-table">
-          <tbody>
-            <tr v-for="item in inboxesList" :key="item.id">
-              <td>
-                <img
-                  v-if="item.avatar_url"
-                  class="woot-thumbnail"
-                  :src="item.avatar_url"
-                  alt="No Page Image"
-                />
-                <img
-                  v-else
-                  class="woot-thumbnail"
-                  src="~dashboard/assets/images/flag.svg"
-                  alt="No Page Image"
-                />
-              </td>
-              <!-- Short Code  -->
-              <td>
-                <span class="agent-name">{{ item.name }}</span>
-                <span v-if="item.channel_type === 'Channel::FacebookPage'">
-                  Facebook
-                </span>
-                <span v-if="item.channel_type === 'Channel::WebWidget'">
-                  Website
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
-                  Twitter
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwilioSms'">
-                  {{ twilioChannelName(item) }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Whatsapp'">
-                  Whatsapp
-                </span>
-                <span v-if="item.channel_type === 'Channel::Sms'"> Sms </span>
-                <span v-if="item.channel_type === 'Channel::Email'">
-                  Email
-                </span>
-                <span v-if="item.channel_type === 'Channel::Telegram'">
-                  Telegram
-                </span>
-                <span v-if="item.channel_type === 'Channel::Line'">Line</span>
-                <span v-if="item.channel_type === 'Channel::Api'">
-                  {{ globalConfig.apiChannelName || 'API' }}
-                </span>
-              </td>
-
-              <!-- Action Buttons -->
-              <td>
-                <div class="button-wrapper">
-                  <router-link
-                    :to="addAccountScoping(`settings/inboxes/${item.id}`)"
-                  >
-                    <woot-button
-                      v-if="isAdmin"
-                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
-                      variant="smooth"
-                      size="tiny"
-                      icon="settings"
-                      color-scheme="secondary"
-                      class-names="grey-btn"
-                    />
-                  </router-link>
-
-                  <woot-button
-                    v-if="isAdmin"
-                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                    variant="smooth"
-                    color-scheme="alert"
-                    size="tiny"
-                    class-names="grey-btn"
-                    :is-loading="loading[item.id]"
-                    icon="dismiss-circle"
-                    @click="openDelete(item)"
-                  />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INBOX_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <settings
-      v-if="showSettings"
-      :show.sync="showSettings"
-      :on-close="closeSettings"
-      :inbox="selectedInbox"
-    />
-
-    <woot-confirm-delete-modal
-      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
-      :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="confirmDeleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-      :confirm-value="selectedInbox.name"
-      :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -222,3 +90,140 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!inboxesList.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('INBOX_MGMT.LIST.404') }}
+          <router-link
+            v-if="isAdmin"
+            :to="addAccountScoping('settings/inboxes/new')"
+          >
+            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
+          </router-link>
+        </p>
+
+        <table v-if="inboxesList.length" class="woot-table">
+          <tbody>
+            <tr v-for="item in inboxesList" :key="item.id">
+              <td>
+                <img
+                  v-if="item.avatar_url"
+                  class="woot-thumbnail"
+                  :src="item.avatar_url"
+                  alt="No Page Image"
+                />
+                <img
+                  v-else
+                  class="woot-thumbnail"
+                  src="~dashboard/assets/images/flag.svg"
+                  alt="No Page Image"
+                />
+              </td>
+              <!-- Short Code  -->
+              <td>
+                <span class="agent-name">{{ item.name }}</span>
+                <span v-if="item.channel_type === 'Channel::FacebookPage'">
+                  {{ 'Facebook' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::WebWidget'">
+                  {{ 'Website' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
+                  {{ 'Twitter' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::TwilioSms'">
+                  {{ twilioChannelName(item) }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Whatsapp'">
+                  {{ 'Whatsapp' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Sms'">
+                  {{ 'Sms' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Email'">
+                  {{ 'Email' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Telegram'">
+                  {{ 'Telegram' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Line'">
+                  {{ 'Line' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Api'">
+                  {{ globalConfig.apiChannelName || 'API' }}
+                </span>
+              </td>
+
+              <!-- Action Buttons -->
+              <td>
+                <div class="button-wrapper">
+                  <router-link
+                    :to="addAccountScoping(`settings/inboxes/${item.id}`)"
+                  >
+                    <woot-button
+                      v-if="isAdmin"
+                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                      variant="smooth"
+                      size="tiny"
+                      icon="settings"
+                      color-scheme="secondary"
+                      class-names="grey-btn"
+                    />
+                  </router-link>
+
+                  <woot-button
+                    v-if="isAdmin"
+                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                    variant="smooth"
+                    color-scheme="alert"
+                    size="tiny"
+                    class-names="grey-btn"
+                    :is-loading="loading[item.id]"
+                    icon="dismiss-circle"
+                    @click="openDelete(item)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('INBOX_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+    <Settings
+      v-if="showSettings"
+      :show.sync="showSettings"
+      :on-close="closeSettings"
+      :inbox="selectedInbox"
+    />
+
+    <woot-confirm-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="confirmDeleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+      :confirm-value="selectedInbox.name"
+      :confirm-place-holder-text="confirmPlaceHolderText"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index ee8e66446..5fc73855e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -1,5 +1,39 @@
+<script>
+import draggable from 'vuedraggable';
+export default {
+  components: { Draggable: draggable },
+  props: {
+    preChatFields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      preChatFieldOptions: this.preChatFields,
+    };
+  },
+  watch: {
+    preChatFields() {
+      this.preChatFieldOptions = this.preChatFields;
+    },
+  },
+  methods: {
+    isFieldEditable(item) {
+      return !item.enabled;
+    },
+    handlePreChatFieldOptions(event, type, item) {
+      this.$emit('update', event, type, item);
+    },
+    onDragEnd() {
+      this.$emit('dragEnd', this.preChatFieldOptions);
+    },
+  },
+};
+</script>
+
 <template>
-  <draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
+  <Draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
     <tr v-for="(item, index) in preChatFieldOptions" :key="index">
       <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
       <td class="pre-chat-field">
@@ -38,42 +72,9 @@
         />
       </td>
     </tr>
-  </draggable>
+  </Draggable>
 </template>
 
-<script>
-import draggable from 'vuedraggable';
-export default {
-  components: { draggable },
-  props: {
-    preChatFields: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      preChatFieldOptions: this.preChatFields,
-    };
-  },
-  watch: {
-    preChatFields() {
-      this.preChatFieldOptions = this.preChatFields;
-    },
-  },
-  methods: {
-    isFieldEditable(item) {
-      return !item.enabled;
-    },
-    handlePreChatFieldOptions(event, type, item) {
-      this.$emit('update', event, type, item);
-    },
-    onDragEnd() {
-      this.$emit('drag-end', this.preChatFieldOptions);
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .pre-chat-field {
   @apply py-4 px-2 text-slate-700 dark:text-slate-100;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index a5f84cc82..95708340a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -1,82 +1,3 @@
-<template>
-  <div class="mx-8 my-2 text-base">
-    <div class="mx-0 mt-6 mb-3">
-      {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
-    </div>
-    <form class="flex flex-col" @submit.prevent="updateInbox">
-      <label class="w-1/4">
-        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
-        <select v-model="preChatFormEnabled">
-          <option :value="true">
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
-          </option>
-          <option :value="false">
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
-          </option>
-        </select>
-      </label>
-      <div v-if="preChatFormEnabled">
-        <div class="w-[70%]">
-          <label>
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
-          </label>
-          <woot-message-editor
-            v-model="preChatMessage"
-            class="message-editor"
-            :placeholder="
-              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
-            "
-          />
-        </div>
-        <div class="w-[70%] mt-4">
-          <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
-          <table class="table w-full table-striped woot-table">
-            <thead class="thead-dark">
-              <tr>
-                <th scope="col" />
-                <th scope="col" />
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
-                </th>
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE') }}
-                </th>
-                <th scope="col">
-                  {{
-                    $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED')
-                  }}
-                </th>
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL') }}
-                </th>
-                <th scope="col">
-                  {{
-                    $t(
-                      'INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'
-                    )
-                  }}
-                </th>
-              </tr>
-            </thead>
-            <pre-chat-fields
-              :pre-chat-fields="preChatFields"
-              @update="handlePreChatFieldOptions"
-              @drag-end="changePreChatFieldFieldsOrder"
-            />
-          </table>
-        </div>
-      </div>
-      <div class="w-auto my-4">
-        <woot-submit-button
-          :button-text="
-            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
-          "
-          :loading="uiFlags.isUpdating"
-        />
-      </div>
-    </form>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -170,6 +91,87 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8 my-2 text-base">
+    <div class="mx-0 mt-6 mb-3">
+      {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
+    </div>
+    <form class="flex flex-col" @submit.prevent="updateInbox">
+      <label class="w-1/4">
+        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
+        <select v-model="preChatFormEnabled">
+          <option :value="true">
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
+          </option>
+          <option :value="false">
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
+          </option>
+        </select>
+      </label>
+      <div v-if="preChatFormEnabled">
+        <div class="w-[70%]">
+          <label>
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
+          </label>
+          <WootMessageEditor
+            v-model="preChatMessage"
+            class="message-editor"
+            :placeholder="
+              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
+            "
+          />
+        </div>
+        <div class="w-[70%] mt-4">
+          <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
+          <table class="table w-full table-striped woot-table">
+            <thead class="thead-dark">
+              <tr>
+                <th scope="col" />
+                <th scope="col" />
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
+                </th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE') }}
+                </th>
+                <th scope="col">
+                  {{
+                    $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED')
+                  }}
+                </th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL') }}
+                </th>
+                <th scope="col">
+                  {{
+                    $t(
+                      'INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'
+                    )
+                  }}
+                </th>
+              </tr>
+            </thead>
+            <PreChatFields
+              :pre-chat-fields="preChatFields"
+              @update="handlePreChatFieldOptions"
+              @dragEnd="changePreChatFieldFieldsOrder"
+            />
+          </table>
+        </div>
+      </div>
+      <div class="w-auto my-4">
+        <woot-submit-button
+          :button-text="
+            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
+          "
+          :loading="uiFlags.isUpdating"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .message-editor {
   @apply px-3;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 5e6555d5c..8b8432798 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -1,428 +1,3 @@
-<template>
-  <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
-  >
-    <setting-intro-banner
-      :header-image="inbox.avatarUrl"
-      :header-title="inboxName"
-    >
-      <woot-tabs
-        class="settings--tabs"
-        :index="selectedTabIndex"
-        :border="false"
-        @change="onTabChange"
-      >
-        <woot-tabs-item
-          v-for="tab in tabs"
-          :key="tab.key"
-          :name="tab.name"
-          :show-badge="false"
-        />
-      </woot-tabs>
-    </setting-intro-banner>
-
-    <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
-    <facebook-reauthorize v-if="facebookUnauthorized" :inbox="inbox" />
-
-    <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
-        :show-border="false"
-      >
-        <woot-avatar-uploader
-          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
-          :src="avatarUrl"
-          class="pb-4"
-          delete-avatar
-          @change="handleImageUpload"
-          @onAvatarDelete="handleAvatarDelete"
-        />
-        <woot-input
-          v-model.trim="selectedInboxName"
-          class="w-3/4 pb-4"
-          :class="{ error: v$.selectedInboxName.$error }"
-          :label="inboxNameLabel"
-          :placeholder="inboxNamePlaceHolder"
-          :error="
-            v$.selectedInboxName.$error
-              ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
-              : ''
-          "
-          @blur="v$.selectedInboxName.$touch"
-        />
-        <woot-input
-          v-if="isAPIInbox"
-          v-model.trim="webhookUrl"
-          class="w-3/4 pb-4"
-          :class="{ error: v$.webhookUrl.$error }"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
-          "
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
-          "
-          :error="
-            v$.webhookUrl.$error
-              ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
-              : ''
-          "
-          @blur="v$.webhookUrl.$touch"
-        />
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model.trim="channelWebsiteUrl"
-          class="w-3/4 pb-4"
-          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
-          "
-        />
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model.trim="channelWelcomeTitle"
-          class="w-3/4 pb-4"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
-            )
-          "
-        />
-
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model.trim="channelWelcomeTagline"
-          class="w-3/4 pb-4"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-            )
-          "
-        />
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-          <woot-color-picker v-model="inbox.widget_color" />
-        </label>
-
-        <label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-          <input v-model="whatsAppAPIProviderName" type="text" disabled />
-        </label>
-
-        <label class="w-3/4 pb-4">
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
-          }}
-          <select v-model="greetingEnabled">
-            <option :value="true">
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
-                )
-              }}
-            </option>
-            <option :value="false">
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
-                )
-              }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
-              )
-            }}
-          </p>
-        </label>
-        <div v-if="greetingEnabled" class="pb-4">
-          <greetings-editor
-            v-model.trim="greetingMessage"
-            :label="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
-              )
-            "
-            :placeholder="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
-              )
-            "
-            :richtext="!textAreaChannels"
-          />
-        </div>
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
-          <select v-model="replyTime">
-            <option key="in_a_few_minutes" value="in_a_few_minutes">
-              {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
-              }}
-            </option>
-            <option key="in_a_few_hours" value="in_a_few_hours">
-              {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
-              }}
-            </option>
-            <option key="in_a_day" value="in_a_day">
-              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
-            </option>
-          </select>
-
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
-          <select v-model="emailCollectEnabled">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
-            }}
-          </p>
-        </label>
-
-        <label class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
-          <select v-model="csatSurveyEnabled">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
-          <select v-model="allowMessagesAfterResolved">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
-          <select v-model="continuityViaEmail">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
-        <div class="w-3/4 pb-4">
-          <label>
-            {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
-          </label>
-          <select v-model="selectedPortalSlug" class="filter__question">
-            <option value="">
-              {{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
-            </option>
-            <option v-for="p in portals" :key="p.slug" :value="p.slug">
-              {{ p.name }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
-          </p>
-        </div>
-        <label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
-          <select v-model="locktoSingleConversation">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox">
-          {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
-        </label>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="attachments"
-            @input="handleFeatureFlag"
-          />
-          <label for="attachments">
-            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="emoji_picker"
-            @input="handleFeatureFlag"
-          />
-          <label for="emoji_picker">
-            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="end_conversation"
-            @input="handleFeatureFlag"
-          />
-          <label for="end_conversation">
-            {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="use_inbox_avatar_for_bot"
-            @input="handleFeatureFlag"
-          />
-          <label for="emoji_picker">
-            {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
-          </label>
-        </div>
-      </settings-section>
-      <settings-section
-        v-if="isAWebWidgetInbox || isAnEmailChannel"
-        :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
-        :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
-        :show-border="false"
-      >
-        <div class="w-3/4 pb-4">
-          <sender-name-example-preview
-            :sender-name-type="senderNameType"
-            :business-name="businessName"
-            @update="toggleSenderNameType"
-          />
-          <div class="flex flex-col items-start gap-2 mt-2">
-            <woot-button
-              variant="clear"
-              color-scheme="primary"
-              @click="onClickShowBusinessNameInput"
-            >
-              {{
-                $t(
-                  'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
-                )
-              }}
-            </woot-button>
-            <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
-              <input
-                ref="businessNameInput"
-                v-model="businessName"
-                :placeholder="
-                  $t(
-                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
-                  )
-                "
-                class="mb-0"
-                type="text"
-              />
-              <woot-button color-scheme="primary" @click="updateInbox">
-                {{
-                  $t(
-                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
-                  )
-                }}
-              </woot-button>
-            </div>
-          </div>
-        </div>
-      </settings-section>
-      <settings-section :show-border="false">
-        <woot-submit-button
-          v-if="isAPIInbox"
-          type="submit"
-          :disabled="v$.webhookUrl.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          @click="updateInbox"
-        />
-        <woot-submit-button
-          v-else
-          type="submit"
-          :disabled="v$.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          @click="updateInbox"
-        />
-      </settings-section>
-    </div>
-
-    <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
-      <collaborators-page :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'configuration'">
-      <configuration-page :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'preChatForm'">
-      <pre-chat-form-settings :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'businesshours'">
-      <weekly-availability :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'widgetBuilder'">
-      <widget-builder :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'botConfiguration'">
-      <bot-configuration :inbox="inbox" />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { shouldBeUrl } from 'shared/helpers/Validators';
@@ -771,6 +346,431 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
+  >
+    <SettingIntroBanner
+      :header-image="inbox.avatarUrl"
+      :header-title="inboxName"
+    >
+      <woot-tabs
+        class="settings--tabs"
+        :index="selectedTabIndex"
+        :border="false"
+        @change="onTabChange"
+      >
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+    </SettingIntroBanner>
+
+    <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
+    <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
+
+    <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
+        :show-border="false"
+      >
+        <woot-avatar-uploader
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
+          :src="avatarUrl"
+          class="pb-4"
+          delete-avatar
+          @change="handleImageUpload"
+          @onAvatarDelete="handleAvatarDelete"
+        />
+        <woot-input
+          v-model.trim="selectedInboxName"
+          class="w-3/4 pb-4"
+          :class="{ error: v$.selectedInboxName.$error }"
+          :label="inboxNameLabel"
+          :placeholder="inboxNamePlaceHolder"
+          :error="
+            v$.selectedInboxName.$error
+              ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
+              : ''
+          "
+          @blur="v$.selectedInboxName.$touch"
+        />
+        <woot-input
+          v-if="isAPIInbox"
+          v-model.trim="webhookUrl"
+          class="w-3/4 pb-4"
+          :class="{ error: v$.webhookUrl.$error }"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
+          "
+          :placeholder="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
+          "
+          :error="
+            v$.webhookUrl.$error
+              ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
+              : ''
+          "
+          @blur="v$.webhookUrl.$touch"
+        />
+        <woot-input
+          v-if="isAWebWidgetInbox"
+          v-model.trim="channelWebsiteUrl"
+          class="w-3/4 pb-4"
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
+          "
+        />
+        <woot-input
+          v-if="isAWebWidgetInbox"
+          v-model.trim="channelWelcomeTitle"
+          class="w-3/4 pb-4"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
+          "
+          :placeholder="
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+            )
+          "
+        />
+
+        <woot-input
+          v-if="isAWebWidgetInbox"
+          v-model.trim="channelWelcomeTagline"
+          class="w-3/4 pb-4"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+          "
+          :placeholder="
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+            )
+          "
+        />
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+          <woot-color-picker v-model="inbox.widget_color" />
+        </label>
+
+        <label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+          <input v-model="whatsAppAPIProviderName" type="text" disabled />
+        </label>
+
+        <label class="w-3/4 pb-4">
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
+          }}
+          <select v-model="greetingEnabled">
+            <option :value="true">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
+                )
+              }}
+            </option>
+            <option :value="false">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
+                )
+              }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
+              )
+            }}
+          </p>
+        </label>
+        <div v-if="greetingEnabled" class="pb-4">
+          <GreetingsEditor
+            v-model.trim="greetingMessage"
+            :label="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
+              )
+            "
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+              )
+            "
+            :richtext="!textAreaChannels"
+          />
+        </div>
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
+          <select v-model="replyTime">
+            <option key="in_a_few_minutes" value="in_a_few_minutes">
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
+              }}
+            </option>
+            <option key="in_a_few_hours" value="in_a_few_hours">
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
+              }}
+            </option>
+            <option key="in_a_day" value="in_a_day">
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
+            </option>
+          </select>
+
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
+          <select v-model="emailCollectEnabled">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
+            }}
+          </p>
+        </label>
+
+        <label class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
+          <select v-model="csatSurveyEnabled">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
+          <select v-model="allowMessagesAfterResolved">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
+              )
+            }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
+          <select v-model="continuityViaEmail">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
+              )
+            }}
+          </p>
+        </label>
+        <div class="w-3/4 pb-4">
+          <label>
+            {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
+          </label>
+          <select v-model="selectedPortalSlug" class="filter__question">
+            <option value="">
+              {{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
+            </option>
+            <option v-for="p in portals" :key="p.slug" :value="p.slug">
+              {{ p.name }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
+          </p>
+        </div>
+        <label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
+          <select v-model="locktoSingleConversation">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
+              )
+            }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox">
+          {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
+        </label>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="attachments"
+            @input="handleFeatureFlag"
+          />
+          <label for="attachments">
+            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="emoji_picker"
+            @input="handleFeatureFlag"
+          />
+          <label for="emoji_picker">
+            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="end_conversation"
+            @input="handleFeatureFlag"
+          />
+          <label for="end_conversation">
+            {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="use_inbox_avatar_for_bot"
+            @input="handleFeatureFlag"
+          />
+          <label for="emoji_picker">
+            {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
+          </label>
+        </div>
+      </SettingsSection>
+      <SettingsSection
+        v-if="isAWebWidgetInbox || isAnEmailChannel"
+        :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
+        :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
+        :show-border="false"
+      >
+        <div class="w-3/4 pb-4">
+          <SenderNameExamplePreview
+            :sender-name-type="senderNameType"
+            :business-name="businessName"
+            @update="toggleSenderNameType"
+          />
+          <div class="flex flex-col items-start gap-2 mt-2">
+            <woot-button
+              variant="clear"
+              color-scheme="primary"
+              @click="onClickShowBusinessNameInput"
+            >
+              {{
+                $t(
+                  'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
+                )
+              }}
+            </woot-button>
+            <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
+              <input
+                ref="businessNameInput"
+                v-model="businessName"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
+                  )
+                "
+                class="mb-0"
+                type="text"
+              />
+              <woot-button color-scheme="primary" @click="updateInbox">
+                {{
+                  $t(
+                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
+                  )
+                }}
+              </woot-button>
+            </div>
+          </div>
+        </div>
+      </SettingsSection>
+      <SettingsSection :show-border="false">
+        <woot-submit-button
+          v-if="isAPIInbox"
+          type="submit"
+          :disabled="v$.webhookUrl.$invalid"
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="uiFlags.isUpdating"
+          @click="updateInbox"
+        />
+        <woot-submit-button
+          v-else
+          type="submit"
+          :disabled="v$.$invalid"
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="uiFlags.isUpdating"
+          @click="updateInbox"
+        />
+      </SettingsSection>
+    </div>
+
+    <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
+      <CollaboratorsPage :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'configuration'">
+      <ConfigurationPage :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'preChatForm'">
+      <PreChatFormSettings :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'businesshours'">
+      <WeeklyAvailability :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'widgetBuilder'">
+      <WidgetBuilder :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'botConfiguration'">
+      <BotConfiguration :inbox="inbox" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .settings--tabs {
   ::v-deep .tabs {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 87ed75e7c..bab40210c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -1,92 +1,3 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.SMTP.TITLE')"
-      :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-enable-smtp">
-          <input
-            v-model="isSMTPEnabled"
-            type="checkbox"
-            name="toggle-enable-smtp"
-          />
-          {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
-        <div v-if="isSMTPEnabled" class="mb-6">
-          <woot-input
-            v-model.trim="address"
-            :class="{ error: v$.address.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
-            @blur="v$.address.$touch"
-          />
-          <woot-input
-            v-model="port"
-            type="number"
-            :class="{ error: v$.port.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
-            @blur="v$.port.$touch"
-          />
-          <woot-input
-            v-model="login"
-            :class="{ error: v$.login.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
-            @blur="v$.login.$touch"
-          />
-          <woot-input
-            v-model="password"
-            :class="{ error: v$.password.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
-            type="password"
-            @blur="v$.password.$touch"
-          />
-          <woot-input
-            v-model.trim="domain"
-            :class="{ error: v$.domain.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
-            @blur="v$.domain.$touch"
-          />
-          <input-radio-group
-            :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
-            :items="encryptionProtocols"
-            :action="handleEncryptionChange"
-          />
-          <single-select-dropdown
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
-            :selected="openSSLVerifyMode"
-            :options="openSSLVerifyModes"
-            :action="handleSSLModeChange"
-          />
-          <single-select-dropdown
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
-            :selected="authMechanism"
-            :options="authMechanisms"
-            :action="handleAuthMechanismChange"
-          />
-        </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
-          :loading="uiFlags.isUpdatingSMTP"
-          :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
-        />
-      </form>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -240,3 +151,92 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SMTP.TITLE')"
+      :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-enable-smtp">
+          <input
+            v-model="isSMTPEnabled"
+            type="checkbox"
+            name="toggle-enable-smtp"
+          />
+          {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
+        <div v-if="isSMTPEnabled" class="mb-6">
+          <woot-input
+            v-model.trim="address"
+            :class="{ error: v$.address.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
+            @blur="v$.address.$touch"
+          />
+          <woot-input
+            v-model="port"
+            type="number"
+            :class="{ error: v$.port.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
+            @blur="v$.port.$touch"
+          />
+          <woot-input
+            v-model="login"
+            :class="{ error: v$.login.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
+            @blur="v$.login.$touch"
+          />
+          <woot-input
+            v-model="password"
+            :class="{ error: v$.password.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
+            type="password"
+            @blur="v$.password.$touch"
+          />
+          <woot-input
+            v-model.trim="domain"
+            :class="{ error: v$.domain.$error }"
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
+            @blur="v$.domain.$touch"
+          />
+          <InputRadioGroup
+            :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
+            :items="encryptionProtocols"
+            :action="handleEncryptionChange"
+          />
+          <SingleSelectDropdown
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
+            :selected="openSSLVerifyMode"
+            :options="openSSLVerifyModes"
+            :action="handleSSLModeChange"
+          />
+          <SingleSelectDropdown
+            class="max-w-[75%] w-full"
+            :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
+            :selected="authMechanism"
+            :options="authMechanisms"
+            :action="handleAuthMechanismChange"
+          />
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
+          :loading="uiFlags.isUpdatingSMTP"
+          :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
+        />
+      </form>
+    </SettingsSection>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index b03915713..5a46d1f85 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -1,157 +1,3 @@
-<template>
-  <div class="mx-8">
-    <div class="widget-builder-container">
-      <div class="settings-container w-100 lg:w-[40%]">
-        <div class="settings-content">
-          <form @submit.prevent="updateWidget">
-            <woot-avatar-uploader
-              :label="
-                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.LABEL')
-              "
-              :src="avatarUrl"
-              delete-avatar
-              @change="handleImageUpload"
-              @onAvatarDelete="handleAvatarDelete"
-            />
-            <woot-input
-              v-model.trim="websiteName"
-              :class="{ error: v$.websiteName.$error }"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.PLACE_HOLDER'
-                )
-              "
-              :error="websiteNameValidationErrorMsg"
-              @blur="v$.websiteName.$touch"
-            />
-            <woot-input
-              v-model.trim="welcomeHeading"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.PLACE_HOLDER'
-                )
-              "
-            />
-            <woot-input
-              v-model.trim="welcomeTagline"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
-                )
-              "
-            />
-            <label>
-              {{
-                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.LABEL')
-              }}
-              <select v-model="replyTime">
-                <option
-                  v-for="option in getReplyTimeOptions"
-                  :key="option.key"
-                  :value="option.value"
-                >
-                  {{ option.text }}
-                </option>
-              </select>
-            </label>
-            <label>
-              {{
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_COLOR_LABEL'
-                )
-              }}
-              <woot-color-picker v-model="color" />
-            </label>
-            <input-radio-group
-              name="widget-bubble-position"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION_LABEL'
-                )
-              "
-              :items="widgetBubblePositions"
-              :action="handleWidgetBubblePositionChange"
-            />
-            <input-radio-group
-              name="widget-bubble-type"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE_LABEL'
-                )
-              "
-              :items="widgetBubbleTypes"
-              :action="handleWidgetBubbleTypeChange"
-            />
-            <woot-input
-              v-model.trim="widgetBubbleLauncherTitle"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.PLACE_HOLDER'
-                )
-              "
-            />
-            <woot-submit-button
-              class="submit-button"
-              :button-text="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
-                )
-              "
-              :loading="uiFlags.isUpdating"
-              :disabled="v$.$invalid || uiFlags.isUpdating"
-            />
-          </form>
-        </div>
-      </div>
-      <div class="widget-container w-100 lg:w-3/5">
-        <input-radio-group
-          name="widget-view-options"
-          :items="getWidgetViewOptions"
-          :action="handleWidgetViewChange"
-          :style="{ 'text-align': 'center' }"
-        />
-        <div v-if="isWidgetPreview" class="widget-preview">
-          <Widget
-            :welcome-heading="welcomeHeading"
-            :welcome-tagline="welcomeTagline"
-            :website-name="websiteName"
-            :logo="avatarUrl"
-            is-online
-            :reply-time="replyTime"
-            :color="color"
-            :widget-bubble-position="widgetBubblePosition"
-            :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
-            :widget-bubble-type="widgetBubbleType"
-          />
-        </div>
-        <div v-else class="widget-script">
-          <woot-code :script="widgetScript" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -418,6 +264,160 @@ export default {
 };
 </script>
 
+<template>
+  <div class="mx-8">
+    <div class="widget-builder-container">
+      <div class="settings-container w-100 lg:w-[40%]">
+        <div class="settings-content">
+          <form @submit.prevent="updateWidget">
+            <woot-avatar-uploader
+              :label="
+                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.LABEL')
+              "
+              :src="avatarUrl"
+              delete-avatar
+              @change="handleImageUpload"
+              @onAvatarDelete="handleAvatarDelete"
+            />
+            <woot-input
+              v-model.trim="websiteName"
+              :class="{ error: v$.websiteName.$error }"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.PLACE_HOLDER'
+                )
+              "
+              :error="websiteNameValidationErrorMsg"
+              @blur="v$.websiteName.$touch"
+            />
+            <woot-input
+              v-model.trim="welcomeHeading"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.PLACE_HOLDER'
+                )
+              "
+            />
+            <woot-input
+              v-model.trim="welcomeTagline"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
+                )
+              "
+            />
+            <label>
+              {{
+                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.LABEL')
+              }}
+              <select v-model="replyTime">
+                <option
+                  v-for="option in getReplyTimeOptions"
+                  :key="option.key"
+                  :value="option.value"
+                >
+                  {{ option.text }}
+                </option>
+              </select>
+            </label>
+            <label>
+              {{
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_COLOR_LABEL'
+                )
+              }}
+              <woot-color-picker v-model="color" />
+            </label>
+            <InputRadioGroup
+              name="widget-bubble-position"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION_LABEL'
+                )
+              "
+              :items="widgetBubblePositions"
+              :action="handleWidgetBubblePositionChange"
+            />
+            <InputRadioGroup
+              name="widget-bubble-type"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE_LABEL'
+                )
+              "
+              :items="widgetBubbleTypes"
+              :action="handleWidgetBubbleTypeChange"
+            />
+            <woot-input
+              v-model.trim="widgetBubbleLauncherTitle"
+              :label="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.PLACE_HOLDER'
+                )
+              "
+            />
+            <woot-submit-button
+              class="submit-button"
+              :button-text="
+                $t(
+                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
+                )
+              "
+              :loading="uiFlags.isUpdating"
+              :disabled="v$.$invalid || uiFlags.isUpdating"
+            />
+          </form>
+        </div>
+      </div>
+      <div class="widget-container w-100 lg:w-3/5">
+        <InputRadioGroup
+          name="widget-view-options"
+          class="text-center"
+          :items="getWidgetViewOptions"
+          :action="handleWidgetViewChange"
+        />
+        <div v-if="isWidgetPreview" class="widget-preview">
+          <Widget
+            :welcome-heading="welcomeHeading"
+            :welcome-tagline="welcomeTagline"
+            :website-name="websiteName"
+            :logo="avatarUrl"
+            is-online
+            :reply-time="replyTime"
+            :color="color"
+            :widget-bubble-position="widgetBubblePosition"
+            :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
+            :widget-bubble-type="widgetBubbleType"
+          />
+        </div>
+        <div v-else class="widget-script">
+          <woot-code :script="widgetScript" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/woot';
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
index 328e6da48..08279c1cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -1,61 +1,3 @@
-<template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: v$.inboxName.$error }">
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
-        <input
-          v-model.trim="inboxName"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
-          @blur="v$.inboxName.$touch"
-        />
-        <span v-if="v$.inboxName.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: v$.phoneNumber.$error }">
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
-        <input
-          v-model.trim="phoneNumber"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
-          @blur="v$.phoneNumber.$touch"
-        />
-        <span v-if="v$.phoneNumber.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: v$.apiKey.$error }">
-        <span>
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
-        </span>
-        <input
-          v-model.trim="apiKey"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
-          @blur="v$.apiKey.$touch"
-        />
-        <span v-if="v$.apiKey.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
-      />
-    </div>
-  </form>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -122,3 +64,61 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
+        <input
+          v-model.trim="inboxName"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
+          @blur="v$.inboxName.$touch"
+        />
+        <span v-if="v$.inboxName.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model.trim="phoneNumber"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
+          @blur="v$.phoneNumber.$touch"
+        />
+        <span v-if="v$.phoneNumber.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.apiKey.$error }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
+        </span>
+        <input
+          v-model.trim="apiKey"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
+          @blur="v$.apiKey.$touch"
+        />
+        <span v-if="v$.apiKey.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-full">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
index fc7be2958..410411b2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -1,56 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.channelName.$error }">
-          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
-          <input
-            v-model.trim="channelName"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-            "
-            @blur="v$.channelName.$touch"
-          />
-          <span v-if="v$.channelName.$error" class="message">{{
-            $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.ERROR')
-          }}</span>
-        </label>
-      </div>
-
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.webhookUrl.$error }">
-          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
-          <input
-            v-model.trim="webhookUrl"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
-            "
-            @blur="v$.webhookUrl.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -114,3 +61,56 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <span v-if="v$.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.webhookUrl.$error }">
+          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
+          <input
+            v-model.trim="webhookUrl"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
+            "
+            @blur="v$.webhookUrl.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
index d1f519ce1..035f23e91 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
@@ -1,3 +1,76 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+
+const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+
+export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      accountId: '',
+      apiKey: '',
+      apiSecret: '',
+      applicationId: '',
+      inboxName: '',
+      phoneNumber: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    inboxName: { required },
+    phoneNumber: { required, shouldStartWithPlusSign },
+    apiKey: { required },
+    apiSecret: { required },
+    applicationId: { required },
+    accountId: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const smsChannel = await this.$store.dispatch('inboxes/createChannel', {
+          name: this.inboxName,
+          channel: {
+            type: 'sms',
+            phone_number: this.phoneNumber,
+            provider_config: {
+              api_key: this.apiKey,
+              api_secret: this.apiSecret,
+              application_id: this.applicationId,
+              account_id: this.accountId,
+            },
+          },
+        });
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: smsChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -108,77 +181,3 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-
-const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
-
-export default {
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      accountId: '',
-      apiKey: '',
-      apiSecret: '',
-      applicationId: '',
-      inboxName: '',
-      phoneNumber: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  validations: {
-    inboxName: { required },
-    phoneNumber: { required, shouldStartWithPlusSign },
-    apiKey: { required },
-    apiSecret: { required },
-    applicationId: { required },
-    accountId: { required },
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const smsChannel = await this.$store.dispatch('inboxes/createChannel', {
-          name: this.inboxName,
-          channel: {
-            type: 'sms',
-            phone_number: this.phoneNumber,
-            provider_config: {
-              api_key: this.apiKey,
-              api_secret: this.apiSecret,
-              application_id: this.applicationId,
-              account_id: this.accountId,
-            },
-          },
-        });
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: smsChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
index 44b8b5984..88eba6b4e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -1,3 +1,76 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
+
+export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      inboxName: '',
+      phoneNumber: '',
+      apiKey: '',
+      phoneNumberId: '',
+      businessAccountId: '',
+    };
+  },
+  computed: {
+    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+  },
+  validations: {
+    inboxName: { required },
+    phoneNumber: { required, isPhoneE164OrEmpty },
+    apiKey: { required },
+    phoneNumberId: { required, isNumber },
+    businessAccountId: { required, isNumber },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const whatsappChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.inboxName,
+            channel: {
+              type: 'whatsapp',
+              phone_number: this.phoneNumber,
+              provider: 'whatsapp_cloud',
+              provider_config: {
+                api_key: this.apiKey,
+                phone_number_id: this.phoneNumberId,
+                business_account_id: this.businessAccountId,
+              },
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: whatsappChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -93,76 +166,3 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
-
-export default {
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      inboxName: '',
-      phoneNumber: '',
-      apiKey: '',
-      phoneNumberId: '',
-      businessAccountId: '',
-    };
-  },
-  computed: {
-    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
-  },
-  validations: {
-    inboxName: { required },
-    phoneNumber: { required, isPhoneE164OrEmpty },
-    apiKey: { required },
-    phoneNumberId: { required, isNumber },
-    businessAccountId: { required, isNumber },
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const whatsappChannel = await this.$store.dispatch(
-          'inboxes/createChannel',
-          {
-            name: this.inboxName,
-            channel: {
-              type: 'whatsapp',
-              phone_number: this.phoneNumber,
-              provider: 'whatsapp_cloud',
-              provider_config: {
-                api_key: this.apiKey,
-                phone_number_id: this.phoneNumberId,
-                business_account_id: this.businessAccountId,
-              },
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: whatsappChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(
-          error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index 375e5aefb..0326cd288 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    v-if="!provider"
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      class="max-w-4xl"
-      :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
-    />
-    <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
-      <channel-selector
-        v-for="emailProvider in emailProviderList"
-        :key="emailProvider.key"
-        :class="{ inactive: !emailProvider.isEnabled }"
-        :title="emailProvider.title"
-        :src="emailProvider.src"
-        @click="() => onClick(emailProvider)"
-      />
-    </div>
-  </div>
-  <microsoft v-else-if="provider === 'microsoft'" />
-  <google v-else-if="provider === 'google'" />
-  <forward-to-option v-else-if="provider === 'other_provider'" />
-</template>
 <script setup>
 import { ref, computed } from 'vue';
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
@@ -76,3 +51,29 @@ function onClick(emailProvider) {
   }
 }
 </script>
+
+<template>
+  <div
+    v-if="!provider"
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      class="max-w-4xl"
+      :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
+    />
+    <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
+      <ChannelSelector
+        v-for="emailProvider in emailProviderList"
+        :key="emailProvider.key"
+        :class="{ inactive: !emailProvider.isEnabled }"
+        :title="emailProvider.title"
+        :src="emailProvider.src"
+        @click="() => onClick(emailProvider)"
+      />
+    </div>
+  </div>
+  <Microsoft v-else-if="provider === 'microsoft'" />
+  <Google v-else-if="provider === 'google'" />
+  <ForwardToOption v-else-if="provider === 'other_provider'" />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 0bb4b5e10..0393fa6f0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -1,96 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <div
-      v-if="!hasLoginStarted"
-      class="flex flex-col items-center justify-center h-full text-center"
-    >
-      <a href="#" @click="startLogin()">
-        <img
-          class="w-auto h-10"
-          src="~dashboard/assets/images/channels/facebook_login.png"
-          alt="Facebook-logo"
-        />
-      </a>
-      <p class="py-6">
-        {{
-          useInstallationName(
-            $t('INBOX_MGMT.ADD.FB.HELP'),
-            globalConfig.installationName
-          )
-        }}
-      </p>
-    </div>
-    <div v-else>
-      <div v-if="hasError" class="max-w-lg mx-auto text-center">
-        <h5>{{ errorStateMessage }}</h5>
-        <p
-          v-if="errorStateDescription"
-          v-dompurify-html="errorStateDescription"
-        />
-      </div>
-      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
-      <form
-        v-else
-        class="flex flex-wrap mx-0"
-        @submit.prevent="createChannel()"
-      >
-        <div class="w-full">
-          <page-header
-            :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
-            :header-content="
-              useInstallationName(
-                $t('INBOX_MGMT.ADD.DETAILS.DESC'),
-                globalConfig.installationName
-              )
-            "
-          />
-        </div>
-        <div class="w-3/5">
-          <div class="w-full">
-            <div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
-              {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
-              <multiselect
-                v-model.trim="selectedPage"
-                :close-on-select="true"
-                :allow-empty="true"
-                :options="getSelectablePages"
-                track-by="id"
-                label="name"
-                :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-                :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
-                selected-label
-                @select="setPageName"
-              />
-              <span v-if="v$.selectedPage.$error" class="message">
-                {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
-              </span>
-            </div>
-          </div>
-          <div class="w-full">
-            <label :class="{ error: v$.pageName.$error }">
-              {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
-              <input
-                v-model.trim="pageName"
-                type="text"
-                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
-                @input="v$.pageName.$touch"
-              />
-              <span v-if="v$.pageName.$error" class="message">
-                {{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
-              </span>
-            </label>
-          </div>
-          <div class="w-full text-right">
-            <input type="submit" value="Create Inbox" class="button" />
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
 <script>
 /* eslint-env browser */
 /* global FB */
@@ -154,7 +61,6 @@ export default {
       return this.pageList.filter(item => !item.exists);
     },
     ...mapGetters({
-      currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
     }),
   },
@@ -294,3 +200,97 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <div
+      v-if="!hasLoginStarted"
+      class="flex flex-col items-center justify-center h-full text-center"
+    >
+      <a href="#" @click="startLogin()">
+        <img
+          class="w-auto h-10"
+          src="~dashboard/assets/images/channels/facebook_login.png"
+          alt="Facebook-logo"
+        />
+      </a>
+      <p class="py-6">
+        {{
+          useInstallationName(
+            $t('INBOX_MGMT.ADD.FB.HELP'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
+    </div>
+    <div v-else>
+      <div v-if="hasError" class="max-w-lg mx-auto text-center">
+        <h5>{{ errorStateMessage }}</h5>
+        <p
+          v-if="errorStateDescription"
+          v-dompurify-html="errorStateDescription"
+        />
+      </div>
+      <LoadingState v-else-if="showLoader" :message="emptyStateMessage" />
+      <form
+        v-else
+        class="flex flex-wrap mx-0"
+        @submit.prevent="createChannel()"
+      >
+        <div class="w-full">
+          <PageHeader
+            :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
+            :header-content="
+              useInstallationName(
+                $t('INBOX_MGMT.ADD.DETAILS.DESC'),
+                globalConfig.installationName
+              )
+            "
+          />
+        </div>
+        <div class="w-3/5">
+          <div class="w-full">
+            <div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
+              {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
+              <multiselect
+                v-model.trim="selectedPage"
+                close-on-select
+                allow-empty
+                :options="getSelectablePages"
+                track-by="id"
+                label="name"
+                :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+                :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
+                selected-label
+                @select="setPageName"
+              />
+              <span v-if="v$.selectedPage.$error" class="message">
+                {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
+              </span>
+            </div>
+          </div>
+          <div class="w-full">
+            <label :class="{ error: v$.pageName.$error }">
+              {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
+              <input
+                v-model.trim="pageName"
+                type="text"
+                :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
+                @input="v$.pageName.$touch"
+              />
+              <span v-if="v$.pageName.$error" class="message">
+                {{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
+              </span>
+            </label>
+          </div>
+          <div class="w-full text-right">
+            <input type="submit" value="Create Inbox" class="button" />
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
index 5ca52f839..85faa48dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -1,8 +1,78 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+
+export default {
+  components: {
+    PageHeader,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      channelName: '',
+      lineChannelId: '',
+      lineChannelSecret: '',
+      lineChannelToken: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    lineChannelId: { required },
+    lineChannelSecret: { required },
+    lineChannelToken: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const lineChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName,
+            channel: {
+              type: 'line',
+              line_channel_id: this.lineChannelId,
+              line_channel_secret: this.lineChannelSecret,
+              line_channel_token: this.lineChannelToken,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: lineChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
     />
@@ -75,73 +145,3 @@
     </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader.vue';
-
-export default {
-  components: {
-    PageHeader,
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      channelName: '',
-      lineChannelId: '',
-      lineChannelSecret: '',
-      lineChannelToken: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-  },
-  validations: {
-    channelName: { required },
-    lineChannelId: { required },
-    lineChannelSecret: { required },
-    lineChannelToken: { required },
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const lineChannel = await this.$store.dispatch(
-          'inboxes/createChannel',
-          {
-            name: this.channelName,
-            channel: {
-              type: 'line',
-              line_channel_id: this.lineChannelId,
-              line_channel_secret: this.lineChannelSecret,
-              line_channel_token: this.lineChannelToken,
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: lineChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 81e271cbf..4f9eb4fc6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -1,29 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
-    />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label>
-        {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
-        <select v-model="provider">
-          <option value="twilio">
-            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.TWILIO') }}
-          </option>
-          <option value="360dialog">
-            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.BANDWIDTH') }}
-          </option>
-        </select>
-      </label>
-    </div>
-    <twilio v-if="provider === 'twilio'" type="sms" />
-    <bandwidth-sms v-else />
-  </div>
-</template>
-
 <script>
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import BandwidthSms from './BandwidthSms.vue';
@@ -42,3 +16,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
+    />
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label>
+        {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
+        <select v-model="provider">
+          <option value="twilio">
+            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.TWILIO') }}
+          </option>
+          <option value="360dialog">
+            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.BANDWIDTH') }}
+          </option>
+        </select>
+      </label>
+    </div>
+    <Twilio v-if="provider === 'twilio'" type="sms" />
+    <BandwidthSms v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
index 72c8ee853..b92645b58 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -1,39 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.botToken.$error }">
-          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
-          <input
-            v-model.trim="botToken"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
-            "
-            @blur="v$.botToken.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -97,3 +61,39 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.botToken.$error }">
+          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
+          <input
+            v-model.trim="botToken"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
+            "
+            @blur="v$.botToken.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
index 1b0bd4186..3bce5493c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -1,4 +1,113 @@
 <!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      accountSID: '',
+      apiKeySID: '',
+      authToken: '',
+      medium: this.type,
+      channelName: '',
+      messagingServiceSID: '',
+      useMessagingService: false,
+      useAPIKey: false,
+      phoneNumber: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+    authTokeni18nKey() {
+      return this.useAPIKey ? 'API_KEY_SECRET' : 'AUTH_TOKEN';
+    },
+  },
+  validations() {
+    let validations = {
+      channelName: { required },
+
+      authToken: { required },
+      accountSID: { required },
+      medium: { required },
+    };
+    if (this.phoneNumber) {
+      validations = {
+        ...validations,
+        phoneNumber: { required, isPhoneE164OrEmpty },
+        messagingServiceSID: {},
+      };
+    } else {
+      validations = {
+        ...validations,
+        messagingServiceSID: { required },
+        phoneNumber: {},
+      };
+    }
+
+    if (this.useAPIKey) {
+      validations = {
+        ...validations,
+        apiKeySID: { required },
+      };
+    }
+    return validations;
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const twilioChannel = await this.$store.dispatch(
+          'inboxes/createTwilioChannel',
+          {
+            twilio_channel: {
+              name: this.channelName,
+              medium: this.medium,
+              account_sid: this.accountSID,
+              api_key_sid: this.apiKeySID,
+              auth_token: this.authToken,
+              messaging_service_sid: this.messagingServiceSID,
+              phone_number: this.messagingServiceSID
+                ? null
+                : `+${this.phoneNumber.replace(/\D/g, '')}`,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: twilioChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -135,114 +244,6 @@
   </form>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import { required } from '@vuelidate/validators';
-import router from '../../../../index';
-import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
-
-export default {
-  props: {
-    type: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      accountSID: '',
-      apiKeySID: '',
-      authToken: '',
-      medium: this.type,
-      channelName: '',
-      messagingServiceSID: '',
-      useMessagingService: false,
-      useAPIKey: false,
-      phoneNumber: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-    authTokeni18nKey() {
-      return this.useAPIKey ? 'API_KEY_SECRET' : 'AUTH_TOKEN';
-    },
-  },
-  validations() {
-    let validations = {
-      channelName: { required },
-
-      authToken: { required },
-      accountSID: { required },
-      medium: { required },
-    };
-    if (this.phoneNumber) {
-      validations = {
-        ...validations,
-        phoneNumber: { required, isPhoneE164OrEmpty },
-        messagingServiceSID: {},
-      };
-    } else {
-      validations = {
-        ...validations,
-        messagingServiceSID: { required },
-        phoneNumber: {},
-      };
-    }
-
-    if (this.useAPIKey) {
-      validations = {
-        ...validations,
-        apiKeySID: { required },
-      };
-    }
-    return validations;
-  },
-  methods: {
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-
-      try {
-        const twilioChannel = await this.$store.dispatch(
-          'inboxes/createTwilioChannel',
-          {
-            twilio_channel: {
-              name: this.channelName,
-              medium: this.medium,
-              account_sid: this.accountSID,
-              api_key_sid: this.apiKeySID,
-              auth_token: this.authToken,
-              messaging_service_sid: this.messagingServiceSID,
-              phone_number: this.messagingServiceSID
-                ? null
-                : `+${this.phoneNumber.replace(/\D/g, '')}`,
-            },
-          }
-        );
-
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: twilioChannel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .messagingServiceHelptext {
   margin-top: -10px;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
index 01b8f0fa7..216c822f0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,20 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <div class="login-init h-full text-center">
-      <form @submit.prevent="requestAuthorization">
-        <woot-submit-button
-          icon="brand-twitter"
-          button-text="Sign in with Twitter"
-          type="submit"
-          :loading="isRequestingAuthorization"
-        />
-      </form>
-      <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>
-    </div>
-  </div>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import twitterClient from '../../../../../api/channel/twitterClient';
@@ -41,6 +24,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <div class="login-init h-full text-center">
+      <form @submit.prevent="requestAuthorization">
+        <woot-submit-button
+          icon="brand-twitter"
+          button-text="Sign in with Twitter"
+          type="submit"
+          :loading="isRequestingAuthorization"
+        />
+      </form>
+      <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .login-init {
   @apply pt-[30%] text-center;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
index dea9cfcb3..2f1b0067e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -1,8 +1,81 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+
+export default {
+  components: {
+    PageHeader,
+    GreetingsEditor,
+  },
+  data() {
+    return {
+      inboxName: '',
+      channelWebsiteUrl: '',
+      channelWidgetColor: '#009CE0',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      greetingEnabled: false,
+      greetingMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
+  },
+  methods: {
+    async createChannel() {
+      try {
+        const website = await this.$store.dispatch(
+          'inboxes/createWebsiteChannel',
+          {
+            name: this.inboxName,
+            greeting_enabled: this.greetingEnabled,
+            greeting_message: this.greetingMessage,
+            channel: {
+              type: 'web_widget',
+              website_url: this.channelWebsiteUrl,
+              widget_color: this.channelWidgetColor,
+              welcome_title: this.channelWelcomeTitle,
+              welcome_tagline: this.channelWelcomeTagline,
+            },
+          }
+        );
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: website.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message ||
+            this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
     />
@@ -101,7 +174,7 @@
           }}
         </p>
       </label>
-      <greetings-editor
+      <GreetingsEditor
         v-if="greetingEnabled"
         v-model.trim="greetingMessage"
         class="w-full"
@@ -127,76 +200,3 @@
     </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
-
-export default {
-  components: {
-    PageHeader,
-    GreetingsEditor,
-  },
-  data() {
-    return {
-      inboxName: '',
-      channelWebsiteUrl: '',
-      channelWidgetColor: '#009CE0',
-      channelWelcomeTitle: '',
-      channelWelcomeTagline: '',
-      greetingEnabled: false,
-      greetingMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-    textAreaChannels() {
-      if (
-        this.isATwilioChannel ||
-        this.isATwitterInbox ||
-        this.isAFacebookInbox
-      )
-        return true;
-      return false;
-    },
-  },
-  methods: {
-    async createChannel() {
-      try {
-        const website = await this.$store.dispatch(
-          'inboxes/createWebsiteChannel',
-          {
-            name: this.inboxName,
-            greeting_enabled: this.greetingEnabled,
-            greeting_message: this.greetingMessage,
-            channel: {
-              type: 'web_widget',
-              website_url: this.channelWebsiteUrl,
-              widget_color: this.channelWidgetColor,
-              welcome_title: this.channelWelcomeTitle,
-              welcome_tagline: this.channelWelcomeTagline,
-            },
-          }
-        );
-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: website.id,
-          },
-        });
-      } catch (error) {
-        useAlert(
-          error.message ||
-            this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
index 8206e4651..d361e0f78 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
-    />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label>
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-        <select v-model="provider">
-          <option value="whatsapp_cloud">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
-          </option>
-          <option value="twilio">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
-          </option>
-        </select>
-      </label>
-    </div>
-
-    <twilio v-if="provider === 'twilio'" type="whatsapp" />
-    <three-sixty-dialog-whatsapp v-else-if="provider === '360dialog'" />
-    <cloud-whatsapp v-else />
-  </div>
-</template>
-
 <script>
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import Twilio from './Twilio.vue';
@@ -46,3 +18,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
+    />
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label>
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+        <select v-model="provider">
+          <option value="whatsapp_cloud">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
+          </option>
+          <option value="twilio">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
+          </option>
+        </select>
+      </label>
+    </div>
+
+    <Twilio v-if="provider === 'twilio'" type="whatsapp" />
+    <ThreeSixtyDialogWhatsapp v-else-if="provider === '360dialog'" />
+    <CloudWhatsapp v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
index 196c0e86f..62d85bd1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
@@ -1,54 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.channelName.$error }">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
-          <input
-            v-model.trim="channelName"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-            "
-            @blur="v$.channelName.$touch"
-          />
-          <span v-if="v$.channelName.$error" class="message">{{
-            $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
-          }}</span>
-        </label>
-      </div>
-
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: v$.email.$error }">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
-          <input
-            v-model.trim="email"
-            type="text"
-            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
-            @blur="v$.email.$touch"
-          />
-        </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
-        </p>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -117,3 +66,54 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <span v-if="v$.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.email.$error }">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
+          <input
+            v-model.trim="email"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
+            @blur="v$.email.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
index b0588bdd6..0e8c506dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
@@ -6,6 +6,7 @@ defineComponent({
   name: 'GoogleOAuthChannel',
 });
 </script>
+
 <template>
   <OAuthChannel
     provider="google"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
index b6ccef365..fce007ca0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
@@ -64,11 +64,12 @@ async function requestAuthorization() {
   }
 }
 </script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <settings-sub-page-header
+    <SettingsSubPageHeader
       :header-title="title"
       :header-content="description"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
index 976b65534..6c8947bfa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
@@ -6,8 +6,6 @@ import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
 
-const { t } = useI18n();
-
 const props = defineProps({
   inbox: {
     type: Object,
@@ -15,6 +13,8 @@ const props = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const isRequestingAuthorization = ref(false);
 
 async function requestAuthorization() {
@@ -37,7 +37,7 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <inbox-reconnection-required
+  <InboxReconnectionRequired
     class="mx-8 mt-5"
     @reauthorize="requestAuthorization"
   />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
index 459ca899d..e662d3f72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -1,53 +1,3 @@
-<template>
-  <div class="mx-8">
-    <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
-    <form
-      v-else
-      class="flex flex-wrap mx-0"
-      @submit.prevent="updateActiveAgentBot"
-    >
-      <settings-section
-        :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
-        :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
-      >
-        <div class="w-3/5">
-          <label>
-            <select v-model="selectedAgentBotId">
-              <option value="" disabled selected>
-                {{ $t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER') }}
-              </option>
-              <option
-                v-for="agentBot in agentBots"
-                :key="agentBot.id"
-                :value="agentBot.id"
-              >
-                {{ agentBot.name }}
-              </option>
-            </select>
-          </label>
-          <div class="button-container">
-            <woot-submit-button
-              :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
-              :loading="uiFlags.isSettingAgentBot"
-            />
-            <woot-button
-              type="button"
-              :disabled="!selectedAgentBotId"
-              :loading="uiFlags.isDisconnecting"
-              variant="smooth"
-              color-scheme="alert"
-              class="button--disconnect"
-              @click="disconnectBot"
-            >
-              {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
-            </woot-button>
-          </div>
-        </div>
-      </settings-section>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -121,6 +71,56 @@ export default {
 };
 </script>
 
+<template>
+  <div class="mx-8">
+    <LoadingState v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
+    <form
+      v-else
+      class="flex flex-wrap mx-0"
+      @submit.prevent="updateActiveAgentBot"
+    >
+      <SettingsSection
+        :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
+        :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
+      >
+        <div class="w-3/5">
+          <label>
+            <select v-model="selectedAgentBotId">
+              <option value="" disabled selected>
+                {{ $t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER') }}
+              </option>
+              <option
+                v-for="agentBot in agentBots"
+                :key="agentBot.id"
+                :value="agentBot.id"
+              >
+                {{ agentBot.name }}
+              </option>
+            </select>
+          </label>
+          <div class="button-container">
+            <woot-submit-button
+              :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+              :loading="uiFlags.isSettingAgentBot"
+            />
+            <woot-button
+              type="button"
+              :disabled="!selectedAgentBotId"
+              :loading="uiFlags.isDisconnecting"
+              variant="smooth"
+              color-scheme="alert"
+              class="button--disconnect"
+              @click="disconnectBot"
+            >
+              {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
+            </woot-button>
+          </div>
+        </div>
+      </SettingsSection>
+    </form>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .button--disconnect {
   @apply ml-2;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index 6f6e1bef1..34879f9ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="day-wrap">
-    <div class="checkbox-wrap">
-      <input
-        v-model="isDayEnabled"
-        name="enable-day"
-        class="enable-checkbox"
-        type="checkbox"
-        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
-      />
-    </div>
-    <div class="day">
-      <span>{{ dayName }}</span>
-    </div>
-    <div v-if="isDayEnabled" class="hours-select-wrap">
-      <div class="hours-range">
-        <div class="checkbox-wrap open-all-day">
-          <input
-            v-model="isOpenAllDay"
-            name="enable-open-all-day"
-            class="enable-checkbox"
-            type="checkbox"
-            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
-          />
-          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
-        </div>
-        <multiselect
-          v-model="fromTime"
-          :options="fromTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-        <div class="separator-icon">
-          <fluent-icon icon="subtract" type="solid" size="16" />
-        </div>
-        <multiselect
-          v-model="toTime"
-          :options="toTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-      </div>
-      <div v-if="hasError" class="date-error">
-        <span class="error">{{
-          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
-        }}</span>
-      </div>
-    </div>
-    <div v-else class="day-unavailable">
-      <span>
-        {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
-      </span>
-    </div>
-    <div>
-      <span v-if="isDayEnabled && !hasError" class="label">
-        {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import parse from 'date-fns/parse';
 import differenceInMinutes from 'date-fns/differenceInMinutes';
@@ -79,7 +10,6 @@ export default {
   props: {
     dayName: {
       type: String,
-      default: '',
       required: true,
     },
     timeSlot: {
@@ -201,6 +131,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="day-wrap">
+    <div class="checkbox-wrap">
+      <input
+        v-model="isDayEnabled"
+        name="enable-day"
+        class="enable-checkbox"
+        type="checkbox"
+        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
+      />
+    </div>
+    <div class="day">
+      <span>{{ dayName }}</span>
+    </div>
+    <div v-if="isDayEnabled" class="hours-select-wrap">
+      <div class="hours-range">
+        <div class="checkbox-wrap open-all-day">
+          <input
+            v-model="isOpenAllDay"
+            name="enable-open-all-day"
+            class="enable-checkbox"
+            type="checkbox"
+            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
+          />
+          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
+        </div>
+        <multiselect
+          v-model="fromTime"
+          :options="fromTimeSlots"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+          :allow-empty="false"
+          :disabled="isOpenAllDay"
+        />
+        <div class="separator-icon">
+          <fluent-icon icon="subtract" type="solid" size="16" />
+        </div>
+        <multiselect
+          v-model="toTime"
+          :options="toTimeSlots"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+          :allow-empty="false"
+          :disabled="isOpenAllDay"
+        />
+      </div>
+      <div v-if="hasError" class="date-error">
+        <span class="error">{{
+          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
+        }}</span>
+      </div>
+    </div>
+    <div v-else class="day-unavailable">
+      <span>
+        {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
+      </span>
+    </div>
+    <div>
+      <span v-if="isDayEnabled && !hasError" class="label">
+        {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
+      </span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .day-wrap::v-deep .multiselect {
   @apply m-0 w-[7.5rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
index fe6a80586..0357e09a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
@@ -3,7 +3,7 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 </script>
 
 <template>
-  <banner
+  <Banner
     color-scheme="alert"
     class="justify-start rounded-md"
     :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
index 6f08afc3d..ded4fb9d7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
@@ -1,23 +1,3 @@
-<template>
-  <div>
-    <label class="radio-group-label">{{ label }}</label>
-    <div class="radio-group">
-      <div v-for="item in items" :key="item.id" class="radio-group-item">
-        <label class="radio-group-item-label">
-          <input
-            class="radio-input"
-            :name="`${name} -radio-input`"
-            type="radio"
-            :checked="item.checked"
-            @change="action({ ...item, checked: true })"
-          />
-          <span>{{ item.title }}</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -41,6 +21,26 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <label class="radio-group-label">{{ label }}</label>
+    <div class="radio-group">
+      <div v-for="item in items" :key="item.id" class="radio-group-item">
+        <label class="radio-group-item-label">
+          <input
+            class="radio-input"
+            :name="`${name} -radio-input`"
+            type="radio"
+            :checked="item.checked"
+            @change="action({ ...item, checked: true })"
+          />
+          <span>{{ item.title }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .radio-group-label {
   margin-bottom: var(--space-smaller);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 126b57198..9f7be45ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -1,48 +1,3 @@
-<template>
-  <div class="flex flex-row items-center gap-4">
-    <button
-      v-for="keyOption in senderNameKeyOptions"
-      :key="keyOption.key"
-      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
-      @click="toggleSenderNameType(keyOption.key)"
-    >
-      <preview-card
-        :heading="keyOption.heading"
-        :content="keyOption.content"
-        :active="keyOption.key === senderNameType"
-      >
-        <div class="flex flex-col items-start p-3 gap-2">
-          <span class="text-xs">
-            {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
-          </span>
-          <div class="flex flex-row items-center gap-2">
-            <thumbnail :username="userName(keyOption)" size="32px" />
-            <div class="flex flex-col items-start gap-1">
-              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
-                <span
-                  v-if="isKeyOptionFriendly(keyOption.key)"
-                  class="text-xs font-semibold leading-tight"
-                >
-                  {{ keyOption.preview.senderName }}
-                </span>
-                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
-                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
-                </span>
-                <span
-                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
-                >
-                  {{ businessName || keyOption.preview.businessName }}
-                </span>
-              </div>
-              <span class="text-xs">{{ keyOption.preview.email }}</span>
-            </div>
-          </div>
-        </div>
-      </preview-card>
-    </button>
-  </div>
-</template>
-
 <script>
 import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -111,3 +66,48 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-row items-center gap-4">
+    <button
+      v-for="keyOption in senderNameKeyOptions"
+      :key="keyOption.key"
+      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
+      @click="toggleSenderNameType(keyOption.key)"
+    >
+      <PreviewCard
+        :heading="keyOption.heading"
+        :content="keyOption.content"
+        :active="keyOption.key === senderNameType"
+      >
+        <div class="flex flex-col items-start p-3 gap-2">
+          <span class="text-xs">
+            {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
+          </span>
+          <div class="flex flex-row items-center gap-2">
+            <Thumbnail :username="userName(keyOption)" size="32px" />
+            <div class="flex flex-col items-start gap-1">
+              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
+                <span
+                  v-if="isKeyOptionFriendly(keyOption.key)"
+                  class="text-xs font-semibold leading-tight"
+                >
+                  {{ keyOption.preview.senderName }}
+                </span>
+                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
+                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
+                </span>
+                <span
+                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
+                >
+                  {{ businessName || keyOption.preview.businessName }}
+                </span>
+              </div>
+              <span class="text-xs">{{ keyOption.preview.email }}</span>
+            </div>
+          </div>
+        </div>
+      </PreviewCard>
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
index 850b5a863..5984ff238 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
@@ -1,20 +1,3 @@
-<template>
-  <div>
-    <label for="dropdown-select">
-      {{ label }}
-    </label>
-    <select
-      id="dropdown-select"
-      v-model="value"
-      name="dropdown-select"
-      @change="action(value)"
-    >
-      <option v-for="option in options" :key="option.key">
-        {{ option.value }}
-      </option>
-    </select>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -42,3 +25,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <label for="dropdown-select">
+      {{ label }}
+    </label>
+    <select
+      id="dropdown-select"
+      v-model="value"
+      name="dropdown-select"
+      @change="action(value)"
+    >
+      <option v-for="option in options" :key="option.key">
+        {{ option.value }}
+      </option>
+    </select>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 5bbc01a92..43cc5bedf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -1,80 +1,3 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
-      :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-business-hours" class="toggle-input-wrap">
-          <input
-            v-model="isBusinessHoursEnabled"
-            type="checkbox"
-            class="ltr:mr-2 rtl:ml-2"
-            name="toggle-business-hours"
-          />
-          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p class="text-slate-700 dark:text-slate-300 mb-4">
-          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
-        </p>
-        <div v-if="isBusinessHoursEnabled" class="mb-6">
-          <div class="max-w-[37.5rem]">
-            <label class="unavailable-input-wrap">
-              {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
-            </label>
-            <div
-              v-if="isRichEditorEnabled"
-              class="py-0 px-4 border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md mx-0 mt-0 mb-4"
-            >
-              <woot-message-editor
-                v-model="unavailableMessage"
-                :enable-variables="true"
-                :is-format-mode="true"
-                class="message-editor"
-                :min-height="4"
-              />
-            </div>
-            <textarea v-else v-model="unavailableMessage" type="text" />
-          </div>
-          <div class="timezone-input-wrap">
-            <label>
-              {{ $t('INBOX_MGMT.BUSINESS_HOURS.TIMEZONE_LABEL') }}
-            </label>
-            <multiselect
-              v-model="timeZone"
-              :options="timeZones"
-              deselect-label=""
-              select-label=""
-              selected-label=""
-              track-by="value"
-              label="label"
-              :close-on-select="true"
-              :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-              :allow-empty="false"
-            />
-          </div>
-
-          <label>
-            {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
-          </label>
-          <business-day
-            v-for="timeSlot in timeSlots"
-            :key="timeSlot.day"
-            :day-name="dayNames[timeSlot.day]"
-            :time-slot="timeSlot"
-            @update="data => onSlotUpdate(timeSlot.day, data)"
-          />
-        </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          :disabled="hasError"
-        />
-      </form>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -194,6 +117,84 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
+      :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-business-hours" class="toggle-input-wrap">
+          <input
+            v-model="isBusinessHoursEnabled"
+            type="checkbox"
+            class="ltr:mr-2 rtl:ml-2"
+            name="toggle-business-hours"
+          />
+          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p class="mb-4 text-slate-700 dark:text-slate-300">
+          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
+        </p>
+        <div v-if="isBusinessHoursEnabled" class="mb-6">
+          <div class="max-w-[37.5rem]">
+            <label class="unavailable-input-wrap">
+              {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
+            </label>
+            <div
+              v-if="isRichEditorEnabled"
+              class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+            >
+              <WootMessageEditor
+                v-model="unavailableMessage"
+                enable-variables
+                is-format-mode
+                class="message-editor"
+                :min-height="4"
+              />
+            </div>
+            <textarea v-else v-model="unavailableMessage" type="text" />
+          </div>
+          <div class="timezone-input-wrap">
+            <label>
+              {{ $t('INBOX_MGMT.BUSINESS_HOURS.TIMEZONE_LABEL') }}
+            </label>
+            <multiselect
+              v-model="timeZone"
+              :options="timeZones"
+              deselect-label=""
+              select-label=""
+              selected-label=""
+              track-by="value"
+              label="label"
+              close-on-select
+              :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+              :allow-empty="false"
+            />
+          </div>
+
+          <label>
+            {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
+          </label>
+          <BusinessDay
+            v-for="timeSlot in timeSlots"
+            :key="timeSlot.day"
+            :day-name="dayNames[timeSlot.day]"
+            :time-slot="timeSlot"
+            @update="data => onSlotUpdate(timeSlot.day, data)"
+          />
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
+          :loading="uiFlags.isUpdating"
+          :disabled="hasError"
+        />
+      </form>
+    </SettingsSection>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .timezone-input-wrap {
   @apply max-w-[37.5rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index 8b370bef4..986f072e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -1,7 +1,3 @@
-<template>
-  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="startLogin" />
-</template>
-
 <script>
 /* global FB */
 import InboxReconnectionRequired from '../components/InboxReconnectionRequired';
@@ -102,6 +98,10 @@ export default {
 };
 </script>
 
+<template>
+  <InboxReconnectionRequired class="mx-8 mt-5" @reauthorize="startLogin" />
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
index d960e9d52..fa5bf16c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -1,81 +1,3 @@
-<template>
-  <div>
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
-    >
-      <multiselect
-        v-model="selectedAgents"
-        :options="agentList"
-        track-by="id"
-        label="name"
-        :multiple="true"
-        :close-on-select="false"
-        :clear-on-select="false"
-        :hide-selected="true"
-        placeholder="Pick some"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-        @select="v$.selectedAgents.$touch"
-      />
-
-      <woot-submit-button
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :loading="isAgentListUpdating"
-        @click="updateAgents"
-      />
-    </settings-section>
-
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
-    >
-      <label class="w-3/4 settings-item">
-        <div class="flex items-center gap-2">
-          <input
-            id="enableAutoAssignment"
-            v-model="enableAutoAssignment"
-            type="checkbox"
-            @change="handleEnableAutoAssignment"
-          />
-          <label for="enableAutoAssignment">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
-          </label>
-        </div>
-
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
-        </p>
-      </label>
-
-      <div
-        v-if="enableAutoAssignment && isEnterprise"
-        class="max-assignment-container"
-      >
-        <woot-input
-          v-model.trim="maxAssignmentLimit"
-          type="number"
-          :class="{ error: v$.maxAssignmentLimit.$error }"
-          :error="maxAssignmentLimitErrors"
-          :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
-          @blur="v$.maxAssignmentLimit.$touch"
-        />
-
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-          {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
-        </p>
-
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :disabled="v$.maxAssignmentLimit.$invalid"
-          @click="updateInbox"
-        />
-      </div>
-    </settings-section>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -194,6 +116,84 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+    >
+      <multiselect
+        v-model="selectedAgents"
+        :options="agentList"
+        track-by="id"
+        label="name"
+        multiple
+        :close-on-select="false"
+        :clear-on-select="false"
+        hide-selected
+        placeholder="Pick some"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+        @select="v$.selectedAgents.$touch"
+      />
+
+      <woot-submit-button
+        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :loading="isAgentListUpdating"
+        @click="updateAgents"
+      />
+    </SettingsSection>
+
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
+    >
+      <label class="w-3/4 settings-item">
+        <div class="flex items-center gap-2">
+          <input
+            id="enableAutoAssignment"
+            v-model="enableAutoAssignment"
+            type="checkbox"
+            @change="handleEnableAutoAssignment"
+          />
+          <label for="enableAutoAssignment">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
+          </label>
+        </div>
+
+        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
+        </p>
+      </label>
+
+      <div
+        v-if="enableAutoAssignment && isEnterprise"
+        class="max-assignment-container"
+      >
+        <woot-input
+          v-model.trim="maxAssignmentLimit"
+          type="number"
+          :class="{ error: v$.maxAssignmentLimit.$error }"
+          :error="maxAssignmentLimitErrors"
+          :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
+          @blur="v$.maxAssignmentLimit.$touch"
+        />
+
+        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+          {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
+        </p>
+
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :disabled="v$.maxAssignmentLimit.$invalid"
+          @click="updateInbox"
+        />
+      </div>
+    </SettingsSection>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
 @import '~dashboard/assets/scss/mixins';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index 1aace4c32..170902ec0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -1,155 +1,3 @@
-<template>
-  <div v-if="isATwilioChannel" class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
-      :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
-    >
-      <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </settings-section>
-  </div>
-  <div v-else-if="isALineChannel" class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
-      :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
-    >
-      <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </settings-section>
-  </div>
-  <div v-else-if="isAWebWidgetInbox">
-    <div class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
-      >
-        <woot-code
-          :script="inbox.web_widget_script"
-          lang="html"
-          :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
-          :enable-code-pen="true"
-        />
-      </settings-section>
-
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
-      >
-        <woot-code :script="inbox.hmac_token" />
-        <template #subTitle>
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
-          >
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
-          </a>
-        </template>
-      </settings-section>
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
-      >
-        <div class="flex items-center gap-2">
-          <input
-            id="hmacMandatory"
-            v-model="hmacMandatory"
-            type="checkbox"
-            @change="handleHmacFlag"
-          />
-          <label for="hmacMandatory">
-            {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
-          </label>
-        </div>
-      </settings-section>
-    </div>
-  </div>
-  <div v-else-if="isAPIInbox" class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
-    >
-      <woot-code :script="inbox.inbox_identifier" />
-    </settings-section>
-
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
-    >
-      <woot-code :script="inbox.hmac_token" />
-    </settings-section>
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
-    >
-      <div class="flex items-center gap-2">
-        <input
-          id="hmacMandatory"
-          v-model="hmacMandatory"
-          type="checkbox"
-          @change="handleHmacFlag"
-        />
-        <label for="hmacMandatory">
-          {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
-        </label>
-      </div>
-    </settings-section>
-  </div>
-  <div v-else-if="isAnEmailChannel">
-    <div class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
-      >
-        <woot-code :script="inbox.forward_to_email" />
-      </settings-section>
-    </div>
-    <imap-settings :inbox="inbox" />
-    <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
-  </div>
-  <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
-    <div v-if="inbox.provider_config" class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')"
-      >
-        <woot-code :script="inbox.provider_config.webhook_verify_token" />
-      </settings-section>
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')"
-      >
-        <woot-code :script="inbox.provider_config.api_key" />
-      </settings-section>
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
-        :sub-title="
-          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
-        "
-      >
-        <div
-          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
-        >
-          <woot-input
-            v-model.trim="whatsAppInboxAPIKey"
-            type="text"
-            class="flex-1 mr-2"
-            :placeholder="
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
-              )
-            "
-          />
-          <woot-button
-            :disabled="v$.whatsAppInboxAPIKey.$invalid"
-            @click="updateWhatsAppInboxAPIKey"
-          >
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
-          </woot-button>
-        </div>
-      </settings-section>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import inboxMixin from 'shared/mixins/inboxMixin';
@@ -236,6 +84,159 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="isATwilioChannel" class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
+      :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
+    >
+      <woot-code :script="inbox.callback_webhook_url" lang="html" />
+    </SettingsSection>
+  </div>
+  <div v-else-if="isALineChannel" class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
+      :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
+    >
+      <woot-code :script="inbox.callback_webhook_url" lang="html" />
+    </SettingsSection>
+  </div>
+  <div v-else-if="isAWebWidgetInbox">
+    <div class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+      >
+        <woot-code
+          :script="inbox.web_widget_script"
+          lang="html"
+          :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
+          enable-code-pen
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
+      >
+        <woot-code :script="inbox.hmac_token" />
+        <template #subTitle>
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
+          </a>
+        </template>
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
+      >
+        <div class="flex items-center gap-2">
+          <input
+            id="hmacMandatory"
+            v-model="hmacMandatory"
+            type="checkbox"
+            @change="handleHmacFlag"
+          />
+          <label for="hmacMandatory">
+            {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
+          </label>
+        </div>
+      </SettingsSection>
+    </div>
+  </div>
+  <div v-else-if="isAPIInbox" class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
+    >
+      <woot-code :script="inbox.inbox_identifier" />
+    </SettingsSection>
+
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
+    >
+      <woot-code :script="inbox.hmac_token" />
+    </SettingsSection>
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
+    >
+      <div class="flex items-center gap-2">
+        <input
+          id="hmacMandatory"
+          v-model="hmacMandatory"
+          type="checkbox"
+          @change="handleHmacFlag"
+        />
+        <label for="hmacMandatory">
+          {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
+        </label>
+      </div>
+    </SettingsSection>
+  </div>
+  <div v-else-if="isAnEmailChannel">
+    <div class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
+      >
+        <woot-code :script="inbox.forward_to_email" />
+      </SettingsSection>
+    </div>
+    <ImapSettings :inbox="inbox" />
+    <SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
+  </div>
+  <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
+    <div v-if="inbox.provider_config" class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')"
+      >
+        <woot-code :script="inbox.provider_config.webhook_verify_token" />
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')"
+      >
+        <woot-code :script="inbox.provider_config.api_key" />
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model.trim="whatsAppInboxAPIKey"
+            type="text"
+            class="flex-1 mr-2"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
+              )
+            "
+          />
+          <woot-button
+            :disabled="v$.whatsAppInboxAPIKey.$invalid"
+            @click="updateWhatsAppInboxAPIKey"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </woot-button>
+        </div>
+      </SettingsSection>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .whatsapp-settings--content {
   ::v-deep input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
index a75aa9a78..4adc4f7dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
@@ -1,57 +1,3 @@
-<template>
-  <woot-modal :show="show" :on-close="closeModal">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="header" />
-      <form class="w-full" @submit.prevent="submit">
-        <woot-input
-          v-model.trim="app.title"
-          :class="{ error: v$.app.title.$error }"
-          class="w-full"
-          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
-          "
-          :error="
-            v$.app.title.$error
-              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_ERROR')
-              : null
-          "
-          data-testid="app-title"
-          @input="v$.app.title.$touch"
-        />
-        <woot-input
-          v-model.trim="app.content.url"
-          :class="{ error: v$.app.content.url.$error }"
-          class="w-full"
-          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
-          "
-          :error="
-            v$.app.content.url.$error
-              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_ERROR')
-              : null
-          "
-          data-testid="app-url"
-          @input="v$.app.content.url.$touch"
-        />
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button
-            :is-loading="isLoading"
-            :is-disabled="v$.$invalid"
-            data-testid="label-submit"
-          >
-            {{ submitButtonLabel }}
-          </woot-button>
-          <woot-button class="button clear" @click.prevent="closeModal">
-            {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
-          </woot-button>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url } from '@vuelidate/validators';
@@ -157,3 +103,57 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal :show="show" :on-close="closeModal">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header :header-title="header" />
+      <form class="w-full" @submit.prevent="submit">
+        <woot-input
+          v-model.trim="app.title"
+          :class="{ error: v$.app.title.$error }"
+          class="w-full"
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
+          "
+          :error="
+            v$.app.title.$error
+              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_ERROR')
+              : null
+          "
+          data-testid="app-title"
+          @input="v$.app.title.$touch"
+        />
+        <woot-input
+          v-model.trim="app.content.url"
+          :class="{ error: v$.app.content.url.$error }"
+          class="w-full"
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
+          "
+          :error="
+            v$.app.content.url.$error
+              ? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_ERROR')
+              : null
+          "
+          data-testid="app-url"
+          @input="v$.app.content.url.$touch"
+        />
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-button
+            :is-loading="isLoading"
+            :is-disabled="v$.$invalid"
+            data-testid="label-submit"
+          >
+            {{ submitButtonLabel }}
+          </woot-button>
+          <woot-button class="button clear" @click.prevent="closeModal">
+            {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
+          </woot-button>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
index e7770cffe..0d12b7e91 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -10,17 +10,17 @@ defineEmits(['edit', 'delete']);
 </script>
 
 <template>
-  <tr class="py-1 max-w-full">
+  <tr class="max-w-full py-1">
     <td
       class="py-4 pr-4 text-sm w-40 max-w-[10rem] truncate"
       :title="app.title"
     >
       {{ app.title }}
     </td>
-    <td class="py-4 pr-4 text-sm max-w-lg truncate" :title="app.content[0].url">
+    <td class="max-w-lg py-4 pr-4 text-sm truncate" :title="app.content[0].url">
       {{ app.content[0].url }}
     </td>
-    <td class="py-4 pr-4 text-sm flex gap-2 sm:pr-0">
+    <td class="flex gap-2 py-4 pr-4 text-sm sm:pr-0">
       <woot-button
         v-tooltip.top="
           $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index ffa47bf0b..3c67dfdcf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -24,7 +24,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      globalConfig: 'globalConfig/get',
       records: 'dashboardApps/getRecords',
       uiFlags: 'dashboardApps/getUIFlags',
     }),
@@ -77,7 +76,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto flex gap-8 flex-col">
+  <div class="flex flex-col flex-1 gap-8 overflow-auto">
     <BaseSettingsHeader
       :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.TITLE')"
       :description="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DESCRIPTION')"
@@ -87,7 +86,7 @@ export default {
     >
       <template #actions>
         <woot-button
-          class="button nice rounded-md"
+          class="rounded-md button nice"
           icon="add-circle"
           @click="openCreatePopup"
         >
@@ -95,7 +94,7 @@ export default {
         </woot-button>
       </template>
     </BaseSettingsHeader>
-    <div class="w-full text-slate-700 dark:text-slate-200 overflow-x-auto">
+    <div class="w-full overflow-x-auto text-slate-700 dark:text-slate-200">
       <p
         v-if="!uiFlags.isFetching && !records.length"
         class="flex flex-col items-center justify-center h-full"
@@ -116,13 +115,13 @@ export default {
               'INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.TABLE_HEADER'
             )"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+            class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
           >
             {{ thHeader }}
           </th>
         </thead>
         <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
-          <dashboard-apps-row
+          <DashboardAppsRow
             v-for="(dashboardAppItem, index) in records"
             :key="dashboardAppItem.id"
             :index="index"
@@ -134,7 +133,7 @@ export default {
       </table>
     </div>
 
-    <dashboard-app-modal
+    <DashboardAppModal
       v-if="showDashboardAppPopup"
       :show="showDashboardAppPopup"
       :mode="mode"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index 3d2d0079f..6a79ca325 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -35,7 +35,7 @@ onMounted(() => {
     <template #body>
       <div class="flex-grow flex-shrink overflow-auto">
         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <integration-item
+          <IntegrationItem
             v-for="item in integrationList"
             :id="item.id"
             :key="item.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index df68ff761..6c6f5f5be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -1,14 +1,75 @@
+<script>
+import { mapGetters } from 'vuex';
+import { frontendURL } from '../../../../helper/URLHelper';
+import { useAlert } from 'dashboard/composables';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  props: {
+    integrationId: {
+      type: [String, Number],
+      required: true,
+    },
+    integrationName: { type: String, default: '' },
+    integrationDescription: { type: String, default: '' },
+    integrationEnabled: { type: Boolean, default: false },
+    integrationAction: { type: String, default: '' },
+    actionButtonText: { type: String, default: '' },
+    deleteConfirmationText: { type: Object, default: () => ({}) },
+  },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  methods: {
+    frontendURL,
+    openDeletePopup() {
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.closeDeletePopup();
+      this.deleteIntegration(this.deleteIntegration);
+      this.$router.push({ name: 'settings_integrations' });
+    },
+    async deleteIntegration() {
+      try {
+        await this.$store.dispatch(
+          'integrations/deleteIntegration',
+          this.integrationId
+        );
+        useAlert(this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
-    class="flex flex-col md:flex-row justify-between items-start md:items-center"
+    class="flex flex-col items-start justify-between md:flex-row md:items-center"
   >
-    <div class="flex items-center justify-start m-0 mx-4 flex-1">
+    <div class="flex items-center justify-start flex-1 m-0 mx-4">
       <img
         :src="`/dashboard/images/integrations/${integrationId}.png`"
-        class="p-2 h-16 w-16 mr-4"
+        class="w-16 h-16 p-2 mr-4"
       />
       <div>
-        <h3 class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100">
+        <h3 class="mb-1 text-xl font-medium text-slate-800 dark:text-slate-100">
           {{ integrationName }}
         </h3>
         <p class="text-slate-700 dark:text-slate-200">
@@ -49,7 +110,7 @@
         </div>
       </router-link>
       <div v-if="!integrationEnabled">
-        <a :href="integrationAction" class="button success nice rounded">
+        <a :href="integrationAction" class="rounded button success nice">
           {{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
         </a>
       </div>
@@ -71,65 +132,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { frontendURL } from '../../../../helper/URLHelper';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    integrationId: {
-      type: [String, Number],
-      required: true,
-    },
-    integrationLogo: { type: String, default: '' },
-    integrationName: { type: String, default: '' },
-    integrationDescription: { type: String, default: '' },
-    integrationEnabled: { type: Boolean, default: false },
-    integrationAction: { type: String, default: '' },
-    actionButtonText: { type: String, default: '' },
-    deleteConfirmationText: { type: Object, default: () => ({}) },
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      accountId: 'getCurrentAccountId',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  methods: {
-    frontendURL,
-    openDeletePopup() {
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      this.deleteIntegration(this.deleteIntegration);
-      this.$router.push({ name: 'settings_integrations' });
-    },
-    async deleteIntegration() {
-      try {
-        await this.$store.dispatch(
-          'integrations/deleteIntegration',
-          this.integrationId
-        );
-        useAlert(this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index be718a08c..ad2daa5f3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
-    <woot-button
-      v-if="showAddButton"
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddHookModal"
-    >
-      {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
-    </woot-button>
-    <div v-if="showIntegrationHooks" class="w-full">
-      <div v-if="isIntegrationMultiple">
-        <multiple-integration-hooks
-          :integration="integration"
-          @delete="openDeletePopup"
-        />
-      </div>
-
-      <div v-if="isIntegrationSingle">
-        <single-integration-hooks
-          :integration="integration"
-          @add="openAddHookModal"
-          @delete="openDeletePopup"
-        />
-      </div>
-    </div>
-
-    <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
-      <new-hook :integration="integration" @close="hideAddHookModal" />
-    </woot-modal>
-
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="deleteTitle"
-      :message="deleteMessage"
-      :confirm-text="confirmText"
-      :reject-text="cancelText"
-    />
-  </div>
-</template>
 <script>
 import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
@@ -148,3 +105,47 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
+    <woot-button
+      v-if="showAddButton"
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddHookModal"
+    >
+      {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
+    </woot-button>
+    <div v-if="showIntegrationHooks" class="w-full">
+      <div v-if="isIntegrationMultiple">
+        <MultipleIntegrationHooks
+          :integration="integration"
+          @delete="openDeletePopup"
+        />
+      </div>
+
+      <div v-if="isIntegrationSingle">
+        <SingleIntegrationHooks
+          :integration="integration"
+          @add="openAddHookModal"
+          @delete="openDeletePopup"
+        />
+      </div>
+    </div>
+
+    <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
+      <NewHook :integration="integration" @close="hideAddHookModal" />
+    </woot-modal>
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="deleteTitle"
+      :message="deleteMessage"
+      :confirm-text="confirmText"
+      :reject-text="cancelText"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
index f8daef2c7..7162596a2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
@@ -44,6 +44,7 @@ const actionURL = computed(() =>
   frontendURL(`accounts/${accountId.value}/settings/integrations/${props.id}`)
 );
 </script>
+
 <template>
   <div
     class="flex flex-col flex-1 p-6 bg-white border border-solid rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-700/50"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index aea851ee7..38deab634 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -1,3 +1,44 @@
+<script>
+import { mapGetters } from 'vuex';
+import hookMixin from './hookMixin';
+export default {
+  mixins: [hookMixin],
+  props: {
+    integration: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    hookHeaders() {
+      return this.integration.visible_properties;
+    },
+    hooks() {
+      if (!this.hasConnectedHooks) {
+        return [];
+      }
+      const { hooks } = this.integration;
+      return hooks.map(hook => ({
+        ...hook,
+        id: hook.id,
+        properties: this.hookHeaders.map(property =>
+          hook.settings[property] ? hook.settings[property] : '--'
+        ),
+      }));
+    },
+  },
+  mounted() {},
+  methods: {
+    inboxName(hook) {
+      return hook.inbox ? hook.inbox.name : '';
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-row gap-4">
     <div class="w-full lg:w-3/5">
@@ -59,43 +100,3 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import hookMixin from './hookMixin';
-export default {
-  mixins: [hookMixin],
-  props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-    hookHeaders() {
-      return this.integration.visible_properties;
-    },
-    hooks() {
-      if (!this.hasConnectedHooks) {
-        return [];
-      }
-      const { hooks } = this.integration;
-      return hooks.map(hook => ({
-        ...hook,
-        id: hook.id,
-        properties: this.hookHeaders.map(property =>
-          hook.settings[property] ? hook.settings[property] : '--'
-        ),
-      }));
-    },
-  },
-  mounted() {},
-  methods: {
-    inboxName(hook) {
-      return hook.inbox ? hook.inbox.name : '';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index 0a0aec841..afaf059a6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -1,42 +1,4 @@
 <!-- eslint-disable vue/v-slot-style -->
-<template>
-  <div class="flex flex-col h-auto overflow-auto integration-hooks">
-    <woot-modal-header
-      :header-title="integration.name"
-      :header-content="integration.description"
-    />
-    <formulate-form
-      #default="{ hasErrors }"
-      v-model="values"
-      class="w-full"
-      @submit="submitForm"
-    >
-      <formulate-input
-        v-for="item in formItems"
-        :key="item.name"
-        v-bind="item"
-      />
-      <formulate-input
-        v-if="isHookTypeInbox"
-        :options="inboxes"
-        type="select"
-        name="inbox"
-        :placeholder="$t('INTEGRATION_APPS.ADD.FORM.INBOX.LABEL')"
-        :label="$t('INTEGRATION_APPS.ADD.FORM.INBOX.PLACEHOLDER')"
-        validation="required"
-        validation-name="Inbox"
-      />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :disabled="hasErrors" :loading="uiFlags.isCreatingHook">
-          {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('INTEGRATION_APPS.ADD.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </formulate-form>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -60,7 +22,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'integrations/getUIFlags',
-      websiteInboxes: 'inboxes/getWebsiteInboxes',
       dialogFlowEnabledInboxes: 'inboxes/dialogFlowEnabledInboxes',
     }),
     inboxes() {
@@ -137,3 +98,42 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto integration-hooks">
+    <woot-modal-header
+      :header-title="integration.name"
+      :header-content="integration.description"
+    />
+    <formulate-form
+      v-slot="{ hasErrors }"
+      v-model="values"
+      class="w-full"
+      @submit="submitForm"
+    >
+      <formulate-input
+        v-for="item in formItems"
+        :key="item.name"
+        v-bind="item"
+      />
+      <formulate-input
+        v-if="isHookTypeInbox"
+        :options="inboxes"
+        type="select"
+        name="inbox"
+        :placeholder="$t('INTEGRATION_APPS.ADD.FORM.INBOX.LABEL')"
+        :label="$t('INTEGRATION_APPS.ADD.FORM.INBOX.PLACEHOLDER')"
+        validation="required"
+        validation-name="Inbox"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :disabled="hasErrors" :loading="uiFlags.isCreatingHook">
+          {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('INTEGRATION_APPS.ADD.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </formulate-form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
index d9f5e5d9e..6b86dcf82 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -1,34 +1,4 @@
-<template>
-  <div class="flex-shrink flex-grow overflow-auto p-4">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div>
-          <div
-            v-if="integrationLoaded"
-            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
-          >
-            <integration
-              :integration-id="integration.id"
-              :integration-logo="integration.logo"
-              :integration-name="integration.name"
-              :integration-description="integration.description"
-              :integration-enabled="integration.enabled"
-              :integration-action="integrationAction()"
-            />
-          </div>
-          <div
-            v-if="integration.enabled"
-            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
-          >
-            <IntegrationHelpText />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
 <script>
-import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration.vue';
 import IntegrationHelpText from './IntegrationHelpText.vue';
@@ -45,7 +15,6 @@ export default {
       type: [String, Number],
       required: true,
     },
-    code: { type: String, default: '' },
   },
   data() {
     return {
@@ -58,11 +27,6 @@ export default {
         this.integrationId
       );
     },
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-    }),
   },
   mounted() {
     this.fetchIntegrations();
@@ -81,3 +45,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-grow flex-shrink p-4 overflow-auto">
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <div>
+          <div
+            v-if="integrationLoaded"
+            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+          >
+            <Integration
+              :integration-id="integration.id"
+              :integration-logo="integration.logo"
+              :integration-name="integration.name"
+              :integration-description="integration.description"
+              :integration-enabled="integration.enabled"
+              :integration-action="integrationAction()"
+            />
+          </div>
+          <div
+            v-if="integration.enabled"
+            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+          >
+            <IntegrationHelpText />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index b26cfd229..2f2e5eef3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,3 +1,16 @@
+<script>
+import hookMixin from './hookMixin';
+export default {
+  mixins: [hookMixin],
+  props: {
+    integration: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex-shrink flex-grow overflow-auto p-4">
     <div class="flex flex-col">
@@ -40,15 +53,3 @@
     </div>
   </div>
 </template>
-<script>
-import hookMixin from './hookMixin';
-export default {
-  mixins: [hookMixin],
-  props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index 24dc2993a..ac090a2d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -1,39 +1,3 @@
-<template>
-  <div
-    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto"
-  >
-    <div
-      class="bg-white dark:bg-slate-800 border-b border-solid border-slate-75 dark:border-slate-700/50 rounded-sm p-4"
-    >
-      <integration
-        :integration-id="integration.id"
-        :integration-logo="integration.logo"
-        :integration-name="integration.name"
-        :integration-description="integration.description"
-        :integration-enabled="integration.enabled"
-        :integration-action="integrationAction"
-        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
-        :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
-        }"
-      />
-    </div>
-    <div v-if="areHooksAvailable" class="p-6 flex-1">
-      <select-channel-warning
-        v-if="!isIntegrationHookEnabled"
-        :has-connected-a-channel="hasConnectedAChannel"
-      />
-      <slack-integration-help-text
-        :selected-channel-name="selectedChannelName"
-      />
-    </div>
-  </div>
-  <div v-else class="flex flex-1 items-center justify-center">
-    <spinner size="" color-scheme="primary" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -83,9 +47,6 @@ export default {
       return this.$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');
     },
     ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
       uiFlags: 'integrations/getUIFlags',
     }),
 
@@ -113,3 +74,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
+    class="flex flex-col flex-1 overflow-auto"
+  >
+    <div
+      class="p-4 bg-white border-b border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+    >
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
+        :delete-confirmation-text="{
+          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
+          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
+        }"
+      />
+    </div>
+    <div v-if="areHooksAvailable" class="flex-1 p-6">
+      <SelectChannelWarning
+        v-if="!isIntegrationHookEnabled"
+        :has-connected-a-channel="hasConnectedAChannel"
+      />
+      <SlackIntegrationHelpText :selected-channel-name="selectedChannelName" />
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center flex-1">
+    <Spinner size="" color-scheme="primary" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index d795eb364..00ad15bbf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,3 +1,57 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
+export default {
+  mixins: [globalConfigMixin, messageFormatterMixin],
+  props: {
+    hasConnectedAChannel: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return { selectedChannelId: '', availableChannels: [] };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+      uiFlags: 'integrations/getUIFlags',
+    }),
+    errorDescription() {
+      return !this.hasConnectedAChannel
+        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
+        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
+    },
+  },
+  methods: {
+    async fetchChannels() {
+      try {
+        this.availableChannels = await this.$store.dispatch(
+          'integrations/listAllSlackChannels'
+        );
+        this.availableChannels.sort((c1, c2) => c1.name - c2.name);
+      } catch {
+        this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
+        this.availableChannels = [];
+      }
+    },
+    async updateIntegration() {
+      try {
+        await this.$store.dispatch('integrations/updateSlack', {
+          referenceId: this.selectedChannelId,
+        });
+        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
+      } catch (error) {
+        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
@@ -71,56 +125,3 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-
-export default {
-  mixins: [globalConfigMixin, messageFormatterMixin],
-  props: {
-    hasConnectedAChannel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return { selectedChannelId: '', availableChannels: [] };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-      uiFlags: 'integrations/getUIFlags',
-    }),
-    errorDescription() {
-      return !this.hasConnectedAChannel
-        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
-        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
-    },
-  },
-  methods: {
-    async fetchChannels() {
-      try {
-        this.availableChannels = await this.$store.dispatch(
-          'integrations/listAllSlackChannels'
-        );
-        this.availableChannels.sort((c1, c2) => c1.name - c2.name);
-      } catch {
-        this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
-        this.availableChannels = [];
-      }
-    },
-    async updateIntegration() {
-      try {
-        await this.$store.dispatch('integrations/updateSlack', {
-          referenceId: this.selectedChannelId,
-        });
-        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
-      } catch (error) {
-        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
index 9a0476f13..e1db3c30b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -1,3 +1,16 @@
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+export default {
+  mixins: [messageFormatterMixin],
+  props: {
+    selectedChannelName: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex-1 w-full p-6 bg-white rounded-md border border-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
@@ -21,15 +34,3 @@
     </div>
   </div>
 </template>
-<script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-export default {
-  mixins: [messageFormatterMixin],
-  props: {
-    selectedChannelName: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
index 6b1a99d83..c9b315443 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.TITLE')"
-    />
-    <webhook-form
-      :value="value"
-      :is-submitting="uiFlags.updatingItem"
-      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.EDIT_SUBMIT')"
-      @submit="onSubmit"
-      @cancel="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
@@ -58,3 +43,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.TITLE')"
+    />
+    <WebhookForm
+      :value="value"
+      :is-submitting="uiFlags.updatingItem"
+      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.EDIT_SUBMIT')"
+      @submit="onSubmit"
+      @cancel="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index 2512edf34..e9ec855dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -1,94 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
-        >
-          <thead>
-            <th
-              v-for="thHeader in $t(
-                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
-              )"
-              :key="thHeader"
-              class="last:text-right"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <webhook-row
-              v-for="(webHookItem, index) in records"
-              :key="webHookItem.id"
-              :index="index"
-              :webhook="webHookItem"
-              @edit="openEditPopup"
-              @delete="openDeletePopup"
-            />
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <new-webhook v-if="showAddPopup" :on-close="hideAddPopup" />
-    </woot-modal>
-
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-webhook
-        v-if="showEditPopup"
-        :id="selectedWebHook.id"
-        :value="selectedWebHook"
-        :on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
-      :message="
-        $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
-          webhookURL: selectedWebHook.url,
-        })
-      "
-      :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
-      :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -164,3 +73,95 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
+    </woot-button>
+
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!uiFlags.fetchingList && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.fetchingList"
+          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
+        />
+
+        <table
+          v-if="!uiFlags.fetchingList && records.length"
+          class="woot-table"
+        >
+          <thead>
+            <th
+              v-for="thHeader in $t(
+                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
+              )"
+              :key="thHeader"
+              class="last:text-right"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <WebhookRow
+              v-for="(webHookItem, index) in records"
+              :key="webHookItem.id"
+              :index="index"
+              :webhook="webHookItem"
+              @edit="openEditPopup"
+              @delete="openDeletePopup"
+            />
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
+    </woot-modal>
+
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditWebhook
+        v-if="showEditPopup"
+        :id="selectedWebHook.id"
+        :value="selectedWebHook"
+        :on-close="hideEditPopup"
+      />
+    </woot-modal>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
+      :message="
+        $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
+          webhookURL: selectedWebHook.url,
+        })
+      "
+      :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
+      :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
index 2513f931a..43b1d2843 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
-      :header-content="
-        useInstallationName(
-          $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.DESC'),
-          globalConfig.installationName
-        )
-      "
-    />
-    <webhook-form
-      :is-submitting="uiFlags.creatingItem"
-      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
-      @submit="onSubmit"
-      @cancel="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -57,3 +37,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-auto overflow-auto flex flex-col">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
+      :header-content="
+        useInstallationName(
+          $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.DESC'),
+          globalConfig.installationName
+        )
+      "
+    />
+    <WebhookForm
+      :is-submitting="uiFlags.creatingItem"
+      :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.ADD_SUBMIT')"
+      @submit="onSubmit"
+      @cancel="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
index 8e35c0405..d399adbdd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -1,59 +1,3 @@
-<template>
-  <form class="flex flex-col w-full" @submit.prevent="onSubmit">
-    <div class="w-full">
-      <label :class="{ error: v$.url.$error }">
-        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
-        <input
-          v-model.trim="url"
-          type="text"
-          name="url"
-          :placeholder="webhookURLInputPlaceholder"
-          @input="v$.url.$touch"
-        />
-        <span v-if="v$.url.$error" class="message">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
-        </span>
-      </label>
-      <label :class="{ error: v$.url.$error }" class="mb-2">
-        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
-      </label>
-      <div class="flex flex-col gap-2.5 mb-4">
-        <div
-          v-for="event in supportedWebhookEvents"
-          :key="event"
-          class="flex items-center"
-        >
-          <input
-            :id="event"
-            v-model="subscriptions"
-            type="checkbox"
-            :value="event"
-            name="subscriptions"
-            class="checkbox"
-          />
-          <label :for="event" class="text-sm">
-            {{ `${getEventLabel(event)} (${event})` }}
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-      <div class="w-full">
-        <woot-button
-          :disabled="v$.$invalid || isSubmitting"
-          :is-loading="isSubmitting"
-        >
-          {{ submitLabel }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="$emit('cancel')">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
@@ -129,6 +73,63 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-col w-full" @submit.prevent="onSubmit">
+    <div class="w-full">
+      <label :class="{ error: v$.url.$error }">
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
+        <input
+          v-model.trim="url"
+          type="text"
+          name="url"
+          :placeholder="webhookURLInputPlaceholder"
+          @input="v$.url.$touch"
+        />
+        <span v-if="v$.url.$error" class="message">
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
+        </span>
+      </label>
+      <label :class="{ error: v$.url.$error }" class="mb-2">
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
+      </label>
+      <div class="flex flex-col gap-2.5 mb-4">
+        <div
+          v-for="event in supportedWebhookEvents"
+          :key="event"
+          class="flex items-center"
+        >
+          <input
+            :id="event"
+            v-model="subscriptions"
+            type="checkbox"
+            :value="event"
+            name="subscriptions"
+            class="checkbox"
+          />
+          <label :for="event" class="text-sm">
+            {{ `${getEventLabel(event)} (${event})` }}
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="w-full">
+        <woot-button
+          :disabled="v$.$invalid || isSubmitting"
+          :is-loading="isSubmitting"
+        >
+          {{ submitLabel }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="$emit('cancel')">
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </div>
+  </form>
+</template>
+
 <style lang="scss" scoped>
 .checkbox {
   @apply mr-2;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index b27cb6162..20e6d6c1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -1,36 +1,3 @@
-<template>
-  <tr class="space-x-2">
-    <td class="max-w-2xl">
-      <div class="font-medium break-words text-slate-700 dark:text-slate-100">
-        {{ webhook.url }}
-      </div>
-      <span class="text-xs text-slate-500 dark:text-slate-400">
-        <span class="font-medium">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
-        </span>
-        <show-more :text="subscribedEvents" :limit="60" />
-      </span>
-    </td>
-    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        icon="edit"
-        @click="$emit('edit', webhook)"
-      />
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        @click="$emit('delete', webhook, index)"
-      />
-    </td>
-  </tr>
-</template>
 <script>
 import webhookMixin from './webhookMixin';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
@@ -56,3 +23,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <tr class="space-x-2">
+    <td class="max-w-2xl">
+      <div class="font-medium break-words text-slate-700 dark:text-slate-100">
+        {{ webhook.url }}
+      </div>
+      <span class="text-xs text-slate-500 dark:text-slate-400">
+        <span class="font-medium">
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
+        </span>
+        <ShowMore :text="subscribedEvents" :limit="60" />
+      </span>
+    </td>
+    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
+      <woot-button
+        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        icon="edit"
+        @click="$emit('edit', webhook)"
+      />
+      <woot-button
+        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        @click="$emit('delete', webhook, index)"
+      />
+    </td>
+  </tr>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index ecfd4bd45..191e00b3a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -1,59 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('LABEL_MGMT.ADD.TITLE')"
-      :header-content="$t('LABEL_MGMT.ADD.DESC')"
-    />
-    <form class="flex flex-wrap mx-0" @submit.prevent="addLabel">
-      <woot-input
-        v-model.trim="title"
-        :class="{ error: v$.title.$error }"
-        class="w-full label-name--input"
-        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
-        :error="labelTitleErrorMessage"
-        data-testid="label-title"
-        @input="v$.title.$touch"
-      />
-
-      <woot-input
-        v-model.trim="description"
-        :class="{ error: v$.description.$error }"
-        class="w-full"
-        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
-        data-testid="label-description"
-        @input="v$.description.$touch"
-      />
-
-      <div class="w-full">
-        <label>
-          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
-          <woot-color-picker v-model="color" />
-        </label>
-      </div>
-      <div class="flex items-center w-full gap-2">
-        <input v-model="showOnSidebar" type="checkbox" :value="true" />
-        <label for="conversation_creation">
-          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
-        </label>
-      </div>
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.title.$invalid || uiFlags.isCreating"
-          :is-loading="uiFlags.isCreating"
-          data-testid="label-submit"
-        >
-          {{ $t('LABEL_MGMT.FORM.CREATE') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -116,6 +60,63 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('LABEL_MGMT.ADD.TITLE')"
+      :header-content="$t('LABEL_MGMT.ADD.DESC')"
+    />
+    <form class="flex flex-wrap mx-0" @submit.prevent="addLabel">
+      <woot-input
+        v-model.trim="title"
+        :class="{ error: v$.title.$error }"
+        class="w-full label-name--input"
+        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
+        :error="labelTitleErrorMessage"
+        data-testid="label-title"
+        @input="v$.title.$touch"
+      />
+
+      <woot-input
+        v-model.trim="description"
+        :class="{ error: v$.description.$error }"
+        class="w-full"
+        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
+        data-testid="label-description"
+        @input="v$.description.$touch"
+      />
+
+      <div class="w-full">
+        <label>
+          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
+          <woot-color-picker v-model="color" />
+        </label>
+      </div>
+      <div class="flex items-center w-full gap-2">
+        <input v-model="showOnSidebar" type="checkbox" :value="true" />
+        <label for="conversation_creation">
+          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
+        </label>
+      </div>
+      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.title.$invalid || uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
+          data-testid="label-submit"
+        >
+          {{ $t('LABEL_MGMT.FORM.CREATE') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
index fbe0257ce..71605db0c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -1,52 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-wrap mx-0" @submit.prevent="editLabel">
-      <woot-input
-        v-model.trim="title"
-        :class="{ error: v$.title.$error }"
-        class="w-full label-name--input"
-        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
-        :error="labelTitleErrorMessage"
-        @input="v$.title.$touch"
-      />
-      <woot-input
-        v-model.trim="description"
-        :class="{ error: v$.description.$error }"
-        class="w-full"
-        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
-        @input="v$.description.$touch"
-      />
-
-      <div class="w-full">
-        <label>
-          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
-          <woot-color-picker v-model="color" />
-        </label>
-      </div>
-      <div class="flex items-center w-full gap-2">
-        <input v-model="showOnSidebar" type="checkbox" :value="true" />
-        <label for="conversation_creation">
-          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
-        </label>
-      </div>
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.title.$invalid || uiFlags.isUpdating"
-          :is-loading="uiFlags.isUpdating"
-        >
-          {{ $t('LABEL_MGMT.FORM.EDIT') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -119,6 +70,56 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="flex flex-wrap mx-0" @submit.prevent="editLabel">
+      <woot-input
+        v-model.trim="title"
+        :class="{ error: v$.title.$error }"
+        class="w-full label-name--input"
+        :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
+        :error="labelTitleErrorMessage"
+        @input="v$.title.$touch"
+      />
+      <woot-input
+        v-model.trim="description"
+        :class="{ error: v$.description.$error }"
+        class="w-full"
+        :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
+        @input="v$.description.$touch"
+      />
+
+      <div class="w-full">
+        <label>
+          {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
+          <woot-color-picker v-model="color" />
+        </label>
+      </div>
+      <div class="flex items-center w-full gap-2">
+        <input v-model="showOnSidebar" type="checkbox" :value="true" />
+        <label for="conversation_creation">
+          {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
+        </label>
+      </div>
+      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+        <woot-button
+          :is-disabled="v$.title.$invalid || uiFlags.isUpdating"
+          :is-loading="uiFlags.isUpdating"
+        >
+          {{ $t('LABEL_MGMT.FORM.EDIT') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index d847edb80..9aed65d00 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -1,105 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full xl:w-3/5">
-        <p
-          v-if="!uiFlags.isFetching && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('LABEL_MGMT.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('LABEL_MGMT.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t('LABEL_MGMT.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="(label, index) in records" :key="label.title">
-              <td class="label-title">
-                <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
-                  label.title
-                }}</span>
-              </td>
-              <td>{{ label.description }}</td>
-              <td>
-                <div class="label-color--container">
-                  <span
-                    class="label-color--display"
-                    :style="{ backgroundColor: label.color }"
-                  />
-                  {{ label.color }}
-                </div>
-              </td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  :is-loading="loading[label.id]"
-                  icon="edit"
-                  @click="openEditPopup(label)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[label.id]"
-                  @click="openDeletePopup(label, index)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 xl:block">
-        <span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-label @close="hideAddPopup" />
-    </woot-modal>
-
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-label
-        :selected-response="selectedResponse"
-        @close="hideEditPopup"
-      />
-    </woot-modal>
-
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -186,6 +84,106 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex-1 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full xl:w-3/5">
+        <p
+          v-if="!uiFlags.isFetching && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('LABEL_MGMT.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('LABEL_MGMT.LOADING')"
+        />
+        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
+          <thead>
+            <th
+              v-for="thHeader in $t('LABEL_MGMT.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="(label, index) in records" :key="label.title">
+              <td class="label-title">
+                <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
+                  label.title
+                }}</span>
+              </td>
+              <td>{{ label.description }}</td>
+              <td>
+                <div class="label-color--container">
+                  <span
+                    class="label-color--display"
+                    :style="{ backgroundColor: label.color }"
+                  />
+                  {{ label.color }}
+                </div>
+              </td>
+              <td class="button-wrapper">
+                <woot-button
+                  v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  :is-loading="loading[label.id]"
+                  icon="edit"
+                  @click="openEditPopup(label)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  icon="dismiss-circle"
+                  class-names="grey-btn"
+                  :is-loading="loading[label.id]"
+                  @click="openDeletePopup(label, index)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 xl:block">
+        <span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddLabel @close="hideAddPopup" />
+    </woot-modal>
+
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditLabel :selected-response="selectedResponse" @close="hideEditPopup" />
+    </woot-modal>
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 2ccc4c0d8..61614c8b8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,61 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <router-link
-      :to="addAccountScoping('settings/macros/new')"
-      class="button success button--fixed-top button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ $t('MACROS.HEADER_BTN_TXT') }}
-      </span>
-    </router-link>
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full lg:w-3/5">
-        <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
-          <p class="flex h-full items-center flex-col justify-center">
-            {{ $t('MACROS.LIST.404') }}
-          </p>
-        </div>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('MACROS.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <macros-table-row
-              v-for="(macro, index) in records"
-              :key="index"
-              :macro="macro"
-              @delete="openDeletePopup(macro, index)"
-            />
-          </tbody>
-        </table>
-      </div>
-      <div class="hidden lg:block w-1/3">
-        <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
-      :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -110,3 +52,61 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <router-link
+      :to="addAccountScoping('settings/macros/new')"
+      class="button success button--fixed-top button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
+    >
+      <fluent-icon icon="add-circle" />
+      <span class="button__content">
+        {{ $t('MACROS.HEADER_BTN_TXT') }}
+      </span>
+    </router-link>
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full lg:w-3/5">
+        <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
+          <p class="flex h-full items-center flex-col justify-center">
+            {{ $t('MACROS.LIST.404') }}
+          </p>
+        </div>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('MACROS.LOADING')"
+        />
+        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
+          <thead>
+            <th
+              v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <MacrosTableRow
+              v-for="(macro, index) in records"
+              :key="index"
+              :macro="macro"
+              @delete="openDeletePopup(macro, index)"
+            />
+          </tbody>
+        </table>
+      </div>
+      <div class="hidden lg:block w-1/3">
+        <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
+      :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 53316f9e4..1b02ba2e5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="flex flex-col flex-1 h-full overflow-auto">
-    <woot-loading-state
-      v-if="uiFlags.isFetchingItem"
-      :message="$t('MACROS.EDITOR.LOADING')"
-    />
-    <macro-form
-      v-if="macro && !uiFlags.isFetchingItem"
-      :macro-data.sync="macro"
-      @submit="saveMacro"
-    />
-  </div>
-</template>
-
 <script>
 import MacroForm from './MacroForm.vue';
 import { MACRO_ACTION_TYPES } from './constants';
@@ -40,9 +26,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'macros/getUIFlags',
-      labels: 'labels/getLabels',
-      agents: 'agents/getAgents',
-      teams: 'teams/getTeams',
     }),
     macroId() {
       return this.$route.params.macroId;
@@ -140,3 +123,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col flex-1 h-full overflow-auto">
+    <woot-loading-state
+      v-if="uiFlags.isFetchingItem"
+      :message="$t('MACROS.EDITOR.LOADING')"
+    />
+    <MacroForm
+      v-if="macro && !uiFlags.isFetchingItem"
+      :macro-data.sync="macro"
+      @submit="saveMacro"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index 418cf4bcb..d5dd35d74 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="flex flex-col md:flex-row h-auto md:h-full w-full">
-    <div
-      class="flex-1 w-full md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size h-full max-h-full py-4 px-12 overflow-y-auto"
-    >
-      <macro-nodes
-        v-model="macro.actions"
-        :files="files"
-        :errors="errors"
-        @addNewNode="appendNode"
-        @deleteNode="deleteNode"
-        @resetAction="resetNode"
-      />
-    </div>
-    <div class="w-full md:w-1/3">
-      <macro-properties
-        :macro-name="macro.name"
-        :macro-visibility="macro.visibility"
-        @update:name="updateName"
-        @update:visibility="updateVisibility"
-        @submit="submit"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { provide } from 'vue';
 import MacroNodes from './MacroNodes.vue';
@@ -132,6 +106,32 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col md:flex-row h-auto md:h-full w-full">
+    <div
+      class="flex-1 w-full md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size h-full max-h-full py-4 px-12 overflow-y-auto"
+    >
+      <MacroNodes
+        v-model="macro.actions"
+        :files="files"
+        :errors="errors"
+        @addNewNode="appendNode"
+        @deleteNode="deleteNode"
+        @resetAction="resetNode"
+      />
+    </div>
+    <div class="w-full md:w-1/3">
+      <MacroProperties
+        :macro-name="macro.name"
+        :macro-visibility="macro.visibility"
+        @update:name="updateName"
+        @update:visibility="updateVisibility"
+        @submit="submit"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 1032074dc..2e0a5aecd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -1,48 +1,7 @@
-<template>
-  <div class="macro__node-action-container">
-    <woot-button
-      v-if="!singleNode"
-      size="small"
-      variant="clear"
-      color-scheme="secondary"
-      icon="navigation"
-      class="macros__node-drag-handle"
-    />
-    <div
-      class="macro__node-action-item"
-      :class="{
-        'has-error': errorKey,
-      }"
-    >
-      <action-input
-        v-model="actionData"
-        :action-types="macroActionTypes"
-        :dropdown-values="dropdownValues()"
-        :show-action-input="showActionInput"
-        :show-remove-button="false"
-        :is-macro="true"
-        :error-message="errorMessage"
-        :initial-file-name="fileName"
-        @resetAction="$emit('resetAction')"
-      />
-    </div>
-    <woot-button
-      v-if="!singleNode"
-      v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
-      icon="delete"
-      size="small"
-      variant="smooth"
-      color-scheme="alert"
-      @click="$emit('deleteNode')"
-    />
-  </div>
-</template>
-
 <script>
 import { inject } from 'vue';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 import macrosMixin from 'dashboard/mixins/macrosMixin';
-import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -62,10 +21,6 @@ export default {
       type: String,
       default: '',
     },
-    index: {
-      type: Number,
-      default: 0,
-    },
     fileName: {
       type: String,
       default: '',
@@ -76,11 +31,6 @@ export default {
     return { macroActionTypes };
   },
   computed: {
-    ...mapGetters({
-      labels: 'labels/getLabels',
-      teams: 'teams/getTeams',
-      agents: 'agents/getAgents',
-    }),
     actionData: {
       get() {
         return this.value;
@@ -114,6 +64,46 @@ export default {
 };
 </script>
 
+<template>
+  <div class="macro__node-action-container">
+    <woot-button
+      v-if="!singleNode"
+      size="small"
+      variant="clear"
+      color-scheme="secondary"
+      icon="navigation"
+      class="macros__node-drag-handle"
+    />
+    <div
+      class="macro__node-action-item"
+      :class="{
+        'has-error': errorKey,
+      }"
+    >
+      <ActionInput
+        v-model="actionData"
+        :action-types="macroActionTypes"
+        :dropdown-values="dropdownValues()"
+        :show-action-input="showActionInput"
+        :show-remove-button="false"
+        is-macro
+        :error-message="errorMessage"
+        :initial-file-name="fileName"
+        @resetAction="$emit('resetAction')"
+      />
+    </div>
+    <woot-button
+      v-if="!singleNode"
+      v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
+      icon="delete"
+      size="small"
+      variant="smooth"
+      color-scheme="alert"
+      @click="$emit('deleteNode')"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macros__node-drag-handle {
   @apply cursor-move -left-8 absolute;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index eefeb3635..c400ba628 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -1,66 +1,3 @@
-<template>
-  <div class="macros__nodes">
-    <div class="macro__node">
-      <div>
-        <woot-label
-          :title="$t('MACROS.EDITOR.START_FLOW')"
-          color-scheme="primary"
-        />
-      </div>
-    </div>
-    <draggable
-      :list="actionData"
-      animation="200"
-      ghost-class="ghost"
-      tag="div"
-      class="macros__nodes-draggable"
-      handle=".macros__node-drag-handle"
-    >
-      <div v-for="(action, i) in actionData" :key="i" class="macro__node">
-        <macro-node
-          v-model="actionData[i]"
-          class="macros__node-action"
-          type="add"
-          :index="i"
-          :error-key="errors[`action_${i}`]"
-          :file-name="
-            fileName(
-              actionData[i].action_params[0],
-              actionData[i].action_name,
-              files
-            )
-          "
-          :single-node="actionData.length === 1"
-          @resetAction="$emit('resetAction', i)"
-          @deleteNode="$emit('deleteNode', i)"
-        />
-      </div>
-    </draggable>
-    <div class="macro__node">
-      <div>
-        <woot-button
-          :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
-          class="macros__action-button"
-          color-scheme="success"
-          variant="smooth"
-          icon="add-circle"
-          @click="$emit('addNewNode')"
-        >
-          {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
-        </woot-button>
-      </div>
-    </div>
-    <div class="macro__node">
-      <div>
-        <woot-label
-          :title="$t('MACROS.EDITOR.END_FLOW')"
-          color-scheme="primary"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
@@ -103,6 +40,69 @@ export default {
 };
 </script>
 
+<template>
+  <div class="macros__nodes">
+    <div class="macro__node">
+      <div>
+        <woot-label
+          :title="$t('MACROS.EDITOR.START_FLOW')"
+          color-scheme="primary"
+        />
+      </div>
+    </div>
+    <Draggable
+      :list="actionData"
+      animation="200"
+      ghost-class="ghost"
+      tag="div"
+      class="macros__nodes-draggable"
+      handle=".macros__node-drag-handle"
+    >
+      <div v-for="(action, i) in actionData" :key="i" class="macro__node">
+        <MacroNode
+          v-model="actionData[i]"
+          class="macros__node-action"
+          type="add"
+          :index="i"
+          :error-key="errors[`action_${i}`]"
+          :file-name="
+            fileName(
+              actionData[i].action_params[0],
+              actionData[i].action_name,
+              files
+            )
+          "
+          :single-node="actionData.length === 1"
+          @resetAction="$emit('resetAction', i)"
+          @deleteNode="$emit('deleteNode', i)"
+        />
+      </div>
+    </Draggable>
+    <div class="macro__node">
+      <div>
+        <woot-button
+          :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
+          class="macros__action-button"
+          color-scheme="success"
+          variant="smooth"
+          icon="add-circle"
+          @click="$emit('addNewNode')"
+        >
+          {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
+        </woot-button>
+      </div>
+    </div>
+    <div class="macro__node">
+      <div>
+        <woot-label
+          :title="$t('MACROS.EDITOR.END_FLOW')"
+          color-scheme="primary"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macros__nodes {
   max-width: 800px;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index 1f8880af2..01b3ede4f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -1,3 +1,32 @@
+<script>
+export default {
+  inject: ['v$'],
+  props: {
+    macroName: {
+      type: String,
+      default: '',
+    },
+    macroVisibility: {
+      type: String,
+      default: 'global',
+    },
+  },
+  methods: {
+    isActive(key) {
+      return this.macroVisibility === key
+        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
+        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
+    },
+    onUpdateName(value) {
+      this.$emit('update:name', value);
+    },
+    onUpdateVisibility(value) {
+      this.$emit('update:visibility', value);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
@@ -84,35 +113,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  inject: ['v$'],
-  props: {
-    macroName: {
-      type: String,
-      default: '',
-    },
-    macroVisibility: {
-      type: String,
-      default: 'global',
-    },
-  },
-  methods: {
-    isActive(key) {
-      return this.macroVisibility === key
-        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
-        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
-    },
-    onUpdateName(value) {
-      this.$emit('update:name', value);
-    },
-    onUpdateVisibility(value) {
-      this.$emit('update:visibility', value);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 ::v-deep input[type='text'] {
   @apply mb-0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index c70fbddc1..79fa45e36 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -1,43 +1,3 @@
-<template>
-  <tr>
-    <td>{{ macro.name }}</td>
-    <td>
-      <div v-if="macro.created_by" class="avatar-container">
-        <thumbnail :username="createdByName" size="24px" />
-        <span>{{ createdByName }}</span>
-      </div>
-    </td>
-    <td>
-      <div v-if="macro.updated_by" class="avatar-container">
-        <thumbnail :username="updatedByName" size="24px" />
-        <span>{{ updatedByName }}</span>
-      </div>
-    </td>
-    <td>{{ visibilityLabel }}</td>
-    <td class="button-wrapper">
-      <router-link :to="addAccountScoping(`settings/macros/${macro.id}/edit`)">
-        <woot-button
-          v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          class-names="grey-btn"
-          icon="edit"
-        />
-      </router-link>
-      <woot-button
-        v-tooltip.top="$t('MACROS.DELETE.TOOLTIP')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        class-names="grey-btn"
-        @click="$emit('delete')"
-      />
-    </td>
-  </tr>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import accountMixin from 'dashboard/mixins/account.js';
@@ -70,6 +30,46 @@ export default {
 };
 </script>
 
+<template>
+  <tr>
+    <td>{{ macro.name }}</td>
+    <td>
+      <div v-if="macro.created_by" class="avatar-container">
+        <Thumbnail :username="createdByName" size="24px" />
+        <span>{{ createdByName }}</span>
+      </div>
+    </td>
+    <td>
+      <div v-if="macro.updated_by" class="avatar-container">
+        <Thumbnail :username="updatedByName" size="24px" />
+        <span>{{ updatedByName }}</span>
+      </div>
+    </td>
+    <td>{{ visibilityLabel }}</td>
+    <td class="button-wrapper">
+      <router-link :to="addAccountScoping(`settings/macros/${macro.id}/edit`)">
+        <woot-button
+          v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
+          variant="smooth"
+          size="tiny"
+          color-scheme="secondary"
+          class-names="grey-btn"
+          icon="edit"
+        />
+      </router-link>
+      <woot-button
+        v-tooltip.top="$t('MACROS.DELETE.TOOLTIP')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        class-names="grey-btn"
+        @click="$emit('delete')"
+      />
+    </td>
+  </tr>
+</template>
+
 <style scoped lang="scss">
 .avatar-container {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
index 93b6fcb23..683c848e9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -1,3 +1,27 @@
+<script setup>
+import { ref, computed } from 'vue';
+import FormButton from 'v3/components/Form/Button.vue';
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['onCopy']);
+const inputType = ref('password');
+const toggleMasked = () => {
+  inputType.value = inputType.value === 'password' ? 'text' : 'password';
+};
+
+const maskIcon = computed(() => {
+  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
+});
+
+const onClick = () => {
+  emit('onCopy', props.value);
+};
+</script>
+
 <template>
   <div class="flex flex-row justify-between gap-4">
     <woot-input
@@ -21,7 +45,7 @@
         </button>
       </template>
     </woot-input>
-    <form-button
+    <FormButton
       type="submit"
       size="large"
       icon="text-copy"
@@ -30,29 +54,6 @@
       @click="onClick"
     >
       {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY') }}
-    </form-button>
+    </FormButton>
   </div>
 </template>
-<script setup>
-import { ref, computed } from 'vue';
-import FormButton from 'v3/components/Form/Button.vue';
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['on-copy']);
-const inputType = ref('password');
-const toggleMasked = () => {
-  inputType.value = inputType.value === 'password' ? 'text' : 'password';
-};
-
-const maskIcon = computed(() => {
-  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
-});
-
-const onClick = () => {
-  emit('on-copy', props.value);
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index ead4b77f2..18ae1c07e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -1,3 +1,21 @@
+<script setup>
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['change']);
+const onChange = (id, value) => {
+  emit('change', id, value);
+};
+</script>
+
 <template>
   <div>
     <label
@@ -23,20 +41,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import CheckBox from 'v3/components/Form/CheckBox.vue';
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  items: {
-    type: Array,
-    required: true,
-  },
-});
-const emit = defineEmits(['change']);
-const onChange = (id, value) => {
-  emit('change', id, value);
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index 41d25b522..ddc6545f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -1,3 +1,30 @@
+<script setup>
+import { computed } from 'vue';
+import { ALERT_EVENTS } from './constants';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: 'all',
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const alertEvents = ALERT_EVENTS;
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
+</script>
+
 <template>
   <div>
     <label
@@ -37,30 +64,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-import { ALERT_EVENTS } from './constants';
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  value: {
-    type: String,
-    default: 'all',
-  },
-});
-
-const alertEvents = ALERT_EVENTS;
-
-const emit = defineEmits(['update']);
-
-const selectedValue = computed({
-  get: () => props.value,
-  set: value => {
-    emit('update', value);
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 3246e12af..232a7a74a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -1,23 +1,3 @@
-<template>
-  <form-select
-    v-model="selectedValue"
-    name="alertTone"
-    spacing="compact"
-    :value="selectedValue"
-    :options="alertTones"
-    :label="label"
-    class="max-w-xl"
-  >
-    <option
-      v-for="tone in alertTones"
-      :key="tone.label"
-      :value="tone.value"
-      :selected="tone.value === selectedValue"
-    >
-      {{ tone.label }}
-    </option>
-  </form-select>
-</template>
 <script setup>
 import { computed } from 'vue';
 import FormSelect from 'v3/components/Form/Select.vue';
@@ -34,6 +14,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['change']);
+
 const alertTones = computed(() => [
   {
     value: 'ding',
@@ -45,8 +27,6 @@ const alertTones = computed(() => [
   },
 ]);
 
-const emit = defineEmits(['change']);
-
 const selectedValue = computed({
   get: () => props.value,
   set: value => {
@@ -54,3 +34,24 @@ const selectedValue = computed({
   },
 });
 </script>
+
+<template>
+  <FormSelect
+    v-model="selectedValue"
+    name="alertTone"
+    spacing="compact"
+    :value="selectedValue"
+    :options="alertTones"
+    :label="label"
+    class="max-w-xl"
+  >
+    <option
+      v-for="tone in alertTones"
+      :key="tone.label"
+      :value="tone.value"
+      :selected="tone.value === selectedValue"
+    >
+      {{ tone.label }}
+    </option>
+  </FormSelect>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index b272873de..a48031966 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -1,35 +1,4 @@
-<template>
-  <div id="profile-settings-notifications" class="flex flex-col gap-6">
-    <audio-alert-tone
-      :value="alertTone"
-      :label="
-        $t(
-          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
-        )
-      "
-      @change="handleAudioToneChange"
-    />
-
-    <audio-alert-event
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
-      "
-      :value="audioAlert"
-      @update="handAudioAlertChange"
-    />
-
-    <audio-alert-condition
-      :items="audioAlertConditions"
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
-      "
-      @change="handleAudioAlertConditions"
-    />
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import configMixin from 'shared/mixins/configMixin';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -61,11 +30,6 @@ export default {
       audioAlertConditions: [],
     };
   },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-  },
   watch: {
     uiSettings(value) {
       this.notificationUISettings(value);
@@ -133,3 +97,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <AudioAlertTone
+      :value="alertTone"
+      :label="
+        $t(
+          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
+        )
+      "
+      @change="handleAudioToneChange"
+    />
+
+    <AudioAlertEvent
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
+      "
+      :value="audioAlert"
+      @update="handAudioAlertChange"
+    />
+
+    <AudioAlertCondition
+      :items="audioAlertConditions"
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
+      "
+      @change="handleAudioAlertConditions"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
index 604e87f00..b6c93a126 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -1,64 +1,3 @@
-<template>
-  <form @submit.prevent="changePassword()">
-    <div class="flex flex-col w-full gap-4">
-      <woot-input
-        v-model="currentPassword"
-        type="password"
-        :styles="inputStyles"
-        :class="{ error: v$.currentPassword.$error }"
-        :label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
-        :placeholder="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')"
-        :error="`${
-          v$.currentPassword.$error
-            ? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
-            : ''
-        }`"
-        @input="v$.currentPassword.$touch"
-      />
-
-      <woot-input
-        v-model="password"
-        type="password"
-        :styles="inputStyles"
-        :class="{ error: v$.password.$error }"
-        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
-        :placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
-        :error="`${
-          v$.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
-        }`"
-        @input="v$.password.$touch"
-      />
-
-      <woot-input
-        v-model="passwordConfirmation"
-        type="password"
-        :styles="inputStyles"
-        :class="{ error: v$.passwordConfirmation.$error }"
-        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
-        :placeholder="
-          $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
-        "
-        :error="`${
-          v$.passwordConfirmation.$error
-            ? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
-            : ''
-        }`"
-        @input="v$.passwordConfirmation.$touch"
-      />
-
-      <form-button
-        type="submit"
-        color-scheme="primary"
-        variant="solid"
-        size="large"
-        :disabled="isButtonDisabled"
-      >
-        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
-      </form-button>
-    </div>
-  </form>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -139,3 +78,64 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form @submit.prevent="changePassword()">
+    <div class="flex flex-col w-full gap-4">
+      <woot-input
+        v-model="currentPassword"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: v$.currentPassword.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')"
+        :error="`${
+          v$.currentPassword.$error
+            ? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
+            : ''
+        }`"
+        @input="v$.currentPassword.$touch"
+      />
+
+      <woot-input
+        v-model="password"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: v$.password.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
+        :error="`${
+          v$.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
+        }`"
+        @input="v$.password.$touch"
+      />
+
+      <woot-input
+        v-model="passwordConfirmation"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: v$.passwordConfirmation.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
+        :placeholder="
+          $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
+        "
+        :error="`${
+          v$.passwordConfirmation.$error
+            ? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
+            : ''
+        }`"
+        @input="v$.passwordConfirmation.$touch"
+      />
+
+      <FormButton
+        type="submit"
+        color-scheme="primary"
+        variant="solid"
+        size="large"
+        :disabled="isButtonDisabled"
+      >
+        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
+      </FormButton>
+    </div>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
index 35cbbeb7b..540b405d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
@@ -1,3 +1,28 @@
+<script setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  lightImage: {
+    type: String,
+    default: '',
+  },
+  darkImage: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div
     class="flex flex-col gap-4 w-full h-fit sm:max-h-[220px] p-4 sm:max-w-[350px] rounded-md border border-solid border-ash-200"
@@ -37,28 +62,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  lightImage: {
-    type: String,
-    default: '',
-  },
-  darkImage: {
-    type: String,
-    default: '',
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 069b8ab81..2b79ef119 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -1,85 +1,3 @@
-<template>
-  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-[720px]">
-    <div class="flex flex-col gap-6">
-      <h2 class="text-2xl font-medium text-ash-900">
-        {{ $t('PROFILE_SETTINGS.TITLE') }}
-      </h2>
-      <user-profile-picture
-        :src="avatarUrl"
-        :name="name"
-        size="72px"
-        @change="updateProfilePicture"
-        @delete="deleteProfilePicture"
-      />
-      <user-basic-details
-        :name="name"
-        :display-name="displayName"
-        :email="email"
-        :email-enabled="!globalConfig.disableUserProfileUpdate"
-        @update-user="updateProfile"
-      />
-    </div>
-
-    <form-section
-      :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
-      :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
-    >
-      <message-signature
-        :message-signature="messageSignature"
-        @update-signature="updateSignature"
-      />
-    </form-section>
-    <form-section
-      :title="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
-      :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
-    >
-      <div
-        class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
-      >
-        <button
-          v-for="hotKey in hotKeys"
-          :key="hotKey.key"
-          class="px-0 reset-base"
-        >
-          <hot-key-card
-            :key="hotKey.title"
-            :title="hotKey.title"
-            :description="hotKey.description"
-            :light-image="hotKey.lightImage"
-            :dark-image="hotKey.darkImage"
-            :active="isEditorHotKeyEnabled(hotKey.key)"
-            @click="toggleHotKey(hotKey.key)"
-          />
-        </button>
-      </div>
-    </form-section>
-    <form-section :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')">
-      <change-password v-if="!globalConfig.disableUserProfileUpdate" />
-    </form-section>
-    <form-section
-      :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
-      :description="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
-      "
-    >
-      <audio-notifications />
-    </form-section>
-    <form-section :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
-      <notification-preferences />
-    </form-section>
-    <form-section
-      :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
-      :description="
-        useInstallationName(
-          $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE'),
-          globalConfig.installationName
-        )
-      "
-    >
-      <access-token :value="currentUser.access_token" @on-copy="onCopyToken" />
-    </form-section>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -255,3 +173,86 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-[720px]">
+    <div class="flex flex-col gap-6">
+      <h2 class="text-2xl font-medium text-ash-900">
+        {{ $t('PROFILE_SETTINGS.TITLE') }}
+      </h2>
+      <UserProfilePicture
+        :src="avatarUrl"
+        :name="name"
+        size="72px"
+        @change="updateProfilePicture"
+        @delete="deleteProfilePicture"
+      />
+      <UserBasicDetails
+        :name="name"
+        :display-name="displayName"
+        :email="email"
+        :email-enabled="!globalConfig.disableUserProfileUpdate"
+        @updateUser="updateProfile"
+      />
+    </div>
+
+    <FormSection
+      :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
+    >
+      <MessageSignature
+        :message-signature="messageSignature"
+        @updateSignature="updateSignature"
+      />
+    </FormSection>
+    <FormSection
+      :title="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
+    >
+      <div
+        class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
+      >
+        <button
+          v-for="hotKey in hotKeys"
+          :key="hotKey.key"
+          class="px-0 reset-base"
+        >
+          <HotKeyCard
+            :key="hotKey.title"
+            :title="hotKey.title"
+            :description="hotKey.description"
+            :light-image="hotKey.lightImage"
+            :dark-image="hotKey.darkImage"
+            :active="isEditorHotKeyEnabled(hotKey.key)"
+            @click="toggleHotKey(hotKey.key)"
+          />
+        </button>
+      </div>
+    </FormSection>
+    <FormSection :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')">
+      <ChangePassword v-if="!globalConfig.disableUserProfileUpdate" />
+    </FormSection>
+    <FormSection
+      :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
+      :description="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
+      "
+    >
+      <AudioNotifications />
+    </FormSection>
+    <FormSection :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
+      <NotificationPreferences />
+    </FormSection>
+    <FormSection
+      :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
+      :description="
+        useInstallationName(
+          $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE'),
+          globalConfig.installationName
+        )
+      "
+    >
+      <AccessToken :value="currentUser.access_token" @onCopy="onCopyToken" />
+    </FormSection>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index a86b4fa5c..2d149755c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -1,25 +1,3 @@
-<template>
-  <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>
-</template>
 <script setup>
 import { ref, watch } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
@@ -33,10 +11,9 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['updateSignature']);
 const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
 const signature = ref(props.messageSignature);
-const emit = defineEmits(['update-signature']);
-
 watch(
   () => props.messageSignature ?? '',
   newValue => {
@@ -45,6 +22,29 @@ watch(
 );
 
 const updateSignature = () => {
-  emit('update-signature', signature.value);
+  emit('updateSignature', signature.value);
 };
 </script>
+
+<template>
+  <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
+    <WootMessageEditor
+      id="message-signature-input"
+      v-model="signature"
+      class="message-editor h-[10rem] !px-3"
+      is-format-mode
+      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuList"
+      :enable-suggestions="false"
+      show-image-resize-toolbar
+    />
+    <FormButton
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
+    </FormButton>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
index feb180014..4cd512055 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
@@ -1,18 +1,3 @@
-<template>
-  <div
-    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
-    :class="`col-span-${span}`"
-  >
-    <input
-      v-model="localFlags"
-      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
-      type="checkbox"
-      :value="localValue"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
 <script setup>
 import { ref, watch } from 'vue';
 
@@ -51,3 +36,18 @@ const handleInput = e => {
   emit('input', props.type, e);
 };
 </script>
+
+<template>
+  <div
+    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+    :class="`col-span-${span}`"
+  >
+    <input
+      v-model="localFlags"
+      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      type="checkbox"
+      :value="localValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index b276f0b47..9842deffa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -1,135 +1,3 @@
-<template>
-  <div id="profile-settings-notifications" class="flex flex-col gap-6">
-    <!-- Layout for desktop devices -->
-    <div class="hidden sm:block">
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-      >
-        <table-header-cell
-          :span="7"
-          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
-        >
-          <span class="text-sm font-normal normal-case text-ash-800">
-            {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
-          </span>
-        </table-header-cell>
-        <table-header-cell
-          :span="2"
-          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
-        >
-          <span class="text-sm font-medium normal-case text-ash-900">
-            {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
-          </span>
-        </table-header-cell>
-        <table-header-cell
-          :span="3"
-          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
-        >
-          <div class="flex items-center justify-between gap-1">
-            <span
-              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
-            >
-              {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
-            </span>
-          </div>
-        </table-header-cell>
-      </div>
-      <div
-        v-for="(notification, index) in filteredNotificationTypes"
-        :key="index"
-      >
-        <div
-          class="grid items-center content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
-        >
-          <div
-            class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
-          >
-            <span class="text-sm text-ash-900">
-              {{ $t(notification.label) }}
-            </span>
-          </div>
-          <div
-            v-for="(type, typeIndex) in ['email', 'push']"
-            :key="typeIndex"
-            class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
-            :class="`col-span-${type === 'push' ? 3 : 2}`"
-          >
-            <CheckBox
-              :value="`${type}_${notification.value}`"
-              :is-checked="
-                checkFlagStatus(type, notification.value, selectedPushFlags)
-              "
-              @update="id => handleInput(type, id)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--  Layout for mobile devices -->
-    <div class="flex flex-col gap-6 sm:hidden">
-      <span class="text-sm font-medium normal-case text-ash-900">
-        {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
-      </span>
-      <div class="flex flex-col gap-4">
-        <div
-          v-for="(notification, index) in filteredNotificationTypes"
-          :key="index"
-          class="flex flex-row items-start gap-2"
-        >
-          <CheckBox
-            :id="`email_${notification.value}`"
-            :value="`email_${notification.value}`"
-            :is-checked="checkFlagStatus('email', notification.value)"
-            @update="handleEmailInput"
-          />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
-        </div>
-      </div>
-
-      <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium normal-case text-ash-900">
-          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
-        </span>
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <div
-          v-for="(notification, index) in filteredNotificationTypes"
-          :key="index"
-          class="flex flex-row items-start gap-2"
-        >
-          <CheckBox
-            :id="`push_${notification.value}`"
-            :value="`push_${notification.value}`"
-            :is-checked="checkFlagStatus('push', notification.value)"
-            @update="handlePushInput"
-          />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl"
-    >
-      <div class="flex flex-row items-center gap-2">
-        <fluent-icon
-          icon="alert"
-          class="flex-shrink-0 text-ash-900"
-          size="18"
-        />
-        <span class="text-sm text-ash-900">
-          {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
-        </span>
-      </div>
-      <form-switch
-        :value="hasEnabledPushPermissions"
-        @input="onRequestPermissions"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -265,3 +133,135 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <!-- Layout for desktop devices -->
+    <div class="hidden sm:block">
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+      >
+        <TableHeaderCell
+          :span="7"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
+        >
+          <span class="text-sm font-normal normal-case text-ash-800">
+            {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
+          </span>
+        </TableHeaderCell>
+        <TableHeaderCell
+          :span="2"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
+        >
+          <span class="text-sm font-medium normal-case text-ash-900">
+            {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
+          </span>
+        </TableHeaderCell>
+        <TableHeaderCell
+          :span="3"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
+        >
+          <div class="flex items-center justify-between gap-1">
+            <span
+              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
+            >
+              {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
+            </span>
+          </div>
+        </TableHeaderCell>
+      </div>
+      <div
+        v-for="(notification, index) in filteredNotificationTypes"
+        :key="index"
+      >
+        <div
+          class="grid items-center content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+        >
+          <div
+            class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+          >
+            <span class="text-sm text-ash-900">
+              {{ $t(notification.label) }}
+            </span>
+          </div>
+          <div
+            v-for="(type, typeIndex) in ['email', 'push']"
+            :key="typeIndex"
+            class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+            :class="`col-span-${type === 'push' ? 3 : 2}`"
+          >
+            <CheckBox
+              :value="`${type}_${notification.value}`"
+              :is-checked="
+                checkFlagStatus(type, notification.value, selectedPushFlags)
+              "
+              @update="id => handleInput(type, id)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  Layout for mobile devices -->
+    <div class="flex flex-col gap-6 sm:hidden">
+      <span class="text-sm font-medium normal-case text-ash-900">
+        {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
+      </span>
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="(notification, index) in filteredNotificationTypes"
+          :key="index"
+          class="flex flex-row items-start gap-2"
+        >
+          <CheckBox
+            :id="`email_${notification.value}`"
+            :value="`email_${notification.value}`"
+            :is-checked="checkFlagStatus('email', notification.value)"
+            @update="handleEmailInput"
+          />
+          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-start gap-2">
+        <span class="text-sm font-medium normal-case text-ash-900">
+          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="(notification, index) in filteredNotificationTypes"
+          :key="index"
+          class="flex flex-row items-start gap-2"
+        >
+          <CheckBox
+            :id="`push_${notification.value}`"
+            :value="`push_${notification.value}`"
+            :is-checked="checkFlagStatus('push', notification.value)"
+            @update="handlePushInput"
+          />
+          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl"
+    >
+      <div class="flex flex-row items-center gap-2">
+        <fluent-icon
+          icon="alert"
+          class="flex-shrink-0 text-ash-900"
+          size="18"
+        />
+        <span class="text-sm text-ash-900">
+          {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
+        </span>
+      </div>
+      <FormSwitch
+        :value="hasEnabledPushPermissions"
+        @input="onRequestPermissions"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index 33fd03973..4b7580d3e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -1,51 +1,3 @@
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="updateUser('profile')">
-    <woot-input
-      v-model="userName"
-      :styles="inputStyles"
-      :class="{ error: v$.userName.$error }"
-      :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
-      :error="`${
-        v$.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
-      }`"
-      @input="v$.userName.$touch"
-    />
-    <woot-input
-      v-model="userDisplayName"
-      :styles="inputStyles"
-      :class="{ error: v$.userDisplayName.$error }"
-      :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
-      :error="`${
-        v$.userDisplayName.$error
-          ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
-          : ''
-      }`"
-      @input="v$.userDisplayName.$touch"
-    />
-    <woot-input
-      v-if="emailEnabled"
-      v-model="userEmail"
-      :styles="inputStyles"
-      :class="{ error: v$.userEmail.$error }"
-      :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
-      :error="`${
-        v$.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
-      }`"
-      @input="v$.userEmail.$touch"
-    />
-    <form-button
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
-    </form-button>
-  </form>
-</template>
 <script>
 import { useAlert } from 'dashboard/composables';
 import FormButton from 'v3/components/Form/Button.vue';
@@ -127,7 +79,7 @@ export default {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }
-      this.$emit('update-user', {
+      this.$emit('updateUser', {
         name: this.userName,
         displayName: this.userDisplayName,
         email: this.userEmail,
@@ -136,3 +88,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="updateUser('profile')">
+    <woot-input
+      v-model="userName"
+      :styles="inputStyles"
+      :class="{ error: v$.userName.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
+      :error="`${
+        v$.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
+      }`"
+      @input="v$.userName.$touch"
+    />
+    <woot-input
+      v-model="userDisplayName"
+      :styles="inputStyles"
+      :class="{ error: v$.userDisplayName.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
+      :error="`${
+        v$.userDisplayName.$error
+          ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
+          : ''
+      }`"
+      @input="v$.userDisplayName.$touch"
+    />
+    <woot-input
+      v-if="emailEnabled"
+      v-model="userEmail"
+      :styles="inputStyles"
+      :class="{ error: v$.userEmail.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
+      :error="`${
+        v$.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
+      }`"
+      @input="v$.userEmail.$touch"
+    />
+    <FormButton
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
+    </FormButton>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index d4ab08bc1..87ac25efa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <span class="text-sm font-medium text-ash-900">
-      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
-    </span>
-    <profile-avatar
-      :src="src"
-      :name="userNameWithoutEmoji"
-      @change="updateProfilePicture"
-      @delete="deleteProfilePicture"
-    />
-  </div>
-</template>
 <script setup>
 import { computed } from 'vue';
 import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
@@ -26,15 +13,29 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['change', 'delete']);
+const emit = defineEmits(['change', 'delete']);
 
 const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
 
 const updateProfilePicture = e => {
-  emits('change', e);
+  emit('change', e);
 };
 
 const deleteProfilePicture = () => {
-  emits('delete');
+  emit('delete');
 };
 </script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <span class="text-sm font-medium text-ash-900">
+      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
+    </span>
+    <ProfileAvatar
+      :src="src"
+      :name="userNameWithoutEmoji"
+      @change="updateProfilePicture"
+      @delete="deleteProfilePicture"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
index f0931afdc..90c725952 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
@@ -1,3 +1,12 @@
+<script setup>
+defineProps({
+  keepAlive: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
 <template>
   <div
     class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-white dark:bg-slate-900"
@@ -8,12 +17,3 @@
     <router-view v-else />
   </div>
 </template>
-
-<script setup>
-defineProps({
-  keepAlive: {
-    type: Boolean,
-    default: true,
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 68911721b..7a7374994 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="agent-reports"
-    type="agent"
-    getter-key="agents/getAgents"
-    action-key="agents/get"
-    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="agent-reports"
+    type="agent"
+    getter-key="agents/getAgents"
+    action-key="agents/get"
+    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index 2f0c97335..492775542 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -1,22 +1,4 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <report-filter-selector
-      :show-agents-filter="false"
-      :show-group-by-filter="true"
-      :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
-    />
-
-    <bot-metrics :filters="requestPayload" />
-    <report-container
-      :group-by="groupBy"
-      :report-keys="reportKeys"
-      :account-summary-key="'getBotSummary'"
-    />
-  </div>
-</template>
 <script>
-import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import BotMetrics from './components/BotMetrics.vue';
 import ReportFilterSelector from './components/FilterSelector.vue';
@@ -46,9 +28,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      accountReport: 'getAccountReports',
-    }),
     requestPayload() {
       return {
         from: this.from,
@@ -105,3 +84,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <ReportFilterSelector
+      :show-agents-filter="false"
+      show-group-by-filter
+      :show-business-hours-switch="false"
+      @filterChange="onFilterChange"
+    />
+
+    <BotMetrics :filters="requestPayload" />
+    <ReportContainer
+      account-summary-key="getBotSummary"
+      :group-by="groupBy"
+      :report-keys="reportKeys"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 3c137161e..df2ab7d7a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <report-filter-selector
-      :show-agents-filter="true"
-      :show-inbox-filter="true"
-      :show-rating-filter="true"
-      :show-team-filter="isTeamsEnabled"
-      :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
-    />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
-    </woot-button>
-    <csat-metrics :filters="requestPayload" />
-    <csat-table :page-index="pageIndex" @page-change="onPageNumberChange" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -128,3 +106,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <ReportFilterSelector
+      show-agents-filter
+      show-inbox-filter
+      show-rating-filter
+      :show-team-filter="isTeamsEnabled"
+      :show-business-hours-switch="false"
+      @filterChange="onFilterChange"
+    />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
+    </woot-button>
+    <CsatMetrics :filters="requestPayload" />
+    <CsatTable :page-index="pageIndex" @pageChange="onPageNumberChange" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
index f055a9a4f..96d573829 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="inbox-reports"
-    type="inbox"
-    getter-key="inboxes/getInboxes"
-    action-key="inboxes/get"
-    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="inbox-reports"
+    type="inbox"
+    getter-key="inboxes/getInboxes"
+    action-key="inboxes/get"
+    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 051bc7298..1f96b161f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,24 +1,4 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadAgentReports"
-    >
-      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
-    </woot-button>
-    <report-filter-selector
-      :show-agents-filter="false"
-      :show-group-by-filter="true"
-      @filter-change="onFilterChange"
-    />
-    <report-container :group-by="groupBy" />
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
@@ -53,12 +33,6 @@ export default {
       businessHours: false,
     };
   },
-  computed: {
-    ...mapGetters({
-      accountSummary: 'getAccountSummary',
-      accountReport: 'getAccountReports',
-    }),
-  },
   methods: {
     fetchAllData() {
       this.fetchAccountSummary();
@@ -124,3 +98,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadAgentReports"
+    >
+      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
+    </woot-button>
+    <ReportFilterSelector
+      :show-agents-filter="false"
+      show-group-by-filter
+      @filterChange="onFilterChange"
+    />
+    <ReportContainer :group-by="groupBy" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
index 77a010846..d3792bd79 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="label-reports"
-    type="label"
-    getter-key="labels/getLabels"
-    action-key="labels/get"
-    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="label-reports"
+    type="label"
+    getter-key="labels/getLabels"
+    action-key="labels/get"
+    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index ae709db41..8f59f2229 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -1,75 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <div class="flex flex-col md:flex-row items-center">
-      <div
-        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
-      >
-        <metric-card
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
-        >
-          <div
-            v-for="(metric, name, index) in conversationMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
-        <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
-          <div
-            v-for="(metric, name, index) in agentStatusMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-    </div>
-    <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
-      <metric-card :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
-        <template #control>
-          <woot-button
-            icon="arrow-download"
-            size="small"
-            variant="smooth"
-            color-scheme="secondary"
-            @click="downloadHeatmapData"
-          >
-            Download Report
-          </woot-button>
-        </template>
-        <report-heatmap
-          :heat-data="accountConversationHeatmap"
-          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
-        />
-      </metric-card>
-    </div>
-    <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
-      <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
-        <agent-table
-          :agents="agents"
-          :agent-metrics="agentConversationMetric"
-          :page-index="pageIndex"
-          :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
-        />
-      </metric-card>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import AgentTable from './components/overview/AgentTable.vue';
@@ -190,3 +118,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <div class="flex flex-col items-center md:flex-row">
+      <div
+        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+      >
+        <MetricCard
+          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+          :is-loading="uiFlags.isFetchingAccountConversationMetric"
+          :loading-message="
+            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
+          "
+        >
+          <div
+            v-for="(metric, name, index) in conversationMetrics"
+            :key="index"
+            class="flex-1 min-w-0 metric-content"
+          >
+            <h3 class="heading">
+              {{ name }}
+            </h3>
+            <p class="metric">{{ metric }}</p>
+          </div>
+        </MetricCard>
+      </div>
+      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
+        <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
+          <div
+            v-for="(metric, name, index) in agentStatusMetrics"
+            :key="index"
+            class="flex-1 min-w-0 metric-content"
+          >
+            <h3 class="heading">
+              {{ name }}
+            </h3>
+            <p class="metric">{{ metric }}</p>
+          </div>
+        </MetricCard>
+      </div>
+    </div>
+    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
+        <template #control>
+          <woot-button
+            icon="arrow-download"
+            size="small"
+            variant="smooth"
+            color-scheme="secondary"
+            @click="downloadHeatmapData"
+          >
+            {{ $t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT') }}
+          </woot-button>
+        </template>
+        <ReportHeatmap
+          :heat-data="accountConversationHeatmap"
+          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
+        />
+      </MetricCard>
+    </div>
+    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
+        <AgentTable
+          :agents="agents"
+          :agent-metrics="agentConversationMetric"
+          :page-index="pageIndex"
+          :is-loading="uiFlags.isFetchingAgentConversationMetric"
+          @pageChange="onPageNumberChange"
+        />
+      </MetricCard>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 273f814b7..f90c3730c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -1,35 +1,3 @@
-<template>
-  <div
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
-  >
-    <div
-      v-for="metric in metrics"
-      :key="metric.KEY"
-      class="p-4 rounded-md mb-3"
-    >
-      <chart-stats :metric="metric" :account-summary-key="accountSummaryKey" />
-      <div class="mt-4 h-72">
-        <woot-loading-state
-          v-if="accountReport.isFetching[metric.KEY]"
-          class="text-xs"
-          :message="$t('REPORT.LOADING_CHART')"
-        />
-        <div v-else class="h-72 flex items-center justify-center">
-          <woot-bar
-            v-if="accountReport.data[metric.KEY].length"
-            :collection="getCollection(metric)"
-            :chart-options="getChartOptions(metric)"
-            class="h-72 w-full"
-          />
-          <span v-else class="text-sm text-slate-600">
-            {{ $t('REPORT.NO_ENOUGH_DATA') }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
@@ -150,3 +118,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
+  >
+    <div
+      v-for="metric in metrics"
+      :key="metric.KEY"
+      class="p-4 rounded-md mb-3"
+    >
+      <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
+      <div class="mt-4 h-72">
+        <woot-loading-state
+          v-if="accountReport.isFetching[metric.KEY]"
+          class="text-xs"
+          :message="$t('REPORT.LOADING_CHART')"
+        />
+        <div v-else class="h-72 flex items-center justify-center">
+          <woot-bar
+            v-if="accountReport.data[metric.KEY].length"
+            :collection="getCollection(metric)"
+            :chart-options="getChartOptions(metric)"
+            class="h-72 w-full"
+          />
+          <span v-else class="text-sm text-slate-600">
+            {{ $t('REPORT.NO_ENOUGH_DATA') }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index aee742006..c2065babf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
-    <SLAReportFilters @filter-change="onFilterChange" />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
-    </woot-button>
-    <div class="flex flex-col gap-6">
-      <SLAMetrics
-        :hit-rate="slaMetrics.hitRate"
-        :no-of-breaches="slaMetrics.numberOfSLAMisses"
-        :no-of-conversations="slaMetrics.numberOfConversations"
-        :is-loading="uiFlags.isFetchingMetrics"
-      />
-      <SLATable
-        :sla-reports="slaReports"
-        :is-loading="uiFlags.isFetching"
-        :current-page="Number(slaMeta.currentPage)"
-        :total-count="Number(slaMeta.count)"
-        @page-change="onPageChange"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -103,3 +75,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
+    <SLAReportFilters @filterChange="onFilterChange" />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
+    </woot-button>
+    <div class="flex flex-col gap-6">
+      <SLAMetrics
+        :hit-rate="slaMetrics.hitRate"
+        :no-of-breaches="slaMetrics.numberOfSLAMisses"
+        :no-of-conversations="slaMetrics.numberOfConversations"
+        :is-loading="uiFlags.isFetchingMetrics"
+      />
+      <SLATable
+        :sla-reports="slaReports"
+        :is-loading="uiFlags.isFetching"
+        :current-page="Number(slaMeta.currentPage)"
+        :total-count="Number(slaMeta.count)"
+        @pageChange="onPageChange"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index d920404c1..523186b8d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="team-reports"
-    type="team"
-    getter-key="teams/getTeams"
-    action-key="teams/get"
-    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="team-reports"
+    type="team"
+    getter-key="teams/getTeams"
+    action-key="teams/get"
+    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
index 46227f945..fe8e30ba8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
@@ -40,25 +40,25 @@ onMounted(fetchMetrics);
   <div
     class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
   >
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.TOOLTIP')"
       :value="conversationCount"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
       :value="messageCount"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.RESOLUTION_RATE.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.RESOLUTION_RATE.TOOLTIP')"
       :value="formatToPercent(resolutionRate)"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.HANDOFF_RATE.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.HANDOFF_RATE.TOOLTIP')"
       :value="formatToPercent(handoffRate)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
index 4faf4de2b..26f68ea33 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
@@ -1,3 +1,28 @@
+<script>
+import reportMixin from 'dashboard/mixins/reportMixin';
+export default {
+  mixins: [reportMixin],
+  props: {
+    metric: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    trendColor(value, key) {
+      if (this.isAverageMetricType(key)) {
+        return value > 0
+          ? 'border-red-500 text-red-500'
+          : 'border-green-500 text-green-500';
+      }
+      return value < 0
+        ? 'border-red-500 text-red-500'
+        : 'border-green-500 text-green-500';
+    },
+  },
+};
+</script>
+
 <template>
   <div class="text-slate-900 dark:text-slate-100">
     <span class="text-sm">
@@ -25,27 +50,3 @@
     </div>
   </div>
 </template>
-<script>
-import reportMixin from 'dashboard/mixins/reportMixin';
-export default {
-  mixins: [reportMixin],
-  props: {
-    metric: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  methods: {
-    trendColor(value, key) {
-      if (this.isAverageMetricType(key)) {
-        return value > 0
-          ? 'border-red-500 text-red-500'
-          : 'border-green-500 text-green-500';
-      }
-      return value < 0
-        ? 'border-red-500 text-red-500'
-        : 'border-green-500 text-green-500';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 77106e8d5..0f07c773c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
-  >
-    <csat-metric-card
-      :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
-      :value="responseCount"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-    <csat-metric-card
-      :disabled="ratingFilterEnabled"
-      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
-      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-    <csat-metric-card
-      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
-      :value="formatToPercent(responseRate)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-
-    <div
-      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      ref="csatHorizontalBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
-    >
-      <h3
-        class="flex items-center text-xs md:text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
-      >
-        <div class="flex justify-end flex-row-reverse">
-          <div
-            v-for="(rating, key, index) in ratingPercentage"
-            :key="rating + key + index"
-            class="ltr:pr-4 rtl:pl-4"
-          >
-            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
-            <span>{{ formatToPercent(rating) }}</span>
-          </div>
-        </div>
-      </h3>
-      <div class="mt-2">
-        <woot-horizontal-bar :collection="chartData" :height="24" />
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import CsatMetricCard from './ReportMetricCard.vue';
@@ -104,3 +55,55 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
+<template>
+  <div
+    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+  >
+    <CsatMetricCard
+      :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
+      :value="responseCount"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+    <CsatMetricCard
+      :disabled="ratingFilterEnabled"
+      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
+      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+    <CsatMetricCard
+      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
+      :value="formatToPercent(responseRate)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+
+    <div
+      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
+      ref="csatHorizontalBarChart"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
+    >
+      <h3
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-slate-800 dark:text-slate-100"
+      >
+        <div class="flex flex-row-reverse justify-end">
+          <div
+            v-for="(rating, key, index) in ratingPercentage"
+            :key="rating + key + index"
+            class="ltr:pr-4 rtl:pl-4"
+          >
+            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
+            <span>{{ formatToPercent(rating) }}</span>
+          </div>
+        </div>
+      </h3>
+      <div class="mt-2">
+        <woot-horizontal-bar :collection="chartData" :height="24" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index d78b97666..c500854c0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="csat--table-container">
-    <ve-table
-      max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
-      :border-around="true"
-      :columns="columns"
-      :table-data="tableData"
-    />
-    <div v-show="!tableData.length" class="csat--empty-records">
-      {{ $t('CSAT_REPORTS.NO_RECORDS') }}
-    </div>
-    <div v-if="metrics.totalResponseCount" class="table-pagination">
-      <ve-pagination
-        :total="metrics.totalResponseCount"
-        :page-index="pageIndex"
-        :page-size="25"
-        :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import { VeTable, VePagination } from 'vue-easytable';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
@@ -43,7 +20,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      uiFlags: 'csat/getUIFlags',
       csatResponses: 'csat/getCSATResponses',
       metrics: 'csat/getMetrics',
     }),
@@ -144,11 +120,36 @@ export default {
   },
   methods: {
     onPageNumberChange(pageIndex) {
-      this.$emit('page-change', pageIndex);
+      this.$emit('pageChange', pageIndex);
     },
   },
 };
 </script>
+
+<template>
+  <div class="csat--table-container">
+    <VeTable
+      max-height="calc(100vh - 21.875rem)"
+      fixed-header
+      border-around
+      :columns="columns"
+      :table-data="tableData"
+    />
+    <div v-show="!tableData.length" class="csat--empty-records">
+      {{ $t('CSAT_REPORTS.NO_RECORDS') }}
+    </div>
+    <div v-if="metrics.totalResponseCount" class="table-pagination">
+      <VePagination
+        :total="metrics.totalResponseCount"
+        :page-index="pageIndex"
+        :page-size="25"
+        :page-size-option="[25]"
+        @on-page-number-change="onPageNumberChange"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .csat--table-container {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 6312419a0..0e7bfd4c3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -1,55 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
-    <div
-      class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
-    >
-      <reports-filters-date-range @on-range-change="onDateRangeChange" />
-      <woot-date-range-picker
-        v-if="isDateRangeSelected"
-        show-range
-        class="no-margin auto-width"
-        :value="customDateRange"
-        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-        @change="onCustomDateRangeChange"
-      />
-      <reports-filters-date-group-by
-        v-if="showGroupByFilter && isGroupByPossible"
-        :valid-group-options="validGroupOptions"
-        :selected-option="selectedGroupByFilter"
-        @on-grouping-change="onGroupingChange"
-      />
-      <reports-filters-agents
-        v-if="showAgentsFilter"
-        @agents-filter-selection="handleAgentsFilterSelection"
-      />
-      <reports-filters-labels
-        v-if="showLabelsFilter"
-        @labels-filter-selection="handleLabelsFilterSelection"
-      />
-      <reports-filters-teams
-        v-if="showTeamFilter"
-        @team-filter-selection="handleTeamFilterSelection"
-      />
-      <reports-filters-inboxes
-        v-if="showInboxFilter"
-        @inbox-filter-selection="handleInboxFilterSelection"
-      />
-      <reports-filters-ratings
-        v-if="showRatingFilter"
-        @rating-filter-selection="handleRatingFilterSelection"
-      />
-    </div>
-    <div v-if="showBusinessHoursSwitch" class="flex items-center">
-      <span class="mx-2 text-sm whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
-      </span>
-    </div>
-  </div>
-</template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 import ReportsFiltersDateRange from './Filters/DateRange.vue';
@@ -75,10 +23,6 @@ export default {
     ReportsFiltersRatings,
   },
   props: {
-    filterItemsList: {
-      type: Array,
-      default: () => [],
-    },
     showGroupByFilter: {
       type: Boolean,
       default: false,
@@ -182,7 +126,7 @@ export default {
         selectedTeam,
         selectedRating,
       } = this;
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         groupBy,
@@ -231,3 +175,56 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
+    <div
+      class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
+    >
+      <ReportsFiltersDateRange @on-range-change="onDateRangeChange" />
+      <WootDateRangePicker
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+      <ReportsFiltersDateGroupBy
+        v-if="showGroupByFilter && isGroupByPossible"
+        :valid-group-options="validGroupOptions"
+        :selected-option="selectedGroupByFilter"
+        @onGroupingChange="onGroupingChange"
+      />
+      <ReportsFiltersAgents
+        v-if="showAgentsFilter"
+        @agentsFilterSelection="handleAgentsFilterSelection"
+      />
+      <ReportsFiltersLabels
+        v-if="showLabelsFilter"
+        @labelsFilterSelection="handleLabelsFilterSelection"
+      />
+      <ReportsFiltersTeams
+        v-if="showTeamFilter"
+        @teamFilterSelection="handleTeamFilterSelection"
+      />
+      <ReportsFiltersInboxes
+        v-if="showInboxFilter"
+        @inboxFilterSelection="handleInboxFilterSelection"
+      />
+      <ReportsFiltersRatings
+        v-if="showRatingFilter"
+        @ratingFilterSelection="handleRatingFilterSelection"
+      />
+    </div>
+    <div v-if="showBusinessHoursSwitch" class="flex items-center">
+      <span class="mx-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
index 4baecbb48..f671ee14c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOptions"
-      class="no-margin"
-      :options="options"
-      track-by="id"
-      label="name"
-      :multiple="true"
-      :close-on-select="false"
-      :clear-on-select="false"
-      :hide-selected="true"
-      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,8 +18,29 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('agents-filter-selection', this.selectedOptions);
+      this.$emit('agentsFilterSelection', this.selectedOptions);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOptions"
+      class="no-margin"
+      :options="options"
+      track-by="id"
+      label="name"
+      multiple
+      :close-on-select="false"
+      :clear-on-select="false"
+      hide-selected
+      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
index a360c5e8d..7dd2119af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
@@ -1,27 +1,6 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <p aria-hidden="true" class="hide">
-      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-    </p>
-    <multiselect
-      v-model="currentSelectedFilter"
-      class="no-margin"
-      track-by="id"
-      label="groupBy"
-      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-      :options="translatedOptions"
-      :allow-empty="false"
-      :show-labels="false"
-      @select="changeFilterSelection"
-    />
-  </div>
-</template>
-
 <script>
 import { GROUP_BY_OPTIONS } from '../../constants';
 
-const EVENT_NAME = 'on-grouping-change';
-
 export default {
   name: 'ReportsFiltersDateGroupBy',
   props: {
@@ -60,8 +39,27 @@ export default {
   },
   methods: {
     changeFilterSelection(selectedFilter) {
-      this.groupByOptions = this.$emit(EVENT_NAME, selectedFilter);
+      this.groupByOptions = this.$emit('onGroupingChange', selectedFilter);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <p aria-hidden="true" class="hide">
+      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+    </p>
+    <multiselect
+      v-model="currentSelectedFilter"
+      class="no-margin"
+      track-by="id"
+      label="groupBy"
+      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+      :options="translatedOptions"
+      :allow-empty="false"
+      :show-labels="false"
+      @select="changeFilterSelection"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
index b98283ced..4d1cc340f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      track-by="name"
-      label="name"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      deselect-label=""
-      :options="options"
-      :searchable="false"
-      :allow-empty="false"
-      @select="updateRange"
-    />
-  </div>
-</template>
-
 <script>
 import { DATE_RANGE_OPTIONS } from '../../constants';
 
@@ -44,3 +25,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      track-by="name"
+      label="name"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      deselect-label=""
+      :options="options"
+      :searchable="false"
+      :allow-empty="false"
+      @select="updateRange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
index 652cb06a6..1119cacd6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -33,8 +18,24 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('inbox-filter-selection', this.selectedOption);
+      this.$emit('inboxFilterSelection', this.selectedOption);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
index d32879507..a1f103306 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="title"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    >
-      <template slot="singleLabel" slot-scope="props">
-        <div class="flex items-center gap-2">
-          <div
-            :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5"
-          />
-          <span class="reports-option__desc">
-            <span class="my-0 text-slate-800 dark:text-slate-75">
-              {{ props.option.title }}
-            </span>
-          </span>
-        </div>
-      </template>
-      <template slot="option" slot-scope="props">
-        <div class="flex items-center gap-2">
-          <div
-            :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
-          />
-          <span class="reports-option__desc">
-            <span class="my-0 text-slate-800 dark:text-slate-75">
-              {{ props.option.title }}
-            </span>
-          </span>
-        </div>
-      </template>
-    </multiselect>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -60,8 +18,51 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('labels-filter-selection', this.selectedOption);
+      this.$emit('labelsFilterSelection', this.selectedOption);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="title"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    >
+      <template slot="singleLabel" slot-scope="props">
+        <div class="flex items-center gap-2">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="w-5 h-5 rounded-full"
+          />
+          <span class="reports-option__desc">
+            <span class="my-0 text-slate-800 dark:text-slate-75">
+              {{ props.option.title }}
+            </span>
+          </span>
+        </div>
+      </template>
+      <template slot="option" slot-scope="props">
+        <div class="flex items-center gap-2">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+          />
+          <span class="reports-option__desc">
+            <span class="my-0 text-slate-800 dark:text-slate-75">
+              {{ props.option.title }}
+            </span>
+          </span>
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
index 49d6689ae..dc09b0744 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :option-height="24"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      :options="options"
-      :show-labels="false"
-      track-by="value"
-      label="label"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -32,8 +16,24 @@ export default {
   },
   methods: {
     handleInput(selectedRating) {
-      this.$emit('rating-filter-selection', selectedRating);
+      this.$emit('ratingFilterSelection', selectedRating);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :option-height="24"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      :options="options"
+      :show-labels="false"
+      track-by="value"
+      label="label"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
index f834a9e71..dc1a0ced5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -33,8 +18,24 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('team-filter-selection', this.selectedOption);
+      this.$emit('teamFilterSelection', this.selectedOption);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 623c15026..bf98c5d44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -50,14 +50,14 @@ const closeDropdown = () => emit('closeDropdown');
 </script>
 
 <template>
-  <filter-button
+  <FilterButton
     right-icon="chevron-down"
     :button-text="name"
     class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
     @click="toggleDropdown"
   >
     <template v-if="showMenu && activeFilterType === type" #dropdown>
-      <filter-list-dropdown
+      <FilterListDropdown
         v-if="options"
         v-on-clickaway="closeDropdown"
         show-clear-filter
@@ -70,5 +70,5 @@ const closeDropdown = () => emit('closeDropdown');
         @removeFilter="removeFilter"
       />
     </template>
-  </filter-button>
+  </FilterButton>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
index c35bdb061..e58d90a59 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
@@ -33,6 +33,8 @@ defineProps({
   },
 });
 
+const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
+
 const hoveredItemId = ref(null);
 
 const showSubMenu = id => {
@@ -45,7 +47,6 @@ const hideSubMenu = () => {
 
 const isHovered = id => hoveredItemId.value === id;
 
-const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
 const toggleDropdown = () => emit('toggleDropdown');
 const addFilter = item => {
   emit('addFilter', item);
@@ -58,19 +59,19 @@ const closeDropdown = () => {
 </script>
 
 <template>
-  <filter-button :button-text="name" left-icon="filter" @click="toggleDropdown">
+  <FilterButton :button-text="name" left-icon="filter" @click="toggleDropdown">
     <!-- Dropdown with search and sub-dropdown -->
     <template v-if="showMenu" #dropdown>
-      <filter-list-dropdown
+      <FilterListDropdown
         v-on-clickaway="closeDropdown"
         class="left-0 md:right-0 top-10"
       >
         <template #listItem>
-          <filter-dropdown-empty-state
+          <FilterDropdownEmptyState
             v-if="!menuOption.length"
             :message="emptyStateMessage"
           />
-          <filter-list-item-button
+          <FilterListItemButton
             v-for="item in menuOption"
             :key="item.id"
             :button-text="item.name"
@@ -80,7 +81,7 @@ const closeDropdown = () => {
           >
             <!-- Submenu with search and clear button  -->
             <template v-if="item.options && isHovered(item.id)" #dropdown>
-              <filter-list-dropdown
+              <FilterListDropdown
                 :list-items="item.options"
                 :input-placeholder="
                   $t(`${placeholderI18nKey}.${item.type.toUpperCase()}`)
@@ -90,9 +91,9 @@ const closeDropdown = () => {
                 @click="addFilter"
               />
             </template>
-          </filter-list-item-button>
+          </FilterListItemButton>
         </template>
-      </filter-list-dropdown>
+      </FilterListDropdown>
     </template>
-  </filter-button>
+  </FilterButton>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 6f28dabb5..f31ddcd59 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -9,7 +9,6 @@ import { getQuantileIntervals } from '@chatwoot/utils';
 import { groupHeatmapByDay } from 'helpers/ReportsDataHelper';
 import { useI18n } from 'dashboard/composables/useI18n';
 
-const { t } = useI18n();
 const props = defineProps({
   heatData: {
     type: Array,
@@ -20,7 +19,7 @@ const props = defineProps({
     default: false,
   },
 });
-
+const { t } = useI18n();
 const processedData = computed(() => {
   return groupHeatmapByDay(props.heatData);
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index 88eae0541..263390356 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -1,184 +1,3 @@
-<template>
-  <div class="flex flex-col md:flex-row">
-    <div class="flex items-center w-full flex-col md:flex-row">
-      <div
-        v-if="type === 'agent'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          :placeholder="multiselectLabel"
-          label="name"
-          track-by="id"
-          :options="filterItemsList"
-          :option-height="24"
-          :show-labels="false"
-          @input="changeFilterSelection"
-        >
-          <template slot="singleLabel" slot-scope="props">
-            <div class="flex items-center gap-2">
-              <thumbnail
-                :src="props.option.thumbnail"
-                :status="props.option.availability_status"
-                :username="props.option.name"
-                size="22px"
-              />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">{{
-                  props.option.name
-                }}</span>
-              </span>
-            </div>
-          </template>
-          <template slot="option" slot-scope="props">
-            <div class="flex items-center gap-2">
-              <thumbnail
-                :src="props.option.thumbnail"
-                :status="props.option.availability_status"
-                :username="props.option.name"
-                size="22px"
-              />
-              <p class="my-0 text-slate-800 dark:text-slate-75">
-                {{ props.option.name }}
-              </p>
-            </div>
-          </template>
-        </multiselect>
-      </div>
-      <div
-        v-else-if="type === 'label'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          :placeholder="multiselectLabel"
-          label="title"
-          track-by="id"
-          :options="filterItemsList"
-          :option-height="24"
-          :show-labels="false"
-          @input="changeFilterSelection"
-        >
-          <template slot="singleLabel" slot-scope="props">
-            <div class="flex gap-2 items-center">
-              <div
-                :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5"
-              />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">
-                  {{ props.option.title }}
-                </span>
-              </span>
-            </div>
-          </template>
-          <template slot="option" slot-scope="props">
-            <div class="flex items-center gap-2">
-              <div
-                :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
-              />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">
-                  {{ props.option.title }}
-                </span>
-              </span>
-            </div>
-          </template>
-        </multiselect>
-      </div>
-      <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
-          <template v-if="type === 'inbox'">
-            {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
-          </template>
-          <template v-else-if="type === 'team'">
-            {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
-          </template>
-          <!-- handle default condition because the prop is not limited to the given 4 values -->
-          <template v-else>
-            {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
-          </template>
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          track-by="id"
-          label="name"
-          :placeholder="multiselectLabel"
-          selected-label
-          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-          deselect-label=""
-          :options="filterItemsList"
-          :searchable="false"
-          :allow-empty="false"
-          @input="changeFilterSelection"
-        />
-      </div>
-      <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('REPORT.DURATION_FILTER_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentDateRangeSelection"
-          track-by="name"
-          label="name"
-          :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-          selected-label
-          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-          deselect-label=""
-          :options="dateRange"
-          :searchable="false"
-          :allow-empty="false"
-          @select="changeDateSelection"
-        />
-      </div>
-      <div v-if="isDateRangeSelected" class="">
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
-        </p>
-        <woot-date-range-picker
-          show-range
-          :value="customDateRange"
-          :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-          :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-          @change="onChange"
-        />
-      </div>
-      <div
-        v-if="notLast7Days"
-        class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedGroupByFilter"
-          track-by="id"
-          label="groupBy"
-          :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-          :options="groupByFilterItemsList"
-          :allow-empty="false"
-          :show-labels="false"
-          @input="changeGroupByFilterSelection"
-        />
-      </div>
-    </div>
-    <div class="flex items-center my-2">
-      <span class="text-sm mx-2 whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
-      </span>
-    </div>
-  </div>
-</template>
 <script>
 import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
@@ -283,7 +102,7 @@ export default {
       this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
     },
     businessHoursSelected() {
-      this.$emit('business-hours-toggle', this.businessHoursSelected);
+      this.$emit('businessHoursToggle', this.businessHoursSelected);
     },
   },
   mounted() {
@@ -291,7 +110,7 @@ export default {
   },
   methods: {
     onDateRangeChange() {
-      this.$emit('date-range-change', {
+      this.$emit('dateRangeChange', {
         from: this.from,
         to: this.to,
         groupBy: this.groupBy,
@@ -308,15 +127,197 @@ export default {
       this.onDateRangeChange();
     },
     changeFilterSelection() {
-      this.$emit('filter-change', this.currentSelectedFilter);
+      this.$emit('filterChange', this.currentSelectedFilter);
     },
     onChange(value) {
       this.customDateRange = value;
       this.onDateRangeChange();
     },
     changeGroupByFilterSelection() {
-      this.$emit('group-by-filter-change', this.currentSelectedGroupByFilter);
+      this.$emit('groupByFilterChange', this.currentSelectedGroupByFilter);
     },
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col md:flex-row">
+    <div class="flex flex-col items-center w-full md:flex-row">
+      <div
+        v-if="type === 'agent'"
+        class="md:w-[240px] w-full multiselect-wrap--small"
+      >
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentSelectedFilter"
+          :placeholder="multiselectLabel"
+          label="name"
+          track-by="id"
+          :options="filterItemsList"
+          :option-height="24"
+          :show-labels="false"
+          @input="changeFilterSelection"
+        >
+          <template slot="singleLabel" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <Thumbnail
+                :src="props.option.thumbnail"
+                :status="props.option.availability_status"
+                :username="props.option.name"
+                size="22px"
+              />
+              <span class="reports-option__desc">
+                <span class="my-0 text-slate-800 dark:text-slate-75">{{
+                  props.option.name
+                }}</span>
+              </span>
+            </div>
+          </template>
+          <template slot="option" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <Thumbnail
+                :src="props.option.thumbnail"
+                :status="props.option.availability_status"
+                :username="props.option.name"
+                size="22px"
+              />
+              <p class="my-0 text-slate-800 dark:text-slate-75">
+                {{ props.option.name }}
+              </p>
+            </div>
+          </template>
+        </multiselect>
+      </div>
+      <div
+        v-else-if="type === 'label'"
+        class="md:w-[240px] w-full multiselect-wrap--small"
+      >
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentSelectedFilter"
+          :placeholder="multiselectLabel"
+          label="title"
+          track-by="id"
+          :options="filterItemsList"
+          :option-height="24"
+          :show-labels="false"
+          @input="changeFilterSelection"
+        >
+          <template slot="singleLabel" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <div
+                :style="{ backgroundColor: props.option.color }"
+                class="w-5 h-5 rounded-full"
+              />
+              <span class="reports-option__desc">
+                <span class="my-0 text-slate-800 dark:text-slate-75">
+                  {{ props.option.title }}
+                </span>
+              </span>
+            </div>
+          </template>
+          <template slot="option" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <div
+                :style="{ backgroundColor: props.option.color }"
+                class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+              />
+              <span class="reports-option__desc">
+                <span class="my-0 text-slate-800 dark:text-slate-75">
+                  {{ props.option.title }}
+                </span>
+              </span>
+            </div>
+          </template>
+        </multiselect>
+      </div>
+      <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
+        <p class="mb-2 text-xs font-medium">
+          <template v-if="type === 'inbox'">
+            {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
+          </template>
+          <template v-else-if="type === 'team'">
+            {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
+          </template>
+          <!-- handle default condition because the prop is not limited to the given 4 values -->
+          <template v-else>
+            {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
+          </template>
+        </p>
+        <multiselect
+          v-model="currentSelectedFilter"
+          track-by="id"
+          label="name"
+          :placeholder="multiselectLabel"
+          selected-label
+          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+          deselect-label=""
+          :options="filterItemsList"
+          :searchable="false"
+          :allow-empty="false"
+          @input="changeFilterSelection"
+        />
+      </div>
+      <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('REPORT.DURATION_FILTER_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentDateRangeSelection"
+          track-by="name"
+          label="name"
+          :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+          selected-label
+          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+          deselect-label=""
+          :options="dateRange"
+          :searchable="false"
+          :allow-empty="false"
+          @select="changeDateSelection"
+        />
+      </div>
+      <div v-if="isDateRangeSelected" class="">
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
+        </p>
+        <WootDateRangePicker
+          show-range
+          :value="customDateRange"
+          :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+          :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+          @change="onChange"
+        />
+      </div>
+      <div
+        v-if="notLast7Days"
+        class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
+      >
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentSelectedGroupByFilter"
+          track-by="id"
+          label="groupBy"
+          :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+          :options="groupByFilterItemsList"
+          :allow-empty="false"
+          :show-labels="false"
+          @input="changeGroupByFilterSelection"
+        />
+      </div>
+    </div>
+    <div class="flex items-center my-2">
+      <span class="mx-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
index 2369e3330..44f512d06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
@@ -18,16 +18,19 @@ defineProps({
   },
 });
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div
     ref="reportMetricContainer"
-    class="m-0 p-4"
+    class="p-4 m-0"
     :class="{
       'grayscale pointer-events-none opacity-30': disabled,
     }"
   >
     <h3
-      class="flex items-center text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
+      class="flex items-center m-0 text-sm font-medium text-slate-800 dark:text-slate-100"
     >
       <span ref="reportMetricLabel">{{ label }}</span>
       <fluent-icon
@@ -40,7 +43,7 @@ defineProps({
     </h3>
     <h4
       ref="reportMetricValue"
-      class="text-slate-700 dark:text-slate-100 mb-0 mt-1 font-thin text-3xl"
+      class="mt-1 mb-0 text-3xl font-thin text-slate-700 dark:text-slate-100"
     >
       {{ value }}
     </h4>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
index 4bb34f925..ad37910cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
@@ -1,61 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
-  >
-    <!-- Active filters section -->
-    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
-      <active-filter-chip
-        v-for="filter in activeFilters"
-        v-bind="filter"
-        :key="filter.type"
-        :placeholder="
-          $t(
-            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
-          )
-        "
-        :active-filter-type="activeFilterType"
-        :show-menu="showSubDropdownMenu"
-        enable-search
-        @toggleDropdown="openActiveFilterDropdown"
-        @closeDropdown="closeActiveFilterDropdown"
-        @addFilter="addFilter"
-        @removeFilter="removeFilter"
-      />
-    </div>
-    <!-- Dividing line between Active filters and Add filter button -->
-    <div
-      v-if="hasActiveFilters && !isAllFilterSelected"
-      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
-    />
-    <!-- Add filter and clear filter button -->
-    <div class="flex items-center gap-2">
-      <add-filter-chip
-        v-if="!isAllFilterSelected"
-        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
-        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
-        :menu-option="filterListMenuItems"
-        :show-menu="showDropdownMenu"
-        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
-        @toggleDropdown="showDropdown"
-        @closeDropdown="closeDropdown"
-        @addFilter="addFilter"
-      />
-
-      <!-- Dividing line between Add filter and Clear all filter button -->
-      <div
-        v-if="hasActiveFilters"
-        class="w-px h-5 border border-slate-75 dark:border-slate-800"
-      />
-      <!-- Clear all filter button -->
-      <filter-button
-        v-if="hasActiveFilters"
-        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
-        @click="clearAllFilters"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import {
@@ -166,13 +108,13 @@ export default {
       const { type, id, name } = item;
       const filterKey = getFilterType(type, 'typeToKey');
       this.appliedFilters[filterKey] = type === 'labels' ? name : id;
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
       this.resetDropdown();
     },
     removeFilter(type) {
       const filterKey = getFilterType(type, 'typeToKey');
       this.appliedFilters[filterKey] = null;
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
     },
     clearAllFilters() {
       this.appliedFilters = {
@@ -182,7 +124,7 @@ export default {
         sla_policy_id: null,
         label_list: null,
       };
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
       this.resetDropdown();
     },
     showDropdown() {
@@ -208,3 +150,61 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
+  >
+    <!-- Active filters section -->
+    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
+      <ActiveFilterChip
+        v-for="filter in activeFilters"
+        v-bind="filter"
+        :key="filter.type"
+        :placeholder="
+          $t(
+            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
+          )
+        "
+        :active-filter-type="activeFilterType"
+        :show-menu="showSubDropdownMenu"
+        enable-search
+        @toggleDropdown="openActiveFilterDropdown"
+        @closeDropdown="closeActiveFilterDropdown"
+        @addFilter="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </div>
+    <!-- Dividing line between Active filters and Add filter button -->
+    <div
+      v-if="hasActiveFilters && !isAllFilterSelected"
+      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+    />
+    <!-- Add filter and clear filter button -->
+    <div class="flex items-center gap-2">
+      <AddFilterChip
+        v-if="!isAllFilterSelected"
+        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
+        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
+        :menu-option="filterListMenuItems"
+        :show-menu="showDropdownMenu"
+        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
+        @toggleDropdown="showDropdown"
+        @closeDropdown="closeDropdown"
+        @addFilter="addFilter"
+      />
+
+      <!-- Dividing line between Add filter and Clear all filter button -->
+      <div
+        v-if="hasActiveFilters"
+        class="w-px h-5 border border-slate-75 dark:border-slate-800"
+      />
+      <!-- Clear all filter button -->
+      <FilterButton
+        v-if="hasActiveFilters"
+        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
+        @click="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 634325393..6a4bafc2e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    toolTip: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
@@ -22,25 +45,3 @@
     </span>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: [String, Number],
-      required: true,
-    },
-    toolTip: {
-      type: String,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 5c598b403..9f638f3ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -1,3 +1,25 @@
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
 <template>
   <div
     class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
@@ -29,25 +51,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import SLAMetricCard from './SLAMetricCard.vue';
-defineProps({
-  hitRate: {
-    type: String,
-    required: true,
-  },
-  noOfBreaches: {
-    type: Number,
-    required: true,
-  },
-  noOfConversations: {
-    type: Number,
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
index 16fbbcf40..b9a149624 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <woot-date-picker @dateRangeChanged="onDateRangeChange" />
-    <SLA-filter @filter-change="emitFilterChange" />
-  </div>
-</template>
 <script>
 import SLAFilter from '../SLA/SLAFilter.vue';
 import subDays from 'date-fns/subDays';
@@ -44,7 +38,7 @@ export default {
       const fromDate = subDays(new Date(), offset);
       const from = getUnixStartOfDay(fromDate);
       const to = getUnixEndOfDay(new Date());
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         ...this.selectedGroupByFilter,
@@ -52,7 +46,7 @@ export default {
     },
     emitChange() {
       const { from, to } = this;
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         ...this.selectedGroupByFilter,
@@ -69,3 +63,10 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
+    <woot-date-picker @dateRangeChanged="onDateRangeChange" />
+    <SLAFilter @filterChange="emitFilterChange" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index 129265cdf..5d9d480f2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -24,7 +24,7 @@ defineProps({
 
 <template>
   <div
-    class="grid content-center items-center h-16 grid-cols-12 gap-4 px-6 py-0 w-full bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
   >
     <div
       class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
@@ -32,11 +32,13 @@ defineProps({
       <span class="text-slate-700 dark:text-slate-200">
         {{ `#${conversationId} ` }}
       </span>
-      <span class="text-slate-600 dark:text-slate-300">with </span>
-      <span class="text-slate-700 dark:text-slate-200 capitalize truncate">{{
+      <span class="text-slate-600 dark:text-slate-300">
+        {{ $t('SLA_REPORTS.WITH') }}
+      </span>
+      <span class="capitalize truncate text-slate-700 dark:text-slate-200">{{
         conversation.contact.name
       }}</span>
-      <card-labels
+      <CardLabels
         class="w-[80%]"
         :conversation-id="conversationId"
         :conversation-labels="conversation.labels"
@@ -47,8 +49,8 @@ defineProps({
     >
       {{ slaName }}
     </div>
-    <div class="flex items-center gap-2 col-span-2">
-      <user-avatar-with-name
+    <div class="flex items-center col-span-2 gap-2">
+      <UserAvatarWithName
         v-if="conversation.assignee"
         :user="conversation.assignee"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index 61ac3056f..542ba78e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -1,60 +1,3 @@
-<template>
-  <div>
-    <div
-      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
-    >
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
-      >
-        <table-header-cell
-          :span="6"
-          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
-        />
-        <table-header-cell
-          :span="2"
-          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
-        />
-        <table-header-cell
-          :span="2"
-          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
-        />
-        <table-header-cell :span="2" label="" />
-      </div>
-
-      <div
-        v-if="isLoading"
-        class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
-      >
-        <spinner />
-        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
-      </div>
-      <div v-else-if="slaReports.length > 0">
-        <SLA-report-item
-          v-for="slaReport in slaReports"
-          :key="slaReport.applied_sla.id"
-          :sla-name="slaReport.applied_sla.sla_name"
-          :conversation="slaReport.conversation"
-          :conversation-id="slaReport.conversation.id"
-          :sla-events="slaReport.sla_events"
-        />
-      </div>
-      <div
-        v-else
-        class="flex items-center justify-center rounded-b-xl h-32 bg-white dark:bg-slate-900"
-      >
-        {{ $t('SLA_REPORTS.NO_RECORDS') }}
-      </div>
-    </div>
-    <table-footer
-      v-if="shouldShowFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
 <script>
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
 import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
@@ -104,8 +47,65 @@ export default {
   },
   methods: {
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+    >
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+      >
+        <TableHeaderCell
+          :span="6"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
+        />
+        <TableHeaderCell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
+        />
+        <TableHeaderCell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
+        />
+        <TableHeaderCell :span="2" label="" />
+      </div>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
+      >
+        <Spinner />
+        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
+      </div>
+      <div v-else-if="slaReports.length > 0">
+        <SLAReportItem
+          v-for="slaReport in slaReports"
+          :key="slaReport.applied_sla.id"
+          :sla-name="slaReport.applied_sla.sla_name"
+          :conversation="slaReport.conversation"
+          :conversation-id="slaReport.conversation.id"
+          :sla-events="slaReport.sla_events"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
+    </div>
+    <TableFooter
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @pageChange="onPageChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index be40349fe..ff84c2f1c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -1,26 +1,3 @@
-<template>
-  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      <div class="relative">
-        <woot-button
-          color-scheme="secondary"
-          variant="link"
-          @click="openSlaEvents"
-        >
-          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-        </woot-button>
-        <SLA-popover-card
-          v-if="showSlaPopoverCard"
-          :sla-missed-events="slaEvents"
-          class="right-0"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
@@ -50,3 +27,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <div class="relative">
+        <woot-button
+          color-scheme="secondary"
+          variant="link"
+          @click="openSlaEvents"
+        >
+          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+        </woot-button>
+        <SLAPopoverCard
+          v-if="showSlaPopoverCard"
+          :sla-missed-events="slaEvents"
+          class="right-0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index ecffa1a3b..2d5e52462 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ downloadButtonLabel }}
-    </woot-button>
-    <report-filters
-      v-if="filterItemsList"
-      :type="type"
-      :filter-items-list="filterItemsList"
-      :group-by-filter-items-list="groupByfilterItemsList"
-      :selected-group-by-filter="selectedGroupByFilter"
-      @date-range-change="onDateRangeChange"
-      @filter-change="onFilterChange"
-      @group-by-filter-change="onGroupByFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
-    />
-    <report-container v-if="filterItemsList.length" :group-by="groupBy" />
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
@@ -204,3 +179,28 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ downloadButtonLabel }}
+    </woot-button>
+    <ReportFilters
+      v-if="filterItemsList"
+      :type="type"
+      :filter-items-list="filterItemsList"
+      :group-by-filter-items-list="groupByfilterItemsList"
+      :selected-group-by-filter="selectedGroupByFilter"
+      @dateRangeChange="onDateRangeChange"
+      @filterChange="onFilterChange"
+      @groupByFilterChange="onGroupByFilterChange"
+      @businessHoursToggle="onBusinessHoursToggle"
+    />
+    <ReportContainer v-if="filterItemsList.length" :group-by="groupBy" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 4fc7fdbf6..44e6f51f9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -1,33 +1,3 @@
-<template>
-  <div class="agent-table-container">
-    <ve-table
-      max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
-      :columns="columns"
-      :table-data="tableData"
-    />
-    <div v-if="isLoading" class="agents-loader">
-      <spinner />
-      <span>{{
-        $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
-      }}</span>
-    </div>
-    <empty-state
-      v-else-if="!isLoading && !agentMetrics.length"
-      :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
-    />
-    <div v-if="agentMetrics.length > 0" class="table-pagination">
-      <ve-pagination
-        :total="agents.length"
-        :page-index="pageIndex"
-        :page-size="25"
-        :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
@@ -98,7 +68,7 @@ export default {
                 status={row.status}
               />
               <div class="user-block">
-                <h6 class="title overflow-hidden whitespace-nowrap text-ellipsis">
+                <h6 class="overflow-hidden title whitespace-nowrap text-ellipsis">
                   {row.agent}
                 </h6>
                 <span class="sub-title">{row.email}</span>
@@ -129,7 +99,7 @@ export default {
   },
   methods: {
     onPageNumberChange(pageIndex) {
-      this.$emit('page-change', pageIndex);
+      this.$emit('pageChange', pageIndex);
     },
     getAgentInformation(id) {
       return this.agents?.find(agent => agent.id === Number(id));
@@ -138,6 +108,36 @@ export default {
 };
 </script>
 
+<template>
+  <div class="agent-table-container">
+    <VeTable
+      max-height="calc(100vh - 21.875rem)"
+      fixed-header
+      :columns="columns"
+      :table-data="tableData"
+    />
+    <div v-if="isLoading" class="agents-loader">
+      <Spinner />
+      <span>{{
+        $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
+      }}</span>
+    </div>
+    <EmptyState
+      v-else-if="!isLoading && !agentMetrics.length"
+      :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
+    />
+    <div v-if="agentMetrics.length > 0" class="table-pagination">
+      <VePagination
+        :total="agents.length"
+        :page-index="pageIndex"
+        :page-size="25"
+        :page-size-option="[25]"
+        @on-page-number-change="onPageNumberChange"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .agent-table-container {
   @apply flex flex-col flex-1;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index d40555c9d..50f9cd0ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -1,3 +1,28 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  name: 'MetricCard',
+  components: {
+    Spinner,
+  },
+  props: {
+    header: {
+      type: String,
+      default: '',
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="metric-card flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
@@ -36,37 +61,14 @@
       v-else-if="isLoading"
       class="items-center flex text-base justify-center px-12 py-6"
     >
-      <spinner />
+      <Spinner />
       <span class="text-slate-300 dark:text-slate-200">
         {{ loadingMessage }}
       </span>
     </div>
   </div>
 </template>
-<script>
-import Spinner from 'shared/components/Spinner.vue';
 
-export default {
-  name: 'MetricCard',
-  components: {
-    Spinner,
-  },
-  props: {
-    header: {
-      type: String,
-      default: '',
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    loadingMessage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .metric-card {
   @apply flex flex-col mb-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
index 2964bf24d..56b4fe186 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
@@ -43,8 +43,8 @@ describe('ReportsFiltersAgents.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('agents-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('agents-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('agentsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('agentsFilterSelection')[0]).toEqual([
       selectedAgents,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
index bbe93beb7..f25f57742 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
@@ -16,8 +16,8 @@ describe('ReportsFiltersDateGroupBy.vue', () => {
     const selectedFilter = GROUP_BY_OPTIONS.DAY;
     wrapper.vm.changeFilterSelection(selectedFilter);
 
-    expect(wrapper.emitted('on-grouping-change')).toBeTruthy();
-    expect(wrapper.emitted('on-grouping-change')[0]).toEqual([selectedFilter]);
+    expect(wrapper.emitted('onGroupingChange')).toBeTruthy();
+    expect(wrapper.emitted('onGroupingChange')[0]).toEqual([selectedFilter]);
   });
 
   it('updates currentSelectedFilter when selectedOption is changed', async () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
index 83e4b222c..50a87e979 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
@@ -58,9 +58,7 @@ describe('ReportsFiltersInboxes.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('inbox-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('inbox-filter-selection')[0]).toEqual([
-      selectedInbox,
-    ]);
+    expect(wrapper.emitted('inboxFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('inboxFilterSelection')[0]).toEqual([selectedInbox]);
   });
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
index 03fadac5f..cf5fe6ebd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
@@ -58,8 +58,8 @@ describe('ReportsFiltersLabels.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('labels-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('labels-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('labelsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('labelsFilterSelection')[0]).toEqual([
       selectedLabel,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
index 5b650cd99..870aa5a50 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
@@ -23,8 +23,8 @@ describe('ReportFiltersRatings.vue', () => {
 
     wrapper.vm.handleInput(selectedRating);
 
-    expect(wrapper.emitted('rating-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('rating-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('ratingFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('ratingFilterSelection')[0]).toEqual([
       selectedRating,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
index ecfec4e1e..aa1aba637 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
@@ -54,8 +54,8 @@ describe('ReportsFiltersTeams.vue', () => {
     });
     wrapper.setData({ selectedOption: { id: 1, name: 'Team 1' } });
     wrapper.vm.handleInput();
-    expect(wrapper.emitted('team-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('team-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('teamFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('teamFilterSelection')[0]).toEqual([
       { id: 1, name: 'Team 1' },
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
index 16a4f49b6..4a4ac00c3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
@@ -2,9 +2,9 @@
 
 exports[`CsatMetrics.vue > computes response count correctly 1`] = `
 "<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
+  <csatmetriccard-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csatmetriccard-stub>
+  <csatmetriccard-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csatmetriccard-stub>
+  <csatmetriccard-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csatmetriccard-stub>
   <!---->
 </div>"
 `;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index 30a50c8e9..5b0158af2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -1,19 +1,4 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('SLA.ADD.TITLE')"
-      :header-content="$t('SLA.ADD.DESC')"
-    />
-    <sla-form
-      :submit-label="$t('SLA.FORM.CREATE')"
-      @submit="addSLA"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SlaForm from './SlaForm.vue';
 
@@ -21,11 +6,6 @@ export default {
   components: {
     SlaForm,
   },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'sla/getUIFlags',
-    }),
-  },
   methods: {
     onClose() {
       this.$emit('close');
@@ -44,3 +24,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('SLA.ADD.TITLE')"
+      :header-content="$t('SLA.ADD.DESC')"
+    />
+    <SlaForm
+      :submit-label="$t('SLA.FORM.CREATE')"
+      @submit="addSLA"
+      @close="onClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index 94ac5189e..8a5efc5e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -1,57 +1,3 @@
-<template>
-  <settings-layout
-    :is-loading="uiFlags.isFetching"
-    :loading-message="$t('SLA.LOADING')"
-  >
-    <template #header>
-      <SLA-header :show-actions="records.length > 0" @click="openAddPopup" />
-    </template>
-    <template #loading>
-      <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
-    </template>
-    <template #body>
-      <SLAPaywallEnterprise
-        v-if="isBehindAPaywall"
-        :is-super-admin="isSuperAdmin"
-        :is-on-chatwoot-cloud="isOnChatwootCloud"
-        @click="onClickCTA"
-      />
-      <SLAEmptyState
-        v-else-if="!records.length"
-        @primary-action="openAddPopup"
-      />
-      <div v-else class="flex flex-col w-full h-full gap-3">
-        <SLA-list-item
-          v-for="sla in records"
-          :key="sla.title"
-          :sla-name="sla.name"
-          :description="sla.description"
-          :first-response="displayTime(sla.first_response_time_threshold)"
-          :next-response="displayTime(sla.next_response_time_threshold)"
-          :resolution-time="displayTime(sla.resolution_time_threshold)"
-          :has-business-hours="sla.only_during_business_hours"
-          :is-loading="loading[sla.id]"
-          @click="openDeletePopup(sla)"
-        />
-      </div>
-
-      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-        <add-SLA @close="hideAddPopup" />
-      </woot-modal>
-
-      <woot-delete-modal
-        :show.sync="showDeleteConfirmationPopup"
-        :on-close="closeDeletePopup"
-        :on-confirm="confirmDeletion"
-        :title="$t('SLA.DELETE.CONFIRM.TITLE')"
-        :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
-        :message-value="deleteMessage"
-        :confirm-text="deleteConfirmText"
-        :reject-text="deleteRejectText"
-      />
-    </template>
-  </settings-layout>
-</template>
 <script>
 import AddSLA from './AddSLA.vue';
 import SettingsLayout from '../SettingsLayout.vue';
@@ -87,7 +33,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      globalConfig: 'globalConfig/get',
       isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       records: 'sla/getSLA',
@@ -167,3 +112,58 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('SLA.LOADING')"
+  >
+    <template #header>
+      <SLAHeader :show-actions="records.length > 0" @click="openAddPopup" />
+    </template>
+    <template #loading>
+      <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
+    </template>
+    <template #body>
+      <SLAPaywallEnterprise
+        v-if="isBehindAPaywall"
+        :is-super-admin="isSuperAdmin"
+        :is-on-chatwoot-cloud="isOnChatwootCloud"
+        @click="onClickCTA"
+      />
+      <SLAEmptyState
+        v-else-if="!records.length"
+        @primaryAction="openAddPopup"
+      />
+      <div v-else class="flex flex-col w-full h-full gap-3">
+        <SLAListItem
+          v-for="sla in records"
+          :key="sla.title"
+          :sla-name="sla.name"
+          :description="sla.description"
+          :first-response="displayTime(sla.first_response_time_threshold)"
+          :next-response="displayTime(sla.next_response_time_threshold)"
+          :resolution-time="displayTime(sla.resolution_time_threshold)"
+          :has-business-hours="sla.only_during_business_hours"
+          :is-loading="loading[sla.id]"
+          @click="openDeletePopup(sla)"
+        />
+      </div>
+
+      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+        <AddSLA @close="hideAddPopup" />
+      </woot-modal>
+
+      <woot-delete-modal
+        :show.sync="showDeleteConfirmationPopup"
+        :on-close="closeDeletePopup"
+        :on-confirm="confirmDeletion"
+        :title="$t('SLA.DELETE.CONFIRM.TITLE')"
+        :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
+        :message-value="deleteMessage"
+        :confirm-text="deleteConfirmText"
+        :reject-text="deleteRejectText"
+      />
+    </template>
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index e66c17d28..e559e96cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <form class="flex flex-wrap mx-0" @submit.prevent="onSubmit">
-      <woot-input
-        v-model="name"
-        :class="{ error: v$.name.$error }"
-        class="w-full"
-        :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
-        }"
-        :label="$t('SLA.FORM.NAME.LABEL')"
-        :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="slaNameErrorMessage"
-        @input="v$.name.$touch"
-      />
-      <woot-input
-        v-model="description"
-        class="w-full"
-        :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
-        }"
-        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
-      />
-
-      <sla-time-input
-        v-for="(input, index) in slaTimeInputs"
-        :key="index"
-        :threshold="input.threshold"
-        :threshold-unit="input.unit"
-        :label="$t(input.label)"
-        :placeholder="$t(input.placeholder)"
-        @input="updateThreshold(index, $event)"
-        @unit="updateUnit(index, $event)"
-        @isInValid="handleIsInvalid(index, $event)"
-      />
-
-      <div
-        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
-      >
-        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
-          {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
-        </span>
-        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
-      </div>
-
-      <div class="flex items-center justify-end w-full gap-2 mt-8">
-        <woot-button
-          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
-          @click.prevent="onClose"
-        >
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
-        <woot-button
-          :is-disabled="isSubmitDisabled"
-          class="px-4 rounded-xl"
-          :is-loading="uiFlags.isUpdating"
-        >
-          {{ submitLabel }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
@@ -220,3 +151,72 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <form class="flex flex-wrap mx-0" @submit.prevent="onSubmit">
+      <woot-input
+        v-model="name"
+        :class="{ error: v$.name.$error }"
+        class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
+        :label="$t('SLA.FORM.NAME.LABEL')"
+        :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
+        :error="slaNameErrorMessage"
+        @input="v$.name.$touch"
+      />
+      <woot-input
+        v-model="description"
+        class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
+        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
+      />
+
+      <SlaTimeInput
+        v-for="(input, index) in slaTimeInputs"
+        :key="index"
+        :threshold="input.threshold"
+        :threshold-unit="input.unit"
+        :label="$t(input.label)"
+        :placeholder="$t(input.placeholder)"
+        @input="updateThreshold(index, $event)"
+        @unit="updateUnit(index, $event)"
+        @isInValid="handleIsInvalid(index, $event)"
+      />
+
+      <div
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
+      >
+        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
+          {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
+        </span>
+        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
+      </div>
+
+      <div class="flex items-center justify-end w-full gap-2 mt-8">
+        <woot-button
+          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+          @click.prevent="onClose"
+        >
+          {{ $t('SLA.FORM.CANCEL') }}
+        </woot-button>
+        <woot-button
+          :is-disabled="isSubmitDisabled"
+          class="px-4 rounded-xl"
+          :is-loading="uiFlags.isUpdating"
+        >
+          {{ submitLabel }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index ecfadfe76..b1fc7a342 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="flex items-center w-full gap-3">
-    <woot-input
-      v-model="thresholdTime"
-      :class="{ error: v$.thresholdTime.$error }"
-      class="flex-grow"
-      :styles="{
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
-      }"
-      :label="label"
-      :placeholder="placeholder"
-      :error="thresholdTimeErrorMessage"
-      @input="onThresholdTimeChange"
-    />
-    <!-- the mt-7 handles the label offset -->
-    <div class="mt-7">
-      <select
-        v-model="thresholdUnitValue"
-        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
-        @change="onThresholdUnitChange"
-      >
-        <option
-          v-for="(option, index) in options"
-          :key="index"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
 <script>
 import validations from './validations';
 import { useVuelidate } from '@vuelidate/core';
@@ -113,3 +78,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center w-full gap-3">
+    <woot-input
+      v-model="thresholdTime"
+      :class="{ error: v$.thresholdTime.$error }"
+      class="flex-grow"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
+      :label="label"
+      :placeholder="placeholder"
+      :error="thresholdTimeErrorMessage"
+      @input="onThresholdTimeChange"
+    />
+    <!-- the mt-7 handles the label offset -->
+    <div class="mt-7">
+      <select
+        v-model="thresholdUnitValue"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
+        @change="onThresholdUnitChange"
+      >
+        <option
+          v-for="(option, index) in options"
+          :key="index"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
index eb8bfd65a..2711658ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
@@ -5,7 +5,7 @@ import SLAListItem from './SLAListItem.vue';
 <template>
   <div class="w-full min-h-[12rem] relative">
     <div class="w-full space-y-3">
-      <SLA-list-item
+      <SLAListItem
         class="opacity-25 dark:opacity-20"
         :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
         :description="$t('SLA.LIST.EMPTY.DESC_1')"
@@ -14,7 +14,7 @@ import SLAListItem from './SLAListItem.vue';
         resolution-time="24h"
         has-business-hours
       />
-      <SLA-list-item
+      <SLAListItem
         class="opacity-25 dark:opacity-20"
         :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
         :description="$t('SLA.LIST.EMPTY.DESC_2')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
index 8790fe2a8..3f8cad837 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-slate-75 dark:border-slate-700/50"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
index cfb40dbdc..b969a8c37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
@@ -1,12 +1,12 @@
 <script setup>
 import BaseEmptyState from './BaseEmptyState.vue';
 
-const emit = defineEmits(['primary-action']);
-const primaryAction = () => emit('primary-action');
+const emit = defineEmits(['primaryAction']);
+const primaryAction = () => emit('primaryAction');
 </script>
 
 <template>
-  <base-empty-state>
+  <BaseEmptyState>
     <p class="max-w-xs text-sm font-medium text-center">
       {{ $t('SLA.LIST.404') }}
     </p>
@@ -18,5 +18,5 @@ const primaryAction = () => emit('primary-action');
     >
       {{ $t('SLA.ADD_ACTION_LONG') }}
     </woot-button>
-  </base-empty-state>
+  </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
index 8c3f570f5..36d954df1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
@@ -10,6 +10,7 @@ defineProps({
 
 defineEmits(['click']);
 </script>
+
 <template>
   <BaseSettingsHeader
     :title="$t('SLA.HEADER')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
index 08e66dbfe..b318478fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
@@ -34,22 +34,23 @@ defineProps({
   },
 });
 </script>
+
 <template>
-  <base-settings-list-item
+  <BaseSettingsListItem
     class="sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50"
     :title="slaName"
     :description="description"
   >
     <template #label>
-      <SLA-business-hours-label :has-business-hours="hasBusinessHours" />
+      <SLABusinessHoursLabel :has-business-hours="hasBusinessHours" />
     </template>
     <template #rightSection>
       <div
         class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
       >
-        <SLA-response-time response-type="FRT" :response-time="firstResponse" />
-        <SLA-response-time response-type="NRT" :response-time="nextResponse" />
-        <SLA-response-time response-type="RT" :response-time="resolutionTime" />
+        <SLAResponseTime response-type="FRT" :response-time="firstResponse" />
+        <SLAResponseTime response-type="NRT" :response-time="nextResponse" />
+        <SLAResponseTime response-type="RT" :response-time="resolutionTime" />
       </div>
     </template>
     <template #actions>
@@ -64,5 +65,5 @@ defineProps({
         @click="$emit('click')"
       />
     </template>
-  </base-settings-list-item>
+  </BaseSettingsListItem>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
index 9041d6a2d..860ded975 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
@@ -1,8 +1,9 @@
 <script setup>
 import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 </script>
+
 <template>
-  <base-settings-list-item class="opacity-50">
+  <BaseSettingsListItem class="opacity-50">
     <template #title>
       <div
         class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
@@ -36,5 +37,5 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
         </div>
       </div>
     </template>
-  </base-settings-list-item>
+  </BaseSettingsListItem>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
index 6c69baa4c..6c3ac5368 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
@@ -17,7 +17,7 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
 </script>
 
 <template>
-  <base-empty-state>
+  <BaseEmptyState>
     <div
       class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
     >
@@ -72,5 +72,5 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
         </a>
       </template>
     </div>
-  </base-empty-state>
+  </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
index a2caaa4e5..e7e986e7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
@@ -10,6 +10,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index c3dbdfd42..a53479dc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -1,80 +1,3 @@
-<template>
-  <div>
-    <div class="add-agents__header" />
-    <table class="woot-table">
-      <thead>
-        <tr>
-          <td class="ltr:pl-2.5 rtl:pr-2.5">
-            <div class="flex items-center">
-              <input
-                name="select-all-agents"
-                type="checkbox"
-                :checked="allAgentsSelected ? 'checked' : ''"
-                :title="$t('TEAMS_SETTINGS.AGENTS.SELECT_ALL')"
-                @click.self="selectAllAgents"
-              />
-            </div>
-          </td>
-          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
-            {{ $t('TEAMS_SETTINGS.AGENTS.AGENT') }}
-          </td>
-          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
-            {{ $t('TEAMS_SETTINGS.AGENTS.EMAIL') }}
-          </td>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="agent in agentList"
-          :key="agent.id"
-          :class="agentRowClass(agent.id)"
-        >
-          <td class="w-12">
-            <div class="flex items-center">
-              <input
-                type="checkbox"
-                :checked="isAgentSelected(agent.id)"
-                @click.self="() => handleSelectAgent(agent.id)"
-              />
-            </div>
-          </td>
-          <td>
-            <div class="flex items-center gap-2">
-              <thumbnail
-                :src="agent.thumbnail"
-                size="24px"
-                :username="agent.name"
-                :status="agent.availability_status"
-              />
-              <h4 class="text-base mb-0 text-slate-800 dark:text-slate-100">
-                {{ agent.name }}
-              </h4>
-            </div>
-          </td>
-          <td>
-            {{ agent.email || '---' }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="flex items-center justify-between mt-2">
-      <p>
-        {{
-          $t('TEAMS_SETTINGS.AGENTS.SELECTED_COUNT', {
-            selected: selectedAgents.length,
-            total: agentList.length,
-          })
-        }}
-      </p>
-      <woot-submit-button
-        :button-text="submitButtonText"
-        :loading="isWorking"
-        :disabled="disableSubmitButton"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -145,6 +68,83 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="add-agents__header" />
+    <table class="woot-table">
+      <thead>
+        <tr>
+          <td class="ltr:pl-2.5 rtl:pr-2.5">
+            <div class="flex items-center">
+              <input
+                name="select-all-agents"
+                type="checkbox"
+                :checked="allAgentsSelected ? 'checked' : ''"
+                :title="$t('TEAMS_SETTINGS.AGENTS.SELECT_ALL')"
+                @click.self="selectAllAgents"
+              />
+            </div>
+          </td>
+          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
+            {{ $t('TEAMS_SETTINGS.AGENTS.AGENT') }}
+          </td>
+          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
+            {{ $t('TEAMS_SETTINGS.AGENTS.EMAIL') }}
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="agent in agentList"
+          :key="agent.id"
+          :class="agentRowClass(agent.id)"
+        >
+          <td class="w-12">
+            <div class="flex items-center">
+              <input
+                type="checkbox"
+                :checked="isAgentSelected(agent.id)"
+                @click.self="() => handleSelectAgent(agent.id)"
+              />
+            </div>
+          </td>
+          <td>
+            <div class="flex items-center gap-2">
+              <Thumbnail
+                :src="agent.thumbnail"
+                size="24px"
+                :username="agent.name"
+                :status="agent.availability_status"
+              />
+              <h4 class="text-base mb-0 text-slate-800 dark:text-slate-100">
+                {{ agent.name }}
+              </h4>
+            </div>
+          </td>
+          <td>
+            {{ agent.email || '---' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="flex items-center justify-between mt-2">
+      <p>
+        {{
+          $t('TEAMS_SETTINGS.AGENTS.SELECTED_COUNT', {
+            selected: selectedAgents.length,
+            total: agentList.length,
+          })
+        }}
+      </p>
+      <woot-submit-button
+        :button-text="submitButtonText"
+        :loading="isWorking"
+        :disabled="disableSubmitButton"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 input {
   @apply mb-0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index 1d686abb6..5fe7ae531 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <form
-      class="flex flex-wrap mx-0 overflow-x-auto"
-      @submit.prevent="addAgents"
-    >
-      <div class="w-full">
-        <page-header
-          :header-title="headerTitle"
-          :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
-        />
-      </div>
-
-      <div class="w-full">
-        <div v-if="v$.selectedAgents.$error">
-          <p class="error-message">
-            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
-          </p>
-        </div>
-        <agent-selector
-          :agent-list="agentList"
-          :selected-agents="selectedAgents"
-          :update-selected-agents="updateSelectedAgents"
-          :is-working="isCreating"
-          :submit-button-text="$t('TEAMS_SETTINGS.ADD.BUTTON_TEXT')"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -45,12 +12,6 @@ export default {
     PageHeader,
     AgentSelector,
   },
-  props: {
-    team: {
-      type: Object,
-      default: () => {},
-    },
-  },
   validations: {
     selectedAgents: {
       isEmpty() {
@@ -125,3 +86,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <form
+      class="flex flex-wrap mx-0 overflow-x-auto"
+      @submit.prevent="addAgents"
+    >
+      <div class="w-full">
+        <PageHeader
+          :header-title="headerTitle"
+          :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
+        />
+      </div>
+
+      <div class="w-full">
+        <div v-if="v$.selectedAgents.$error">
+          <p class="error-message">
+            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
+          </p>
+        </div>
+        <AgentSelector
+          :agent-list="agentList"
+          :selected-agents="selectedAgents"
+          :update-selected-agents="updateSelectedAgents"
+          :is-working="isCreating"
+          :submit-button-text="$t('TEAMS_SETTINGS.ADD.BUTTON_TEXT')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
index 8a524d87b..52e235c48 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
-      :header-content="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.DESC')"
-    />
-    <div class="flex flex-wrap">
-      <team-form
-        :on-submit="createTeam"
-        :submit-in-progress="false"
-        :submit-button-text="$t('TEAMS_SETTINGS.FORM.SUBMIT_CREATE')"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import TeamForm from '../TeamForm.vue';
@@ -53,3 +35,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
+      :header-content="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.DESC')"
+    />
+    <div class="flex flex-wrap">
+      <TeamForm
+        :on-submit="createTeam"
+        :submit-in-progress="false"
+        :submit-button-text="$t('TEAMS_SETTINGS.FORM.SUBMIT_CREATE')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 232c20527..ff05352ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
-    <router-view />
-  </div>
-</template>
-
 <script>
 export default {
   computed: {
@@ -17,3 +8,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+    <router-view />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index f3d7a972f..c22ab0ed4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 overflow-x-auto dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <form
-      class="flex flex-wrap mx-0 overflow-x-auto"
-      @submit.prevent="addAgents"
-    >
-      <div class="w-full">
-        <page-header
-          :header-title="headerTitle"
-          :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
-        />
-      </div>
-
-      <div class="w-full">
-        <div v-if="v$.selectedAgents.$error">
-          <p class="error-message">
-            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
-          </p>
-        </div>
-        <agent-selector
-          v-if="showAgentsList"
-          :agent-list="agentList"
-          :selected-agents="selectedAgents"
-          :update-selected-agents="updateSelectedAgents"
-          :is-working="isCreating"
-          :submit-button-text="
-            $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
-          "
-        />
-        <spinner v-else />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import router from '../../../../index';
@@ -51,13 +14,6 @@ export default {
     PageHeader,
     AgentSelector,
   },
-
-  props: {
-    team: {
-      type: Object,
-      default: () => {},
-    },
-  },
   validations: {
     selectedAgents: {
       isEmpty() {
@@ -145,3 +101,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 overflow-x-auto dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <form
+      class="flex flex-wrap mx-0 overflow-x-auto"
+      @submit.prevent="addAgents"
+    >
+      <div class="w-full">
+        <PageHeader
+          :header-title="headerTitle"
+          :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
+        />
+      </div>
+
+      <div class="w-full">
+        <div v-if="v$.selectedAgents.$error">
+          <p class="error-message">
+            {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
+          </p>
+        </div>
+        <AgentSelector
+          v-if="showAgentsList"
+          :agent-list="agentList"
+          :selected-agents="selectedAgents"
+          :update-selected-agents="updateSelectedAgents"
+          :is-working="isCreating"
+          :submit-button-text="
+            $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
+          "
+        />
+        <Spinner v-else />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
index 6af31827f..ebe1e9c96 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
-      :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.DESC')"
-    />
-    <div class="flex flex-wrap">
-      <team-form
-        v-if="showTeamForm"
-        :on-submit="updateTeam"
-        :submit-in-progress="false"
-        :submit-button-text="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.BUTTON_TEXT')"
-        :form-data="teamData"
-      />
-      <spinner v-else />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
@@ -76,3 +55,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
+      :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.DESC')"
+    />
+    <div class="flex flex-wrap">
+      <TeamForm
+        v-if="showTeamForm"
+        :on-submit="updateTeam"
+        :submit-in-progress="false"
+        :submit-button-text="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.BUTTON_TEXT')"
+        :form-data="teamData"
+      />
+      <Spinner v-else />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index 9a4e768b7..9364d4b47 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
-    <router-view />
-  </div>
-</template>
-
 <script>
 export default {
   computed: {
@@ -17,3 +8,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+    <router-view />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
index 2fa452935..b68652314 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -1,8 +1,18 @@
+<script>
+import EmptyState from '../../../../components/widgets/EmptyState.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+};
+</script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <empty-state
+    <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
       :message="$t('TEAMS_SETTINGS.FINISH.MESSAGE')"
       :button-text="$t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT')"
@@ -17,16 +27,6 @@
           {{ $t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
-
-<script>
-import EmptyState from '../../../../components/widgets/EmptyState.vue';
-
-export default {
-  components: {
-    EmptyState,
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 397233843..76dbdc0ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -1,3 +1,76 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import accountMixin from '../../../../mixins/account';
+
+export default {
+  components: {},
+  mixins: [accountMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
+  data() {
+    return {
+      loading: {},
+      showSettings: false,
+      showDeletePopup: false,
+      selectedTeam: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      teamsList: 'teams/getTeams',
+      globalConfig: 'globalConfig/get',
+    }),
+    deleteConfirmText() {
+      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${
+        this.selectedTeam.name
+      }`;
+    },
+    deleteRejectText() {
+      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
+    },
+    confirmDeleteTitle() {
+      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
+        teamName: this.selectedTeam.name,
+      });
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
+        teamName: this.selectedTeam.name,
+      })}`;
+    },
+  },
+  methods: {
+    async deleteTeam({ id }) {
+      try {
+        await this.$store.dispatch('teams/delete', id);
+        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+
+    confirmDeletion() {
+      this.deleteTeam(this.selectedTeam);
+      this.closeDelete();
+    },
+    openDelete(team) {
+      this.showDeletePopup = true;
+      this.selectedTeam = team;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedTeam = {};
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex-1 overflow-auto">
     <div class="flex flex-row gap-4 p-8">
@@ -75,83 +148,12 @@
       :reject-text="deleteRejectText"
       :confirm-value="selectedTeam.name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import accountMixin from '../../../../mixins/account';
 
-export default {
-  components: {},
-  mixins: [accountMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      loading: {},
-      showSettings: false,
-      showDeletePopup: false,
-      selectedTeam: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      teamsList: 'teams/getTeams',
-      globalConfig: 'globalConfig/get',
-    }),
-    deleteConfirmText() {
-      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${
-        this.selectedTeam.name
-      }`;
-    },
-    deleteRejectText() {
-      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
-    },
-    confirmDeleteTitle() {
-      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
-        teamName: this.selectedTeam.name,
-      });
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
-        teamName: this.selectedTeam.name,
-      })}`;
-    },
-  },
-  methods: {
-    async deleteTeam({ id }) {
-      try {
-        await this.$store.dispatch('teams/delete', id);
-        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-
-    confirmDeletion() {
-      this.deleteTeam(this.selectedTeam);
-      this.closeDelete();
-    },
-    openDelete(team) {
-      this.showDeletePopup = true;
-      this.selectedTeam = team;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedTeam = {};
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .button-wrapper {
   min-width: unset;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index 9cab0c2d3..66c445fbe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="mx-0 flex flex-wrap">
-    <div class="flex-shrink-0 flex-grow-0 w-full md:w-[65%]">
-      <form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
-        <woot-input
-          v-model.trim="title"
-          :class="{ error: v$.title.$error }"
-          class="w-full"
-          :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
-          :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
-          @input="v$.title.$touch"
-        />
-
-        <woot-input
-          v-model.trim="description"
-          :class="{ error: v$.description.$error }"
-          class="w-full"
-          :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
-          :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
-          @input="v$.description.$touch"
-        />
-
-        <div class="w-full flex items-center gap-2">
-          <input v-model="allowAutoAssign" type="checkbox" :value="true" />
-          <label for="conversation_creation">
-            {{ $t('TEAMS_SETTINGS.FORM.AUTO_ASSIGN.LABEL') }}
-          </label>
-        </div>
-        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="v$.title.$invalid || submitInProgress"
-              :button-text="submitButtonText"
-              :loading="submitInProgress"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import validations from './helpers/validations';
@@ -101,3 +59,45 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mx-0 flex flex-wrap">
+    <div class="flex-shrink-0 flex-grow-0 w-full md:w-[65%]">
+      <form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
+        <woot-input
+          v-model.trim="title"
+          :class="{ error: v$.title.$error }"
+          class="w-full"
+          :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
+          :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
+          @input="v$.title.$touch"
+        />
+
+        <woot-input
+          v-model.trim="description"
+          :class="{ error: v$.description.$error }"
+          class="w-full"
+          :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
+          :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
+          @input="v$.description.$touch"
+        />
+
+        <div class="w-full flex items-center gap-2">
+          <input v-model="allowAutoAssign" type="checkbox" :value="true" />
+          <label for="conversation_creation">
+            {{ $t('TEAMS_SETTINGS.FORM.AUTO_ASSIGN.LABEL') }}
+          </label>
+        </div>
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="w-full">
+            <WootSubmitButton
+              :disabled="v$.title.$invalid || submitInProgress"
+              :button-text="submitButtonText"
+              :loading="submitInProgress"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
index 550a02a23..c52a32a1f 100644
--- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 
 <template>
   <div class="items-center bg-slate-50 flex justify-center h-full w-full">
-    <empty-state
+    <EmptyState
       :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
       :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
     />
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index 1174c636c..3e4be5ba9 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -1,27 +1,3 @@
-<template>
-  <div v-on-clickaway="closeSearch" class="max-w-5xl w-full relative my-4">
-    <public-search-input
-      v-model="searchTerm"
-      :search-placeholder="searchTranslations.searchPlaceholder"
-      @focus="openSearch"
-    />
-    <div
-      v-if="shouldShowSearchBox"
-      class="absolute top-14 w-full"
-      @mouseover="openSearch"
-    >
-      <search-suggestions
-        :items="searchResults"
-        :is-loading="isLoading"
-        :search-term="searchTerm"
-        :empty-placeholder="searchTranslations.emptyPlaceholder"
-        :results-title="searchTranslations.resultsTitle"
-        :loading-placeholder="searchTranslations.loadingPlaceholder"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import SearchSuggestions from './SearchSuggestions.vue';
 import PublicSearchInput from './PublicSearchInput.vue';
@@ -33,12 +9,6 @@ export default {
     PublicSearchInput,
     SearchSuggestions,
   },
-  props: {
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-  },
   data() {
     return {
       searchTerm: '',
@@ -121,3 +91,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
+    <PublicSearchInput
+      v-model="searchTerm"
+      :search-placeholder="searchTranslations.searchPlaceholder"
+      @focus="openSearch"
+    />
+    <div
+      v-if="shouldShowSearchBox"
+      class="absolute w-full top-14"
+      @mouseover="openSearch"
+    >
+      <SearchSuggestions
+        :items="searchResults"
+        :is-loading="isLoading"
+        :search-term="searchTerm"
+        :empty-placeholder="searchTranslations.emptyPlaceholder"
+        :results-title="searchTranslations.resultsTitle"
+        :loading-placeholder="searchTranslations.loadingPlaceholder"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
index ffa0f99a7..08dd5e1cf 100644
--- a/app/javascript/portal/components/PublicSearchInput.vue
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
-    :class="{
-      'shadow border-woot-100 dark:border-woot-700': isFocused,
-      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
-    }"
-  >
-    <fluent-icon icon="search" />
-    <input
-      :value="value"
-      type="text"
-      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
-      :placeholder="searchPlaceholder"
-      role="search"
-      @input="onChange"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -57,3 +35,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
+    :class="{
+      'shadow border-woot-100 dark:border-woot-700': isFocused,
+      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
+    }"
+  >
+    <FluentIcon icon="search" />
+    <input
+      :value="value"
+      type="text"
+      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
+      :placeholder="searchPlaceholder"
+      role="search"
+      @input="onChange"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index 2c9697e14..d0c24f562 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -1,54 +1,3 @@
-<template>
-  <div
-    class="shadow-xl hover:shadow-lg bg-white dark:bg-slate-900 mt-2 max-h-96 scroll-py-2 p-5 overflow-y-auto text-sm text-slate-700 dark:text-slate-100 border border-solid border-slate-50 dark:border-slate-800 rounded-lg"
-  >
-    <div
-      v-if="isLoading"
-      class="font-medium text-sm text-slate-400 dark:text-slate-700"
-    >
-      {{ loadingPlaceholder }}
-    </div>
-    <ul
-      v-if="shouldShowResults"
-      class="bg-white dark:bg-slate-900 gap-4 flex flex-col text-sm text-slate-700 dark:text-slate-100"
-      role="listbox"
-    >
-      <li
-        v-for="(article, index) in items"
-        :id="article.id"
-        :key="article.id"
-        class="group flex border border-solid hover:bg-slate-25 dark:hover:bg-slate-800 border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer select-none items-center p-4"
-        :class="isSearchItemActive(index)"
-        role="option"
-        tabindex="-1"
-        @mouse-enter="onHover(index)"
-        @mouse-leave="onHover(-1)"
-      >
-        <a
-          class="flex flex-col gap-1 overflow-y-hidden"
-          :href="generateArticleUrl(article)"
-        >
-          <span
-            v-dompurify-html="prepareContent(article.title)"
-            class="flex-auto truncate text-base font-semibold leading-6 w-full overflow-hidden text-ellipsis whitespace-nowrap"
-          />
-          <div
-            v-dompurify-html="prepareContent(article.content)"
-            class="line-clamp-2 text-ellipsis whitespace-nowrap overflow-hidden text-slate-600 dark:text-slate-300 text-sm"
-          />
-        </a>
-      </li>
-    </ul>
-
-    <div
-      v-if="showEmptyResults"
-      class="font-medium text-sm text-slate-400 dark:text-slate-700"
-    >
-      {{ emptyPlaceholder }}
-    </div>
-  </div>
-</template>
-
 <script>
 import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -68,18 +17,10 @@ export default {
       type: String,
       default: '',
     },
-    searchPlaceholder: {
-      type: String,
-      default: '',
-    },
     loadingPlaceholder: {
       type: String,
       default: '',
     },
-    resultsTitle: {
-      type: String,
-      default: '',
-    },
     searchTerm: {
       type: String,
       default: '',
@@ -124,3 +65,54 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="p-5 mt-2 overflow-y-auto text-sm bg-white border border-solid rounded-lg shadow-xl hover:shadow-lg dark:bg-slate-900 max-h-96 scroll-py-2 text-slate-700 dark:text-slate-100 border-slate-50 dark:border-slate-800"
+  >
+    <div
+      v-if="isLoading"
+      class="text-sm font-medium text-slate-400 dark:text-slate-700"
+    >
+      {{ loadingPlaceholder }}
+    </div>
+    <ul
+      v-if="shouldShowResults"
+      class="flex flex-col gap-4 text-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
+      role="listbox"
+    >
+      <li
+        v-for="(article, index) in items"
+        :id="article.id"
+        :key="article.id"
+        class="flex items-center p-4 border border-solid rounded-lg cursor-pointer select-none group hover:bg-slate-25 dark:hover:bg-slate-800 border-slate-100 dark:border-slate-800"
+        :class="isSearchItemActive(index)"
+        role="option"
+        tabindex="-1"
+        @mouse-enter="onHover(index)"
+        @mouse-leave="onHover(-1)"
+      >
+        <a
+          class="flex flex-col gap-1 overflow-y-hidden"
+          :href="generateArticleUrl(article)"
+        >
+          <span
+            v-dompurify-html="prepareContent(article.title)"
+            class="flex-auto w-full overflow-hidden text-base font-semibold leading-6 truncate text-ellipsis whitespace-nowrap"
+          />
+          <div
+            v-dompurify-html="prepareContent(article.content)"
+            class="overflow-hidden text-sm line-clamp-2 text-ellipsis whitespace-nowrap text-slate-600 dark:text-slate-300"
+          />
+        </a>
+      </li>
+    </ul>
+
+    <div
+      v-if="showEmptyResults"
+      class="text-sm font-medium text-slate-400 dark:text-slate-700"
+    >
+      {{ emptyPlaceholder }}
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/components/TableOfContents.vue b/app/javascript/portal/components/TableOfContents.vue
index d7b3bb021..d907bc49e 100644
--- a/app/javascript/portal/components/TableOfContents.vue
+++ b/app/javascript/portal/components/TableOfContents.vue
@@ -1,33 +1,3 @@
-<template>
-  <div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
-    <div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
-      <nav class="max-w-2xl">
-        <ol
-          role="list"
-          class="flex flex-col gap-2 text-base border-l-2 border-solid border-slate-100 dark:border-slate-800"
-        >
-          <li
-            v-for="element in rows"
-            :key="element.slug"
-            class="leading-6 border-l-2 relative -left-0.5 border-solid"
-            :class="elementBorderStyles(element)"
-          >
-            <p class="py-1 px-3" :class="getClassName(element)">
-              <a
-                :href="`#${element.slug}`"
-                data-turbolinks="false"
-                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
-                :class="elementTextStyles(element)"
-              >
-                {{ element.title }}
-              </a>
-            </p>
-          </li>
-        </ol>
-      </nav>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -122,3 +92,34 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
+    <div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
+      <nav class="max-w-2xl">
+        <ol
+          role="list"
+          class="flex flex-col gap-2 text-base border-l-2 border-solid border-slate-100 dark:border-slate-800"
+        >
+          <li
+            v-for="element in rows"
+            :key="element.slug"
+            class="leading-6 border-l-2 relative -left-0.5 border-solid"
+            :class="elementBorderStyles(element)"
+          >
+            <p class="py-1 px-3" :class="getClassName(element)">
+              <a
+                :href="`#${element.slug}`"
+                data-turbolinks="false"
+                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
+                :class="elementTextStyles(element)"
+              >
+                {{ element.title }}
+              </a>
+            </p>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index 3e9690b20..dfe2951f0 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -33,7 +33,7 @@ export const openExternalLinksInNewTab = () => {
   const isOnArticlePage =
     isSameHost && document.querySelector('#cw-article-content') !== null;
 
-  document.addEventListener('click', function (event) {
+  document.addEventListener('click', event => {
     if (!isOnArticlePage) return;
 
     // Some of the links come wrapped in strong tag through prosemirror
diff --git a/app/javascript/shared/components/Branding.vue b/app/javascript/shared/components/Branding.vue
index bbeb578e9..8034e3506 100644
--- a/app/javascript/shared/components/Branding.vue
+++ b/app/javascript/shared/components/Branding.vue
@@ -1,27 +1,3 @@
-<template>
-  <div
-    v-if="globalConfig.brandName && !disableBranding"
-    class="px-0 py-3 flex justify-center"
-  >
-    <a
-      :href="brandRedirectURL"
-      rel="noreferrer noopener nofollow"
-      target="_blank"
-      class="branding--link justify-center items-center leading-3"
-    >
-      <img
-        class="branding--image"
-        :alt="globalConfig.brandName"
-        :src="globalConfig.logoThumbnail"
-      />
-      <span>
-        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
-      </span>
-    </a>
-  </div>
-  <div v-else class="p-3" />
-</template>
-
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
@@ -68,6 +44,30 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="globalConfig.brandName && !disableBranding"
+    class="px-0 py-3 flex justify-center"
+  >
+    <a
+      :href="brandRedirectURL"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+      class="branding--link justify-center items-center leading-3"
+    >
+      <img
+        class="branding--image"
+        :alt="globalConfig.brandName"
+        :src="globalConfig.logoThumbnail"
+      />
+      <span>
+        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
+      </span>
+    </a>
+  </div>
+  <div v-else class="p-3" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
index ed28a8e5a..cd041361f 100644
--- a/app/javascript/shared/components/Button.vue
+++ b/app/javascript/shared/components/Button.vue
@@ -1,13 +1,3 @@
-<template>
-  <button
-    :class="buttonClassName"
-    :style="buttonStyles"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-</template>
 <script>
 export default {
   props: {
@@ -65,3 +55,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :class="buttonClassName"
+    :style="buttonStyles"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index 9eb443568..c8a44a660 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -1,29 +1,3 @@
-<template>
-  <a
-    v-if="isLink"
-    :key="action.uri"
-    class="action-button button"
-    :href="action.uri"
-    :style="{
-      background: widgetColor,
-      borderColor: widgetColor,
-      color: textColor,
-    }"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
-  >
-    {{ action.text }}
-  </a>
-  <button
-    v-else
-    :key="action.payload"
-    class="action-button button"
-    :style="{ borderColor: widgetColor, color: widgetColor }"
-    @click="onClick"
-  >
-    {{ action.text }}
-  </button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -54,6 +28,33 @@ export default {
 };
 </script>
 
+<template>
+  <a
+    v-if="isLink"
+    :key="action.uri"
+    class="action-button button"
+    :href="action.uri"
+    :style="{
+      background: widgetColor,
+      borderColor: widgetColor,
+      color: textColor,
+    }"
+    target="_blank"
+    rel="noopener nofollow noreferrer"
+  >
+    {{ action.text }}
+  </a>
+  <button
+    v-else
+    :key="action.payload"
+    class="action-button button"
+    :style="{ borderColor: widgetColor, color: widgetColor }"
+    @click="onClick"
+  >
+    {{ action.text }}
+  </button>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~dashboard/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index f777d6b3d..14683784f 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    class="card-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <img class="media" :src="mediaUrl" />
-    <div class="card-body">
-      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
-        {{ title }}
-      </h4>
-      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
-        {{ description }}
-      </p>
-      <card-button
-        v-for="action in actions"
-        :key="action.id"
-        :action="action"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import CardButton from 'shared/components/CardButton.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -46,12 +24,29 @@ export default {
       type: Array,
       default: () => [],
     },
-    showAvatar: Boolean,
   },
   computed: {},
 };
 </script>
 
+<template>
+  <div
+    class="card-message chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
+    <img class="media" :src="mediaUrl" />
+    <div class="card-body">
+      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
+        {{ title }}
+      </h4>
+      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
+        {{ description }}
+      </p>
+      <CardButton v-for="action in actions" :key="action.id" :action="action" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~dashboard/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index bf3d830eb..f246f94a7 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -1,3 +1,82 @@
+<script>
+import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
+
+export default {
+  mixins: [darkModeMixin],
+  props: {
+    buttonLabel: {
+      type: String,
+      default: '',
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    submittedValues: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      formValues: {},
+      hasSubmitted: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
+    isFormValid() {
+      return this.items.reduce((acc, { name }) => {
+        return !!this.formValues[name] && acc;
+      }, true);
+    },
+  },
+  mounted() {
+    if (this.submittedValues.length) {
+      this.updateFormValues();
+    } else {
+      this.setFormDefaults();
+    }
+  },
+  methods: {
+    onSubmitClick() {
+      this.hasSubmitted = true;
+    },
+    onSubmit() {
+      if (!this.isFormValid) {
+        return;
+      }
+      this.$emit('submit', this.formValues);
+    },
+    buildFormObject(formObjectArray) {
+      return formObjectArray.reduce((acc, obj) => {
+        return {
+          ...acc,
+          [obj.name]: obj.value || obj.default,
+        };
+      }, {});
+    },
+    updateFormValues() {
+      this.formValues = this.buildFormObject(this.submittedValues);
+    },
+    setFormDefaults() {
+      this.formValues = this.buildFormObject(this.items);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="form chat-bubble agent"
@@ -84,85 +163,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { getContrastingTextColor } from '@chatwoot/utils';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
-
-export default {
-  mixins: [darkModeMixin],
-  props: {
-    buttonLabel: {
-      type: String,
-      default: '',
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    submittedValues: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      formValues: {},
-      hasSubmitted: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
-    textColor() {
-      return getContrastingTextColor(this.widgetColor);
-    },
-    inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
-    },
-    isFormValid() {
-      return this.items.reduce((acc, { name }) => {
-        return !!this.formValues[name] && acc;
-      }, true);
-    },
-  },
-  mounted() {
-    if (this.submittedValues.length) {
-      this.updateFormValues();
-    } else {
-      this.setFormDefaults();
-    }
-  },
-  methods: {
-    onSubmitClick() {
-      this.hasSubmitted = true;
-    },
-    onSubmit() {
-      if (!this.isFormValid) {
-        return;
-      }
-      this.$emit('submit', this.formValues);
-    },
-    buildFormObject(formObjectArray) {
-      return formObjectArray.reduce((acc, obj) => {
-        return {
-          ...acc,
-          [obj.name]: obj.value || obj.default,
-        };
-      }, {});
-    },
-    updateFormValues() {
-      this.formValues = this.buildFormObject(this.submittedValues);
-    },
-    setFormDefaults() {
-      this.formValues = this.buildFormObject(this.items);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/ChatOption.vue b/app/javascript/shared/components/ChatOption.vue
index 7532e14d3..de6d27a18 100644
--- a/app/javascript/shared/components/ChatOption.vue
+++ b/app/javascript/shared/components/ChatOption.vue
@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="option"
-    :class="{ 'is-selected': isSelected }"
-    :style="{ borderColor: widgetColor }"
-  >
-    <button class="option-button button" @click="onClick">
-      <span :style="{ color: widgetColor }">{{ action.title }}</span>
-    </button>
-  </li>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,6 +26,18 @@ export default {
 };
 </script>
 
+<template>
+  <li
+    class="option"
+    :class="{ 'is-selected': isSelected }"
+    :style="{ borderColor: widgetColor }"
+  >
+    <button class="option-button button" @click="onClick">
+      <span :style="{ color: widgetColor }">{{ action.title }}</span>
+    </button>
+  </li>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index 2cb8b8c97..a6c744234 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
-    <div class="card-body">
-      <h4 class="title text-black-900 dark:text-slate-50">
-        <div
-          v-dompurify-html="formatMessage(title, false)"
-          class="message-content text-black-900 dark:text-slate-50"
-        />
-      </h4>
-      <ul
-        v-if="!hideFields"
-        class="options"
-        :class="{ 'has-selected': !!selected }"
-      >
-        <chat-option
-          v-for="option in options"
-          :key="option.id"
-          :action="option"
-          :is-selected="isSelected(option)"
-          @click="onClick"
-        />
-      </ul>
-    </div>
-  </div>
-</template>
-
 <script>
 import ChatOption from 'shared/components/ChatOption.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -62,6 +36,32 @@ export default {
 };
 </script>
 
+<template>
+  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
+    <div class="card-body">
+      <h4 class="title text-black-900 dark:text-slate-50">
+        <div
+          v-dompurify-html="formatMessage(title, false)"
+          class="message-content text-black-900 dark:text-slate-50"
+        />
+      </h4>
+      <ul
+        v-if="!hideFields"
+        class="options"
+        :class="{ 'has-selected': !!selected }"
+      >
+        <ChatOption
+          v-for="option in options"
+          :key="option.id"
+          :action="option"
+          :is-selected="isSelected(option)"
+          @click="onClick"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .has-selected {
@@ -71,6 +71,7 @@ export default {
   }
 }
 </style>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 471562d02..332892cd3 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -1,50 +1,3 @@
-<template>
-  <div
-    class="customer-satisfaction"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-    :style="{ borderColor: widgetColor }"
-  >
-    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
-      {{ title }}
-    </h6>
-    <div class="ratings">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="selectRating(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-    <form
-      v-if="!isFeedbackSubmitted"
-      class="feedback-form"
-      @submit.prevent="onSubmit()"
-    >
-      <input
-        v-model="feedback"
-        class="form-input"
-        :class="inputColor"
-        :placeholder="$t('CSAT.PLACEHOLDER')"
-        @keydown.enter="onSubmit"
-      />
-      <button
-        class="button small"
-        :disabled="isButtonDisabled"
-        :style="{
-          background: widgetColor,
-          borderColor: widgetColor,
-          color: textColor,
-        }"
-      >
-        <spinner v-if="isUpdating && feedback" />
-        <fluent-icon v-else icon="chevron-right" />
-      </button>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
@@ -149,6 +102,53 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="customer-satisfaction"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :style="{ borderColor: widgetColor }"
+  >
+    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
+      {{ title }}
+    </h6>
+    <div class="ratings">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="selectRating(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+    <form
+      v-if="!isFeedbackSubmitted"
+      class="feedback-form"
+      @submit.prevent="onSubmit()"
+    >
+      <input
+        v-model="feedback"
+        class="form-input"
+        :class="inputColor"
+        :placeholder="$t('CSAT.PLACEHOLDER')"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="isButtonDisabled"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <Spinner v-if="isUpdating && feedback" />
+        <FluentIcon v-else icon="chevron-right" />
+      </button>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue
index 32ae6e10c..a06badcc6 100644
--- a/app/javascript/shared/components/DateSeparator.vue
+++ b/app/javascript/shared/components/DateSeparator.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="date--separator"
-    :class="$dm('text-slate-700', 'dark:text-slate-200')"
-  >
-    {{ formattedDate }}
-  </div>
-</template>
-
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -31,6 +22,15 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="date--separator"
+    :class="$dm('text-slate-700', 'dark:text-slate-200')"
+  >
+    {{ formattedDate }}
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/shared/components/EmojiOrIcon.vue b/app/javascript/shared/components/EmojiOrIcon.vue
index 2a93dc06f..3a2c12854 100644
--- a/app/javascript/shared/components/EmojiOrIcon.vue
+++ b/app/javascript/shared/components/EmojiOrIcon.vue
@@ -1,14 +1,3 @@
-<template>
-  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
-  <fluent-icon
-    v-else-if="showIcon"
-    :size="iconSize"
-    :icon="icon"
-    class="flex-shrink-0"
-    :class="className"
-  />
-</template>
-
 <script>
 // 🚨 This component is deprecated. Please use fluent-icon instead.
 import { hasEmojiSupport } from 'shared/helpers/emoji';
@@ -46,6 +35,17 @@ export default {
 };
 </script>
 
+<template>
+  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
+  <fluent-icon
+    v-else-if="showIcon"
+    :size="iconSize"
+    :icon="icon"
+    class="flex-shrink-0"
+    :class="className"
+  />
+</template>
+
 <style lang="scss" scoped>
 .icon--emoji {
   font-style: normal;
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index 05369ed1e..0b93b95d4 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -1,13 +1,3 @@
-<template>
-  <base-icon
-    :size="size"
-    :icon="icon"
-    :type="type"
-    :icons="icons"
-    :view-box="viewBox"
-    :icon-lib="iconLib"
-  />
-</template>
 <script>
 import BaseIcon from './Icon.vue';
 import icons from './dashboard-icons.json';
@@ -44,3 +34,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BaseIcon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+    :icon-lib="iconLib"
+  />
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/Icon.vue b/app/javascript/shared/components/FluentIcon/Icon.vue
index da01f3397..f09e4d3f4 100644
--- a/app/javascript/shared/components/FluentIcon/Icon.vue
+++ b/app/javascript/shared/components/FluentIcon/Icon.vue
@@ -1,37 +1,3 @@
-<template>
-  <svg
-    v-if="iconLib === 'fluent'"
-    :width="size"
-    :height="size"
-    fill="none"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      v-for="source in pathSource"
-      :key="source"
-      :d="source"
-      fill="currentColor"
-    />
-  </svg>
-  <svg
-    v-else
-    :width="size"
-    :height="size"
-    fill="none"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g v-for="(pathData, index) in pathSource" :key="index">
-      <path
-        :key="pathData"
-        :d="pathData"
-        stroke="currentColor"
-        stroke-width="1.66667"
-      />
-    </g>
-  </svg>
-</template>
 <script>
 export default {
   props: {
@@ -73,3 +39,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <svg
+    v-if="iconLib === 'fluent'"
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      v-for="source in pathSource"
+      :key="source"
+      :d="source"
+      fill="currentColor"
+    />
+  </svg>
+  <svg
+    v-else
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g v-for="(pathData, index) in pathSource" :key="index">
+      <path
+        :key="pathData"
+        :d="pathData"
+        stroke="currentColor"
+        stroke-width="1.66667"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index d63a0c56b..f692bdbc9 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -1,13 +1,3 @@
-<template>
-  <base-icon
-    :size="size"
-    :icon="icon"
-    :type="type"
-    :icons="icons"
-    :view-box="viewBox"
-    :icon-lib="iconLib"
-  />
-</template>
 <script>
 import BaseIcon from './Icon.vue';
 import icons from './icons.json';
@@ -44,3 +34,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BaseIcon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+    :icon-lib="iconLib"
+  />
+</template>
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index d67d9c1b3..7388a2886 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -1,32 +1,3 @@
-<template>
-  <section class="w-3/4">
-    <div
-      v-if="richtext"
-      class="py-0 px-4 rounded-md border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 mt-0 mx-0 mb-4"
-    >
-      <woot-message-editor
-        v-model="greetingsMessage"
-        :is-format-mode="true"
-        :enable-variables="true"
-        class="input bg-white dark:bg-slate-900"
-        :placeholder="placeholder"
-        :min-height="4"
-        @input="handleInput"
-      />
-    </div>
-    <resizable-text-area
-      v-else
-      v-model="greetingsMessage"
-      :rows="4"
-      type="text"
-      class="greetings--textarea"
-      :label="label"
-      :placeholder="placeholder"
-      @input="handleInput"
-    />
-  </section>
-</template>
-
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -71,3 +42,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="w-3/4">
+    <div
+      v-if="richtext"
+      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+    >
+      <WootMessageEditor
+        v-model="greetingsMessage"
+        is-format-mode
+        enable-variables
+        class="bg-white input dark:bg-slate-900"
+        :placeholder="placeholder"
+        :min-height="4"
+        @input="handleInput"
+      />
+    </div>
+    <ResizableTextArea
+      v-else
+      v-model="greetingsMessage"
+      :rows="4"
+      type="text"
+      class="greetings--textarea"
+      :label="label"
+      :placeholder="placeholder"
+      @input="handleInput"
+    />
+  </section>
+</template>
diff --git a/app/javascript/shared/components/IframeLoader.vue b/app/javascript/shared/components/IframeLoader.vue
index 16fc3b91e..27d6a44c0 100644
--- a/app/javascript/shared/components/IframeLoader.vue
+++ b/app/javascript/shared/components/IframeLoader.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="relative overflow-hidden pb-1/2 h-full">
-    <iframe
-      v-if="url"
-      :src="url"
-      class="absolute w-full h-full top-0 left-0"
-      @load="handleIframeLoad"
-      @error="handleIframeError"
-    />
-    <article-skeleton-loader
-      v-if="isLoading"
-      class="absolute w-full h-full top-0 left-0"
-    />
-    <div
-      v-if="showEmptyState"
-      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
-    >
-      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
-    </div>
-  </div>
-</template>
-
 <script>
 import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader.vue';
 
@@ -53,3 +31,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative overflow-hidden pb-1/2 h-full">
+    <iframe
+      v-if="url"
+      :src="url"
+      class="absolute w-full h-full top-0 left-0"
+      @load="handleIframeLoad"
+      @error="handleIframeError"
+    />
+    <ArticleSkeletonLoader
+      v-if="isLoading"
+      class="absolute w-full h-full top-0 left-0"
+    />
+    <div
+      v-if="showEmptyState"
+      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
+    >
+      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 78ad86be2..9849c163e 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -1,16 +1,3 @@
-<template>
-  <textarea
-    ref="textarea"
-    :placeholder="placeholder"
-    :rows="rows"
-    :value="value"
-    @input="onInput"
-    @focus="onFocus"
-    @keyup="onKeyup"
-    @blur="onBlur"
-  />
-</template>
-
 <script>
 import {
   appendSignature,
@@ -57,10 +44,10 @@ export default {
     return {
       typingIndicator: createTypingIndicator(
         () => {
-          this.$emit('typing-on');
+          this.$emit('typingOn');
         },
         () => {
-          this.$emit('typing-off');
+          this.$emit('typingOff');
         },
         TYPING_INDICATOR_IDLE_TIME
       ),
@@ -162,3 +149,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <textarea
+    ref="textarea"
+    :placeholder="placeholder"
+    :rows="rows"
+    :value="value"
+    @input="onInput"
+    @focus="onFocus"
+    @keyup="onKeyup"
+    @blur="onBlur"
+  />
+</template>
diff --git a/app/javascript/shared/components/Spinner.vue b/app/javascript/shared/components/Spinner.vue
index f4bdf0bc2..59c798378 100644
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -1,6 +1,3 @@
-<template>
-  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
-</template>
 <script>
 export default {
   props: {
@@ -32,6 +29,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/shared/components/TextArea.vue b/app/javascript/shared/components/TextArea.vue
index 1b6bc2f05..194fe891f 100644
--- a/app/javascript/shared/components/TextArea.vue
+++ b/app/javascript/shared/components/TextArea.vue
@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs font-medium"
-      :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
-      }"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300':
-          !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
-      }"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 export default {
   props: {
@@ -33,10 +5,6 @@ export default {
       type: String,
       default: '',
     },
-    type: {
-      type: String,
-      default: 'text',
-    },
     placeholder: {
       type: String,
       default: '',
@@ -57,6 +25,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium"
+      :class="{
+        'text-black-800': !error,
+        'text-red-400': error,
+      }"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      :class="{
+        'border-black-200 hover:border-black-300 focus:border-black-300':
+          !error,
+        'border-red-200 hover:border-red-300 focus:border-red-300': error,
+      }"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="mt-2 text-xs font-medium text-red-400">
+      {{ error }}
+    </div>
+  </label>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index cea163dc3..4928c05f0 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -1,102 +1,3 @@
-<template>
-  <div
-    role="dialog"
-    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
-  >
-    <div class="flex flex-col">
-      <div class="flex gap-2 emoji-search--wrap">
-        <input
-          ref="searchbar"
-          v-model="search"
-          type="text"
-          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0"
-          :placeholder="$t('EMOJI.PLACEHOLDER')"
-        />
-        <woot-button
-          v-if="showRemoveButton"
-          size="small"
-          variant="smooth"
-          class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
-          color-scheme="secondary"
-          @click="onClick('')"
-        >
-          {{ $t('EMOJI.REMOVE') }}
-        </woot-button>
-      </div>
-      <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
-        <h5 class="emoji-category--title">
-          {{ selectedKey }}
-        </h5>
-        <div class="emoji--row">
-          <button
-            v-for="item in filterEmojisByCategory"
-            :key="item.slug"
-            v-dompurify-html="item.emoji"
-            class="emoji--item"
-            track-by="$index"
-            @click="onClick(item.emoji)"
-          />
-        </div>
-      </div>
-      <div v-else ref="emojiItem" class="emoji-item">
-        <div v-for="category in filterAllEmojisBySearch" :key="category.slug">
-          <h5 v-if="category.emojis.length > 0" class="emoji-category--title">
-            {{ category.name }}
-          </h5>
-          <div v-if="category.emojis.length > 0" class="emoji--row">
-            <button
-              v-for="item in category.emojis"
-              :key="item.slug"
-              v-dompurify-html="item.emoji"
-              class="emoji--item"
-              track-by="$index"
-              @click="onClick(item.emoji)"
-            />
-          </div>
-        </div>
-        <div v-if="hasEmptySearchResult" class="empty-message">
-          <div class="emoji-icon">
-            <fluent-icon icon="emoji" size="48" />
-          </div>
-          <span class="empty-message--text">
-            {{ $t('EMOJI.NOT_FOUND') }}
-          </span>
-        </div>
-      </div>
-
-      <div class="emoji-dialog--footer" role="menu">
-        <ul>
-          <li>
-            <button
-              class="emoji--item"
-              :class="{ active: selectedKey === 'Search' }"
-              @click="changeCategory('Search')"
-            >
-              <fluent-icon
-                icon="search"
-                size="16"
-                class="text-slate-700 dark:text-slate-100"
-              />
-            </button>
-          </li>
-          <li
-            v-for="category in categories"
-            :key="category.slug"
-            @click="changeCategory(category.name)"
-          >
-            <button
-              v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
-              class="emoji--item"
-              :class="{ active: selectedKey === category.name }"
-              @click="changeCategory(category.name)"
-            />
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import emojis from './emojisGroup.json';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -181,6 +82,106 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    role="dialog"
+    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
+  >
+    <div class="flex flex-col">
+      <div class="flex gap-2 emoji-search--wrap">
+        <input
+          ref="searchbar"
+          v-model="search"
+          type="text"
+          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
+          :placeholder="$t('EMOJI.PLACEHOLDER')"
+        />
+        <woot-button
+          v-if="showRemoveButton"
+          size="small"
+          variant="smooth"
+          class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
+          color-scheme="secondary"
+          @click="onClick('')"
+        >
+          {{ $t('EMOJI.REMOVE') }}
+        </woot-button>
+      </div>
+      <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
+        <h5 class="emoji-category--title">
+          {{ selectedKey }}
+        </h5>
+        <div class="emoji--row">
+          <button
+            v-for="item in filterEmojisByCategory"
+            :key="item.slug"
+            v-dompurify-html="item.emoji"
+            class="emoji--item"
+            track-by="$index"
+            @click="onClick(item.emoji)"
+          />
+        </div>
+      </div>
+      <div v-else ref="emojiItem" class="emoji-item">
+        <div v-for="category in filterAllEmojisBySearch" :key="category.slug">
+          <h5 v-if="category.emojis.length > 0" class="emoji-category--title">
+            {{ category.name }}
+          </h5>
+          <div v-if="category.emojis.length > 0" class="emoji--row">
+            <button
+              v-for="item in category.emojis"
+              :key="item.slug"
+              v-dompurify-html="item.emoji"
+              class="emoji--item"
+              track-by="$index"
+              @click="onClick(item.emoji)"
+            />
+          </div>
+        </div>
+        <div v-if="hasEmptySearchResult" class="empty-message">
+          <div class="emoji-icon">
+            <FluentIcon icon="emoji" size="48" />
+          </div>
+          <span class="empty-message--text">
+            {{ $t('EMOJI.NOT_FOUND') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="emoji-dialog--footer" role="menu">
+        <ul>
+          <li>
+            <button
+              class="emoji--item"
+              :class="{ active: selectedKey === 'Search' }"
+              @click="changeCategory('Search')"
+            >
+              <FluentIcon
+                icon="search"
+                size="16"
+                class="text-slate-700 dark:text-slate-100"
+              />
+            </button>
+          </li>
+          <li
+            v-for="category in categories"
+            :key="category.slug"
+            @click="changeCategory(category.name)"
+          >
+            <button
+              v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
+              class="emoji--item"
+              :class="{ active: selectedKey === category.name }"
+              @click="changeCategory(category.name)"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
@@ -197,6 +198,7 @@ export default {
   }
 }
 </style>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/mixins';
 
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index fe6a4f2f8..e3485617c 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -1,76 +1,3 @@
-<template>
-  <div
-    v-on-clickaway="onCloseDropdown"
-    class="relative w-full mb-2"
-    @keyup.esc="onCloseDropdown"
-  >
-    <woot-button
-      variant="hollow"
-      color-scheme="secondary"
-      class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
-      @click="toggleDropdown"
-    >
-      <div class="flex gap-1">
-        <Thumbnail
-          v-if="hasValue && hasThumbnail"
-          :src="selectedItem.thumbnail"
-          size="24px"
-          :status="selectedItem.availability_status"
-          :username="selectedItem.name"
-        />
-        <div class="flex justify-between w-full min-w-0 items-center">
-          <h4
-            v-if="!hasValue"
-            class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
-          >
-            {{ multiselectorPlaceholder }}
-          </h4>
-          <h4
-            v-else
-            class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
-            :title="selectedItem.name"
-          >
-            {{ selectedItem.name }}
-          </h4>
-          <i
-            v-if="showSearchDropdown"
-            class="icon ion-chevron-up text-slate-600 mr-1"
-          />
-          <i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
-        </div>
-      </div>
-    </woot-button>
-    <div
-      :class="{ 'dropdown-pane--open': showSearchDropdown }"
-      class="dropdown-pane"
-    >
-      <div class="flex justify-between items-center mb-1">
-        <h4
-          class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
-        >
-          {{ multiselectorTitle }}
-        </h4>
-        <woot-button
-          icon="dismiss"
-          size="tiny"
-          color-scheme="secondary"
-          variant="clear"
-          @click="onCloseDropdown"
-        />
-      </div>
-      <multiselect-dropdown-items
-        v-if="showSearchDropdown"
-        :options="options"
-        :selected-items="[selectedItem]"
-        :has-thumbnail="hasThumbnail"
-        :input-placeholder="inputPlaceholder"
-        :no-search-result="noSearchResult"
-        @click="onClickSelectItem"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
@@ -139,6 +66,79 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-on-clickaway="onCloseDropdown"
+    class="relative w-full mb-2"
+    @keyup.esc="onCloseDropdown"
+  >
+    <woot-button
+      variant="hollow"
+      color-scheme="secondary"
+      class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
+      @click="toggleDropdown"
+    >
+      <div class="flex gap-1">
+        <Thumbnail
+          v-if="hasValue && hasThumbnail"
+          :src="selectedItem.thumbnail"
+          size="24px"
+          :status="selectedItem.availability_status"
+          :username="selectedItem.name"
+        />
+        <div class="flex justify-between w-full min-w-0 items-center">
+          <h4
+            v-if="!hasValue"
+            class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+          >
+            {{ multiselectorPlaceholder }}
+          </h4>
+          <h4
+            v-else
+            class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+            :title="selectedItem.name"
+          >
+            {{ selectedItem.name }}
+          </h4>
+          <i
+            v-if="showSearchDropdown"
+            class="icon ion-chevron-up text-slate-600 mr-1"
+          />
+          <i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
+        </div>
+      </div>
+    </woot-button>
+    <div
+      :class="{ 'dropdown-pane--open': showSearchDropdown }"
+      class="dropdown-pane"
+    >
+      <div class="flex justify-between items-center mb-1">
+        <h4
+          class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+        >
+          {{ multiselectorTitle }}
+        </h4>
+        <woot-button
+          icon="dismiss"
+          size="tiny"
+          color-scheme="secondary"
+          variant="clear"
+          @click="onCloseDropdown"
+        />
+      </div>
+      <MultiselectDropdownItems
+        v-if="showSearchDropdown"
+        :options="options"
+        :selected-items="[selectedItem]"
+        :has-thumbnail="hasThumbnail"
+        :input-placeholder="inputPlaceholder"
+        :no-search-result="noSearchResult"
+        @click="onClickSelectItem"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-[2.625rem] w-full;
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 4c38eb9a6..b853e4a0c 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -1,66 +1,3 @@
-<template>
-  <div class="dropdown-wrap">
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="inputPlaceholder"
-      />
-    </div>
-    <div class="flex justify-start items-start flex-auto overflow-auto">
-      <div class="w-full max-h-[10rem]">
-        <woot-dropdown-menu>
-          <woot-dropdown-item
-            v-for="option in filteredOptions"
-            :key="option.id"
-          >
-            <woot-button
-              class="multiselect-dropdown--item"
-              :variant="isActive(option) ? 'hollow' : 'clear'"
-              color-scheme="secondary"
-              :class="{
-                active: isActive(option),
-              }"
-              @click="() => onclick(option)"
-            >
-              <div class="flex items-center gap-1.5">
-                <Thumbnail
-                  v-if="hasThumbnail"
-                  :src="option.thumbnail"
-                  size="24px"
-                  :username="option.name"
-                  :status="option.availability_status"
-                  has-border
-                />
-                <div
-                  class="flex items-center justify-between w-full min-w-0 gap-2"
-                >
-                  <span
-                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-                    :title="option.name"
-                  >
-                    {{ option.name }}
-                  </span>
-                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
-                </div>
-              </div>
-            </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
-        <h4
-          v-if="noResult"
-          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-        >
-          {{ noSearchResult }}
-        </h4>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -131,6 +68,66 @@ export default {
 };
 </script>
 
+<template>
+  <div class="dropdown-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="inputPlaceholder"
+      />
+    </div>
+    <div class="flex justify-start items-start flex-auto overflow-auto">
+      <div class="w-full max-h-[10rem]">
+        <WootDropdownMenu>
+          <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
+            <woot-button
+              class="multiselect-dropdown--item"
+              :variant="isActive(option) ? 'hollow' : 'clear'"
+              color-scheme="secondary"
+              :class="{
+                active: isActive(option),
+              }"
+              @click="() => onclick(option)"
+            >
+              <div class="flex items-center gap-1.5">
+                <Thumbnail
+                  v-if="hasThumbnail"
+                  :src="option.thumbnail"
+                  size="24px"
+                  :username="option.name"
+                  :status="option.availability_status"
+                  has-border
+                />
+                <div
+                  class="flex items-center justify-between w-full min-w-0 gap-2"
+                >
+                  <span
+                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+                    :title="option.name"
+                  >
+                    {{ option.name }}
+                  </span>
+                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
+                </div>
+              </div>
+            </woot-button>
+          </WootDropdownItem>
+        </WootDropdownMenu>
+        <h4
+          v-if="noResult"
+          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        >
+          {{ noSearchResult }}
+        </h4>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-wrap {
   @apply w-full flex flex-col max-h-[12.5rem];
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
index 759287994..6694ddd78 100644
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    addLabel() {
+      this.$emit('add');
+    },
+  },
+};
+</script>
+
 <template>
   <woot-button
     variant="smooth"
@@ -10,16 +20,6 @@
   </woot-button>
 </template>
 
-<script>
-export default {
-  methods: {
-    addLabel() {
-      this.$emit('add');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .label--add {
   margin-bottom: var(--space-micro);
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
index 38cfa0899..fbe7f6e32 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
@@ -1,3 +1,7 @@
+<script>
+export default {};
+</script>
+
 <template>
   <li
     class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
@@ -5,6 +9,3 @@
     :aria-disabled="true"
   />
 </template>
-<script>
-export default {};
-</script>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
index 8b36bb1c5..65afa3123 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -1,13 +1,3 @@
-<template>
-  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
-    <span
-      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
-    >
-      {{ title }}
-    </span>
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   componentName: 'WootDropdownMenu',
@@ -19,3 +9,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
+    <span
+      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+    >
+      {{ title }}
+    </span>
+    <slot />
+  </li>
+</template>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index 3ec241968..ad2783f3a 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="dropdown-menu__item list-none mb-1"
-    :class="{
-      'is-disabled': disabled,
-    }"
-    :tabindex="disabled ? null : -1"
-    :aria-disabled="disabled"
-  >
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   name: 'WootDropdownItem',
@@ -19,13 +7,23 @@ export default {
       type: Boolean,
       default: false,
     },
-    className: {
-      type: String,
-      default: '',
-    },
   },
 };
 </script>
+
+<template>
+  <li
+    class="mb-1 list-none dropdown-menu__item"
+    :class="{
+      'is-disabled': disabled,
+    }"
+    :tabindex="disabled ? null : -1"
+    :aria-disabled="disabled"
+  >
+    <slot />
+  </li>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-menu__item {
   ::v-deep {
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index a876de401..6b161e225 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -1,12 +1,3 @@
-<template>
-  <ul
-    ref="dropdownMenu"
-    class="dropdown menu vertical"
-    :class="[placement && `dropdown--${placement}`]"
-  >
-    <slot />
-  </ul>
-</template>
 <script>
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
@@ -59,3 +50,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ul
+    ref="dropdownMenu"
+    class="dropdown menu vertical"
+    :class="[placement && `dropdown--${placement}`]"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
index 4e5ee1296..95f98f01b 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
@@ -1,11 +1,3 @@
-<template>
-  <li class="sub-menu-container">
-    <ul class="sub-menu-li-container">
-      <woot-dropdown-header v-if="title" :title="title" />
-      <slot />
-    </ul>
-  </li>
-</template>
 <script>
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
 
@@ -24,6 +16,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li class="sub-menu-container">
+    <ul class="sub-menu-li-container">
+      <WootDropdownHeader v-if="title" :title="title" />
+      <slot />
+    </ul>
+  </li>
+</template>
+
 <style lang="scss" scoped>
 .sub-menu-container {
   margin-top: var(--space-micro);
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index 30f36a7bb..b3b224b58 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -1,80 +1,3 @@
-<template>
-  <div class="flex flex-col w-full max-h-[12.5rem]">
-    <div class="flex items-center justify-center mb-1">
-      <h4
-        class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
-      >
-        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
-      </h4>
-      <hotkey
-        custom-class="text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600"
-      >
-        L
-      </hotkey>
-    </div>
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
-      />
-    </div>
-    <div
-      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
-    >
-      <div class="w-full">
-        <woot-dropdown-menu>
-          <label-dropdown-item
-            v-for="label in filteredActiveLabels"
-            :key="label.title"
-            :title="label.title"
-            :color="label.color"
-            :selected="selectedLabels.includes(label.title)"
-            @click="onAddRemove(label)"
-          />
-        </woot-dropdown-menu>
-        <div
-          v-if="noResult"
-          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
-        >
-          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
-        </div>
-        <div
-          v-if="allowCreation && shouldShowCreate"
-          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
-        >
-          <woot-button
-            size="small"
-            variant="clear"
-            color-scheme="secondary"
-            icon="add"
-            is-expanded
-            class="button-new-label"
-            :is-disabled="hasExactMatchInResults"
-            @click="showCreateModal"
-          >
-            {{ createLabelPlaceholder }}
-            {{ parsedSearch }}
-          </woot-button>
-
-          <woot-modal
-            :show.sync="createModalVisible"
-            :on-close="hideCreateModal"
-          >
-            <add-label-modal
-              :prefill-title="parsedSearch"
-              @close="hideCreateModal"
-            />
-          </woot-modal>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import LabelDropdownItem from './LabelDropdownItem.vue';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
@@ -184,6 +107,83 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col w-full max-h-[12.5rem]">
+    <div class="flex items-center justify-center mb-1">
+      <h4
+        class="flex-grow m-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+      >
+        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
+      </h4>
+      <Hotkey
+        custom-class="border border-solid text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border-slate-75 dark:border-slate-600"
+      >
+        {{ 'L' }}
+      </Hotkey>
+    </div>
+    <div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
+      />
+    </div>
+    <div
+      class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
+    >
+      <div class="w-full">
+        <woot-dropdown-menu>
+          <LabelDropdownItem
+            v-for="label in filteredActiveLabels"
+            :key="label.title"
+            :title="label.title"
+            :color="label.color"
+            :selected="selectedLabels.includes(label.title)"
+            @click="onAddRemove(label)"
+          />
+        </woot-dropdown-menu>
+        <div
+          v-if="noResult"
+          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
+        >
+          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
+        </div>
+        <div
+          v-if="allowCreation && shouldShowCreate"
+          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
+        >
+          <woot-button
+            size="small"
+            variant="clear"
+            color-scheme="secondary"
+            icon="add"
+            is-expanded
+            class="button-new-label"
+            :is-disabled="hasExactMatchInResults"
+            @click="showCreateModal"
+          >
+            {{ createLabelPlaceholder }}
+            {{ parsedSearch }}
+          </woot-button>
+
+          <woot-modal
+            :show.sync="createModalVisible"
+            :on-close="hideCreateModal"
+          >
+            <AddLabelModal
+              :prefill-title="parsedSearch"
+              @close="hideCreateModal"
+            />
+          </woot-modal>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .hotkey {
   @apply flex-shrink-0;
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
index 6319b7420..0cb1e6b46 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
@@ -1,25 +1,3 @@
-<template>
-  <woot-dropdown-item>
-    <div class="item-wrap">
-      <woot-button variant="clear" @click="onClick">
-        <div class="button-wrap">
-          <div class="name-label-wrap">
-            <div
-              v-if="color"
-              class="label-color--display"
-              :style="{ backgroundColor: color }"
-            />
-            <span class="label-text" :title="title">{{ title }}</span>
-          </div>
-          <div>
-            <i v-if="selected" class="icon ion-checkmark-round" />
-          </div>
-        </div>
-      </woot-button>
-    </div>
-  </woot-dropdown-item>
-</template>
-
 <script>
 export default {
   props: {
@@ -45,6 +23,28 @@ export default {
 };
 </script>
 
+<template>
+  <woot-dropdown-item>
+    <div class="item-wrap">
+      <woot-button variant="clear" @click="onClick">
+        <div class="button-wrap">
+          <div class="name-label-wrap">
+            <div
+              v-if="color"
+              class="label-color--display"
+              :style="{ backgroundColor: color }"
+            />
+            <span class="label-text" :title="title">{{ title }}</span>
+          </div>
+          <div>
+            <i v-if="selected" class="icon ion-checkmark-round" />
+          </div>
+        </div>
+      </woot-button>
+    </div>
+  </woot-dropdown-item>
+</template>
+
 <style lang="scss" scoped>
 .item-wrap {
   @apply flex;
diff --git a/app/javascript/shared/mixins/specs/MockComponent.vue b/app/javascript/shared/mixins/specs/MockComponent.vue
index 050205f70..55cd22614 100644
--- a/app/javascript/shared/mixins/specs/MockComponent.vue
+++ b/app/javascript/shared/mixins/specs/MockComponent.vue
@@ -1,9 +1,9 @@
-<template>
-  <div class="test" />
-</template>
-
 <script>
 export default {
   name: 'MockComponent',
 };
 </script>
+
+<template>
+  <div class="test" />
+</template>
diff --git a/app/javascript/superadmin_pages/components/playground/Header.vue b/app/javascript/superadmin_pages/components/playground/Header.vue
index e17dad415..23c6061d7 100644
--- a/app/javascript/superadmin_pages/components/playground/Header.vue
+++ b/app/javascript/superadmin_pages/components/playground/Header.vue
@@ -17,7 +17,7 @@ defineProps({
     role="banner"
   >
     <a :href="responseSourcePath" class="text-woot-500 hover:underline mr-4">
-      Back
+      {{ 'Back' }}
     </a>
     <div
       class="border border-solid border-slate-100 text-slate-700 mr-4 p-2 rounded-full"
@@ -26,14 +26,14 @@ defineProps({
     </div>
     <div class="flex flex-col h-14 justify-center">
       <h1 id="page-title" class="text-base font-medium text-slate-900">
-        Robin AI playground
+        {{ 'Robin AI playground' }}
       </h1>
       <p class="text-sm text-slate-600">
-        Chat with the source
+        {{ 'Chat with the source' }}
         <span class="font-medium">
           {{ responseSourceName }}
         </span>
-        and evaluate it’s efficiency.
+        {{ 'and evaluate it’s efficiency.' }}
       </p>
     </div>
   </header>
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index f1fb4752a..a1dbead94 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -1,48 +1,14 @@
-<template>
-  <section class="h-full w-full flex flex-col bg-slate-25">
-    <PlaygroundHeader
-      :response-source-name="componentData.responseSourceName"
-      :response-source-path="componentData.responseSourcePath"
-    />
-    <div ref="chatContainer" class="flex-1 overflow-auto px-8 py-4">
-      <div
-        v-for="message in messages"
-        :id="`message-${message.id}`"
-        :key="message.id"
-      >
-        <UserMessage
-          v-if="message.type === 'User'"
-          :message="formatMessage(message.content)"
-        />
-        <BotMessage v-else :message="formatMessage(message.content)" />
-      </div>
-      <TypingIndicator v-if="isWaiting" />
-    </div>
-    <div class="w-full px-8 py-6">
-      <textarea
-        ref="messageInput"
-        v-model="messageContent"
-        :rows="4"
-        class="resize-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border !outline-2 border-slate-100 focus:ring-woot-500 focus:border-woot-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-woot-500 dark:focus:border-woot-500"
-        placeholder="Type a message... [CMD/CTRL + Enter to send]"
-        autofocus
-        autocomplete="off"
-      />
-    </div>
-  </section>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import Header from '../../components/playground/Header.vue';
+import PlaygroundHeader from '../../components/playground/Header.vue';
 import UserMessage from '../../components/playground/UserMessage.vue';
 import BotMessage from '../../components/playground/BotMessage.vue';
 import TypingIndicator from '../../components/playground/TypingIndicator.vue';
 
 export default {
   components: {
-    PlaygroundHeader: Header,
+    PlaygroundHeader,
     UserMessage,
     BotMessage,
     TypingIndicator,
@@ -137,3 +103,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="flex flex-col w-full h-full bg-slate-25">
+    <PlaygroundHeader
+      :response-source-name="componentData.responseSourceName"
+      :response-source-path="componentData.responseSourcePath"
+    />
+    <div class="flex-1 px-8 py-4 overflow-auto">
+      <div
+        v-for="message in messages"
+        :id="`message-${message.id}`"
+        :key="message.id"
+      >
+        <UserMessage
+          v-if="message.type === 'User'"
+          :message="formatMessage(message.content)"
+        />
+        <BotMessage v-else :message="formatMessage(message.content)" />
+      </div>
+      <TypingIndicator v-if="isWaiting" />
+    </div>
+    <div class="w-full px-8 py-6">
+      <textarea
+        ref="messageInput"
+        v-model="messageContent"
+        :rows="4"
+        class="resize-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border !outline-2 border-slate-100 focus:ring-woot-500 focus:border-woot-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-woot-500 dark:focus:border-woot-500"
+        placeholder="Type a message... [CMD/CTRL + Enter to send]"
+        autofocus
+        autocomplete="off"
+      />
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/survey/App.vue b/app/javascript/survey/App.vue
index 076ca9fe7..32ebf2970 100755
--- a/app/javascript/survey/App.vue
+++ b/app/javascript/survey/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div id="app" class="woot-survey-wrap">
-    <response />
-  </div>
-</template>
-
 <script>
 import Response from './views/Response.vue';
 
@@ -15,6 +9,12 @@ export default {
 };
 </script>
 
+<template>
+  <div id="app" class="woot-survey-wrap">
+    <Response />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~survey/assets/scss/woot.scss';
 </style>
diff --git a/app/javascript/survey/components/Banner.vue b/app/javascript/survey/components/Banner.vue
index b178b6797..f2a907bf6 100644
--- a/app/javascript/survey/components/Banner.vue
+++ b/app/javascript/survey/components/Banner.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="flex items-center">
-    <i
-      v-if="showSuccess"
-      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
-    />
-    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
-    <label class="text-base font-medium text-black-800 mt-4 mb-4">
-      {{ message }}
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -29,3 +16,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center">
+    <i
+      v-if="showSuccess"
+      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
+    />
+    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
+    <label class="text-base font-medium text-black-800 mt-4 mb-4">
+      {{ message }}
+    </label>
+  </div>
+</template>
diff --git a/app/javascript/survey/components/Feedback.vue b/app/javascript/survey/components/Feedback.vue
index 2b870cc47..fcae0cb31 100644
--- a/app/javascript/survey/components/Feedback.vue
+++ b/app/javascript/survey/components/Feedback.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="mt-6">
-    <label class="text-base font-medium text-black-800">
-      {{ $t('SURVEY.FEEDBACK.LABEL') }}
-    </label>
-    <text-area
-      v-model="feedback"
-      class="my-5"
-      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
-    />
-    <div class="flex items-center font-medium float-right">
-      <custom-button @click="onClick">
-        <spinner v-if="feedback" class="p-0" />
-        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
-      </custom-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import CustomButton from 'shared/components/Button.vue';
 import TextArea from 'shared/components/TextArea.vue';
@@ -29,16 +10,6 @@ export default {
     TextArea,
     Spinner,
   },
-  props: {
-    isUpdating: {
-      type: Boolean,
-      default: null,
-    },
-    isButtonDisabled: {
-      type: Boolean,
-      default: null,
-    },
-  },
   data() {
     return {
       feedback: '',
@@ -52,3 +23,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mt-6">
+    <label class="text-base font-medium text-black-800">
+      {{ $t('SURVEY.FEEDBACK.LABEL') }}
+    </label>
+    <TextArea
+      v-model="feedback"
+      class="my-5"
+      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+    />
+    <div class="flex items-center float-right font-medium">
+      <CustomButton @click="onClick">
+        <Spinner v-if="feedback" class="p-0" />
+        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+      </CustomButton>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/survey/components/Rating.vue b/app/javascript/survey/components/Rating.vue
index 530bc6c21..8d1e84bcf 100644
--- a/app/javascript/survey/components/Rating.vue
+++ b/app/javascript/survey/components/Rating.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="customer-satisfcation mb-2">
-    <div class="ratings flex py-5 px-0">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="onClick(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="customer-satisfcation mb-2">
+    <div class="ratings flex py-5 px-0">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="onClick(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .emoji-button {
   filter: grayscale(100%);
diff --git a/app/javascript/survey/views/Response.vue b/app/javascript/survey/views/Response.vue
index 2ae1d8ca8..81c631aac 100644
--- a/app/javascript/survey/views/Response.vue
+++ b/app/javascript/survey/views/Response.vue
@@ -1,56 +1,3 @@
-<template>
-  <div
-    v-if="isLoading"
-    class="flex items-center justify-center flex-1 h-full bg-black-25"
-  >
-    <spinner size="" />
-  </div>
-  <div
-    v-else
-    class="flex items-center justify-center w-full h-full overflow-auto bg-slate-50"
-  >
-    <div
-      class="flex flex-col w-full h-full bg-white rounded-lg shadow-lg lg:w-2/5 lg:h-auto"
-    >
-      <div class="w-full px-12 pt-12 pb-6 m-auto my-0">
-        <img v-if="logo" :src="logo" alt="Chatwoot logo" class="mb-6 logo" />
-        <p
-          v-if="!isRatingSubmitted"
-          class="mb-8 text-lg leading-relaxed text-black-700"
-        >
-          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
-        </p>
-        <banner
-          v-if="shouldShowBanner"
-          :show-success="shouldShowSuccessMesage"
-          :show-error="shouldShowErrorMesage"
-          :message="message"
-        />
-        <label
-          v-if="!isRatingSubmitted"
-          class="mb-4 text-base font-medium text-black-800"
-        >
-          {{ $t('SURVEY.RATING.LABEL') }}
-        </label>
-        <rating
-          :selected-rating="selectedRating"
-          @selectRating="selectRating"
-        />
-        <feedback
-          v-if="enableFeedbackForm"
-          :is-updating="isUpdating"
-          :is-button-disabled="isButtonDisabled"
-          :selected-rating="selectedRating"
-          @sendFeedback="sendFeedback"
-        />
-      </div>
-      <div class="mb-3">
-        <branding />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { useAlert } from 'dashboard/composables';
 import Branding from 'shared/components/Branding.vue';
@@ -71,12 +18,6 @@ export default {
     Feedback,
   },
   mixins: [configMixin],
-  props: {
-    showHomePage: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
   data() {
     return {
@@ -188,6 +129,59 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center flex-1 h-full bg-black-25"
+  >
+    <Spinner size="" />
+  </div>
+  <div
+    v-else
+    class="flex items-center justify-center w-full h-full overflow-auto bg-slate-50"
+  >
+    <div
+      class="flex flex-col w-full h-full bg-white rounded-lg shadow-lg lg:w-2/5 lg:h-auto"
+    >
+      <div class="w-full px-12 pt-12 pb-6 m-auto my-0">
+        <img v-if="logo" :src="logo" alt="Chatwoot logo" class="mb-6 logo" />
+        <p
+          v-if="!isRatingSubmitted"
+          class="mb-8 text-lg leading-relaxed text-black-700"
+        >
+          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
+        </p>
+        <Banner
+          v-if="shouldShowBanner"
+          :show-success="shouldShowSuccessMesage"
+          :show-error="shouldShowErrorMesage"
+          :message="message"
+        />
+        <label
+          v-if="!isRatingSubmitted"
+          class="mb-4 text-base font-medium text-black-800"
+        >
+          {{ $t('SURVEY.RATING.LABEL') }}
+        </label>
+        <Rating
+          :selected-rating="selectedRating"
+          @selectRating="selectRating"
+        />
+        <Feedback
+          v-if="enableFeedbackForm"
+          :is-updating="isUpdating"
+          :is-button-disabled="isButtonDisabled"
+          :selected-rating="selectedRating"
+          @sendFeedback="sendFeedback"
+        />
+      </div>
+      <div class="mb-3">
+        <Branding />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index c645ce5a4..6bfa4fafa 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="h-full w-full antialiased" :class="theme">
-    <router-view />
-    <snackbar-container />
-  </div>
-</template>
 <script>
 import SnackbarContainer from './components/SnackBar/Container.vue';
 
@@ -42,6 +36,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-full w-full antialiased" :class="theme">
+    <router-view />
+    <SnackbarContainer />
+  </div>
+</template>
+
 <style lang="scss">
 @tailwind base;
 @tailwind components;
diff --git a/app/javascript/v3/components/Button/SubmitButton.vue b/app/javascript/v3/components/Button/SubmitButton.vue
index a291b642e..474dde8c2 100644
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ b/app/javascript/v3/components/Button/SubmitButton.vue
@@ -1,18 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-    @click="onClick"
-  >
-    <span>{{ buttonText }}</span>
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <spinner v-if="loading" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,3 +46,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
+    @click="onClick"
+  >
+    <span>{{ buttonText }}</span>
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <Spinner v-if="loading" />
+  </button>
+</template>
diff --git a/app/javascript/v3/components/Divider/SimpleDivider.vue b/app/javascript/v3/components/Divider/SimpleDivider.vue
index e54af1747..9413aeacc 100644
--- a/app/javascript/v3/components/Divider/SimpleDivider.vue
+++ b/app/javascript/v3/components/Divider/SimpleDivider.vue
@@ -1,3 +1,14 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div class="relative my-4 section-separator">
     <div class="absolute inset-0 flex items-center" aria-hidden="true">
@@ -12,13 +23,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 16d427307..74d8ada4f 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -1,30 +1,3 @@
-<template>
-  <button
-    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
-    :class="buttonClasses"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <fluent-icon
-      v-if="icon && !trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-    <span
-      v-if="$slots.default"
-      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
-    >
-      <slot />
-    </span>
-    <fluent-icon
-      v-if="icon && trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-  </button>
-</template>
 <script setup>
 import { computed, useAttrs } from 'vue';
 
@@ -54,6 +27,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['click']);
+
 const attrs = useAttrs();
 
 const baseClasses = {
@@ -99,8 +74,6 @@ const sizeClass = computed(() => {
 
 const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
 
-const emit = defineEmits(['click']);
-
 const onClick = () => {
   if (props.disabled) {
     return;
@@ -108,3 +81,31 @@ const onClick = () => {
   emit('click');
 };
 </script>
+
+<template>
+  <button
+    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
+    :class="buttonClasses"
+    v-bind="$attrs"
+    @click="onClick"
+  >
+    <fluent-icon
+      v-if="icon && !trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+    <span
+      v-if="$slots.default"
+      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
+    >
+      <slot />
+    </span>
+    <fluent-icon
+      v-if="icon && trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+  </button>
+</template>
diff --git a/app/javascript/v3/components/Form/CheckBox.vue b/app/javascript/v3/components/Form/CheckBox.vue
index c70a122e6..fe5baf41d 100644
--- a/app/javascript/v3/components/Form/CheckBox.vue
+++ b/app/javascript/v3/components/Form/CheckBox.vue
@@ -1,13 +1,3 @@
-<template>
-  <input
-    :id="value"
-    v-model="checked"
-    type="checkbox"
-    :value="value"
-    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
-  />
-</template>
-
 <script setup>
 import { computed } from 'vue';
 
@@ -22,10 +12,20 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['input']);
+const emit = defineEmits(['update']);
 
 const checked = computed({
   get: () => props.isChecked,
   set: value => emit('update', props.value, value),
 });
 </script>
+
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
index 2a489ee76..ad427acaf 100644
--- a/app/javascript/v3/components/Form/InitialsAvatar.vue
+++ b/app/javascript/v3/components/Form/InitialsAvatar.vue
@@ -1,27 +1,6 @@
-<template>
-  <div
-    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
-    :style="style"
-    aria-hidden="true"
-  >
-    <slot>{{ initial }}</slot>
-  </div>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import { userInitial } from 'v3/helpers/CommonHelper';
-const colors = {
-  1: 'bg-ash-200 text-ash-900',
-  2: 'bg-amber-200 text-amber-900',
-  3: 'bg-pink-100 text-pink-800',
-  4: 'bg-purple-100 text-purple-800',
-  5: 'bg-indigo-100 text-indigo-800',
-  6: 'bg-grass-100 text-grass-800',
-  7: 'bg-mint-100 text-mint-800',
-  8: 'bg-orange-100 text-orange-800',
-};
 const props = defineProps({
   name: {
     type: String,
@@ -32,6 +11,16 @@ const props = defineProps({
     default: 72,
   },
 });
+const colors = {
+  1: 'bg-ash-200 text-ash-900',
+  2: 'bg-amber-200 text-amber-900',
+  3: 'bg-pink-100 text-pink-800',
+  4: 'bg-purple-100 text-purple-800',
+  5: 'bg-indigo-100 text-indigo-800',
+  6: 'bg-grass-100 text-grass-800',
+  7: 'bg-mint-100 text-mint-800',
+  8: 'bg-orange-100 text-orange-800',
+};
 const style = computed(() => ({
   fontSize: `${Math.floor(props.size / 2.5)}px`,
 }));
@@ -41,3 +30,14 @@ const colorClass = computed(() => {
 
 const initial = computed(() => userInitial(props.name));
 </script>
+
+<template>
+  <div
+    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
+    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ initial }}</slot>
+  </div>
+</template>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 63064b654..0d5dcdc02 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,39 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :icon="icon"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <template #rightOfLabel>
-      <slot />
-    </template>
-    <input
-      :id="name"
-      :name="name"
-      :type="type"
-      autocomplete="off"
-      :tabindex="tabindex"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
-      :class="{
-        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
-          hasError,
-        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
-          !hasError,
-        'px-3 py-3': spacing === 'base',
-        'px-3 py-2 mb-0': spacing === 'compact',
-        'pl-9': icon,
-      }"
-      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
-    />
-  </with-label>
-</template>
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -98,3 +62,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #rightOfLabel>
+      <slot />
+    </template>
+    <input
+      :id="name"
+      :name="name"
+      :type="type"
+      autocomplete="off"
+      :tabindex="tabindex"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :class="{
+        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
+          hasError,
+        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+      }"
+      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </WithLabel>
+</template>
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
index fb802d35d..32eff693a 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -1,3 +1,51 @@
+<script setup>
+import { computed, ref } from 'vue';
+import InitialsAvatar from './InitialsAvatar.vue';
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['change', 'delete']);
+
+const hasImageLoaded = ref(false);
+const imageLoadedError = ref(false);
+const fileInputRef = ref(null);
+
+const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
+
+const onImageLoadError = () => {
+  imageLoadedError.value = true;
+};
+
+const onImageLoad = () => {
+  hasImageLoaded.value = true;
+  imageLoadedError.value = false;
+};
+
+const openFileInput = () => {
+  fileInputRef.value.click();
+};
+
+const onImageUpload = event => {
+  const [file] = event.target.files;
+  emit('change', {
+    file,
+    url: file ? URL.createObjectURL(file) : null,
+  });
+};
+
+const onAvatarDelete = () => {
+  emit('delete');
+};
+</script>
+
 <template>
   <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
     <img
@@ -9,7 +57,7 @@
       @load="onImageLoad"
       @error="onImageLoadError"
     />
-    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
+    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
 
     <input
       ref="fileInputRef"
@@ -35,50 +83,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import { computed, ref } from 'vue';
-import InitialsAvatar from './InitialsAvatar.vue';
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emits = defineEmits(['change', 'delete']);
-
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const fileInputRef = ref(null);
-
-const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
-};
-
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-  imageLoadedError.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emits('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
-  emits('delete');
-};
-</script>
diff --git a/app/javascript/v3/components/Form/RadioTags.vue b/app/javascript/v3/components/Form/RadioTags.vue
index 7cb221132..8d2e49fb2 100644
--- a/app/javascript/v3/components/Form/RadioTags.vue
+++ b/app/javascript/v3/components/Form/RadioTags.vue
@@ -1,25 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <div class="flex gap-2 flex-wrap">
-      <woot-button
-        v-for="option in options"
-        :key="option.value"
-        :variant="value === option.value ? '' : 'hollow'"
-        :color-scheme="value === option.value ? 'primary' : 'secondary'"
-        size="small"
-        @click="$emit('input', option.value)"
-      >
-        {{ option.label }}
-      </woot-button>
-    </div>
-  </with-label>
-</template>
-
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -27,10 +5,6 @@ export default {
     WithLabel,
   },
   props: {
-    id: {
-      type: String,
-      default: '',
-    },
     options: {
       type: Array,
       default: () => [],
@@ -58,3 +32,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <div class="flex flex-wrap gap-2">
+      <woot-button
+        v-for="option in options"
+        :key="option.value"
+        :variant="value === option.value ? '' : 'hollow'"
+        :color-scheme="value === option.value ? 'primary' : 'secondary'"
+        size="small"
+        @click="$emit('input', option.value)"
+      >
+        {{ option.label }}
+      </woot-button>
+    </div>
+  </WithLabel>
+</template>
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 67a311b04..00334f24b 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -1,35 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :icon="icon"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <select
-      :id="id"
-      :selected="value"
-      :name="name"
-      :class="{
-        'text-ash-400': !value,
-        'text-ash-900': value,
-        'pl-9': icon,
-      }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
-      @input="onInput"
-    >
-      <option value="" disabled selected class="hidden">
-        {{ placeholder }}
-      </option>
-      <slot>
-        <option v-for="opt in options" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </slot>
-    </select>
-  </with-label>
-</template>
-
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -81,6 +49,39 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <select
+      :id="id"
+      :selected="value"
+      :name="name"
+      :class="{
+        'text-ash-400': !value,
+        'text-ash-900': value,
+        'pl-9': icon,
+      }"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+      @input="onInput"
+    >
+      <option value="" disabled selected class="hidden">
+        {{ placeholder }}
+      </option>
+      <slot>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </slot>
+    </select>
+  </WithLabel>
+</template>
+
 <style scoped>
 .select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index cb9751d62..62bcb6e2d 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -1,3 +1,16 @@
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
+
 <template>
   <button
     type="button"
@@ -20,16 +33,3 @@
     />
   </button>
 </template>
-
-<script>
-export default {
-  props: {
-    value: { type: Boolean, default: false },
-  },
-  methods: {
-    onClick() {
-      this.$emit('input', !this.value);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/Form/Textarea.vue b/app/javascript/v3/components/Form/Textarea.vue
index 736d4f72b..8c533387c 100644
--- a/app/javascript/v3/components/Form/Textarea.vue
+++ b/app/javascript/v3/components/Form/Textarea.vue
@@ -1,31 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <textarea
-      :id="name"
-      :name="name"
-      autocomplete="off"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
-      :rows="rows"
-      :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
-          !hasError,
-        'resize-none': !allowResize,
-      }"
-      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
-    />
-  </with-label>
-</template>
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -81,3 +53,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <textarea
+      :id="name"
+      :name="name"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :rows="rows"
+      :class="{
+        'focus:outline-red-600 outline-red-600': hasError,
+        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
+          !hasError,
+        'resize-none': !allowResize,
+      }"
+      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </WithLabel>
+</template>
diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
index be7fefffd..68840604b 100644
--- a/app/javascript/v3/components/Form/WithLabel.vue
+++ b/app/javascript/v3/components/Form/WithLabel.vue
@@ -1,3 +1,30 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div class="space-y-1">
     <label
@@ -30,29 +57,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index 0d4d2a866..eb502e1aa 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <a
-      :href="getGoogleAuthUrl()"
-      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
-    >
-      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
-      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
-        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
-      </span>
-    </a>
-    <simple-divider
-      v-if="showSeparator"
-      ref="divider"
-      :label="$t('COMMON.OR')"
-      class="uppercase"
-    />
-  </div>
-</template>
-
 <script>
 import SimpleDivider from '../Divider/SimpleDivider.vue';
 
@@ -58,3 +38,25 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
+<template>
+  <div class="flex flex-col">
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex justify-center w-full px-4 py-3 bg-white rounded-md shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="ml-2 text-base font-medium text-slate-600 dark:text-white">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+    <SimpleDivider
+      v-if="showSeparator"
+      ref="divider"
+      :label="$t('COMMON.OR')"
+      class="uppercase"
+    />
+  </div>
+</template>
diff --git a/app/javascript/v3/components/SnackBar/Container.vue b/app/javascript/v3/components/SnackBar/Container.vue
index a676cd899..07b27ef46 100644
--- a/app/javascript/v3/components/SnackBar/Container.vue
+++ b/app/javascript/v3/components/SnackBar/Container.vue
@@ -1,18 +1,3 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
-  >
-    <snackbar-item
-      v-for="snackbarAlertMessage in snackbarAlertMessages"
-      :key="snackbarAlertMessage.key"
-      :message="snackbarAlertMessage.message"
-      :action="snackbarAlertMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import SnackbarItem from './Item.vue';
@@ -52,3 +37,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
+  >
+    <SnackbarItem
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>
diff --git a/app/javascript/v3/components/SnackBar/Item.vue b/app/javascript/v3/components/SnackBar/Item.vue
index b87845ad6..25c719c76 100644
--- a/app/javascript/v3/components/SnackBar/Item.vue
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -1,3 +1,20 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isActionPresent() {
+      return this.action && this.action.message;
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
@@ -13,25 +30,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    message: { type: String, default: '' },
-    action: {
-      type: Object,
-      default: () => ({}),
-    },
-    showButton: Boolean,
-    duration: {
-      type: [String, Number],
-      default: 3000,
-    },
-  },
-  computed: {
-    isActionPresent() {
-      return this.action && this.action.message;
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 51fa95f7c..906009883 100644
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="flex items-center justify-center h-full w-full">
-    <spinner color-scheme="primary" size="" />
-    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
-  </div>
-</template>
 <script>
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { verifyPasswordToken } from '../../../api/auth';
@@ -34,3 +28,10 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center justify-center h-full w-full">
+    <Spinner color-scheme="primary" size="" />
+    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index 7c9583b9b..bbe0e01ec 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
-  >
-    <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
-      @submit.prevent="submitForm"
-    >
-      <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
-      >
-        {{ $t('SET_NEW_PASSWORD.TITLE') }}
-      </h1>
-
-      <div class="space-y-5">
-        <form-input
-          v-model.trim="credentials.password"
-          class="mt-3"
-          name="password"
-          type="password"
-          :has-error="v$.credentials.password.$error"
-          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
-          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-          @blur="v$.credentials.password.$touch"
-        />
-        <form-input
-          v-model.trim="credentials.confirmPassword"
-          class="mt-3"
-          name="confirm_password"
-          type="password"
-          :has-error="v$.credentials.confirmPassword.$error"
-          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
-          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
-          @blur="v$.credentials.confirmPassword.$touch"
-        />
-        <submit-button
-          :disabled="
-            v$.credentials.password.$invalid ||
-            v$.credentials.confirmPassword.$invalid ||
-            newPasswordAPI.showLoading
-          "
-          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
-          :loading="newPasswordAPI.showLoading"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -63,8 +14,6 @@ export default {
   },
   props: {
     resetPasswordToken: { type: String, default: '' },
-    redirectUrl: { type: String, default: '' },
-    config: { type: String, default: '' },
   },
   setup() {
     return { v$: useVuelidate() };
@@ -135,3 +84,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="space-y-5">
+        <FormInput
+          v-model.trim="credentials.password"
+          class="mt-3"
+          name="password"
+          type="password"
+          :has-error="v$.credentials.password.$error"
+          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.password.$touch"
+        />
+        <FormInput
+          v-model.trim="credentials.confirmPassword"
+          class="mt-3"
+          name="confirm_password"
+          type="password"
+          :has-error="v$.credentials.confirmPassword.$error"
+          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.confirmPassword.$touch"
+        />
+        <SubmitButton
+          :disabled="
+            v$.credentials.password.$invalid ||
+            v$.credentials.confirmPassword.$invalid ||
+            newPasswordAPI.showLoading
+          "
+          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index f2ff279a0..c703f3f58 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -1,51 +1,3 @@
-<template>
-  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
-  >
-    <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
-      @submit.prevent="submit"
-    >
-      <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
-      >
-        {{ $t('RESET_PASSWORD.TITLE') }}
-      </h1>
-      <p
-        class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
-      >
-        {{
-          useInstallationName(
-            $t('RESET_PASSWORD.DESCRIPTION'),
-            globalConfig.installationName
-          )
-        }}
-      </p>
-      <div class="space-y-5">
-        <form-input
-          v-model.trim="credentials.email"
-          name="email_address"
-          :has-error="v$.credentials.email.$error"
-          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
-          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
-          @input="v$.credentials.email.$touch"
-        />
-        <SubmitButton
-          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
-          :button-text="$t('RESET_PASSWORD.SUBMIT')"
-          :loading="resetPassword.showLoading"
-        />
-      </div>
-      <p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
-        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
-        <router-link to="/auth/login" class="text-link">
-          {{ $t('COMMON.CLICK_HERE') }}.
-        </router-link>
-      </p>
-    </form>
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { mapGetters } from 'vuex';
@@ -111,3 +63,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submit"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+      >
+        {{ $t('RESET_PASSWORD.TITLE') }}
+      </h1>
+      <p
+        class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
+      >
+        {{
+          useInstallationName(
+            $t('RESET_PASSWORD.DESCRIPTION'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
+      <div class="space-y-5">
+        <FormInput
+          v-model.trim="credentials.email"
+          name="email_address"
+          :has-error="v$.credentials.email.$error"
+          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
+          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+          @input="v$.credentials.email.$touch"
+        />
+        <SubmitButton
+          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
+          :button-text="$t('RESET_PASSWORD.SUBMIT')"
+          :loading="resetPassword.showLoading"
+        />
+      </div>
+      <p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
+        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
+        <router-link to="/auth/login" class="text-link">
+          {{ $t('COMMON.CLICK_HERE') }}.
+        </router-link>
+      </p>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index e1621db18..75ae10e9a 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,57 +1,3 @@
-<template>
-  <div class="h-full w-full dark:bg-slate-900">
-    <div v-show="!isLoading" class="flex h-full">
-      <div
-        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
-      >
-        <div class="px-8 max-w-[560px] w-full overflow-auto">
-          <div class="mb-4">
-            <img
-              :src="globalConfig.logo"
-              :alt="globalConfig.installationName"
-              class="h-8 w-auto block dark:hidden"
-            />
-            <img
-              v-if="globalConfig.logoDark"
-              :src="globalConfig.logoDark"
-              :alt="globalConfig.installationName"
-              class="h-8 w-auto hidden dark:block"
-            />
-            <h2
-              class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
-            >
-              {{ $t('REGISTER.TRY_WOOT') }}
-            </h2>
-          </div>
-          <signup-form />
-          <div class="text-sm text-slate-800 dark:text-woot-50 px-1">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
-            <router-link class="text-link" to="/app/login">
-              {{
-                useInstallationName(
-                  $t('LOGIN.TITLE'),
-                  globalConfig.installationName
-                )
-              }}
-            </router-link>
-          </div>
-        </div>
-      </div>
-      <testimonials
-        v-if="isAChatwootInstance"
-        class="flex-1"
-        @resize-containers="resizeContainers"
-      />
-    </div>
-    <div
-      v-show="isLoading"
-      class="flex items-center justify-center h-full w-full"
-    >
-      <spinner color-scheme="primary" size="" />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -85,3 +31,57 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-full h-full dark:bg-slate-900">
+    <div v-show="!isLoading" class="flex h-full">
+      <div
+        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
+      >
+        <div class="px-8 max-w-[560px] w-full overflow-auto">
+          <div class="mb-4">
+            <img
+              :src="globalConfig.logo"
+              :alt="globalConfig.installationName"
+              class="block w-auto h-8 dark:hidden"
+            />
+            <img
+              v-if="globalConfig.logoDark"
+              :src="globalConfig.logoDark"
+              :alt="globalConfig.installationName"
+              class="hidden w-auto h-8 dark:block"
+            />
+            <h2
+              class="mt-6 text-3xl font-medium text-left mb-7 text-slate-900 dark:text-woot-50"
+            >
+              {{ $t('REGISTER.TRY_WOOT') }}
+            </h2>
+          </div>
+          <SignupForm />
+          <div class="px-1 text-sm text-slate-800 dark:text-woot-50">
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
+            <router-link class="text-link" to="/app/login">
+              {{
+                useInstallationName(
+                  $t('LOGIN.TITLE'),
+                  globalConfig.installationName
+                )
+              }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <Testimonials
+        v-if="isAChatwootInstance"
+        class="flex-1"
+        @resizeContainers="resizeContainers"
+      />
+    </div>
+    <div
+      v-show="isLoading"
+      class="flex items-center justify-center w-full h-full"
+    >
+      <Spinner color-scheme="primary" size="" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index 3ddf24377..e2a30aa2f 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -1,83 +1,3 @@
-<template>
-  <div class="flex-1 px-1 overflow-auto">
-    <form class="space-y-3" @submit.prevent="submit">
-      <div class="flex">
-        <form-input
-          v-model.trim="credentials.fullName"
-          name="full_name"
-          class="flex-1"
-          :class="{ error: v$.credentials.fullName.$error }"
-          :label="$t('REGISTER.FULL_NAME.LABEL')"
-          :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-          :has-error="v$.credentials.fullName.$error"
-          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
-          @blur="v$.credentials.fullName.$touch"
-        />
-        <form-input
-          v-model.trim="credentials.accountName"
-          name="account_name"
-          class="flex-1 ml-2"
-          :class="{ error: v$.credentials.accountName.$error }"
-          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
-          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-          :has-error="v$.credentials.accountName.$error"
-          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
-          @blur="v$.credentials.accountName.$touch"
-        />
-      </div>
-      <form-input
-        v-model.trim="credentials.email"
-        type="email"
-        name="email_address"
-        :class="{ error: v$.credentials.email.$error }"
-        :label="$t('REGISTER.EMAIL.LABEL')"
-        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-        :has-error="v$.credentials.email.$error"
-        :error-message="$t('REGISTER.EMAIL.ERROR')"
-        @blur="v$.credentials.email.$touch"
-      />
-      <form-input
-        v-model.trim="credentials.password"
-        type="password"
-        name="password"
-        :class="{ error: v$.credentials.password.$error }"
-        :label="$t('LOGIN.PASSWORD.LABEL')"
-        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-        :has-error="v$.credentials.password.$error"
-        :error-message="passwordErrorText"
-        @blur="v$.credentials.password.$touch"
-      />
-      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
-        <vue-hcaptcha
-          ref="hCaptcha"
-          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
-          :sitekey="globalConfig.hCaptchaSiteKey"
-          @verify="onRecaptchaVerified"
-        />
-        <span
-          v-if="!hasAValidCaptcha && didCaptchaReset"
-          class="text-xs text-red-400"
-        >
-          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
-        </span>
-      </div>
-      <submit-button
-        :button-text="$t('REGISTER.SUBMIT')"
-        :disabled="isSignupInProgress || !hasAValidCaptcha"
-        :loading="isSignupInProgress"
-        icon-class="arrow-chevron-right"
-      />
-    </form>
-    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
-      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
-    </GoogleOAuthButton>
-    <p
-      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
-      v-html="termsLink"
-    />
-  </div>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
@@ -210,6 +130,87 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 px-1 overflow-auto">
+    <form class="space-y-3" @submit.prevent="submit">
+      <div class="flex">
+        <FormInput
+          v-model.trim="credentials.fullName"
+          name="full_name"
+          class="flex-1"
+          :class="{ error: v$.credentials.fullName.$error }"
+          :label="$t('REGISTER.FULL_NAME.LABEL')"
+          :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
+          :has-error="v$.credentials.fullName.$error"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+          @blur="v$.credentials.fullName.$touch"
+        />
+        <FormInput
+          v-model.trim="credentials.accountName"
+          name="account_name"
+          class="flex-1 ml-2"
+          :class="{ error: v$.credentials.accountName.$error }"
+          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
+          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
+          :has-error="v$.credentials.accountName.$error"
+          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
+          @blur="v$.credentials.accountName.$touch"
+        />
+      </div>
+      <FormInput
+        v-model.trim="credentials.email"
+        type="email"
+        name="email_address"
+        :class="{ error: v$.credentials.email.$error }"
+        :label="$t('REGISTER.EMAIL.LABEL')"
+        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+        :has-error="v$.credentials.email.$error"
+        :error-message="$t('REGISTER.EMAIL.ERROR')"
+        @blur="v$.credentials.email.$touch"
+      />
+      <FormInput
+        v-model.trim="credentials.password"
+        type="password"
+        name="password"
+        :class="{ error: v$.credentials.password.$error }"
+        :label="$t('LOGIN.PASSWORD.LABEL')"
+        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+        :has-error="v$.credentials.password.$error"
+        :error-message="passwordErrorText"
+        @blur="v$.credentials.password.$touch"
+      />
+      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
+        <VueHcaptcha
+          ref="hCaptcha"
+          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
+          :sitekey="globalConfig.hCaptchaSiteKey"
+          @verify="onRecaptchaVerified"
+        />
+        <span
+          v-if="!hasAValidCaptcha && didCaptchaReset"
+          class="text-xs text-red-400"
+        >
+          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+        </span>
+      </div>
+      <SubmitButton
+        :button-text="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !hasAValidCaptcha"
+        :loading="isSignupInProgress"
+        icon-class="arrow-chevron-right"
+      />
+    </form>
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
+      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+    </GoogleOAuthButton>
+    <p
+      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
+      v-html="termsLink"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .h-captcha--box {
   &::v-deep .error {
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
index be15a8575..718efc7ef 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    v-if="testimonials.length"
-    class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
-  >
-    <img
-      src="/assets/images/auth/top-left.svg"
-      class="left-0 absolute h-40 w-40 top-0"
-    />
-    <img
-      src="/assets/images/auth/bottom-right.svg"
-      class="right-0 absolute h-40 w-40 bottom-0"
-    />
-    <img
-      src="/assets/images/auth/auth--bg.svg"
-      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
-    />
-    <div class="flex items-center justify-center flex-col h-full w-full z-50">
-      <div class="flex items-start justify-center p-6">
-        <testimonial-card
-          v-for="(testimonial, index) in testimonials"
-          :key="testimonial.id"
-          :review-content="testimonial.authorReview"
-          :author-image="testimonial.authorImage"
-          :author-name="testimonial.authorName"
-          :author-designation="testimonial.authorCompany"
-          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import TestimonialCard from './TestimonialCard.vue';
 import { getTestimonialContent } from '../../../../../api/testimonials';
@@ -50,13 +17,46 @@ export default {
       } catch (error) {
         // Ignoring the error as the UI wouldn't break
       } finally {
-        this.$emit('resize-containers', !!this.testimonials.length);
+        this.$emit('resizeContainers', !!this.testimonials.length);
       }
     },
   },
 };
 </script>
 
+<template>
+  <div
+    v-if="testimonials.length"
+    class="relative flex-1 hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
+  >
+    <img
+      src="/assets/images/auth/top-left.svg"
+      class="absolute top-0 left-0 w-40 h-40"
+    />
+    <img
+      src="/assets/images/auth/bottom-right.svg"
+      class="absolute bottom-0 right-0 w-40 h-40"
+    />
+    <img
+      src="/assets/images/auth/auth--bg.svg"
+      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
+    />
+    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
+      <div class="flex items-start justify-center p-6">
+        <TestimonialCard
+          v-for="(testimonial, index) in testimonials"
+          :key="testimonial.id"
+          :review-content="testimonial.authorReview"
+          :author-image="testimonial.authorImage"
+          :author-name="testimonial.authorName"
+          :author-designation="testimonial.authorCompany"
+          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .center--img {
 }
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
index af8341379..c68ce53f5 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
-  >
-    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
-      {{ reviewContent }}
-    </p>
-    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
-      <div class="bg-white rounded-full p-1">
-        <img :src="authorImage" class="h-8 w-8 rounded-full" />
-      </div>
-      <div class="ml-2">
-        <div class="text-sm font-medium">{{ authorName }}</div>
-        <div class="text-xs">{{ authorDesignation }}</div>
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -38,3 +20,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
+  >
+    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
+      {{ reviewContent }}
+    </p>
+    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
+      <div class="bg-white rounded-full p-1">
+        <img :src="authorImage" class="h-8 w-8 rounded-full" />
+      </div>
+      <div class="ml-2">
+        <div class="text-sm font-medium">{{ authorName }}</div>
+        <div class="text-xs">{{ authorDesignation }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index a76629956..677b6b87f 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -1,95 +1,3 @@
-<template>
-  <main
-    class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
-  >
-    <section class="max-w-5xl mx-auto">
-      <img
-        :src="globalConfig.logo"
-        :alt="globalConfig.installationName"
-        class="block w-auto h-8 mx-auto dark:hidden"
-      />
-      <img
-        v-if="globalConfig.logoDark"
-        :src="globalConfig.logoDark"
-        :alt="globalConfig.installationName"
-        class="hidden w-auto h-8 mx-auto dark:block"
-      />
-      <h2
-        class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
-      >
-        {{
-          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
-        }}
-      </h2>
-      <p
-        v-if="showSignupLink"
-        class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
-      >
-        {{ $t('COMMON.OR') }}
-        <router-link to="auth/signup" class="lowercase text-link">
-          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
-        </router-link>
-      </p>
-    </section>
-    <section
-      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
-      :class="{
-        'mb-8 mt-15': !showGoogleOAuth,
-        'animate-wiggle': loginApi.hasErrored,
-      }"
-    >
-      <div v-if="!email">
-        <GoogleOAuthButton v-if="showGoogleOAuth" />
-        <form class="space-y-5" @submit.prevent="submitFormLogin">
-          <form-input
-            v-model.trim="credentials.email"
-            name="email_address"
-            type="text"
-            data-testid="email_input"
-            :tabindex="1"
-            required
-            :label="$t('LOGIN.EMAIL.LABEL')"
-            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-            :has-error="v$.credentials.email.$error"
-            @input="v$.credentials.email.$touch"
-          />
-          <form-input
-            v-model.trim="credentials.password"
-            type="password"
-            name="password"
-            data-testid="password_input"
-            required
-            :tabindex="2"
-            :label="$t('LOGIN.PASSWORD.LABEL')"
-            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-            :has-error="v$.credentials.password.$error"
-            @input="v$.credentials.password.$touch"
-          >
-            <p v-if="!globalConfig.disableUserProfileUpdate">
-              <router-link
-                to="auth/reset/password"
-                class="text-sm text-link"
-                tabindex="4"
-              >
-                {{ $t('LOGIN.FORGOT_PASSWORD') }}
-              </router-link>
-            </p>
-          </form-input>
-          <submit-button
-            :disabled="loginApi.showLoading"
-            :tabindex="3"
-            :button-text="$t('LOGIN.SUBMIT')"
-            :loading="loginApi.showLoading"
-          />
-        </form>
-      </div>
-      <div v-else class="flex items-center justify-center">
-        <spinner color-scheme="primary" size="" />
-      </div>
-    </section>
-  </main>
-</template>
-
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, email } from '@vuelidate/validators';
@@ -119,7 +27,6 @@ export default {
     ssoAuthToken: { type: String, default: '' },
     ssoAccountId: { type: String, default: '' },
     ssoConversationId: { type: String, default: '' },
-    config: { type: String, default: '' },
     email: { type: String, default: '' },
     authError: { type: String, default: '' },
   },
@@ -237,3 +144,95 @@ export default {
   },
 };
 </script>
+
+<template>
+  <main
+    class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+  >
+    <section class="max-w-5xl mx-auto">
+      <img
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
+        class="block w-auto h-8 mx-auto dark:hidden"
+      />
+      <img
+        v-if="globalConfig.logoDark"
+        :src="globalConfig.logoDark"
+        :alt="globalConfig.installationName"
+        class="hidden w-auto h-8 mx-auto dark:block"
+      />
+      <h2
+        class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
+      >
+        {{
+          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+        }}
+      </h2>
+      <p
+        v-if="showSignupLink"
+        class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
+      >
+        {{ $t('COMMON.OR') }}
+        <router-link to="auth/signup" class="lowercase text-link">
+          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
+        </router-link>
+      </p>
+    </section>
+    <section
+      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      :class="{
+        'mb-8 mt-15': !showGoogleOAuth,
+        'animate-wiggle': loginApi.hasErrored,
+      }"
+    >
+      <div v-if="!email">
+        <GoogleOAuthButton v-if="showGoogleOAuth" />
+        <form class="space-y-5" @submit.prevent="submitFormLogin">
+          <FormInput
+            v-model.trim="credentials.email"
+            name="email_address"
+            type="text"
+            data-testid="email_input"
+            :tabindex="1"
+            required
+            :label="$t('LOGIN.EMAIL.LABEL')"
+            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
+            :has-error="v$.credentials.email.$error"
+            @input="v$.credentials.email.$touch"
+          />
+          <FormInput
+            v-model.trim="credentials.password"
+            type="password"
+            name="password"
+            data-testid="password_input"
+            required
+            :tabindex="2"
+            :label="$t('LOGIN.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
+            :has-error="v$.credentials.password.$error"
+            @input="v$.credentials.password.$touch"
+          >
+            <p v-if="!globalConfig.disableUserProfileUpdate">
+              <router-link
+                to="auth/reset/password"
+                class="text-sm text-link"
+                tabindex="4"
+              >
+                {{ $t('LOGIN.FORGOT_PASSWORD') }}
+              </router-link>
+            </p>
+          </FormInput>
+          <SubmitButton
+            :disabled="loginApi.showLoading"
+            :tabindex="3"
+            :button-text="$t('LOGIN.SUBMIT')"
+            :loading="loginApi.showLoading"
+          />
+        </form>
+      </div>
+      <div v-else class="flex items-center justify-center">
+        <Spinner color-scheme="primary" size="" />
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/javascript/v3/views/onboarding/OnboardingStep.vue b/app/javascript/v3/views/onboarding/OnboardingStep.vue
index 2ef6da67d..fbd3d17d4 100644
--- a/app/javascript/v3/views/onboarding/OnboardingStep.vue
+++ b/app/javascript/v3/views/onboarding/OnboardingStep.vue
@@ -1,3 +1,27 @@
+<script>
+export default {
+  name: 'OnboardingStep',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
@@ -24,29 +48,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'OnboardingStep',
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-    isComplete: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
 <style scoped>
 .hide-before-of-last:last-child::before {
   display: none;
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 072323d53..6645465c5 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -1,26 +1,3 @@
-<template>
-  <div
-    v-if="!conversationSize && isFetchingList"
-    class="flex flex-1 items-center h-full bg-black-25 justify-center"
-    :class="{ dark: prefersDarkMode }"
-  >
-    <spinner size="" />
-  </div>
-  <div
-    v-else
-    class="flex flex-col justify-end h-full"
-    :class="{
-      'is-mobile': isMobile,
-      'is-widget-right': isRightAligned,
-      'is-bubble-hidden': hideMessageBubble,
-      'is-flat-design': isWidgetStyleFlat,
-      dark: prefersDarkMode,
-    }"
-  >
-    <router-view />
-  </div>
-</template>
-
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
@@ -60,10 +37,7 @@ export default {
   computed: {
     ...mapGetters({
       activeCampaign: 'campaign/getActiveCampaign',
-      campaigns: 'campaign/getCampaigns',
       conversationSize: 'conversation/getConversationSize',
-      currentUser: 'contacts/getCurrentUser',
-      hasFetched: 'agent/getHasFetched',
       hideMessageBubble: 'appConfig/getHideMessageBubble',
       isFetchingList: 'conversation/getIsFetchingList',
       isRightAligned: 'appConfig/isRightAligned',
@@ -114,7 +88,7 @@ export default {
       'setBubbleVisibility',
       'setColorScheme',
     ]),
-    ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
+    ...mapActions('conversation', ['fetchOldConversations']),
     ...mapActions('campaign', [
       'initCampaigns',
       'executeCampaign',
@@ -354,6 +328,29 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!conversationSize && isFetchingList"
+    class="flex items-center justify-center flex-1 h-full bg-black-25"
+    :class="{ dark: prefersDarkMode }"
+  >
+    <Spinner size="" />
+  </div>
+  <div
+    v-else
+    class="flex flex-col justify-end h-full"
+    :class="{
+      'is-mobile': isMobile,
+      'is-widget-right': isRightAligned,
+      'is-bubble-hidden': hideMessageBubble,
+      'is-flat-design': isWidgetStyleFlat,
+      dark: prefersDarkMode,
+    }"
+  >
+    <router-view />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~widget/assets/scss/woot.scss';
 </style>
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 2bf94b094..3296d5128 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -1,91 +1,3 @@
-<template>
-  <div
-    class="agent-message-wrap group"
-    :class="{
-      'has-response': hasRecordedResponse || isASubmittedForm,
-    }"
-  >
-    <div v-if="!isASubmittedForm" class="agent-message">
-      <div class="avatar-wrap">
-        <thumbnail
-          v-if="message.showAvatar || hasRecordedResponse"
-          :src="avatarUrl"
-          size="24px"
-          :username="agentName"
-        />
-      </div>
-      <div class="message-wrap">
-        <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
-        </div>
-        <div class="flex gap-1">
-          <div class="space-y-2">
-            <AgentMessageBubble
-              v-if="shouldDisplayAgentMessage"
-              :content-type="contentType"
-              :message-content-attributes="messageContentAttributes"
-              :message-id="message.id"
-              :message-type="messageType"
-              :message="message.content"
-            />
-            <div
-              v-if="hasAttachments"
-              class="space-y-2 chat-bubble has-attachment agent"
-              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
-            >
-              <div
-                v-for="attachment in message.attachments"
-                :key="attachment.id"
-              >
-                <image-bubble
-                  v-if="attachment.file_type === 'image' && !hasImageError"
-                  :url="attachment.data_url"
-                  :thumb="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onImageLoadError"
-                />
-
-                <video-bubble
-                  v-if="attachment.file_type === 'video' && !hasVideoError"
-                  :url="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onVideoLoadError"
-                />
-
-                <audio v-else-if="attachment.file_type === 'audio'" controls>
-                  <source :src="attachment.data_url" />
-                </audio>
-                <file-bubble v-else :url="attachment.data_url" />
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-col justify-end">
-            <message-reply-button
-              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
-              @click="toggleReply"
-            />
-          </div>
-        </div>
-        <p
-          v-if="message.showAvatar || hasRecordedResponse"
-          v-dompurify-html="agentName"
-          class="agent-name"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
-        />
-      </div>
-    </div>
-
-    <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
-    <div v-if="isASubmittedForm">
-      <UserMessage
-        v-for="submittedValue in submittedFormValues"
-        :key="submittedValue.id"
-        :message="submittedValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import UserMessage from 'widget/components/UserMessage.vue';
 import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
@@ -246,3 +158,91 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="agent-message-wrap group"
+    :class="{
+      'has-response': hasRecordedResponse || isASubmittedForm,
+    }"
+  >
+    <div v-if="!isASubmittedForm" class="agent-message">
+      <div class="avatar-wrap">
+        <Thumbnail
+          v-if="message.showAvatar || hasRecordedResponse"
+          :src="avatarUrl"
+          size="24px"
+          :username="agentName"
+        />
+      </div>
+      <div class="message-wrap">
+        <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
+          <ReplyToChip :reply-to="replyTo" />
+        </div>
+        <div class="flex gap-1">
+          <div class="space-y-2">
+            <AgentMessageBubble
+              v-if="shouldDisplayAgentMessage"
+              :content-type="contentType"
+              :message-content-attributes="messageContentAttributes"
+              :message-id="message.id"
+              :message-type="messageType"
+              :message="message.content"
+            />
+            <div
+              v-if="hasAttachments"
+              class="space-y-2 chat-bubble has-attachment agent"
+              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <ImageBubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <VideoBubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <audio v-else-if="attachment.file_type === 'audio'" controls>
+                  <source :src="attachment.data_url" />
+                </audio>
+                <FileBubble v-else :url="attachment.data_url" />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col justify-end">
+            <MessageReplyButton
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
+            />
+          </div>
+        </div>
+        <p
+          v-if="message.showAvatar || hasRecordedResponse"
+          v-dompurify-html="agentName"
+          class="agent-name"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        />
+      </div>
+    </div>
+
+    <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
+    <div v-if="isASubmittedForm">
+      <UserMessage
+        v-for="submittedValue in submittedFormValues"
+        :key="submittedValue.id"
+        :message="submittedValue"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index f5bad52fc..c1c0cc8d0 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -1,64 +1,3 @@
-<template>
-  <div class="chat-bubble-wrap">
-    <div
-      v-if="
-        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
-      "
-      class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
-    >
-      <div
-        v-dompurify-html="formatMessage(message, false)"
-        class="message-content text-slate-900 dark:text-slate-50"
-      />
-      <email-input
-        v-if="isTemplateEmail"
-        :message-id="messageId"
-        :message-content-attributes="messageContentAttributes"
-      />
-
-      <integration-card
-        v-if="isIntegrations"
-        :message-id="messageId"
-        :meeting-data="messageContentAttributes.data"
-      />
-    </div>
-    <div v-if="isOptions">
-      <chat-options
-        :title="message"
-        :options="messageContentAttributes.items"
-        :hide-fields="!!messageContentAttributes.submitted_values"
-        @click="onOptionSelect"
-      />
-    </div>
-    <chat-form
-      v-if="isForm && !messageContentAttributes.submitted_values"
-      :items="messageContentAttributes.items"
-      :button-label="messageContentAttributes.button_label"
-      :submitted-values="messageContentAttributes.submitted_values"
-      @submit="onFormSubmit"
-    />
-    <div v-if="isCards">
-      <chat-card
-        v-for="item in messageContentAttributes.items"
-        :key="item.title"
-        :media-url="item.media_url"
-        :title="item.title"
-        :description="item.description"
-        :actions="item.actions"
-      />
-    </div>
-    <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items" />
-    </div>
-    <customer-satisfaction
-      v-if="isCSAT"
-      :message-content-attributes="messageContentAttributes.submitted_values"
-      :message-id="messageId"
-    />
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ChatCard from 'shared/components/ChatCard.vue';
@@ -141,3 +80,64 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <div
+      v-if="
+        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
+      "
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
+    >
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content text-slate-900 dark:text-slate-50"
+      />
+      <EmailInput
+        v-if="isTemplateEmail"
+        :message-id="messageId"
+        :message-content-attributes="messageContentAttributes"
+      />
+
+      <IntegrationCard
+        v-if="isIntegrations"
+        :message-id="messageId"
+        :meeting-data="messageContentAttributes.data"
+      />
+    </div>
+    <div v-if="isOptions">
+      <ChatOptions
+        :title="message"
+        :options="messageContentAttributes.items"
+        :hide-fields="!!messageContentAttributes.submitted_values"
+        @click="onOptionSelect"
+      />
+    </div>
+    <ChatForm
+      v-if="isForm && !messageContentAttributes.submitted_values"
+      :items="messageContentAttributes.items"
+      :button-label="messageContentAttributes.button_label"
+      :submitted-values="messageContentAttributes.submitted_values"
+      @submit="onFormSubmit"
+    />
+    <div v-if="isCards">
+      <ChatCard
+        v-for="item in messageContentAttributes.items"
+        :key="item.title"
+        :media-url="item.media_url"
+        :title="item.title"
+        :description="item.description"
+        :actions="item.actions"
+      />
+    </div>
+    <div v-if="isArticle">
+      <ChatArticle :items="messageContentAttributes.items" />
+    </div>
+    <CustomerSatisfaction
+      v-if="isCSAT"
+      :message-content-attributes="messageContentAttributes.submitted_values"
+      :message-id="messageId"
+    />
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index e8f8e7b09..a84d8fc7b 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/app/javascript/widget/components/AgentTypingBubble.vue
@@ -1,3 +1,11 @@
+<script>
+import darkModeMixing from 'widget/mixins/darkModeMixin.js';
+export default {
+  name: 'AgentTypingBubble',
+  mixins: [darkModeMixing],
+};
+</script>
+
 <template>
   <div class="agent-message-wrap">
     <div class="agent-message">
@@ -17,14 +25,6 @@
   </div>
 </template>
 
-<script>
-import darkModeMixing from 'widget/mixins/darkModeMixin.js';
-export default {
-  name: 'AgentTypingBubble',
-  mixins: [darkModeMixing],
-};
-</script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
index 1b0193043..45d898bf9 100644
--- a/app/javascript/widget/components/ArticleCategoryCard.vue
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -1,20 +1,3 @@
-<template>
-  <div>
-    <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
-      {{ title }}
-    </h3>
-    <article-list :articles="articles" @click="onArticleClick" />
-    <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
-      :style="{ color: widgetColor }"
-      @click="$emit('view-all')"
-    >
-      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <fluent-icon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ArticleList from './ArticleList.vue';
@@ -42,6 +25,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{ title }}
+    </h3>
+    <ArticleList :articles="articles" @click="onArticleClick" />
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      :style="{ color: widgetColor }"
+      @click="$emit('viewAll')"
+    >
+      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .see-articles {
   color: var(--brand-textButtonClear);
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
index 3d29ca611..1a98e7aa4 100644
--- a/app/javascript/widget/components/ArticleHero.vue
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -1,12 +1,3 @@
-<template>
-  <category-card
-    :title="$t('PORTAL.POPULAR_ARTICLES')"
-    :articles="articles.slice(0, 6)"
-    @view-all="$emit('view-all')"
-    @view="onArticleClick"
-  />
-</template>
-
 <script>
 import CategoryCard from './ArticleCategoryCard.vue';
 export default {
@@ -16,10 +7,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    categoryPath: {
-      type: String,
-      default: '',
-    },
   },
   methods: {
     onArticleClick(link) {
@@ -29,4 +16,11 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <CategoryCard
+    :title="$t('PORTAL.POPULAR_ARTICLES')"
+    :articles="articles.slice(0, 6)"
+    @viewAll="$emit('viewAll')"
+    @view="onArticleClick"
+  />
+</template>
diff --git a/app/javascript/widget/components/ArticleList.vue b/app/javascript/widget/components/ArticleList.vue
index 4043bf060..5aef7e265 100644
--- a/app/javascript/widget/components/ArticleList.vue
+++ b/app/javascript/widget/components/ArticleList.vue
@@ -1,15 +1,3 @@
-<template>
-  <ul role="list" class="py-2">
-    <article-list-item
-      v-for="article in articles"
-      :key="article.slug"
-      :link="article.link"
-      :title="article.title"
-      @click="onClick"
-    />
-  </ul>
-</template>
-
 <script>
 import ArticleListItem from './ArticleListItem.vue';
 
@@ -33,3 +21,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ul role="list" class="py-2">
+    <ArticleListItem
+      v-for="article in articles"
+      :key="article.slug"
+      :link="article.link"
+      :title="article.title"
+      @click="onClick"
+    />
+  </ul>
+</template>
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/ArticleListItem.vue
index f16afa5e1..a7e828649 100644
--- a/app/javascript/widget/components/ArticleListItem.vue
+++ b/app/javascript/widget/components/ArticleListItem.vue
@@ -1,18 +1,3 @@
-<template>
-  <li
-    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
-    role="button"
-    @click="onClick"
-  >
-    <button class="underline-offset-2 text-sm leading-6 text-left">
-      {{ title }}
-    </button>
-    <span class="pl-1 arrow">
-      <fluent-icon icon="arrow-right" size="14" />
-    </span>
-  </li>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li
+    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
+    role="button"
+    @click="onClick"
+  >
+    <button class="underline-offset-2 text-sm leading-6 text-left">
+      {{ title }}
+    </button>
+    <span class="pl-1 arrow">
+      <FluentIcon icon="arrow-right" size="14" />
+    </span>
+  </li>
+</template>
diff --git a/app/javascript/widget/components/ArticleSearch.vue b/app/javascript/widget/components/ArticleSearch.vue
index 8ce663321..275d44ec1 100644
--- a/app/javascript/widget/components/ArticleSearch.vue
+++ b/app/javascript/widget/components/ArticleSearch.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
-      >
-        ⌘K
-      </kbd>
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 export default {
@@ -49,3 +23,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center px-2 py-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 px-2 pl-6 pr-1 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+      <kbd
+        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
+      >
+        {{ '⌘K' }}
+      </kbd>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue
index 7e51b887b..10ecd7afb 100644
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ b/app/javascript/widget/components/AvailableAgents.vue
@@ -1,7 +1,3 @@
-<template>
-  <grouped-avatars :users="users" />
-</template>
-
 <script>
 import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
 
@@ -25,3 +21,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <GroupedAvatars :users="users" />
+</template>
diff --git a/app/javascript/widget/components/Banner.vue b/app/javascript/widget/components/Banner.vue
index 173dfabb2..bdd11a5b7 100644
--- a/app/javascript/widget/components/Banner.vue
+++ b/app/javascript/widget/components/Banner.vue
@@ -1,11 +1,3 @@
-<template>
-  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
-    <span>
-      {{ bannerMessage }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
@@ -31,6 +23,14 @@ export default {
 };
 </script>
 
+<template>
+  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
+    <span>
+      {{ bannerMessage }}
+    </span>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 .banner {
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index 5d038a66b..0779a675f 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -1,21 +1,3 @@
-<template>
-  <file-upload
-    ref="upload"
-    :size="4096 * 2048"
-    :accept="allowedFileTypes"
-    :data="{
-      direct_upload_url: '/api/v1/widget/direct_uploads',
-      direct_upload: true,
-    }"
-    @input-file="onFileUpload"
-  >
-    <button class="icon-button flex items-center justify-center">
-      <fluent-icon v-if="!isUploading.image" icon="attach" />
-      <spinner v-if="isUploading" size="small" />
-    </button>
-  </file-upload>
-</template>
-
 <script>
 import FileUpload from 'vue-upload-component';
 import Spinner from 'shared/components/Spinner.vue';
@@ -150,3 +132,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <FileUpload
+    ref="upload"
+    :size="4096 * 2048"
+    :accept="allowedFileTypes"
+    :data="{
+      direct_upload_url: '/api/v1/widget/direct_uploads',
+      direct_upload: true,
+    }"
+    @input-file="onFileUpload"
+  >
+    <button class="icon-button flex items-center justify-center">
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
+    </button>
+  </FileUpload>
+</template>
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 7d755ef68..ab6b396e8 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -1,45 +1,3 @@
-<template>
-  <footer
-    v-if="!hideReplyBox"
-    class="relative z-50 mb-1"
-    :class="{
-      'rounded-lg': !isWidgetStyleFlat,
-      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
-        hasReplyTo,
-    }"
-  >
-    <footer-reply-to
-      v-if="hasReplyTo"
-      :in-reply-to="inReplyTo"
-      @dismiss="inReplyTo = null"
-    />
-    <chat-input-wrap
-      class="shadow-sm"
-      :on-send-message="handleSendMessage"
-      :on-send-attachment="handleSendAttachment"
-    />
-  </footer>
-  <div v-else>
-    <custom-button
-      class="font-medium"
-      block
-      :bg-color="widgetColor"
-      :text-color="textColor"
-      @click="startNewConversation"
-    >
-      {{ $t('START_NEW_CONVERSATION') }}
-    </custom-button>
-    <custom-button
-      v-if="showEmailTranscriptButton"
-      type="clear"
-      class="font-normal"
-      @click="sendTranscript"
-    >
-      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
-    </custom-button>
-  </div>
-</template>
-
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -59,12 +17,6 @@ export default {
     FooterReplyTo,
   },
   mixins: [routerMixin],
-  props: {
-    msg: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       inReplyTo: null,
@@ -161,6 +113,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <footer
+    v-if="!hideReplyBox"
+    class="relative z-50 mb-1"
+    :class="{
+      'rounded-lg': !isWidgetStyleFlat,
+      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
+        hasReplyTo,
+    }"
+  >
+    <FooterReplyTo
+      v-if="hasReplyTo"
+      :in-reply-to="inReplyTo"
+      @dismiss="inReplyTo = null"
+    />
+    <ChatInputWrap
+      class="shadow-sm"
+      :on-send-message="handleSendMessage"
+      :on-send-attachment="handleSendAttachment"
+    />
+  </footer>
+  <div v-else>
+    <CustomButton
+      class="font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      @click="startNewConversation"
+    >
+      {{ $t('START_NEW_CONVERSATION') }}
+    </CustomButton>
+    <CustomButton
+      v-if="showEmailTranscriptButton"
+      type="clear"
+      class="font-normal"
+      @click="sendTranscript"
+    >
+      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
+    </CustomButton>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 079f337aa..5083f6ef5 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -1,52 +1,4 @@
-<template>
-  <header
-    class="flex justify-between p-5 w-full"
-    :class="$dm('bg-white', 'dark:bg-slate-900')"
-  >
-    <div class="flex items-center">
-      <button
-        v-if="showBackButton"
-        class="-ml-3 px-2"
-        @click="onBackButtonClick"
-      >
-        <fluent-icon
-          icon="chevron-left"
-          size="24"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
-        />
-      </button>
-      <img
-        v-if="avatarUrl"
-        class="h-8 w-8 rounded-full mr-3"
-        :src="avatarUrl"
-        alt="avatar"
-      />
-      <div>
-        <div
-          class="font-medium text-base leading-4 flex items-center"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
-        >
-          <span v-dompurify-html="title" class="mr-1" />
-          <div
-            :class="`h-2 w-2 rounded-full
-              ${isOnline ? 'bg-green-500' : 'hidden'}`"
-          />
-        </div>
-        <div
-          class="text-xs mt-1 leading-3"
-          :class="$dm('text-black-700', 'dark:text-slate-400')"
-        >
-          {{ replyWaitMessage }}
-        </div>
-      </div>
-    </div>
-    <header-actions :show-popout-button="showPopoutButton" />
-  </header>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
-
 import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -84,9 +36,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -104,3 +53,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="flex justify-between w-full p-5"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
+    <div class="flex items-center">
+      <button
+        v-if="showBackButton"
+        class="px-2 -ml-3"
+        @click="onBackButtonClick"
+      >
+        <FluentIcon
+          icon="chevron-left"
+          size="24"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        />
+      </button>
+      <img
+        v-if="avatarUrl"
+        class="w-8 h-8 mr-3 rounded-full"
+        :src="avatarUrl"
+        alt="avatar"
+      />
+      <div>
+        <div
+          class="flex items-center text-base font-medium leading-4"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        >
+          <span v-dompurify-html="title" class="mr-1" />
+          <div
+            :class="`h-2 w-2 rounded-full
+              ${isOnline ? 'bg-green-500' : 'hidden'}`"
+          />
+        </div>
+        <div
+          class="mt-1 text-xs leading-3"
+          :class="$dm('text-black-700', 'dark:text-slate-400')"
+        >
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+    </div>
+    <HeaderActions :show-popout-button="showPopoutButton" />
+  </header>
+</template>
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 144c90700..864985fde 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,35 +1,3 @@
-<template>
-  <header
-    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
-  >
-    <div
-      class="flex items-start"
-      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
-    >
-      <img
-        v-if="avatarUrl"
-        class="h-12 rounded-full"
-        :src="avatarUrl"
-        alt="Avatar"
-      />
-      <header-actions
-        :show-popout-button="showPopoutButton"
-        :show-end-conversation-button="false"
-      />
-    </div>
-    <h2
-      v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="$dm('text-slate-900', 'dark:text-slate-50')"
-    />
-    <p
-      v-dompurify-html="introBody"
-      class="text-base leading-normal"
-      :class="$dm('text-slate-700', 'dark:text-slate-200')"
-    />
-  </header>
-</template>
-
 <script>
 import HeaderActions from './HeaderActions.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -60,3 +28,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
+  >
+    <div
+      class="flex items-start"
+      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
+    >
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
+      <HeaderActions
+        :show-popout-button="showPopoutButton"
+        :show-end-conversation-button="false"
+      />
+    </div>
+    <h2
+      v-dompurify-html="introHeading"
+      class="mt-4 text-2xl mb-1.5 font-medium"
+      :class="$dm('text-slate-900', 'dark:text-slate-50')"
+    />
+    <p
+      v-dompurify-html="introBody"
+      class="text-base leading-normal"
+      :class="$dm('text-slate-700', 'dark:text-slate-200')"
+    />
+  </header>
+</template>
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index f285a64d5..c68ec3fdf 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="chat-message--input is-focused"
-    :class="$dm('bg-white ', 'dark:bg-slate-600')"
-    @keydown.esc="hideEmojiPicker"
-  >
-    <resizable-text-area
-      id="chat-input"
-      ref="chatInput"
-      v-model="userInput"
-      :rows="1"
-      :aria-label="$t('CHAT_PLACEHOLDER')"
-      :placeholder="$t('CHAT_PLACEHOLDER')"
-      class="form-input user-message-input is-focused"
-      :class="inputColor"
-      @typing-off="onTypingOff"
-      @typing-on="onTypingOn"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-    <div class="button-wrap">
-      <chat-attachment-button
-        v-if="showAttachment"
-        :class="$dm('text-black-900', 'dark:text-slate-100')"
-        :on-attach="onSendAttachment"
-      />
-      <button
-        v-if="hasEmojiPickerEnabled"
-        class="flex items-center justify-center icon-button"
-        aria-label="Emoji picker"
-        @click="toggleEmojiPicker"
-      >
-        <fluent-icon icon="emoji" :class="emojiIconColor" />
-      </button>
-      <emoji-input
-        v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
-        :on-click="emojiOnClick"
-        @keydown.esc="hideEmojiPicker"
-      />
-      <chat-send-button
-        v-if="showSendButton"
-        :on-click="handleButtonClick"
-        :color="widgetColor"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -174,6 +125,55 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="chat-message--input is-focused"
+    :class="$dm('bg-white ', 'dark:bg-slate-600')"
+    @keydown.esc="hideEmojiPicker"
+  >
+    <ResizableTextArea
+      id="chat-input"
+      ref="chatInput"
+      v-model="userInput"
+      :rows="1"
+      :aria-label="$t('CHAT_PLACEHOLDER')"
+      :placeholder="$t('CHAT_PLACEHOLDER')"
+      class="form-input user-message-input is-focused"
+      :class="inputColor"
+      @typingOff="onTypingOff"
+      @typingOn="onTypingOn"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div class="button-wrap">
+      <ChatAttachmentButton
+        v-if="showAttachment"
+        :class="$dm('text-black-900', 'dark:text-slate-100')"
+        :on-attach="onSendAttachment"
+      />
+      <button
+        v-if="hasEmojiPickerEnabled"
+        class="flex items-center justify-center icon-button"
+        :aria-label="$t('EMOJI.ARIA_LABEL')"
+        @click="toggleEmojiPicker"
+      >
+        <FluentIcon icon="emoji" :class="emojiIconColor" />
+      </button>
+      <EmojiInput
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+        @keydown.esc="hideEmojiPicker"
+      />
+      <ChatSendButton
+        v-if="showSendButton"
+        :on-click="handleButtonClick"
+        :color="widgetColor"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/ChatMessage.vue b/app/javascript/widget/components/ChatMessage.vue
index c3a586f23..2b1d9d6ec 100755
--- a/app/javascript/widget/components/ChatMessage.vue
+++ b/app/javascript/widget/components/ChatMessage.vue
@@ -1,18 +1,3 @@
-<template>
-  <UserMessage
-    v-if="isUserMessage"
-    :id="`cwmsg-${message.id}`"
-    :message="message"
-    :reply-to="replyTo"
-  />
-  <AgentMessage
-    v-else
-    :id="`cwmsg-${message.id}`"
-    :message="message"
-    :reply-to="replyTo"
-  />
-</template>
-
 <script>
 import AgentMessage from 'widget/components/AgentMessage.vue';
 import UserMessage from 'widget/components/UserMessage.vue';
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <UserMessage
+    v-if="isUserMessage"
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+  <AgentMessage
+    v-else
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+</template>
+
 <style scoped lang="scss">
 .message-wrap {
   display: flex;
diff --git a/app/javascript/widget/components/ChatSendButton.vue b/app/javascript/widget/components/ChatSendButton.vue
index 8a8819962..c6db0fcf5 100755
--- a/app/javascript/widget/components/ChatSendButton.vue
+++ b/app/javascript/widget/components/ChatSendButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <button
-    type="submit"
-    :disabled="disabled"
-    class="icon-button flex items-center justify-center ml-1"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
-    <spinner v-else size="small" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -39,3 +27,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    type="submit"
+    :disabled="disabled"
+    class="icon-button flex items-center justify-center ml-1"
+    @click="onClick"
+  >
+    <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
+    <Spinner v-else size="small" />
+  </button>
+</template>
diff --git a/app/javascript/widget/components/ContinueChatButton.vue b/app/javascript/widget/components/ContinueChatButton.vue
index 144bcc37f..509d2c168 100644
--- a/app/javascript/widget/components/ContinueChatButton.vue
+++ b/app/javascript/widget/components/ContinueChatButton.vue
@@ -1,3 +1,25 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: { FluentIcon },
+  props: {
+    title: {
+      type: String,
+      default: 'Continue your chat',
+    },
+    content: {
+      type: String,
+      default: 'Chat with us',
+    },
+    unreadCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+
 <template>
   <button
     type="button"
@@ -7,7 +29,7 @@
     <div
       class="w-10 h-10 rounded-md bg-slate-75 dark:bg-slate-700 text-lg flex items-center justify-center flex-shrink-0"
     >
-      <fluent-icon
+      <FluentIcon
         icon="chat"
         size="16"
         class="text-slate-600 dark:text-slate-400"
@@ -33,29 +55,7 @@
       </p>
     </div>
     <div class="w-8 h-10 flex items-center justify-center">
-      <fluent-icon icon="chevron-right" />
+      <FluentIcon icon="chevron-right" />
     </div>
   </button>
 </template>
-
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    title: {
-      type: String,
-      default: 'Continue your chat',
-    },
-    content: {
-      type: String,
-      default: 'Chat with us',
-    },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index c0fa424ba..4213a0a57 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="conversation--container" :class="colorSchemeClass">
-    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
-      <div v-if="isFetchingList" class="message--loader">
-        <spinner />
-      </div>
-      <div
-        v-for="groupedMessage in groupedMessages"
-        :key="groupedMessage.date"
-        class="messages-wrap"
-      >
-        <date-separator :date="groupedMessage.date" />
-        <chat-message
-          v-for="message in groupedMessage.messages"
-          :key="message.id"
-          :message="message"
-        />
-      </div>
-      <agent-typing-bubble v-if="showStatusIndicator" />
-    </div>
-  </div>
-</template>
-
 <script>
 import ChatMessage from 'widget/components/ChatMessage.vue';
 import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
@@ -118,6 +95,29 @@ export default {
 };
 </script>
 
+<template>
+  <div class="conversation--container" :class="colorSchemeClass">
+    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
+      <div v-if="isFetchingList" class="message--loader">
+        <Spinner />
+      </div>
+      <div
+        v-for="groupedMessage in groupedMessages"
+        :key="groupedMessage.date"
+        class="messages-wrap"
+      >
+        <DateSeparator :date="groupedMessage.date" />
+        <ChatMessage
+          v-for="message in groupedMessage.messages"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
+      <AgentTypingBubble v-if="showStatusIndicator" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/DragWrapper.vue b/app/javascript/widget/components/DragWrapper.vue
index 873622a7c..85b8573d1 100644
--- a/app/javascript/widget/components/DragWrapper.vue
+++ b/app/javascript/widget/components/DragWrapper.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    :style="{ transform: `translateX(${dragDistance}px)` }"
-    class="will-change-transform"
-    @touchstart="handleTouchStart"
-    @touchmove="handleTouchMove"
-    @touchend="resetPosition"
-  >
-    <slot />
-  </div>
-</template>
-
 <script>
 export default {
   name: 'DragWrapper',
@@ -59,3 +47,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    :style="{ transform: `translateX(${dragDistance}px)` }"
+    class="will-change-transform"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+    @touchend="resetPosition"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 44879ad06..faba119f0 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="file flex flex-row items-center p-3 cursor-pointer">
-    <div class="icon-wrap" :style="{ color: textColor }">
-      <fluent-icon icon="document" size="28" />
-    </div>
-    <div class="meta">
-      <div class="title" :class="titleColor" :style="{ color: textColor }">
-        {{ title }}
-      </div>
-      <div class="link-wrap mb-1">
-        <a
-          class="download"
-          rel="noreferrer noopener nofollow"
-          target="_blank"
-          :style="{ color: textColor }"
-          :href="url"
-        >
-          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -82,6 +58,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="file flex flex-row items-center p-3 cursor-pointer">
+    <div class="icon-wrap" :style="{ color: textColor }">
+      <FluentIcon icon="document" size="28" />
+    </div>
+    <div class="meta">
+      <div class="title" :class="titleColor" :style="{ color: textColor }">
+        {{ title }}
+      </div>
+      <div class="link-wrap mb-1">
+        <a
+          class="download"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          :style="{ color: textColor }"
+          :href="url"
+        >
+          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/FooterReplyTo.vue b/app/javascript/widget/components/FooterReplyTo.vue
index e0124196d..f16870cda 100644
--- a/app/javascript/widget/components/FooterReplyTo.vue
+++ b/app/javascript/widget/components/FooterReplyTo.vue
@@ -1,20 +1,3 @@
-<template>
-  <div
-    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
-  >
-    <div class="items-center flex-grow truncate">
-      <strong>Replying to:</strong>
-      {{ inReplyTo.content || replyToAttachment }}
-    </div>
-    <button
-      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
-      @click="$emit('dismiss')"
-    >
-      <fluent-icon icon="dismiss" size="12" />
-    </button>
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -39,3 +22,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
+  >
+    <div class="items-center flex-grow truncate">
+      <strong>{{ $t('FOOTER_REPLY_TO.REPLY_TO') }}</strong>
+      {{ inReplyTo.content || replyToAttachment }}
+    </div>
+    <button
+      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
+      @click="$emit('dismiss')"
+    >
+      <FluentIcon icon="dismiss" size="12" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/Form/Input.vue b/app/javascript/widget/components/Form/Input.vue
index ffa9edef2..3c1c7a81c 100644
--- a/app/javascript/widget/components/Form/Input.vue
+++ b/app/javascript/widget/components/Form/Input.vue
@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <input
-      :type="type"
-      class="border rounded w-full py-2 px-3 leading-tight outline-none"
-      :class="inputHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-    <div
-      v-if="!error && helpText"
-      class="text-red-400 mt-2 text-xs leading-3 font-medium"
-    >
-      {{ helpText }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -84,3 +56,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <input
+      :type="type"
+      class="border rounded w-full py-2 px-3 leading-tight outline-none"
+      :class="inputHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
+      {{ error }}
+    </div>
+    <div
+      v-if="!error && helpText"
+      class="text-red-400 mt-2 text-xs leading-3 font-medium"
+    >
+      {{ helpText }}
+    </div>
+  </label>
+</template>
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index c7fafa916..68ea3f8cb 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -1,90 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative mt-2">
-    <div
-      class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
-      :class="inputHasError"
-    >
-      <div
-        class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
-        :class="dropdownClass"
-        @click="toggleCountryDropdown"
-      >
-        <h5 v-if="activeCountry.emoji" class="text-xl mb-0">
-          {{ activeCountry.emoji }}
-        </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="py-2 pr-0 pl-2 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        :value="phoneNumber"
-        type="phoneInput"
-        class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
-        name="phoneNumber"
-        :placeholder="placeholder"
-        :class="inputLightAndDarkModeColor"
-        @input="onChange"
-        @blur="context.blurHandler"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="closeDropdown"
-      :class="dropdownBackgroundClass"
-      class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
-      @keydown.up="moveSelectionUp"
-      @keydown.down="moveSelectionDown"
-      @keydown.enter="onSelect"
-    >
-      <div class="sticky top-0" :class="dropdownBackgroundClass">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search country"
-          class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
-        />
-      </div>
-      <div
-        v-for="(country, index) in items"
-        ref="dropdownItem"
-        :key="index"
-        class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
-        :class="[
-          dropdownItemClass,
-          country.id === activeCountryCode ? activeDropdownItemClass : '',
-          index === selectedIndex ? focusedDropdownItemClass : '',
-        ]"
-        @click="onSelectCountry(country)"
-      >
-        <span v-if="country.emoji" class="mr-2 text-xl">{{
-          country.emoji
-        }}</span>
-        <span class="truncate text-sm leading-5">
-          {{ country.name }}
-        </span>
-        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
-      </div>
-      <div v-if="items.length === 0">
-        <span
-          class="text-sm mt-4 justify-center text-center flex"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
-        >
-          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -307,6 +220,93 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative mt-2 phone-input--wrap">
+    <div
+      class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
+      :class="inputHasError"
+    >
+      <div
+        class="flex items-center justify-between h-full px-2 py-2 cursor-pointer country-emoji--wrap"
+        :class="dropdownClass"
+        @click="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
+          {{ activeCountry.emoji }}
+        </h5>
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="py-2 pl-2 pr-0 text-base"
+        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="phoneInput"
+        class="w-full h-full py-2 pl-2 pr-3 leading-tight border-0 rounded-r outline-none"
+        name="phoneNumber"
+        :placeholder="placeholder"
+        :class="inputLightAndDarkModeColor"
+        @input="onChange"
+        @blur="context.blurHandler"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="closeDropdown"
+      :class="dropdownBackgroundClass"
+      class="absolute z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded shadow-lg country-dropdown top-12"
+      @keydown.up="moveSelectionUp"
+      @keydown.down="moveSelectionDown"
+      @keydown.enter="onSelect"
+    >
+      <div class="sticky top-0" :class="dropdownBackgroundClass">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
+          class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
+          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+        />
+      </div>
+      <div
+        v-for="(country, index) in items"
+        :key="index"
+        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
+        :class="[
+          dropdownItemClass,
+          country.id === activeCountryCode ? activeDropdownItemClass : '',
+          index === selectedIndex ? focusedDropdownItemClass : '',
+        ]"
+        @click="onSelectCountry(country)"
+      >
+        <span v-if="country.emoji" class="mr-2 text-xl">{{
+          country.emoji
+        }}</span>
+        <span class="text-sm leading-5 truncate">
+          {{ country.name }}
+        </span>
+        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="items.length === 0">
+        <span
+          class="flex justify-center mt-4 text-sm text-center"
+          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        >
+          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .phone-input--wrap {
diff --git a/app/javascript/widget/components/Form/TextArea.vue b/app/javascript/widget/components/Form/TextArea.vue
index 0b9255e75..3532b09f0 100644
--- a/app/javascript/widget/components/Form/TextArea.vue
+++ b/app/javascript/widget/components/Form/TextArea.vue
@@ -1,24 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="isTextAreaHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -28,10 +7,6 @@ export default {
       type: String,
       default: '',
     },
-    type: {
-      type: String,
-      default: 'text',
-    },
     placeholder: {
       type: String,
       default: '',
@@ -73,6 +48,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium leading-3"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      :class="isTextAreaHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="mt-2 text-xs font-medium leading-3 text-red-400">
+      {{ error }}
+    </div>
+  </label>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;
diff --git a/app/javascript/widget/components/GroupedAvatars.vue b/app/javascript/widget/components/GroupedAvatars.vue
index 0841214d6..bb6906e68 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="flex">
-    <span
-      v-for="(user, index) in users"
-      :key="user.id"
-      :class="`${
-        index ? '-ml-4' : ''
-      } inline-block rounded-full text-white shadow-solid`"
-    >
-      <thumbnail
-        size="36px"
-        :username="user.name"
-        :src="user.avatar"
-        has-border
-      />
-    </span>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -31,3 +12,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex">
+    <span
+      v-for="(user, index) in users"
+      :key="user.id"
+      :class="`${
+        index ? '-ml-4' : ''
+      } inline-block rounded-full text-white shadow-solid`"
+    >
+      <Thumbnail
+        size="36px"
+        :username="user.name"
+        :src="user.avatar"
+        has-border
+      />
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 1fa4d9f39..df8b5fdbf 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -1,47 +1,3 @@
-<template>
-  <div v-if="showHeaderActions" class="actions flex items-center">
-    <button
-      v-if="
-        canLeaveConversation &&
-        hasEndConversationEnabled &&
-        showEndConversationButton
-      "
-      class="button transparent compact"
-      :title="$t('END_CONVERSATION')"
-      @click="resolveConversation"
-    >
-      <fluent-icon
-        icon="sign-out"
-        size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-    <button
-      v-if="showPopoutButton"
-      class="button transparent compact new-window--button"
-      @click="popoutWindow"
-    >
-      <fluent-icon
-        icon="open"
-        size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-    <button
-      class="button transparent compact close-button"
-      :class="{
-        'rn-close-button': isRNWebView,
-      }"
-      @click="closeWindow"
-    >
-      <fluent-icon
-        icon="dismiss"
-        size="24"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
@@ -120,6 +76,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="showHeaderActions" class="actions flex items-center">
+    <button
+      v-if="
+        canLeaveConversation &&
+        hasEndConversationEnabled &&
+        showEndConversationButton
+      "
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <FluentIcon
+        icon="sign-out"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+    <button
+      v-if="showPopoutButton"
+      class="button transparent compact new-window--button"
+      @click="popoutWindow"
+    >
+      <FluentIcon
+        icon="open"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+    <button
+      class="button transparent compact close-button"
+      :class="{
+        'rn-close-button': isRNWebView,
+      }"
+      @click="closeWindow"
+    >
+      <FluentIcon
+        icon="dismiss"
+        size="24"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ImageBubble.vue b/app/javascript/widget/components/ImageBubble.vue
index 8bf078400..08bca3464 100644
--- a/app/javascript/widget/components/ImageBubble.vue
+++ b/app/javascript/widget/components/ImageBubble.vue
@@ -1,3 +1,21 @@
+<script>
+export default {
+  props: {
+    url: { type: String, default: '' },
+    thumb: { type: String, default: '' },
+    readableTime: { type: String, default: '' },
+  },
+  methods: {
+    onImgError() {
+      this.$emit('error');
+    },
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
 <template>
   <a
     :href="url"
@@ -17,23 +35,6 @@
   </a>
 </template>
 
-<script>
-export default {
-  props: {
-    url: { type: String, default: '' },
-    thumb: { type: String, default: '' },
-    readableTime: { type: String, default: '' },
-  },
-  methods: {
-    onImgError() {
-      this.$emit('error');
-    },
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/MessageReplyButton.vue b/app/javascript/widget/components/MessageReplyButton.vue
index 4f8bf4a25..16520f1e8 100644
--- a/app/javascript/widget/components/MessageReplyButton.vue
+++ b/app/javascript/widget/components/MessageReplyButton.vue
@@ -1,12 +1,3 @@
-<template>
-  <button
-    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
-    @click="$emit('click')"
-  >
-    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
-  </button>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -15,3 +6,12 @@ export default {
   components: { FluentIcon },
 };
 </script>
+
+<template>
+  <button
+    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
+    @click="$emit('click')"
+  >
+    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
+  </button>
+</template>
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 3ff597c67..9b8da3798 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -1,66 +1,3 @@
-<template>
-  <FormulateForm
-    v-model="formValues"
-    class="flex flex-col flex-1 p-6 overflow-y-auto"
-    @submit="onSubmit"
-  >
-    <div
-      v-if="shouldShowHeaderMessage"
-      v-dompurify-html="formatMessage(headerMessage, false)"
-      class="mb-4 text-sm leading-5 pre-chat-header-message"
-      :class="$dm('text-black-800', 'dark:text-slate-50')"
-    />
-    <FormulateInput
-      v-for="item in enabledPreChatFields"
-      :key="item.name"
-      :name="item.name"
-      :type="item.type"
-      :label="getLabel(item)"
-      :placeholder="getPlaceHolder(item)"
-      :validation="getValidation(item)"
-      :options="getOptions(item)"
-      :label-class="context => labelClass(context)"
-      :input-class="context => inputClass(context)"
-      :validation-messages="{
-        startsWithPlus: $t(
-          'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
-        ),
-        isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
-        email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
-        required: $t('PRE_CHAT_FORM.REQUIRED'),
-        matches: item.regex_cue
-          ? item.regex_cue
-          : $t('PRE_CHAT_FORM.REGEX_ERROR'),
-      }"
-      :has-error-in-phone-input="hasErrorInPhoneInput"
-    />
-    <FormulateInput
-      v-if="!hasActiveCampaign"
-      name="message"
-      type="textarea"
-      :label-class="context => labelClass(context)"
-      :input-class="context => inputClass(context)"
-      :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
-      :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
-      validation="required"
-      :validation-messages="{
-        required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
-      }"
-    />
-
-    <custom-button
-      class="mt-2 mb-5 font-medium"
-      block
-      :bg-color="widgetColor"
-      :text-color="textColor"
-      :disabled="isCreating"
-    >
-      <spinner v-if="isCreating" class="p-0" />
-      {{ $t('START_CONVERSATION') }}
-    </custom-button>
-  </FormulateForm>
-</template>
-
 <script>
 import CustomButton from 'shared/components/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -316,6 +253,70 @@ export default {
   },
 };
 </script>
+
+<template>
+  <FormulateForm
+    v-model="formValues"
+    class="flex flex-col flex-1 p-6 overflow-y-auto"
+    @submit="onSubmit"
+  >
+    <div
+      v-if="shouldShowHeaderMessage"
+      v-dompurify-html="formatMessage(headerMessage, false)"
+      class="mb-4 text-sm leading-5 pre-chat-header-message"
+      :class="$dm('text-black-800', 'dark:text-slate-50')"
+    />
+    <FormulateInput
+      v-for="item in enabledPreChatFields"
+      :key="item.name"
+      :name="item.name"
+      :type="item.type"
+      :label="getLabel(item)"
+      :placeholder="getPlaceHolder(item)"
+      :validation="getValidation(item)"
+      :options="getOptions(item)"
+      :label-class="context => labelClass(context)"
+      :input-class="context => inputClass(context)"
+      :validation-messages="{
+        startsWithPlus: $t(
+          'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
+        ),
+        isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
+        email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
+        required: $t('PRE_CHAT_FORM.REQUIRED'),
+        matches: item.regex_cue
+          ? item.regex_cue
+          : $t('PRE_CHAT_FORM.REGEX_ERROR'),
+      }"
+      :has-error-in-phone-input="hasErrorInPhoneInput"
+    />
+    <FormulateInput
+      v-if="!hasActiveCampaign"
+      name="message"
+      type="textarea"
+      :label-class="context => labelClass(context)"
+      :input-class="context => inputClass(context)"
+      :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
+      :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
+      validation="required"
+      :validation-messages="{
+        required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
+      }"
+    />
+
+    <CustomButton
+      class="mt-2 mb-5 font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      :disabled="isCreating"
+    >
+      <Spinner v-if="isCreating" class="p-0" />
+      {{ $t('START_CONVERSATION') }}
+    </CustomButton>
+  </FormulateForm>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 ::v-deep {
diff --git a/app/javascript/widget/components/ReplyToChip.vue b/app/javascript/widget/components/ReplyToChip.vue
index 919f1bcfe..ac2d255b1 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/app/javascript/widget/components/ReplyToChip.vue
@@ -1,15 +1,3 @@
-<template>
-  <button
-    class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
-    @click="navigateTo(replyTo.id)"
-  >
-    <fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
-    <div class="truncate max-w-[8rem]">
-      {{ replyTo.content || replyToAttachment }}
-    </div>
-  </button>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -58,3 +46,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
+    @click="navigateTo(replyTo.id)"
+  >
+    <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <div class="truncate max-w-[8rem]">
+      {{ replyTo.content || replyToAttachment }}
+    </div>
+  </button>
+</template>
diff --git a/app/javascript/widget/components/SearchArticle.vue b/app/javascript/widget/components/SearchArticle.vue
index df38af763..0f8c2c28b 100644
--- a/app/javascript/widget/components/SearchArticle.vue
+++ b/app/javascript/widget/components/SearchArticle.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
-      <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
-      >
-        ⌘K
-      </kbd>
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 export default {
@@ -49,3 +23,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center h-8 px-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 px-2 pl-6 pr-1 m-0 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
+      <kbd
+        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
+      >
+        {{ '⌘K' }}
+      </kbd>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 984dfbe3f..18aaaccac 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
-    <div class="flex items-center justify-between">
-      <div class="  ">
-        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
-          {{
-            isOnline
-              ? $t('TEAM_AVAILABILITY.ONLINE')
-              : $t('TEAM_AVAILABILITY.OFFLINE')
-          }}
-        </div>
-        <div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
-          {{ replyWaitMessage }}
-        </div>
-      </div>
-      <available-agents v-if="isOnline" :agents="availableAgents" />
-    </div>
-    <button
-      class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
-      :style="{ color: widgetColor }"
-      @click="startConversation"
-    >
-      <span class="pr-2 text-sm">
-        {{
-          hasConversation
-            ? $t('CONTINUE_CONVERSATION')
-            : $t('START_CONVERSATION')
-        }}
-      </span>
-      <fluent-icon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -59,10 +25,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
   },
 
   computed: {
@@ -84,7 +46,7 @@ export default {
   },
   methods: {
     startConversation() {
-      this.$emit('start-conversation');
+      this.$emit('startConversation');
       if (!this.hasConversation) {
         IFrameHelper.sendMessage({
           event: 'onEvent',
@@ -96,3 +58,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+    <div class="flex items-center justify-between">
+      <div class="">
+        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
+          {{
+            isOnline
+              ? $t('TEAM_AVAILABILITY.ONLINE')
+              : $t('TEAM_AVAILABILITY.OFFLINE')
+          }}
+        </div>
+        <div class="mt-1 text-sm text-slate-500 dark:text-slate-100">
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
+    </div>
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
+      :style="{ color: widgetColor }"
+      @click="startConversation"
+    >
+      <span class="pr-2 text-sm">
+        {{
+          hasConversation
+            ? $t('CONTINUE_CONVERSATION')
+            : $t('START_CONVERSATION')
+        }}
+      </span>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index cefd0cc99..b90ad9011 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="chat-bubble-wrap">
-    <button
-      class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-50')"
-      @click="onClickMessage"
-    >
-      <div v-if="showSender" class="row--agent-block">
-        <thumbnail
-          :src="avatarUrl"
-          size="20px"
-          :username="agentName"
-          :status="availabilityStatus"
-        />
-        <span v-dompurify-html="agentName" class="agent--name" />
-        <span v-dompurify-html="companyName" class="company--name" />
-      </div>
-      <div
-        v-dompurify-html="formatMessage(message, false)"
-        class="message-content"
-      />
-    </button>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -105,6 +80,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <button
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-50')"
+      @click="onClickMessage"
+    >
+      <div v-if="showSender" class="row--agent-block">
+        <Thumbnail
+          :src="avatarUrl"
+          size="20px"
+          :username="agentName"
+          :status="availabilityStatus"
+        />
+        <span v-dompurify-html="agentName" class="agent--name" />
+        <span v-dompurify-html="companyName" class="company--name" />
+      </div>
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content"
+      />
+    </button>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .chat-bubble {
diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue
index 875457c42..54c3f4753 100644
--- a/app/javascript/widget/components/UnreadMessageList.vue
+++ b/app/javascript/widget/components/UnreadMessageList.vue
@@ -1,49 +1,3 @@
-<template>
-  <div class="unread-wrap">
-    <div class="close-unread-wrap">
-      <button class="button small close-unread-button" @click="closeFullView">
-        <span class="flex items-center">
-          <fluent-icon class="mr-1" icon="dismiss" size="12" />
-          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
-        </span>
-      </button>
-    </div>
-    <div class="unread-messages">
-      <unread-message
-        v-for="(message, index) in messages"
-        :key="message.id"
-        :message-type="message.messageType"
-        :message-id="message.id"
-        :show-sender="!index"
-        :sender="message.sender"
-        :message="getMessageContent(message)"
-        :campaign-id="message.campaignId"
-      />
-    </div>
-
-    <div class="open-read-view-wrap">
-      <button
-        v-if="unreadMessageCount"
-        class="button clear-button"
-        @click="openConversationView"
-      >
-        <span
-          class="flex items-center"
-          :class="{
-            'is-background-light': isBackgroundLighter,
-          }"
-          :style="{
-            color: widgetColor,
-          }"
-        >
-          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
-          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
-        </span>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import configMixin from '../mixins/configMixin';
@@ -98,6 +52,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="unread-wrap">
+    <div class="close-unread-wrap">
+      <button class="button small close-unread-button" @click="closeFullView">
+        <span class="flex items-center">
+          <FluentIcon class="mr-1" icon="dismiss" size="12" />
+          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+    <div class="unread-messages">
+      <UnreadMessage
+        v-for="(message, index) in messages"
+        :key="message.id"
+        :message-type="message.messageType"
+        :message-id="message.id"
+        :show-sender="!index"
+        :sender="message.sender"
+        :message="getMessageContent(message)"
+        :campaign-id="message.campaignId"
+      />
+    </div>
+
+    <div class="open-read-view-wrap">
+      <button
+        v-if="unreadMessageCount"
+        class="button clear-button"
+        @click="openConversationView"
+      >
+        <span
+          class="flex items-center"
+          :class="{
+            'is-background-light': isBackgroundLighter,
+          }"
+          :style="{
+            color: widgetColor,
+          }"
+        >
+          <FluentIcon class="mr-2" size="16" icon="arrow-right" />
+          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/widget/components/UserAvatar.vue b/app/javascript/widget/components/UserAvatar.vue
index c6120b3ce..f8a713723 100755
--- a/app/javascript/widget/components/UserAvatar.vue
+++ b/app/javascript/widget/components/UserAvatar.vue
@@ -1,6 +1,3 @@
-<template>
-  <div class="user-avatar" :class="size" :style="getBgImage" />
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -27,6 +24,10 @@ export default {
 };
 </script>
 
+<template>
+  <div class="user-avatar" :class="size" :style="getBgImage" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index f3f8c13b3..7f8528e08 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -1,81 +1,3 @@
-<template>
-  <div class="user-message-wrap group">
-    <div class="flex gap-1 user-message">
-      <div
-        class="message-wrap"
-        :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
-      >
-        <div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
-        </div>
-        <div class="flex justify-end gap-1">
-          <div class="flex flex-col justify-end">
-            <message-reply-button
-              v-if="!isInProgress && !isFailed"
-              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
-              @click="toggleReply"
-            />
-          </div>
-          <drag-wrapper direction="left" @dragged="toggleReply">
-            <user-message-bubble
-              v-if="showTextBubble"
-              :message="message.content"
-              :status="message.status"
-              :widget-color="widgetColor"
-            />
-            <div
-              v-if="hasAttachments"
-              class="chat-bubble has-attachment user"
-              :style="{ backgroundColor: widgetColor }"
-            >
-              <div
-                v-for="attachment in message.attachments"
-                :key="attachment.id"
-              >
-                <image-bubble
-                  v-if="attachment.file_type === 'image' && !hasImageError"
-                  :url="attachment.data_url"
-                  :thumb="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onImageLoadError"
-                />
-
-                <video-bubble
-                  v-if="attachment.file_type === 'video' && !hasVideoError"
-                  :url="attachment.data_url"
-                  :readable-time="readableTime"
-                  @error="onVideoLoadError"
-                />
-
-                <file-bubble
-                  v-else
-                  :url="attachment.data_url"
-                  :is-in-progress="isInProgress"
-                  :widget-color="widgetColor"
-                  is-user-bubble
-                />
-              </div>
-            </div>
-          </drag-wrapper>
-        </div>
-        <div
-          v-if="isFailed"
-          class="flex justify-end px-4 py-2 text-red-700 align-middle"
-        >
-          <button
-            v-if="!hasAttachments"
-            :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
-            class="inline-flex items-center justify-center ml-2"
-            @click="retrySendMessage"
-          >
-            <fluent-icon icon="arrow-clockwise" size="14" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
@@ -180,3 +102,81 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="user-message-wrap group">
+    <div class="flex gap-1 user-message">
+      <div
+        class="message-wrap"
+        :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
+      >
+        <div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
+          <ReplyToChip :reply-to="replyTo" />
+        </div>
+        <div class="flex justify-end gap-1">
+          <div class="flex flex-col justify-end">
+            <MessageReplyButton
+              v-if="!isInProgress && !isFailed"
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
+            />
+          </div>
+          <DragWrapper direction="left" @dragged="toggleReply">
+            <UserMessageBubble
+              v-if="showTextBubble"
+              :message="message.content"
+              :status="message.status"
+              :widget-color="widgetColor"
+            />
+            <div
+              v-if="hasAttachments"
+              class="chat-bubble has-attachment user"
+              :style="{ backgroundColor: widgetColor }"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <ImageBubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <VideoBubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <FileBubble
+                  v-else
+                  :url="attachment.data_url"
+                  :is-in-progress="isInProgress"
+                  :widget-color="widgetColor"
+                  is-user-bubble
+                />
+              </div>
+            </div>
+          </DragWrapper>
+        </div>
+        <div
+          v-if="isFailed"
+          class="flex justify-end px-4 py-2 text-red-700 align-middle"
+        >
+          <button
+            v-if="!hasAttachments"
+            :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
+            class="inline-flex items-center justify-center ml-2"
+            @click="retrySendMessage"
+          >
+            <FluentIcon icon="arrow-clockwise" size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index eed90865f..0887c0730 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -1,11 +1,3 @@
-<template>
-  <div
-    v-dompurify-html="formatMessage(message, false)"
-    class="chat-bubble user"
-    :style="{ background: widgetColor, color: textColor }"
-  />
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -18,10 +10,6 @@ export default {
       type: String,
       default: '',
     },
-    status: {
-      type: String,
-      default: '',
-    },
     widgetColor: {
       type: String,
       default: '',
@@ -35,6 +23,14 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-dompurify-html="formatMessage(message, false)"
+    class="chat-bubble user"
+    :style="{ background: widgetColor, color: textColor }"
+  />
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/VideoBubble.vue b/app/javascript/widget/components/VideoBubble.vue
index 0ba72d363..3196c6ff2 100644
--- a/app/javascript/widget/components/VideoBubble.vue
+++ b/app/javascript/widget/components/VideoBubble.vue
@@ -4,14 +4,15 @@ defineProps({
   readableTime: { type: String, default: '' },
 });
 
-const emits = defineEmits(['error']);
+const emit = defineEmits(['error']);
 
 const onVideoError = () => {
-  emits('error');
+  emit('error');
 };
 </script>
+
 <template>
-  <div class="block relative max-w-full">
+  <div class="relative block max-w-full">
     <video
       class="w-full max-w-[250px] h-auto"
       :src="url"
@@ -19,7 +20,7 @@ const onVideoError = () => {
       @error="onVideoError"
     />
     <span
-      class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+      class="absolute text-xs text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
     >
       {{ readableTime }}
     </span>
diff --git a/app/javascript/widget/components/dropdown/DropdownMenu.vue b/app/javascript/widget/components/dropdown/DropdownMenu.vue
index 85db8ad21..a8a34ec9a 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenu.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenu.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="relative">
-    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
-      <slot name="button" />
-    </button>
-
-    <!-- to close when clicked on space around it-->
-    <button
-      v-if="isOpen"
-      tabindex="-1"
-      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
-      @click="toggleMenu"
-    />
-
-    <!--dropdown menu-->
-    <transition
-      enter-active-class="transition-all duration-200 ease-out"
-      leave-active-class="transition-all duration-750 ease-in"
-      enter-class="opacity-0 scale-75"
-      enter-to-class="opacity-100 scale-100"
-      leave-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-75"
-    >
-      <div
-        v-if="isOpen"
-        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
-        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
-      >
-        <slot name="content" />
-      </div>
-    </transition>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -74,6 +40,41 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative">
+    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
+      <slot name="button" />
+    </button>
+
+    <!-- to close when clicked on space around it-->
+    <button
+      v-if="isOpen"
+      tabindex="-1"
+      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
+      @click="toggleMenu"
+    />
+
+    <!--dropdown menu-->
+    <transition
+      enter-active-class="transition-all duration-200 ease-out"
+      leave-active-class="transition-all duration-750 ease-in"
+      enter-class="opacity-0 scale-75"
+      enter-to-class="opacity-100 scale-100"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-75"
+    >
+      <div
+        v-if="isOpen"
+        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
+        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <slot name="content" />
+      </div>
+    </transition>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
index 5665b3ea8..ae1853317 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
@@ -1,14 +1,3 @@
-<template>
-  <button :class="['menu-item', itemClass]" @click="action">
-    <fluent-icon
-      v-if="icon"
-      :icon="iconName"
-      :size="iconSize"
-      :class="iconClass"
-    />
-    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
-  </button>
-</template>
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -51,6 +40,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button class="menu-item" :class="[itemClass]" @click="action">
+    <FluentIcon
+      v-if="icon"
+      :icon="iconName"
+      :size="iconSize"
+      :class="iconClass"
+    />
+    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
+  </button>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index dad629a16..338344154 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="w-full h-full bg-slate-25 dark:bg-slate-800"
-    :class="{ 'overflow-auto': isOnHomeView }"
-    @keydown.esc="closeWindow"
-  >
-    <div class="flex flex-col h-full relative">
-      <div
-        class="header-wrap sticky top-0 z-40 transition-all"
-        :class="{
-          expanded: !isHeaderCollapsed,
-          collapsed: isHeaderCollapsed,
-          'custom-header-shadow': isHeaderCollapsed,
-          ...opacityClass,
-        }"
-      >
-        <chat-header-expanded
-          v-if="!isHeaderCollapsed"
-          :intro-heading="channelConfig.welcomeTitle"
-          :intro-body="channelConfig.welcomeTagline"
-          :avatar-url="channelConfig.avatarUrl"
-          :show-popout-button="appConfig.showPopoutButton"
-        />
-        <chat-header
-          v-if="isHeaderCollapsed"
-          :title="channelConfig.websiteName"
-          :avatar-url="channelConfig.avatarUrl"
-          :show-popout-button="appConfig.showPopoutButton"
-          :available-agents="availableAgents"
-          :show-back-button="showBackButton"
-        />
-      </div>
-      <banner />
-      <router-view />
-
-      <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
-    </div>
-  </div>
-</template>
 <script>
 import Banner from '../Banner.vue';
 import Branding from 'shared/components/Branding.vue';
@@ -67,7 +28,6 @@ export default {
     ...mapGetters({
       appConfig: 'appConfig/getAppConfig',
       availableAgents: 'agent/availableAgents',
-      widgetColor: 'appConfig/getWidgetColor',
     }),
     portal() {
       return window.chatwootWebChannel.portal;
@@ -141,6 +101,46 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="w-full h-full bg-slate-25 dark:bg-slate-800"
+    :class="{ 'overflow-auto': isOnHomeView }"
+    @keydown.esc="closeWindow"
+  >
+    <div class="relative flex flex-col h-full">
+      <div
+        class="sticky top-0 z-40 transition-all header-wrap"
+        :class="{
+          expanded: !isHeaderCollapsed,
+          collapsed: isHeaderCollapsed,
+          'custom-header-shadow': isHeaderCollapsed,
+          ...opacityClass,
+        }"
+      >
+        <ChatHeaderExpanded
+          v-if="!isHeaderCollapsed"
+          :intro-heading="channelConfig.welcomeTitle"
+          :intro-body="channelConfig.welcomeTagline"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+        />
+        <ChatHeader
+          v-if="isHeaderCollapsed"
+          :title="channelConfig.websiteName"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+          :available-agents="availableAgents"
+          :show-back-button="showBackButton"
+        />
+      </div>
+      <Banner />
+      <router-view />
+
+      <Branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
 @import '~widget/assets/scss/mixins';
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index f022215bd..65d8209ba 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -1,32 +1,3 @@
-<template>
-  <div
-    v-if="!!items.length"
-    class="chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <div v-for="item in items" :key="item.link" class="article-item">
-      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title flex items-center text-black-900 font-medium">
-          <fluent-icon
-            icon="link"
-            class="mr-1"
-            :class="$dm('text-black-900', 'dark:text-slate-50')"
-          />
-          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
-            item.title
-          }}</span>
-        </span>
-        <span
-          class="description"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
-        >
-          {{ truncateMessage(item.description) }}
-        </span>
-      </a>
-    </div>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -46,6 +17,35 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!!items.length"
+    class="chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
+    <div v-for="item in items" :key="item.link" class="article-item">
+      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
+        <span class="title flex items-center text-black-900 font-medium">
+          <FluentIcon
+            icon="link"
+            class="mr-1"
+            :class="$dm('text-black-900', 'dark:text-slate-50')"
+          />
+          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
+            item.title
+          }}</span>
+        </span>
+        <span
+          class="description"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        >
+          {{ truncateMessage(item.description) }}
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index 8cf8bd84c..2d95569eb 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -1,34 +1,3 @@
-<template>
-  <div>
-    <form
-      v-if="!hasSubmitted"
-      class="email-input-group"
-      @submit.prevent="onSubmit"
-    >
-      <input
-        v-model.trim="email"
-        class="form-input"
-        :placeholder="$t('EMAIL_PLACEHOLDER')"
-        :class="inputHasError"
-        @input="v$.email.$touch"
-        @keydown.enter="onSubmit"
-      />
-      <button
-        class="button small"
-        :disabled="v$.email.$invalid"
-        :style="{
-          background: widgetColor,
-          borderColor: widgetColor,
-          color: textColor,
-        }"
-      >
-        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
-        <spinner v-else class="mx-2" />
-      </button>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
@@ -115,6 +84,37 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <form
+      v-if="!hasSubmitted"
+      class="email-input-group"
+      @submit.prevent="onSubmit"
+    >
+      <input
+        v-model.trim="email"
+        class="form-input"
+        :placeholder="$t('EMAIL_PLACEHOLDER')"
+        :class="inputHasError"
+        @input="v$.email.$touch"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="v$.email.$invalid"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <FluentIcon v-if="!isUpdating" icon="chevron-right" />
+        <Spinner v-else class="mx-2" />
+      </button>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/template/IntegrationCard.vue b/app/javascript/widget/components/template/IntegrationCard.vue
index 6ce22d26b..e96c81648 100644
--- a/app/javascript/widget/components/template/IntegrationCard.vue
+++ b/app/javascript/widget/components/template/IntegrationCard.vue
@@ -1,33 +1,3 @@
-<template>
-  <div>
-    <button
-      class="button join-call-button"
-      color-scheme="secondary"
-      :is-loading="isLoading"
-      :style="{
-        background: widgetColor,
-        borderColor: widgetColor,
-        color: textColor,
-      }"
-      @click="joinTheCall"
-    >
-      <fluent-icon icon="video-add" class="mr-2" />
-      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
-    </button>
-    <div v-if="dyteAuthToken" class="video-call--container">
-      <iframe
-        :src="meetingLink"
-        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
-      />
-      <button
-        class="button small join-call-button leave-room-button"
-        @click="leaveTheRoom"
-      >
-        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
-      </button>
-    </div>
-  </div>
-</template>
 <script>
 import IntegrationAPIClient from 'widget/api/integration';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -82,6 +52,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <button
+      class="button join-call-button"
+      color-scheme="secondary"
+      :is-loading="isLoading"
+      :style="{
+        background: widgetColor,
+        borderColor: widgetColor,
+        color: textColor,
+      }"
+      @click="joinTheCall"
+    >
+      <FluentIcon icon="video-add" class="mr-2" />
+      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="button small join-call-button leave-room-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json
index 83b442e51..33399e09b 100644
--- a/app/javascript/widget/i18n/locale/en.json
+++ b/app/javascript/widget/i18n/locale/en.json
@@ -70,7 +70,8 @@
         "REQUIRED_ERROR": "Phone Number is required",
         "DIAL_CODE_VALID_ERROR": "Please select a country code",
         "VALID_ERROR": "Please enter a valid phone number",
-        "DROPDOWN_EMPTY": "No results found"
+        "DROPDOWN_EMPTY": "No results found",
+        "DROPDOWN_SEARCH": "Search country"
       },
       "MESSAGE": {
         "LABEL": "Message",
@@ -91,7 +92,8 @@
   },
   "EMOJI": {
     "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "NOT_FOUND": "No emoji match your search",
+    "ARIA_LABEL": "Emoji picker"
   },
   "CSAT": {
     "TITLE": "Rate your conversation",
@@ -133,5 +135,8 @@
     "fallback": {
       "CONTENT": "has shared a url"
     }
+  },
+  "FOOTER_REPLY_TO": {
+    "REPLY_TO": "Replying to:"
   }
 }
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
index 4a5d587ba..c9525a706 100644
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="bg-white h-full">
-    <iframe-loader :url="link" />
-  </div>
-</template>
-
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
@@ -20,3 +14,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="bg-white h-full">
+    <IframeLoader :url="link" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Campaigns.vue b/app/javascript/widget/views/Campaigns.vue
index d28d0e4f4..42c639f95 100644
--- a/app/javascript/widget/views/Campaigns.vue
+++ b/app/javascript/widget/views/Campaigns.vue
@@ -1,7 +1,3 @@
-<template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -38,3 +34,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 35b4ab899..5695f9e65 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,38 +1,3 @@
-<template>
-  <div
-    class="z-50 rounded-md w-full flex flex-1 flex-col"
-    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
-  >
-    <div class="px-4 pt-4 w-full">
-      <team-availability
-        :available-agents="availableAgents"
-        :has-conversation="!!conversationSize"
-        :unread-count="unreadMessageCount"
-        @start-conversation="startConversation"
-      />
-    </div>
-    <div v-if="showArticles" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-hero
-          v-if="
-            !articleUiFlags.isFetching &&
-            !articleUiFlags.isError &&
-            popularArticles.length
-          "
-          :articles="popularArticles"
-          @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
-        />
-      </div>
-    </div>
-    <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-card-skeleton-loader />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import TeamAvailability from 'widget/components/TeamAvailability.vue';
 import ArticleHero from 'widget/components/ArticleHero.vue';
@@ -51,20 +16,9 @@ export default {
     ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, routerMixin, darkModeMixin],
-  props: {
-    hasFetched: {
-      type: Boolean,
-      default: false,
-    },
-    isCampaignViewClicked: {
-      type: Boolean,
-      default: false,
-    },
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
-      activeCampaign: 'campaign/getActiveCampaign',
       conversationSize: 'conversation/getConversationSize',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       popularArticles: 'article/popularArticles',
@@ -134,3 +88,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="z-50 flex flex-col flex-1 w-full rounded-md"
+    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
+  >
+    <div class="w-full px-4 pt-4">
+      <TeamAvailability
+        :available-agents="availableAgents"
+        :has-conversation="!!conversationSize"
+        :unread-count="unreadMessageCount"
+        @startConversation="startConversation"
+      />
+    </div>
+    <div v-if="showArticles" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+        <ArticleHero
+          v-if="
+            !articleUiFlags.isFetching &&
+            !articleUiFlags.isError &&
+            popularArticles.length
+          "
+          :articles="popularArticles"
+          @view="openArticleInArticleViewer"
+          @viewAll="viewAllArticles"
+        />
+      </div>
+    </div>
+    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+        <ArticleCardSkeletonLoader />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Messages.vue b/app/javascript/widget/views/Messages.vue
index ce473b521..bbfb24129 100644
--- a/app/javascript/widget/views/Messages.vue
+++ b/app/javascript/widget/views/Messages.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
-  >
-    <div class="flex flex-1 overflow-auto">
-      <conversation-wrap :grouped-messages="groupedMessages" />
-    </div>
-    <chat-footer class="px-5" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -26,3 +16,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
+  >
+    <div class="flex flex-1 overflow-auto">
+      <ConversationWrap :grouped-messages="groupedMessages" />
+    </div>
+    <ChatFooter class="px-5" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue
index 254782db7..cb122a2f3 100644
--- a/app/javascript/widget/views/PreChatForm.vue
+++ b/app/javascript/widget/views/PreChatForm.vue
@@ -1,8 +1,3 @@
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
-  </div>
-</template>
 <script>
 import PreChatForm from '../components/PreChat/Form.vue';
 import configMixin from '../mixins/configMixin';
@@ -62,3 +57,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/UnreadMessages.vue b/app/javascript/widget/views/UnreadMessages.vue
index c37b0763c..fbf7fd48c 100644
--- a/app/javascript/widget/views/UnreadMessages.vue
+++ b/app/javascript/widget/views/UnreadMessages.vue
@@ -1,7 +1,3 @@
-<template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -26,3 +22,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>