diff --git a/.env.example b/.env.example
index befcde46388d0..b7ba0920d0dda 100644
--- a/.env.example
+++ b/.env.example
@@ -257,3 +257,4 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
+
diff --git a/.eslintrc.js b/.eslintrc.js
index 18162ee762a06..f3d050ab31223 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/.storybook/preview.js b/.storybook/preview.js
index 3f98c2cd87d36..7c046d51a3881 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -2,7 +2,6 @@ import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -14,7 +13,6 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 import '../app/javascript/dashboard/assets/scss/storybook.scss';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -32,7 +30,7 @@ addDecorator(() => ({
   template: '<story/>',
   i18n: i18nConfig,
   store,
-  beforeCreate: function() {
+  beforeCreate: function () {
     this.$root._i18n = this.$i18n;
   },
 }));
diff --git a/Gemfile b/Gemfile
index f690e6876d61f..e377866f7f5a3 100644
--- a/Gemfile
+++ b/Gemfile
@@ -111,9 +111,9 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.18.1', require: false
+gem 'sentry-rails', '>= 5.19.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.18.1', require: false
+gem 'sentry-sidekiq', '>= 5.19.0', require: false
 
 ##-- background job processing --##
 gem 'sidekiq', '>= 7.3.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 91d3b3d8b6ad3..19f6e76c3e35a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -103,8 +103,8 @@ GEM
       tzinfo (~> 2.0)
     acts-as-taggable-on (9.0.1)
       activerecord (>= 6.0, < 7.1)
-    addressable (2.8.4)
-      public_suffix (>= 2.0.2, < 6.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -171,7 +171,8 @@ GEM
     commonmarker (0.23.10)
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
-    crack (0.4.5)
+    crack (1.0.0)
+      bigdecimal
       rexml
     crass (1.0.6)
     csv (3.3.0)
@@ -358,7 +359,7 @@ GEM
       ruby2ruby (~> 2.4)
       ruby_parser (~> 3.10)
     hana (1.3.7)
-    hashdiff (1.0.1)
+    hashdiff (1.1.0)
     hashie (5.0.0)
     http (5.1.1)
       addressable (~> 2.8)
@@ -550,7 +551,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (5.0.1)
+    public_suffix (6.0.0)
     puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
@@ -633,8 +634,8 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
+    rexml (3.3.4)
+      strscan
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.1)
@@ -709,14 +710,14 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.18.1)
+    sentry-rails (5.19.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.18.1)
-    sentry-ruby (5.18.1)
+      sentry-ruby (~> 5.19.0)
+    sentry-ruby (5.19.0)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.18.1)
-      sentry-ruby (~> 5.18.1)
+    sentry-sidekiq (5.19.0)
+      sentry-ruby (~> 5.19.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
@@ -809,7 +810,7 @@ GEM
     web-push (3.0.1)
       jwt (~> 2.0)
       openssl (~> 3.0)
-    webmock (3.18.1)
+    webmock (3.23.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -938,9 +939,9 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.18.1)
+  sentry-rails (>= 5.19.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.18.1)
+  sentry-sidekiq (>= 5.19.0)
   shoulda-matchers
   sidekiq (>= 7.3.0)
   sidekiq-cron (>= 1.12.0)
@@ -970,4 +971,4 @@ RUBY VERSION
    ruby 3.3.3p89
 
 BUNDLED WITH
-   2.5.14
+   2.5.16
diff --git a/app/builders/messages/messenger/message_builder.rb b/app/builders/messages/messenger/message_builder.rb
index 0739829aa3588..f01a236c91505 100644
--- a/app/builders/messages/messenger/message_builder.rb
+++ b/app/builders/messages/messenger/message_builder.rb
@@ -27,7 +27,7 @@ def attachment_params(attachment)
     file_type = attachment['type'].to_sym
     params = { file_type: file_type, account_id: @message.account_id }
 
-    if [:image, :file, :audio, :video, :share, :story_mention].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
       params.merge!(file_type_params(attachment))
     elsif file_type == :location
       params.merge!(location_params(attachment))
diff --git a/app/controllers/api/v1/accounts/integrations/apps_controller.rb b/app/controllers/api/v1/accounts/integrations/apps_controller.rb
index 358a15d87d381..c2284bc2edcd4 100644
--- a/app/controllers/api/v1/accounts/integrations/apps_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/apps_controller.rb
@@ -10,7 +10,7 @@ def show; end
   private
 
   def fetch_apps
-    @apps = Integrations::App.all.select(&:active?)
+    @apps = Integrations::App.all.select { |app| app.active?(Current.account) }
   end
 
   def fetch_app
diff --git a/app/controllers/api/v1/accounts/integrations/captain_controller.rb b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
new file mode 100644
index 0000000000000..7df0e61df9194
--- /dev/null
+++ b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
@@ -0,0 +1,22 @@
+class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
+  before_action :check_admin_authorization?
+  before_action :fetch_hook
+
+  def sso_url
+    params_string =
+      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
+      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
+      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
+
+    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
+
+    sso_url = "#{installation_config.value}/sso?#{params_string}"
+    render json: { sso_url: sso_url }, status: :ok
+  end
+
+  private
+
+  def fetch_hook
+    @hook = Current.account.hooks.find_by!(app_id: 'captain')
+  end
+end
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index c343fbe4f69fc..da169d61f2ae3 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';
@@ -37,7 +10,6 @@ import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
-import rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import {
@@ -59,9 +31,6 @@ export default {
     UpgradeBanner,
     PendingEmailVerificationBanner,
   },
-
-  mixins: [rtlMixin],
-
   data() {
     return {
       showAddAccountModal: false,
@@ -73,8 +42,8 @@ export default {
   computed: {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
+      isRTL: 'accounts/isRTL',
       currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
       currentAccountId: 'getCurrentAccountId',
@@ -130,7 +99,6 @@ export default {
         this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       this.setLocale(locale);
-      this.updateRTLDirectionView(locale);
       this.latestChatwootVersion = latestChatwootVersion;
       vueActionCable.init(pubsubToken);
       this.reconnectService = new ReconnectService(this.$store, router);
@@ -147,6 +115,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': isRTL }"
+    :dir="isRTL ? '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/api/integrations.js b/app/javascript/dashboard/api/integrations.js
index 2b816e6037b85..975857ce10f53 100644
--- a/app/javascript/dashboard/api/integrations.js
+++ b/app/javascript/dashboard/api/integrations.js
@@ -32,6 +32,10 @@ class IntegrationsAPI extends ApiClient {
   deleteHook(hookId) {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
+
+  fetchCaptainURL() {
+    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
+  }
 }
 
 export default new IntegrationsAPI();
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 4b33d5b10c240..1db97a306911b 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -3,6 +3,9 @@
 @import 'tailwindcss/utilities';
 
 @import 'shared/assets/fonts/plus-jakarta';
+@import 'shared/assets/fonts/InterDisplay/inter-display';
+@import 'shared/assets/fonts/inter';
+
 @import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
@@ -42,6 +45,7 @@
 }
 
 @layer base {
+
   // scss-lint:disable PropertySortOrder
   :root {
     --color-amber-25: 254 253 251;
@@ -213,6 +217,7 @@
     --color-orange-800: 204 78 0;
     --color-orange-900: 88 45 29;
   }
+
   // scss-lint:disable QualifyingElement
   body.dark {
     --color-amber-25: 31 19 0;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
index 97535bf0d3c50..b5182bf8753d4 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
@@ -1,6 +1,10 @@
 table {
   @apply border-spacing-0 text-sm w-full;
 
+
+}
+
+.woot-table {
   thead {
     th {
       @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
@@ -16,9 +20,7 @@ table {
       @apply p-2.5 text-slate-700 dark:text-slate-100;
     }
   }
-}
 
-.woot-table {
   tr {
     .show-if-hover {
       transition: opacity 0.2s $swift-ease-out-function;
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 87370185d2a94..6fc0ee0d904ce 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 6cff70bd3f4b2..2322edbfbac1e 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 ee53540274d3b..fa95c5024f71a 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -1,139 +1,22 @@
-<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 { ref } from 'vue';
 import { mapGetters } from 'vuex';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAlert } from 'dashboard/composables';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import VirtualList from 'vue-virtual-scroll-list';
 
 import ChatListHeader from './ChatListHeader.vue';
 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
-import timeMixin from '../mixins/time';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import filterMixin from 'shared/mixins/filterMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -158,14 +41,7 @@ export default {
     IntersectionObserver,
     VirtualList,
   },
-  mixins: [
-    timeMixin,
-    conversationMixin,
-    keyboardEventListenerMixins,
-    alertMixin,
-    filterMixin,
-    uiSettingsMixin,
-  ],
+  mixins: [filterMixin],
   provide() {
     return {
       // Actions to be performed on virtual list item and context menu.
@@ -210,6 +86,68 @@ export default {
       type: Boolean,
     },
   },
+  setup() {
+    const { uiSettings } = useUISettings();
+
+    const conversationListRef = ref(null);
+
+    const getKeyboardListenerParams = () => {
+      const allConversations = conversationListRef.value.querySelectorAll(
+        'div.conversations-list div.conversation'
+      );
+      const activeConversation = conversationListRef.value.querySelector(
+        'div.conversations-list div.conversation.active'
+      );
+      const activeConversationIndex = [...allConversations].indexOf(
+        activeConversation
+      );
+      const lastConversationIndex = allConversations.length - 1;
+      return {
+        allConversations,
+        activeConversation,
+        activeConversationIndex,
+        lastConversationIndex,
+      };
+    };
+    const handlePreviousConversation = () => {
+      const { allConversations, activeConversationIndex } =
+        getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[0].click();
+      }
+      if (activeConversationIndex >= 1) {
+        allConversations[activeConversationIndex - 1].click();
+      }
+    };
+    const handleNextConversation = () => {
+      const {
+        allConversations,
+        activeConversationIndex,
+        lastConversationIndex,
+      } = getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[lastConversationIndex].click();
+      } else if (activeConversationIndex < lastConversationIndex) {
+        allConversations[activeConversationIndex + 1].click();
+      }
+    };
+    const keyboardEvents = {
+      'Alt+KeyJ': {
+        action: () => handlePreviousConversation(),
+        allowOnFocusedInput: true,
+      },
+      'Alt+KeyK': {
+        action: () => handleNextConversation(),
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, conversationListRef);
+
+    return {
+      uiSettings,
+      conversationListRef,
+    };
+  },
   data() {
     return {
       activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
@@ -230,7 +168,7 @@ export default {
       isContextMenuOpen: false,
       appliedFilter: [],
       infiniteLoaderOptions: {
-        root: this.$refs.conversationList,
+        root: this.$refs.conversationListRef,
         rootMargin: '100px 0px 100px 0px',
       },
 
@@ -248,20 +186,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',
@@ -611,58 +545,6 @@ export default {
         }))
       );
     },
-    getKeyboardListenerParams() {
-      const allConversations = this.$refs.conversationList.querySelectorAll(
-        'div.conversations-list div.conversation'
-      );
-      const activeConversation = this.$refs.conversationList.querySelector(
-        'div.conversations-list div.conversation.active'
-      );
-      const activeConversationIndex = [...allConversations].indexOf(
-        activeConversation
-      );
-      const lastConversationIndex = allConversations.length - 1;
-      return {
-        allConversations,
-        activeConversation,
-        activeConversationIndex,
-        lastConversationIndex,
-      };
-    },
-    handlePreviousConversation() {
-      const { allConversations, activeConversationIndex } =
-        this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[0].click();
-      }
-      if (activeConversationIndex >= 1) {
-        allConversations[activeConversationIndex - 1].click();
-      }
-    },
-    handleNextConversation() {
-      const {
-        allConversations,
-        activeConversationIndex,
-        lastConversationIndex,
-      } = this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[lastConversationIndex].click();
-      } else if (activeConversationIndex < lastConversationIndex) {
-        allConversations[activeConversationIndex + 1].click();
-      }
-    },
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyJ': {
-          action: () => this.handlePreviousConversation(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyK': {
-          action: () => this.handleNextConversation(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
     resetAndFetchData() {
       this.appliedFilter = [];
       this.resetBulkActions();
@@ -729,7 +611,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
@@ -812,7 +694,7 @@ export default {
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
-          this.showAlert(
+          useAlert(
             this.$t(
               'CONVERSATION.CARD_CONTEXT_MENU.API.AGENT_ASSIGNMENT.SUCCESFUL',
               {
@@ -822,10 +704,10 @@ export default {
             )
           );
         } else {
-          this.showAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
+          useAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
         }
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
+        useAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
       }
     },
     async assignPriority(priority, conversationId = null) {
@@ -840,7 +722,7 @@ export default {
             newValue: priority,
             from: 'Context menu',
           });
-          this.showAlert(
+          useAlert(
             this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
               priority,
               conversationId,
@@ -883,7 +765,7 @@ export default {
           conversationId,
           teamId: team.id,
         });
-        this.showAlert(
+        useAlert(
           this.$t(
             'CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL',
             {
@@ -893,7 +775,7 @@ export default {
           )
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED')
         );
       }
@@ -910,7 +792,7 @@ export default {
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
-          this.showAlert(
+          useAlert(
             this.$t(
               'CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_ASSIGNMENT.SUCCESFUL',
               {
@@ -920,10 +802,10 @@ export default {
             )
           );
         } else {
-          this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
+          useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
         }
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
+        useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
       }
     },
     async onAssignTeamsForBulk(team) {
@@ -936,9 +818,9 @@ export default {
           },
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
+        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
+        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
       }
     },
     async onUpdateConversations(status, snoozedUntil) {
@@ -952,9 +834,9 @@ export default {
           snoozed_until: snoozedUntil,
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
+        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
+        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
       }
     },
     toggleConversationStatus(conversationId, status, snoozedUntil) {
@@ -965,7 +847,7 @@ export default {
           snoozedUntil,
         })
         .then(() => {
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          useAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
           this.isLoading = false;
         });
     },
@@ -981,6 +863,122 @@ 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"
+      @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="conversationListRef"
+      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 {
@@ -994,14 +992,4 @@ export default {
 .conversations-list {
   @apply overflow-hidden hover:overflow-y-auto;
 }
-
-.tab--chat-type {
-  @apply py-0 px-4;
-
-  ::v-deep {
-    .tabs {
-      @apply p-0;
-    }
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index d2df2bea34fbb..cd7cf0ff16806 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 d8f609e29cb14..d8656da75c801 100644
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,34 +1,9 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     script: {
       type: String,
@@ -61,12 +36,36 @@ export default {
     async onCopy(e) {
       e.preventDefault();
       await copyTextToClipboard(this.script);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
   },
 };
 </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 b013b01714281..55721ac21cbc7 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 e7de811d6b9cd..4bf97320bf6fc 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -1,147 +1,12 @@
-<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/lib/validators';
+import { required, url } from '@vuelidate/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
-import customAttributeMixin from '../mixins/customAttributeMixin';
+import { getRegexp } from 'shared/helpers/Validators';
+import { useVuelidate } from '@vuelidate/core';
 
 const DATE_FORMAT = 'yyyy-MM-dd';
 
@@ -150,7 +15,6 @@ export default {
     MultiselectDropdown,
     HelperTextPopup,
   },
-  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
     description: { type: String, default: '' },
@@ -163,10 +27,12 @@ export default {
       default: null,
     },
     regexCue: { type: String, default: null },
-    regexEnabled: { type: Boolean, default: false },
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isEditing: false,
@@ -225,13 +91,13 @@ export default {
       return this.isAttributeTypeLink ? 'url' : this.attributeType;
     },
     shouldShowErrorMessage() {
-      return this.$v.editedValue.$error;
+      return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.$v.editedValue.url) {
+      if (this.v$.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
-      if (!this.$v.editedValue.regexValidation) {
+      if (!this.v$.editedValue.regexValidation) {
         return this.regexCue
           ? this.regexCue
           : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -246,7 +112,7 @@ export default {
     },
     contactId() {
       // Fix to solve validation not resetting when contactId changes in contact page
-      this.$v.$reset();
+      this.v$.$reset();
     },
   },
 
@@ -261,8 +127,7 @@ export default {
         required,
         regexValidation: value => {
           return !(
-            this.attributeRegex &&
-            !this.getRegexp(this.attributeRegex).test(value)
+            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
           );
         },
       },
@@ -287,7 +152,7 @@ export default {
       }
     },
     onClickAway() {
-      this.$v.$reset();
+      this.v$.$reset();
       this.isEditing = false;
     },
     onEdit() {
@@ -307,8 +172,8 @@ export default {
         this.attributeType === 'date'
           ? parseISO(this.editedValue)
           : this.editedValue;
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.isEditing = false;
@@ -316,7 +181,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
-      this.$v.$reset();
+      this.v$.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
@@ -326,6 +191,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/CustomBrandPolicyWrapper.vue b/app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue
new file mode 100644
index 0000000000000..b07b24657cbdc
--- /dev/null
+++ b/app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+const props = defineProps({
+  showOnCustomBrandedInstance: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const getters = useStoreGetters();
+
+const isACustomBrandedInstance =
+  getters['globalConfig/isACustomBrandedInstance'];
+
+const shouldShowContent = computed(
+  () => props.showOnCustomBrandedInstance || !isACustomBrandedInstance.value
+);
+</script>
+
+<template>
+  <div v-if="shouldShowContent">
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/CustomSnoozeModal.vue b/app/javascript/dashboard/components/CustomSnoozeModal.vue
index 65f943d41938c..4b5a41951e371 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 8a22d5e8a0e30..481006adbb5e6 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 215c054ffe590..2268e0ccd9a8d 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 5492882ce6383..e981986c0da22 100644
--- a/app/javascript/dashboard/components/MaskedText.vue
+++ b/app/javascript/dashboard/components/MaskedText.vue
@@ -1,27 +1,9 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     value: {
       type: String,
@@ -37,7 +19,7 @@ export default {
     async onCopy(e) {
       e.preventDefault();
       await copyTextToClipboard(this.value);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
     toggleMasked() {
       this.masked = !this.masked;
@@ -46,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 bfe7dc30b39d6..ae126aa11de7a 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 332ca069feac0..63d3612781d7c 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 d59a9dc0165de..ee3509d64fe40 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 6106b9ad01a6f..74739a8b171cb 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 2132844845220..3a23a15ef2ab8 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 4785e4d4b404e..26bb040befa1e 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,27 +1,10 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     WootSnackbar,
   },
-  mixins: [alertMixin],
   props: {
     duration: {
       type: Number,
@@ -42,7 +25,7 @@ export default {
     this.$emitter.off('newToastMessage', this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage(message, action) {
+    onNewToastMessage({ message, action }) {
       this.snackMessages.push({
         key: new Date().getTime(),
         message,
@@ -55,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 a3eece8d596be..1d89ebfde5998 100644
--- a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -1,19 +1,8 @@
-<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';
-import adminMixin from 'dashboard/mixins/isAdmin';
-import accountMixin from 'dashboard/mixins/account';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
+import Banner from 'dashboard/components/ui/Banner.vue';
 
 const EMPTY_SUBSCRIPTION_INFO = {
   status: null,
@@ -22,7 +11,16 @@ const EMPTY_SUBSCRIPTION_INFO = {
 
 export default {
   components: { Banner },
-  mixins: [adminMixin, accountMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+
+    const { accountId } = useAccount();
+
+    return {
+      accountId,
+      isAdmin,
+    };
+  },
   computed: {
     ...mapGetters({
       isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
@@ -80,3 +78,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 c9dc51754a3cb..544e7870961e4 100644
--- a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
+++ b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
@@ -1,24 +1,10 @@
-<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';
-import accountMixin from 'dashboard/mixins/account';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
   components: { Banner },
-  mixins: [accountMixin, alertMixin],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
@@ -36,8 +22,20 @@ export default {
   methods: {
     resendVerificationEmail() {
       this.$store.dispatch('resendConfirmation');
-      this.showAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
+      useAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
     },
   },
 };
 </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 74ee0691a4eff..382b3c3f80726 100644
--- a/app/javascript/dashboard/components/app/UpdateBanner.vue
+++ b/app/javascript/dashboard/components/app/UpdateBanner.vue
@@ -1,28 +1,22 @@
-<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';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { mapGetters } from 'vuex';
-import adminMixin from 'dashboard/mixins/isAdmin';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import { hasAnUpdateAvailable } from './versionCheckHelper';
 
 export default {
   components: { Banner },
-  mixins: [adminMixin],
   props: {
     latestChatwootVersion: { type: String, default: '' },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   data() {
     return { userDismissedBanner: false };
   },
@@ -72,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 825f178074028..e220d22845317 100644
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -1,24 +1,17 @@
-<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';
-import adminMixin from 'dashboard/mixins/isAdmin';
-import accountMixin from 'dashboard/mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { differenceInDays } from 'date-fns';
 
 export default {
   components: { Banner },
-  mixins: [adminMixin, accountMixin],
+  setup() {
+    const { accountId } = useAccount();
+    return {
+      accountId,
+    };
+  },
   data() {
     return { conversationMeta: {} };
   },
@@ -87,3 +80,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 ca45559f3cd68..a02839111ad4c 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 733b8463961ea..32c2e923ae811 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 7dcc154884cb7..b29b6b538c925 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 64c13c6e9c27a..7c4c4daaa2343 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -1,5 +1,147 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import wootConstants from 'dashboard/constants/globals';
+import {
+  CMD_REOPEN_CONVERSATION,
+  CMD_RESOLVE_CONVERSATION,
+} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+
+const store = useStore();
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const resolveActionsRef = ref(null);
+const arrowDownButtonRef = ref(null);
+const isLoading = ref(false);
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+const closeDropdown = () => toggleDropdown(false);
+const openDropdown = () => toggleDropdown(true);
+
+const currentChat = computed(() => getters.getSelectedChat.value);
+
+const isOpen = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.OPEN
+);
+const isPending = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.PENDING
+);
+const isResolved = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.RESOLVED
+);
+const isSnoozed = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
+);
+
+const buttonClass = computed(() => {
+  if (isPending.value) return 'primary';
+  if (isOpen.value) return 'success';
+  if (isResolved.value) return 'warning';
+  return '';
+});
+
+const showAdditionalActions = computed(
+  () => !isPending.value && !isSnoozed.value
+);
+
+const showOpenButton = computed(() => {
+  return isPending.value || isSnoozed.value;
+});
+
+const getConversationParams = () => {
+  const allConversations = document.querySelectorAll(
+    '.conversations-list .conversation'
+  );
+
+  const activeConversation = document.querySelector(
+    'div.conversations-list div.conversation.active'
+  );
+  const activeConversationIndex = [...allConversations].indexOf(
+    activeConversation
+  );
+  const lastConversationIndex = allConversations.length - 1;
+
+  return {
+    all: allConversations,
+    activeIndex: activeConversationIndex,
+    lastIndex: lastConversationIndex,
+  };
+};
+
+const openSnoozeModal = () => {
+  const ninja = document.querySelector('ninja-keys');
+  ninja.open({ parent: 'snooze_conversation' });
+};
+
+const toggleStatus = (status, snoozedUntil) => {
+  closeDropdown();
+  isLoading.value = true;
+  store
+    .dispatch('toggleStatus', {
+      conversationId: currentChat.value.id,
+      status,
+      snoozedUntil,
+    })
+    .then(() => {
+      useAlert(t('CONVERSATION.CHANGE_STATUS'));
+      isLoading.value = false;
+    });
+};
+
+const onCmdOpenConversation = () => {
+  toggleStatus(wootConstants.STATUS_TYPE.OPEN);
+};
+
+const onCmdResolveConversation = () => {
+  toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+};
+
+const keyboardEvents = {
+  'Alt+KeyM': {
+    action: () => arrowDownButtonRef.value?.$el.click(),
+    allowOnFocusedInput: true,
+  },
+  'Alt+KeyE': {
+    action: async () => {
+      await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+    },
+  },
+  '$mod+Alt+KeyE': {
+    action: async event => {
+      const { all, activeIndex, lastIndex } = getConversationParams();
+      await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+
+      if (activeIndex < lastIndex) {
+        all[activeIndex + 1].click();
+      } else if (all.length > 1) {
+        all[0].click();
+        document.querySelector('.conversations-list').scrollTop = 0;
+      }
+      event.preventDefault();
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents, resolveActionsRef);
+
+useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
+useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
+</script>
+
 <template>
-  <div class="relative flex items-center justify-end resolve-actions">
+  <div
+    ref="resolveActionsRef"
+    class="relative flex items-center justify-end resolve-actions"
+  >
     <div class="button-group">
       <woot-button
         v-if="isOpen"
@@ -21,7 +163,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+        {{ t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="showOpenButton"
@@ -31,11 +173,11 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
+        {{ t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-if="showAdditionalActions"
-        ref="arrowDownButton"
+        ref="arrowDownButtonRef"
         :color-scheme="buttonClass"
         :disabled="isLoading"
         icon="chevron-down"
@@ -46,10 +188,10 @@
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open"
+      class="dropdown-pane dropdown-pane--open left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
-      <woot-dropdown-menu class="mb-0">
-        <woot-dropdown-item v-if="!isPending">
+      <WootDropdownMenu class="mb-0">
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -57,173 +199,27 @@
             icon="snooze"
             @click="() => openSnoozeModal()"
           >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+            {{ t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="!isPending">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
             size="small"
             icon="book-clock"
-            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
+            @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
           >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+            {{ t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-
-import wootConstants from 'dashboard/constants/globals';
-import {
-  CMD_REOPEN_CONVERSATION,
-  CMD_RESOLVE_CONVERSATION,
-} from '../../routes/dashboard/commands/commandBarBusEvents';
-
-export default {
-  components: {
-    WootDropdownItem,
-    WootDropdownMenu,
-  },
-  mixins: [alertMixin, keyboardEventListenerMixins],
-  props: { conversationId: { type: [String, Number], required: true } },
-  data() {
-    return {
-      isLoading: false,
-      showActionsDropdown: false,
-      STATUS_TYPE: wootConstants.STATUS_TYPE,
-    };
-  },
-  computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
-    isOpen() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
-    },
-    isPending() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.PENDING;
-    },
-    isResolved() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.RESOLVED;
-    },
-    isSnoozed() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
-    },
-    buttonClass() {
-      if (this.isPending) return 'primary';
-      if (this.isOpen) return 'success';
-      if (this.isResolved) return 'warning';
-      return '';
-    },
-    showAdditionalActions() {
-      return !this.isPending && !this.isSnoozed;
-    },
-  },
-  mounted() {
-    this.$emitter.on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    this.$emitter.on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
-  },
-  destroyed() {
-    this.$emitter.off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    this.$emitter.off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
-  },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyM': {
-          action: () => this.$refs.arrowDownButton?.$el.click(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyE': this.resolveOrToast,
-        '$mod+Alt+KeyE': async event => {
-          const { all, activeIndex, lastIndex } = this.getConversationParams();
-          await this.resolveOrToast();
-
-          if (activeIndex < lastIndex) {
-            all[activeIndex + 1].click();
-          } else if (all.length > 1) {
-            all[0].click();
-            document.querySelector('.conversations-list').scrollTop = 0;
-          }
-
-          event.preventDefault();
-        },
-      };
-    },
-    getConversationParams() {
-      const allConversations = document.querySelectorAll(
-        '.conversations-list .conversation'
-      );
-
-      const activeConversation = document.querySelector(
-        'div.conversations-list div.conversation.active'
-      );
-      const activeConversationIndex = [...allConversations].indexOf(
-        activeConversation
-      );
-      const lastConversationIndex = allConversations.length - 1;
-
-      return {
-        all: allConversations,
-        activeIndex: activeConversationIndex,
-        lastIndex: lastConversationIndex,
-      };
-    },
-    async resolveOrToast() {
-      try {
-        await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-      } catch (error) {
-        // error
-      }
-    },
-    onCmdOpenConversation() {
-      this.toggleStatus(this.STATUS_TYPE.OPEN);
-    },
-    onCmdResolveConversation() {
-      this.toggleStatus(this.STATUS_TYPE.RESOLVED);
-    },
-    showOpenButton() {
-      return this.isResolved || this.isSnoozed;
-    },
-    closeDropdown() {
-      this.showActionsDropdown = false;
-    },
-    openDropdown() {
-      this.showActionsDropdown = true;
-    },
-    toggleStatus(status, snoozedUntil) {
-      this.closeDropdown();
-      this.isLoading = true;
-      this.$store
-        .dispatch('toggleStatus', {
-          conversationId: this.currentChat.id,
-          status,
-          snoozedUntil,
-        })
-        .then(() => {
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
-          this.isLoading = false;
-        });
-    },
-    openSnoozeModal() {
-      const ninja = document.querySelector('ninja-keys');
-      ninja.open({ parent: 'snooze_conversation' });
-    },
-  },
-};
-</script>
 <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];
-
   .dropdown-menu__item {
     @apply mb-0;
   }
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index 63f216058133c..c4bb78ebe6d2e 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -1,53 +1,6 @@
-<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="m-0 flex items-center justify-between p-2">
-      <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="my-0 mx-1 text-xs font-medium text-slate-600 dark:text-slate-100"
-        >
-          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
-        </span>
-      </div>
-
-      <woot-switch
-        size="small"
-        class="mt-px mx-1 mb-0"
-        :value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-  </woot-dropdown-menu>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@@ -65,9 +18,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatusBadge,
   },
-
-  mixins: [alertMixin],
-
   data() {
     return {
       isStatusMenuOpened: false,
@@ -129,7 +79,7 @@ export default {
           account_id: this.currentAccountId,
         });
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR')
         );
       } finally {
@@ -139,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 4ccaa97dfab89..1e1dfac25375e 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,43 +1,13 @@
-<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 { ref } from 'vue';
 import { mapGetters } from 'vuex';
-import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useRoute, useRouter } from 'dashboard/composables/route';
 
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import router, { routesWithPermissions } from '../../routes';
+import { routesWithPermissions } from '../../routes';
 import { hasPermissions } from '../../helper/permissionsHelper';
 
 export default {
@@ -45,7 +15,6 @@ export default {
     PrimarySidebar,
     SecondarySidebar,
   },
-  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     showSecondarySidebar: {
       type: Boolean,
@@ -56,6 +25,52 @@ export default {
       default: '',
     },
   },
+  setup(props, { emit }) {
+    const sidebarRef = ref(null);
+    const route = useRoute();
+    const router = useRouter();
+
+    const toggleKeyShortcutModal = () => {
+      emit('openKeyShortcutModal');
+    };
+    const closeKeyShortcutModal = () => {
+      emit('closeKeyShortcutModal');
+    };
+    const isCurrentRouteSameAsNavigation = routeName => {
+      return route.name === routeName;
+    };
+    const navigateToRoute = routeName => {
+      if (!isCurrentRouteSameAsNavigation(routeName)) {
+        router.push({ name: routeName });
+      }
+    };
+    const keyboardEvents = {
+      '$mod+Slash': {
+        action: toggleKeyShortcutModal,
+      },
+      '$mod+Escape': {
+        action: closeKeyShortcutModal,
+      },
+      'Alt+KeyC': {
+        action: () => navigateToRoute('home'),
+      },
+      'Alt+KeyV': {
+        action: () => navigateToRoute('contacts_dashboard'),
+      },
+      'Alt+KeyR': {
+        action: () => navigateToRoute('account_overview_reports'),
+      },
+      'Alt+KeyS': {
+        action: () => navigateToRoute('agent_list'),
+      },
+    };
+    useKeyboardEvents(keyboardEvents, sidebarRef);
+
+    return {
+      toggleKeyShortcutModal,
+      sidebarRef,
+    };
+  },
   data() {
     return {
       showOptionsMenu: false,
@@ -65,7 +80,6 @@ export default {
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
-      currentRole: 'getCurrentRole',
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',
@@ -164,50 +178,48 @@ export default {
         this.$store.dispatch('customViews/get', this.activeCustomView);
       }
     },
-    toggleKeyShortcutModal() {
-      this.$emit('open-key-shortcut-modal');
-    },
-    closeKeyShortcutModal() {
-      this.$emit('close-key-shortcut-modal');
-    },
-    getKeyboardEvents() {
-      return {
-        '$mod+Slash': this.toggleKeyShortcutModal,
-        '$mod+Escape': this.closeKeyShortcutModal,
-        'Alt+KeyC': {
-          action: () => this.navigateToRoute('home'),
-        },
-        'Alt+KeyV': {
-          action: () => this.navigateToRoute('contacts_dashboard'),
-        },
-        'Alt+KeyR': {
-          action: () => this.navigateToRoute('account_overview_reports'),
-        },
-        'Alt+KeyS': {
-          action: () => this.navigateToRoute('agent_list'),
-        },
-      };
-    },
-    navigateToRoute(routeName) {
-      if (!this.isCurrentRouteSameAsNavigation(routeName)) {
-        router.push({ name: routeName });
-      }
-    },
-    isCurrentRouteSameAsNavigation(routeName) {
-      return this.$route.name === routeName;
-    },
     toggleSupportChatWindow() {
       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 ref="sidebarRef" 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/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 92b8765c6ed53..f019933e0f4c7 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -17,6 +17,14 @@ const primaryMenuItems = accountId => [
     toState: frontendURL(`accounts/${accountId}/dashboard`),
     toStateName: 'home',
   },
+  {
+    icon: 'captain',
+    key: 'captain',
+    label: 'CAPTAIN',
+    featureFlag: FEATURE_FLAGS.CAPTAIN,
+    toState: frontendURL(`accounts/${accountId}/captain`),
+    toStateName: 'captain',
+  },
   {
     icon: 'book-contacts',
     key: 'contacts',
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
index f7d63f6a1aa41..e30c3bcb11337 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
@@ -163,17 +163,6 @@ const settings = accountId => ({
         permissions: ['administrator'],
       },
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
-      toStateName: 'settings_integrations',
-      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
-    },
-    {
-      icon: 'star-emphasis',
-      label: 'APPLICATIONS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
@@ -184,11 +173,10 @@ const settings = accountId => ({
       meta: {
         permissions: ['administrator'],
       },
-      toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
+      toState: frontendURL(`accounts/${accountId}/settings/audit-logs/list`),
       toStateName: 'auditlogs_list',
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
-      beta: true,
     },
     {
       icon: 'document-list-clock',
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index ec0d986c2e68b..4a000a44762d0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,27 +1,54 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  data() {
+    return { showSwitchButton: false };
+  },
+  computed: {
+    ...mapGetters({
+      account: 'getCurrentAccount',
+      userAccounts: 'getUserAccounts',
+    }),
+    showShowCurrentAccountContext() {
+      return this.userAccounts.length > 1 && this.account.name;
+    },
+  },
+  methods: {
+    setShowSwitch() {
+      this.showSwitchButton = true;
+    },
+    resetShowSwitch() {
+      this.showSwitchButton = false;
+    },
+  },
+};
+</script>
+
 <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"
+    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="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
+      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="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"
+        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="my-0 mx-2">
+        <div class="mx-2 my-0">
           <woot-button
             variant="clear"
             size="tiny"
             icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
+            @click="$emit('toggleAccounts')"
           >
             {{ $t('SIDEBAR.SWITCH') }}
           </woot-button>
@@ -30,32 +57,7 @@
     </transition>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
 
-export default {
-  data() {
-    return { showSwitchButton: false };
-  },
-  computed: {
-    ...mapGetters({
-      account: 'getCurrentAccount',
-      userAccounts: 'getUserAccounts',
-    }),
-    showShowCurrentAccountContext() {
-      return this.userAccounts.length > 1 && this.account.name;
-    },
-  },
-  methods: {
-    setShowSwitch() {
-      this.showSwitchButton = true;
-    },
-    resetShowSwitch() {
-      this.showSwitchButton = false;
-    },
-  },
-};
-</script>
 <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 3e8f1e6abbfa2..73f727a0e9161 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -1,7 +1,33 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    showAccountModal: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  methods: {
+    onChangeAccount(accountId) {
+      const accountUrl = `/app/accounts/${accountId}/dashboard`;
+      window.location.href = accountUrl;
+    },
+  },
+};
+</script>
+
 <template>
   <woot-modal
     :show="showAccountModal"
-    :on-close="() => $emit('close-account-modal')"
+    :on-close="() => $emit('closeAccountModal')"
   >
     <woot-modal-header
       :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
@@ -15,18 +41,18 @@
         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"
+          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-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
+                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
               >
                 {{ account.name }}
               </div>
               <div
-                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
               >
                 {{ account.role }}
               </div>
@@ -45,40 +71,14 @@
 
     <div
       v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
+      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
     >
       <button
-        class="button success large expanded nice w-full"
-        @click="$emit('show-create-account-modal')"
+        class="w-full button success large expanded nice"
+        @click="$emit('showCreateAccountModal')"
       >
         {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
       </button>
     </div>
   </woot-modal>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  props: {
-    showAccountModal: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  methods: {
-    onChangeAccount(accountId) {
-      const accountUrl = `/app/accounts/${accountId}/dashboard`;
-      window.location.href = accountUrl;
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index efbb81228e081..c36a108ab46ec 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -1,60 +1,10 @@
-<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 { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -65,6 +15,9 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountName: '',
@@ -87,17 +40,64 @@ export default {
         const account_id = await this.$store.dispatch('accounts/create', {
           account_name: this.accountName,
         });
-        this.$emit('close-account-create-modal');
-        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        this.$emit('closeAccountCreateModal');
+        useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
         window.location = `/app/accounts/${account_id}/dashboard`;
       } catch (error) {
         if (error.response.status === 422) {
-          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+          useAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
         } else {
-          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+          useAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
         }
       }
     },
   },
 };
 </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 7683a40b2f91c..ff526533f878d 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 f470bc5b6552c..38615fff0e361 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 f3a394f4b53e6..48e5aef7fe563 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,35 +1,9 @@
-<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="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isNotificationPanelActive,
-      }"
-      @click="openNotificationPanel"
-    >
-      <fluent-icon
-        icon="alert"
-        :class="{
-          'text-woot-500': isNotificationPanelActive,
-        }"
-      />
-      <span
-        v-if="unreadCount"
-        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
-      >
-        {{ unreadCount }}
-      </span>
-    </button>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
 export default {
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       notificationMetadata: 'notifications/getMeta',
     }),
     unreadCount() {
@@ -48,9 +22,35 @@ export default {
   methods: {
     openNotificationPanel() {
       if (this.$route.name !== 'notifications_index') {
-        this.$emit('open-notification-panel');
+        this.$emit('openNotificationPanel');
       }
     },
   },
 };
 </script>
+
+<template>
+  <div class="mb-4">
+    <button
+      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,
+      }"
+      @click="openNotificationPanel"
+    >
+      <fluent-icon
+        icon="alert"
+        :class="{
+          'text-woot-500': isNotificationPanelActive,
+        }"
+      />
+      <span
+        v-if="unreadCount"
+        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
+      >
+        {{ unreadCount }}
+      </span>
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 01dce6bf17d80..707639b57d552 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -1,36 +1,93 @@
+<script>
+import { mapGetters } from 'vuex';
+import Auth from '../../../api/auth';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
+
+export default {
+  components: {
+    WootDropdownMenu,
+    WootDropdownItem,
+    AvailabilityStatus,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+      accountId: 'getCurrentAccountId',
+    }),
+    showChangeAccountOption() {
+      if (this.globalConfig.createNewAccountFromDashboard) {
+        return true;
+      }
+
+      const { accounts = [] } = this.currentUser;
+      return accounts.length > 1;
+    },
+  },
+  methods: {
+    handleProfileSettingClick(e, navigate) {
+      this.$emit('close');
+      navigate(e);
+    },
+    handleKeyboardHelpClick() {
+      this.$emit('openKeyShortcutModal');
+      this.$emit('close');
+    },
+    logout() {
+      Auth.logout();
+    },
+    onClickAway() {
+      if (this.show) this.$emit('close');
+    },
+    openAppearanceOptions() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'appearance_settings' });
+    },
+  },
+};
+</script>
+
 <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="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 }"
     >
-      <availability-status />
-      <woot-dropdown-menu>
-        <woot-dropdown-item v-if="showChangeAccountOption">
+      <AvailabilityStatus />
+      <WootDropdownMenu>
+        <WootDropdownItem v-if="showChangeAccountOption">
           <woot-button
             variant="clear"
             color-scheme="secondary"
             size="small"
             icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
+            @click="$emit('toggleAccounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
           <woot-button
             variant="clear"
             color-scheme="secondary"
             size="small"
             icon="chat-help"
-            @click="$emit('show-support-chat-window')"
+            @click="$emit('showSupportChatWindow')"
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -40,8 +97,8 @@
           >
             {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <router-link
             v-slot="{ href, isActive, navigate }"
             :to="`/app/accounts/${accountId}/profile/settings`"
@@ -49,7 +106,7 @@
           >
             <a
               :href="href"
-              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
               :class="{ 'is-active': isActive }"
               @click="e => handleProfileSettingClick(e, navigate)"
             >
@@ -59,8 +116,8 @@
               </span>
             </a>
           </router-link>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -70,11 +127,11 @@
           >
             {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
-            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
             target="_blank"
             rel="noopener nofollow noreferrer"
             @click="$emit('close')"
@@ -88,8 +145,8 @@
               {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
             </span>
           </a>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -99,65 +156,8 @@
           >
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </transition>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import Auth from '../../../api/auth';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
-
-export default {
-  components: {
-    WootDropdownMenu,
-    WootDropdownItem,
-    AvailabilityStatus,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-    }),
-    showChangeAccountOption() {
-      if (this.globalConfig.createNewAccountFromDashboard) {
-        return true;
-      }
-
-      const { accounts = [] } = this.currentUser;
-      return accounts.length > 1;
-    },
-  },
-  methods: {
-    handleProfileSettingClick(e, navigate) {
-      this.$emit('close');
-      navigate(e);
-    },
-    handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
-      this.$emit('close');
-    },
-    logout() {
-      Auth.logout();
-    },
-    onClickAway() {
-      if (this.show) this.$emit('close');
-    },
-    openAppearanceOptions() {
-      const ninja = document.querySelector('ninja-keys');
-      ninja.open({ parent: 'appearance_settings' });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index c42d2344812ae..12edff7c0e149 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 f23d623476bba..8951f946c5486 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 b4cd3ca90c652..6de03af531b92 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 24ad623534ebe..f8f75ffe7e0d3 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 bc3b036463cf8..be013c069b82d 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,102 +1,7 @@
-<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 adminMixin from '../../../mixins/isAdmin';
-import configMixin from 'shared/mixins/configMixin';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useConfig } from 'dashboard/composables/useConfig';
 import {
   getInboxClassByType,
   getInboxWarningIconClass,
@@ -111,13 +16,20 @@ import Policy from '../../policy.vue';
 
 export default {
   components: { SecondaryChildNavItem, Policy },
-  mixins: [adminMixin, configMixin],
   props: {
     menuItem: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    const { isEnterprise } = useConfig();
+    return {
+      isAdmin,
+      isEnterprise,
+    };
+  },
   computed: {
     ...mapGetters({
       activeInbox: 'getSelectedInbox',
@@ -258,7 +170,7 @@ export default {
       } else if (this.menuItem.showModalForNewItem) {
         if (this.menuItem.modalName === 'AddLabel') {
           e.preventDefault();
-          this.$emit('add-label');
+          this.$emit('addLabel');
         }
       }
     },
@@ -274,3 +186,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 b2ed04c5df05c..5d49bc786fdd1 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 3473111aee36a..a4372149d8557 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 72722c0c43668..acf9ab23b6523 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 9b84d654840b7..20d78db3bb5bd 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 447a83bf3493a..3efce5541fca2 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 38d4dd76f041c..b23f95d797345 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 828044e1cab03..199affe45fb08 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 ee68e73410f84..8347b70065d1b 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 c448e3eb1a6e1..d4962d21a2528 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 1f5e7224f76d6..725925f078ab6 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 c5ae54b6f46b9..9a1561eb58b0d 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 08ce0e0c148ab..7787ab83d6534 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 9791366953afe..439bc873e1287 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 3bbfb415c5306..fecfd5b6fbbf2 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 ccf9b2b1ed573..9c8e7155a5ee0 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 0c6942e1b16a4..ce6f8868c56e4 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,19 +88,21 @@ 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)"
         :button-text="item.name"
+        :icon="item.icon"
+        :icon-color="item.iconColor"
         @click="$emit('click', item)"
       />
     </slot>
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
index f9a90297d8d68..af7a197a3e346 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
@@ -8,8 +8,17 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconColor: {
+    type: String,
+    default: '',
+  },
 });
 </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"
@@ -19,6 +28,12 @@ defineProps({
     @focus="$emit('focus')"
   >
     <div class="inline-flex items-center gap-3 overflow-hidden">
+      <fluent-icon
+        v-if="icon"
+        :icon="icon"
+        size="18"
+        :style="{ color: iconColor }"
+      />
       <span
         class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
       >
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
index ccf9b2b1ed573..9c8e7155a5ee0 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 c153a82a78b80..53611208c2b7b 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 fb14692f6d6f5..eed0e2755d9f5 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 e2d1322ef4bcd..4bdac728d2c70 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 ec0dd5539482b..069ea37a9bf7b 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 3aa8f15a5b1dc..c86582fc6188d 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 340aa4f901a27..d6356aa9f45d0 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 787c53e1e8be0..671f5ed09feb8 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -1,26 +1,16 @@
-<template>
-  <div
-    v-tooltip.top="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto 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;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
 
-import timeMixin from 'dashboard/mixins/time';
+import {
+  dynamicTime,
+  dateFormat,
+  shortTimestamp,
+} from 'shared/helpers/timeHelper';
 
 export default {
   name: 'TimeAgo',
-  mixins: [timeMixin],
   props: {
     isAutoRefreshEnabled: {
       type: Boolean,
@@ -37,17 +27,17 @@ export default {
   },
   data() {
     return {
-      lastActivityAtTimeAgo: this.dynamicTime(this.lastActivityTimestamp),
-      createdAtTimeAgo: this.dynamicTime(this.createdAtTimestamp),
+      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
       timer: null,
     };
   },
   computed: {
     lastActivityTime() {
-      return this.shortTimestamp(this.lastActivityAtTimeAgo);
+      return shortTimestamp(this.lastActivityAtTimeAgo);
     },
     createdAtTime() {
-      return this.shortTimestamp(this.createdAtTimeAgo);
+      return shortTimestamp(this.createdAtTimeAgo);
     },
     createdAt() {
       const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
@@ -56,9 +46,9 @@ export default {
         ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
             this.createdAtTimeAgo
           }`
-        : `${this.$t(
-            'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
-          )} ${this.dateFormat(this.createdAtTimestamp)}`;
+        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
+            this.createdAtTimestamp
+          )}`;
     },
     lastActivity() {
       const lastActivityTimeDiff =
@@ -70,7 +60,7 @@ export default {
           }`
         : `${this.$t(
             'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
-          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
+          )} ${dateFormat(this.lastActivityTimestamp)}`;
     },
     tooltipText() {
       return `${this.createdAt}
@@ -79,10 +69,10 @@ export default {
   },
   watch: {
     lastActivityTimestamp() {
-      this.lastActivityAtTimeAgo = this.dynamicTime(this.lastActivityTimestamp);
+      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
     },
     createdAtTimestamp() {
-      this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
+      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
     },
   },
   mounted() {
@@ -96,10 +86,8 @@ export default {
   methods: {
     createTimer() {
       this.timer = setTimeout(() => {
-        this.lastActivityAtTimeAgo = this.dynamicTime(
-          this.lastActivityTimestamp
-        );
-        this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
+        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
         this.createTimer();
       }, this.refreshTime());
     },
@@ -117,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 9c887c8539641..4b45b6ef528cd 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -1,3 +1,34 @@
+<script>
+/* eslint no-console: 0 */
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    classObject() {
+      return 'w-full';
+    },
+    activeIndex() {
+      return this.items.findIndex(i => i.route === this.$route.name);
+    },
+  },
+  methods: {
+    isActive(item) {
+      return this.items.indexOf(item) === this.activeIndex;
+    },
+    isOver(item) {
+      return this.items.indexOf(item) < this.activeIndex;
+    },
+  },
+};
+</script>
+
 <template>
   <transition-group
     name="wizard-items"
@@ -19,7 +50,7 @@
         </h3>
         <span
           v-if="isOver(item)"
-          class="text-green-500 dark:text-green-500 ml-1"
+          class="ml-1 text-green-500 dark:text-green-500"
         >
           <fluent-icon icon="checkmark" />
         </span>
@@ -27,44 +58,13 @@
       <span class="step">
         {{ items.indexOf(item) + 1 }}
       </span>
-      <p class="text-slate-600 dark:text-slate-300 text-sm m-0 pl-6">
+      <p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
         {{ item.body }}
       </p>
     </div>
   </transition-group>
 </template>
 
-<script>
-/* eslint no-console: 0 */
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    isFullwidth: Boolean,
-    items: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    classObject() {
-      return 'w-full';
-    },
-    activeIndex() {
-      return this.items.findIndex(i => i.route === this.$route.name);
-    },
-  },
-  methods: {
-    isActive(item) {
-      return this.items.indexOf(item) === this.activeIndex;
-    },
-    isOver(item) {
-      return this.items.indexOf(item) < this.activeIndex;
-    },
-  },
-};
-</script>
 <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 462a6fd3c4e49..8b3c789e7b98d 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 34f95a3308b0b..6ec852b58de86 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -1,47 +1,13 @@
-<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 { ref } from 'vue';
 import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import adminMixin from 'dashboard/mixins/aiMixin';
-import aiMixin from 'dashboard/mixins/isAdmin';
+import aiMixin from 'dashboard/mixins/aiMixin';
 import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
 export default {
@@ -50,16 +16,47 @@ export default {
     AICTAModal,
     AIAssistanceCTAButton,
   },
-  mixins: [aiMixin, keyboardEventListenerMixins, adminMixin, uiSettingsMixin],
+  mixins: [aiMixin],
+  setup(props, { emit }) {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    const { isAdmin } = useAdmin();
+
+    const aiAssistanceButtonRef = ref(null);
+    const initialMessage = ref('');
+
+    const initializeMessage = draftMessage => {
+      initialMessage.value = draftMessage;
+    };
+    const keyboardEvents = {
+      '$mod+KeyZ': {
+        action: () => {
+          if (initialMessage.value) {
+            emit('replaceText', initialMessage.value);
+            initialMessage.value = '';
+          }
+        },
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, aiAssistanceButtonRef);
+
+    return {
+      uiSettings,
+      updateUISettings,
+      isAdmin,
+      aiAssistanceButtonRef,
+      initialMessage,
+      initializeMessage,
+    };
+  },
   data: () => ({
     showAIAssistanceModal: false,
     showAICtaModal: false,
     aiOption: '',
-    initialMessage: '',
   }),
   computed: {
     ...mapGetters({
-      currentChat: 'getSelectedChat',
       isAChatwootInstance: 'globalConfig/isAChatwootInstance',
     }),
     isAICTAModalDismissed() {
@@ -82,22 +79,10 @@ export default {
 
   mounted() {
     this.$emitter.on(CMD_AI_ASSIST, this.onAIAssist);
-    this.initialMessage = this.draftMessage;
+    this.initializeMessage(this.draftMessage);
   },
 
   methods: {
-    getKeyboardEvents() {
-      return {
-        '$mod+KeyZ': {
-          action: () => {
-            if (this.initialMessage) {
-              this.$emit('replace-text', this.initialMessage);
-              this.initialMessage = '';
-            }
-          },
-        },
-      };
-    },
     hideAIAssistanceModal() {
       this.recordAnalytics('DISMISS_AI_SUGGESTION', {
         aiOption: this.aiOption,
@@ -111,7 +96,7 @@ export default {
           is_open_ai_cta_modal_dismissed: true,
         });
       }
-      this.initialMessage = this.draftMessage;
+      this.initializeMessage(this.draftMessage);
       const ninja = document.querySelector('ninja-keys');
       ninja.open({ parent: 'ai_assist' });
     },
@@ -126,8 +111,44 @@ export default {
       this.showAIAssistanceModal = true;
     },
     insertText(message) {
-      this.$emit('replace-text', message);
+      this.$emit('replaceText', message);
     },
   },
 };
 </script>
+
+<template>
+  <div ref="aiAssistanceButtonRef">
+    <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 1553112469d63..fb57232adc5fe 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 df30d461dbb2d..5435407f0018d 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 b094c42c8cb6f..b68da39d8dd2a 100644
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/app/javascript/dashboard/components/widgets/AICTAModal.vue
@@ -1,51 +1,19 @@
-<template>
-  <div class="px-0 min-w-0 flex-1">
-    <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-wrap flex-col modal-content"
-      @submit.prevent="finishOpenAI"
-    >
-      <div class="mt-2 w-full">
-        <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 gap-2 py-2 px-0 w-full">
-        <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 { required } from 'vuelidate/lib/validators';
-import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import aiMixin from 'dashboard/mixins/aiMixin';
-import alertMixin from 'shared/mixins/alertMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 export default {
-  mixins: [aiMixin, alertMixin, uiSettingsMixin],
+  mixins: [aiMixin],
+  setup() {
+    const { updateUISettings } = useUISettings();
+    const v$ = useVuelidate();
+
+    return { updateUISettings, v$ };
+  },
   data() {
     return {
       value: '',
@@ -56,18 +24,13 @@ export default {
       required,
     },
   },
-  computed: {
-    ...mapGetters({
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
-  },
   methods: {
     onClose() {
       this.$emit('close');
     },
 
     onDismiss() {
-      this.showAlert(
+      useAlert(
         this.$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DISMISS_MESSAGE')
       );
       this.updateUISettings({
@@ -97,7 +60,7 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('INTEGRATION_APPS.ADD.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     openOpenAIDoc() {
@@ -106,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 cc28794732784..ad6735251a4f2 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 32af9e4991fe4..69d559509c021 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -1,43 +1,3 @@
-<template>
-  <div class="flex overflow-auto max-h-[12.5rem]">
-    <div
-      v-for="(attachment, index) in nonRecordedAudioAttachments"
-      :key="attachment.id"
-      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
-    >
-      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
-        <img
-          v-if="isTypeImage(attachment.resource)"
-          class="object-cover w-6 h-6 rounded-sm"
-          :src="attachment.thumb"
-        />
-        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
-          📄
-        </span>
-      </div>
-      <div class="max-w-3/5 min-w-[50%] overflow-hidden text-ellipsis">
-        <span
-          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
-        >
-          {{ fileName(attachment.resource) }}
-        </span>
-      </div>
-      <div class="w-[30%] justify-center">
-        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
-          {{ formatFileSize(attachment.resource) }}
-        </span>
-      </div>
-      <div class="flex items-center justify-center">
-        <woot-button
-          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
-          icon="dismiss"
-          @click="onRemoveAttachment(index)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import { formatBytes } from 'shared/helpers/FileHelper';
@@ -49,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['remove-attachment']);
+const emit = defineEmits(['removeAttachment']);
 
 const nonRecordedAudioAttachments = computed(() => {
   return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
@@ -60,8 +20,8 @@ const recordedAudioAttachments = computed(() =>
 );
 
 const onRemoveAttachment = itemIndex => {
-  emits(
-    'remove-attachment',
+  emit(
+    'removeAttachment',
     nonRecordedAudioAttachments.value
       .filter((_, index) => index !== itemIndex)
       .concat(recordedAudioAttachments.value)
@@ -82,3 +42,43 @@ const fileName = file => {
   return file.filename || file.name;
 };
 </script>
+
+<template>
+  <div class="flex overflow-auto max-h-[12.5rem]">
+    <div
+      v-for="(attachment, index) in nonRecordedAudioAttachments"
+      :key="attachment.id"
+      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
+    >
+      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
+        <img
+          v-if="isTypeImage(attachment.resource)"
+          class="object-cover w-6 h-6 rounded-sm"
+          :src="attachment.thumb"
+        />
+        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
+          📄
+        </span>
+      </div>
+      <div class="max-w-3/5 min-w-[50%] overflow-hidden text-ellipsis">
+        <span
+          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
+        >
+          {{ fileName(attachment.resource) }}
+        </span>
+      </div>
+      <div class="w-[30%] justify-center">
+        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
+          {{ formatFileSize(attachment.resource) }}
+        </span>
+      </div>
+      <div class="flex items-center justify-center">
+        <woot-button
+          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
+          icon="dismiss"
+          @click="onRemoveAttachment(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index a94667fcd241e..28810fd4e342e 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -1,3 +1,97 @@
+<script>
+import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
+import AutomationActionFileInput from './AutomationFileInput.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+export default {
+  components: {
+    AutomationActionTeamMessageInput,
+    AutomationActionFileInput,
+    WootMessageEditor,
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => null,
+    },
+    actionTypes: {
+      type: Array,
+      default: () => [],
+    },
+    dropdownValues: {
+      type: Array,
+      default: () => [],
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    showActionInput: {
+      type: Boolean,
+      default: true,
+    },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
+    isMacro: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    action_name: {
+      get() {
+        if (!this.value) return null;
+        return this.value.action_name;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, action_name: value });
+      },
+    },
+    action_params: {
+      get() {
+        if (!this.value) return null;
+        return this.value.action_params;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, action_params: value });
+      },
+    },
+    inputType() {
+      return this.actionTypes.find(action => action.key === this.action_name)
+        .inputType;
+    },
+    actionInputStyles() {
+      return {
+        'has-error': this.errorMessage,
+        'is-a-macro': this.isMacro,
+      };
+    },
+    castMessageVmodel: {
+      get() {
+        if (Array.isArray(this.action_params)) {
+          return this.action_params[0];
+        }
+        return this.action_params;
+      },
+      set(value) {
+        this.action_params = value;
+      },
+    },
+  },
+  methods: {
+    removeAction() {
+      this.$emit('removeAction');
+    },
+    resetAction() {
+      this.$emit('resetAction');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="filter" :class="actionInputStyles">
     <div class="filter-inputs">
@@ -44,7 +138,7 @@
               track-by="id"
               label="name"
               :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              :multiple="true"
+              multiple
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
@@ -59,16 +153,16 @@
             v-model="action_params"
             type="email"
             class="answer--text-input"
-            placeholder="Enter email"
+            :placeholder="$t('AUTOMATION.ACTION.EMAIL_INPUT_PLACEHOLDER')"
           />
           <input
             v-else-if="inputType === 'url'"
             v-model="action_params"
             type="url"
             class="answer--text-input"
-            placeholder="Enter url"
+            :placeholder="$t('AUTOMATION.ACTION.URL_INPUT_PLACEHOLDER')"
           />
-          <automation-action-file-input
+          <AutomationActionFileInput
             v-if="inputType === 'attachment'"
             v-model="action_params"
             :initial-file-name="initialFileName"
@@ -83,122 +177,25 @@
         @click="removeAction"
       />
     </div>
-    <automation-action-team-message-input
+    <AutomationActionTeamMessageInput
       v-if="inputType === 'team_message'"
       v-model="action_params"
       :teams="dropdownValues"
     />
-    <woot-message-editor
+    <WootMessageEditor
       v-if="inputType === 'textarea'"
       v-model="castMessageVmodel"
       rows="4"
-      :enable-variables="true"
+      enable-variables
       :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
       class="action-message"
     />
-    <p
-      v-if="v.action_params.$dirty && v.action_params.$error"
-      class="filter-error"
-    >
-      {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+    <p v-if="errorMessage" class="filter-error">
+      {{ errorMessage }}
     </p>
   </div>
 </template>
 
-<script>
-import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
-import AutomationActionFileInput from './AutomationFileInput.vue';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-export default {
-  components: {
-    AutomationActionTeamMessageInput,
-    AutomationActionFileInput,
-    WootMessageEditor,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => null,
-    },
-    actionTypes: {
-      type: Array,
-      default: () => [],
-    },
-    dropdownValues: {
-      type: Array,
-      default: () => [],
-    },
-    v: {
-      type: Object,
-      default: () => null,
-    },
-    showActionInput: {
-      type: Boolean,
-      default: true,
-    },
-    initialFileName: {
-      type: String,
-      default: '',
-    },
-    isMacro: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    action_name: {
-      get() {
-        if (!this.value) return null;
-        return this.value.action_name;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, action_name: value });
-      },
-    },
-    action_params: {
-      get() {
-        if (!this.value) return null;
-        return this.value.action_params;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, action_params: value });
-      },
-    },
-    inputType() {
-      return this.actionTypes.find(action => action.key === this.action_name)
-        .inputType;
-    },
-    actionInputStyles() {
-      return {
-        'has-error': this.v.action_params.$dirty && this.v.action_params.$error,
-        'is-a-macro': this.isMacro,
-      };
-    },
-    castMessageVmodel: {
-      get() {
-        if (Array.isArray(this.action_params)) {
-          return this.action_params[0];
-        }
-        return this.action_params;
-      },
-      set(value) {
-        this.action_params = value;
-      },
-    },
-  },
-  methods: {
-    removeAction() {
-      this.$emit('removeAction');
-    },
-    resetAction() {
-      this.$emit('resetAction');
-    },
-  },
-};
-</script>
-
 <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 61eb74f22fd78..1188ad28165ce 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 e25245dca6fb4..8cd1c6b004737 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -1,43 +1,11 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {
     Spinner,
   },
-  mixins: [alertMixin],
   props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
     initialFileName: {
       type: String,
       default: '',
@@ -71,13 +39,40 @@ export default {
       } catch (error) {
         this.uploadState = 'failed';
         this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOAD_FAILED');
-        this.showAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
+        useAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
       }
     },
   },
 };
 </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 1fad70eefaa5d..2c7ad01c02025 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 2528aada751cf..5051b2599dad5 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,34 +1,40 @@
+<script setup>
+import router from '../../routes/index';
+const props = defineProps({
+  backUrl: {
+    type: [String, Object],
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const goBack = () => {
+  if (props.backUrl !== '') {
+    router.push(props.backUrl);
+  } else {
+    router.go(-1);
+  }
+};
+
+const buttonStyleClass = props.compact
+  ? 'text-sm text-slate-600 dark:text-slate-300'
+  : 'text-base text-woot-500 dark:text-woot-500';
+</script>
+
 <template>
   <button
-    class="header-section flex items-center text-base font-normal mr-4 ml-2 p-0 cursor-pointer text-woot-500 dark:text-woot-500"
+    class="flex items-center p-0 font-normal cursor-pointer"
+    :class="buttonStyleClass"
     @click.capture="goBack"
   >
-    <fluent-icon icon="chevron-left" />
+    <fluent-icon icon="chevron-left" class="-ml-1" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>
 </template>
-<script>
-import router from '../../routes/index';
-
-export default {
-  props: {
-    backUrl: {
-      type: [String, Object],
-      default: '',
-    },
-    buttonLabel: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    goBack() {
-      if (this.backUrl !== '') {
-        router.push(this.backUrl);
-      } else {
-        router.go(-1);
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index fe47f3b9677b6..95bd7d0e1d10d 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 86e80748d70da..afcf1e83964c1 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,53 +1,70 @@
-<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>
+<script setup>
+import { ref, computed } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import wootConstants from 'dashboard/constants/globals';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-
-export default {
-  mixins: [keyboardEventListenerMixins],
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    activeTab: {
-      type: String,
-      default: wootConstants.ASSIGNEE_TYPE.ME,
-    },
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
   },
-  computed: {
-    activeTabIndex() {
-      return this.items.findIndex(item => item.key === this.activeTab);
-    },
+  activeTab: {
+    type: String,
+    default: wootConstants.ASSIGNEE_TYPE.ME,
   },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyN': {
-          action: () => {
-            if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
-              this.onTabChange(0);
-            } else {
-              this.onTabChange(this.activeTabIndex + 1);
-            }
-          },
-        },
-      };
-    },
-    onTabChange(selectedTabIndex) {
-      if (this.items[selectedTabIndex].key !== this.activeTab) {
-        this.$emit('chatTabChange', this.items[selectedTabIndex].key);
+});
+
+const emit = defineEmits(['chatTabChange']);
+
+const chatTypeTabsRef = ref(null);
+
+const activeTabIndex = computed(() => {
+  return props.items.findIndex(item => item.key === props.activeTab);
+});
+
+const onTabChange = selectedTabIndex => {
+  if (props.items[selectedTabIndex].key !== props.activeTab) {
+    emit('chatTabChange', props.items[selectedTabIndex].key);
+  }
+};
+
+const keyboardEvents = {
+  'Alt+KeyN': {
+    action: () => {
+      if (props.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
+        onTabChange(0);
+      } else {
+        onTabChange(activeTabIndex.value + 1);
       }
     },
   },
 };
+useKeyboardEvents(keyboardEvents, chatTypeTabsRef);
 </script>
+
+<template>
+  <div ref="chatTypeTabsRef">
+    <woot-tabs
+      :index="activeTabIndex"
+      class="tab--chat-type py-0 px-4 w-full"
+      @change="onTabChange"
+    >
+      <woot-tabs-item
+        v-for="item in items"
+        :key="item.key"
+        :name="item.name"
+        :count="item.count"
+      />
+    </woot-tabs>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tab--chat-type {
+  ::v-deep {
+    .tabs {
+      @apply p-0;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 12b9124cfb74a..732de3ced4db7 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 a13c3510ad5ce..824ff58cad20e 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 fe7b03942eab1..6e21019176c50 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 ec7759a9cdc58..1149220424dc4 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 bbccf77bd93d4..c0369f5ebc51b 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -1,9 +1,143 @@
+<script>
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: () => null,
+    },
+    filterAttributes: {
+      type: Array,
+      default: () => [],
+    },
+    inputType: {
+      type: String,
+      default: 'plain_text',
+    },
+    operators: {
+      type: Array,
+      default: () => [],
+    },
+    dropdownValues: {
+      type: Array,
+      default: () => [],
+    },
+    showQueryOperator: {
+      type: Boolean,
+      default: false,
+    },
+    showUserInput: {
+      type: Boolean,
+      default: true,
+    },
+    groupedFilters: {
+      type: Boolean,
+      default: false,
+    },
+    filterGroups: {
+      type: Array,
+      default: () => [],
+    },
+    customAttributeType: {
+      type: String,
+      default: '',
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    attributeKey: {
+      get() {
+        if (!this.value) return null;
+        return this.value.attribute_key;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, attribute_key: value });
+      },
+    },
+    filterOperator: {
+      get() {
+        if (!this.value) return null;
+        return this.value.filter_operator;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, filter_operator: value });
+      },
+    },
+    values: {
+      get() {
+        if (!this.value) return null;
+        return this.value.values;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, values: value });
+      },
+    },
+    query_operator: {
+      get() {
+        if (!this.value) return null;
+        return this.value.query_operator;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, query_operator: value });
+      },
+    },
+    custom_attribute_type: {
+      get() {
+        if (!this.customAttributeType) return '';
+        return this.customAttributeType;
+      },
+      set() {
+        const payload = this.value || {};
+        this.$emit('input', {
+          ...payload,
+          custom_attribute_type: this.customAttributeType,
+        });
+      },
+    },
+  },
+  watch: {
+    customAttributeType: {
+      handler(value) {
+        if (
+          value === 'conversation_attribute' ||
+          value === 'contact_attribute'
+        ) {
+          // eslint-disable-next-line vue/no-mutating-props
+          this.value.custom_attribute_type = this.customAttributeType;
+          // eslint-disable-next-line vue/no-mutating-props
+        } else this.value.custom_attribute_type = '';
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    removeFilter() {
+      this.$emit('removeFilter');
+    },
+    resetFilter() {
+      this.$emit('resetFilter');
+    },
+    getInputErrorClass(errorMessage) {
+      return errorMessage
+        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
+        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
+    },
+  },
+};
+</script>
+
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div
-      class="rounded-md p-2 border border-solid"
-      :class="getInputErrorClass(v.values.$dirty, v.values.$error)"
+      class="p-2 border border-solid rounded-md"
+      :class="getInputErrorClass(errorMessage)"
     >
       <div class="flex">
         <select
@@ -55,7 +189,7 @@
           </option>
         </select>
 
-        <div v-if="showUserInput" class="filter__answer--wrap mr-1 flex-grow">
+        <div v-if="showUserInput" class="flex-grow mr-1 filter__answer--wrap">
           <div
             v-if="inputType === 'multi_select'"
             class="multiselect-wrap--small"
@@ -64,8 +198,8 @@
               v-model="values"
               track-by="id"
               label="name"
-              :placeholder="'Select'"
-              :multiple="true"
+              placeholder="Select"
+              multiple
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
@@ -82,7 +216,7 @@
               v-model="values"
               track-by="id"
               label="name"
-              :placeholder="'Select'"
+              placeholder="Select"
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
@@ -105,7 +239,7 @@
             v-model="values"
             type="text"
             class="mb-0"
-            placeholder="Enter value"
+            :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
           />
         </div>
         <woot-button
@@ -115,8 +249,8 @@
           @click="removeFilter"
         />
       </div>
-      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
-        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+      <p v-if="errorMessage" class="filter-error">
+        {{ errorMessage }}
       </p>
     </div>
 
@@ -125,11 +259,11 @@
       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"
+        class="absolute w-full 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"
+        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') }}
@@ -142,143 +276,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: () => null,
-    },
-    filterAttributes: {
-      type: Array,
-      default: () => [],
-    },
-    inputType: {
-      type: String,
-      default: 'plain_text',
-    },
-    dataType: {
-      type: String,
-      default: 'plain_text',
-    },
-    operators: {
-      type: Array,
-      default: () => [],
-    },
-    dropdownValues: {
-      type: Array,
-      default: () => [],
-    },
-    showQueryOperator: {
-      type: Boolean,
-      default: false,
-    },
-    v: {
-      type: Object,
-      default: () => null,
-    },
-    showUserInput: {
-      type: Boolean,
-      default: true,
-    },
-    groupedFilters: {
-      type: Boolean,
-      default: false,
-    },
-    filterGroups: {
-      type: Array,
-      default: () => [],
-    },
-    customAttributeType: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    attributeKey: {
-      get() {
-        if (!this.value) return null;
-        return this.value.attribute_key;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, attribute_key: value });
-      },
-    },
-    filterOperator: {
-      get() {
-        if (!this.value) return null;
-        return this.value.filter_operator;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, filter_operator: value });
-      },
-    },
-    values: {
-      get() {
-        if (!this.value) return null;
-        return this.value.values;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, values: value });
-      },
-    },
-    query_operator: {
-      get() {
-        if (!this.value) return null;
-        return this.value.query_operator;
-      },
-      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, query_operator: value });
-      },
-    },
-    custom_attribute_type: {
-      get() {
-        if (!this.customAttributeType) return '';
-        return this.customAttributeType;
-      },
-      set() {
-        const payload = this.value || {};
-        this.$emit('input', {
-          ...payload,
-          custom_attribute_type: this.customAttributeType,
-        });
-      },
-    },
-  },
-  watch: {
-    customAttributeType: {
-      handler(value) {
-        if (
-          value === 'conversation_attribute' ||
-          value === 'contact_attribute'
-        ) {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.value.custom_attribute_type = this.customAttributeType;
-          // eslint-disable-next-line vue/no-mutating-props
-        } else this.value.custom_attribute_type = '';
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    removeFilter() {
-      this.$emit('removeFilter');
-    },
-    resetFilter() {
-      this.$emit('resetFilter');
-    },
-    getInputErrorClass(isDirty, hasError) {
-      return isDirty && hasError
-        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
-        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
-    },
-  },
-};
-</script>
 <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 6d5efdf90bfb3..e2a9a9d46fa7c 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 8b604b323bf9b..9a43d5f45a05e 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 97da49ac72f4c..032401561b478 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -1,22 +1,88 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+
+const props = defineProps({
+  allLabels: {
+    type: Array,
+    default: () => [],
+  },
+  savedLabels: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['add', 'remove']);
+
+const labelSelectorWrapRef = ref(null);
+
+const { isAdmin } = useAdmin();
+
+const showSearchDropdownLabel = ref(false);
+
+const selectedLabels = computed(() => {
+  return props.savedLabels.map(label => label.title);
+});
+
+const addItem = label => {
+  emit('add', label);
+};
+
+const removeItem = label => {
+  emit('remove', label);
+};
+
+const toggleLabels = () => {
+  showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
+};
+
+const closeDropdownLabel = () => {
+  showSearchDropdownLabel.value = false;
+};
+
+const keyboardEvents = {
+  KeyL: {
+    action: e => {
+      toggleLabels();
+      e.preventDefault();
+    },
+  },
+  Escape: {
+    action: () => closeDropdownLabel(),
+    allowOnFocusedInput: true,
+  },
+};
+
+useKeyboardEvents(keyboardEvents, labelSelectorWrapRef);
+</script>
+
 <template>
-  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
-    <add-label @add="toggleLabels" />
+  <div
+    ref="labelSelectorWrapRef"
+    v-on-clickaway="closeDropdownLabel"
+    class="relative leading-6"
+  >
+    <AddLabel @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
       :key="label.id"
       :title="label.title"
       :description="label.description"
-      :show-close="true"
+      show-close
       :color="label.color"
       variant="smooth"
       @click="removeItem"
     />
-    <div class="dropdown-wrap">
+    <div class="absolute w-full top-7">
       <div
         :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-        class="dropdown-pane"
+        class="!box-border !w-full dropdown-pane"
       >
-        <label-dropdown
+        <LabelDropdown
           v-if="showSearchDropdownLabel"
           :account-labels="allLabels"
           :selected-labels="selectedLabels"
@@ -28,99 +94,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-import adminMixin from 'dashboard/mixins/isAdmin';
-
-export default {
-  components: {
-    AddLabel,
-    LabelDropdown,
-  },
-
-  mixins: [adminMixin, keyboardEventListenerMixins],
-
-  props: {
-    allLabels: {
-      type: Array,
-      default: () => [],
-    },
-    savedLabels: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  data() {
-    return {
-      showSearchDropdownLabel: false,
-    };
-  },
-
-  computed: {
-    selectedLabels() {
-      return this.savedLabels.map(label => label.title);
-    },
-  },
-
-  methods: {
-    addItem(label) {
-      this.$emit('add', label);
-    },
-
-    removeItem(label) {
-      this.$emit('remove', label);
-    },
-
-    toggleLabels() {
-      this.showSearchDropdownLabel = !this.showSearchDropdownLabel;
-    },
-
-    closeDropdownLabel() {
-      this.showSearchDropdownLabel = false;
-    },
-    getKeyboardEvents() {
-      return {
-        KeyL: {
-          action: e => {
-            this.toggleLabels();
-            e.preventDefault();
-          },
-        },
-        Escape: {
-          action: () => this.closeDropdownLabel(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.title-icon {
-  margin-right: var(--space-smaller);
-}
-
-.label-wrap {
-  position: relative;
-  line-height: var(--space-medium);
-
-  .dropdown-wrap {
-    display: flex;
-    position: absolute;
-    margin-right: var(--space-medium);
-    top: var(--space-medium);
-    width: 100%;
-    left: -1px;
-
-    .dropdown-pane {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index 76aaef3eb6bdc..dfba6b43e6344 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 9f99d5ba28424..c2e6c48c32b02 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 9808891226c0a..c17c32e2a9bd6 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 b3a671771a5ad..7809cfdb2f0ad 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 38ebdc69cd5b3..6c9a3899524c5 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 305933059fea6..23a3c3a0d6685 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 8e2cd63264e55..ce3cb21ac8b85 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 6c864e95b8a9b..7b222aa7e5603 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 a9c521bbba328..5f35f62fa8552 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 07e3e5ed689da..d54e7ea4f67dc 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 12050c8111ae4..4f6ebf81d4ccf 100644
--- a/app/javascript/dashboard/components/widgets/VideoCallButton.vue
+++ b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
@@ -1,24 +1,9 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     conversationId: {
       type: Number,
@@ -47,7 +32,7 @@ export default {
       try {
         await DyteAPI.createAMeeting(this.conversationId);
       } catch (error) {
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.CREATE_ERROR'));
+        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.CREATE_ERROR'));
       } finally {
         this.isLoading = false;
       }
@@ -55,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 aa566fd4db349..0e04c3c5deafd 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';
@@ -11,7 +5,7 @@ import 'videojs-record/dist/css/videojs.record.css';
 
 import videojs from 'video.js';
 
-import alertMixin from '../../../../shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 import Recorder from 'opus-recorder';
 
@@ -50,16 +44,11 @@ const RECORDER_CONFIG = {
 
 export default {
   name: 'WootAudioRecorder',
-  mixins: [alertMixin],
   props: {
     audioRecordFormat: {
       type: String,
       default: AUDIO_FORMATS.WAV,
     },
-    isAWhatsAppChannel: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -188,14 +177,10 @@ export default {
         deviceErrorName?.includes('notallowederror') ||
         deviceErrorName?.includes('permissiondeniederror')
       ) {
-        this.showAlert(
-          this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_PERMISSION')
-        );
+        useAlert(this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_PERMISSION'));
         this.fireStateRecorderChanged('notallowederror');
       } else {
-        this.showAlert(
-          this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ERROR')
-        );
+        useAlert(this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ERROR'));
       }
     },
     formatTimeProgress() {
@@ -228,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,
@@ -236,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 52b73c405cb6e..8fe929354fb48 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,
@@ -80,8 +34,7 @@ import {
   hasPressedCommandAndEnter,
 } from 'shared/helpers/KeyboardHelpers';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import {
   replaceVariablesInMessage,
   createTypingIndicator,
@@ -89,7 +42,7 @@ import {
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import {
   MESSAGE_EDITOR_MENU_OPTIONS,
   MESSAGE_EDITOR_IMAGE_RESIZES,
@@ -119,7 +72,7 @@ const createState = (
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse, VariableList },
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
@@ -139,14 +92,27 @@ export default {
     channelType: { type: String, default: '' },
     showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
   },
+  setup() {
+    const {
+      uiSettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    } = useUISettings();
+
+    return {
+      uiSettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    };
+  },
   data() {
     return {
       typingIndicator: createTypingIndicator(
         () => {
-          this.$emit('typing-on');
+          this.$emit('typingOn');
         },
         () => {
-          this.$emit('typing-off');
+          this.$emit('typingOff');
         },
         TYPING_INDICATOR_IDLE_TIME
       ),
@@ -278,7 +244,7 @@ export default {
       // this is considered the source of truth, we watch this property
       // on change, we toggle the signature in the editor
       if (this.allowSignature && !this.isPrivate && this.channelType) {
-        return this.fetchSignatureFlagFromUiSettings(this.channelType);
+        return this.fetchSignatureFlagFromUISettings(this.channelType);
       }
 
       return false;
@@ -286,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) {
@@ -321,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;
@@ -521,10 +487,10 @@ export default {
       }
     },
     isEnterToSendEnabled() {
-      return isEditorHotKeyEnabled(this.uiSettings, 'enter');
+      return this.isEditorHotKeyEnabled('enter');
     },
     isCmdPlusEnterToSendEnabled() {
-      return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
+      return this.isEditorHotKeyEnabled('cmd_enter');
     },
     getKeyboardEvents() {
       return {
@@ -611,7 +577,7 @@ export default {
       if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
         this.uploadImageToStorage(file);
       } else {
-        this.showAlert(
+        useAlert(
           this.$t(
             'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR',
             {
@@ -629,13 +595,13 @@ export default {
         if (fileUrl) {
           this.onImageInsertInEditor(fileUrl);
         }
-        this.showAlert(
+        useAlert(
           this.$t(
             'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS'
           )
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t(
             'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_ERROR'
           )
@@ -716,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 df676e35c201e..ab4be93427f27 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,
@@ -24,9 +9,9 @@ import {
   Selection,
 } from '@chatwoot/prosemirror-schema';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const createState = (
@@ -51,13 +36,21 @@ const createState = (
 };
 
 export default {
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
   },
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       editorView: null,
@@ -108,7 +101,7 @@ export default {
       if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
         this.uploadImageToStorage(file);
       } else {
-        this.showAlert(
+        useAlert(
           this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR_FILE_SIZE', {
             size: MAXIMUM_FILE_UPLOAD_SIZE,
           })
@@ -127,13 +120,9 @@ export default {
         if (fileUrl) {
           this.onImageUploadStart(fileUrl);
         }
-        this.showAlert(
-          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.SUCCESS')
-        );
+        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.SUCCESS'));
       } catch (error) {
-        this.showAlert(
-          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR')
-        );
+        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR'));
       }
     },
     onImageUploadStart(fileUrl) {
@@ -219,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 d0b31ec8b7dd0..e4ab0b41d0202 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -1,143 +1,9 @@
-<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 { ref, watchEffect, computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
@@ -153,7 +19,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, inboxMixin],
+  mixins: [inboxMixin],
   props: {
     mode: {
       type: String,
@@ -171,6 +37,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 +56,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    showEmojiPicker: {
-      type: Boolean,
-      default: false,
-    },
     toggleEmojiPicker: {
       type: Function,
       default: () => {},
@@ -248,10 +113,43 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
+      useUISettings();
+
+    const uploadRef = ref(null);
+    // TODO: This is really hacky, we need to replace the file picker component with
+    // a custom one, where the logic and the component markup is isolated.
+    // Once we have the custom component, we can remove the hacky logic below.
+    const uploadRefElem = computed(() => uploadRef.value?.$el);
+
+    const keyboardEvents = {
+      'Alt+KeyA': {
+        action: () => {
+          const uploadTriggerButton = document.querySelector(
+            '#conversationAttachment'
+          );
+          uploadTriggerButton.click();
+        },
+        allowOnFocusedInput: true,
+      },
+    };
+
+    watchEffect(() => {
+      useKeyboardEvents(keyboardEvents, uploadRefElem);
+    });
+
+    return {
+      setSignatureFlagForInbox,
+      fetchSignatureFlagFromUISettings,
+      uploadRef,
+    };
+  },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      uiFlags: 'integrations/getUIFlags',
     }),
     isNote() {
       return this.mode === REPLY_EDITOR_MODES.NOTE;
@@ -320,7 +218,7 @@ export default {
     },
     sendWithSignature() {
       // channelType is sourced from inboxMixin
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     signatureToggleTooltip() {
       return this.sendWithSignature
@@ -334,34 +232,163 @@ export default {
       );
       return isFeatEnabled && this.portalSlug;
     },
+    isFetchingAppIntegrations() {
+      return this.uiFlags.isFetching;
+    },
   },
   mounted() {
     ActiveStorage.start();
   },
   methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyA': {
-          action: () => {
-            this.$refs.upload.$children[1].$el.click();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
     toggleMessageSignature() {
       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="uploadRef"
+        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
+        v-if="!isFetchingAppIntegrations"
+        :conversation-id="conversationId"
+        :is-private-note="isOnPrivateNote"
+        :message="message"
+        @replaceText="replaceText"
+      />
+      <transition name="modal-fade">
+        <div
+          v-show="$refs.uploadRef && $refs.uploadRef.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 d916116acf5b9..280b3ca422772 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,5 +1,85 @@
+<script>
+import { ref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
+export default {
+  name: 'ReplyTopPanel',
+  props: {
+    mode: {
+      type: String,
+      default: REPLY_EDITOR_MODES.REPLY,
+    },
+    isMessageLengthReachingThreshold: {
+      type: Boolean,
+      default: () => false,
+    },
+    charactersRemaining: {
+      type: Number,
+      default: () => 0,
+    },
+    popoutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const replyTopRef = ref(null);
+
+    const setReplyMode = mode => {
+      emit('setReplyMode', mode);
+    };
+    const handleReplyClick = () => {
+      setReplyMode(REPLY_EDITOR_MODES.REPLY);
+    };
+    const handleNoteClick = () => {
+      setReplyMode(REPLY_EDITOR_MODES.NOTE);
+    };
+    const keyboardEvents = {
+      'Alt+KeyP': {
+        action: () => handleNoteClick(),
+        allowOnFocusedInput: true,
+      },
+      'Alt+KeyL': {
+        action: () => handleReplyClick(),
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, replyTopRef);
+
+    return {
+      handleReplyClick,
+      handleNoteClick,
+      replyTopRef,
+    };
+  },
+  computed: {
+    replyButtonClass() {
+      return {
+        'is-active': this.mode === REPLY_EDITOR_MODES.REPLY,
+      };
+    },
+    noteButtonClass() {
+      return {
+        'is-active': this.mode === REPLY_EDITOR_MODES.NOTE,
+      };
+    },
+    charLengthClass() {
+      return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
+    },
+    characterLengthWarning() {
+      return this.charactersRemaining < 0
+        ? `${-this.charactersRemaining} ${CHAR_LENGTH_WARNING.NEGATIVE}`
+        : `${this.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
+    },
+  },
+};
+</script>
+
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+  <div
+    ref="replyTopRef"
+    class="flex justify-between bg-black-50 dark:bg-slate-800"
+  >
     <div class="button-group">
       <woot-button
         variant="clear"
@@ -46,77 +126,6 @@
   </div>
 </template>
 
-<script>
-import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-export default {
-  name: 'ReplyTopPanel',
-  mixins: [keyboardEventListenerMixins],
-  props: {
-    mode: {
-      type: String,
-      default: REPLY_EDITOR_MODES.REPLY,
-    },
-    setReplyMode: {
-      type: Function,
-      default: () => {},
-    },
-    isMessageLengthReachingThreshold: {
-      type: Boolean,
-      default: () => false,
-    },
-    charactersRemaining: {
-      type: Number,
-      default: () => 0,
-    },
-    popoutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    replyButtonClass() {
-      return {
-        'is-active': this.mode === REPLY_EDITOR_MODES.REPLY,
-      };
-    },
-    noteButtonClass() {
-      return {
-        'is-active': this.mode === REPLY_EDITOR_MODES.NOTE,
-      };
-    },
-    charLengthClass() {
-      return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
-    },
-    characterLengthWarning() {
-      return this.charactersRemaining < 0
-        ? `${-this.charactersRemaining} ${CHAR_LENGTH_WARNING.NEGATIVE}`
-        : `${this.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
-    },
-  },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyP': {
-          action: () => this.handleNoteClick(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyL': {
-          action: () => this.handleReplyClick(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-    handleReplyClick() {
-      this.setReplyMode(REPLY_EDITOR_MODES.REPLY);
-    },
-    handleNoteClick() {
-      this.setReplyMode(REPLY_EDITOR_MODES.NOTE);
-    },
-  },
-};
-</script>
-
 <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 e6d826d48ba57..97461667ad96f 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 c744eaa064001..1600a9cffc7af 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 c0752a4782db4..b0be891609b26 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -1,86 +1,5 @@
-<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="folder-input border-slate-75 dark:border-slate-600 bg-white 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 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
-      >
-        <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"
-          :v="$v.appliedFilters.$each[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 gap-2 py-2 px-0 w-full">
-          <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 alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { useAlert } from 'dashboard/composables';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
@@ -89,12 +8,13 @@ import { filterAttributeGroups } from './advancedFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
 
 export default {
   components: {
     FilterInputBox,
   },
-  mixins: [alertMixin, filterMixin],
+  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -117,27 +37,6 @@ export default {
       default: false,
     },
   },
-  validations: {
-    appliedFilters: {
-      required,
-      $each: {
-        values: {
-          ensureBetween0to999(value, prop) {
-            if (prop.filter_operator === 'days_before') {
-              return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
-            }
-            return true;
-          },
-          required: requiredIf(prop => {
-            return !(
-              prop.filter_operator === 'is_present' ||
-              prop.filter_operator === 'is_not_present'
-            );
-          }),
-        },
-      },
-    },
-  },
   data() {
     return {
       show: true,
@@ -149,6 +48,7 @@ export default {
       allCustomAttributes: [],
       attributeModel: 'conversation_attribute',
       filtersFori18n: 'FILTER',
+      validationErrors: {},
     };
   },
   computed: {
@@ -341,26 +241,29 @@ export default {
     },
     removeFilter(index) {
       if (this.appliedFilters.length <= 1) {
-        this.showAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
+        useAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
       } else {
         this.appliedFilters.splice(index, 1);
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$store.dispatch(
-        'setConversationFilters',
-        JSON.parse(JSON.stringify(this.appliedFilters))
+      this.validationErrors = validateConversationOrContactFilters(
+        this.appliedFilters
       );
-      this.$emit('applyFilter', this.appliedFilters);
-      this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {
-        applied_filters: this.appliedFilters.map(filter => ({
-          key: filter.attribute_key,
-          operator: filter.filter_operator,
-          query_operator: filter.query_operator,
-        })),
-      });
+      if (Object.keys(this.validationErrors).length === 0) {
+        this.$store.dispatch(
+          'setConversationFilters',
+          JSON.parse(JSON.stringify(this.appliedFilters))
+        );
+        this.$emit('applyFilter', this.appliedFilters);
+        this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {
+          applied_filters: this.appliedFilters.map(filter => ({
+            key: filter.attribute_key,
+            operator: filter.filter_operator,
+            query_operator: filter.query_operator,
+          })),
+        });
+      }
     },
     updateSavedCustomViews() {
       this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);
@@ -379,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 fbf99a631094d..9a822ccffc70a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -1,58 +1,20 @@
-<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="dropdown-pane dropdown-pane--open mt-1 right-0 basic-filter"
-    >
-      <div class="items-center flex justify-between last:mt-4">
-        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
-          $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="items-center flex justify-between last:mt-4">
-        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
-          $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';
 import FilterItem from './FilterItem.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
   components: {
     FilterItem,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { updateUISettings } = useUISettings();
+
+    return {
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showActionsDropdown: false,
@@ -100,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 2ad77452d93fe..9f0b6d1d764e1 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 777c9fdcd8456..0685ebc53b879 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -1,132 +1,13 @@
-<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 { getLastMessage } from 'dashboard/helper/conversationHelper';
 import Thumbnail from '../Thumbnail.vue';
 import MessagePreview from './MessagePreview.vue';
-import conversationMixin from '../../../mixins/conversations';
-import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
 import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
@@ -143,8 +24,7 @@ export default {
     PriorityMark,
     SLACardLabel,
   },
-
-  mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
+  mixins: [inboxMixin],
   props: {
     activeLabel: {
       type: String,
@@ -202,7 +82,6 @@ export default {
       currentChat: 'getSelectedChat',
       inboxesList: 'inboxes/getInboxes',
       activeInbox: 'getSelectedInbox',
-      currentUser: 'getCurrentUser',
       accountId: 'getCurrentAccountId',
     }),
     bulkActionCheck() {
@@ -239,7 +118,7 @@ export default {
     },
 
     lastMessageInChat() {
-      return this.lastMessage(this.chat);
+      return getLastMessage(this.chat);
     },
 
     inbox() {
@@ -299,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;
@@ -319,35 +198,157 @@ 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"
+        :conversation-labels="chat.labels"
+        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 64ae3682463f1..428e5549f2b91 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,90 +1,9 @@
-<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 { ref } from 'vue';
 import { mapGetters } from 'vuex';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import agentMixin from '../../../mixins/agentMixin.js';
 import BackButton from '../BackButton.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
@@ -105,7 +24,7 @@ export default {
     SLACardLabel,
     Linear,
   },
-  mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
+  mixins: [inboxMixin, agentMixin],
   props: {
     chat: {
       type: Object,
@@ -124,9 +43,22 @@ export default {
       default: false,
     },
   },
+  setup(props, { emit }) {
+    const conversationHeaderActionsRef = ref(null);
+
+    const keyboardEvents = {
+      'Alt+KeyO': {
+        action: () => emit('contactPanelToggle'),
+      },
+    };
+    useKeyboardEvents(keyboardEvents, conversationHeaderActionsRef);
+
+    return {
+      conversationHeaderActionsRef,
+    };
+  },
   computed: {
     ...mapGetters({
-      uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
@@ -200,19 +132,93 @@ export default {
       );
     },
   },
-
-  methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyO': {
-          action: () => this.$emit('contact-panel-toggle'),
-        },
-      };
-    },
-  },
 };
 </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
+            ref="conversationHeaderActionsRef"
+            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 d8a54b402f046..3d1741fc9b358 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -1,85 +1,8 @@
-<!-- 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('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 gap-2 py-2 px-0 w-full">
-          <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 { required, minLength, email } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 export default {
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -90,6 +13,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -111,7 +37,7 @@ export default {
     isFormValid() {
       if (this.selectedType) {
         if (this.sentToOtherEmailAddress) {
-          return !!this.email && !this.$v.email.$error;
+          return !!this.email && !this.v$.email.$error;
         }
         return true;
       }
@@ -142,10 +68,10 @@ export default {
           email: this.selectedEmailAddress,
           conversationId: this.currentChat.id,
         });
-        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
+        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
         this.onCancel();
       } catch (error) {
-        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
+        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
       } finally {
         this.isSubmitting = false;
       }
@@ -153,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 2aabae5772ba0..bcbd57a42aa7a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
@@ -1,42 +1,7 @@
-<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 adminMixin from 'dashboard/mixins/isAdmin';
-import accountMixin from 'dashboard/mixins/account';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
 import OnboardingView from '../OnboardingView.vue';
 import EmptyStateMessage from './EmptyStateMessage.vue';
 
@@ -45,13 +10,22 @@ export default {
     OnboardingView,
     EmptyStateMessage,
   },
-  mixins: [accountMixin, adminMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
       default: false,
     },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+
+    const { accountScopedUrl } = useAccount();
+
+    return {
+      isAdmin,
+      accountScopedUrl,
+    };
+  },
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
@@ -73,7 +47,7 @@ export default {
       return this.$t('CONVERSATION.404');
     },
     newInboxURL() {
-      return this.addAccountScoping('settings/inboxes/new');
+      return this.accountScopedUrl('settings/inboxes/new');
     },
     emptyClassName() {
       if (
@@ -89,3 +63,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 209cd34405284..40c7dd5574b22 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 127e42c611ae1..6cd447fab44ed 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 c324b823add4d..05d6fe4db5ca1 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 54167db7114e5..7ab868e9396e4 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';
@@ -157,8 +13,7 @@ import ContextMenu from 'dashboard/modules/conversations/components/MessageConte
 import InstagramStory from './bubble/InstagramStory.vue';
 import InstagramStoryReply from './bubble/InstagramStoryReply.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import contentTypeMixin from 'shared/mixins/contentTypeMixin';
+import { CONTENT_TYPES } from 'shared/constants/contentType';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -184,7 +39,7 @@ export default {
     InstagramStoryReply,
     Spinner,
   },
-  mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
+  mixins: [messageFormatterMixin],
   props: {
     data: {
       type: Object,
@@ -206,10 +61,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isWebWidgetInbox: {
-      type: Boolean,
-      default: false,
-    },
     isAnEmailInbox: {
       type: Boolean,
       default: false,
@@ -482,6 +333,9 @@ export default {
       }
       return '';
     },
+    isEmailContentType() {
+      return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
+    },
   },
   watch: {
     data() {
@@ -499,7 +353,9 @@ export default {
   },
   methods: {
     isAttachmentImageVideoAudio(fileType) {
-      return ['image', 'audio', 'video', 'story_mention'].includes(fileType);
+      return ['image', 'audio', 'video', 'story_mention', 'ig_reel'].includes(
+        fileType
+      );
     },
     hasMediaAttachment(type) {
       if (this.hasAttachments && this.data.attachments.length > 0) {
@@ -578,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 22d69439e89f3..af1c3e06ddd98 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 81e4531afa64e..15793f4c851d1 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 df61e9de14075..44c58ac9d8950 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -1,106 +1,9 @@
-<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>
+import { ref } from 'vue';
+// composable
+import { useConfig } from 'dashboard/composables/useConfig';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
 // components
 import ReplyBox from './ReplyBox.vue';
 import Message from './Message.vue';
@@ -111,18 +14,18 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
 
 // mixins
-import conversationMixin, {
-  filterDuplicateSourceMessages,
-} from '../../../mixins/conversations';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
-import configMixin from 'shared/mixins/configMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import aiMixin from 'dashboard/mixins/aiMixin';
 
 // utils
 import { getTypingUsersText } from '../../../helper/commons';
 import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import {
+  filterDuplicateSourceMessages,
+  getReadMessages,
+  getUnreadMessages,
+} from 'dashboard/helper/conversationHelper';
 
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -137,13 +40,7 @@ export default {
     Banner,
     ConversationLabelSuggestion,
   },
-  mixins: [
-    conversationMixin,
-    inboxMixin,
-    keyboardEventListenerMixins,
-    configMixin,
-    aiMixin,
-  ],
+  mixins: [inboxMixin, aiMixin],
   props: {
     isContactPanelOpen: {
       type: Boolean,
@@ -154,7 +51,35 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const conversationFooterRef = ref(null);
+    const isPopOutReplyBox = ref(false);
+    const { isEnterprise } = useConfig();
+
+    const closePopOutReplyBox = () => {
+      isPopOutReplyBox.value = false;
+    };
+
+    const showPopOutReplyBox = () => {
+      isPopOutReplyBox.value = !isPopOutReplyBox.value;
+    };
+
+    const keyboardEvents = {
+      Escape: {
+        action: closePopOutReplyBox,
+      },
+    };
+
+    useKeyboardEvents(keyboardEvents, conversationFooterRef);
 
+    return {
+      isEnterprise,
+      conversationFooterRef,
+      isPopOutReplyBox,
+      closePopOutReplyBox,
+      showPopOutReplyBox,
+    };
+  },
   data() {
     return {
       isLoadingPrevious: true,
@@ -162,7 +87,6 @@ export default {
       conversationPanel: null,
       hasUserScrolled: false,
       isProgrammaticScroll: false,
-      isPopoutReplyBox: false,
       messageSentSinceOpened: false,
       labelSuggestions: [],
     };
@@ -170,14 +94,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() {
@@ -224,14 +142,14 @@ export default {
       }
       return messages;
     },
-    getReadMessages() {
-      return this.readMessages(
+    readMessages() {
+      return getReadMessages(
         this.getMessages,
         this.currentChat.agent_last_seen_at
       );
     },
-    getUnReadMessages() {
-      return this.unReadMessages(
+    unReadMessages() {
+      return getUnreadMessages(
         this.getMessages,
         this.currentChat.agent_last_seen_at
       );
@@ -411,19 +329,6 @@ export default {
       });
       this.makeMessagesRead();
     },
-    showPopoutReplyBox() {
-      this.isPopoutReplyBox = !this.isPopoutReplyBox;
-    },
-    closePopoutReplyBox() {
-      this.isPopoutReplyBox = false;
-    },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => this.closePopoutReplyBox(),
-        },
-      };
-    },
     addScrollListener() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
       this.setScrollParams();
@@ -468,7 +373,7 @@ export default {
       );
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
@@ -538,6 +443,109 @@ 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 readMessages"
+        :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 unReadMessages"
+        :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
+      ref="conversationFooterRef"
+      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 4a742781d9bc5..dcfc51b2a57ee 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -1,43 +1,6 @@
-<template>
-  <div class="flex actions--container relative items-center gap-2">
-    <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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
 import {
@@ -51,7 +14,6 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin],
   data() {
     return {
       showEmailActionsModal: false,
@@ -73,11 +35,11 @@ export default {
   methods: {
     mute() {
       this.$store.dispatch('muteConversation', this.currentChat.id);
-      this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
+      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
     },
     unmute() {
       this.$store.dispatch('unmuteConversation', this.currentChat.id);
-      this.showAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
     },
     toggleEmailActionsModal() {
       this.showEmailActionsModal = !this.showEmailActionsModal;
@@ -85,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/OnboardingFeatureCard.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
new file mode 100644
index 0000000000000..cc809d2cea246
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
@@ -0,0 +1,54 @@
+<script setup>
+defineProps({
+  imageSrc: {
+    type: String,
+    default: '',
+  },
+  imageAlt: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: String,
+    default: '',
+  },
+  linkText: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div
+    class="h-full w-full bg-white dark:bg-slate-900 border border-slate-100 dark:border-white/10 rounded-lg p-4 flex flex-col"
+  >
+    <img :src="imageSrc" :alt="imageAlt" class="h-36 w-auto mx-auto" />
+    <div class="mt-auto">
+      <p
+        class="text-base text-slate-800 dark:text-slate-100 font-interDisplay font-semibold tracking-[0.3px]"
+      >
+        {{ title }}
+      </p>
+      <p class="text-slate-600 dark:text-slate-400 text-sm">
+        {{ description }}
+      </p>
+      <router-link
+        v-if="to"
+        :to="{ name: to }"
+        class="no-underline text-woot-500 text-sm font-medium"
+      >
+        <span>{{ linkText }}</span>
+        <span>{{ `→` }}</span>
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index 5824da0bd7381..da8408d1f59bc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -1,157 +1,80 @@
+<script setup>
+import OnboardingFeatureCard from './OnboardingFeatureCard.vue';
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+const getters = useStoreGetters();
+const { t } = useI18n();
+const globalConfig = computed(() => getters['globalConfig/get'].value);
+const currentUser = computed(() => getters.getCurrentUser.value);
+
+const greetingMessage = computed(() => {
+  const hours = new Date().getHours();
+  let translationKey;
+  if (hours < 12) {
+    translationKey = 'ONBOARDING.GREETING_MORNING';
+  } else if (hours < 18) {
+    translationKey = 'ONBOARDING.GREETING_AFTERNOON';
+  } else {
+    translationKey = 'ONBOARDING.GREETING_EVENING';
+  }
+  return t(translationKey, {
+    name: currentUser.value.name,
+    installationName: globalConfig.value.installationName,
+  });
+});
+</script>
+
 <template>
-  <div class="onboarding-wrap">
-    <div class="onboarding">
-      <div class="scroll-wrap">
-        <div class="features-item">
-          <h1 class="text-2xl text-slate-900 dark:text-slate-50">
-            <span>{{
-              $t('ONBOARDING.TITLE', {
-                installationName: globalConfig.installationName,
-              })
-            }}</span>
-          </h1>
-          <p class="intro-body">
-            {{
-              $t('ONBOARDING.DESCRIPTION', {
-                installationName: globalConfig.installationName,
-              })
-            }}
-          </p>
-          <p v-if="globalConfig.installationName === 'Chatwoot'">
-            <a
-              href="https://www.chatwoot.com/changelog"
-              target="_blank"
-              rel="noopener nofollow noreferrer"
-              class="onboarding--link"
-            >
-              {{ $t('ONBOARDING.READ_LATEST_UPDATES') }}
-            </a>
-            <span>🎉</span>
-          </p>
-        </div>
-        <div class="features-item">
-          <h2 class="text-lg text-black-900 dark:text-slate-200">
-            <span class="emoji">💬</span>
-            <span class="conversation--title">{{
-              $t('ONBOARDING.ALL_CONVERSATION.TITLE')
-            }}</span>
-          </h2>
-          <p class="intro-body">
-            {{ $t('ONBOARDING.ALL_CONVERSATION.DESCRIPTION') }}
-          </p>
-        </div>
-        <div class="features-item">
-          <h2 class="text-lg text-black-900 dark:text-slate-200">
-            <span class="emoji">👥</span>
-            {{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
-          </h2>
-          <p class="intro-body">
-            {{ $t('ONBOARDING.TEAM_MEMBERS.DESCRIPTION') }}
-          </p>
-          <router-link :to="newAgentURL" class="onboarding--link">
-            {{ $t('ONBOARDING.TEAM_MEMBERS.NEW_LINK') }}
-          </router-link>
-        </div>
-        <div class="features-item">
-          <h2 class="text-lg text-black-900 dark:text-slate-200">
-            <span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
-          </h2>
-          <p class="intro-body">
-            {{ $t('ONBOARDING.INBOXES.DESCRIPTION') }}
-          </p>
-          <router-link :to="newInboxURL" class="onboarding--link">
-            {{ $t('ONBOARDING.INBOXES.NEW_LINK') }}
-          </router-link>
-        </div>
-        <div class="features-item">
-          <h2 class="text-lg text-black-900 dark:text-slate-200">
-            <span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
-          </h2>
-          <p class="intro-body">
-            {{ $t('ONBOARDING.LABELS.DESCRIPTION') }}
-          </p>
-          <router-link :to="newLabelsURL" class="onboarding--link">
-            {{ $t('ONBOARDING.LABELS.NEW_LINK') }}
-          </router-link>
-        </div>
-      </div>
+  <div
+    class="min-h-screen max-w-4xl mx-auto grid grid-cols-1 xl:grid-cols-2 grid-rows-[auto_1fr_1fr] gap-4 p-8 w-full font-inter overflow-auto"
+  >
+    <div class="col-span-full self-start">
+      <p
+        class="text-xl font-semibold text-slate-900 dark:text-white font-interDisplay tracking-[0.3px]"
+      >
+        {{ greetingMessage }}
+      </p>
+      <p class="text-slate-600 dark:text-slate-400 max-w-2xl text-base">
+        {{
+          $t('ONBOARDING.DESCRIPTION', {
+            installationName: globalConfig.installationName,
+          })
+        }}
+      </p>
     </div>
+    <OnboardingFeatureCard
+      image-src="/dashboard/images/onboarding/omnichannel-inbox.png"
+      image-alt="Omnichannel"
+      to="settings_inbox_new"
+      :title="$t('ONBOARDING.ALL_CONVERSATION.TITLE')"
+      :description="$t('ONBOARDING.ALL_CONVERSATION.DESCRIPTION')"
+      :link-text="$t('ONBOARDING.ALL_CONVERSATION.NEW_LINK')"
+    />
+    <OnboardingFeatureCard
+      image-src="/dashboard/images/onboarding/teams.png"
+      image-alt="Teams"
+      to="settings_teams_new"
+      :title="$t('ONBOARDING.TEAM_MEMBERS.TITLE')"
+      :description="$t('ONBOARDING.TEAM_MEMBERS.DESCRIPTION')"
+      :link-text="$t('ONBOARDING.TEAM_MEMBERS.NEW_LINK')"
+    />
+    <OnboardingFeatureCard
+      image-src="/dashboard/images/onboarding/canned-responses.png"
+      image-alt="Canned responses"
+      to="canned_list"
+      :title="$t('ONBOARDING.CANNED_RESPONSES.TITLE')"
+      :description="$t('ONBOARDING.CANNED_RESPONSES.DESCRIPTION')"
+      :link-text="$t('ONBOARDING.CANNED_RESPONSES.NEW_LINK')"
+    />
+    <OnboardingFeatureCard
+      image-src="/dashboard/images/onboarding/labels.png"
+      image-alt="Labels"
+      to="labels_list"
+      :title="$t('ONBOARDING.LABELS.TITLE')"
+      :description="$t('ONBOARDING.LABELS.DESCRIPTION')"
+      :link-text="$t('ONBOARDING.LABELS.NEW_LINK')"
+    />
   </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;
-  font-size: var(--font-size-small);
-  justify-content: center;
-  overflow: auto;
-  text-align: left;
-}
-.onboarding {
-  height: 100vh;
-  overflow: auto;
-}
-
-.scroll-wrap {
-  padding: var(--space-larger) 8.5rem;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.features-item {
-  margin-bottom: var(--space-large);
-}
-
-.conversation--title {
-  margin-left: var(--space-minus-smaller);
-}
-
-.page-title {
-  font-size: var(--font-size-big);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-one);
-}
-
-.block-title {
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-smaller);
-  margin-left: var(--space-minus-large);
-}
-
-.intro-body {
-  margin-bottom: var(--space-small);
-  line-height: 1.5;
-}
-
-.onboarding--link {
-  color: var(--w-500);
-  font-weight: var(--font-weight-medium);
-  text-decoration: underline;
-}
-
-.emoji {
-  width: var(--space-large);
-  display: inline-block;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index 3a0e2b63aa937..398dc013a09be 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 2726cea921b6c..1a901d4493c1c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,159 +1,7 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import CannedResponse from './CannedResponse.vue';
@@ -180,12 +28,9 @@ import {
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
-import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import rtlMixin from 'shared/mixins/rtlMixin';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import {
   appendSignature,
@@ -218,10 +63,7 @@ export default {
   },
   mixins: [
     inboxMixin,
-    uiSettingsMixin,
-    alertMixin,
     messageFormatterMixin,
-    rtlMixin,
     fileUploadMixin,
     keyboardEventListenerMixins,
   ],
@@ -231,6 +73,21 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const {
+      uiSettings,
+      updateUISettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    };
+  },
   data() {
     return {
       message: '',
@@ -262,13 +119,12 @@ export default {
   },
   computed: {
     ...mapGetters({
+      isRTL: 'accounts/isRTL',
       currentChat: 'getSelectedChat',
       messageSignature: 'getMessageSignature',
       currentUser: 'getCurrentUser',
       lastEmail: 'getLastEmailInSelectedChat',
       globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     currentContact() {
       return this.$store.getters['contacts/getContact'](
@@ -310,7 +166,7 @@ export default {
             agentId,
           })
           .then(() => {
-            this.showAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+            useAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
           });
       },
     },
@@ -406,7 +262,7 @@ export default {
       if (this.isPrivate) {
         sendMessageText = this.$t('CONVERSATION.REPLYBOX.CREATE');
       }
-      const keyLabel = isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter')
+      const keyLabel = this.isEditorHotKeyEnabled('cmd_enter')
         ? '(⌘ + ↵)'
         : '(↵)';
       return `${sendMessageText} ${keyLabel}`;
@@ -450,7 +306,7 @@ export default {
       if (this.isOnExpandedLayout || this.popoutReplyBox) {
         return 'emoji-dialog--expanded';
       }
-      if (this.isRTLView) {
+      if (this.isRTL) {
         return 'emoji-dialog--rtl';
       }
       return '';
@@ -479,7 +335,7 @@ export default {
       return !!this.signatureToApply;
     },
     sendWithSignature() {
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     editorMessageKey() {
       const { editor_message_key: isEnabled } = this.uiSettings;
@@ -748,7 +604,7 @@ export default {
         !this.showCannedMenu &&
         !this.showVariablesMenu &&
         this.isFocused &&
-        isEditorHotKeyEnabled(this.uiSettings, selectedKey)
+        this.isEditorHotKeyEnabled(selectedKey)
       );
     },
     onPaste(e) {
@@ -880,7 +736,7 @@ export default {
       } catch (error) {
         const errorMessage =
           error?.response?.data?.error || this.$t('CONVERSATION.MESSAGE_ERROR');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
     async onSendWhatsAppReply(messagePayload) {
@@ -1220,6 +1076,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"
+      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
+      :characters-remaining="charactersRemaining"
+      :popout-reply-box="popoutReplyBox"
+      @setReplyMode="setReplyMode"
+      @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 e3135fa4729aa..08ca1eba640b9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,77 +1,6 @@
-<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';
 
 export default {
   props: {
@@ -88,6 +17,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       showBcc: false,
@@ -140,7 +72,7 @@ export default {
       this.showBcc = true;
     },
     onBlur() {
-      this.$v.$touch();
+      this.v$.$touch();
       this.$emit('update:bccEmails', this.bccEmailsVal);
       this.$emit('update:ccEmails', this.ccEmailsVal);
       this.$emit('update:toEmails', this.toEmailsVal);
@@ -148,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 ce24f4ce10f6c..2db7d6a65ff85 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 a3a26db732b98..d4c5a09307d1c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -1,124 +1,119 @@
-<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 setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
 
-<script>
-import { mapGetters } from 'vuex';
-import mentionSelectionKeyboardMixin from '../mentions/mentionSelectionKeyboardMixin';
-export default {
-  mixins: [mentionSelectionKeyboardMixin],
-  props: {
-    searchKey: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return { selectedIndex: 0 };
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
   },
-  computed: {
-    ...mapGetters({ agents: 'agents/getVerifiedAgents' }),
-    items() {
-      if (!this.searchKey) {
-        return this.agents;
-      }
+});
 
-      return this.agents.filter(agent =>
-        agent.name
-          .toLocaleLowerCase()
-          .includes(this.searchKey.toLocaleLowerCase())
-      );
-    },
-  },
-  watch: {
-    items(newListOfAgents) {
-      if (newListOfAgents.length < this.selectedIndex + 1) {
-        this.selectedIndex = 0;
-      }
-    },
-  },
+const emit = defineEmits(['click']);
 
-  methods: {
-    adjustScroll() {
-      this.$nextTick(() => {
-        this.$el.scrollTop = 50 * this.selectedIndex;
-      });
-    },
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onAgentSelect(index) {
-      this.selectedIndex = index;
-      this.onSelect();
-    },
-    onSelect() {
-      this.$emit('click', this.items[this.selectedIndex]);
-    },
-  },
-};
-</script>
+const getters = useStoreGetters();
+const agents = computed(() => getters['agents/getVerifiedAgents'].value);
 
-<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;
+const tagAgentsRef = ref(null);
+const selectedIndex = ref(0);
 
-  &.with-bottom-border {
-    @apply border-b-[0.5rem] border-solid border-white dark:border-slate-600;
+const items = computed(() => {
+  if (!props.searchKey) {
+    return agents.value;
+  }
+  return agents.value.filter(agent =>
+    agent.name.toLowerCase().includes(props.searchKey.toLowerCase())
+  );
+});
 
-    li {
-      &:last-child {
-        @apply mb-0;
-      }
+const adjustScroll = () => {
+  nextTick(() => {
+    if (tagAgentsRef.value) {
+      tagAgentsRef.value.scrollTop = 50 * selectedIndex.value;
     }
-  }
+  });
+};
 
-  li {
-    &.active {
-      @apply bg-slate-50 dark:bg-slate-800;
+const onSelect = () => {
+  emit('click', items.value[selectedIndex.value]);
+};
 
-      .mention--user-name {
-        @apply text-slate-900 dark:text-slate-100;
-      }
-      .mention--email {
-        @apply text-slate-800 dark:text-slate-200;
-      }
-    }
+useKeyboardNavigableList({
+  elementRef: tagAgentsRef,
+  items,
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+watch(items, newListOfAgents => {
+  if (newListOfAgents.length < selectedIndex.value + 1) {
+    selectedIndex.value = 0;
   }
-}
-</style>
+});
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onAgentSelect = index => {
+  selectedIndex.value = index;
+  onSelect();
+};
+</script>
+
+<template>
+  <div>
+    <ul
+      v-if="items.length"
+      ref="tagAgentsRef"
+      class="vertical dropdown menu mention--box 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"
+      :class="{
+        'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
+          items.length <= 4,
+      }"
+    >
+      <li
+        v-for="(agent, index) in items"
+        :id="`mention-item-${index}`"
+        :key="agent.id"
+        :class="{
+          'bg-slate-50 dark:bg-slate-800': index === selectedIndex,
+          'last:mb-0': items.length <= 4,
+        }"
+        class="flex items-center p-2 rounded-md last:mb-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="mb-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+            :class="{
+              'text-slate-900 dark:text-slate-100': index === selectedIndex,
+            }"
+          >
+            {{ agent.name }}
+          </h5>
+          <div
+            class="overflow-hidden text-xs whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300"
+            :class="{
+              'text-slate-800 dark:text-slate-200': index === selectedIndex,
+            }"
+          >
+            {{ agent.email }}
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index 48b1dcea33421..66ad8965dc948 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 6c4523f9a1bae..de025a1e5bb5d 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 0e2a402e897ba..23918ddd39ca9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -1,3 +1,110 @@
+<script>
+/**
+ * This component handles parsing and sending WhatsApp message templates.
+ * It works as follows:
+ * 1. Displays the template text with variable placeholders.
+ * 2. Generates input fields for each variable in the template.
+ * 3. Validates that all variables are filled before sending.
+ * 4. Replaces placeholders with user-provided values.
+ * 5. Emits events to send the processed message or reset the template.
+ */
+import { ref, computed, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+
+export default {
+  props: {
+    template: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const processVariable = str => {
+      return str.replace(/{{|}}/g, '');
+    };
+
+    const allKeysRequired = value => {
+      const keys = Object.keys(value);
+      return keys.every(key => value[key]);
+    };
+
+    const processedParams = ref({});
+
+    const templateString = computed(() => {
+      return props.template.components.find(
+        component => component.type === 'BODY'
+      ).text;
+    });
+
+    const variables = computed(() => {
+      return templateString.value.match(/{{([^}]+)}}/g);
+    });
+
+    const processedString = computed(() => {
+      return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+        const variableKey = processVariable(variable);
+        return processedParams.value[variableKey] || `{{${variable}}}`;
+      });
+    });
+
+    const v$ = useVuelidate(
+      {
+        processedParams: {
+          requiredIfKeysPresent: requiredIf(variables),
+          allKeysRequired,
+        },
+      },
+      { processedParams }
+    );
+
+    const generateVariables = () => {
+      const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+      if (!matchedVariables) return;
+
+      const finalVars = matchedVariables.map(i => processVariable(i));
+      processedParams.value = finalVars.reduce((acc, variable) => {
+        acc[variable] = '';
+        return acc;
+      }, {});
+    };
+
+    const resetTemplate = () => {
+      emit('resetTemplate');
+    };
+
+    const sendMessage = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+
+      const payload = {
+        message: processedString.value,
+        templateParams: {
+          name: props.template.name,
+          category: props.template.category,
+          language: props.template.language,
+          namespace: props.template.namespace,
+          processed_params: processedParams.value,
+        },
+      };
+      emit('sendMessage', payload);
+    };
+
+    onMounted(generateVariables);
+
+    return {
+      processedParams,
+      variables,
+      templateString,
+      processedString,
+      v$,
+      resetTemplate,
+      sendMessage,
+    };
+  },
+};
+</script>
+
 <template>
   <div class="w-full">
     <textarea
@@ -25,12 +132,12 @@
           :styles="{ marginBottom: 0 }"
         />
       </div>
-      <p v-if="$v.$dirty && $v.$invalid" class="error">
+      <p v-if="v$.$dirty && v$.$invalid" class="error">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
       </p>
     </div>
     <footer>
-      <woot-button variant="smooth" @click="$emit('resetTemplate')">
+      <woot-button variant="smooth" @click="resetTemplate">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
       </woot-button>
       <woot-button type="button" @click="sendMessage">
@@ -40,83 +147,6 @@
   </div>
 </template>
 
-<script>
-const allKeysRequired = value => {
-  const keys = Object.keys(value);
-  return keys.every(key => value[key]);
-};
-import { requiredIf } from 'vuelidate/lib/validators';
-export default {
-  props: {
-    template: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  validations: {
-    processedParams: {
-      requiredIfKeysPresent: requiredIf('variables'),
-      allKeysRequired,
-    },
-  },
-  data() {
-    return {
-      processedParams: {},
-    };
-  },
-  computed: {
-    variables() {
-      const variables = this.templateString.match(/{{([^}]+)}}/g);
-      return variables;
-    },
-    templateString() {
-      return this.template.components.find(
-        component => component.type === 'BODY'
-      ).text;
-    },
-    processedString() {
-      return this.templateString.replace(/{{([^}]+)}}/g, (match, variable) => {
-        const variableKey = this.processVariable(variable);
-        return this.processedParams[variableKey] || `{{${variable}}}`;
-      });
-    },
-  },
-  mounted() {
-    this.generateVariables();
-  },
-  methods: {
-    sendMessage() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      const payload = {
-        message: this.processedString,
-        templateParams: {
-          name: this.template.name,
-          category: this.template.category,
-          language: this.template.language,
-          namespace: this.template.namespace,
-          processed_params: this.processedParams,
-        },
-      };
-      this.$emit('sendMessage', payload);
-    },
-    processVariable(str) {
-      return str.replace(/{{|}}/g, '');
-    },
-    generateVariables() {
-      const matchedVariables = this.templateString.match(/{{([^}]+)}}/g);
-      if (!matchedVariables) return;
-
-      const variables = matchedVariables.map(i => this.processVariable(i));
-      this.processedParams = variables.reduce((acc, variable) => {
-        acc[variable] = '';
-        return acc;
-      }, {});
-    },
-  },
-};
-</script>
-
 <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 7f0077f4b002f..e7f69934c0471 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -1,9 +1,50 @@
+<script>
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
+
+export default {
+  props: {
+    inboxId: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      query: '',
+    };
+  },
+  computed: {
+    whatsAppTemplateMessages() {
+      // TODO: Remove the last filter when we support all formats
+      return this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
+        .filter(template => template.status.toLowerCase() === 'approved')
+        .filter(template => {
+          return template.components.every(component => {
+            return !formatsToRemove.includes(component.format);
+          });
+        });
+    },
+    filteredTemplateMessages() {
+      return this.whatsAppTemplateMessages.filter(template =>
+        template.name.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    getTemplatebody(template) {
+      return template.components.find(component => component.type === 'BODY')
+        .text;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="w-full">
-    <div class="templates__list-search gap-1">
+    <div class="gap-1 templates__list-search">
       <fluent-icon icon="search" class="search-icon" size="16" />
       <input
-        ref="search"
         v-model="query"
         type="search"
         :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
@@ -22,7 +63,7 @@
                 {{ 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"
+                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 }}
@@ -54,48 +95,6 @@
   </div>
 </template>
 
-<script>
-// TODO: Remove this when we support all formats
-const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
-
-export default {
-  props: {
-    inboxId: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      query: '',
-    };
-  },
-  computed: {
-    whatsAppTemplateMessages() {
-      // TODO: Remove the last filter when we support all formats
-      return this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
-        .filter(template => template.status.toLowerCase() === 'approved')
-        .filter(template => {
-          return template.components.every(component => {
-            return !formatsToRemove.includes(component.format);
-          });
-        });
-    },
-    filteredTemplateMessages() {
-      return this.whatsAppTemplateMessages.filter(template =>
-        template.name.toLowerCase().includes(this.query.toLowerCase())
-      );
-    },
-  },
-  methods: {
-    getTemplatebody(template) {
-      return template.components.find(component => component.type === 'BODY')
-        .text;
-    },
-  },
-};
-</script>
-
 <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 416af5d063345..f3ed9ac51492a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -1,86 +1,10 @@
-<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 timeMixin from '../../../../mixins/time';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 export default {
-  mixins: [inboxMixin, timeMixin],
+  mixins: [inboxMixin],
   props: {
     sender: {
       type: Object,
@@ -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);
     },
@@ -159,7 +78,7 @@ export default {
       return MESSAGE_STATUS.SENT === this.messageStatus;
     },
     readableTime() {
-      return this.messageTimestamp(this.createdAt, 'LLL d, h:mm a');
+      return messageTimestamp(this.createdAt, 'LLL d, h:mm a');
     },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
@@ -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 4d6b2bc55e447..2d0b3d3a38be8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
@@ -1,30 +1,11 @@
-<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 {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
-  mixins: [alertMixin],
   props: {
     name: {
       type: String,
@@ -52,18 +33,18 @@ export default {
             'contacts/create',
             this.getContactObject()
           );
-          this.showAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
+          useAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
         }
         this.openContactNewTab(contact.id);
       } catch (error) {
         if (error instanceof DuplicateContactException) {
           if (error.data.includes('phone_number')) {
-            this.showAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+            useAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
           }
         } else if (error instanceof ExceptionWithMessage) {
-          this.showAlert(error.data);
+          useAlert(error.data);
         } else {
-          this.showAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
+          useAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
         }
       }
     },
@@ -99,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 d5e0375cdfee2..edbe12172ce1c 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 d763d6bec5db4..d5368e4aa5967 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 41e207cbf4f0c..9a0640bf32db3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -1,45 +1,14 @@
-<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';
 import GalleryView from '../components/GalleryView.vue';
+import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
 
 const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
   VIDEO: 'video',
   AUDIO: 'audio',
+  IG_REEL: 'ig_reel',
 };
 
 export default {
@@ -66,11 +35,17 @@ export default {
       return this.attachment.file_type === ALLOWED_FILE_TYPES.IMAGE;
     },
     isVideo() {
-      return this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO;
+      return (
+        this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO ||
+        this.attachment.file_type === ALLOWED_FILE_TYPES.IG_REEL
+      );
     },
     isAudio() {
       return this.attachment.file_type === ALLOWED_FILE_TYPES.AUDIO;
     },
+    timeStampURL() {
+      return timeStampAppendedURL(this.dataUrl);
+    },
     attachmentTypeClasses() {
       return {
         image: this.isImage,
@@ -116,3 +91,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="timeStampURL" />
+    </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 8716d9ac96b8a..11a6eaf7398f9 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 db70afac57a6f..07781df88d444 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 baa41d81cfa61..a42f694fd8754 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 80843854d3499..b31153f1b6d28 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 66365e85c954b..645b25017b4ca 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 5cb063d23a096..f3cec84806b4c 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 bc24ed90f3fcc..ab7c816232f22 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 94a24e5752eff..aac444888e23c 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 6ff96bb5b39a3..f6275c476d3d1 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 9780c2c434210..a75731183f538 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
@@ -1,40 +1,9 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     messageId: {
       type: Number,
@@ -61,7 +30,7 @@ export default {
           await DyteAPI.addParticipantToMeeting(this.messageId);
         this.dyteAuthToken = authToken;
       } catch (err) {
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
       } finally {
         this.isLoading = false;
       }
@@ -72,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 08f77be9a5fc7..f3610e5464d62 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -1,3 +1,214 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+  attachment: {
+    type: Object,
+    required: true,
+  },
+  allAttachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const getters = useStoreGetters();
+
+const ALLOWED_FILE_TYPES = {
+  IMAGE: 'image',
+  VIDEO: 'video',
+  IG_REEL: 'ig_reel',
+  AUDIO: 'audio',
+};
+
+const MAX_ZOOM_LEVEL = 2;
+const MIN_ZOOM_LEVEL = 1;
+
+const galleryViewRef = ref(null);
+const zoomScale = ref(1);
+const activeAttachment = ref({});
+const activeFileType = ref('');
+const activeImageIndex = ref(
+  props.allAttachments.findIndex(
+    attachment => attachment.message_id === props.attachment.message_id
+  ) || 0
+);
+const activeImageRotation = ref(0);
+
+const currentUser = computed(() => getters.getCurrentUser.value);
+
+const hasMoreThanOneAttachment = computed(
+  () => props.allAttachments.length > 1
+);
+
+const readableTime = computed(() => {
+  const { created_at: createdAt } = activeAttachment.value;
+  if (!createdAt) return '';
+  return messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
+});
+
+const isImage = computed(
+  () => activeFileType.value === ALLOWED_FILE_TYPES.IMAGE
+);
+const isVideo = computed(
+  () =>
+    activeFileType.value === ALLOWED_FILE_TYPES.VIDEO ||
+    activeFileType.value === ALLOWED_FILE_TYPES.IG_REEL
+);
+const isAudio = computed(
+  () => activeFileType.value === ALLOWED_FILE_TYPES.AUDIO
+);
+
+const senderDetails = computed(() => {
+  const {
+    name,
+    available_name: availableName,
+    avatar_url,
+    thumbnail,
+    id,
+  } = activeAttachment.value?.sender || props.attachment?.sender || {};
+  const currentUserID = currentUser.value?.id;
+  return {
+    name: currentUserID === id ? 'You' : name || availableName || '',
+    avatar: thumbnail || avatar_url || '',
+  };
+});
+
+const fileNameFromDataUrl = computed(() => {
+  const { data_url: dataUrl } = activeAttachment.value;
+  if (!dataUrl) return '';
+  const fileName = dataUrl?.split('/').pop();
+  return decodeURIComponent(fileName || '');
+});
+
+const imageRotationStyle = computed(() => ({
+  transform: `rotate(${activeImageRotation.value}deg) scale(${zoomScale.value})`,
+  cursor: zoomScale.value < MAX_ZOOM_LEVEL ? 'zoom-in' : 'zoom-out',
+}));
+
+const onClose = () => {
+  emit('close');
+};
+
+const setImageAndVideoSrc = attachment => {
+  const { file_type: type } = attachment;
+  if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
+    return;
+  }
+  activeAttachment.value = attachment;
+  activeFileType.value = type;
+};
+
+const onClickChangeAttachment = (attachment, index) => {
+  if (!attachment) {
+    return;
+  }
+  activeImageIndex.value = index;
+  setImageAndVideoSrc(attachment);
+  activeImageRotation.value = 0;
+  zoomScale.value = 1;
+};
+
+const onClickDownload = () => {
+  const { file_type: type, data_url: url } = activeAttachment.value;
+  if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
+    return;
+  }
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `attachment.${type}`;
+  link.click();
+};
+
+const onRotate = type => {
+  if (!isImage.value) {
+    return;
+  }
+
+  const rotation = type === 'clockwise' ? 90 : -90;
+
+  // Reset rotation if it is 360
+  if (Math.abs(activeImageRotation.value) === 360) {
+    activeImageRotation.value = rotation;
+  } else {
+    activeImageRotation.value += rotation;
+  }
+};
+
+const onZoom = scale => {
+  if (!isImage.value) {
+    return;
+  }
+
+  const newZoomScale = zoomScale.value + scale;
+  // Check if the new zoom scale is within the allowed range
+  if (newZoomScale > MAX_ZOOM_LEVEL) {
+    // Set zoom to max but do not reset to default
+    zoomScale.value = MAX_ZOOM_LEVEL;
+    return;
+  }
+  if (newZoomScale < MIN_ZOOM_LEVEL) {
+    // Set zoom to min but do not reset to default
+    zoomScale.value = MIN_ZOOM_LEVEL;
+    return;
+  }
+  // If within bounds, update the zoom scale
+  zoomScale.value = newZoomScale;
+};
+
+const onClickZoomImage = () => {
+  onZoom(0.1);
+};
+
+const onWheelImageZoom = e => {
+  if (!isImage.value) {
+    return;
+  }
+  const scale = e.deltaY > 0 ? -0.1 : 0.1;
+  onZoom(scale);
+};
+
+const keyboardEvents = {
+  Escape: {
+    action: () => {
+      onClose();
+    },
+  },
+  ArrowLeft: {
+    action: () => {
+      onClickChangeAttachment(
+        props.allAttachments[activeImageIndex.value - 1],
+        activeImageIndex.value - 1
+      );
+    },
+  },
+  ArrowRight: {
+    action: () => {
+      onClickChangeAttachment(
+        props.allAttachments[activeImageIndex.value + 1],
+        activeImageIndex.value + 1
+      );
+    },
+  },
+};
+useKeyboardEvents(keyboardEvents, galleryViewRef);
+
+onMounted(() => {
+  setImageAndVideoSrc(props.attachment);
+});
+</script>
+
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal
@@ -7,19 +218,20 @@
     :on-close="onClose"
   >
     <div
+      ref="galleryViewRef"
       v-on-clickaway="onClose"
       class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
       @click="onClose"
     >
       <div
-        class="bg-white dark:bg-slate-900 z-10 flex items-center justify-between w-full h-16 px-6 py-2"
+        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
+          <Thumbnail
             v-if="senderDetails.avatar"
             :username="senderDetails.name"
             :src="senderDetails.avatar"
@@ -167,7 +379,7 @@
           />
         </div>
       </div>
-      <div class="flex items-center justify-center w-full h-16 px-6 py-2 z-10">
+      <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"
         >
@@ -179,205 +391,3 @@
     </div>
   </woot-modal>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import timeMixin from 'dashboard/mixins/time';
-
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-const ALLOWED_FILE_TYPES = {
-  IMAGE: 'image',
-  VIDEO: 'video',
-  AUDIO: 'audio',
-};
-
-const MAX_ZOOM_LEVEL = 2;
-const MIN_ZOOM_LEVEL = 1;
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [keyboardEventListenerMixins, timeMixin],
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-    attachment: {
-      type: Object,
-      required: true,
-    },
-    allAttachments: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      zoomScale: 1,
-      activeAttachment: {},
-      activeFileType: '',
-      activeImageIndex:
-        this.allAttachments.findIndex(
-          attachment => attachment.message_id === this.attachment.message_id
-        ) || 0,
-      activeImageRotation: 0,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-    }),
-    hasMoreThanOneAttachment() {
-      return this.allAttachments.length > 1;
-    },
-    readableTime() {
-      const { created_at: createdAt } = this.activeAttachment;
-      if (!createdAt) return '';
-      return this.messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
-    },
-    isImage() {
-      return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
-    },
-    isVideo() {
-      return this.activeFileType === ALLOWED_FILE_TYPES.VIDEO;
-    },
-    isAudio() {
-      return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
-    },
-    senderDetails() {
-      const {
-        name,
-        available_name: availableName,
-        avatar_url,
-        thumbnail,
-        id,
-      } = this.activeAttachment?.sender || this.attachment?.sender || {};
-      const currentUserID = this.currentUser?.id;
-      return {
-        name: currentUserID === id ? 'You' : name || availableName || '',
-        avatar: thumbnail || avatar_url || '',
-      };
-    },
-    fileNameFromDataUrl() {
-      const { data_url: dataUrl } = this.activeAttachment;
-      if (!dataUrl) return '';
-      const fileName = dataUrl?.split('/').pop();
-      return decodeURIComponent(fileName || '');
-    },
-    imageRotationStyle() {
-      return {
-        transform: `rotate(${this.activeImageRotation}deg) scale(${this.zoomScale})`,
-        cursor: this.zoomScale < MAX_ZOOM_LEVEL ? 'zoom-in' : 'zoom-out',
-      };
-    },
-  },
-  mounted() {
-    this.setImageAndVideoSrc(this.attachment);
-  },
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-    onClickChangeAttachment(attachment, index) {
-      if (!attachment) {
-        return;
-      }
-      this.activeImageIndex = index;
-      this.setImageAndVideoSrc(attachment);
-      this.activeImageRotation = 0;
-      this.zoomScale = 1;
-    },
-    setImageAndVideoSrc(attachment) {
-      const { file_type: type } = attachment;
-      if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
-        return;
-      }
-      this.activeAttachment = attachment;
-      this.activeFileType = type;
-    },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => {
-            this.onClose();
-          },
-        },
-        ArrowLeft: {
-          action: () => {
-            this.onClickChangeAttachment(
-              this.allAttachments[this.activeImageIndex - 1],
-              this.activeImageIndex - 1
-            );
-          },
-        },
-        ArrowRight: {
-          action: () => {
-            this.onClickChangeAttachment(
-              this.allAttachments[this.activeImageIndex + 1],
-              this.activeImageIndex + 1
-            );
-          },
-        },
-      };
-    },
-    onClickDownload() {
-      const { file_type: type, data_url: url } = this.activeAttachment;
-      if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
-        return;
-      }
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = `attachment.${type}`;
-      link.click();
-    },
-    onRotate(type) {
-      if (!this.isImage) {
-        return;
-      }
-
-      const rotation = type === 'clockwise' ? 90 : -90;
-
-      // Reset rotation if it is 360
-      if (Math.abs(this.activeImageRotation) === 360) {
-        this.activeImageRotation = rotation;
-      } else {
-        this.activeImageRotation += rotation;
-      }
-    },
-    onClickZoomImage() {
-      this.onZoom(0.1);
-    },
-    onZoom(scale) {
-      if (!this.isImage) {
-        return;
-      }
-
-      const newZoomScale = this.zoomScale + scale;
-      // Check if the new zoom scale is within the allowed range
-      if (newZoomScale > MAX_ZOOM_LEVEL) {
-        // Set zoom to max but do not reset to default
-        this.zoomScale = MAX_ZOOM_LEVEL;
-        return;
-      }
-      if (newZoomScale < MIN_ZOOM_LEVEL) {
-        // Set zoom to min but do not reset to default
-        this.zoomScale = MIN_ZOOM_LEVEL;
-        return;
-      }
-      // If within bounds, update the zoom scale
-      this.zoomScale = newZoomScale;
-    },
-
-    onWheelImageZoom(e) {
-      if (!this.isImage) {
-        return;
-      }
-      const scale = e.deltaY > 0 ? -0.1 : 0.1;
-      this.onZoom(scale);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index 042e258380986..9d15fc8844cbd 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 3affa52c8dabf..82774cbe02fbb 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 655a429488a99..6b1c66d0276ce 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 ca07fb6fcd503..fc9ec29fe3054 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 17962a169b959..f62117f968d8b 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 0a132de739bb8..578618e037986 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -1,3 +1,22 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="menu text-slate-800 dark:text-slate-100"
@@ -15,7 +34,7 @@
       class="label-pill"
       :style="{ backgroundColor: option.color }"
     />
-    <thumbnail
+    <Thumbnail
       v-if="variant === 'agent'"
       :username="option.label"
       :src="option.thumbnail"
@@ -29,25 +48,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    variant: {
-      type: String,
-      default: 'default',
-    },
-  },
-};
-</script>
-
 <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 619b5aeabb9f7..37fa5a36cf4d8 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 115cb64ffe7c6..889051674c184 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 4dd06f673aa31..c1565ea90cf75 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -1,3 +1,89 @@
+<script>
+import { mapGetters } from 'vuex';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    Thumbnail,
+    Spinner,
+  },
+  props: {
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    conversationCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      query: '',
+      selectedAgent: null,
+      goBackToAgentList: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'bulkActions/getUIFlags',
+      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
+    }),
+    filteredAgents() {
+      if (this.query) {
+        return this.assignableAgents.filter(agent =>
+          agent.name.toLowerCase().includes(this.query.toLowerCase())
+        );
+      }
+      return [
+        {
+          confirmed: true,
+          name: 'None',
+          id: null,
+          role: 'agent',
+          account_id: 0,
+          email: 'None',
+        },
+        ...this.assignableAgents,
+      ];
+    },
+    assignableAgents() {
+      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
+        this.selectedInboxes.join(',')
+      );
+    },
+    conversationLabel() {
+      return this.conversationCount > 1 ? 'conversations' : 'conversation';
+    },
+  },
+  mounted() {
+    this.$store.dispatch('inboxAssignableAgents/fetch', this.selectedInboxes);
+  },
+  methods: {
+    submit() {
+      this.$emit('select', this.selectedAgent);
+    },
+    goBack() {
+      this.goBackToAgentList = true;
+      this.selectedAgent = null;
+    },
+    assignAgent(agent) {
+      this.selectedAgent = agent;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    onCloseAgentList() {
+      if (this.selectedAgent === null && !this.goBackToAgentList) {
+        this.onClose();
+      }
+      this.goBackToAgentList = false;
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
     <div class="triangle">
@@ -5,7 +91,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.AGENT_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -20,28 +106,27 @@
         v-if="assignableAgentsUiFlags.isFetching"
         class="agent__list-loading"
       >
-        <spinner />
+        <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"
+              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>
           </li>
           <li v-for="agent in filteredAgents" :key="agent.id">
             <div class="agent-list-item" @click="assignAgent(agent)">
-              <thumbnail
+              <Thumbnail
                 :src="agent.thumbnail"
                 :status="agent.availability_status"
                 :username="agent.name"
@@ -97,93 +182,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Thumbnail,
-    Spinner,
-  },
-  props: {
-    selectedInboxes: {
-      type: Array,
-      default: () => [],
-    },
-    conversationCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      query: '',
-      selectedAgent: null,
-      goBackToAgentList: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'bulkActions/getUIFlags',
-      inboxes: 'inboxes/getInboxes',
-      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
-    }),
-    filteredAgents() {
-      if (this.query) {
-        return this.assignableAgents.filter(agent =>
-          agent.name.toLowerCase().includes(this.query.toLowerCase())
-        );
-      }
-      return [
-        {
-          confirmed: true,
-          name: 'None',
-          id: null,
-          role: 'agent',
-          account_id: 0,
-          email: 'None',
-        },
-        ...this.assignableAgents,
-      ];
-    },
-    assignableAgents() {
-      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
-        this.selectedInboxes.join(',')
-      );
-    },
-    conversationLabel() {
-      return this.conversationCount > 1 ? 'conversations' : 'conversation';
-    },
-  },
-  mounted() {
-    this.$store.dispatch('inboxAssignableAgents/fetch', this.selectedInboxes);
-  },
-  methods: {
-    submit() {
-      this.$emit('select', this.selectedAgent);
-    },
-    goBack() {
-      this.goBackToAgentList = true;
-      this.selectedAgent = null;
-    },
-    assignAgent(agent) {
-      this.selectedAgent = agent;
-    },
-    onClose() {
-      this.$emit('close');
-    },
-    onCloseAgentList() {
-      if (this.selectedAgent === null && !this.goBackToAgentList) {
-        this.onClose();
-      }
-      this.goBackToAgentList = false;
-    },
-  },
-};
-</script>
-
 <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 198774dadacb4..746b932ca265b 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 80224532a2147..242369e5e55d9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -1,3 +1,35 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  data() {
+    return {
+      query: '',
+      selectedLabels: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ labels: 'labels/getLabels' }),
+    filteredLabels() {
+      return this.labels.filter(label =>
+        label.title.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    isLabelSelected(label) {
+      return this.selectedLabels.includes(label);
+    },
+    assignLabels(key) {
+      this.$emit('update', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onClose" class="labels-container">
     <div class="triangle">
@@ -5,7 +37,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.LABELS.ASSIGN_LABELS') }}</span>
       <woot-button
         size="tiny"
@@ -18,14 +50,13 @@
     <div class="labels-list">
       <header class="labels-list__header">
         <div
-          class="label-list-search h-8 flex justify-between items-center gap-2"
+          class="flex items-center justify-between h-8 gap-2 label-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="label--search_input"
           />
         </div>
@@ -47,7 +78,7 @@
               class="label-checkbox"
             />
             <span
-              class="label-title overflow-hidden whitespace-nowrap text-ellipsis"
+              class="overflow-hidden label-title whitespace-nowrap text-ellipsis"
             >
               {{ label.title }}
             </span>
@@ -73,38 +104,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  data() {
-    return {
-      query: '',
-      selectedLabels: [],
-    };
-  },
-  computed: {
-    ...mapGetters({ labels: 'labels/getLabels' }),
-    filteredLabels() {
-      return this.labels.filter(label =>
-        label.title.toLowerCase().includes(this.query.toLowerCase())
-      );
-    },
-  },
-  methods: {
-    isLabelSelected(label) {
-      return this.selectedLabels.includes(label);
-    },
-    assignLabels(key) {
-      this.$emit('update', key);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
 <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 fcfaa61df2c66..e72b7fa691002 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 0653fc0cc8057..6deb92683995d 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 079d1c7bf31d5..6c719fc01808e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -1,57 +1,27 @@
-<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';
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
 export default {
-  mixins: [conversationLabelMixin],
   props: {
-    conversationId: {
-      type: Number,
-      required: true,
-    },
     conversationLabels: {
-      type: String,
-      required: false,
-      default: '',
+      type: Array,
+      required: true,
     },
   },
+  setup(props) {
+    const accountLabels = useMapGetter('labels/getLabels');
+
+    const activeLabels = computed(() => {
+      return accountLabels.value.filter(({ title }) =>
+        props.conversationLabels.includes(title)
+      );
+    });
+
+    return {
+      activeLabels,
+    };
+  },
   data() {
     return {
       showAllLabels: false,
@@ -100,6 +70,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 ? label.id : index"
+        :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/helpers/emailHeadHelper.js b/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
index 5304627c4a606..108461353d71c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
+++ b/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
@@ -1,7 +1,7 @@
-import emailValidator from 'vuelidate/lib/validators/email';
+import { email as emailValidator } from '@vuelidate/validators';
 
 export const validEmailsByComma = value => {
   if (!value.length) return true;
   const emails = value.replace(/\s+/g, '').split(',');
-  return emails.every(email => emailValidator(email));
+  return emails.every(email => emailValidator.$validator(email));
 };
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index e2859e890b776..a30bcbc77b970 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 5891788531bd9..139ca9792d577 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
-      :header-content="
-        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
-      "
-    />
-
-    <div class="flex flex-col h-auto overflow-auto">
-      <div class="flex flex-col px-8 pb-4">
-        <woot-tabs
-          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
-          :index="selectedTabIndex"
-          @change="onClickTabChange"
-        >
-          <woot-tabs-item
-            v-for="tab in tabs"
-            :key="tab.key"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </div>
-      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
-        <create-issue
-          :account-id="accountId"
-          :conversation-id="conversation.id"
-          :title="title"
-          @close="onClose"
-        />
-      </div>
-
-      <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue
-          :conversation-id="conversation.id"
-          :title="title"
-          @close="onClose"
-        />
-      </div>
-    </div>
-  </div>
-</template>
 <script setup>
 import { useI18n } from 'dashboard/composables/useI18n';
 import { computed, ref } from 'vue';
@@ -58,6 +15,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['close']);
+
 const { t } = useI18n();
 
 const selectedTabIndex = ref(0);
@@ -70,8 +29,6 @@ const title = computed(() => {
   });
 });
 
-const emits = defineEmits(['close']);
-
 const tabs = ref([
   {
     key: 0,
@@ -83,10 +40,54 @@ const tabs = ref([
   },
 ]);
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const onClickTabChange = index => {
   selectedTabIndex.value = index;
 };
 </script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
+      :header-content="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
+      "
+    />
+
+    <div class="flex flex-col h-auto overflow-auto">
+      <div class="flex flex-col px-8 pb-4">
+        <woot-tabs
+          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
+          :index="selectedTabIndex"
+          @change="onClickTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </div>
+      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
+        <CreateIssue
+          :account-id="accountId"
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+
+      <div v-else class="flex flex-col px-8 pb-4">
+        <LinkIssue
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 3304f604058d1..8113ef29ed6f8 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 add7b56083e81..3b2396a94a999 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 458871c3867af..c2fb15b214673 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 => {
@@ -109,6 +62,8 @@ const onSearch = async value => {
     issues.value = response.data.map(issue => ({
       id: issue.id,
       name: `${issue.identifier} ${issue.title}`,
+      icon: 'status',
+      iconColor: issue.state.color,
     }));
   } catch (error) {
     const errorMessage = parseLinearAPIErrorResponse(
@@ -141,3 +96,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 70167147b722c..dc7c03a2fbd34 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 c7861b03908db..6d2c789c203bf 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/conversation/specs/MoreActions.spec.js b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
index 4e9dc9538aa70..2e38a28b7aaa7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
+++ b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
@@ -85,11 +85,11 @@ describe('MoveActions', () => {
     it('shows alert', async () => {
       await moreActions.find('button:first-child').trigger('click');
 
-      expect(emitter.emit).toBeCalledWith(
-        'newToastMessage',
-        'This contact is blocked successfully. You will not be notified of any future conversations.',
-        undefined
-      );
+      expect(emitter.emit).toBeCalledWith('newToastMessage', {
+        message:
+          'This contact is blocked successfully. You will not be notified of any future conversations.',
+        action: null,
+      });
     });
   });
 
@@ -111,11 +111,10 @@ describe('MoveActions', () => {
     it('shows alert', async () => {
       await moreActions.find('button:first-child').trigger('click');
 
-      expect(emitter.emit).toBeCalledWith(
-        'newToastMessage',
-        'This contact is unblocked successfully.',
-        undefined
-      );
+      expect(emitter.emit).toBeCalledWith('newToastMessage', {
+        message: 'This contact is unblocked successfully.',
+        action: null,
+      });
     });
   });
 });
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index e3dd8c239f05c..f3c57155f55a3 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 9ddaf3e5c7dd2..770f47d147997 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 6b09acbacf860..e08c52e1b678c 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 b8780773f225c..1d1a51ff51da5 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -1,9 +1,82 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  type: {
+    type: String,
+    default: 'canned',
+  },
+});
+
+const emit = defineEmits(['mentionSelect']);
+
+const mentionsListContainerRef = ref(null);
+const selectedIndex = ref(0);
+
+const adjustScroll = () => {
+  const container = mentionsListContainerRef.value;
+  const item = container.querySelector(`#mention-item-${selectedIndex.value}`);
+  if (item) {
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const containerTop = container.scrollTop;
+    const containerBottom = containerTop + container.offsetHeight;
+    if (itemTop < containerTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom + 34 > containerBottom) {
+      container.scrollTop = itemBottom - container.offsetHeight + 34;
+    }
+  }
+};
+
+const onSelect = () => {
+  emit('mentionSelect', props.items[selectedIndex.value]);
+};
+
+useKeyboardNavigableList({
+  elementRef: mentionsListContainerRef,
+  items: computed(() => props.items),
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+watch(
+  () => props.items,
+  newItems => {
+    if (newItems.length < selectedIndex.value + 1) {
+      selectedIndex.value = 0;
+    }
+  }
+);
+
+watch(selectedIndex, adjustScroll);
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onListItemSelection = index => {
+  selectedIndex.value = index;
+  onSelect();
+};
+
+const variableKey = (item = {}) => {
+  return props.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
+};
+</script>
+
 <template>
   <div
-    ref="mentionsListContainer"
+    ref="mentionsListContainerRef"
     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">
+    <ul class="mb-0 vertical dropdown menu">
       <woot-dropdown-item
         v-for="(item, index) in items"
         :id="`mention-item-${index}`"
@@ -19,7 +92,7 @@
           @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="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,
             }"
@@ -27,7 +100,7 @@
             {{ 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="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,
             }"
@@ -40,68 +113,6 @@
   </div>
 </template>
 
-<script>
-import mentionSelectionKeyboardMixin from './mentionSelectionKeyboardMixin';
-export default {
-  mixins: [mentionSelectionKeyboardMixin],
-  props: {
-    items: {
-      type: Array,
-      default: () => {},
-    },
-    type: {
-      type: String,
-      default: 'canned',
-    },
-  },
-  data() {
-    return {
-      selectedIndex: 0,
-    };
-  },
-  watch: {
-    items(newItems) {
-      if (newItems.length < this.selectedIndex + 1) {
-        this.selectedIndex = 0;
-      }
-    },
-    selectedIndex() {
-      const container = this.$refs.mentionsListContainer;
-      const item = container.querySelector(
-        `#mention-item-${this.selectedIndex}`
-      );
-      if (item) {
-        const itemTop = item.offsetTop;
-        const itemBottom = itemTop + item.offsetHeight;
-        const containerTop = container.scrollTop;
-        const containerBottom = containerTop + container.offsetHeight;
-        if (itemTop < containerTop) {
-          container.scrollTop = itemTop;
-        } else if (itemBottom + 34 > containerBottom) {
-          container.scrollTop = itemBottom - container.offsetHeight + 34;
-        }
-      }
-    },
-  },
-  methods: {
-    adjustScroll() {},
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onListItemSelection(index) {
-      this.selectedIndex = index;
-      this.onSelect();
-    },
-    onSelect() {
-      this.$emit('mention-select', this.items[this.selectedIndex]);
-    },
-    variableKey(item = {}) {
-      return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .mention--box {
   .dropdown-menu__item:last-child > button {
diff --git a/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js b/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js
deleted file mode 100644
index bd5e9bee7c65e..0000000000000
--- a/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-
-export default {
-  mixins: [keyboardEventListenerMixins],
-  methods: {
-    moveSelectionUp() {
-      if (!this.selectedIndex) {
-        this.selectedIndex = this.items.length - 1;
-      } else {
-        this.selectedIndex -= 1;
-      }
-      this.adjustScroll();
-    },
-    moveSelectionDown() {
-      if (this.selectedIndex === this.items.length - 1) {
-        this.selectedIndex = 0;
-      } else {
-        this.selectedIndex += 1;
-      }
-      this.adjustScroll();
-    },
-    getKeyboardEvents() {
-      return {
-        ArrowUp: {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Control+KeyP': {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        ArrowDown: {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Control+KeyN': {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        Enter: {
-          action: e => {
-            this.onSelect();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-  },
-};
diff --git a/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js b/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js
deleted file mode 100644
index 3f83e0f153edf..0000000000000
--- a/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-
-const localVue = createLocalVue();
-
-const buildComponent = ({ data = {}, methods = {} }) => ({
-  render() {},
-  data() {
-    return { ...data, selectedIndex: 0, items: [1, 2, 3] };
-  },
-  methods: { ...methods, onSelect: vi.fn(), adjustScroll: vi.fn() },
-  mixins: [keyboardEventListenerMixins],
-});
-
-describe('mentionSelectionKeyboardMixin', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    const Component = buildComponent({});
-    wrapper = shallowMount(Component, { localVue });
-  });
-
-  it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
-    const preventDefault = vi.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.ArrowUp) {
-      keyboardEvents.ArrowUp.action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(2);
-      expect(preventDefault).toHaveBeenCalled();
-    }
-
-    wrapper.setData({ selectedIndex: 1 });
-    if (keyboardEvents && keyboardEvents['Control+KeyP']) {
-      keyboardEvents['Control+KeyP'].action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(0);
-      expect(preventDefault).toHaveBeenCalledTimes(2);
-    }
-  });
-
-  it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
-    const preventDefault = vi.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.ArrowDown) {
-      keyboardEvents.ArrowDown.action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(1);
-      expect(preventDefault).toHaveBeenCalled();
-    }
-
-    wrapper.setData({ selectedIndex: 1 });
-    if (keyboardEvents && keyboardEvents['Control+KeyN']) {
-      keyboardEvents['Control+KeyN'].action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(2);
-      expect(preventDefault).toHaveBeenCalledTimes(2);
-    }
-  });
-
-  it('Enter key triggers onSelect method', () => {
-    const preventDefault = vi.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.Enter) {
-      keyboardEvents.Enter.action({ preventDefault });
-      expect(wrapper.vm.onSelect).toHaveBeenCalled();
-      expect(preventDefault).toHaveBeenCalled();
-    }
-  });
-});
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
index 689ec2527db09..e10f5b334c478 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
@@ -1,31 +1,7 @@
-<!-- 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 { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import Modal from '../../Modal.vue';
-
 export default {
   components: {
     Modal,
@@ -61,6 +37,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       value: '',
@@ -77,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 63765acc0a0d6..f1d9d115276fd 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 5dbc440d583f5..a69e6dda77b3e 100644
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -1,12 +1,32 @@
+<script>
+import Modal from '../../Modal.vue';
+
+export default {
+  components: {
+    Modal,
+  },
+  props: {
+    show: Boolean,
+    onClose: { type: Function, default: () => {} },
+    onConfirm: { type: Function, default: () => {} },
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+    messageValue: { type: String, default: '' },
+    confirmText: { type: String, default: '' },
+    rejectText: { type: String, default: '' },
+  },
+};
+</script>
+
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <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">
+    <div class="flex items-center justify-end gap-2 p-8">
       <woot-button variant="clear" class="action-button" @click="onClose">
         {{ rejectText }}
       </woot-button>
@@ -19,28 +39,9 @@
         {{ confirmText }}
       </woot-button>
     </div>
-  </modal>
+  </Modal>
 </template>
 
-<script>
-import Modal from '../../Modal.vue';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: Boolean,
-    onClose: { type: Function, default: () => {} },
-    onConfirm: { type: Function, default: () => {} },
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-    messageValue: { type: String, default: '' },
-    confirmText: { type: String, default: '' },
-    rejectText: { type: String, default: '' },
-  },
-};
-</script>
 <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 ffaab7e618f9b..53b465558d6c3 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -1,46 +1,88 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
+import { SHORTCUT_KEYS } from './constants';
+import {
+  LAYOUT_QWERTZ,
+  keysToModifyInQWERTZ,
+} from 'shared/helpers/KeyboardHelpers';
+import Hotkey from 'dashboard/components/base/Hotkey.vue';
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const shortcutKeys = SHORTCUT_KEYS;
+const currentLayout = ref(null);
+
+const title = item => t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
+
+// Added this function to check if the keySet needs a shift key
+// This is used to display the shift key in the modal
+// If the current layout is QWERTZ and the keySet contains a key that needs a shift key
+// If layout is QWERTZ then we add the Shift+keysToModify to fix an known issue
+// https://github.com/chatwoot/chatwoot/issues/9492
+const needsShiftKey = keySet => {
+  return (
+    currentLayout.value === LAYOUT_QWERTZ &&
+    keySet.some(key => keysToModifyInQWERTZ.has(key))
+  );
+};
+
+onMounted(async () => {
+  currentLayout.value = await useDetectKeyboardLayout();
+});
+</script>
+
 <template>
   <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
-    <div class="h-auto overflow-auto flex flex-col">
+    <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 gap-x-5 gap-y-3 pt-0 px-8 pb-4 mt-6">
+      <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 mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+          <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">
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[36px] key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-            </hotkey>
+            </Hotkey>
           </div>
         </div>
       </div>
 
-      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8">
+      <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 mb-1 ml-2 gap-2">
+          <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">
+              <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>
+              </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"
+                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">
+            <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>
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> {{ 'K' }} </Hotkey>
           </div>
         </div>
 
@@ -48,14 +90,14 @@
           <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">
+          <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">
+            </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>
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> {{ 'E' }} </Hotkey>
           </div>
         </div>
         <div
@@ -66,19 +108,25 @@
           <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
+          <div class="flex items-center gap-2 mb-1 ml-2">
+            <Hotkey
+              v-if="needsShiftKey(shortcutKey.keySet)"
+              custom-class="min-h-[28px] min-w-[36px] key"
+            >
+              {{ 'Shift' }}
+            </Hotkey>
+            <Hotkey
               :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
               custom-class="min-h-[28px] normal-case key"
             >
               {{ shortcutKey.firstKey }}
-            </hotkey>
-            <hotkey
+            </Hotkey>
+            <Hotkey
               :class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
               custom-class="min-h-[28px] min-w-[36px] key"
             >
               {{ shortcutKey.secondKey }}
-            </hotkey>
+            </Hotkey>
           </div>
         </div>
       </div>
@@ -86,32 +134,6 @@
   </woot-modal>
 </template>
 
-<script>
-import { SHORTCUT_KEYS } from './constants';
-import Hotkey from 'dashboard/components/base/Hotkey.vue';
-
-export default {
-  components: {
-    Hotkey,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      shortcutKeys: SHORTCUT_KEYS,
-    };
-  },
-  methods: {
-    title(item) {
-      return this.$t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
-    },
-  },
-};
-</script>
 <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/components/widgets/modal/constants.js b/app/javascript/dashboard/components/widgets/modal/constants.js
index acee1f6fc8f1c..7ad2085d0deb1 100644
--- a/app/javascript/dashboard/components/widgets/modal/constants.js
+++ b/app/javascript/dashboard/components/widgets/modal/constants.js
@@ -4,71 +4,83 @@ export const SHORTCUT_KEYS = [
     label: 'NAVIGATE_DROPDOWN',
     firstKey: 'Up',
     secondKey: 'Down',
+    keySet: ['ArrowUp', 'ArrowDown'],
   },
   {
     id: 2,
     label: 'RESOLVE_CONVERSATION',
     firstKey: 'Alt / ⌥',
     secondKey: 'E',
+    keySet: ['Alt+KeyE'],
   },
   {
     id: 3,
     label: 'GO_TO_CONVERSATION_DASHBOARD',
     firstKey: 'Alt / ⌥',
     secondKey: 'C',
+    keySet: ['Alt+KeyC'],
   },
   {
     id: 4,
     label: 'ADD_ATTACHMENT',
     firstKey: 'Alt / ⌥',
     secondKey: 'A',
+    keySet: ['Alt+KeyA'],
   },
   {
     id: 5,
     label: 'GO_TO_CONTACTS_DASHBOARD',
     firstKey: 'Alt / ⌥',
     secondKey: 'V',
+    keySet: ['Alt+KeyV'],
   },
   {
     id: 6,
     label: 'TOGGLE_SIDEBAR',
     firstKey: 'Alt / ⌥',
     secondKey: 'O',
+    keySet: ['Alt+KeyO'],
   },
   {
     id: 7,
     label: 'GO_TO_REPORTS_SIDEBAR',
     firstKey: 'Alt / ⌥',
     secondKey: 'R',
+    keySet: ['Alt+KeyR'],
   },
   {
     id: 8,
     label: 'MOVE_TO_NEXT_TAB',
     firstKey: 'Alt / ⌥',
     secondKey: 'N',
+    keySet: ['Alt+KeyN'],
   },
   {
     id: 9,
     label: 'GO_TO_SETTINGS',
     firstKey: 'Alt / ⌥',
     secondKey: 'S',
+    keySet: ['Alt+KeyS'],
   },
   {
     id: 11,
     label: 'SWITCH_TO_PRIVATE_NOTE',
     firstKey: 'Alt / ⌥',
     secondKey: 'P',
+    keySet: ['Alt+KeyP'],
   },
   {
-    id: 13,
+    id: 12,
     label: 'SWITCH_TO_REPLY',
     firstKey: 'Alt / ⌥',
     secondKey: 'L',
+    keySet: ['Alt+KeyL'],
   },
   {
-    id: 14,
+    id: 13,
     label: 'TOGGLE_SNOOZE_DROPDOWN',
     firstKey: 'Alt / ⌥',
     secondKey: 'M',
+    keySet: ['Alt+KeyM'],
   },
 ];
diff --git a/app/javascript/dashboard/composables/index.js b/app/javascript/dashboard/composables/index.js
index 49479499ba85d..6a918481377a5 100644
--- a/app/javascript/dashboard/composables/index.js
+++ b/app/javascript/dashboard/composables/index.js
@@ -1,6 +1,10 @@
 import { getCurrentInstance } from 'vue';
 import { emitter } from 'shared/helpers/mitt';
 
+/**
+ * Custom hook to track events
+ * @returns {Function} The track function
+ */
 export const useTrack = () => {
   const vm = getCurrentInstance();
   if (!vm) throw new Error('must be called in setup');
@@ -8,6 +12,11 @@ export const useTrack = () => {
   return vm.proxy.$track;
 };
 
-export function useAlert(message, action) {
-  emitter.emit('newToastMessage', message, action);
-}
+/**
+ * Emits a toast message event using a global emitter.
+ * @param {string} message - The message to be displayed in the toast.
+ * @param {Object|null} action - Optional callback function or object to execute.
+ */
+export const useAlert = (message, action = null) => {
+  emitter.emit('newToastMessage', { message, action });
+};
diff --git a/app/javascript/dashboard/composables/spec/index.spec.js b/app/javascript/dashboard/composables/spec/index.spec.js
new file mode 100644
index 0000000000000..1325d5dbb287c
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/index.spec.js
@@ -0,0 +1,51 @@
+import { getCurrentInstance } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { useTrack, useAlert } from '../index';
+
+vi.mock('vue', () => ({
+  getCurrentInstance: vi.fn(),
+}));
+vi.mock('shared/helpers/mitt', () => ({
+  emitter: {
+    emit: vi.fn(),
+  },
+}));
+
+describe('useTrack', () => {
+  it('should return $track from the current instance proxy', () => {
+    const mockProxy = { $track: vi.fn() };
+    getCurrentInstance.mockReturnValue({ proxy: mockProxy });
+    const track = useTrack();
+    expect(track).toBe(mockProxy.$track);
+  });
+
+  it('should throw an error if called outside of setup', () => {
+    getCurrentInstance.mockReturnValue(null);
+    expect(useTrack).toThrowError('must be called in setup');
+  });
+});
+
+describe('useAlert', () => {
+  it('should emit a newToastMessage event with the provided message and action', () => {
+    const message = 'Toast message';
+    const action = {
+      type: 'link',
+      to: '/app/accounts/1/conversations/1',
+      message: 'Navigate',
+    };
+    useAlert(message, action);
+    expect(emitter.emit).toHaveBeenCalledWith('newToastMessage', {
+      message,
+      action,
+    });
+  });
+
+  it('should emit a newToastMessage event with the provided message and no action if action is null', () => {
+    const message = 'Toast message';
+    useAlert(message);
+    expect(emitter.emit).toHaveBeenCalledWith('newToastMessage', {
+      message,
+      action: null,
+    });
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useAccount.spec.js b/app/javascript/dashboard/composables/spec/useAccount.spec.js
new file mode 100644
index 0000000000000..aaee9825df89e
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useAccount.spec.js
@@ -0,0 +1,37 @@
+import { ref } from 'vue';
+import { describe, it, expect, vi } from 'vitest';
+import { useAccount } from '../useAccount';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store');
+
+describe('useAccount', () => {
+  beforeEach(() => {
+    useStoreGetters.mockReturnValue({
+      getCurrentAccountId: ref(123),
+    });
+  });
+
+  it('returns accountId as a computed property', () => {
+    const { accountId } = useAccount();
+    expect(accountId.value).toBe(123);
+  });
+
+  it('generates account-scoped URLs correctly', () => {
+    const { accountScopedUrl } = useAccount();
+    const result = accountScopedUrl('settings/inbox/new');
+    expect(result).toBe('/app/accounts/123/settings/inbox/new');
+  });
+
+  it('handles URLs with leading slash', () => {
+    const { accountScopedUrl } = useAccount();
+    const result = accountScopedUrl('users');
+    expect(result).toBe('/app/accounts/123/users');
+  });
+
+  it('handles empty URL', () => {
+    const { accountScopedUrl } = useAccount();
+    const result = accountScopedUrl('');
+    expect(result).toBe('/app/accounts/123/');
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useAdmin.spec.js b/app/javascript/dashboard/composables/spec/useAdmin.spec.js
new file mode 100644
index 0000000000000..a5d84a2456987
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useAdmin.spec.js
@@ -0,0 +1,52 @@
+import { ref } from 'vue';
+import { useAdmin } from '../useAdmin';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store');
+
+describe('useAdmin', () => {
+  it('returns true if the current user is an administrator', () => {
+    useStoreGetters.mockReturnValue({
+      getCurrentRole: ref('administrator'),
+    });
+
+    const { isAdmin } = useAdmin();
+    expect(isAdmin.value).toBe(true);
+  });
+
+  it('returns false if the current user is not an administrator', () => {
+    useStoreGetters.mockReturnValue({
+      getCurrentRole: ref('user'),
+    });
+
+    const { isAdmin } = useAdmin();
+    expect(isAdmin.value).toBe(false);
+  });
+
+  it('returns false if the current user role is null', () => {
+    useStoreGetters.mockReturnValue({
+      getCurrentRole: ref(null),
+    });
+
+    const { isAdmin } = useAdmin();
+    expect(isAdmin.value).toBe(false);
+  });
+
+  it('returns false if the current user role is undefined', () => {
+    useStoreGetters.mockReturnValue({
+      getCurrentRole: ref(undefined),
+    });
+
+    const { isAdmin } = useAdmin();
+    expect(isAdmin.value).toBe(false);
+  });
+
+  it('returns false if the current user role is an empty string', () => {
+    useStoreGetters.mockReturnValue({
+      getCurrentRole: ref(''),
+    });
+
+    const { isAdmin } = useAdmin();
+    expect(isAdmin.value).toBe(false);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useConfig.spec.js b/app/javascript/dashboard/composables/spec/useConfig.spec.js
new file mode 100644
index 0000000000000..92c65197edbe0
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useConfig.spec.js
@@ -0,0 +1,51 @@
+import { useConfig } from '../useConfig';
+
+describe('useConfig', () => {
+  const originalChatwootConfig = window.chatwootConfig;
+
+  beforeEach(() => {
+    window.chatwootConfig = {
+      hostURL: 'https://example.com',
+      vapidPublicKey: 'vapid-key',
+      enabledLanguages: ['en', 'fr'],
+      isEnterprise: 'true',
+      enterprisePlanName: 'enterprise',
+    };
+  });
+
+  afterEach(() => {
+    window.chatwootConfig = originalChatwootConfig;
+  });
+
+  it('returns the correct configuration values', () => {
+    const config = useConfig();
+
+    expect(config.hostURL).toBe('https://example.com');
+    expect(config.vapidPublicKey).toBe('vapid-key');
+    expect(config.enabledLanguages).toEqual(['en', 'fr']);
+    expect(config.isEnterprise).toBe(true);
+    expect(config.enterprisePlanName).toBe('enterprise');
+  });
+
+  it('handles missing configuration values', () => {
+    window.chatwootConfig = {};
+    const config = useConfig();
+
+    expect(config.hostURL).toBeUndefined();
+    expect(config.vapidPublicKey).toBeUndefined();
+    expect(config.enabledLanguages).toBeUndefined();
+    expect(config.isEnterprise).toBe(false);
+    expect(config.enterprisePlanName).toBeUndefined();
+  });
+
+  it('handles undefined window.chatwootConfig', () => {
+    window.chatwootConfig = undefined;
+    const config = useConfig();
+
+    expect(config.hostURL).toBeUndefined();
+    expect(config.vapidPublicKey).toBeUndefined();
+    expect(config.enabledLanguages).toBeUndefined();
+    expect(config.isEnterprise).toBe(false);
+    expect(config.enterprisePlanName).toBeUndefined();
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useConversationLabels.spec.js b/app/javascript/dashboard/composables/spec/useConversationLabels.spec.js
new file mode 100644
index 0000000000000..1bbe97e88c5ca
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useConversationLabels.spec.js
@@ -0,0 +1,87 @@
+import { useConversationLabels } from '../useConversationLabels';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store');
+
+describe('useConversationLabels', () => {
+  let store;
+  let getters;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        'conversationLabels/getConversationLabels': vi.fn(),
+      },
+      dispatch: vi.fn(),
+    };
+    getters = {
+      getSelectedChat: { value: { id: 1 } },
+      'labels/getLabels': {
+        value: [
+          { id: 1, title: 'Label 1' },
+          { id: 2, title: 'Label 2' },
+          { id: 3, title: 'Label 3' },
+        ],
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useStoreGetters.mockReturnValue(getters);
+  });
+
+  it('should return the correct computed properties', () => {
+    store.getters['conversationLabels/getConversationLabels'].mockReturnValue([
+      'Label 1',
+      'Label 2',
+    ]);
+    const { accountLabels, savedLabels, activeLabels, inactiveLabels } =
+      useConversationLabels();
+
+    expect(accountLabels.value).toEqual(getters['labels/getLabels'].value);
+    expect(savedLabels.value).toEqual(['Label 1', 'Label 2']);
+    expect(activeLabels.value).toEqual([
+      { id: 1, title: 'Label 1' },
+      { id: 2, title: 'Label 2' },
+    ]);
+    expect(inactiveLabels.value).toEqual([{ id: 3, title: 'Label 3' }]);
+  });
+
+  it('should update labels correctly', async () => {
+    const { onUpdateLabels } = useConversationLabels();
+    await onUpdateLabels(['Label 1', 'Label 3']);
+
+    expect(store.dispatch).toHaveBeenCalledWith('conversationLabels/update', {
+      conversationId: 1,
+      labels: ['Label 1', 'Label 3'],
+    });
+  });
+
+  it('should add a label to the conversation', () => {
+    store.getters['conversationLabels/getConversationLabels'].mockReturnValue([
+      'Label 1',
+    ]);
+    const { addLabelToConversation } = useConversationLabels();
+
+    addLabelToConversation({ title: 'Label 2' });
+
+    expect(store.dispatch).toHaveBeenCalledWith('conversationLabels/update', {
+      conversationId: 1,
+      labels: ['Label 1', 'Label 2'],
+    });
+  });
+
+  it('should remove a label from the conversation', () => {
+    store.getters['conversationLabels/getConversationLabels'].mockReturnValue([
+      'Label 1',
+      'Label 2',
+    ]);
+    const { removeLabelFromConversation } = useConversationLabels();
+
+    removeLabelFromConversation('Label 2');
+
+    expect(store.dispatch).toHaveBeenCalledWith('conversationLabels/update', {
+      conversationId: 1,
+      labels: ['Label 1'],
+    });
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useDetectKeyboardLayout.spec.js b/app/javascript/dashboard/composables/spec/useDetectKeyboardLayout.spec.js
new file mode 100644
index 0000000000000..531e4c39ea2b1
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useDetectKeyboardLayout.spec.js
@@ -0,0 +1,101 @@
+import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
+import {
+  LAYOUT_QWERTY,
+  LAYOUT_QWERTZ,
+  LAYOUT_AZERTY,
+} from 'shared/helpers/KeyboardHelpers';
+
+describe('useDetectKeyboardLayout', () => {
+  beforeEach(() => {
+    window.cw_keyboard_layout = null;
+  });
+
+  it('returns cached layout if available', async () => {
+    window.cw_keyboard_layout = LAYOUT_QWERTY;
+    const layout = await useDetectKeyboardLayout();
+    expect(layout).toBe(LAYOUT_QWERTY);
+  });
+
+  it('should detect QWERTY layout using modern method', async () => {
+    navigator.keyboard = {
+      getLayoutMap: vi.fn().mockResolvedValue(
+        new Map([
+          ['KeyQ', 'q'],
+          ['KeyW', 'w'],
+          ['KeyE', 'e'],
+          ['KeyR', 'r'],
+          ['KeyT', 't'],
+          ['KeyY', 'y'],
+        ])
+      ),
+    };
+
+    const layout = await useDetectKeyboardLayout();
+    expect(layout).toBe(LAYOUT_QWERTY);
+  });
+
+  it('should detect QWERTZ layout using modern method', async () => {
+    navigator.keyboard = {
+      getLayoutMap: vi.fn().mockResolvedValue(
+        new Map([
+          ['KeyQ', 'q'],
+          ['KeyW', 'w'],
+          ['KeyE', 'e'],
+          ['KeyR', 'r'],
+          ['KeyT', 't'],
+          ['KeyY', 'z'],
+        ])
+      ),
+    };
+
+    const layout = await useDetectKeyboardLayout();
+    expect(layout).toBe(LAYOUT_QWERTZ);
+  });
+
+  it('should detect AZERTY layout using modern method', async () => {
+    navigator.keyboard = {
+      getLayoutMap: vi.fn().mockResolvedValue(
+        new Map([
+          ['KeyQ', 'a'],
+          ['KeyW', 'z'],
+          ['KeyE', 'e'],
+          ['KeyR', 'r'],
+          ['KeyT', 't'],
+          ['KeyY', 'y'],
+        ])
+      ),
+    };
+
+    const layout = await useDetectKeyboardLayout();
+    expect(layout).toBe(LAYOUT_AZERTY);
+  });
+
+  it('should use legacy method if navigator.keyboard is not available', async () => {
+    navigator.keyboard = undefined;
+
+    const layout = await useDetectKeyboardLayout();
+    expect([LAYOUT_QWERTY, LAYOUT_QWERTZ, LAYOUT_AZERTY]).toContain(layout);
+  });
+
+  it('should cache the detected layout', async () => {
+    navigator.keyboard = {
+      getLayoutMap: vi.fn().mockResolvedValue(
+        new Map([
+          ['KeyQ', 'q'],
+          ['KeyW', 'w'],
+          ['KeyE', 'e'],
+          ['KeyR', 'r'],
+          ['KeyT', 't'],
+          ['KeyY', 'y'],
+        ])
+      ),
+    };
+
+    const layout = await useDetectKeyboardLayout();
+    expect(layout).toBe(LAYOUT_QWERTY);
+
+    const layoutAgain = await useDetectKeyboardLayout();
+    expect(layoutAgain).toBe(LAYOUT_QWERTY);
+    expect(navigator.keyboard.getLayoutMap).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js b/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
new file mode 100644
index 0000000000000..095c0a43c3517
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
@@ -0,0 +1,29 @@
+import { unref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+describe('useKeyboardEvents', () => {
+  it('should be defined', () => {
+    expect(useKeyboardEvents).toBeDefined();
+  });
+
+  it('should return a function', () => {
+    expect(useKeyboardEvents).toBeInstanceOf(Function);
+  });
+
+  it('should set up listeners on mount and remove them on unmount', async () => {
+    const el = document.createElement('div');
+    const elRef = unref({ value: el });
+    const events = {
+      'ALT+KeyL': () => {},
+    };
+
+    const mountedMock = vi.fn();
+    const unmountedMock = vi.fn();
+    useKeyboardEvents(events, elRef);
+    mountedMock();
+    unmountedMock();
+
+    expect(mountedMock).toHaveBeenCalled();
+    expect(unmountedMock).toHaveBeenCalled();
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js b/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
new file mode 100644
index 0000000000000..4968bdafeef74
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
@@ -0,0 +1,280 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ref } from 'vue';
+import { useKeyboardNavigableList } from '../useKeyboardNavigableList';
+import { useKeyboardEvents } from '../useKeyboardEvents';
+
+// Mock the useKeyboardEvents function
+vi.mock('../useKeyboardEvents', () => ({
+  useKeyboardEvents: vi.fn(),
+}));
+
+describe('useKeyboardNavigableList', () => {
+  let elementRef;
+  let items;
+  let onSelect;
+  let adjustScroll;
+  let selectedIndex;
+
+  const createMockEvent = () => ({ preventDefault: vi.fn() });
+
+  beforeEach(() => {
+    elementRef = ref(null);
+    items = ref(['item1', 'item2', 'item3']);
+    onSelect = vi.fn();
+    adjustScroll = vi.fn();
+    selectedIndex = ref(0);
+    vi.clearAllMocks();
+  });
+
+  it('should return moveSelectionUp and moveSelectionDown functions', () => {
+    const result = useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    expect(result).toHaveProperty('moveSelectionUp');
+    expect(result).toHaveProperty('moveSelectionDown');
+    expect(typeof result.moveSelectionUp).toBe('function');
+    expect(typeof result.moveSelectionDown).toBe('function');
+  });
+
+  it('should move selection up correctly', () => {
+    const { moveSelectionUp } = useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    moveSelectionUp();
+    expect(selectedIndex.value).toBe(2);
+
+    moveSelectionUp();
+    expect(selectedIndex.value).toBe(1);
+
+    moveSelectionUp();
+    expect(selectedIndex.value).toBe(0);
+
+    moveSelectionUp();
+    expect(selectedIndex.value).toBe(2);
+  });
+
+  it('should move selection down correctly', () => {
+    const { moveSelectionDown } = useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    moveSelectionDown();
+    expect(selectedIndex.value).toBe(1);
+
+    moveSelectionDown();
+    expect(selectedIndex.value).toBe(2);
+
+    moveSelectionDown();
+    expect(selectedIndex.value).toBe(0);
+
+    moveSelectionDown();
+    expect(selectedIndex.value).toBe(1);
+  });
+
+  it('should call adjustScroll after moving selection', () => {
+    const { moveSelectionUp, moveSelectionDown } = useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    moveSelectionUp();
+    expect(adjustScroll).toHaveBeenCalledTimes(1);
+
+    moveSelectionDown();
+    expect(adjustScroll).toHaveBeenCalledTimes(2);
+  });
+
+  it('should include Enter key handler when onSelect is provided', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+
+    expect(keyboardEvents).toHaveProperty('Enter');
+    expect(keyboardEvents.Enter.allowOnFocusedInput).toBe(true);
+  });
+
+  it('should not include Enter key handler when onSelect is not provided', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+
+    expect(keyboardEvents).not.toHaveProperty('Enter');
+  });
+
+  it('should not trigger onSelect when items are empty', () => {
+    const { moveSelectionUp, moveSelectionDown } = useKeyboardNavigableList({
+      elementRef,
+      items: ref([]),
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    moveSelectionUp();
+    moveSelectionDown();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('should call useKeyboardEvents with correct parameters', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    expect(useKeyboardEvents).toHaveBeenCalledWith(
+      expect.any(Object),
+      elementRef
+    );
+  });
+
+  // Keyboard event handlers
+  it('should handle ArrowUp key', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+    const mockEvent = createMockEvent();
+    keyboardEvents.ArrowUp.action(mockEvent);
+
+    expect(selectedIndex.value).toBe(2);
+    expect(adjustScroll).toHaveBeenCalled();
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should handle Control+KeyP', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+    const mockEvent = createMockEvent();
+    keyboardEvents['Control+KeyP'].action(mockEvent);
+
+    expect(selectedIndex.value).toBe(2);
+    expect(adjustScroll).toHaveBeenCalled();
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should handle ArrowDown key', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+    const mockEvent = createMockEvent();
+    keyboardEvents.ArrowDown.action(mockEvent);
+
+    expect(selectedIndex.value).toBe(1);
+    expect(adjustScroll).toHaveBeenCalled();
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should handle Control+KeyN', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+    const mockEvent = createMockEvent();
+    keyboardEvents['Control+KeyN'].action(mockEvent);
+
+    expect(selectedIndex.value).toBe(1);
+    expect(adjustScroll).toHaveBeenCalled();
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should handle Enter key when onSelect is provided', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+    const mockEvent = createMockEvent();
+    keyboardEvents.Enter.action(mockEvent);
+
+    expect(onSelect).toHaveBeenCalled();
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should not have Enter key handler when onSelect is not provided', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      adjustScroll,
+      selectedIndex,
+    });
+
+    const keyboardEventsWithoutSelect = useKeyboardEvents.mock.calls[0][0];
+    expect(keyboardEventsWithoutSelect).not.toHaveProperty('Enter');
+  });
+
+  it('should set allowOnFocusedInput to true for all key handlers', () => {
+    useKeyboardNavigableList({
+      elementRef,
+      items,
+      onSelect,
+      adjustScroll,
+      selectedIndex,
+    });
+    const keyboardEvents = useKeyboardEvents.mock.calls[0][0];
+    const keyHandlers = [
+      'ArrowUp',
+      'Control+KeyP',
+      'ArrowDown',
+      'Control+KeyN',
+      'Enter',
+    ];
+    keyHandlers.forEach(key => {
+      if (keyboardEvents[key]) {
+        expect(keyboardEvents[key].allowOnFocusedInput).toBe(true);
+      }
+    });
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useMacros.spec.js b/app/javascript/dashboard/composables/spec/useMacros.spec.js
new file mode 100644
index 0000000000000..d268547a56a44
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useMacros.spec.js
@@ -0,0 +1,175 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useMacros } from '../useMacros';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/helper/automationHelper.js');
+
+describe('useMacros', () => {
+  const mockLabels = [
+    {
+      id: 6,
+      title: 'sales',
+      description: 'sales team',
+      color: '#8EA20F',
+      show_on_sidebar: true,
+    },
+    {
+      id: 2,
+      title: 'billing',
+      description: 'billing',
+      color: '#4077DA',
+      show_on_sidebar: true,
+    },
+    {
+      id: 1,
+      title: 'snoozed',
+      description: 'Items marked for later',
+      color: '#D12F42',
+      show_on_sidebar: true,
+    },
+    {
+      id: 5,
+      title: 'mobile-app',
+      description: 'tech team',
+      color: '#2DB1CC',
+      show_on_sidebar: true,
+    },
+    {
+      id: 14,
+      title: 'human-resources-department-with-long-title',
+      description: 'Test',
+      color: '#FF6E09',
+      show_on_sidebar: true,
+    },
+    {
+      id: 22,
+      title: 'priority',
+      description: 'For important sales leads',
+      color: '#7E7CED',
+      show_on_sidebar: true,
+    },
+  ];
+  const mockTeams = [
+    {
+      id: 1,
+      name: '⚙️ sales team',
+      description: 'This is our internal sales team',
+      allow_auto_assign: true,
+      account_id: 1,
+      is_member: true,
+    },
+    {
+      id: 2,
+      name: '🤷‍♂️ fayaz',
+      description: 'Test',
+      allow_auto_assign: true,
+      account_id: 1,
+      is_member: true,
+    },
+    {
+      id: 3,
+      name: '🇮🇳 apac sales',
+      description: 'Sales team for France Territory',
+      allow_auto_assign: true,
+      account_id: 1,
+      is_member: true,
+    },
+  ];
+  const mockAgents = [
+    {
+      id: 1,
+      account_id: 1,
+      availability_status: 'offline',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@doe.com',
+      available_name: 'John Doe',
+      name: 'John Doe',
+      role: 'agent',
+      thumbnail: 'https://example.com/image.png',
+    },
+    {
+      id: 9,
+      account_id: 1,
+      availability_status: 'offline',
+      auto_offline: true,
+      confirmed: true,
+      email: 'clark@kent.com',
+      available_name: 'Clark Kent',
+      name: 'Clark Kent',
+      role: 'agent',
+      thumbnail: '',
+    },
+  ];
+
+  beforeEach(() => {
+    useStoreGetters.mockReturnValue({
+      'labels/getLabels': { value: mockLabels },
+      'teams/getTeams': { value: mockTeams },
+      'agents/getAgents': { value: mockAgents },
+    });
+  });
+
+  it('initializes computed properties correctly', () => {
+    const { getMacroDropdownValues } = useMacros();
+    expect(getMacroDropdownValues('add_label')).toHaveLength(mockLabels.length);
+    expect(getMacroDropdownValues('assign_team')).toHaveLength(
+      mockTeams.length
+    );
+    expect(getMacroDropdownValues('assign_agent')).toHaveLength(
+      mockAgents.length + 1
+    ); // +1 for "Self"
+  });
+
+  it('returns teams for assign_team and send_email_to_team types', () => {
+    const { getMacroDropdownValues } = useMacros();
+    expect(getMacroDropdownValues('assign_team')).toEqual(mockTeams);
+    expect(getMacroDropdownValues('send_email_to_team')).toEqual(mockTeams);
+  });
+
+  it('returns agents with "Self" option for assign_agent type', () => {
+    const { getMacroDropdownValues } = useMacros();
+    const result = getMacroDropdownValues('assign_agent');
+    expect(result[0]).toEqual({ id: 'self', name: 'Self' });
+    expect(result.slice(1)).toEqual(mockAgents);
+  });
+
+  it('returns formatted labels for add_label and remove_label types', () => {
+    const { getMacroDropdownValues } = useMacros();
+    const expectedLabels = mockLabels.map(i => ({
+      id: i.title,
+      name: i.title,
+    }));
+    expect(getMacroDropdownValues('add_label')).toEqual(expectedLabels);
+    expect(getMacroDropdownValues('remove_label')).toEqual(expectedLabels);
+  });
+
+  it('returns PRIORITY_CONDITION_VALUES for change_priority type', () => {
+    const { getMacroDropdownValues } = useMacros();
+    expect(getMacroDropdownValues('change_priority')).toEqual(
+      PRIORITY_CONDITION_VALUES
+    );
+  });
+
+  it('returns an empty array for unknown types', () => {
+    const { getMacroDropdownValues } = useMacros();
+    expect(getMacroDropdownValues('unknown_type')).toEqual([]);
+  });
+
+  it('handles empty data correctly', () => {
+    useStoreGetters.mockReturnValue({
+      'labels/getLabels': { value: [] },
+      'teams/getTeams': { value: [] },
+      'agents/getAgents': { value: [] },
+    });
+
+    const { getMacroDropdownValues } = useMacros();
+    expect(getMacroDropdownValues('add_label')).toEqual([]);
+    expect(getMacroDropdownValues('assign_team')).toEqual([]);
+    expect(getMacroDropdownValues('assign_agent')).toEqual([
+      { id: 'self', name: 'Self' },
+    ]);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useUISettings.spec.js b/app/javascript/dashboard/composables/spec/useUISettings.spec.js
new file mode 100644
index 0000000000000..396363bbf267f
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useUISettings.spec.js
@@ -0,0 +1,138 @@
+import { ref } from 'vue';
+import {
+  useUISettings,
+  DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+  DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
+} from 'dashboard/composables/useUISettings';
+
+// Mocking the store composables
+const mockDispatch = vi.fn();
+
+const getUISettingsMock = ref({
+  is_ct_labels_open: true,
+  conversation_sidebar_items_order: DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+  contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
+  editor_message_key: 'enter',
+});
+
+vi.mock('dashboard/composables/store', () => ({
+  useStoreGetters: () => ({
+    getUISettings: getUISettingsMock,
+  }),
+  useStore: () => ({
+    dispatch: mockDispatch,
+  }),
+}));
+
+describe('useUISettings', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('returns uiSettings', () => {
+    const { uiSettings } = useUISettings();
+    expect(uiSettings.value).toEqual({
+      is_ct_labels_open: true,
+      conversation_sidebar_items_order:
+        DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+      contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
+      editor_message_key: 'enter',
+    });
+  });
+
+  it('updates UI settings correctly', () => {
+    const { updateUISettings } = useUISettings();
+    updateUISettings({ enter_to_send_enabled: true });
+    expect(mockDispatch).toHaveBeenCalledWith('updateUISettings', {
+      uiSettings: {
+        enter_to_send_enabled: true,
+        is_ct_labels_open: true,
+        conversation_sidebar_items_order:
+          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
+        editor_message_key: 'enter',
+      },
+    });
+  });
+
+  it('toggles sidebar UI state correctly', () => {
+    const { toggleSidebarUIState } = useUISettings();
+    toggleSidebarUIState('is_ct_labels_open');
+    expect(mockDispatch).toHaveBeenCalledWith('updateUISettings', {
+      uiSettings: {
+        is_ct_labels_open: false,
+        conversation_sidebar_items_order:
+          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
+        editor_message_key: 'enter',
+      },
+    });
+  });
+
+  it('returns correct conversation sidebar items order', () => {
+    const { conversationSidebarItemsOrder } = useUISettings();
+    expect(conversationSidebarItemsOrder.value).toEqual(
+      DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER
+    );
+  });
+
+  it('returns correct contact sidebar items order', () => {
+    const { contactSidebarItemsOrder } = useUISettings();
+    expect(contactSidebarItemsOrder.value).toEqual(
+      DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER
+    );
+  });
+
+  it('returns correct value for isContactSidebarItemOpen', () => {
+    const { isContactSidebarItemOpen } = useUISettings();
+    expect(isContactSidebarItemOpen('is_ct_labels_open')).toBe(true);
+    expect(isContactSidebarItemOpen('non_existent_key')).toBe(false);
+  });
+
+  it('sets signature flag for inbox correctly', () => {
+    const { setSignatureFlagForInbox } = useUISettings();
+    setSignatureFlagForInbox('email', true);
+    expect(mockDispatch).toHaveBeenCalledWith('updateUISettings', {
+      uiSettings: {
+        is_ct_labels_open: true,
+        conversation_sidebar_items_order:
+          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
+        email_signature_enabled: true,
+        editor_message_key: 'enter',
+      },
+    });
+  });
+
+  it('fetches signature flag from UI settings correctly', () => {
+    const { fetchSignatureFlagFromUISettings } = useUISettings();
+    expect(fetchSignatureFlagFromUISettings('email')).toBe(undefined);
+  });
+
+  it('returns correct value for isEditorHotKeyEnabled when editor_message_key is configured', () => {
+    getUISettingsMock.value.enter_to_send_enabled = false;
+    const { isEditorHotKeyEnabled } = useUISettings();
+    expect(isEditorHotKeyEnabled('enter')).toBe(true);
+    expect(isEditorHotKeyEnabled('cmd_enter')).toBe(false);
+  });
+
+  it('returns correct value for isEditorHotKeyEnabled when editor_message_key is not configured', () => {
+    getUISettingsMock.value.editor_message_key = undefined;
+    const { isEditorHotKeyEnabled } = useUISettings();
+    expect(isEditorHotKeyEnabled('enter')).toBe(false);
+    expect(isEditorHotKeyEnabled('cmd_enter')).toBe(true);
+  });
+
+  it('handles non-existent keys', () => {
+    const {
+      isContactSidebarItemOpen,
+      fetchSignatureFlagFromUISettings,
+      isEditorHotKeyEnabled,
+    } = useUISettings();
+    expect(isContactSidebarItemOpen('non_existent_key')).toBe(false);
+    expect(fetchSignatureFlagFromUISettings('non_existent_key')).toBe(
+      undefined
+    );
+    expect(isEditorHotKeyEnabled('non_existent_key')).toBe(false);
+  });
+});
diff --git a/app/javascript/dashboard/composables/store.js b/app/javascript/dashboard/composables/store.js
index f9edd184aca19..ab088ad277334 100644
--- a/app/javascript/dashboard/composables/store.js
+++ b/app/javascript/dashboard/composables/store.js
@@ -17,7 +17,7 @@ export const useStoreGetters = () => {
   );
 };
 
-export const mapGetter = key => {
+export const useMapGetter = key => {
   const store = useStore();
   return computed(() => store.getters[key]);
 };
diff --git a/app/javascript/dashboard/composables/useAccount.js b/app/javascript/dashboard/composables/useAccount.js
new file mode 100644
index 0000000000000..0c3a7b6111620
--- /dev/null
+++ b/app/javascript/dashboard/composables/useAccount.js
@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+/**
+ * Composable for account-related operations.
+ * @returns {Object} An object containing account-related properties and methods.
+ */
+export function useAccount() {
+  const getters = useStoreGetters();
+
+  /**
+   * Computed property for the current account ID.
+   * @type {import('vue').ComputedRef<number>}
+   */
+  const accountId = computed(() => getters.getCurrentAccountId.value);
+
+  /**
+   * Generates an account-scoped URL.
+   * @param {string} url - The URL to be scoped to the account.
+   * @returns {string} The account-scoped URL.
+   */
+  const accountScopedUrl = url => {
+    return `/app/accounts/${accountId.value}/${url}`;
+  };
+
+  return {
+    accountId,
+    accountScopedUrl,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useAdmin.js b/app/javascript/dashboard/composables/useAdmin.js
new file mode 100644
index 0000000000000..ea5bef886ec0b
--- /dev/null
+++ b/app/javascript/dashboard/composables/useAdmin.js
@@ -0,0 +1,17 @@
+import { computed } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+/**
+ * Composable to determine if the current user is an administrator.
+ * @returns {Boolean} - True if the current user is an administrator, false otherwise.
+ */
+export function useAdmin() {
+  const getters = useStoreGetters();
+
+  const currentUserRole = computed(() => getters.getCurrentRole.value);
+  const isAdmin = computed(() => currentUserRole.value === 'administrator');
+
+  return {
+    isAdmin,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useConfig.js b/app/javascript/dashboard/composables/useConfig.js
new file mode 100644
index 0000000000000..493f86d024352
--- /dev/null
+++ b/app/javascript/dashboard/composables/useConfig.js
@@ -0,0 +1,46 @@
+/**
+ * A function that provides access to various configuration values.
+ * @returns {Object} An object containing configuration values.
+ */
+export function useConfig() {
+  const config = window.chatwootConfig || {};
+
+  /**
+   * The host URL of the Chatwoot instance.
+   * @type {string|undefined}
+   */
+  const hostURL = config.hostURL;
+
+  /**
+   * The VAPID public key for web push notifications.
+   * @type {string|undefined}
+   */
+  const vapidPublicKey = config.vapidPublicKey;
+
+  /**
+   * An array of enabled languages in the Chatwoot instance.
+   * @type {string[]|undefined}
+   */
+  const enabledLanguages = config.enabledLanguages;
+
+  /**
+   * Indicates whether the current instance is an enterprise version.
+   * @type {boolean}
+   */
+  const isEnterprise = config.isEnterprise === 'true';
+
+  /**
+   * The name of the enterprise plan, if applicable.
+   * Returns "community" or "enterprise"
+   * @type {string|undefined}
+   */
+  const enterprisePlanName = config.enterprisePlanName;
+
+  return {
+    hostURL,
+    vapidPublicKey,
+    enabledLanguages,
+    isEnterprise,
+    enterprisePlanName,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useConversationLabels.js b/app/javascript/dashboard/composables/useConversationLabels.js
new file mode 100644
index 0000000000000..f05ef79b66e0f
--- /dev/null
+++ b/app/javascript/dashboard/composables/useConversationLabels.js
@@ -0,0 +1,101 @@
+import { computed } from 'vue';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+
+/**
+ * Composable for managing conversation labels
+ * @returns {Object} An object containing methods and computed properties for conversation labels
+ */
+export function useConversationLabels() {
+  const store = useStore();
+  const getters = useStoreGetters();
+
+  /**
+   * The currently selected chat
+   * @type {import('vue').ComputedRef<Object>}
+   */
+  const currentChat = computed(() => getters.getSelectedChat.value);
+
+  /**
+   * The ID of the current conversation
+   * @type {import('vue').ComputedRef<number|null>}
+   */
+  const conversationId = computed(() => currentChat.value?.id);
+
+  /**
+   * All labels available for the account
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const accountLabels = computed(() => getters['labels/getLabels'].value);
+
+  /**
+   * Labels currently saved to the conversation
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const savedLabels = computed(() => {
+    return store.getters['conversationLabels/getConversationLabels'](
+      conversationId.value
+    );
+  });
+
+  /**
+   * Labels currently active on the conversation
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const activeLabels = computed(() =>
+    accountLabels.value.filter(({ title }) => savedLabels.value.includes(title))
+  );
+
+  /**
+   * Labels available but not active on the conversation
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const inactiveLabels = computed(() =>
+    accountLabels.value.filter(
+      ({ title }) => !savedLabels.value.includes(title)
+    )
+  );
+
+  /**
+   * Updates the labels for the current conversation
+   * @param {string[]} selectedLabels - Array of label titles to be set for the conversation
+   * @returns {Promise<void>}
+   */
+  const onUpdateLabels = async selectedLabels => {
+    await store.dispatch('conversationLabels/update', {
+      conversationId: conversationId.value,
+      labels: selectedLabels,
+    });
+  };
+
+  /**
+   * Adds a label to the current conversation
+   * @param {Object} value - The label object to be added
+   * @param {string} value.title - The title of the label to be added
+   */
+  const addLabelToConversation = value => {
+    const result = activeLabels.value.map(item => item.title);
+    result.push(value.title);
+    onUpdateLabels(result);
+  };
+
+  /**
+   * Removes a label from the current conversation
+   * @param {string} value - The title of the label to be removed
+   */
+  const removeLabelFromConversation = value => {
+    const result = activeLabels.value
+      .map(label => label.title)
+      .filter(label => label !== value);
+    onUpdateLabels(result);
+  };
+
+  return {
+    accountLabels,
+    savedLabels,
+    activeLabels,
+    inactiveLabels,
+    addLabelToConversation,
+    removeLabelFromConversation,
+    onUpdateLabels,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useDetectKeyboardLayout.js b/app/javascript/dashboard/composables/useDetectKeyboardLayout.js
new file mode 100644
index 0000000000000..3b2f3e766dd9a
--- /dev/null
+++ b/app/javascript/dashboard/composables/useDetectKeyboardLayout.js
@@ -0,0 +1,73 @@
+import {
+  LAYOUT_QWERTY,
+  LAYOUT_QWERTZ,
+  LAYOUT_AZERTY,
+} from 'shared/helpers/KeyboardHelpers';
+
+/**
+ * Detects the keyboard layout using a legacy method by creating a hidden input and dispatching a key event.
+ * @returns {Promise<string>} A promise that resolves to the detected keyboard layout.
+ */
+async function detectLegacy() {
+  const input = document.createElement('input');
+  input.style.position = 'fixed';
+  input.style.top = '-100px';
+  document.body.appendChild(input);
+  input.focus();
+
+  return new Promise(resolve => {
+    const keyboardEvent = new KeyboardEvent('keypress', {
+      key: 'y',
+      keyCode: 89,
+      which: 89,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    const handler = e => {
+      document.body.removeChild(input);
+      document.removeEventListener('keypress', handler);
+      if (e.key === 'z') {
+        resolve(LAYOUT_QWERTY);
+      } else if (e.key === 'y') {
+        resolve(LAYOUT_QWERTZ);
+      } else {
+        resolve(LAYOUT_AZERTY);
+      }
+    };
+
+    document.addEventListener('keypress', handler);
+    input.dispatchEvent(keyboardEvent);
+  });
+}
+
+/**
+ * Detects the keyboard layout using the modern navigator.keyboard API.
+ * @returns {Promise<string>} A promise that resolves to the detected keyboard layout.
+ */
+async function detect() {
+  const map = await navigator.keyboard.getLayoutMap();
+  const q = map.get('KeyQ');
+  const w = map.get('KeyW');
+  const e = map.get('KeyE');
+  const r = map.get('KeyR');
+  const t = map.get('KeyT');
+  const y = map.get('KeyY');
+
+  return [q, w, e, r, t, y].join('').toUpperCase();
+}
+
+/**
+ * Uses either the modern or legacy method to detect the keyboard layout, caching the result.
+ * @returns {Promise<string>} A promise that resolves to the detected keyboard layout.
+ */
+export async function useDetectKeyboardLayout() {
+  const cachedLayout = window.cw_keyboard_layout;
+  if (cachedLayout) {
+    return cachedLayout;
+  }
+
+  const layout = navigator.keyboard ? await detect() : await detectLegacy();
+  window.cw_keyboard_layout = layout;
+  return layout;
+}
diff --git a/app/javascript/dashboard/composables/useKeyboardEvents.js b/app/javascript/dashboard/composables/useKeyboardEvents.js
new file mode 100644
index 0000000000000..388b1b8b4f47e
--- /dev/null
+++ b/app/javascript/dashboard/composables/useKeyboardEvents.js
@@ -0,0 +1,117 @@
+import { onMounted, onBeforeUnmount, unref } from 'vue';
+import {
+  isActiveElementTypeable,
+  isEscape,
+  keysToModifyInQWERTZ,
+  LAYOUT_QWERTZ,
+} from 'shared/helpers/KeyboardHelpers';
+import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
+import { createKeybindingsHandler } from 'tinykeys';
+
+const keyboardListenerMap = new WeakMap();
+
+/**
+ * Determines if the keyboard event should be ignored based on the element type and handler settings.
+ * @param {Event} e - The event object.
+ * @param {Object|Function} handler - The handler configuration or function.
+ * @returns {boolean} - True if the event should be ignored, false otherwise.
+ */
+const shouldIgnoreEvent = (e, handler) => {
+  const isTypeable = isActiveElementTypeable(e);
+  const allowOnFocusedInput =
+    typeof handler === 'function' ? false : handler.allowOnFocusedInput;
+
+  if (isTypeable) {
+    if (isEscape(e)) {
+      e.target.blur();
+    }
+    return !allowOnFocusedInput;
+  }
+  return false;
+};
+
+/**
+ * Wraps the event handler to include custom logic before executing the handler.
+ * @param {Function} handler - The original event handler.
+ * @returns {Function} - The wrapped handler.
+ */
+const keydownWrapper = handler => {
+  return e => {
+    if (shouldIgnoreEvent(e, handler)) return;
+    //  extract the action to perform from the handler
+
+    const actionToPerform =
+      typeof handler === 'function' ? handler : handler.action;
+    actionToPerform(e);
+  };
+};
+
+/**
+ * Wraps all provided keyboard events in handlers that respect the current keyboard layout.
+ * @param {Object} events - The object containing event names and their handlers.
+ * @returns {Object} - The object with event names possibly modified based on the keyboard layout and wrapped handlers.
+ */
+async function wrapEventsInKeybindingsHandler(events) {
+  const wrappedEvents = {};
+  const currentLayout = await useDetectKeyboardLayout();
+
+  Object.keys(events).forEach(originalEventName => {
+    const modifiedEventName =
+      currentLayout === LAYOUT_QWERTZ &&
+      keysToModifyInQWERTZ.has(originalEventName)
+        ? `Shift+${originalEventName}`
+        : originalEventName;
+
+    wrappedEvents[modifiedEventName] = keydownWrapper(
+      events[originalEventName]
+    );
+  });
+  return wrappedEvents;
+}
+
+/**
+ * Sets up keyboard event listeners on the specified element.
+ * @param {Element} root - The DOM element to attach listeners to.
+ * @param {Object} events - The events to listen for.
+ */
+const setupListeners = (root, events) => {
+  if (root instanceof Element && events) {
+    const keydownHandler = createKeybindingsHandler(events);
+    document.addEventListener('keydown', keydownHandler);
+    keyboardListenerMap.set(root, keydownHandler);
+  }
+};
+
+/**
+ * Removes keyboard event listeners from the specified element.
+ * @param {Element} root - The DOM element to remove listeners from.
+ */
+const removeListeners = root => {
+  // In the future, let's use the abort controller to remove the listeners
+  // https://caniuse.com/abortcontroller
+  if (root instanceof Element) {
+    const handlerToRemove = keyboardListenerMap.get(root);
+    document.removeEventListener('keydown', handlerToRemove);
+    keyboardListenerMap.delete(root);
+  }
+};
+
+/**
+ * Vue composable to handle keyboard events with support for different keyboard layouts.
+ * @param {Object} keyboardEvents - The keyboard events to handle.
+ * @param {ref} elRef - A Vue ref to the element to attach the keyboard events to.
+ */
+export function useKeyboardEvents(keyboardEvents, elRef = null) {
+  onMounted(async () => {
+    const el = unref(elRef);
+    const getKeyboardEvents = () => keyboardEvents || null;
+    const events = getKeyboardEvents();
+    const wrappedEvents = await wrapEventsInKeybindingsHandler(events);
+    setupListeners(el, wrappedEvents);
+  });
+
+  onBeforeUnmount(() => {
+    const el = unref(elRef);
+    removeListeners(el);
+  });
+}
diff --git a/app/javascript/dashboard/composables/useKeyboardNavigableList.js b/app/javascript/dashboard/composables/useKeyboardNavigableList.js
new file mode 100644
index 0000000000000..c05d91fb6dbc6
--- /dev/null
+++ b/app/javascript/dashboard/composables/useKeyboardNavigableList.js
@@ -0,0 +1,118 @@
+/**
+ * This composable provides keyboard navigation functionality for list-like UI components
+ * such as dropdowns, autocomplete suggestions, or any list of selectable items.
+ *
+ * TODO - Things that can be improved in the future
+ * - The scrolling should be handled by the component instead of the consumer of this composable
+ *   it can be done if we know the item height.
+ * - The focus should be trapped within the list.
+ * - onSelect should be callback instead of a function that is passed
+ */
+import { useKeyboardEvents } from './useKeyboardEvents';
+
+/**
+ * Wrap the action in a function that calls the action and prevents the default event behavior.
+ * @param {Function} action - The action to be called.
+ * @returns {{action: Function, allowOnFocusedInput: boolean}} An object containing the action and a flag to allow the event on focused input.
+ */
+const createAction = action => ({
+  action: e => {
+    action();
+    e.preventDefault();
+  },
+  allowOnFocusedInput: true,
+});
+
+/**
+ * Creates keyboard event handlers for navigation.
+ * @param {Function} moveSelectionUp - Function to move selection up.
+ * @param {Function} moveSelectionDown - Function to move selection down.
+ * @param {Function} [onSelect] - Optional function to handle selection.
+ * @param {import('vue').Ref<Array>} items - A ref to the array of selectable items.
+ * @returns {Object.<string, {action: Function, allowOnFocusedInput: boolean}>}
+ */
+const createKeyboardEvents = (
+  moveSelectionUp,
+  moveSelectionDown,
+  onSelect,
+  items
+) => {
+  const events = {
+    ArrowUp: createAction(moveSelectionUp),
+    'Control+KeyP': createAction(moveSelectionUp),
+    ArrowDown: createAction(moveSelectionDown),
+    'Control+KeyN': createAction(moveSelectionDown),
+  };
+
+  // Adds an event handler for the Enter key if the onSelect function is provided.
+  if (typeof onSelect === 'function') {
+    events.Enter = createAction(() => items.value?.length > 0 && onSelect());
+  }
+
+  return events;
+};
+
+/**
+ * Updates the selection index based on the current index, total number of items, and direction of movement.
+ *
+ * @param {number} currentIndex - The current index of the selected item.
+ * @param {number} itemsLength - The total number of items in the list.
+ * @param {string} direction - The direction of movement, either 'up' or 'down'.
+ * @returns {number} The new index after moving in the specified direction.
+ */
+const updateSelectionIndex = (currentIndex, itemsLength, direction) => {
+  // If the selected index is the first item, move to the last item
+  // If the selected index is the last item, move to the first item
+  if (direction === 'up') {
+    return currentIndex === 0 ? itemsLength - 1 : currentIndex - 1;
+  }
+  return currentIndex === itemsLength - 1 ? 0 : currentIndex + 1;
+};
+
+/**
+ * A composable for handling keyboard navigation in mention selection scenarios.
+ *
+ * @param {Object} options - The options for the composable.
+ * @param {import('vue').Ref<HTMLElement>} options.elementRef - A ref to the DOM element that will receive keyboard events.
+ * @param {import('vue').Ref<Array>} options.items - A ref to the array of selectable items.
+ * @param {Function} [options.onSelect] - An optional function to be called when an item is selected.
+ * @param {Function} options.adjustScroll - A function to adjust the scroll position after selection changes.
+ * @param {import('vue').Ref<number>} options.selectedIndex - A ref to the currently selected index.
+ * @returns {{
+ *   moveSelectionUp: Function,
+ *   moveSelectionDown: Function
+ * }} An object containing functions to move the selection up and down.
+ */
+export function useKeyboardNavigableList({
+  elementRef,
+  items,
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+}) {
+  const moveSelection = direction => {
+    selectedIndex.value = updateSelectionIndex(
+      selectedIndex.value,
+      items.value.length,
+      direction
+    );
+    adjustScroll();
+  };
+
+  const moveSelectionUp = () => moveSelection('up');
+  const moveSelectionDown = () => moveSelection('down');
+
+  const keyboardEvents = createKeyboardEvents(
+    moveSelectionUp,
+    moveSelectionDown,
+    onSelect,
+    items
+  );
+
+  useKeyboardEvents(keyboardEvents, elementRef);
+
+  return {
+    moveSelectionUp,
+    moveSelectionDown,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useMacros.js b/app/javascript/dashboard/composables/useMacros.js
new file mode 100644
index 0000000000000..6967331ea5f51
--- /dev/null
+++ b/app/javascript/dashboard/composables/useMacros.js
@@ -0,0 +1,44 @@
+import { computed } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
+
+/**
+ * Composable for handling macro-related functionality
+ * @returns {Object} An object containing the getMacroDropdownValues function
+ */
+export const useMacros = () => {
+  const getters = useStoreGetters();
+
+  const labels = computed(() => getters['labels/getLabels'].value);
+  const teams = computed(() => getters['teams/getTeams'].value);
+  const agents = computed(() => getters['agents/getAgents'].value);
+
+  /**
+   * Get dropdown values based on the specified type
+   * @param {string} type - The type of dropdown values to retrieve
+   * @returns {Array} An array of dropdown values
+   */
+  const getMacroDropdownValues = type => {
+    switch (type) {
+      case 'assign_team':
+      case 'send_email_to_team':
+        return teams.value;
+      case 'assign_agent':
+        return [{ id: 'self', name: 'Self' }, ...agents.value];
+      case 'add_label':
+      case 'remove_label':
+        return labels.value.map(i => ({
+          id: i.title,
+          name: i.title,
+        }));
+      case 'change_priority':
+        return PRIORITY_CONDITION_VALUES;
+      default:
+        return [];
+    }
+  };
+
+  return {
+    getMacroDropdownValues,
+  };
+};
diff --git a/app/javascript/dashboard/composables/useUISettings.js b/app/javascript/dashboard/composables/useUISettings.js
new file mode 100644
index 0000000000000..f3a7cb4dc4956
--- /dev/null
+++ b/app/javascript/dashboard/composables/useUISettings.js
@@ -0,0 +1,149 @@
+import { computed } from 'vue';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+
+export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = Object.freeze([
+  { name: 'conversation_actions' },
+  { name: 'macros' },
+  { name: 'conversation_info' },
+  { name: 'contact_attributes' },
+  { name: 'previous_conversation' },
+  { name: 'conversation_participants' },
+]);
+
+export const DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER = Object.freeze([
+  { name: 'contact_attributes' },
+  { name: 'contact_labels' },
+  { name: 'previous_conversation' },
+]);
+
+/**
+ * Slugifies the channel name.
+ * Replaces spaces, hyphens, and double colons with underscores.
+ * @param {string} name - The channel name to slugify.
+ * @returns {string} The slugified channel name.
+ */
+const slugifyChannel = name =>
+  name?.toLowerCase().replace(' ', '_').replace('-', '_').replace('::', '_');
+
+/**
+ * Computes the order of items in the conversation sidebar, using defaults if not present.
+ * @param {Object} uiSettings - Reactive UI settings object.
+ * @returns {Array} Ordered list of sidebar items.
+ */
+const useConversationSidebarItemsOrder = uiSettings => {
+  return computed(() => {
+    const { conversation_sidebar_items_order: itemsOrder } = uiSettings.value;
+    // If the sidebar order is not set, use the default order.
+    if (!itemsOrder) {
+      return DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
+    }
+    // Create a copy of itemsOrder to avoid mutating the original store object.
+    const itemsOrderCopy = [...itemsOrder];
+    // If the sidebar order doesn't have the new elements, then add them to the list.
+    DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER.forEach(item => {
+      if (!itemsOrderCopy.find(i => i.name === item.name)) {
+        itemsOrderCopy.push(item);
+      }
+    });
+    return itemsOrderCopy;
+  });
+};
+
+/**
+ * Computes the order of items in the contact sidebar,using defaults if not present.
+ * @param {Object} uiSettings - Reactive UI settings object.
+ * @returns {Array} Ordered list of sidebar items.
+ */
+const useContactSidebarItemsOrder = uiSettings => {
+  return computed(() => {
+    const { contact_sidebar_items_order: itemsOrder } = uiSettings.value;
+    return itemsOrder || DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER;
+  });
+};
+
+/**
+ * Toggles the open state of a sidebar item.
+ * @param {string} key - The key of the sidebar item to toggle.
+ * @param {Object} uiSettings - Reactive UI settings object.
+ * @param {Function} updateUISettings - Function to update UI settings.
+ */
+const toggleSidebarUIState = (key, uiSettings, updateUISettings) => {
+  updateUISettings({ [key]: !uiSettings.value[key] });
+};
+
+/**
+ * Sets the signature flag for a specific channel type in the inbox settings.
+ * @param {string} channelType - The type of the channel.
+ * @param {boolean} value - The value to set for the signature enabled flag.
+ * @param {Function} updateUISettings - Function to update UI settings.
+ */
+const setSignatureFlagForInbox = (channelType, value, updateUISettings) => {
+  if (!channelType) return;
+
+  const slugifiedChannel = slugifyChannel(channelType);
+  updateUISettings({ [`${slugifiedChannel}_signature_enabled`]: value });
+};
+
+/**
+ * Fetches the signature flag for a specific channel type from UI settings.
+ * @param {string} channelType - The type of the channel.
+ * @param {Object} uiSettings - Reactive UI settings object.
+ * @returns {boolean} The value of the signature enabled flag.
+ */
+const fetchSignatureFlagFromUISettings = (channelType, uiSettings) => {
+  if (!channelType) return false;
+
+  const slugifiedChannel = slugifyChannel(channelType);
+  return uiSettings.value[`${slugifiedChannel}_signature_enabled`];
+};
+
+/**
+ * Checks if a specific editor hotkey is enabled.
+ * @param {string} key - The key to check.
+ * @param {Object} uiSettings - Reactive UI settings object.
+ * @returns {boolean} True if the hotkey is enabled, otherwise false.
+ */
+const isEditorHotKeyEnabled = (key, uiSettings) => {
+  const {
+    editor_message_key: editorMessageKey,
+    enter_to_send_enabled: enterToSendEnabled,
+  } = uiSettings.value || {};
+  if (!editorMessageKey) {
+    return key === (enterToSendEnabled ? 'enter' : 'cmd_enter');
+  }
+  return editorMessageKey === key;
+};
+
+/**
+ * Main composable function for managing UI settings.
+ * @returns {Object} An object containing reactive properties and methods for UI settings management.
+ */
+export function useUISettings() {
+  const getters = useStoreGetters();
+  const store = useStore();
+  const uiSettings = computed(() => getters.getUISettings.value);
+
+  const updateUISettings = (settings = {}) => {
+    store.dispatch('updateUISettings', {
+      uiSettings: {
+        ...uiSettings.value,
+        ...settings,
+      },
+    });
+  };
+
+  return {
+    uiSettings,
+    updateUISettings,
+    conversationSidebarItemsOrder: useConversationSidebarItemsOrder(uiSettings),
+    contactSidebarItemsOrder: useContactSidebarItemsOrder(uiSettings),
+    isContactSidebarItemOpen: key => !!uiSettings.value[key],
+    toggleSidebarUIState: key =>
+      toggleSidebarUIState(key, uiSettings, updateUISettings),
+    setSignatureFlagForInbox: (channelType, value) =>
+      setSignatureFlagForInbox(channelType, value, updateUISettings),
+    fetchSignatureFlagFromUISettings: channelType =>
+      fetchSignatureFlagFromUISettings(channelType, uiSettings),
+    isEditorHotKeyEnabled: key => isEditorHotKeyEnabled(key, uiSettings),
+  };
+}
diff --git a/app/javascript/dashboard/featureFlags.js b/app/javascript/dashboard/featureFlags.js
index 11d6c43deca47..54b560ed7a164 100644
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -31,4 +31,5 @@ export const FEATURE_FLAGS = {
   INBOUND_EMAILS: 'inbound_emails',
   IP_LOOKUP: 'ip_lookup',
   LINEAR: 'linear_integration',
+  CAPTAIN: 'captain_integration',
 };
diff --git a/app/javascript/dashboard/helper/DOMHelpers.js b/app/javascript/dashboard/helper/DOMHelpers.js
new file mode 100644
index 0000000000000..54fe6cd92645a
--- /dev/null
+++ b/app/javascript/dashboard/helper/DOMHelpers.js
@@ -0,0 +1,124 @@
+const SCRIPT_TYPE = 'text/javascript';
+const DATA_LOADED_ATTR = 'data-loaded';
+const SCRIPT_PROPERTIES = [
+  'defer',
+  'crossOrigin',
+  'noModule',
+  'referrerPolicy',
+  'id',
+];
+
+/**
+ * Custom error class for script loading failures.
+ * @extends Error
+ */
+class ScriptLoaderError extends Error {
+  /**
+   * Creates a new ScriptLoaderError.
+   * @param {string} src - The source URL of the script that failed to load.
+   * @param {string} message - The error message.
+   */
+  constructor(src, message = 'Failed to load script') {
+    super(message);
+    this.name = 'ScriptLoaderError';
+    this.src = src;
+  }
+
+  /**
+   * Gets detailed error information.
+   * @returns {string} A string containing the error details.
+   */
+  getErrorDetails() {
+    return `Failed to load script from source: ${this.src}`;
+  }
+}
+
+/**
+ * Creates a new script element with the specified attributes.
+ * @param {string} src - The source URL of the script.
+ * @param {Object} options - Options for configuring the script element.
+ * @param {string} [options.type='text/javascript'] - The type of the script.
+ * @param {boolean} [options.async=true] - Whether the script should load asynchronously.
+ * @param {boolean} [options.defer] - Whether the script execution should be deferred.
+ * @param {string} [options.crossOrigin] - The CORS setting for the script.
+ * @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
+ * @param {string} [options.referrerPolicy] - The referrer policy for the script.
+ * @param {string} [options.id] - The id attribute for the script element.
+ * @param {Object} [options.attrs] - Additional attributes to set on the script element.
+ * @returns {HTMLScriptElement} The created script element.
+ */
+const createScriptElement = (src, options) => {
+  const el = document.createElement('script');
+  el.type = options.type || SCRIPT_TYPE;
+  el.async = options.async !== false;
+  el.src = src;
+
+  SCRIPT_PROPERTIES.forEach(property => {
+    if (property in options) {
+      el[property] = options[property];
+    }
+  });
+
+  Object.entries(options.attrs || {}).forEach(([name, value]) =>
+    el.setAttribute(name, value)
+  );
+
+  return el;
+};
+
+/**
+ * Finds an existing script element with the specified source URL.
+ * @param {string} src - The source URL to search for.
+ * @returns {HTMLScriptElement|null} The found script element, or null if not found.
+ */
+const findExistingScript = src => {
+  return document.querySelector(`script[src="${src}"]`);
+};
+
+/**
+ * Loads a script asynchronously and returns a promise.
+ * @param {string} src - The source URL of the script to load.
+ * @param {Object} options - Options for configuring the script element.
+ * @param {string} [options.type='text/javascript'] - The type of the script.
+ * @param {boolean} [options.async=true] - Whether the script should load asynchronously.
+ * @param {boolean} [options.defer] - Whether the script execution should be deferred.
+ * @param {string} [options.crossOrigin] - The CORS setting for the script.
+ * @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
+ * @param {string} [options.referrerPolicy] - The referrer policy for the script.
+ * @param {string} [options.id] - The id attribute for the script element.
+ * @param {Object} [options.attrs] - Additional attributes to set on the script element.
+ * @returns {Promise<HTMLScriptElement|boolean>} A promise that resolves with the loaded script element,
+ *                                               or false if the script couldn't be loaded.
+ * @throws {ScriptLoaderError} If the script fails to load.
+ */
+export async function loadScript(src, options) {
+  if (typeof window === 'undefined' || !window.document) {
+    return Promise.resolve(false);
+  }
+
+  return new Promise((resolve, reject) => {
+    if (typeof src !== 'string' || src.trim() === '') {
+      reject(new Error('Invalid source URL provided'));
+      return;
+    }
+
+    let el = findExistingScript(src);
+
+    if (!el) {
+      el = createScriptElement(src, options);
+      document.head.appendChild(el);
+    } else if (el.hasAttribute(DATA_LOADED_ATTR)) {
+      resolve(el);
+      return;
+    }
+
+    const handleError = () => reject(new ScriptLoaderError(src));
+
+    el.addEventListener('error', handleError);
+    el.addEventListener('abort', handleError);
+    el.addEventListener('load', () => {
+      el.setAttribute(DATA_LOADED_ATTR, 'true');
+      resolve(el);
+    });
+  });
+}
diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js
index 5464d1107dafa..fd33c334dc295 100644
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@@ -108,3 +108,12 @@ export const hasValidAvatarUrl = avatarUrl => {
     return false;
   }
 };
+
+export const timeStampAppendedURL = dataUrl => {
+  const url = new URL(dataUrl);
+  if (!url.searchParams.has('t')) {
+    url.searchParams.append('t', Date.now());
+  }
+
+  return url.toString();
+};
diff --git a/app/javascript/dashboard/helper/auditlogHelper.js b/app/javascript/dashboard/helper/auditlogHelper.js
index 0812ba7f61417..6f5a4dede2566 100644
--- a/app/javascript/dashboard/helper/auditlogHelper.js
+++ b/app/javascript/dashboard/helper/auditlogHelper.js
@@ -30,6 +30,7 @@ const translationKeys = {
   'accountuser:create': `AUDIT_LOGS.ACCOUNT_USER.ADD`,
   'accountuser:update:self': `AUDIT_LOGS.ACCOUNT_USER.EDIT.SELF`,
   'accountuser:update:other': `AUDIT_LOGS.ACCOUNT_USER.EDIT.OTHER`,
+  'accountuser:update:deleted': `AUDIT_LOGS.ACCOUNT_USER.EDIT.DELETED`,
   'inboxmember:create': `AUDIT_LOGS.INBOX_MEMBER.ADD`,
   'inboxmember:destroy': `AUDIT_LOGS.INBOX_MEMBER.REMOVE`,
   'teammember:create': `AUDIT_LOGS.TEAM_MEMBER.ADD`,
@@ -89,9 +90,9 @@ function handleAccountUserCreate(auditLogItem, translationPayload, agentList) {
 }
 
 function handleAccountUserUpdate(auditLogItem, translationPayload, agentList) {
-  if (auditLogItem.user_id !== auditLogItem.auditable.user_id) {
+  if (auditLogItem.user_id !== auditLogItem.auditable?.user_id) {
     translationPayload.user = getAgentName(
-      auditLogItem.auditable.user_id,
+      auditLogItem.auditable?.user_id,
       agentList
     );
   }
@@ -187,16 +188,25 @@ export function generateTranslationPayload(auditLogItem, agentList) {
   return translationPayload;
 }
 
+function getAccountUserUpdateSuffix(auditLogItem) {
+  if (auditLogItem.auditable === null) {
+    // If the user is deleted, we don't need to check if the user is the same as the auditLogItem.user_id
+    // Else we can use the deleted translation key
+    // It doesn't need the agent name
+    return ':deleted';
+  }
+  return auditLogItem.user_id === auditLogItem.auditable.user_id
+    ? ':self'
+    : ':other';
+}
+
 export const generateLogActionKey = auditLogItem => {
   const auditableType = auditLogItem.auditable_type.toLowerCase();
   const action = auditLogItem.action.toLowerCase();
   let logActionKey = `${auditableType}:${action}`;
 
   if (auditableType === 'accountuser' && action === 'update') {
-    logActionKey +=
-      auditLogItem.user_id === auditLogItem.auditable.user_id
-        ? ':self'
-        : ':other';
+    logActionKey += getAccountUserUpdateSuffix(auditLogItem);
   }
 
   return translationKeys[logActionKey] || '';
diff --git a/app/javascript/dashboard/helper/conversationHelper.js b/app/javascript/dashboard/helper/conversationHelper.js
new file mode 100644
index 0000000000000..66194e003acbf
--- /dev/null
+++ b/app/javascript/dashboard/helper/conversationHelper.js
@@ -0,0 +1,94 @@
+/**
+ * Determines the last non-activity message between store and API messages.
+ * @param {Object} messageInStore - The last non-activity message from the store.
+ * @param {Object} messageFromAPI - The last non-activity message from the API.
+ * @returns {Object} The latest non-activity message.
+ */
+const getLastNonActivityMessage = (messageInStore, messageFromAPI) => {
+  // If both API value and store value for last non activity message
+  // are available, then return the latest one.
+  if (messageInStore && messageFromAPI) {
+    return messageInStore.created_at >= messageFromAPI.created_at
+      ? messageInStore
+      : messageFromAPI;
+  }
+  // Otherwise, return whichever is available
+  return messageInStore || messageFromAPI;
+};
+
+/**
+ * Filters out duplicate source messages from an array of messages.
+ * @param {Array} messages - The array of messages to filter.
+ * @returns {Array} An array of messages without duplicates.
+ */
+export const filterDuplicateSourceMessages = (messages = []) => {
+  const messagesWithoutDuplicates = [];
+  // We cannot use Map or any short hand method as it returns the last message with the duplicate ID
+  // We should return the message with smaller id when there is a duplicate
+  messages.forEach(m1 => {
+    if (m1.source_id) {
+      const index = messagesWithoutDuplicates.findIndex(
+        m2 => m1.source_id === m2.source_id
+      );
+
+      if (index < 0) {
+        messagesWithoutDuplicates.push(m1);
+      }
+    } else {
+      messagesWithoutDuplicates.push(m1);
+    }
+  });
+  return messagesWithoutDuplicates;
+};
+
+/**
+ * Retrieves the last message from a conversation, prioritizing non-activity messages.
+ * @param {Object} m - The conversation object containing messages.
+ * @returns {Object} The last message of the conversation.
+ */
+export const getLastMessage = m => {
+  const lastMessageIncludingActivity = m.messages[m.messages.length - 1];
+
+  const nonActivityMessages = m.messages.filter(
+    message => message.message_type !== 2
+  );
+  const lastNonActivityMessageInStore =
+    nonActivityMessages[nonActivityMessages.length - 1];
+
+  const lastNonActivityMessageFromAPI = m.last_non_activity_message;
+
+  // If API value and store value for last non activity message
+  // is empty, then return the last activity message
+  if (!lastNonActivityMessageInStore && !lastNonActivityMessageFromAPI) {
+    return lastMessageIncludingActivity;
+  }
+
+  return getLastNonActivityMessage(
+    lastNonActivityMessageInStore,
+    lastNonActivityMessageFromAPI
+  );
+};
+
+/**
+ * Filters messages that have been read by the agent.
+ * @param {Array} messages - The array of messages to filter.
+ * @param {number} agentLastSeenAt - The timestamp of when the agent last saw the messages.
+ * @returns {Array} An array of read messages.
+ */
+export const getReadMessages = (messages, agentLastSeenAt) => {
+  return messages.filter(
+    message => message.created_at * 1000 <= agentLastSeenAt * 1000
+  );
+};
+
+/**
+ * Filters messages that have not been read by the agent.
+ * @param {Array} messages - The array of messages to filter.
+ * @param {number} agentLastSeenAt - The timestamp of when the agent last saw the messages.
+ * @returns {Array} An array of unread messages.
+ */
+export const getUnreadMessages = (messages, agentLastSeenAt) => {
+  return messages.filter(
+    message => message.created_at * 1000 > agentLastSeenAt * 1000
+  );
+};
diff --git a/app/javascript/dashboard/helper/featureHelper.js b/app/javascript/dashboard/helper/featureHelper.js
index edbbf4472c849..c3dd3d880e6c9 100644
--- a/app/javascript/dashboard/helper/featureHelper.js
+++ b/app/javascript/dashboard/helper/featureHelper.js
@@ -1,4 +1,22 @@
+const FEATURE_HELP_URLS = {
+  agent_bots: 'https://chwt.app/hc/agent-bots',
+  agents: 'https://chwt.app/hc/agents',
+  audit_logs: 'https://chwt.app/hc/audit-logs',
+  campaigns: 'https://chwt.app/hc/campaigns',
+  canned_responses: 'https://chwt.app/hc/canned',
+  channel_email: 'https://chwt.app/hc/email',
+  channel_facebook: 'https://chwt.app/hc/fb',
+  custom_attributes: 'https://chwt.app/hc/custom-attributes',
+  dashboard_apps: 'https://chwt.app/hc/dashboard-apps',
+  help_center: 'https://chwt.app/hc/help-center',
+  integrations: 'https://chwt.app/hc/integrations',
+  labels: 'https://chwt.app/hc/labels',
+  message_reply_to: 'https://chwt.app/hc/reply-to',
+  reports: 'https://chwt.app/hc/reports',
+  sla: 'https://chwt.app/hc/sla',
+  team_management: 'https://chwt.app/hc/teams',
+};
+
 export function getHelpUrlForFeature(featureName) {
-  const { helpUrls } = window.chatwootConfig;
-  return helpUrls[featureName];
+  return FEATURE_HELP_URLS[featureName];
 }
diff --git a/app/javascript/dashboard/helper/pushHelper.js b/app/javascript/dashboard/helper/pushHelper.js
index 2c1300292e225..8efd9b44ffb7f 100644
--- a/app/javascript/dashboard/helper/pushHelper.js
+++ b/app/javascript/dashboard/helper/pushHelper.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import NotificationSubscriptions from '../api/notificationSubscription';
 import auth from '../api/auth';
-import { emitter } from 'shared/helpers/mitt';
+import { useAlert } from 'dashboard/composables';
 
 export const verifyServiceWorkerExistence = (callback = () => {}) => {
   if (!('serviceWorker' in navigator)) {
@@ -69,19 +69,13 @@ export const registerSubscription = (onSuccess = () => {}) => {
       onSuccess();
     })
     .catch(() => {
-      emitter.emit(
-        'newToastMessage',
-        'This browser does not support desktop notification'
-      );
+      useAlert('This browser does not support desktop notification');
     });
 };
 
 export const requestPushPermissions = ({ onSuccess }) => {
   if (!('Notification' in window)) {
-    emitter.emit(
-      'newToastMessage',
-      'This browser does not support desktop notification'
-    );
+    useAlert('This browser does not support desktop notification');
   } else if (Notification.permission === 'granted') {
     registerSubscription(onSuccess);
   } else if (Notification.permission !== 'denied') {
diff --git a/app/javascript/dashboard/helper/specs/DOMHelpers.spec.js b/app/javascript/dashboard/helper/specs/DOMHelpers.spec.js
new file mode 100644
index 0000000000000..fb3f01c454dee
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/DOMHelpers.spec.js
@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { loadScript } from '../DOMHelpers';
+import { JSDOM } from 'jsdom';
+
+describe('loadScript', () => {
+  let dom;
+  let window;
+  let document;
+
+  beforeEach(() => {
+    dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>', {
+      url: 'http://localhost',
+    });
+    window = dom.window;
+    document = window.document;
+    global.document = document;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    delete global.document;
+  });
+
+  it('should load a script successfully', async () => {
+    const src = 'https://example.com/script.js';
+    const loadPromise = loadScript(src, {});
+
+    // Simulate successful script load
+    setTimeout(() => {
+      const script = document.querySelector(`script[src="${src}"]`);
+      if (script) {
+        script.dispatchEvent(new window.Event('load'));
+      }
+    }, 0);
+
+    const script = await loadPromise;
+
+    expect(script).toBeTruthy();
+    expect(script.getAttribute('src')).toBe(src);
+    expect(script.getAttribute('data-loaded')).toBe('true');
+  });
+
+  it('should not load a script if document is not available', async () => {
+    delete global.document;
+    const result = await loadScript('https://example.com/script.js', {});
+    expect(result).toBe(false);
+  });
+
+  it('should use an existing script if already present', async () => {
+    const src = 'https://example.com/existing-script.js';
+    const existingScript = document.createElement('script');
+    existingScript.src = src;
+    existingScript.setAttribute('data-loaded', 'true');
+    document.head.appendChild(existingScript);
+
+    const script = await loadScript(src, {});
+
+    expect(script).toBe(existingScript);
+  });
+
+  it('should set custom attributes on the script element', async () => {
+    const src = 'https://example.com/custom-script.js';
+    const options = {
+      type: 'module',
+      async: false,
+      defer: true,
+      crossOrigin: 'anonymous',
+      noModule: true,
+      referrerPolicy: 'origin',
+      id: 'custom-script',
+      attrs: { 'data-custom': 'value' },
+    };
+
+    const loadPromise = loadScript(src, options);
+
+    // Simulate successful script load
+    setTimeout(() => {
+      const script = document.querySelector(`script[src="${src}"]`);
+      if (script) {
+        script.dispatchEvent(new window.Event('load'));
+      }
+    }, 0);
+
+    const script = await loadPromise;
+
+    expect(script.type).toBe('module');
+    expect(script.async).toBe(false);
+    expect(script.defer).toBe(true);
+    expect(script.crossOrigin).toBe('anonymous');
+    expect(script.noModule).toBe(true);
+    expect(script.referrerPolicy).toBe('origin');
+    expect(script.id).toBe('custom-script');
+    expect(script.getAttribute('data-custom')).toBe('value');
+  });
+});
diff --git a/app/javascript/dashboard/helper/specs/URLHelper.spec.js b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
index d137c367c23e7..d0dda11e8739d 100644
--- a/app/javascript/dashboard/helper/specs/URLHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
@@ -5,6 +5,7 @@ import {
   conversationListPageURL,
   getArticleSearchURL,
   hasValidAvatarUrl,
+  timeStampAppendedURL,
 } from '../URLHelper';
 
 describe('#URL Helpers', () => {
@@ -190,4 +191,51 @@ describe('#URL Helpers', () => {
       expect(hasValidAvatarUrl()).toBe(false);
     });
   });
+
+  describe('timeStampAppendedURL', () => {
+    const FIXED_TIMESTAMP = 1234567890000;
+
+    beforeEach(() => {
+      vi.spyOn(Date, 'now').mockImplementation(() => FIXED_TIMESTAMP);
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it('should append timestamp to a URL without query parameters', () => {
+      const input = 'https://example.com/audio.mp3';
+      const expected = `https://example.com/audio.mp3?t=${FIXED_TIMESTAMP}`;
+      expect(timeStampAppendedURL(input)).toBe(expected);
+    });
+
+    it('should append timestamp to a URL with existing query parameters', () => {
+      const input = 'https://example.com/audio.mp3?volume=50';
+      const expected = `https://example.com/audio.mp3?volume=50&t=${FIXED_TIMESTAMP}`;
+      expect(timeStampAppendedURL(input)).toBe(expected);
+    });
+
+    it('should not append timestamp if it already exists', () => {
+      const input = 'https://example.com/audio.mp3?t=9876543210';
+      expect(timeStampAppendedURL(input)).toBe(input);
+    });
+
+    it('should handle URLs with hash fragments', () => {
+      const input = 'https://example.com/audio.mp3#section1';
+      const expected = `https://example.com/audio.mp3?t=${FIXED_TIMESTAMP}#section1`;
+      expect(timeStampAppendedURL(input)).toBe(expected);
+    });
+
+    it('should handle complex URLs', () => {
+      const input =
+        'https://example.com/path/to/audio.mp3?key1=value1&key2=value2#fragment';
+      const expected = `https://example.com/path/to/audio.mp3?key1=value1&key2=value2&t=${FIXED_TIMESTAMP}#fragment`;
+      expect(timeStampAppendedURL(input)).toBe(expected);
+    });
+
+    it('should throw an error for invalid URLs', () => {
+      const input = 'not a valid url';
+      expect(() => timeStampAppendedURL(input)).toThrow();
+    });
+  });
 });
diff --git a/app/javascript/dashboard/helper/specs/auditlogHelper.spec.js b/app/javascript/dashboard/helper/specs/auditlogHelper.spec.js
index 8c2486bab0cbe..0ec4f3cdf3aed 100644
--- a/app/javascript/dashboard/helper/specs/auditlogHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/auditlogHelper.spec.js
@@ -178,5 +178,17 @@ describe('Helper functions', () => {
       const logActionKey = generateLogActionKey(auditLogItem);
       expect(logActionKey).toEqual('AUDIT_LOGS.ACCOUNT_USER.EDIT.OTHER');
     });
+
+    it('should generate correct action key when updating a deleted user', () => {
+      const auditLogItem = {
+        auditable_type: 'AccountUser',
+        action: 'update',
+        user_id: 1,
+        auditable: null,
+      };
+
+      const logActionKey = generateLogActionKey(auditLogItem);
+      expect(logActionKey).toEqual('AUDIT_LOGS.ACCOUNT_USER.EDIT.DELETED');
+    });
   });
 });
diff --git a/app/javascript/dashboard/helper/specs/conversationHelper.spec.js b/app/javascript/dashboard/helper/specs/conversationHelper.spec.js
new file mode 100644
index 0000000000000..1bd74508d4508
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/conversationHelper.spec.js
@@ -0,0 +1,101 @@
+import {
+  filterDuplicateSourceMessages,
+  getLastMessage,
+  getReadMessages,
+  getUnreadMessages,
+} from '../conversationHelper';
+import {
+  conversationData,
+  lastMessageData,
+  readMessagesData,
+  unReadMessagesData,
+} from './fixtures/conversationFixtures';
+
+describe('conversationHelper', () => {
+  describe('#filterDuplicateSourceMessages', () => {
+    it('returns messages without duplicate source_id and all messages without source_id', () => {
+      const input = [
+        { source_id: null, id: 1 },
+        { source_id: '', id: 2 },
+        { id: 3 },
+        { source_id: 'wa_1', id: 4 },
+        { source_id: 'wa_1', id: 5 },
+        { source_id: 'wa_1', id: 6 },
+        { source_id: 'wa_2', id: 7 },
+        { source_id: 'wa_2', id: 8 },
+        { source_id: 'wa_3', id: 9 },
+      ];
+      const expected = [
+        { source_id: null, id: 1 },
+        { source_id: '', id: 2 },
+        { id: 3 },
+        { source_id: 'wa_1', id: 4 },
+        { source_id: 'wa_2', id: 7 },
+        { source_id: 'wa_3', id: 9 },
+      ];
+      expect(filterDuplicateSourceMessages(input)).toEqual(expected);
+    });
+  });
+
+  describe('#readMessages', () => {
+    it('should return read messages if conversation is passed', () => {
+      expect(
+        getReadMessages(
+          conversationData.messages,
+          conversationData.agent_last_seen_at
+        )
+      ).toEqual(readMessagesData);
+    });
+  });
+
+  describe('#unReadMessages', () => {
+    it('should return unread messages if conversation is passed', () => {
+      expect(
+        getUnreadMessages(
+          conversationData.messages,
+          conversationData.agent_last_seen_at
+        )
+      ).toEqual(unReadMessagesData);
+    });
+  });
+
+  describe('#lastMessage', () => {
+    it("should return last activity message if both api and store doesn't have other messages", () => {
+      const testConversation = {
+        messages: [conversationData.messages[0]],
+        last_non_activity_message: null,
+      };
+      expect(getLastMessage(testConversation)).toEqual(
+        testConversation.messages[0]
+      );
+    });
+
+    it('should return message from store if store has latest message', () => {
+      const testConversation = {
+        messages: [],
+        last_non_activity_message: lastMessageData,
+      };
+      expect(getLastMessage(testConversation)).toEqual(lastMessageData);
+    });
+
+    it('should return last non activity message from store if api value is empty', () => {
+      const testConversation = {
+        messages: [conversationData.messages[0], conversationData.messages[1]],
+        last_non_activity_message: null,
+      };
+      expect(getLastMessage(testConversation)).toEqual(
+        testConversation.messages[1]
+      );
+    });
+
+    it("should return last non activity message from store if store doesn't have any messages", () => {
+      const testConversation = {
+        messages: [conversationData.messages[1], conversationData.messages[2]],
+        last_non_activity_message: conversationData.messages[0],
+      };
+      expect(getLastMessage(testConversation)).toEqual(
+        testConversation.messages[1]
+      );
+    });
+  });
+});
diff --git a/app/javascript/dashboard/helper/specs/fixtures/conversationFixtures.js b/app/javascript/dashboard/helper/specs/fixtures/conversationFixtures.js
new file mode 100644
index 0000000000000..9a53c6c6db4ef
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/fixtures/conversationFixtures.js
@@ -0,0 +1,185 @@
+export const conversationData = {
+  meta: {
+    sender: {
+      additional_attributes: {
+        created_at_ip: '127.0.0.1',
+      },
+      availability_status: 'offline',
+      email: null,
+      id: 5017687,
+      name: 'long-flower-143',
+      phone_number: null,
+      thumbnail: '',
+      custom_attributes: {},
+    },
+    channel: 'Channel::WebWidget',
+    assignee: {
+      account_id: 1,
+      availability_status: 'offline',
+      confirmed: true,
+      email: 'muhsin@chatwoot.com',
+      available_name: 'Muhsin Keloth',
+      id: 21,
+      name: 'Muhsin Keloth',
+      role: 'administrator',
+      thumbnail: 'http://example.com/image.png',
+    },
+  },
+  id: 5815,
+  messages: [
+    {
+      id: 438072,
+      content: 'Campaign after 5 seconds',
+      account_id: 1,
+      inbox_id: 37,
+      conversation_id: 5811,
+      message_type: 1,
+      created_at: 1620980262,
+      updated_at: '2021-05-14T08:17:42.041Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+    },
+    {
+      id: 4382131101,
+      content: 'Hello',
+      account_id: 1,
+      inbox_id: 37,
+      conversation_id: 5815,
+      message_type: 0,
+      created_at: 1621145476,
+      updated_at: '2021-05-16T05:48:43.910Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+    },
+    {
+      id: 438100,
+      content: 'Hey',
+      account_id: 1,
+      inbox_id: 37,
+      conversation_id: 5815,
+      message_type: 0,
+      created_at: 1621145476,
+      updated_at: '2021-05-16T05:48:43.910Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+    },
+  ],
+  inbox_id: 37,
+  status: 'open',
+  muted: false,
+  can_reply: true,
+  timestamp: 1621144123,
+  contact_last_seen_at: 0,
+  agent_last_seen_at: 1621144123,
+  unread_count: 0,
+  additional_attributes: {
+    browser: {
+      device_name: 'Unknown',
+      browser_name: 'Chrome',
+      platform_name: 'macOS',
+      browser_version: '90.0.4430.212',
+      platform_version: '10.15.7',
+    },
+    widget_language: null,
+    browser_language: 'en',
+  },
+  account_id: 1,
+  labels: [],
+};
+
+export const lastMessageData = {
+  id: 438100,
+  content: 'Hey',
+  account_id: 1,
+  inbox_id: 37,
+  conversation_id: 5815,
+  message_type: 0,
+  created_at: 1621145476,
+  updated_at: '2021-05-16T05:48:43.910Z',
+  private: false,
+  status: 'sent',
+  source_id: null,
+  content_type: 'text',
+  content_attributes: {},
+  sender_type: null,
+  sender_id: null,
+  external_source_ids: {},
+};
+
+export const readMessagesData = [
+  {
+    id: 438072,
+    content: 'Campaign after 5 seconds',
+    account_id: 1,
+    inbox_id: 37,
+    conversation_id: 5811,
+    message_type: 1,
+    created_at: 1620980262,
+    updated_at: '2021-05-14T08:17:42.041Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: null,
+    content_attributes: {},
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+  },
+];
+
+export const unReadMessagesData = [
+  {
+    id: 4382131101,
+    content: 'Hello',
+    account_id: 1,
+    inbox_id: 37,
+    conversation_id: 5815,
+    message_type: 0,
+    created_at: 1621145476,
+    updated_at: '2021-05-16T05:48:43.910Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+  },
+  {
+    id: 438100,
+    content: 'Hey',
+    account_id: 1,
+    inbox_id: 37,
+    conversation_id: 5815,
+    message_type: 0,
+    created_at: 1621145476,
+    updated_at: '2021-05-16T05:48:43.910Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+  },
+];
diff --git a/app/javascript/dashboard/helper/specs/validations.spec.js b/app/javascript/dashboard/helper/specs/validations.spec.js
new file mode 100644
index 0000000000000..57016cfdcf60f
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/validations.spec.js
@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest';
+import {
+  validateConversationOrContactFilters,
+  validateAutomation,
+} from '../validations';
+
+describe('validateConversationOrContactFilters', () => {
+  it('should return no errors for valid filters', () => {
+    const validFilters = [
+      { attribute_key: 'name', filter_operator: 'contains', values: 'John' },
+      { attribute_key: 'email', filter_operator: 'is_present' },
+    ];
+    const errors = validateConversationOrContactFilters(validFilters);
+    expect(errors).toEqual({});
+  });
+
+  it('should return errors for invalid filters', () => {
+    const invalidFilters = [
+      { attribute_key: '', filter_operator: 'contains', values: 'John' },
+      { attribute_key: 'email', filter_operator: '' },
+      { attribute_key: 'age', filter_operator: 'equals' },
+    ];
+    const errors = validateConversationOrContactFilters(invalidFilters);
+    expect(errors).toEqual({
+      filter_0: 'ATTRIBUTE_KEY_REQUIRED',
+      filter_1: 'FILTER_OPERATOR_REQUIRED',
+      filter_2: 'VALUE_REQUIRED',
+    });
+  });
+
+  it('should validate days_before operator correctly', () => {
+    const filters = [
+      { attribute_key: 'date', filter_operator: 'days_before', values: '0' },
+      { attribute_key: 'date', filter_operator: 'days_before', values: '999' },
+      { attribute_key: 'date', filter_operator: 'days_before', values: '500' },
+    ];
+    const errors = validateConversationOrContactFilters(filters);
+    expect(errors).toEqual({
+      filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
+      filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
+    });
+  });
+});
+
+describe('validateAutomation', () => {
+  it('should return no errors for a valid automation', () => {
+    const validAutomation = {
+      name: 'Test Automation',
+      description: 'A test automation',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [
+        { action_name: 'send_message', action_params: ['Hello there!'] },
+      ],
+    };
+    const errors = validateAutomation(validAutomation);
+    expect(errors).toEqual({});
+  });
+
+  it('should return errors for missing basic fields', () => {
+    const invalidAutomation = {
+      name: '',
+      description: '',
+      event_name: '',
+      conditions: [],
+      actions: [],
+    };
+    const errors = validateAutomation(invalidAutomation);
+    expect(errors).toHaveProperty('name');
+    expect(errors).toHaveProperty('description');
+    expect(errors).toHaveProperty('event_name');
+  });
+
+  it('should return errors for invalid conditions', () => {
+    const automationWithInvalidConditions = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [{ attribute_key: '', filter_operator: '', values: '' }],
+      actions: [{ action_name: 'send_message', action_params: ['Hello'] }],
+    };
+    const errors = validateAutomation(automationWithInvalidConditions);
+    expect(errors).toHaveProperty('condition_0');
+  });
+
+  it('should return errors for invalid actions', () => {
+    const automationWithInvalidActions = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [{ action_name: 'send_message', action_params: [] }],
+    };
+    const errors = validateAutomation(automationWithInvalidActions);
+    expect(errors).toHaveProperty('action_0');
+  });
+
+  it('should not require action params for specific actions', () => {
+    const automationWithNoParamAction = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [{ action_name: 'mute_conversation' }],
+    };
+    const errors = validateAutomation(automationWithNoParamAction);
+    expect(errors).toEqual({});
+  });
+});
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
new file mode 100644
index 0000000000000..352e5397ecf5a
--- /dev/null
+++ b/app/javascript/dashboard/helper/validations.js
@@ -0,0 +1,193 @@
+export const ATTRIBUTE_KEY_REQUIRED = 'ATTRIBUTE_KEY_REQUIRED';
+export const FILTER_OPERATOR_REQUIRED = 'FILTER_OPERATOR_REQUIRED';
+export const VALUE_REQUIRED = 'VALUE_REQUIRED';
+export const VALUE_MUST_BE_BETWEEN_1_AND_998 =
+  'VALUE_MUST_BE_BETWEEN_1_AND_998';
+export const ACTION_PARAMETERS_REQUIRED = 'ACTION_PARAMETERS_REQUIRED';
+export const ATLEAST_ONE_CONDITION_REQUIRED = 'ATLEAST_ONE_CONDITION_REQUIRED';
+export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
+// ------------------------------------------------------------------
+// ------------------------ Filter Validation -----------------------
+// ------------------------------------------------------------------
+
+/**
+ * Validates a single filter for conversations or contacts.
+ *
+ * @param {Object} filter - The filter object to validate.
+ * @param {string} filter.attribute_key - The key of the attribute to filter on.
+ * @param {string} filter.filter_operator - The operator to use for filtering.
+ * @param {string|number|Array} [filter.values] - The value(s) to filter by (required for most operators).
+ *
+ * @returns {string|null} An error message if validation fails, or null if validation passes.
+ */
+const validateSingleFilter = filter => {
+  if (!filter.attribute_key) {
+    return ATTRIBUTE_KEY_REQUIRED;
+  }
+
+  if (!filter.filter_operator) {
+    return FILTER_OPERATOR_REQUIRED;
+  }
+
+  if (
+    filter.filter_operator !== 'is_present' &&
+    filter.filter_operator !== 'is_not_present' &&
+    (!filter.values ||
+      (Array.isArray(filter.values) && filter.values.length === 0))
+  ) {
+    return VALUE_REQUIRED;
+  }
+
+  if (
+    filter.filter_operator === 'days_before' &&
+    (parseInt(filter.values, 10) <= 0 || parseInt(filter.values, 10) >= 999)
+  ) {
+    return VALUE_MUST_BE_BETWEEN_1_AND_998;
+  }
+
+  return null;
+};
+
+/**
+ * Validates filters for conversations or contacts.
+ *
+ * @param {Array} filters - An array of filter objects to validate.
+ * @param {string} filters[].attribute_key - The key of the attribute to filter on.
+ * @param {string} filters[].filter_operator - The operator to use for filtering.
+ * @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
+ *
+ * @returns {Object} An object containing any validation errors, keyed by filter index.
+ */
+export const validateConversationOrContactFilters = filters => {
+  const errors = {};
+
+  filters.forEach((filter, index) => {
+    const error = validateSingleFilter(filter);
+    if (error) {
+      errors[`filter_${index}`] = error;
+    }
+  });
+
+  return errors;
+};
+
+// ------------------------------------------------------------------
+// ---------------------- Automation Validation ---------------------
+// ------------------------------------------------------------------
+
+/**
+ * Validates the basic fields of an automation object.
+ *
+ * @param {Object} automation - The automation object to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+const validateBasicFields = automation => {
+  const errors = {};
+  const requiredFields = ['name', 'description', 'event_name'];
+
+  requiredFields.forEach(field => {
+    if (!automation[field]) {
+      errors[field] = `${
+        field.charAt(0).toUpperCase() + field.slice(1)
+      } is required`;
+    }
+  });
+
+  return errors;
+};
+
+/**
+ * Validates the conditions of an automation object.
+ *
+ * @param {Array} conditions - The conditions to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateConditions = conditions => {
+  const errors = {};
+
+  if (!conditions || conditions.length === 0) {
+    errors.conditions = ATLEAST_ONE_CONDITION_REQUIRED;
+    return errors;
+  }
+
+  conditions.forEach((condition, index) => {
+    const error = validateSingleFilter(condition);
+    if (error) {
+      errors[`condition_${index}`] = error;
+    }
+  });
+
+  return errors;
+};
+
+/**
+ * Validates a single action of an automation object.
+ *
+ * @param {Object} action - The action to validate.
+ * @returns {string|null} An error message if validation fails, or null if validation passes.
+ */
+const validateSingleAction = action => {
+  const noParamActions = [
+    'mute_conversation',
+    'snooze_conversation',
+    'resolve_conversation',
+    'remove_assigned_team',
+  ];
+
+  if (
+    !noParamActions.includes(action.action_name) &&
+    (!action.action_params || action.action_params.length === 0)
+  ) {
+    return ACTION_PARAMETERS_REQUIRED;
+  }
+
+  return null;
+};
+
+/**
+ * Validates the actions of an automation object.
+ *
+ * @param {Array} actions - The actions to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateActions = actions => {
+  if (!actions || actions.length === 0) {
+    return { actions: ATLEAST_ONE_ACTION_REQUIRED };
+  }
+
+  return actions.reduce((errors, action, index) => {
+    const error = validateSingleAction(action);
+    if (error) {
+      errors[`action_${index}`] = error;
+    }
+    return errors;
+  }, {});
+};
+
+/**
+ * Validates an automation object.
+ *
+ * @param {Object} automation - The automation object to validate.
+ * @param {string} automation.name - The name of the automation.
+ * @param {string} automation.description - The description of the automation.
+ * @param {string} automation.event_name - The name of the event that triggers the automation.
+ * @param {Array} automation.conditions - An array of condition objects for the automation.
+ * @param {string} automation.conditions[].filter_operator - The operator for the condition.
+ * @param {string|number} [automation.conditions[].values] - The value(s) for the condition.
+ * @param {Array} automation.actions - An array of action objects for the automation.
+ * @param {string} automation.actions[].action_name - The name of the action.
+ * @param {Array} [automation.actions[].action_params] - The parameters for the action.
+ *
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateAutomation = automation => {
+  const basicErrors = validateBasicFields(automation);
+  const conditionErrors = validateConditions(automation.conditions);
+  const actionErrors = validateActions(automation.actions);
+
+  return {
+    ...basicErrors,
+    ...conditionErrors,
+    ...actionErrors,
+  };
+};
diff --git a/app/javascript/dashboard/i18n/locale/am/advancedFilters.json b/app/javascript/dashboard/i18n/locale/am/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/am/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/am/agentMgmt.json b/app/javascript/dashboard/i18n/locale/am/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/am/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/am/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/am/auditLogs.json b/app/javascript/dashboard/i18n/locale/am/auditLogs.json
index d30ec0091b0eb..7a693f66cf053 100644
--- a/app/javascript/dashboard/i18n/locale/am/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/am/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/am/automation.json b/app/javascript/dashboard/i18n/locale/am/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/am/automation.json
+++ b/app/javascript/dashboard/i18n/locale/am/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/am/bulkActions.json b/app/javascript/dashboard/i18n/locale/am/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/am/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/am/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/am/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/am/cannedMgmt.json
index a23fc14ac8af6..7721cc3e68422 100644
--- a/app/javascript/dashboard/i18n/locale/am/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/am/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/am/contact.json b/app/javascript/dashboard/i18n/locale/am/contact.json
index 4db7fce93e026..882643434b3e4 100644
--- a/app/javascript/dashboard/i18n/locale/am/contact.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/am/conversation.json b/app/javascript/dashboard/i18n/locale/am/conversation.json
index 742a3657e8560..4cc4b9bed5fca 100644
--- a/app/javascript/dashboard/i18n/locale/am/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/am/general.json b/app/javascript/dashboard/i18n/locale/am/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/am/general.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/am/generalSettings.json b/app/javascript/dashboard/i18n/locale/am/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/am/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/am/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/am/helpCenter.json b/app/javascript/dashboard/i18n/locale/am/helpCenter.json
index 6c4238b92d9d1..5d77c21aa2cf0 100644
--- a/app/javascript/dashboard/i18n/locale/am/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/am/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/am/inboxMgmt.json
index a168e82f02bb3..20c738a86aa9b 100644
--- a/app/javascript/dashboard/i18n/locale/am/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/am/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/am/integrations.json b/app/javascript/dashboard/i18n/locale/am/integrations.json
index 5397fcb630423..47349d1b19abf 100644
--- a/app/javascript/dashboard/i18n/locale/am/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/am/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/am/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/am/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/am/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/am/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/am/macros.json b/app/javascript/dashboard/i18n/locale/am/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/am/macros.json
+++ b/app/javascript/dashboard/i18n/locale/am/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/am/report.json b/app/javascript/dashboard/i18n/locale/am/report.json
index 172e5501d43dd..da2df93e545c4 100644
--- a/app/javascript/dashboard/i18n/locale/am/report.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/am/search.json b/app/javascript/dashboard/i18n/locale/am/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/am/search.json
+++ b/app/javascript/dashboard/i18n/locale/am/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/i18n/locale/am/settings.json b/app/javascript/dashboard/i18n/locale/am/settings.json
index 4dca590e96dc1..dabbff89fb2b9 100644
--- a/app/javascript/dashboard/i18n/locale/am/settings.json
+++ b/app/javascript/dashboard/i18n/locale/am/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/am/teamsSettings.json b/app/javascript/dashboard/i18n/locale/am/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/am/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/am/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/ar/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ar/advancedFilters.json
index a637a6ec7f9a3..4e3a520350370 100644
--- a/app/javascript/dashboard/i18n/locale/ar/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ar/advancedFilters.json
@@ -1,23 +1,24 @@
 {
   "FILTER": {
     "TITLE": "تصفية المحادثات",
-    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
-    "EDIT_CUSTOM_FILTER": "Edit Folder",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
-    "ADD_NEW_FILTER": "Add filter",
-    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
-    "SUBMIT_BUTTON_LABEL": "تطبيق عامل التصفية",
-    "UPDATE_BUTTON_LABEL": "Update folder",
+    "SUBTITLE": "أضف عوامل التصفية أدناه واضغط على 'تطبيق التصفيات' لتجنب الفوضى في المحادثات.",
+    "EDIT_CUSTOM_FILTER": "تعديل المجلد",
+    "CUSTOM_VIEWS_SUBTITLE": "أضف أو أزل تصفيات وقم بتحديث المجلد الخاص بك.",
+    "ADD_NEW_FILTER": "إضافة تصفية",
+    "FILTER_DELETE_ERROR": "عذرًا، يبدو أننا لا نستطيع حفظ أي شيء! يرجى إضافة تصفية واحدة على الأقل ليتم الحفظ.",
+    "SUBMIT_BUTTON_LABEL": "تطبيق التصفيات",
+    "UPDATE_BUTTON_LABEL": "تحديث المجلد",
     "CANCEL_BUTTON_LABEL": "إلغاء",
-    "CLEAR_BUTTON_LABEL": "Clear filters",
-    "FOLDER_LABEL": "Folder Name",
-    "FOLDER_QUERY_LABEL": "Folder Query",
+    "CLEAR_BUTTON_LABEL": "مسح التصفيات",
+    "FOLDER_LABEL": "اسم المجلد",
+    "FOLDER_QUERY_LABEL": "استعلام المجلد",
     "EMPTY_VALUE_ERROR": "القيمة مطلوبة.",
     "TOOLTIP_LABEL": "تصفية المحادثات",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "و",
       "OR": "أو"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "يساوي",
       "not_equal_to": "لا يساوي",
@@ -25,8 +26,8 @@
       "does_not_contain": "لا يحتوي",
       "is_present": "موجود",
       "is_not_present": "غير موجود",
-      "is_greater_than": "هو أكبر من",
-      "is_less_than": "هو أقل من",
+      "is_greater_than": "أكبر من",
+      "is_less_than": "أقل من",
       "days_before": "قبل x أيام",
       "starts_with": "يبدأ بـ"
     },
@@ -36,66 +37,66 @@
     },
     "ATTRIBUTES": {
       "STATUS": "الحالة",
-      "ASSIGNEE_NAME": "Assignee name",
+      "ASSIGNEE_NAME": "اسم المكلَّف",
       "INBOX_NAME": "اسم صندوق الوارد",
       "TEAM_NAME": "اسم الفريق",
-      "CONVERSATION_IDENTIFIER": "Conversation identifier",
-      "CAMPAIGN_NAME": "Campaign name",
+      "CONVERSATION_IDENTIFIER": "معرف المحادثة",
+      "CAMPAIGN_NAME": "اسم الحملة",
       "LABELS": "الوسوم",
-      "BROWSER_LANGUAGE": "Browser language",
+      "BROWSER_LANGUAGE": "لغة المتصفح",
       "PRIORITY": "الأولوية",
-      "COUNTRY_NAME": "Country name",
+      "COUNTRY_NAME": "اسم الدولة",
       "REFERER_LINK": "رابط المرجع",
       "CUSTOM_ATTRIBUTE_LIST": "القائمة",
       "CUSTOM_ATTRIBUTE_TEXT": "النص",
       "CUSTOM_ATTRIBUTE_NUMBER": "العدد",
       "CUSTOM_ATTRIBUTE_LINK": "الرابط",
-      "CUSTOM_ATTRIBUTE_CHECKBOX": "مربع",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "خانة الاختيار",
       "CREATED_AT": "تم إنشاؤها في",
-      "LAST_ACTIVITY": "النشاط الأخير"
+      "LAST_ACTIVITY": "آخر نشاط"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Standard filters",
-      "ADDITIONAL_FILTERS": "Additional filters",
-      "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "STANDARD_FILTERS": "التصفيات القياسية",
+      "ADDITIONAL_FILTERS": "التصفيات الإضافية",
+      "CUSTOM_ATTRIBUTES": "الخصائص المخصصة"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
-        "TITLE": "هل تريد حفظ هذا الفلتر؟",
-        "LABEL": "تسمية هذا الفلتر",
-        "PLACEHOLDER": "Name your filter to refer it later.",
+        "TITLE": "هل تريد حفظ هذه التصفية؟",
+        "LABEL": "تسمية هذه التصفية",
+        "PLACEHOLDER": "قم بتسمية التصفية لتتمكن من الرجوع إليه لاحقًا.",
         "ERROR_MESSAGE": "الاسم مطلوب.",
-        "SAVE_BUTTON": "حفظ الفلتر",
+        "SAVE_BUTTON": "حفظ التصفية",
         "CANCEL_BUTTON": "إلغاء",
         "API_FOLDERS": {
-          "SUCCESS_MESSAGE": "تم إنشاء طريقة عرض مخصصة بنجاح.",
-          "ERROR_MESSAGE": "خطأ أثناء إنشاء طريقة عرض مخصصة."
+          "SUCCESS_MESSAGE": "تم إنشاء المجلد بنجاح.",
+          "ERROR_MESSAGE": "حدث خطأ أثناء إنشاء المجلد."
         },
         "API_SEGMENTS": {
-          "SUCCESS_MESSAGE": "تم إنشاء طريقة عرض مخصصة بنجاح.",
-          "ERROR_MESSAGE": "خطأ أثناء إنشاء طريقة عرض مخصصة."
+          "SUCCESS_MESSAGE": "تم إنشاء القسم بنجاح.",
+          "ERROR_MESSAGE": "حدث خطأ أثناء إنشاء القسم."
         }
       },
       "EDIT": {
-        "EDIT_BUTTON": "Edit folder"
+        "EDIT_BUTTON": "تحرير المجلد"
       },
       "DELETE": {
-        "DELETE_BUTTON": "حذف الفلتر",
+        "DELETE_BUTTON": "حذف التصفية",
         "MODAL": {
           "CONFIRM": {
             "TITLE": "تأكيد الحذف",
-            "MESSAGE": "هل أنت متأكد من حذف الفلتر ",
-            "YES": "Yes, delete",
+            "MESSAGE": "هل أنت متأكد من حذف التصفية ",
+            "YES": "نعم، احذف",
             "NO": "لا، احتفظ به"
           }
         },
         "API_FOLDERS": {
-          "SUCCESS_MESSAGE": "تم حذف طريقة عرض مخصصة بنجاح.",
+          "SUCCESS_MESSAGE": "تم حذف المجلد بنجاح.",
           "ERROR_MESSAGE": "حدث خطأ أثناء حذف المجلد."
         },
         "API_SEGMENTS": {
-          "SUCCESS_MESSAGE": "تم حذف العرض المخصص بنجاح.",
-          "ERROR_MESSAGE": "حدث خطأ أثناء حذف طريقة عرض مخصصة."
+          "SUCCESS_MESSAGE": "تم حذف القسم بنجاح.",
+          "ERROR_MESSAGE": "حدث خطأ أثناء حذف القسم."
         }
       }
     }
diff --git a/app/javascript/dashboard/i18n/locale/ar/agentBots.json b/app/javascript/dashboard/i18n/locale/ar/agentBots.json
index 3582388278e40..7eba56a39815b 100644
--- a/app/javascript/dashboard/i18n/locale/ar/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/ar/agentBots.json
@@ -1,73 +1,73 @@
 {
   "AGENT_BOTS": {
-    "HEADER": "Bots",
-    "LOADING_EDITOR": "Loading editor...",
-    "HEADER_BTN_TXT": "Add bot configuration",
-    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
+    "HEADER": "الروبوتات",
+    "LOADING_EDITOR": "جار جلب المحرر...",
+    "HEADER_BTN_TXT": "إضافة إعدادات الروبوت",
+    "SIDEBAR_TXT": "<p><b>الروبوتات</b> <p>الروبوتات هي مثل الأعضاء الأكثر روعة في فريقك. يمكنهم التعامل مع الأمور الصغيرة، حتى تتمكن من التركيز على الأمور التي تهمك. جربهم.</p> <p> يمكنك إدارة الروبوتات الخاصة بك من هذه الصفحة أو إنشاء روبوتات جديدة باستخدام زر 'إضافة تكوين روبوت'.</p> <p> افتح <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">دليل البوتات</a> في علامة تبويب أخرى للحصول على مساعدة.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
-        "ERROR": "Bot name is required."
+        "LABEL": "اسم الروبوت",
+        "PLACEHOLDER": "قم بتسمية الروبوت الخاص بك.",
+        "ERROR": "اسم الروبوت مطلوب."
       },
       "DESCRIPTION": {
-        "LABEL": "Bot description",
-        "PLACEHOLDER": "What does this bot do?"
+        "LABEL": "وصف الروبوت",
+        "PLACEHOLDER": "ماذا يفعل هذا الروبوت؟"
       },
       "BOT_CONFIG": {
-        "ERROR": "Please enter your CSML bot configuration above.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+        "ERROR": "يرجى إدخال تكوين بوت CSML الخاص بك أعلاه.",
+        "API_ERROR": "تكوين CSML الخاص بك غير صالح. يرجى إصلاحه والمحاولة مرة أخرى."
       },
-      "SUBMIT": "Validate and save"
+      "SUBMIT": "التحقق والحفظ"
     },
     "BOT_CONFIGURATION": {
-      "TITLE": "Select an agent bot",
-      "DESC": "Assign an Agent Bot to your inbox. They can handle initial conversations and transfer them to a live agent when necessary.",
+      "TITLE": "اختر الروبوت",
+      "DESC": "قم بتعيين روبوت لصندوق الوارد الخاص بك. يمكنهم التعامل مع المحادثات الأولية ونقلها إلى وكيل مباشر عند الضرورة.",
       "SUBMIT": "تحديث",
-      "DISCONNECT": "Disconnect bot",
-      "SUCCESS_MESSAGE": "Successfully updated the agent bot.",
-      "DISCONNECTED_SUCCESS_MESSAGE": "Successfully disconnected the agent bot.",
-      "ERROR_MESSAGE": "Could not update the agent bot. Please try again.",
-      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot. Please try again.",
-      "SELECT_PLACEHOLDER": "Select bot"
+      "DISCONNECT": "قطع اتصال الروبوت",
+      "SUCCESS_MESSAGE": "تم تحديث الروبوت بنجاح.",
+      "DISCONNECTED_SUCCESS_MESSAGE": "تم فصل الروبوت بنجاح.",
+      "ERROR_MESSAGE": "تعذر تحديث الروبوت. يرجى المحاولة مرة أخرى.",
+      "DISCONNECTED_ERROR_MESSAGE": "تعذر فصل الروبوت. يرجى المحاولة مرة أخرى.",
+      "SELECT_PLACEHOLDER": "اختر الروبوت"
     },
     "ADD": {
-      "TITLE": "Configure new bot",
+      "TITLE": "تكوين روبوت جديد",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "API": {
-        "SUCCESS_MESSAGE": "Bot added successfully.",
-        "ERROR_MESSAGE": "Could not add bot. Please try again later."
+        "SUCCESS_MESSAGE": "تمت إضافة الروبوت بنجاح.",
+        "ERROR_MESSAGE": "تعذر إضافة الروبوت. يرجى المحاولة مرة أخرى لاحقًا."
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
-      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "404": "لم يتم العثور على أي روبوتات. يمكنك إنشاء الروبوت بالنقر على زر 'تكوين روبوت جديد' ↗",
+      "LOADING": "جار جلب الروبوتات...",
+      "TYPE": "نوع الروبوت"
     },
     "DELETE": {
       "BUTTON_TEXT": "حذف",
-      "TITLE": "Delete bot",
+      "TITLE": "حذف الروبوت",
       "SUBMIT": "حذف",
       "CANCEL_BUTTON_TEXT": "إلغاء",
-      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "DESCRIPTION": "هل أنت متأكد أنك تريد حذف هذا الروبوت؟ هذا الإجراء لا يمكن التراجع عنه.",
       "API": {
-        "SUCCESS_MESSAGE": "Bot deleted successfully.",
-        "ERROR_MESSAGE": "Could not delete bot. Please try again."
+        "SUCCESS_MESSAGE": "تم حذف الروبوت بنجاح.",
+        "ERROR_MESSAGE": "تعذر حذف الروبوت. يرجى المحاولة مرة أخرى."
       }
     },
     "EDIT": {
       "BUTTON_TEXT": "تعديل",
-      "LOADING": "Fetching bots...",
-      "TITLE": "Edit bot",
+      "LOADING": "جار جلب الروبوتات...",
+      "TITLE": "تعديل الروبوت",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "API": {
-        "SUCCESS_MESSAGE": "Bot updated successfully.",
-        "ERROR_MESSAGE": "Could not update bot. Please try again."
+        "SUCCESS_MESSAGE": "تم تحديث الروبوت بنجاح.",
+        "ERROR_MESSAGE": "تعذر تحديث الروبوت. يرجى المحاولة مرة أخرى."
       }
     },
     "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "روبوت الـWebhook",
+      "CSML": "بوت CSML"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json
index c6a983179e0f4..36f68986ebe4b 100644
--- a/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json
@@ -1,17 +1,18 @@
 {
   "AGENT_MGMT": {
-    "HEADER": "موظف الدعم",
-    "HEADER_BTN_TXT": "إضافة موظف",
-    "LOADING": "جار جلب قائمة الموظفين",
-    "SIDEBAR_TXT": "<p><b>الموظفين</b></p> <p> موظف الدعم <b></b> هو عضو في فريق دعم العملاء الخاص بك. </p><p> يستطيع موظفو الدعم مشاهدة الرسائل الواردة من المستخدمين والرد عليها. تظهر القائمة جميع الموظفين الموجودين حاليا في حسابك. </p><p> انقر فوق <b>إضافة موظف</b> لإضافة موظف دعم فني جديد. سيتلقى الشخص الذي تضيفه رسالة بريد إلكتروني مع رابط تأكيد لتفعيل حسابه ، وبعد ذلك يمكنهم الوصول إلى Chatwoot والرد على الرسائل. </p><p> الوصول إلى ميزات Chatwoot يتوقف على الصلاحيات التالية. </p><p> <b>الموظف</b> - موظفي الدعم الذين لديهم هذه الصلاحية يمكنهم فقط الوصول إلى صناديق قنوات التواصل والتقارير والمحادثات. ويمكنهم بدء محادثات مع موظفين آخرين أو مع أنفسهم وأيضاً إغلاق المحادثات.</p><p> <b>مدير البرنامج</b> - الشخص المسؤول من الوصول إلى جميع ميزات Chatwoot المفعلة للحساب الخاص بك. بما في ذلك الإعدادات، إلى جانب جميع امتيازات الموظفين العاديين.</p>",
+    "HEADER": "الوكلاء",
+    "HEADER_BTN_TXT": "إضافة وكيل",
+    "LOADING": "جار جلب قائمة الوكلاء",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "المدير",
-      "AGENT": "موظف الدعم"
+      "AGENT": "وكيل الدعم"
     },
     "LIST": {
-      "404": "لا يوجد موظفي دعم مرتبطين بهذا الحساب",
-      "TITLE": "إدارة موظفي الدعم في فريقك",
-      "DESC": "يمكنك إضافة/إزالة موظفي الدعم الفني في فريقك.",
+      "404": "لا يوجد وكلاء دعم مرتبطين بهذا الحساب",
+      "TITLE": "إدارة وكلاء الدعم في فريقك",
+      "DESC": "يمكنك إضافة/إزالة وكلاء الدعم الفني في فريقك.",
       "NAME": "الاسم",
       "EMAIL": "البريد الإلكتروني",
       "STATUS": "الحالة",
@@ -20,35 +21,35 @@
       "VERIFICATION_PENDING": "بانتظار التحقق"
     },
     "ADD": {
-      "TITLE": "إضافة موظف دعم فني إلى فريقك",
-      "DESC": "يمكنك إضافة موظفي الدعم للرد على الرسائل في صندوق الوارد المشترك الخاص بفريقك.",
+      "TITLE": "إضافة وكيل دعم فني إلى فريقك",
+      "DESC": "يمكنك إضافة وكلاء الدعم للرد على الرسائل في صندوق الوارد المشترك الخاص بفريقك.",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "FORM": {
         "NAME": {
-          "LABEL": "اسم الموظف",
-          "PLACEHOLDER": "الرجاء إدخال اسم الموظف"
+          "LABEL": "اسم الوكيل",
+          "PLACEHOLDER": "الرجاء إدخال اسم الوكيل"
         },
         "AGENT_TYPE": {
-          "LABEL": "رتبة الموظف",
-          "PLACEHOLDER": "الرجاء تحديد نوع",
-          "ERROR": "رتبة الموظف مطلوبة"
+          "LABEL": "دور الوكيل",
+          "PLACEHOLDER": "الرجاء تحديد الدور",
+          "ERROR": "دور الوكيل مطلوب"
         },
         "EMAIL": {
           "LABEL": "عنوان البريد الإلكتروني",
-          "PLACEHOLDER": "الرجاء إدخال عنوان البريد الإلكتروني للموظف"
+          "PLACEHOLDER": "الرجاء إدخال عنوان البريد الإلكتروني للوكيل"
         },
-        "SUBMIT": "إضافة موظف"
+        "SUBMIT": "إضافة وكيل"
       },
       "API": {
-        "SUCCESS_MESSAGE": "تم إضافة الموظف بنجاح",
-        "EXIST_MESSAGE": "عنوان هذا البريد الإلكتروني مستخدم مسبقاً، الرجاء إضافة عنوان آخر",
+        "SUCCESS_MESSAGE": "تم إضافة الوكيل بنجاح",
+        "EXIST_MESSAGE": "عنوان البريد الإلكتروني للوكيل مستخدم مسبقاً، الرجاء إضافة عنوان آخر",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "حذف",
       "API": {
-        "SUCCESS_MESSAGE": "تم حذف حساب الموظف بنجاح",
+        "SUCCESS_MESSAGE": "تم حذف حساب الوكيل بنجاح",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "CONFIRM": {
@@ -59,38 +60,38 @@
       }
     },
     "EDIT": {
-      "TITLE": "تعديل حساب الموظف",
+      "TITLE": "تعديل الوكيل",
       "FORM": {
         "NAME": {
-          "LABEL": "اسم الموظف",
-          "PLACEHOLDER": "الرجاء إدخال اسم الموظف"
+          "LABEL": "اسم الوكيل",
+          "PLACEHOLDER": "الرجاء إدخال اسم الوكيل"
         },
         "AGENT_TYPE": {
-          "LABEL": "رتبة الموظف",
-          "PLACEHOLDER": "الرجاء تحديد نوع",
-          "ERROR": "رتبة الموظف مطلوبة"
+          "LABEL": "دور الوكيل",
+          "PLACEHOLDER": "الرجاء تحديد الدور",
+          "ERROR": "دور الوكيل مطلوب"
         },
         "EMAIL": {
           "LABEL": "عنوان البريد الإلكتروني",
-          "PLACEHOLDER": "الرجاء إدخال عنوان البريد الإلكتروني للموظف"
+          "PLACEHOLDER": "الرجاء إدخال عنوان البريد الإلكتروني للوكيل"
         },
         "AGENT_AVAILABILITY": {
           "LABEL": "التوفر",
           "PLACEHOLDER": "الرجاء تحديد حالة التوفر",
           "ERROR": "حالة التوفر مطلوبة"
         },
-        "SUBMIT": "تعديل حساب الموظف"
+        "SUBMIT": "تعديل الوكيل"
       },
       "BUTTON_TEXT": "تعديل",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "API": {
-        "SUCCESS_MESSAGE": "تم تحديث حساب الموظف بنجاح",
+        "SUCCESS_MESSAGE": "تم تحديث حساب الوكيل بنجاح",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "PASSWORD_RESET": {
         "ADMIN_RESET_BUTTON": "إعادة تعيين كلمة المرور",
-        "ADMIN_SUCCESS_MESSAGE": "تم إرسال بريد إلكتروني مع تعليمات إعادة تعيين كلمة المرور",
-        "SUCCESS_MESSAGE": "إعادة تعيين كلمة مرور حساب الموظف بنجاح",
+        "ADMIN_SUCCESS_MESSAGE": "تم إرسال بريد إلكتروني مع تعليمات إعادة تعيين كلمة المرور للوكيل",
+        "SUCCESS_MESSAGE": "إعادة تعيين كلمة مرور حساب الوكيل بنجاح",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       }
     },
@@ -101,17 +102,17 @@
       "PLACEHOLDER": "لا شيء",
       "TITLE": {
         "AGENT": "اختر وكيل",
-        "TEAM": "اختيار فريق"
+        "TEAM": "اختر فريق"
       },
       "SEARCH": {
         "NO_RESULTS": {
-          "AGENT": "لم يتم العثور على موظفين",
-          "TEAM": "لم يتم العثور على موظفين"
+          "AGENT": "لم يتم العثور على وكلاء",
+          "TEAM": "لم يتم العثور على فريق"
         },
         "PLACEHOLDER": {
           "AGENT": "البحث عن وكلاء",
           "TEAM": "البحث عن فريق",
-          "INPUT": "البحث عن ممثلى الخدمة"
+          "INPUT": "البحث عن وكلاء"
         }
       }
     }
diff --git a/app/javascript/dashboard/i18n/locale/ar/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/ar/attributesMgmt.json
index 3ced03bb8b47b..c4a61057cf5b6 100644
--- a/app/javascript/dashboard/i18n/locale/ar/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/attributesMgmt.json
@@ -1,17 +1,17 @@
 {
   "ATTRIBUTES_MGMT": {
-    "HEADER": "سمات مخصصة",
-    "HEADER_BTN_TXT": "إضافة سمة خاصة",
-    "LOADING": "جلب سمات مخصصة",
-    "SIDEBAR_TXT": "<p><b>السمات المخصصة</b> <p>سمة مخصصة تتبع الحقائق حول جهات الاتصال/المحادثة الخاصة بك - مثل خطة الاشتراك. أو عندما يطلبون العنصر الأول وما إلى ذلك. <br /><br />لإنشاء سمة مخصصة، فقط انقر فوق<b>أضف سمة مخصصة.</b> يمكنك أيضا تعديل أو حذف سمة مخصصة موجودة بالنقر على زر التحرير أو الحذف.</p>",
+    "HEADER": "صفات مخصصة",
+    "HEADER_BTN_TXT": "إضافة صفة خاصة",
+    "LOADING": "جلب الصفات المخصصة",
+    "SIDEBAR_TXT": "<p><b>الصفات المخصصة</b> <p>صفة مخصصة تتبع الحقائق حول جهات الاتصال/المحادثة الخاصة بك - مثل خُطَّة الاشتراك. أو عندما يطلبون العنصر الأول وما إلى ذلك. <br /><br />لإنشاء صفة مخصصة، فقط انقر فوق<b>أضف صفة مخصصة.</b> يمكنك أيضا تعديل أو حذف صفة مخصصة موجودة بالنقر على زر التحرير أو الحذف.</p>",
     "ADD": {
-      "TITLE": "إضافة سمة خاصة",
+      "TITLE": "إضافة صفة خاصة",
       "SUBMIT": "إنشاء",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "FORM": {
         "NAME": {
           "LABEL": "اسم العرض",
-          "PLACEHOLDER": "أدخل اسم عرض السمة",
+          "PLACEHOLDER": "أدخل اسم عرض الصفة",
           "ERROR": "الاسم مطلوب"
         },
         "DESC": {
@@ -36,43 +36,43 @@
         },
         "KEY": {
           "LABEL": "المفتاح",
-          "PLACEHOLDER": "أدخل مفتاح السمة المخصصة",
+          "PLACEHOLDER": "أدخل مفتاح الصفة المخصصة",
           "ERROR": "المفتاح مطلوب",
           "IN_VALID": "مفتاح غير صالح"
         },
         "REGEX_PATTERN": {
-          "LABEL": "Regex Pattern",
-          "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+          "LABEL": "نمط Regex",
+          "PLACEHOLDER": "الرجاء إدخال سمة مخصصة ريمكس (اختياري)"
         },
         "REGEX_CUE": {
           "LABEL": "Regex Cue",
-          "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+          "PLACEHOLDER": "الرجاء إدخال تلميح نمط regex (اختياري)"
         },
         "ENABLE_REGEX": {
-          "LABEL": "Enable regex validation"
+          "LABEL": "تمكين التحقق من صحة regex"
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "تم إضافة سمة مخصصة بنجاح!",
-        "ERROR_MESSAGE": "تعذر إنشاء سمة مخصصة، الرجاء المحاولة مرة أخرى لاحقاً."
+        "SUCCESS_MESSAGE": "تم إضافة صفة مخصصة بنجاح!",
+        "ERROR_MESSAGE": "تعذر إنشاء صفة مخصصة، الرجاء المحاولة مرة أخرى لاحقاً."
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "حذف",
       "API": {
-        "SUCCESS_MESSAGE": "تم حذف السمة المخصصة بنجاح.",
-        "ERROR_MESSAGE": "تعذر حذف السمة المخصصة. حاول مرة أخرى."
+        "SUCCESS_MESSAGE": "تم حذف الصفة المخصصة بنجاح.",
+        "ERROR_MESSAGE": "تعذر حذف الصفة المخصصة. حاول مرة أخرى."
       },
       "CONFIRM": {
         "TITLE": "هل أنت متأكد من أنك تريد حذف - %{attributeName}",
         "PLACE_HOLDER": "الرجاء كتابة {attributeName} للتأكيد",
-        "MESSAGE": "حذف سوف يزيل السمة المخصصة",
+        "MESSAGE": "الحذف سوف يزيل الصفة المخصصة",
         "YES": "حذف ",
         "NO": "إلغاء"
       }
     },
     "EDIT": {
-      "TITLE": "تعديل سمة مخصصة",
+      "TITLE": "تعديل صفة مخصصة",
       "UPDATE_BUTTON_TEXT": "تحديث",
       "TYPE": {
         "LIST": {
@@ -81,12 +81,12 @@
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "تم تحديث السمة المخصصة بنجاح",
-        "ERROR_MESSAGE": "حدث خطأ أثناء تحديث السمة المخصصة، الرجاء المحاولة مرة أخرى"
+        "SUCCESS_MESSAGE": "تم تحديث الصفة المخصصة بنجاح",
+        "ERROR_MESSAGE": "حدث خطأ أثناء تحديث الصفة المخصصة، الرجاء المحاولة مرة أخرى"
       }
     },
     "TABS": {
-      "HEADER": "سمات مخصصة",
+      "HEADER": "صفات مخصصة",
       "CONVERSATION": "المحادثات",
       "CONTACT": "جهات الاتصال"
     },
@@ -106,15 +106,15 @@
         "NOT_FOUND": "لا توجد سمات مخصصة تم تكوينها"
       },
       "REGEX_PATTERN": {
-        "LABEL": "Regex Pattern",
-        "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+        "LABEL": "نمط Regex",
+        "PLACEHOLDER": "الرجاء إدخال صفة مخصصة ريمكس (اختياري)"
       },
       "REGEX_CUE": {
         "LABEL": "Regex Cue",
-        "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+        "PLACEHOLDER": "الرجاء إدخال تلميح نمط regex (اختياري)"
       },
       "ENABLE_REGEX": {
-        "LABEL": "Enable regex validation"
+        "LABEL": "تمكين التحقق من صحة regex"
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ar/auditLogs.json b/app/javascript/dashboard/i18n/locale/ar/auditLogs.json
index b115b879e2ce8..0ca19491b30c9 100644
--- a/app/javascript/dashboard/i18n/locale/ar/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ar/auditLogs.json
@@ -1,71 +1,74 @@
 {
   "AUDIT_LOGS": {
-    "HEADER": "Audit Logs",
-    "HEADER_BTN_TXT": "Add Audit Logs",
-    "LOADING": "Fetching Audit Logs",
+    "HEADER": "سجلات التدقيق",
+    "HEADER_BTN_TXT": "إضافة سجلات التدقيق",
+    "LOADING": "جارٍ جلب سجلات التدقيق",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "لا توجد عناصر مطابقة لهذا الاستعلام",
-    "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
+    "SIDEBAR_TXT": "<p><b>سجلات التدقيق</b> </p><p> سجلات التدقيق هي مسارات للأحداث والإجراءات في نظام Chatwoot. </p>",
     "LIST": {
-      "404": "There are no Audit Logs available in this account.",
-      "TITLE": "Manage Audit Logs",
-      "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
+      "404": "لا توجد سجلات تدقيق متاحة في هذا الحساب.",
+      "TITLE": "إدارة سجلات التدقيق",
+      "DESC": "سجلات التدقيق هي مسارات للأحداث والإجراءات في نظام Chatwoot.",
       "TABLE_HEADER": [
-        "User",
-        "Action",
+        "المستخدم",
+        "الإجراء",
         "عنوان IP"
       ]
     },
     "API": {
-      "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
+      "SUCCESS_MESSAGE": "تم استرجاع سجلات التدقيق بنجاح",
       "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
     },
-    "DEFAULT_USER": "System",
+    "DEFAULT_USER": "النظام",
     "AUTOMATION_RULE": {
-      "ADD": "%{agentName} created a new automation rule (#%{id})",
-      "EDIT": "%{agentName} updated an automation rule (#%{id})",
-      "DELETE": "%{agentName} deleted an automation rule (#%{id})"
+      "ADD": "%{agentName} أنشأ قاعدة أتمتة جديدة (#%{id})",
+      "EDIT": "%{agentName} قام بتحديث قاعدة أتمتة (#%{id})",
+      "DELETE": "%{agentName} حذف قاعدة أتمتة (#%{id})"
     },
     "ACCOUNT_USER": {
-      "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
+      "ADD": "%{agentName} دعا %{invitee} إلى الحساب كـ %{role}",
       "EDIT": {
-        "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "SELF": "%{agentName} غير %{attributes} الخاصة به إلى %{values}",
+        "OTHER": "%{agentName} غير %{attributes} لـ %{user} إلى %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
-      "ADD": "%{agentName} created a new inbox (#%{id})",
-      "EDIT": "%{agentName} updated an inbox (#%{id})",
-      "DELETE": "%{agentName} deleted an inbox (#%{id})"
+      "ADD": "%{agentName} أنشأ صندوق وارد جديد (#%{id})",
+      "EDIT": "%{agentName} قام بتحديث صندوق الوارد (#%{id})",
+      "DELETE": "%{agentName} حذف صندوق الوارد (#%{id})"
     },
     "WEBHOOK": {
-      "ADD": "%{agentName} created a new webhook (#%{id})",
-      "EDIT": "%{agentName} updated a webhook (#%{id})",
-      "DELETE": "%{agentName} deleted a webhook (#%{id})"
+      "ADD": "%{agentName} أنشأ Webhook جديد (#%{id})",
+      "EDIT": "%{agentName} قام بتحديث Webhook (#%{id})",
+      "DELETE": "%{agentName} حذف Webhook (#%{id})"
     },
     "USER_ACTION": {
-      "SIGN_IN": "%{agentName} signed in",
-      "SIGN_OUT": "%{agentName} signed out"
+      "SIGN_IN": "%{agentName} قام بتسجيل الدخول",
+      "SIGN_OUT": "%{agentName} قام بتسجيل الخروج"
     },
     "TEAM": {
-      "ADD": "%{agentName} created a new team (#%{id})",
-      "EDIT": "%{agentName} updated a team (#%{id})",
-      "DELETE": "%{agentName} deleted a team (#%{id})"
+      "ADD": "%{agentName} أنشأ فريق جديد (#%{id})",
+      "EDIT": "%{agentName} قام بتحديث الفريق (#%{id})",
+      "DELETE": "%{agentName} حذف الفريق (#%{id})"
     },
     "MACRO": {
-      "ADD": "%{agentName} created a new macro (#%{id})",
-      "EDIT": "%{agentName} updated a macro (#%{id})",
-      "DELETE": "%{agentName} deleted a macro (#%{id})"
+      "ADD": "%{agentName} أنشأ ماكرو جديد (#%{id})",
+      "EDIT": "%{agentName} قام بتحديث ماكرو (#%{id})",
+      "DELETE": "%{agentName} حذف ماكرو (#%{id})"
     },
     "INBOX_MEMBER": {
-      "ADD": "%{agentName} added %{user} to the inbox(#%{inbox_id})",
-      "REMOVE": "%{agentName} removed %{user} from the inbox(#%{inbox_id})"
+      "ADD": "%{agentName} أضاف %{user} إلى صندوق الوارد (#%{inbox_id})",
+      "REMOVE": "%{agentName} أزال %{user} من صندوق الوارد (#%{inbox_id})"
     },
     "TEAM_MEMBER": {
-      "ADD": "%{agentName} added %{user} to the team(#%{team_id})",
-      "REMOVE": "%{agentName} removed %{user} from the team(#%{team_id})"
+      "ADD": "%{agentName} أضاف %{user} إلى الفريق (#%{team_id})",
+      "REMOVE": "%{agentName} أزال %{user} من الفريق (#%{team_id})"
     },
     "ACCOUNT": {
-      "EDIT": "%{agentName} updated the account configuration (#%{id})"
+      "EDIT": "%{agentName} قام بتحديث إعدادات الحساب (#%{id})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/automation.json b/app/javascript/dashboard/i18n/locale/ar/automation.json
index 36cff8c31fdce..a7d5233e719a6 100644
--- a/app/javascript/dashboard/i18n/locale/ar/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ar/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "اكتب رسالتك هنا",
-      "TEAM_DROPDOWN_PLACEHOLDER": "اختيار فريق"
+      "TEAM_DROPDOWN_PLACEHOLDER": "اختيار فريق",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "تفعيل قاعدة الأتمتة",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "جاري الرفع...",
       "LABEL_UPLOADED": "تم الرفع بنجاح",
       "LABEL_UPLOAD_FAILED": "فشل الرفع"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "مفتاح الخاصية مطلوب",
+      "FILTER_OPERATOR_REQUIRED": "عامل التصفية مطلوب",
+      "VALUE_REQUIRED": "القيمة مطلوبة",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "القيمة يجب أن تكون بين 1 و 998",
+      "ACTION_PARAMETERS_REQUIRED": "معلمات الإجراء مطلوبة",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "شرط واحد على الأقل مطلوب",
+      "ATLEAST_ONE_ACTION_REQUIRED": "إجراء واحد على الأقل مطلوب"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/bulkActions.json b/app/javascript/dashboard/i18n/locale/ar/bulkActions.json
index 7425dfe1fb6fe..ad80d7b527947 100644
--- a/app/javascript/dashboard/i18n/locale/ar/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ar/bulkActions.json
@@ -7,34 +7,35 @@
     "GO_BACK_LABEL": "العودة للخلف",
     "ASSIGN_LABEL": "تكليف",
     "YES": "نعم",
+    "SEARCH_INPUT_PLACEHOLDER": "بحث",
     "ASSIGN_AGENT_TOOLTIP": "تعيين وكيل",
     "ASSIGN_TEAM_TOOLTIP": "تعيين فريق",
     "ASSIGN_SUCCESFUL": "تم تعيين المحادثات بنجاح.",
-    "ASSIGN_FAILED": "Failed to assign conversations. Please try again.",
+    "ASSIGN_FAILED": "فشل في تعيين المحادثات، الرجاء المحاولة مرة أخرى.",
     "RESOLVE_SUCCESFUL": "تم تسوية المحادثات بنجاح.",
-    "RESOLVE_FAILED": "Failed to resolve conversations. Please try again.",
+    "RESOLVE_FAILED": "فشل في حل المحادثات، يرجى المحاولة مرة أخرى.",
     "ALL_CONVERSATIONS_SELECTED_ALERT": "المحادثات المرئية في هذه الصفحة هي المحددة فقط.",
-    "AGENT_LIST_LOADING": "جاري تحميل الوكلاء",
+    "AGENT_LIST_LOADING": "جاري جلب الوكلاء",
     "UPDATE": {
       "CHANGE_STATUS": "تغيير الحالة",
-      "SNOOZE_UNTIL": "غفوة",
+      "SNOOZE_UNTIL": "تأجيل",
       "UPDATE_SUCCESFUL": "تم تحديث حالة المحادثة بنجاح.",
-      "UPDATE_FAILED": "Failed to update conversations. Please try again."
+      "UPDATE_FAILED": "فشل تحديث المحادثات، الرجاء المحاولة مرة أخرى."
     },
     "LABELS": {
-      "ASSIGN_LABELS": "Assign labels",
+      "ASSIGN_LABELS": "إضافة وسم",
       "NO_LABELS_FOUND": "لم يتم العثور على تسميات لـ",
       "ASSIGN_SELECTED_LABELS": "تعيين التسميات المحددة",
       "ASSIGN_SUCCESFUL": "تم تعيين التسميات بنجاح.",
-      "ASSIGN_FAILED": "Failed to assign labels. Please try again."
+      "ASSIGN_FAILED": "فشل في تعيين التسميات ، الرجاء المحاولة مرة أخرى."
     },
     "TEAMS": {
-      "TEAM_SELECT_LABEL": "اختيار فريق",
+      "TEAM_SELECT_LABEL": "اختر فريق",
       "NONE": "لا شيء",
       "NO_TEAMS_AVAILABLE": "لا توجد فرق مضافة إلى هذا الحساب حتى الآن.",
       "ASSIGN_SELECTED_TEAMS": "تعيين فريق محدد.",
       "ASSIGN_SUCCESFUL": "تم تعيين الفرق بنجاح.",
-      "ASSIGN_FAILED": "Failed to assign team. Please try again."
+      "ASSIGN_FAILED": "فشل تعيين الفريق، الرجاء المحاولة مرة أخرى."
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/campaign.json b/app/javascript/dashboard/i18n/locale/ar/campaign.json
index 534901533ad98..6dbf9dd0a08af 100644
--- a/app/javascript/dashboard/i18n/locale/ar/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/ar/campaign.json
@@ -46,12 +46,12 @@
         "END_POINT": {
           "LABEL": "الرابط",
           "PLACEHOLDER": "الرجاء إدخال الرابط",
-          "ERROR": "الرجاء إدخال عنوان URL صالح"
+          "ERROR": "الرجاء إدخال عنوان رابط صالح"
         },
         "TIME_ON_PAGE": {
-          "LABEL": "الوقت على الصفحة (ثواني)",
+          "LABEL": "الوقت في الصفحة (ثواني)",
           "PLACEHOLDER": "الرجاء إدخال الوقت",
-          "ERROR": "الوقت على الصفحة مطلوب"
+          "ERROR": "الوقت في الصفحة مطلوب"
         },
         "ENABLED": "تفعيل الحملة",
         "TRIGGER_ONLY_BUSINESS_HOURS": "تشغيل فقط خلال ساعات العمل",
@@ -84,7 +84,7 @@
       }
     },
     "LIST": {
-      "LOADING_MESSAGE": "جاري تحميل الحملات...",
+      "LOADING_MESSAGE": "جاري جلب الحملات...",
       "404": "لا توجد حملات منشئة لهذا البريد الوارد.",
       "TABLE_HEADER": {
         "TITLE": "العنوان",
diff --git a/app/javascript/dashboard/i18n/locale/ar/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ar/cannedMgmt.json
index 2278670e363ea..5b7e8ac151ed3 100644
--- a/app/javascript/dashboard/i18n/locale/ar/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/cannedMgmt.json
@@ -1,14 +1,15 @@
 {
   "CANNED_MGMT": {
-    "HEADER": "الردود السريعة",
+    "HEADER": "الردود الجاهزة",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "إضافة رد جاهز",
     "LOADING": "جاري جلب الردود الجاهزة...",
     "SEARCH_404": "لا توجد عناصر مطابقة لهذا الاستعلام.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "لا توجد ردود جاهزة متوفرة في هذا الحساب.",
       "TITLE": "إدارة الردود الجاهزة",
-      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
+      "DESC": "الردود الجاهزة هي قوالب رسائل معدة مسبقاً يمكن استخدامها لتسريع كتابة الردود في المحادثات.",
       "TABLE_HEADER": [
         "كود مختصر",
         "المحتوى",
@@ -17,7 +18,7 @@
     },
     "ADD": {
       "TITLE": "إضافة رد جاهز",
-      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
+      "DESC": "الردود الجاهزة هي قوالب رسائل معدة مسبقاً يمكن استخدامها لتسريع كتابة الردود في المحادثات.",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "FORM": {
         "SHORT_CODE": {
@@ -33,43 +34,43 @@
         "SUBMIT": "إرسال"
       },
       "API": {
-        "SUCCESS_MESSAGE": "تم إضافة الرد المعد مسبقاً بنجاح.",
+        "SUCCESS_MESSAGE": "تم إضافة الرد الجاهز بنجاح.",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       }
     },
     "EDIT": {
-      "TITLE": "تعديل الرد المعد مسبقاً",
+      "TITLE": "تعديل الرد الجاهز",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "FORM": {
         "SHORT_CODE": {
           "LABEL": "كود مختصر",
-          "PLACEHOLDER": "من فضلك ادخل الكود مختصر.",
-          "ERROR": "الكود مختصر مطلوب."
+          "PLACEHOLDER": "من فضلك ادخل الكود المختصر.",
+          "ERROR": "الكود المختصر مطلوب."
         },
         "CONTENT": {
           "LABEL": "رسالة",
-          "PLACEHOLDER": "من فضلك ادخل نص لرسالة التي ترغب في حفظها كقالب لاستخدامها لاحقاُ.",
+          "PLACEHOLDER": "من فضلك ادخل نص للرسالة التي ترغب في حفظها كقالب لاستخدامها لاحقاُ.",
           "ERROR": "الرسالة مطلوبة."
         },
-        "SUBMIT": "إرسال"
+        "SUBMIT": "تسليم"
       },
       "BUTTON_TEXT": "تعديل",
       "API": {
-        "SUCCESS_MESSAGE": "تم تحديث الرد المعد مسبقاً بنجاح.",
+        "SUCCESS_MESSAGE": "تم تحديث الرد الجاهز بنجاح.",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "حذف",
       "API": {
-        "SUCCESS_MESSAGE": "تم حذف الرد المعد مسبقاً بنجاح.",
+        "SUCCESS_MESSAGE": "تم حذف الرد الجاهز بنجاح.",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "CONFIRM": {
         "TITLE": "تأكيد الحذف",
         "MESSAGE": "هل أنت متأكد من الحذف ",
-        "YES": "نعم, حذف ",
-        "NO": "لا, قم بالابقاء عليه "
+        "YES": "نعم، احذف ",
+        "NO": "لا، احتفظ به "
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ar/chatlist.json b/app/javascript/dashboard/i18n/locale/ar/chatlist.json
index 8dae1724326e7..c3778e07badae 100644
--- a/app/javascript/dashboard/i18n/locale/ar/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ar/chatlist.json
@@ -15,7 +15,7 @@
     "FILTER_ALL": "الكل",
     "ASSIGNEE_TYPE_TABS": {
       "me": "محادثاتي",
-      "unassigned": "غير مسند",
+      "unassigned": "غير معيّن",
       "all": "الكل"
     },
     "CHAT_STATUS_FILTER_ITEMS": {
@@ -23,13 +23,13 @@
         "TEXT": "فتح"
       },
       "resolved": {
-        "TEXT": "مغلقة"
+        "TEXT": "تم حلها"
       },
       "pending": {
         "TEXT": "معلق"
       },
       "snoozed": {
-        "TEXT": "غفوة"
+        "TEXT": "مؤجلة"
       },
       "all": {
         "TEXT": "الكل"
@@ -47,34 +47,34 @@
         "OLDEST": "تم إنشاؤها في:"
       },
       "LAST_ACTIVITY": {
-        "NOT_ACTIVE": "النشاط الأخير:",
-        "ACTIVE": "النشاط الأخير"
+        "NOT_ACTIVE": "آخر نشاط:",
+        "ACTIVE": "آخر نشاط"
       }
     },
     "SORT_ORDER_ITEMS": {
       "last_activity_at_asc": {
-        "TEXT": "اخر نشاط: آلأقدم أولا"
+        "TEXT": "آخر نشاط: الأقدم أولا"
       },
       "last_activity_at_desc": {
-        "TEXT": "اخر نشاط: الأحدث أولا"
+        "TEXT": "آخر نشاط: الأحدث أولا"
       },
       "created_at_desc": {
-        "TEXT": "Created at: Newest first"
+        "TEXT": "وقت الإنشاء: الأحدث أولاً"
       },
       "created_at_asc": {
-        "TEXT": "Created at: Oldest first"
+        "TEXT": "وقت الإنشاء: الأقدم أولاً"
       },
       "priority_desc": {
-        "TEXT": "Priority: Highest first"
+        "TEXT": "الأولوية: الأعلى أولا"
       },
       "priority_asc": {
-        "TEXT": "Priority: Lowest first"
+        "TEXT": "الأولوية: الأقل أولاً"
       },
       "waiting_since_asc": {
-        "TEXT": "Pending Response: Longest first"
+        "TEXT": "الرد المعلق: الأطول أولا"
       },
       "waiting_since_desc": {
-        "TEXT": "Pending Response: Shortest first"
+        "TEXT": "الرد المعلق: الأقصر أولاً"
       }
     },
     "ATTACHMENTS": {
@@ -102,15 +102,15 @@
       "DROPDOWN_TITLE": "ترتيب حسب",
       "ITEMS": {
         "LATEST": {
-          "NAME": "النشاط الأخير في",
-          "LABEL": "النشاط الأخير"
+          "NAME": "آخر نشاط في",
+          "LABEL": "آخر نشاط"
         },
         "CREATED_AT": {
           "NAME": "تم إنشاؤها في",
           "LABEL": "تم إنشاؤها في"
         },
         "LAST_USER_MESSAGE_AT": {
-          "NAME": "Last user message at",
+          "NAME": "آخر رسالة للمستخدم في",
           "LABEL": "أخر رسالة"
         }
       }
@@ -119,13 +119,13 @@
     "VIEW_TWEET_IN_TWITTER": "عرض التغريدة في تويتر",
     "REPLY_TO_TWEET": "الرد على هذه التغريدة",
     "LINK_TO_STORY": "الذهاب إلى قصة الإنستقرام",
-    "SENT": "Sent successfully",
+    "SENT": "تم الإرسال بنجاح",
     "READ": "تمت القراءة بنجاح",
     "DELIVERED": "تم الإرسال بنجاح",
     "NO_MESSAGES": "لا توجد رسائل",
     "NO_CONTENT": "لم يتم العثور على محتوى",
-    "HIDE_QUOTED_TEXT": "Hide Quoted Text",
-    "SHOW_QUOTED_TEXT": "Show Quoted Text",
-    "MESSAGE_READ": "قرائة"
+    "HIDE_QUOTED_TEXT": "إخفاء النص المقتبس",
+    "SHOW_QUOTED_TEXT": "إظهار النص المقتبس",
+    "MESSAGE_READ": "قراءة"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/contact.json b/app/javascript/dashboard/i18n/locale/ar/contact.json
index 52b73f56d0644..95bc3e3b4768f 100644
--- a/app/javascript/dashboard/i18n/locale/ar/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ar/contact.json
@@ -5,7 +5,7 @@
     "PHONE_NUMBER": "رقم الهاتف",
     "IDENTIFIER": "المعرف",
     "COPY_SUCCESSFUL": "تم النسخ إلى الحافظة بنجاح",
-    "COMPANY": "الشركة",
+    "COMPANY": "المنشأة",
     "LOCATION": "الموقع الجغرافي",
     "BROWSER_LANGUAGE": "لغة المتصفح",
     "CONVERSATION_TITLE": "تفاصيل المحادثة",
@@ -15,7 +15,7 @@
     "INITIATED_FROM": "تم البدء من",
     "INITIATED_AT": "تم البدء في",
     "IP_ADDRESS": "عنوان IP",
-    "CREATED_AT_LABEL": "أضيفت",
+    "CREATED_AT_LABEL": "تم إنشاؤها",
     "NEW_MESSAGE": "رسالة جديدة",
     "CONVERSATIONS": {
       "NO_RECORDS_FOUND": "لا توجد محادثات سابقة مرتبطة بجهة الاتصال هذه.",
@@ -34,14 +34,14 @@
         "TITLE": "اضافة تصنيف جديد",
         "PLACEHOLDER": "ابحث عن تصنيفات",
         "NO_RESULT": "لم يتم العثور على تصنيفات",
-        "CREATE_LABEL": "Create new label"
+        "CREATE_LABEL": "إنشاء تسمية جديدة"
       }
     },
     "MERGE_CONTACT": "دمج جهة الاتصال",
     "CONTACT_ACTIONS": "إجراءات جهات الاتصال",
     "MUTE_CONTACT": "احجب جهة الاتصال",
     "UNMUTE_CONTACT": "إلغاء حجب جهة الاتصال",
-    "MUTED_SUCCESS": "This contact is blocked successfully. You will not be notified of any future conversations.",
+    "MUTED_SUCCESS": "تم حظر جهة الاتصال هذه بنجاح، لن يتم إعلامك بأي محادثات في المستقبل.",
     "UNMUTED_SUCCESS": "تم إلغاء حجب جهة الاتصال بنجاح.",
     "SEND_TRANSCRIPT": "إرسال النص",
     "EDIT_LABEL": "تعديل",
@@ -72,21 +72,21 @@
       "SUBMIT": "استيراد",
       "CANCEL": "إلغاء"
     },
-    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+    "SUCCESS_MESSAGE": "سيتم إعلامك عبر البريد الإلكتروني عند استكمال الاستيراد.",
     "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى"
   },
   "EXPORT_CONTACTS": {
     "BUTTON_LABEL": "تصدير",
     "TITLE": "تصدير جهات الاتصال",
     "DESC": "تصدير جهات الاتصال إلى ملف CSV.",
-    "SUCCESS_MESSAGE": "Export is in progress, You will be notified via email when export file is ready to dowanlod.",
+    "SUCCESS_MESSAGE": "التصدير جاري. سيتم إعلامك على البريد الإلكتروني عندما يكون ملف التصدير جاهزا للتحميل.",
     "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى",
     "CONFIRM": {
       "TITLE": "تصدير جهات الاتصال",
-      "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
+      "MESSAGE": "هل أنت متأكد من أنك تريد تصدير جميع جهات الاتصال؟",
+      "FILTERED_MESSAGE": "هل أنت متأكد من أنك تريد تصدير جميع جهات الاتصال التي تم تصفيتها؟",
       "YES": "نعم, قم بالتصدير",
-      "NO": "نعم, إلغاء"
+      "NO": "لا، إلغاء"
     }
   },
   "DELETE_NOTE": {
@@ -130,19 +130,19 @@
       "EMAIL_ADDRESS": {
         "PLACEHOLDER": "أدخل عنوان البريد الإلكتروني الخاص بجهة الاتصال",
         "LABEL": "عنوان البريد الإلكتروني",
-        "DUPLICATE": "عنوان البريد الإلكتروني هذا مستخدم لجهة اتصال أخرى.",
+        "DUPLICATE": "عنوان البريد الإلكتروني هذا مستخدم من قبل جهة اتصال أخرى.",
         "ERROR": "الرجاء إدخال عنوان بريد إلكتروني صحيح."
       },
       "PHONE_NUMBER": {
         "PLACEHOLDER": "أدخل رقم الهاتف الخاص بجهة الاتصال",
         "LABEL": "رقم الهاتف",
-        "HELP": "يجب ان يحتوى رقم الهاتف على كود دولتك تسبقها علامة +\nمثال: +20101243567",
+        "HELP": "يجب ان يحتوى رقم الهاتف على كود الدولة تسبقها علامة +\nمثال: +20101243567.",
         "ERROR": "يجب ان تكون خانة رقم الهاتف إما فارغة او مكتملة مع رمز الدولة",
-        "DIAL_CODE_ERROR": "Please select a dial code from the list",
+        "DIAL_CODE_ERROR": "الرجاء تحديد رمز الاتصال من القائمة",
         "DUPLICATE": "رقم الهاتف هذا مستخدم لجهة اتصال أخرى."
       },
       "LOCATION": {
-        "PLACEHOLDER": "أدخل موقع جهة الاتصال",
+        "PLACEHOLDER": "أدخل الموقع الجغرافي لجهة الاتصال",
         "LABEL": "الموقع الجغرافي"
       },
       "COMPANY_NAME": {
@@ -174,14 +174,14 @@
           "LABEL": "LinkedIn"
         },
         "GITHUB": {
-          "PLACEHOLDER": "أدخل اسم المسستخدم في Github",
+          "PLACEHOLDER": "أدخل اسم المستخدم في Github",
           "LABEL": "Github"
         }
       }
     },
     "DELETE_AVATAR": {
       "API": {
-        "SUCCESS_MESSAGE": "تم حذف صورة جهة الاتصال بنجاح",
+        "SUCCESS_MESSAGE": "تم حذف الصورة الرمزية لجهة الاتصال بنجاح",
         "ERROR_MESSAGE": "تعذر حذف الصورة الرمزية لجهة الإتصال. الرجاء المحاولة مرة أخرى لاحقاً."
       }
     },
@@ -189,7 +189,7 @@
     "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى"
   },
   "NEW_CONVERSATION": {
-    "BUTTON_LABEL": "محادثة جديدة",
+    "BUTTON_LABEL": "إبدأ محادثة",
     "TITLE": "محادثة جديدة",
     "DESC": "بدء محادثة جديدة بإرسال رسالة جديدة.",
     "NO_INBOX": "تعذر العثور على صندوق الوارد لبدء محادثة جديدة مع جهة الاتصال هذه.",
@@ -199,7 +199,7 @@
       },
       "INBOX": {
         "LABEL": "صندوق الوارد",
-        "PLACEHOLDER": "اختر صندوق المصدر",
+        "PLACEHOLDER": "اختيار مصدر البريد الوارد",
         "ERROR": "حدد صندوق الوارد"
       },
       "SUBJECT": {
@@ -213,8 +213,8 @@
         "ERROR": "لا يمكن أن تكون الرسالة فارغة"
       },
       "ATTACHMENTS": {
-        "SELECT": "Choose files",
-        "HELP_TEXT": "Drag and drop files here or choose files to attach"
+        "SELECT": "اختر الملفات",
+        "HELP_TEXT": "قم بسحب وإسقاط الملفات هنا أو اختر ملفات لإرفاقها"
       },
       "SUBMIT": "إرسال الرسالة",
       "CANCEL": "إلغاء",
@@ -225,15 +225,15 @@
   },
   "CONTACTS_PAGE": {
     "HEADER": "جهات الاتصال",
-    "FIELDS": "تصنفيات جهات الاتصال",
+    "FIELDS": "حقول جهات الاتصال",
     "SEARCH_BUTTON": "بحث",
     "SEARCH_INPUT_PLACEHOLDER": "بحث عن جهات الاتصال",
-    "FILTER_CONTACTS": "فلترة",
-    "FILTER_CONTACTS_SAVE": "حفظ الفلتر",
-    "FILTER_CONTACTS_DELETE": "حذف الفلتر",
-    "FILTER_CONTACTS_EDIT": "Edit segment",
+    "FILTER_CONTACTS": "تصفية",
+    "FILTER_CONTACTS_SAVE": "حفظ التصفية",
+    "FILTER_CONTACTS_DELETE": "حذف التصفية",
+    "FILTER_CONTACTS_EDIT": "تحرير الجزء",
     "LIST": {
-      "LOADING_MESSAGE": "جاري تحميل جهات الاتصال...",
+      "LOADING_MESSAGE": "جاري جلب جهات الاتصال...",
       "404": "لا توجد جهات اتصال تطابق بحثك 🔍",
       "NO_CONTACTS": "لا توجد جهات اتصال متوفرة",
       "TABLE_HEADER": {
@@ -245,7 +245,7 @@
         "COUNTRY": "الدولة",
         "CITY": "المدينة",
         "SOCIAL_PROFILES": "حسابات التواصل الاجتماعي",
-        "COMPANY": "الشركة",
+        "COMPANY": "المنشأة",
         "EMAIL_ADDRESS": "عنوان البريد الإلكتروني"
       },
       "VIEW_DETAILS": "عرض التفاصيل"
@@ -253,7 +253,7 @@
   },
   "CONTACT_PROFILE": {
     "BACK_BUTTON": "جهات الاتصال",
-    "LOADING": "جاري تحميل ملف الاتصال الشخصي..."
+    "LOADING": "جاري جلب ملف الاتصال الشخصي..."
   },
   "REMINDER": {
     "ADD_BUTTON": {
@@ -277,7 +277,7 @@
     "ADD": {
       "BUTTON": "إضافة",
       "PLACEHOLDER": "إضافة ملاحظة",
-      "TITLE": "Shift + Enter لإنشاء مهمة"
+      "TITLE": "Shift + Enter لإنشاء ملاحظة"
     },
     "CONTENT_HEADER": {
       "DELETE": "حذف الملاحظة"
@@ -288,7 +288,7 @@
       "TITLE": "الأنشطة"
     },
     "BUTTON": {
-      "PILL_BUTTON_NOTES": "ملاحظات",
+      "PILL_BUTTON_NOTES": "الملاحظات",
       "PILL_BUTTON_EVENTS": "الأحداث",
       "PILL_BUTTON_CONVO": "المحادثات"
     }
@@ -298,8 +298,8 @@
     "BUTTON": "إضافة سمة خاصة",
     "NOT_AVAILABLE": "لا توجد سمات مخصصة متاحة لجهة الاتصال هذه.",
     "COPY_SUCCESSFUL": "تم النسخ إلى الحافظة بنجاح",
-    "SHOW_MORE": "Show all attributes",
-    "SHOW_LESS": "Show less attributes",
+    "SHOW_MORE": "إظهار كافة السمات",
+    "SHOW_LESS": "عرض سمات أقل",
     "ACTIONS": {
       "COPY": "نسخ السمة",
       "DELETE": "حذف السمة",
@@ -307,36 +307,36 @@
     },
     "ADD": {
       "TITLE": "إنشاء سمة خاصة",
-      "DESC": "أضف معلومات خاصة إلى جهة الاتصال هذه."
+      "DESC": "أضف معلومات مخصصة إلى جهة الاتصال هذه."
     },
     "FORM": {
       "CREATE": "أضف سمة",
       "CANCEL": "إلغاء",
       "NAME": {
-        "LABEL": "اسم السمة الخاصة",
+        "LABEL": "اسم الصفة الخاصة",
         "PLACEHOLDER": "مثال: shopify id",
-        "ERROR": "اسم السمة المخصصة غير صالح"
+        "ERROR": "اسم الصفة المخصصة غير صالح"
       },
       "VALUE": {
         "LABEL": "قيمة السمة",
-        "PLACEHOLDER": "Eg: 11901 "
+        "PLACEHOLDER": "مثلاً: 11901 "
       },
       "ADD": {
-        "TITLE": "إنشاء سمة جديدة ",
-        "SUCCESS": "تمت إضافة السمة بنجاح",
-        "ERROR": "غير قادر على إضافة السمة. الرجاء المحاولة مرة أخرى لاحقاً"
+        "TITLE": "إنشاء صفة جديدة ",
+        "SUCCESS": "تمت إضافة الصفة بنجاح",
+        "ERROR": "غير قادر على إضافة الصفة. الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "UPDATE": {
-        "SUCCESS": "تم تحديث السمة المخصصة بنجاح",
-        "ERROR": "غير قادر على تحديث السمة. الرجاء المحاولة مرة أخرى لاحقاً"
+        "SUCCESS": "تم تحديث الصفة المخصصة بنجاح",
+        "ERROR": "غير قادر على تحديث الصفة. الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "DELETE": {
-        "SUCCESS": "تم حذف السمة المخصصة بنجاح",
-        "ERROR": "غير قادر على حذف السمة. الرجاء المحاولة مرة أخرى لاحقاً"
+        "SUCCESS": "تم حذف الصفة المخصصة بنجاح",
+        "ERROR": "غير قادر على حذف الصفة. الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "ATTRIBUTE_SELECT": {
-        "TITLE": "أضف سمة",
-        "PLACEHOLDER": "البحث عن سمات",
+        "TITLE": "أضف صفة",
+        "PLACEHOLDER": "البحث عن صفات",
         "NO_RESULT": "لم يتم العثور على سمات"
       },
       "ATTRIBUTE_TYPE": {
@@ -349,8 +349,8 @@
     },
     "VALIDATIONS": {
       "REQUIRED": "القيمة الصالحة مطلوبة",
-      "INVALID_URL": "عنوان URL غير صالح",
-      "INVALID_INPUT": "Invalid Input"
+      "INVALID_URL": "عنوان الرابط غير صالح",
+      "INVALID_INPUT": "مدخلات غير صالح"
     }
   },
   "MERGE_CONTACTS": {
@@ -367,20 +367,23 @@
     },
     "SUMMARY": {
       "TITLE": "ملخص",
-      "DELETE_WARNING": "سيتم حذف جهة الاتصال بـ <strong>%{primaryContactName}</strong>.",
-      "ATTRIBUTE_WARNING": "سيتم نسخ تفاصيل الاتصال بـ <strong>%{primaryContactName}</strong> إلى <strong>%{parentContactName}</strong>."
+      "DELETE_WARNING": "سيتم حذف جهة الاتصال <strong>%{primaryContactName}</strong>.",
+      "ATTRIBUTE_WARNING": "سيتم نسخ تفاصيل الاتصال من <strong>%{primaryContactName}</strong> إلى <strong>%{parentContactName}</strong>."
     },
     "SEARCH": {
       "ERROR": "رسالة_خطأ"
     },
     "FORM": {
-      "SUBMIT": " دمج جهة الاتصال",
+      "SUBMIT": " دمج جهات الاتصال",
       "CANCEL": "إلغاء",
       "CHILD_CONTACT": {
         "ERROR": "حدد جهة اتصال فرعية للدمج"
       },
       "SUCCESS_MESSAGE": "تم دمج جهة الاتصال بنجاح",
       "ERROR_MESSAGE": "تعذر دمج جهات الاتصال ، حاول مرة أخرى!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/contactFilters.json b/app/javascript/dashboard/i18n/locale/ar/contactFilters.json
index 085e87057af9f..248e250c70b11 100644
--- a/app/javascript/dashboard/i18n/locale/ar/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ar/contactFilters.json
@@ -2,18 +2,18 @@
   "CONTACTS_FILTER": {
     "TITLE": "تصفية جهات الاتصال",
     "SUBTITLE": "إضافة فلاتر أدناه واضغط على 'إرسال' لتصفية جهات الاتصال.",
-    "EDIT_CUSTOM_SEGMENT": "Edit Segment",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your segment.",
+    "EDIT_CUSTOM_SEGMENT": "تحرير الجزء",
+    "CUSTOM_VIEWS_SUBTITLE": "أضف أو أزل الفلاتر وقم بتحديث المجلد الخاص بك.",
     "ADD_NEW_FILTER": "إضافة فلتر",
     "CLEAR_ALL_FILTERS": "مسح جميع الفلاتر",
     "FILTER_DELETE_ERROR": "يجب ان يكون لديك فلتر واحد على الاقل",
     "SUBMIT_BUTTON_LABEL": "إرسال",
-    "UPDATE_BUTTON_LABEL": "Update Segment",
+    "UPDATE_BUTTON_LABEL": "تحديث الجزء",
     "CANCEL_BUTTON_LABEL": "إلغاء",
     "CLEAR_BUTTON_LABEL": "مسح الفلاتر",
     "EMPTY_VALUE_ERROR": "القيمة مطلوبة",
-    "SEGMENT_LABEL": "Segment Name",
-    "SEGMENT_QUERY_LABEL": "Segment Query",
+    "SEGMENT_LABEL": "اسم القسم",
+    "SEGMENT_QUERY_LABEL": "استعلام الجزء",
     "TOOLTIP_LABEL": "تصفية جهات الاتصال",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "و",
@@ -45,7 +45,7 @@
       "CREATED_AT": "تم إنشاؤها في",
       "LAST_ACTIVITY": "آخر نشاط",
       "REFERER_LINK": "رابط المرجع",
-      "BLOCKED": "Blocked"
+      "BLOCKED": "محظور"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "الفلاتر القياسية",
diff --git a/app/javascript/dashboard/i18n/locale/ar/conversation.json b/app/javascript/dashboard/i18n/locale/ar/conversation.json
index f205d54abc411..1db9e0fe4656a 100644
--- a/app/javascript/dashboard/i18n/locale/ar/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ar/conversation.json
@@ -11,10 +11,10 @@
     "NO_INBOX_1": "يبدو أنك لم تقم بإضافة أي صناديق بريدية بعد.",
     "NO_INBOX_2": " للبدء",
     "NO_INBOX_AGENT": "يبدو أنه لم يتم إسنادك لأي قنوات تواصل بعد. الرجاء التواصل مع المدير لإضافتك لصناديق الوارد الخاصة بقنوات التواصل",
-    "SEARCH_MESSAGES": "البحث عن رسائل في المحادثات",
+    "SEARCH_MESSAGES": "ابحث عن رسائل في المحادثات",
     "EMPTY_STATE": {
-      "CMD_BAR": "to open command menu",
-      "KEYBOARD_SHORTCUTS": "to view keyboard shortcuts"
+      "CMD_BAR": "لفتح قائمة الأوامر",
+      "KEYBOARD_SHORTCUTS": "لعرض اختصارات لوحة المفاتيح"
     },
     "SEARCH": {
       "TITLE": "البحث في الرسائل",
@@ -26,8 +26,8 @@
     "UNREAD_MESSAGES": "الرسائل الغير مقروءة",
     "UNREAD_MESSAGE": "رسالة غير مقروءة",
     "CLICK_HERE": "اضغط هنا",
-    "LOADING_INBOXES": "جار تحميل صناديق الوارد",
-    "LOADING_CONVERSATIONS": "جاري تحميل المحادثات",
+    "LOADING_INBOXES": "جار جلب صناديق الوارد",
+    "LOADING_CONVERSATIONS": "جاري جلب المحادثات",
     "CANNOT_REPLY": "لا يمكنك الرد بسبب",
     "24_HOURS_WINDOW": "قيد نافذة الـ 24 ساعة",
     "NOT_ASSIGNED_TO_YOU": "لم يتم تعيين هذه المحادثة لك. هل ترغب في تعيين هذه المحادثة لنفسك؟",
@@ -36,41 +36,41 @@
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "قيد نافذة الـ 24 ساعة",
     "REPLYING_TO": "أنت ترد على:",
     "REMOVE_SELECTION": "إزالة التحديد",
-    "DOWNLOAD": "تنزيل",
+    "DOWNLOAD": "تحميل",
     "UNKNOWN_FILE_TYPE": "ملف غير معروف",
     "SAVE_CONTACT": "حفظ",
-    "UPLOADING_ATTACHMENTS": "جاري تحميل المرفقات...",
-    "REPLIED_TO_STORY": "Replied to your story",
-    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
-    "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
-    "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
+    "UPLOADING_ATTACHMENTS": "جاري رفع المرفقات...",
+    "REPLIED_TO_STORY": "رد على قصتك",
+    "UNSUPPORTED_MESSAGE": "هذه الرسالة غير مدعومة.",
+    "UNSUPPORTED_MESSAGE_FACEBOOK": "هذه الرسالة غير مدعومة، يمكنك مشاهدة هذه الرسالة على تطبيق فيسبوك (Messenger).",
+    "UNSUPPORTED_MESSAGE_INSTAGRAM": "هذه الرسالة غير مدعومة، يمكنك عرض هذه الرسالة على تطبيق Instagram.",
     "SUCCESS_DELETE_MESSAGE": "تم حذف الرسالة بنجاح",
     "FAIL_DELETE_MESSSAGE": "تعذر حذف الرسالة! حاول مرة أخرى",
     "NO_RESPONSE": "لا توجد استجابة",
     "RATING_TITLE": "التقييم",
     "FEEDBACK_TITLE": "الملاحظات",
-    "REPLY_MESSAGE_NOT_FOUND": "Message not available",
+    "REPLY_MESSAGE_NOT_FOUND": "الرسالة غير متوفرة",
     "CARD": {
       "SHOW_LABELS": "إظهار السمات",
       "HIDE_LABELS": "إخفاء السمات"
     },
     "HEADER": {
-      "RESOLVE_ACTION": "إغلاق المحادثة",
+      "RESOLVE_ACTION": "حل المحادثة",
       "REOPEN_ACTION": "إعادة فتح",
       "OPEN_ACTION": "فتح",
       "OPEN": "المزيد",
       "CLOSE": "أغلق",
       "DETAILS": "التفاصيل",
-      "SNOOZED_UNTIL": "Snoozed until",
-      "SNOOZED_UNTIL_TOMORROW": "غفوة حتى الغد",
-      "SNOOZED_UNTIL_NEXT_WEEK": "غفوة حتى الأسبوع القادم",
-      "SNOOZED_UNTIL_NEXT_REPLY": "غفوة حتى الرد التالي",
+      "SNOOZED_UNTIL": "غفوة حتى",
+      "SNOOZED_UNTIL_TOMORROW": "تأجيل حتى الغد",
+      "SNOOZED_UNTIL_NEXT_WEEK": "تأجيل حتى الأسبوع القادم",
+      "SNOOZED_UNTIL_NEXT_REPLY": "تأجيل حتى الرد التالي",
       "SLA_STATUS": {
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
         "RT": "RT {status}",
-        "MISSED": "missed",
-        "DUE": "due"
+        "MISSED": "مفقود",
+        "DUE": "مستحق"
       }
     },
     "RESOLVE_DROPDOWN": {
@@ -80,29 +80,29 @@
         "TITLE": "تأجيل حتى",
         "NEXT_REPLY": "الرد القادم",
         "TOMORROW": "غداً",
-        "NEXT_WEEK": "الأسبوع المقبل"
+        "NEXT_WEEK": "الأسبوع القادم"
       }
     },
     "CUSTOM_SNOOZE": {
       "TITLE": "تأجيل حتى",
-      "APPLY": "غفوة",
+      "APPLY": "تأجيل",
       "CANCEL": "إلغاء"
     },
     "PRIORITY": {
       "TITLE": "الأولوية",
       "OPTIONS": {
-        "NONE": "لا شيء",
-        "URGENT": "Urgent",
-        "HIGH": "High",
-        "MEDIUM": "Medium",
-        "LOW": "Low"
+        "NONE": "لا يوجد",
+        "URGENT": "عاجل",
+        "HIGH": "عالية",
+        "MEDIUM": "متوسطة",
+        "LOW": "منخفضة"
       },
       "CHANGE_PRIORITY": {
-        "SELECT_PLACEHOLDER": "لا شيء",
-        "INPUT_PLACEHOLDER": "Select priority",
+        "SELECT_PLACEHOLDER": "لا يوجد",
+        "INPUT_PLACEHOLDER": "تحديد الأولوية",
         "NO_RESULTS": "لم يتم العثور على النتائج",
-        "SUCCESSFUL": "Changed priority of conversation id %{conversationId} to %{priority}",
-        "FAILED": "Couldn't change priority. Please try again."
+        "SUCCESSFUL": "تغيير أولوية معرف المحادثة %{conversationId} إلى %{priority}",
+        "FAILED": "تعذر تغيير الأولوية، الرجاء المحاولة مرة أخرى."
       }
     },
     "CARD_CONTEXT_MENU": {
@@ -111,18 +111,18 @@
       "MARK_AS_UNREAD": "وضع علامة كغير مقروء",
       "REOPEN": "إعادة فتح المحادثة",
       "SNOOZE": {
-        "TITLE": "غفوة",
+        "TITLE": "تأجيل",
         "NEXT_REPLY": "حتى الرد القادم",
         "TOMORROW": "حتى الغد",
         "NEXT_WEEK": "حتى الأسبوع القادم"
       },
       "ASSIGN_AGENT": "تعيين وكيل",
       "ASSIGN_LABEL": "إضافة وسم",
-      "AGENTS_LOADING": "جاري تحميل الوكلاء...",
+      "AGENTS_LOADING": "جاري جلب الوكلاء...",
       "ASSIGN_TEAM": "تعيين فريق",
       "API": {
         "AGENT_ASSIGNMENT": {
-          "SUCCESFUL": "معرف المحادثة %{conversationId} تم تعيينه ل \"%{agentName}\"",
+          "SUCCESFUL": "معرف المحادثة %{conversationId} تم تعيينه لـ \"%{agentName}\"",
           "FAILED": "تعذر تعيين الوكيل. الرجاء المحاولة مرة أخرى."
         },
         "LABEL_ASSIGNMENT": {
@@ -137,12 +137,13 @@
     },
     "FOOTER": {
       "MESSAGE_SIGN_TOOLTIP": "توقيع الرسالة",
-      "ENABLE_SIGN_TOOLTIP": "تمكين التوقيع",
+      "ENABLE_SIGN_TOOLTIP": "تفعيل التوقيع",
       "DISABLE_SIGN_TOOLTIP": "تعطيل التوقيع",
-      "MSG_INPUT": "زر Shift + Enter لإضافة سطر جديد. ابدأ بزر / للاختيار من الردود السريعة.",
-      "PRIVATE_MSG_INPUT": "زر Shift + Enter لإضافة سطر جديد. سيكون هذا مرئياً للموظفين فقط",
+      "MSG_INPUT": "زر Shift + Enter لإضافة سطر جديد. ابدأ بزر / للاختيار من الردود الجاهزة.",
+      "PRIVATE_MSG_INPUT": "زر Shift + Enter لإضافة سطر جديد. سيكون هذا مرئياً للوكلاء فقط",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "لم يتم تكوين توقيع الرسالة، الرجاء تكوينه في إعدادات الملف الشخصي.",
-      "CLICK_HERE": "انقر هنا للتحديث"
+      "CLICK_HERE": "انقر هنا للتحديث",
+      "WHATSAPP_TEMPLATES": "قوالب Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "إضافة رد",
@@ -150,8 +151,8 @@
       "SEND": "إرسال",
       "CREATE": "إضافة ملاحظة",
       "INSERT_READ_MORE": "اقرأ المزيد",
-      "DISMISS_REPLY": "Dismiss reply",
-      "REPLYING_TO": "Replying to:",
+      "DISMISS_REPLY": "استبعاد الرد",
+      "REPLYING_TO": "الرد على:",
       "TIP_FORMAT_ICON": "عرض محرر النصوص",
       "TIP_EMOJI_ICON": "إظهار قائمة الرموز التعبيرية",
       "TIP_ATTACH_ICON": "إرفاق الملفات",
@@ -163,16 +164,16 @@
       "STOP_AUDIO_RECORDING": "إيقاف التسجيل الصوتي",
       "": "",
       "EMAIL_HEAD": {
-        "TO": "TO",
+        "TO": "إلى",
         "ADD_BCC": "إضافة bcc",
         "CC": {
           "LABEL": "CC",
-          "PLACEHOLDER": "البريد الإلكتروني مفصولة بفاصلة",
+          "PLACEHOLDER": "عناوين البريد الإلكتروني مفصولة بفاصلة",
           "ERROR": "الرجاء إدخال عنوان بريد إلكتروني صحيح"
         },
         "BCC": {
           "LABEL": "BCC",
-          "PLACEHOLDER": "البريد الإلكتروني مفصولة بفاصلة",
+          "PLACEHOLDER": "عناوين البريد الإلكتروني مفصولة بفاصلة",
           "ERROR": "الرجاء إدخال عنوان بريد إلكتروني صحيح"
         }
       },
@@ -185,15 +186,15 @@
         }
       }
     },
-    "VISIBLE_TO_AGENTS": "ملاحظة خاصة: مرئية فقط لأعضاء فريق العمل والموظفين",
+    "VISIBLE_TO_AGENTS": "ملاحظة خاصة: مرئية فقط لك ولأعضاء فريقك",
     "CHANGE_STATUS": "تم تغيير حالة المحادثة",
     "CHANGE_STATUS_FAILED": "فشل تغيير حالة المحادثة",
-    "CHANGE_AGENT": "تم تغيير الموظف الذي تم إحالة المحادثة إليه",
+    "CHANGE_AGENT": "تم تغيير الوكيل الذي تم إحالة المحادثة إليه",
     "CHANGE_AGENT_FAILED": "فشل تغيير المحال إليه",
     "ASSIGN_LABEL_SUCCESFUL": "تم تعيين الوسم بنجاح",
     "ASSIGN_LABEL_FAILED": "فشل تعيين الوسم",
     "CHANGE_TEAM": "تم تغيير فريق المحادثة",
-    "FILE_SIZE_LIMIT": "الملف يتجاوز حد المرفق {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} ميغابايت",
+    "FILE_SIZE_LIMIT": "حجم الملف يتجاوز حد الاقصى وهو {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE}",
     "MESSAGE_ERROR": "غير قادر على إرسال هذه الرسالة، الرجاء المحاولة مرة أخرى لاحقاً",
     "SENT_BY": "أرسلت بواسطة:",
     "BOT": "رد آلي",
@@ -206,15 +207,15 @@
     },
     "CONTEXT_MENU": {
       "COPY": "نسخ",
-      "REPLY_TO": "Reply to this message",
+      "REPLY_TO": "الرد على هذه الرسالة",
       "DELETE": "حذف",
-      "CREATE_A_CANNED_RESPONSE": "إضافة إلى الردود السريعة",
+      "CREATE_A_CANNED_RESPONSE": "إضافة إلى الردود الجاهزة",
       "TRANSLATE": "ترجم",
-      "COPY_PERMALINK": "Copy link to the message",
-      "LINK_COPIED": "Message URL copied to the clipboard",
+      "COPY_PERMALINK": "نسخ الرابط إلى الرسالة",
+      "LINK_COPIED": "تم نسخ عنوان URL للرسالة إلى الحافظة",
       "DELETE_CONFIRMATION": {
-        "TITLE": "Are you sure you want to delete this message?",
-        "MESSAGE": "You cannot undo this action",
+        "TITLE": "هل أنت متأكد من أنك تريد حذف هذه الرسالة؟",
+        "MESSAGE": "لا يمكنك التراجع عن هذا الإجراء",
         "DELETE": "حذف",
         "CANCEL": "إلغاء"
       }
@@ -229,7 +230,7 @@
     "SEND_EMAIL_ERROR": "حدث خطأ، الرجاء المحاولة مرة أخرى",
     "FORM": {
       "SEND_TO_CONTACT": "إرسال نص المحادثة إلى العميل",
-      "SEND_TO_AGENT": "إرسال نص المحادثة إلى ممثل خدمة العملاء المعين",
+      "SEND_TO_AGENT": "إرسال نص المحادثة إلى وكيل خدمة العملاء المعين",
       "SEND_TO_OTHER_EMAIL_ADDRESS": "إرسال النص إلى عنوان بريد إلكتروني آخر",
       "EMAIL": {
         "PLACEHOLDER": "أدخل عنوان بريد إلكتروني",
@@ -243,17 +244,17 @@
     "READ_LATEST_UPDATES": "اطلع على آخر التحديثات",
     "ALL_CONVERSATION": {
       "TITLE": "جميع محادثاتك في مكان واحد",
-      "DESCRIPTION": "عرض جميع المحادثات من عملائك في لوحة تحكم واحدة. يمكنك تصفية المحادثات بحسب قناة الواردة والتسمية والحالة."
+      "DESCRIPTION": "عرض جميع المحادثات من عملائك في لوحة تحكم واحدة. يمكنك تصفية المحادثات حسب القناة الواردة والتسمية والحالة."
     },
     "TEAM_MEMBERS": {
       "TITLE": "قم بدعوة أعضاء فريقك",
-      "DESCRIPTION": "عندما تصبح جاهز للتخاطب مع عميلك، احضر زملائك في الفريق لمساعدتك. يمكنك دعوة زملائك في الفريق بإضافة عنوان البريد الإلكتروني الخاص بهم إلى قائمة الوكيل.",
+      "DESCRIPTION": "عندما تصبح جاهز للتخاطب مع عميلك، احضر زملائك في الفريق لمساعدتك. يمكنك دعوة زملائك في الفريق بإضافة عنوان البريد الإلكتروني الخاص بهم إلى قائمة الوكلاء.",
       "NEW_LINK": "انقر هنا لدعوة عضو في الفريق"
     },
     "INBOXES": {
-      "TITLE": "ربط صندوق الوارد",
+      "TITLE": "ربط الصناديق الواردة",
       "DESCRIPTION": "قم بتوصيل مختلف القنوات التي من خلالها يتحدث عملاؤك إليك. يمكن أن تكون محادثة مباشرة على موقع الويب أو صفحة فيسبوك أو تويتر أو حتى رقم WhatsApp الخاص بك.",
-      "NEW_LINK": "انقر هنا لإنشاء علبة الوارد"
+      "NEW_LINK": "انقر هنا لإنشاء صندوق وارد"
     },
     "LABELS": {
       "TITLE": "تنظيم المحادثات مع التسميات",
@@ -264,7 +265,7 @@
   "CONVERSATION_SIDEBAR": {
     "ASSIGNEE_LABEL": "الوكيل المكلف",
     "SELF_ASSIGN": "إسناد لي",
-    "TEAM_LABEL": "العضو المكلف",
+    "TEAM_LABEL": "الفريق المكلف",
     "SELECT": {
       "PLACEHOLDER": "لا شيء"
     },
@@ -316,7 +317,7 @@
     "REMANING_PARTICIPANT_TEXT": "+%{count} أخرى",
     "TOTAL_PARTICIPANTS_TEXT": "%{count} شخص مشارك.",
     "TOTAL_PARTICIPANT_TEXT": "%{count} شخص مشارك.",
-    "NO_PARTICIPANTS_TEXT": "لا أحد يشارك !.",
+    "NO_PARTICIPANTS_TEXT": "لا أحد يشارك!",
     "WATCH_CONVERSATION": "الانضمام إلى المحادثة",
     "YOU_ARE_WATCHING": "أنت مشترك",
     "API": {
diff --git a/app/javascript/dashboard/i18n/locale/ar/datePicker.json b/app/javascript/dashboard/i18n/locale/ar/datePicker.json
index 1fa696c1f18a4..bef157e73b9df 100644
--- a/app/javascript/dashboard/i18n/locale/ar/datePicker.json
+++ b/app/javascript/dashboard/i18n/locale/ar/datePicker.json
@@ -1,19 +1,19 @@
 {
   "DATE_PICKER": {
     "APPLY_BUTTON": "تطبيق",
-    "CLEAR_BUTTON": "Clear",
+    "CLEAR_BUTTON": "مسح",
     "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
+      "START": "تاريخ البدء",
+      "END": "تاريخ الانتهاء"
     },
     "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
+      "TITLE": "نطاق التاريخ",
       "LAST_7_DAYS": "آخر 7 أيام",
       "LAST_30_DAYS": "آخر 30 يوماً",
       "LAST_3_MONTHS": "آخر 3 أشهر",
       "LAST_6_MONTHS": "آخر 6 أشهر",
       "LAST_YEAR": "العام الماضي",
-      "CUSTOM_RANGE": "تحديد نطاق المدة"
+      "CUSTOM_RANGE": "تحديد نطاق التاريخ"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/general.json b/app/javascript/dashboard/i18n/locale/ar/general.json
index aed1f077ab41e..7adff9c7bf2b7 100644
--- a/app/javascript/dashboard/i18n/locale/ar/general.json
+++ b/app/javascript/dashboard/i18n/locale/ar/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "عرض{firstIndex}-{lastIndex} من {totalCount} إجماليي العناصر"
+    "SHOWING_RESULTS": "عرض{firstIndex}-{lastIndex} من {totalCount} إجمالي العناصر",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "بحث",
+      "EMPTY_STATE": "لم يتم العثور على النتائج"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/generalSettings.json b/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
index 14d2252f55a49..c82f0b1dcc9e4 100644
--- a/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
@@ -9,7 +9,7 @@
       "SUCCESS": "تم تحديث إعدادات الحساب بنجاح"
     },
     "FORM": {
-      "ERROR": "الرجاء إصلاح الأخطاء في الفورم",
+      "ERROR": "الرجاء إصلاح الأخطاء في النموذج",
       "GENERAL_SECTION": {
         "TITLE": "الإعدادات العامة",
         "NOTE": ""
@@ -39,9 +39,9 @@
         "ERROR": ""
       },
       "AUTO_RESOLVE_DURATION": {
-        "LABEL": "عدد الأيام بعد التذكرة التي يجب أن يحل تلقائياً إذا لم يكن هناك أي نشاط",
+        "LABEL": "عدد الأيام للتذكرة التي يجب أن يتم حلها تلقائياً إذا لم يكن هناك أي نشاط",
         "PLACEHOLDER": "30",
-        "ERROR": "الرجاء إدخال مدة حل تلقائي صالحة (حد أدنى 1 يوم والحد الأقصى 999 يوما)"
+        "ERROR": "الرجاء إدخال مدة صالحة للحل تلقائي (حد أدنى 1 يوم والحد الأقصى 999 يوما)"
       },
       "FEATURES": {
         "INBOUND_EMAIL_ENABLED": "الاستمرار في المحادثة عبر رسائل البريد الإلكتروني مفعّل لحسابك.",
@@ -50,8 +50,8 @@
     },
     "UPDATE_CHATWOOT": "يتوفر تحديث %{latestChatwootVersion} لـ Chatwoot. الرجاء التحديث.",
     "LEARN_MORE": "اعرف المزيد",
-    "PAYMENT_PENDING": "Your payment is pending. Please update your payment information to continue using Chatwoot",
-    "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
+    "PAYMENT_PENDING": "الدفعة الخاصة بك معلقة. الرجاء تحديث معلومات الدفع الخاصة بك للاستمرار في استخدام Chatwoot",
+    "LIMITS_UPGRADE": "لقد تجاوز حسابك حدود الاستخدام، يرجى ترقية خطتك للاستمرار في استخدام Chatwoot",
     "OPEN_BILLING": "فتح الفواتير"
   },
   "FORMS": {
@@ -64,16 +64,16 @@
   },
   "NOTIFICATIONS_PAGE": {
     "HEADER": "الإشعارات",
-    "MARK_ALL_DONE": "وضع علامة على جميع المنجز",
+    "MARK_ALL_DONE": "وضع علامة منجز على الجميع",
     "DELETE_TITLE": "تم الحذف",
     "UNREAD_NOTIFICATION": {
       "TITLE": "إشعارات غير مقروءة",
       "ALL_NOTIFICATIONS": "عرض جميع الإشعارات",
-      "LOADING_UNREAD_MESSAGE": "تحميل الإشعارات الغير مقروءة...",
+      "LOADING_UNREAD_MESSAGE": "جار جلب الإشعارات الغير مقروءة...",
       "EMPTY_MESSAGE": "ليس لديك إشعارات غير مقروءة"
     },
     "LIST": {
-      "LOADING_MESSAGE": "جاري تحميل الإشعارات...",
+      "LOADING_MESSAGE": "جاري جلب الإشعارات...",
       "404": "لا يوجد إشعارات",
       "TABLE_HEADER": [
         "الاسم",
@@ -88,14 +88,16 @@
       "assigned_conversation_new_message": "رسالة جديدة",
       "participating_conversation_new_message": "رسالة جديدة",
       "conversation_mention": "إشارة",
-      "sla_missed_first_response": "SLA Missed",
-      "sla_missed_next_response": "SLA Missed",
-      "sla_missed_resolution": "SLA Missed"
+      "sla_missed_first_response": "فشل اتفاقية مستوى الخدمة",
+      "sla_missed_next_response": "فشل اتفاقية مستوى الخدمة",
+      "sla_missed_resolution": "فشل اتفاقية مستوى الخدمة"
     }
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "غير متصل"
+      "OFFLINE": "غير متصل",
+      "RECONNECTING": "جاري إعادة الاتصال...",
+      "RECONNECT_SUCCESS": "تمت إعادة الاتصال"
     },
     "BUTTON": {
       "REFRESH": "تحديث"
@@ -107,44 +109,44 @@
       "GENERAL": "عام",
       "REPORTS": "التقارير",
       "CONVERSATION": "المحادثات",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "الإجراءات الشاملة",
       "CHANGE_ASSIGNEE": "تغيير المحال إليه",
       "CHANGE_PRIORITY": "تغيير الأولوية",
       "CHANGE_TEAM": "تغيير الفريق",
       "SNOOZE_CONVERSATION": "تأجيل المحادثة",
-      "ADD_LABEL": "إضافة تسمية إلى المحادثة",
-      "REMOVE_LABEL": "إزالة التسمية من المحادثة",
+      "ADD_LABEL": "إضافة وسم إلى المحادثة",
+      "REMOVE_LABEL": "إزالة الوسم من المحادثة",
       "SETTINGS": "الإعدادات",
-      "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "مظهر",
-      "SNOOZE_NOTIFICATION": "تأجيل التنبيهات"
+      "AI_ASSIST": "مساعدة AI",
+      "APPEARANCE": "المظهر",
+      "SNOOZE_NOTIFICATION": "تأجيل الإشعارات"
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "الذهاب إلى لوحة المحادثة",
       "GO_TO_CONTACTS_DASHBOARD": "الذهاب إلى لوحة جهات الاتصال",
-      "GO_TO_REPORTS_OVERVIEW": "الذهاب إلى نظرة التقارير",
+      "GO_TO_REPORTS_OVERVIEW": "الذهاب إلى نظرة التقارير العامة",
       "GO_TO_CONVERSATION_REPORTS": "الذهاب إلى تقارير المحادثات",
       "GO_TO_AGENT_REPORTS": "الذهاب إلى تقارير الوكيل",
-      "GO_TO_LABEL_REPORTS": "انتقل إلى تقارير التسمية",
+      "GO_TO_LABEL_REPORTS": "انتقل إلى تقارير الوسم",
       "GO_TO_INBOX_REPORTS": "الذهاب إلى تقارير صندوق الوارد",
       "GO_TO_TEAM_REPORTS": "الذهاب إلى تقارير الفريق",
-      "GO_TO_SETTINGS_AGENTS": "الذهاب إلى تقارير الوكيل",
+      "GO_TO_SETTINGS_AGENTS": "الذهاب إلى إعدادات الوكيل",
       "GO_TO_SETTINGS_TEAMS": "الذهاب إلى إعدادات الفريق",
-      "GO_TO_SETTINGS_INBOXES": "الذهاب إلى إعدادات علبة الوارد",
-      "GO_TO_SETTINGS_LABELS": "الذهاب إلى إعدادات التسمية",
-      "GO_TO_SETTINGS_CANNED_RESPONSES": "انتقل إلى إعدادات الاستجابة المسبقة",
+      "GO_TO_SETTINGS_INBOXES": "الذهاب إلى إعدادات الصندوق الوارد",
+      "GO_TO_SETTINGS_LABELS": "الذهاب إلى إعدادات الوسم",
+      "GO_TO_SETTINGS_CANNED_RESPONSES": "انتقل إلى إعدادات الردود الجاهزة",
       "GO_TO_SETTINGS_APPLICATIONS": "الذهاب إلى إعدادات التطبيق",
       "GO_TO_SETTINGS_ACCOUNT": "الذهاب إلى إعدادات الحساب",
       "GO_TO_SETTINGS_PROFILE": "الذهاب إلى إعدادات الملف الشخصي",
       "GO_TO_NOTIFICATIONS": "الذهاب إلى الإشعارات",
-      "ADD_LABELS_TO_CONVERSATION": "إضافة تسمية إلى المحادثة",
+      "ADD_LABELS_TO_CONVERSATION": "إضافة وسم إلى المحادثة",
       "ASSIGN_AN_AGENT": "تعيين وكيل",
-      "AI_ASSIST": "AI Assist",
+      "AI_ASSIST": "مساعدة AI",
       "ASSIGN_PRIORITY": "تعيين الأولوية",
       "ASSIGN_A_TEAM": "تعيين فريق",
       "MUTE_CONVERSATION": "كتم المحادثة",
       "UNMUTE_CONVERSATION": "إلغاء كتم المحادثة",
-      "REMOVE_LABEL_FROM_CONVERSATION": "إزالة التسمية من المحادثة",
+      "REMOVE_LABEL_FROM_CONVERSATION": "إزالة الوسم من المحادثة",
       "REOPEN_CONVERSATION": "إعادة فتح المحادثة",
       "RESOLVE_CONVERSATION": "حل المحادثة",
       "SEND_TRANSCRIPT": "إرسال نسخة نصية للبريد الإلكتروني",
@@ -154,16 +156,16 @@
       "UNTIL_TOMORROW": "حتى الغد",
       "UNTIL_NEXT_MONTH": "حتي الشهر القادم",
       "AN_HOUR_FROM_NOW": "حتي ساعة من الأن",
-      "CUSTOM": "مخصص...",
+      "UNTIL_CUSTOM_TIME": "مخصص...",
       "CHANGE_APPEARANCE": "تغيير المظهر",
-      "LIGHT_MODE": "Light",
+      "LIGHT_MODE": "فاتح",
       "DARK_MODE": "مظلم",
-      "SYSTEM_MODE": "نظام",
-      "SNOOZE_NOTIFICATION": "تأجيل التنبيهات"
+      "SYSTEM_MODE": "النظام",
+      "SNOOZE_NOTIFICATION": "تأجيل الإشعارات"
     }
   },
   "DASHBOARD_APPS": {
-    "LOADING_MESSAGE": "تحميل تطبيق لوحة التحكم..."
+    "LOADING_MESSAGE": "جاري جلب تطبيق لوحة التحكم..."
   },
   "COMMON": {
     "OR": "أو",
diff --git a/app/javascript/dashboard/i18n/locale/ar/helpCenter.json b/app/javascript/dashboard/i18n/locale/ar/helpCenter.json
index 234af4b46dcbe..55a4200129009 100644
--- a/app/javascript/dashboard/i18n/locale/ar/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ar/helpCenter.json
@@ -18,10 +18,10 @@
         "ARCHIVED": "المقالات المؤرشفة"
       },
       "LOCALE_SELECT": {
-        "TITLE": "Select locale",
-        "PLACEHOLDER": "Select locale",
-        "NO_RESULT": "No locale found",
-        "SEARCH_PLACEHOLDER": "Search locale"
+        "TITLE": "حدد اللغة",
+        "PLACEHOLDER": "حدد اللغة",
+        "NO_RESULT": "لا توجد لغات",
+        "SEARCH_PLACEHOLDER": "البحث عن اللغة"
       }
     },
     "EDIT_HEADER": {
@@ -39,11 +39,11 @@
       "IMAGE_UPLOAD": {
         "TITLE": "رفع صورة",
         "UPLOADING": "جاري الرفع...",
-        "SUCCESS": "Image uploaded successfully",
-        "ERROR": "Error while uploading image",
-        "ERROR_FILE_SIZE": "Image size should be less than {size}MB",
-        "ERROR_FILE_FORMAT": "Image format should be jpg, jpeg or png",
-        "ERROR_FILE_DIMENSIONS": "Image dimensions should be less than 2000 x 2000"
+        "SUCCESS": "تم رفع الصورة بنجاح",
+        "ERROR": "حدث خطأ أثناء رفع الصورة",
+        "ERROR_FILE_SIZE": "حجم الصورة يجب أن يكون أقل من {size}MB",
+        "ERROR_FILE_FORMAT": "تنسيق الصورة يجب أن يكون jpg أو jpeg أو png",
+        "ERROR_FILE_DIMENSIONS": "ينبغي أن تكون أبعاد الصورة أقل من 2000 × 2000"
       }
     },
     "ARTICLE_SETTINGS": {
@@ -149,102 +149,102 @@
           "NO": "No, keep portal",
           "API": {
             "DELETE_SUCCESS": "Portal deleted successfully",
-            "DELETE_ERROR": "Error while deleting portal"
+            "DELETE_ERROR": "حدث خطأ أثناء حذف البوابة"
           }
         }
       },
       "EDIT": {
-        "HEADER_TEXT": "Edit portal",
+        "HEADER_TEXT": "تعديل البوابة",
         "TABS": {
           "BASIC_SETTINGS": {
-            "TITLE": "Basic information"
+            "TITLE": "المعلومات الأساسية"
           },
           "CUSTOMIZATION_SETTINGS": {
-            "TITLE": "Portal customization"
+            "TITLE": "تخصيص البوابة"
           },
           "CATEGORY_SETTINGS": {
-            "TITLE": "Categories"
+            "TITLE": "الفئات"
           },
           "LOCALE_SETTINGS": {
-            "TITLE": "Locales"
+            "TITLE": "اللغات"
           }
         },
         "CATEGORIES": {
-          "TITLE": "Categories in",
-          "NEW_CATEGORY": "New category",
+          "TITLE": "الفئات في",
+          "NEW_CATEGORY": "فئة جديدة",
           "TABLE": {
             "NAME": "الاسم",
             "DESCRIPTION": "الوصف",
-            "LOCALE": "Locale",
-            "ARTICLE_COUNT": "No. of articles",
+            "LOCALE": "اللغة",
+            "ARTICLE_COUNT": "عدد المقالات",
             "ACTION_BUTTON": {
-              "EDIT": "Edit category",
-              "DELETE": "Delete category"
+              "EDIT": "تعديل الفئة",
+              "DELETE": "حذف الفئة"
             },
-            "EMPTY_TEXT": "لم يتم العثور على فئات"
+            "EMPTY_TEXT": "لم يتم العثور على الفئات"
           }
         },
         "EDIT_BASIC_INFO": {
-          "BUTTON_TEXT": "Update basic settings"
+          "BUTTON_TEXT": "تحديث الإعدادات الأساسية"
         }
       },
       "ADD": {
         "CREATE_FLOW": [
           {
-            "title": "Help center information",
+            "title": "معلومات مركز المساعدة",
             "route": "new_portal_information",
-            "body": "Basic information about portal",
-            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+            "body": "معلومات أساسية عن البوابة",
+            "CREATE_BASIC_SETTING_BUTTON": "إنشاء إعدادات البوابة الأساسية"
           },
           {
-            "title": "Help center customization",
+            "title": "تخصيص مركز المساعدة",
             "route": "portal_customization",
-            "body": "Customize portal",
-            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+            "body": "تخصيص البوابة",
+            "UPDATE_PORTAL_BUTTON": "تحديث إعدادات البوابة"
           },
           {
-            "title": "Voila! 🎉",
+            "title": "تم! 🎉",
             "route": "portal_finish",
-            "body": "You're all set!",
+            "body": "أنت جاهز!",
             "FINISH": "إنهاء"
           }
         ],
         "CREATE_FLOW_PAGE": {
           "BACK_BUTTON": "العودة",
           "BASIC_SETTINGS_PAGE": {
-            "HEADER": "Create Portal",
-            "TITLE": "Help center information",
-            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+            "HEADER": "إنشاء بوابة",
+            "TITLE": "معلومات مركز المساعدة",
+            "CREATE_BASIC_SETTING_BUTTON": "إنشاء إعدادات البوابة الأساسية"
           },
           "CUSTOMIZATION_PAGE": {
-            "HEADER": "Portal customisation",
-            "TITLE": "Help center customization",
-            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+            "HEADER": "تخصيص البوابة",
+            "TITLE": "تخصيص مركز المساعدة",
+            "UPDATE_PORTAL_BUTTON": "تحديث إعدادات البوابة"
           },
           "FINISH_PAGE": {
-            "TITLE": "Voila!🎉 You're all set up!",
-            "MESSAGE": "You can now see this created portal on your all portals page.",
-            "FINISH": "Go to all portals page"
+            "TITLE": "تم!🎉 أنت جاهز!",
+            "MESSAGE": "يمكنك الآن رؤية هذه البوابة في صفحة جميع البوابات.",
+            "FINISH": "الذهاب إلى صفحة جميع البوابات"
           }
         },
         "LOGO": {
-          "LABEL": "Logo",
-          "UPLOAD_BUTTON": "Upload logo",
-          "HELP_TEXT": "This logo will be displayed on the portal header.",
-          "IMAGE_UPLOAD_SUCCESS": "Logo uploaded successfully",
-          "IMAGE_UPLOAD_ERROR": "Logo deleted successfully",
-          "IMAGE_DELETE_ERROR": "Error while deleting logo"
+          "LABEL": "الشعار",
+          "UPLOAD_BUTTON": "رفع الشعار",
+          "HELP_TEXT": "سيتم عرض هذا الشعار على رأس البوابة.",
+          "IMAGE_UPLOAD_SUCCESS": "تم رفع الشعار بنجاح",
+          "IMAGE_UPLOAD_ERROR": "تم حذف الشعار بنجاح",
+          "IMAGE_DELETE_ERROR": "حدث خطأ أثناء حذف الشعار"
         },
         "NAME": {
           "LABEL": "الاسم",
-          "PLACEHOLDER": "Portal name",
-          "HELP_TEXT": "الاسم سيتم مشاهدتة من جميع من جميع زوار الصفحة.",
+          "PLACEHOLDER": "اسم البوابة",
+          "HELP_TEXT": "الاسم سيتم مشاهدتة من جميع زوار الصفحة.",
           "ERROR": "الاسم مطلوب"
         },
         "SLUG": {
-          "LABEL": "وصف مختصر",
-          "PLACEHOLDER": "وصف مختصر لرابط البوابة",
-          "ERROR": "الوصف مطلوب"
+          "LABEL": "الإسم المختصر",
+          "PLACEHOLDER": "الإسم المختصر لرابط البوابة",
+          "ERROR": "الإسم المختصر مطلوب"
         },
         "DOMAIN": {
           "LABEL": "نطاق مخصص",
@@ -352,7 +352,7 @@
       "MODAL": {
         "CONFIRM": {
           "TITLE": "تأكيد الحذف",
-          "MESSAGE": "Are you sure to delete the article?",
+          "MESSAGE": "هل أنت متأكد من حذف المقالة؟",
           "YES": "نعم، احذف",
           "NO": "لا، احتفظ به"
         }
@@ -456,7 +456,7 @@
       "BACK_RESULTS": "Back to results"
     },
     "UPGRADE_PAGE": {
-      "TITLE": "Help Center",
+      "TITLE": "مركز المساعدة",
       "DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Upgrade your subscription to enable this feature.",
       "SELF_HOSTED_DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Please contact your administrator to enable this feature.",
       "BUTTON": {
@@ -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/ar/inbox.json b/app/javascript/dashboard/i18n/locale/ar/inbox.json
index c4d2b817a2ef1..6fab5169243f6 100644
--- a/app/javascript/dashboard/i18n/locale/ar/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/ar/inbox.json
@@ -1,64 +1,64 @@
 {
   "INBOX": {
     "LIST": {
-      "TITLE": "صندوق الوارد",
-      "DISPLAY_DROPDOWN": "Display",
-      "LOADING": "Fetching notifications",
-      "404": "There are no active notifications in this group.",
-      "NO_NOTIFICATIONS": "No notifications",
-      "NOTE": "Notifications from all subscribed inboxes",
-      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
-      "SNOOZED_UNTIL": "Snoozed until",
-      "SNOOZED_UNTIL_TOMORROW": "غفوة حتى الغد",
-      "SNOOZED_UNTIL_NEXT_WEEK": "غفوة حتى الأسبوع القادم"
+      "TITLE": "الصندوق الوارد",
+      "DISPLAY_DROPDOWN": "عرض",
+      "LOADING": "جار جلب الإشعارات",
+      "404": "لا توجد إشعارات نشطة في هذه المجموعة.",
+      "NO_NOTIFICATIONS": "لا توجد إشعارات",
+      "NOTE": "الإشعارات من جميع صناديق الوارد المشترك بها",
+      "NO_MESSAGES_AVAILABLE": "عذرًا! لا يمكن جلب الرسائل",
+      "SNOOZED_UNTIL": "تأجيل حتى",
+      "SNOOZED_UNTIL_TOMORROW": "تأجيل حتى الغد",
+      "SNOOZED_UNTIL_NEXT_WEEK": "تأجيل حتى الأسبوع القادم"
     },
     "ACTION_HEADER": {
-      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification",
+      "SNOOZE": "تأجيل الإشعار",
+      "DELETE": "حذف الإشعار",
       "BACK": "العودة"
     },
     "TYPES": {
-      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
-      "CONVERSATION_CREATION": "New conversation created",
-      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
-      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
-      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
-      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
-      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
+      "CONVERSATION_MENTION": "تم ذكرك في محادثة",
+      "CONVERSATION_CREATION": "تم إنشاء محادثة جديدة",
+      "CONVERSATION_ASSIGNMENT": "تم تعيين محادثة لك",
+      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "رسالة جديدة في محادثة معينة لك",
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "رسالة جديدة في محادثة تشارك فيها",
+      "SLA_MISSED_FIRST_RESPONSE": "تم تجاوز الهدف الأول للرد للمحادثة",
+      "SLA_MISSED_NEXT_RESPONSE": "تم تجاوز الهدف التالي للرد للمحادثة",
+      "SLA_MISSED_RESOLUTION": "تم تجاوز الهدف النهائي للحل للمحادثة"
     },
     "MENU_ITEM": {
-      "MARK_AS_READ": "Mark as read",
-      "MARK_AS_UNREAD": "وضع علامة كغير مقروء",
-      "SNOOZE": "غفوة",
+      "MARK_AS_READ": "تحديد كمقروء",
+      "MARK_AS_UNREAD": "تحديد كغير مقروء",
+      "SNOOZE": "تأجيل",
       "DELETE": "حذف",
       "MARK_ALL_READ": "تحديد الكل كمقروء",
-      "DELETE_ALL": "Delete all",
-      "DELETE_ALL_READ": "Delete all read"
+      "DELETE_ALL": "حذف الكل",
+      "DELETE_ALL_READ": "حذف كل المقروء"
     },
     "DISPLAY_MENU": {
-      "SORT": "Sort",
-      "DISPLAY": "Display :",
+      "SORT": "فرز",
+      "DISPLAY": "عرض :",
       "SORT_OPTIONS": {
-        "NEWEST": "Newest",
-        "OLDEST": "Oldest",
+        "NEWEST": "الأحدث",
+        "OLDEST": "الأقدم",
         "PRIORITY": "الأولوية"
       },
       "DISPLAY_OPTIONS": {
-        "SNOOZED": "غفوة",
-        "READ": "قرائة",
+        "SNOOZED": "مؤجل",
+        "READ": "قراءة",
         "LABELS": "الوسوم",
-        "CONVERSATION_ID": "Conversation ID"
+        "CONVERSATION_ID": "معرف المحادثة"
       }
     },
     "ALERTS": {
-      "MARK_AS_READ": "Notification marked as read",
-      "MARK_AS_UNREAD": "Notification marked as unread",
-      "SNOOZE": "Notification snoozed",
-      "DELETE": "Notification deleted",
-      "MARK_ALL_READ": "All notifications marked as read",
-      "DELETE_ALL": "All notifications deleted",
-      "DELETE_ALL_READ": "All read notifications deleted"
+      "MARK_AS_READ": "تم وضع علامة الإشعار كمقروء",
+      "MARK_AS_UNREAD": "تم وضع علامة الإشعار كغير مقروء",
+      "SNOOZE": "تم تأجيل الإشعار",
+      "DELETE": "تم حذف الإشعار",
+      "MARK_ALL_READ": "تم تحديد جميع الإشعارات كمقروءة",
+      "DELETE_ALL": "تم حذف كل الإشعارات",
+      "DELETE_ALL_READ": "تم حذف كل الإشعارات المقروءة"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json
index 23c977988670c..a953ac2a8f0f4 100644
--- a/app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "قنوات التواصل",
     "SIDEBAR_TXT": "<p><b>قنوات التواصل</b></p> <p> عند ربطك لموقع ويب أو صفحة فيسبوك إلى Chatwoot، يتم تسميتها <b>قناة تواصل</b>. يمكنك إنشاء قنوات تواصل غير محدودة من مختلف الأنواع في حساب Chatwoot الخاص بك. </p><p> انقر فوق <b>إضافة قناة تواصل</b> لربط موقع الويب أو صفحة فيسبوك الخاصة بك. </p><p> من لوحة الإدارة، يمكنك رؤية جميع المحادثات من جميع صناديق الوارد الخاصة بك والرد عليها من مكان موّحد عبر الضغط على علامة التبويب \"المحادثات\". </p><p> يمكنك أيضًا مشاهدة المحادثات الخاصة بصندوق وارد معين بالنقر على اسم صندوق الوارد على الجزء الجانبي من لوحة الإدارة. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "لا توجد صناديق وارد لقنوات تواصل مرتبطة بهذا الحساب."
     },
@@ -17,9 +19,9 @@
         "body": "قم بالمصادقة على حسابك وإنشاء قناة التواصل."
       },
       {
-        "title": "إضافة موظفين",
+        "title": "إضافة وكيل",
         "route": "settings_inboxes_add_agents",
-        "body": "إضافة موظفين إلى صندوق الوارد الخاص بقناة التواصل التي تم إنشاؤها."
+        "body": "إضافة وكلاء إلى صندوق الوارد الخاص بقناة التواصل التي تم إنشاؤها."
       },
       {
         "title": "Voilà!",
@@ -343,7 +345,7 @@
         "DESC": "يدعم أدوات الدردشة الحية، والميسنجر الفيسبوك، وملفات التويتر الشخصية، و WhatsApp، ورسائل البريد الإلكتروني، إلخ، كقنوات. إذا كنت ترغب في إنشاء قناة مخصصة، يمكنك إنشاءها باستخدام قناة API. للبدء، اختر إحدى القنوات أدناه."
       },
       "AGENTS": {
-        "TITLE": "موظف الدعم",
+        "TITLE": "وكيل الدعم",
         "DESC": "هنا يمكنك إضافة موظفين لإدارة صندوق الوارد الخاص بقناة تواصلك التي تم إنشاؤها حديثاً. الموظفين الذين يتم تحديدهم هنا هم فقط من يمكنهم الوصول إلى صندوق الوارد الخاص بتلك القناة. الموظفين الذين ليسوا جزءاً من صندوق الوارد هذا لن يكونوا قادرين على رؤية أو الرد على الرسائل في قناة التواصل هذه عند تسجيل الدخول. <br> <b>ملحوظة:</b> كمسؤول، إذا كنت بحاجة إلى الوصول إلى جميع صناديق الوارد، يجب عليك إضافة نفسك كموظف لجميع صناديق الوارد الخاصة بقنوات التواصل التي تنشئها.",
         "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
         "PICK_AGENTS": "اختر وكلاء لصندوق الوارد"
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "تسجيل الدخول باستخدام Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
@@ -378,8 +381,8 @@
       "DESC": ""
     },
     "AGENTS": {
-      "BUTTON_TEXT": "إضافة موظفين",
-      "ADD_AGENTS": "إضافة موظفين إلى صندوق الوارد الخاص بالقناة..."
+      "BUTTON_TEXT": "إضافة وكلاء",
+      "ADD_AGENTS": "إضافة وكلاء إلى صندوق الوارد الخاص بالقناة..."
     },
     "FINISH": {
       "TITLE": "أصبحت قناة التواصل جاهزة الآن!",
@@ -406,12 +409,12 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "حدد الاسم الذي يظهر للعميل الخاص بك عندما يتلقى رسائل البريد الإلكتروني من الوكلاء الخاصين.",
         "FOR_EG": "For eg:",
         "FRIENDLY": {
           "TITLE": "Friendly",
           "FROM": "من",
-          "SUBTITLE": "Add the name of the agent who sent the reply in the sender name to make it friendly."
+          "SUBTITLE": "يضاف اسم الوكيل الذي أرسل الرد باسم المرسل لجعله صديقا."
         },
         "PROFESSIONAL": {
           "TITLE": "Professional",
@@ -436,7 +439,7 @@
         "DISABLED": "معطّل"
       },
       "ENABLE_HMAC": {
-        "LABEL": "تمكين"
+        "LABEL": "تفعيل"
       }
     },
     "DELETE": {
@@ -477,18 +480,18 @@
     "SETTINGS_POPUP": {
       "MESSENGER_HEADING": "كود \"الماسنجر\"",
       "MESSENGER_SUB_HEAD": "ضع هذا الكود داخل وسم الـ body في موقعك",
-      "INBOX_AGENTS": "موظف الدعم",
-      "INBOX_AGENTS_SUB_TEXT": "إضافة أو إزالة موظفين من قناة التواصل هذه",
-      "AGENT_ASSIGNMENT": "إسناد المحادثات",
+      "INBOX_AGENTS": "وكيل الدعم",
+      "INBOX_AGENTS_SUB_TEXT": "إضافة أو إزالة وكلاء من صندوق الوارد هذا",
+      "AGENT_ASSIGNMENT": "تعيين المحادثة",
       "AGENT_ASSIGNMENT_SUB_TEXT": "تحديث إعدادات إسناد المحادثات",
       "UPDATE": "تحديث",
       "ENABLE_EMAIL_COLLECT_BOX": "تفعيل صندوق جمع البريد الإلكتروني",
       "ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT": "تمكين أو تعطيل مربع جمع البريد الإلكتروني في محادثة جديدة",
       "AUTO_ASSIGNMENT": "تفعيل الإسناد التلقائي",
       "ENABLE_CSAT": "تمكين تقييم خدمة العملاء",
-      "SENDER_NAME_SECTION": "Enable Agent Name in Email",
+      "SENDER_NAME_SECTION": "تمكين اسم الوكيل في البريد الإلكتروني",
       "ENABLE_CSAT_SUB_TEXT": "تمكين/تعطيل تقييم خدمة العملاء بعد إنتهاء المحادثة",
-      "SENDER_NAME_SECTION_TEXT": "Enable/Disable showing Agent's name in email, if disabled it will show business name",
+      "SENDER_NAME_SECTION_TEXT": "تمكين/تعطيل إظهار اسم الوكيل في البريد الإلكتروني، إذا تم تعطيله فسيظهر اسم المنشأة",
       "ENABLE_CONTINUITY_VIA_EMAIL": "تمكين استمرارية المحادثة عبر البريد الإلكتروني",
       "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "المحادثات ستستمر عبر البريد الإلكتروني إذا كان عنوان البريد الإلكتروني لجهة الاتصال متاحاً.",
       "LOCK_TO_SINGLE_CONVERSATION": "قفل إلى محادثة واحدة",
@@ -518,7 +521,7 @@
       "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
     },
     "HELP_CENTER": {
-      "LABEL": "Help Center",
+      "LABEL": "مركز المساعدة",
       "PLACEHOLDER": "Select Help Center",
       "SELECT_PLACEHOLDER": "Select Help Center",
       "REMOVE": "Remove Help Center",
@@ -569,7 +572,7 @@
       "UPDATE": "تحديث إعدادات ساعات العمل",
       "TOGGLE_AVAILABILITY": "تمكين توافر العمل لهذا البريد الوارد",
       "UNAVAILABLE_MESSAGE_LABEL": "رسالة غير متاح للزائرين",
-      "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours visitors can be warned with a message and a pre-chat form.",
+      "TOGGLE_HELP": "تمكين توفر العمل سيظهر الساعات المتاحة على أداة الدردشة المباشرة حتى لو كان جميع الوكلاء غير متصلين بالإنترنت. خارج الساعات المتاحة يمكن تحذير الزوار برسالة ونموذج ما قبل الدردشة.",
       "DAY": {
         "ENABLE": "تمكين التوفر لهذا اليوم",
         "UNAVAILABLE": "غير متوفر",
@@ -639,7 +642,7 @@
         "PLACE_HOLDER": "كلمة المرور"
       },
       "DOMAIN": {
-        "LABEL": "الدومين",
+        "LABEL": "النطاق",
         "PLACE_HOLDER": "الدومين"
       },
       "ENCRYPTION": "التشفير",
diff --git a/app/javascript/dashboard/i18n/locale/ar/integrations.json b/app/javascript/dashboard/i18n/locale/ar/integrations.json
index 7bd05d20d1f0f..3c87653e89b22 100644
--- a/app/javascript/dashboard/i18n/locale/ar/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ar/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "خيارات الربط",
+    "DESCRIPTION": "Chatwoot تتكامل مع أدوات وخدمات متعددة لتحسين كفاءة فريقك. استكشف القائمة أدناه لتكوين تطبيقاتك المفضلة.",
+    "LEARN_MORE": "معرفة المزيد عن التكاملات",
+    "LOADING": "جاري جلب التكاملات",
+    "CAPTAIN": {
+      "DISABLED": "لم يتم تمكين الكابتن على حسابك.",
+      "CLICK_HERE_TO_CONFIGURE": "انقر هنا للتهيئة",
+      "LOADING_CONSOLE": "جار جلب وحدة التحكم بالكابتن...",
+      "FAILED_TO_LOAD_CONSOLE": "فشل أثناء جلب وحدة تحكم الكابتن. الرجاء التحديث والمحاولة مرة أخرى."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "الأحداث المشتركة",
       "FORM": {
@@ -114,7 +123,7 @@
         "EXPAND": "Expand",
         "MAKE_FRIENDLY": "Change message tone to friendly",
         "MAKE_FORMAL": "Use formal tone",
-        "SIMPLIFY": "Simplify"
+        "SIMPLIFY": "تبسيط"
       },
       "ASSISTANCE_MODAL": {
         "DRAFT_TITLE": "Draft content",
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "إضافة تطبيق جديد للوحة التحكم",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "تسمح تطبيقات لوحة التحكم للمنظمات بتضمين تطبيق داخل لوحة التحكم لتوفير السياق لوكلاء دعم العملاء. هذه الميزة تسمح لك بإنشاء تطبيق بشكل مستقل وإدراج لتوفير معلومات المستخدم أو طلباتهم أو سجل الدفع السابق.",
+      "LEARN_MORE": "معرفة المزيد حول تطبيقات لوحة التحكم",
       "LIST": {
         "404": "لا توجد تطبيقات لوحة التحكم التي تم تكوينها على هذا الحساب حتى الآن",
         "LOADING": "جلب تطبيقات لوحة التحكم...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "تم حذف تطبيق لوحة التحكم بنجاح",
         "API_ERROR": "لم نتمكن من حذف التطبيق. الرجاء المحاولة مرة أخرى لاحقاً"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "جلب مشاكل من Linear...",
+      "LOADING_ERROR": "حدث خطأ أثناء جلب المشكلات من Linear، الرجاء المحاولة مرة أخرى",
+      "CREATE": "إنشاء",
+      "LINK": {
+        "SEARCH": "البحث عن المشكلات",
+        "SELECT": "اختر مشكلة",
+        "TITLE": "الرابط",
+        "EMPTY_LIST": "لم يتم العثور على مشاكل في Linear",
+        "LOADING": "جار التحميل",
+        "ERROR": "حدث خطأ أثناء جلب المشكلات من Linear، الرجاء المحاولة مرة أخرى",
+        "LINK_SUCCESS": "تم ربط المشكلة بنجاح",
+        "LINK_ERROR": "حدث خطأ أثناء ربط المشكلة، الرجاء المحاولة مرة أخرى",
+        "LINK_TITLE": "محادثة (#%{conversationId}) مع %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "إنشاء/رابط مشكلة في Linear",
+        "DESCRIPTION": "إنشاء مشكلات في Linear من المحادثات، أو ربط المشكلات الموجودة لتعقب سلس.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "العنوان",
+            "PLACEHOLDER": "أدخل العنوان",
+            "REQUIRED_ERROR": "العنوان مطلوب"
+          },
+          "DESCRIPTION": {
+            "LABEL": "الوصف",
+            "PLACEHOLDER": "أدخل الوصف"
+          },
+          "TEAM": {
+            "LABEL": "الفريق",
+            "PLACEHOLDER": "اختر فريق",
+            "SEARCH": "البحث عن فريق",
+            "REQUIRED_ERROR": "الفريق مطلوب"
+          },
+          "ASSIGNEE": {
+            "LABEL": "المكلَّف",
+            "PLACEHOLDER": "اختر المحال إليه",
+            "SEARCH": "البحث عن المحال إليه"
+          },
+          "PRIORITY": {
+            "LABEL": "الأولوية",
+            "PLACEHOLDER": "تحديد الأولوية",
+            "SEARCH": "أولوية البحث"
+          },
+          "LABEL": {
+            "LABEL": "الوسم",
+            "PLACEHOLDER": "حدد التسمية",
+            "SEARCH": "ابحث عن تصنيفات"
+          },
+          "STATUS": {
+            "LABEL": "الحالة",
+            "PLACEHOLDER": "اختر الحالة",
+            "SEARCH": "حالة البحث"
+          },
+          "PROJECT": {
+            "LABEL": "المشروع",
+            "PLACEHOLDER": "حدد المشروع",
+            "SEARCH": "البحث عن المشروع"
+          }
+        },
+        "CREATE": "إنشاء",
+        "CANCEL": "إلغاء",
+        "CREATE_SUCCESS": "تم إنشاء المشكلة بنجاح",
+        "CREATE_ERROR": "حدث خطأ أثناء إنشاء المشكلة، يرجى المحاولة مرة أخرى",
+        "LOADING_TEAM_ERROR": "حدث خطأ أثناء جلب الفرق, الرجاء المحاولة مرة أخرى",
+        "LOADING_TEAM_ENTITIES_ERROR": "حدث خطأ أثناء جلب كيانات الفريق، يرجى المحاولة مرة أخرى"
+      },
+      "ISSUE": {
+        "STATUS": "الحالة",
+        "PRIORITY": "الأولوية",
+        "ASSIGNEE": "المكلَّف",
+        "LABELS": "الوسوم",
+        "CREATED_AT": "تم إنشاؤها في %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "إلغاء الربط",
+        "SUCCESS": "تم إلغاء ربط المشكلة بنجاح",
+        "ERROR": "حدث خطأ أثناء إلغاء ربط المشكلة، الرجاء المحاولة مرة أخرى"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ar/labelsMgmt.json
index 4dd3c382ff554..e3829fe211dd3 100644
--- a/app/javascript/dashboard/i18n/locale/ar/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/labelsMgmt.json
@@ -3,10 +3,11 @@
     "HEADER": "الوسوم",
     "HEADER_BTN_TXT": "إضافة وسم جديد",
     "LOADING": "جار جلب الوسوم",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "لا توجد عناصر مطابقة لهذا الاستعلام",
-    "SIDEBAR_TXT": "<p><b>الوسوم</b> <p>تساعدك الوسو على تصنيف المحادثات وإعطائها الأولوية. يمكنك تعيين وسم إلى محادثة من القائمة الجانبية. <br /><br />الوسوم مرتبطة بالحساب ويمكن استخدامها لإنشاء سير عمل مخصص في مؤسستك. يمكنك تعيين لون مخصص للوسم، مما يسهل التعرف على الوسم. ستتمكن من عرض الوسم على الشريط الجانبي لتصفية المحادثات بسهولة.</p>",
     "LIST": {
-      "404": "لا يوجد وسوم متوفرة في هذا الحساب.",
+      "404": "لا توجد وسوم متوفرة في هذا الحساب.",
       "TITLE": "إدارة الوسوم",
       "DESC": "الوسوم تسمح لك بتجميع المحادثات المتشابهة معاً.",
       "TABLE_HEADER": [
@@ -19,8 +20,8 @@
       "NAME": {
         "LABEL": "اسم الوسم",
         "PLACEHOLDER": "اسم الوسم",
-        "REQUIRED_ERROR": "اسم التسمية مطلوب",
-        "MINIMUM_LENGTH_ERROR": "الحد الأدنى للطول 2 مطلوب",
+        "REQUIRED_ERROR": "اسم الوسم مطلوب",
+        "MINIMUM_LENGTH_ERROR": "الحد الأدنى لطول الإسم هو حرفين",
         "VALID_ERROR": "مسموح فقط بالابجدية,الارقام, -, _"
       },
       "DESCRIPTION": {
@@ -40,16 +41,17 @@
     },
     "SUGGESTIONS": {
       "TOOLTIP": {
-        "SINGLE_SUGGESTION": "Add label to conversation",
-        "MULTIPLE_SUGGESTION": "Select this label",
-        "DESELECT": "Deselect label",
-        "DISMISS": "Dismiss suggestion"
+        "SINGLE_SUGGESTION": "إضافة وسم إلى المحادثة",
+        "MULTIPLE_SUGGESTION": "حدد الوسم",
+        "DESELECT": "إلغاء تحديد الوسم",
+        "DISMISS": "استبعاد الاقتراح"
       },
       "POWERED_BY": "Chatwoot AI",
-      "DISMISS": "تجاهل",
-      "ADD_SELECTED_LABELS": "Add selected labels",
-      "ADD_SELECTED_LABEL": "Add selected label",
-      "ADD_ALL_LABELS": "Add all labels"
+      "DISMISS": "استبعاد",
+      "ADD_SELECTED_LABELS": "إضافة الوسوم المحددة",
+      "ADD_SELECTED_LABEL": "إضافة الوسوم المحددة",
+      "ADD_ALL_LABELS": "إضافة جميع الأوسمة",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "إضافة وسم جديد",
diff --git a/app/javascript/dashboard/i18n/locale/ar/login.json b/app/javascript/dashboard/i18n/locale/ar/login.json
index 0120d68be319e..41ce73b55b3c7 100644
--- a/app/javascript/dashboard/i18n/locale/ar/login.json
+++ b/app/javascript/dashboard/i18n/locale/ar/login.json
@@ -3,7 +3,7 @@
     "TITLE": "تسجيل الدخول إلى Chatwoot",
     "EMAIL": {
       "LABEL": "البريد الإلكتروني",
-      "PLACEHOLDER": "مثال: someone@example.com",
+      "PLACEHOLDER": "مثلاً: someone@example.com",
       "ERROR": "الرجاء إدخال عنوان بريد إلكتروني صحيح"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/ar/macros.json b/app/javascript/dashboard/i18n/locale/ar/macros.json
index f96c0f800dfe8..b38e31c61e34a 100644
--- a/app/javascript/dashboard/i18n/locale/ar/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ar/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "تنفيذ",
       "PREVIEW": "معاينة الماكرو",
       "EXECUTED_SUCCESSFULLY": "تم تنفيذ الماكرو بنجاح"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "مفتاح الخاصية مطلوب",
+      "FILTER_OPERATOR_REQUIRED": "عامل التصفية مطلوب",
+      "VALUE_REQUIRED": "القيمة مطلوبة",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "القيمة يجب أن تكون بين 1 و 998",
+      "ACTION_PARAMETERS_REQUIRED": "معلمات الإجراء مطلوبة",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "شرط واحد على الأقل مطلوب",
+      "ATLEAST_ONE_ACTION_REQUIRED": "إجراء واحد على الأقل مطلوب"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ar/report.json b/app/javascript/dashboard/i18n/locale/ar/report.json
index f7259abe86c1d..25d9bdcb1e64f 100644
--- a/app/javascript/dashboard/i18n/locale/ar/report.json
+++ b/app/javascript/dashboard/i18n/locale/ar/report.json
@@ -3,7 +3,7 @@
     "HEADER": "المحادثات",
     "LOADING_CHART": "تحميل بيانات الرسم البياني...",
     "NO_ENOUGH_DATA": "لم يتم جمع بيانات بقدر كافي لإنشاء التقرير، الرجاء المحاولة مرة أخرى لاحقاً.",
-    "DOWNLOAD_AGENT_REPORTS": "تنزيل تقارير الوكيل",
+    "DOWNLOAD_AGENT_REPORTS": "تحميل تقارير وكيل",
     "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
     "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
     "METRICS": {
@@ -44,8 +44,8 @@
         "DESC": "(الإجمالي)"
       },
       "REPLY_TIME": {
-        "NAME": "Customer waiting time",
-        "TOOLTIP_TEXT": "Waiting time is %{metricValue} (based on %{conversationCount} replies)"
+        "NAME": "وقت انتظار العميل",
+        "TOOLTIP_TEXT": "وقت الانتظار هو %{metricValue} (بناء على ردود %{conversationCount})"
       }
     },
     "DATE_RANGE_OPTIONS": {
@@ -146,7 +146,7 @@
   },
   "AGENT_REPORTS": {
     "HEADER": "نظرة عامة للوكلاء",
-    "LOADING_CHART": "تحميل بيانات الرسم البياني...",
+    "LOADING_CHART": "جاري جلب بيانات الرسم البياني...",
     "NO_ENOUGH_DATA": "لم يتم جمع بيانات بقدر كافي لإنشاء التقرير، الرجاء المحاولة مرة أخرى لاحقاً.",
     "DOWNLOAD_AGENT_REPORTS": "تنزيل تقارير الوكيل",
     "FILTER_DROPDOWN_LABEL": "اختر وكيل",
@@ -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": "المحادثات من قبل الوكلاء",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "إضافة فلتر",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "لم يتم العثور على النتائج",
@@ -536,6 +537,7 @@
       "LABELS": "الوسم",
       "TEAMS": "الفريق"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
@@ -554,7 +556,7 @@
       "HEADER": {
         "POLICY": "Policy",
         "CONVERSATION": "المحادثات",
-        "AGENT": "موظف الدعم"
+        "AGENT": "وكيل الدعم"
       },
       "VIEW_DETAILS": "View Details"
     }
diff --git a/app/javascript/dashboard/i18n/locale/ar/search.json b/app/javascript/dashboard/i18n/locale/ar/search.json
index 297245baa7649..988d6fd504255 100644
--- a/app/javascript/dashboard/i18n/locale/ar/search.json
+++ b/app/javascript/dashboard/i18n/locale/ar/search.json
@@ -11,14 +11,15 @@
       "CONVERSATIONS": "المحادثات",
       "MESSAGES": "الرسائل"
     },
-    "EMPTY_STATE": "No %{item} found for query '%{query}'",
-    "EMPTY_STATE_FULL": "No results found for query '%{query}'",
-    "PLACEHOLDER_KEYBINDING": "/ to focus",
-    "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
-    "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results.",
+    "SEARCHING_DATA": "جاري البحث",
+    "EMPTY_STATE": "لم يتم العثور على %{item} للطلب '%{query}'",
+    "EMPTY_STATE_FULL": "لم يتم العثور على نتائج للطلب '%{query}'",
+    "PLACEHOLDER_KEYBINDING": "/ للتركيز",
+    "INPUT_PLACEHOLDER": "أكتب 3 أحرف أو أكثر للبحث",
+    "EMPTY_STATE_DEFAULT": "البحث عن طريق معرف المحادثة أو البريد الإلكتروني أو رقم الهاتف أو الرسائل للحصول على نتائج بحث أفضل. ",
     "BOT_LABEL": "رد آلي",
     "READ_MORE": "اقرأ المزيد",
-    "WROTE": "wrote:",
+    "WROTE": "كتب:",
     "FROM": "من",
     "EMAIL": "البريد الإلكتروني"
   }
diff --git a/app/javascript/dashboard/i18n/locale/ar/settings.json b/app/javascript/dashboard/i18n/locale/ar/settings.json
index 14e13f3213355..12819d90eb19e 100644
--- a/app/javascript/dashboard/i18n/locale/ar/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ar/settings.json
@@ -3,19 +3,19 @@
     "LINK": "إعدادات الملف الشخصي",
     "TITLE": "إعدادات الملف الشخصي",
     "BTN_TEXT": "تعديل الملف الشخصي",
-    "DELETE_AVATAR": "حذف الصورة الشخصية",
+    "DELETE_AVATAR": "حذف الصورة الرمزية",
     "AVATAR_DELETE_SUCCESS": "تم حذف الصورة الشخصية بنجاح",
     "AVATAR_DELETE_FAILED": "حدث خطأ أثناء حذف الصورة الشخصية، الرجاء المحاولة مرة أخرى",
     "UPDATE_SUCCESS": "تم تحديث حسابك بنجاح",
     "PASSWORD_UPDATE_SUCCESS": "تم تغيير كلمة المرور بنجاح",
     "AFTER_EMAIL_CHANGED": "تم تحديث ملفك الشخصي بنجاح، الرجاء تسجيل الدخول مرة أخرى حيث أنه قد تم تغيير بيانات تسجيل الدخول الخاصة بك",
     "FORM": {
-      "PICTURE": "Profile Picture",
+      "PICTURE": "صورة الملف الشخصي",
       "AVATAR": "صورة الملف الشخصي",
       "ERROR": "الرجاء إصلاح الأخطاء في النموذج",
       "REMOVE_IMAGE": "حذف",
       "UPLOAD_IMAGE": "رفع صورة",
-      "UPDATE_IMAGE": "تعديل الصورة",
+      "UPDATE_IMAGE": "تحديث الصورة",
       "PROFILE_SECTION": {
         "TITLE": "الملف الشخصي",
         "NOTE": "عنوان بريدك الإلكتروني هو المعرف الخاص بك الذي ستستخدمه لتسجيل الدخول."
@@ -37,13 +37,13 @@
       },
       "MESSAGE_SIGNATURE_SECTION": {
         "TITLE": "توقيع الرسالة الشخصية",
-        "NOTE": "Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes.",
+        "NOTE": "إنشاء توقيع رسالة فريدة تظهر في نهاية كل رسالة ترسلها من أي صندوق وارد. يمكنك أيضًا تضمين صورة داخلية، مدعومة في الدردشة المباشرة، والبريد الإلكتروني، وصناديق API الواردة.",
         "BTN_TEXT": "حفظ توقيع الرسالة",
         "API_ERROR": "تعذر إرسال الرسالة! حاول مرة أخرى",
         "API_SUCCESS": "تم حفظ التوقيع بنجاح",
-        "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
-        "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save to save the signature",
-        "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB"
+        "IMAGE_UPLOAD_ERROR": "تعذر رفع الصورة! حاول مرة أخرى",
+        "IMAGE_UPLOAD_SUCCESS": "تم إضافة الصورة بنجاح. الرجاء النقر على الحفظ لحفظ التوقيع",
+        "IMAGE_UPLOAD_SIZE_ERROR": "حجم الصورة يجب أن يكون أقل من {size}MB"
       },
       "MESSAGE_SIGNATURE": {
         "LABEL": "توقيع الرسالة",
@@ -65,13 +65,13 @@
         "NOTE": "تمكين التنبيهات الصوتية في لوحة التحكم للرسائل والمحادثات الجديدة.",
         "ALERT_TYPES": {
           "NONE": "لا شيء",
-          "MINE": "Assigned",
+          "MINE": "المعين",
           "ALL": "الكل"
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "تنبيه الأحداث للمحادثات:",
           "NONE": "لا شيء",
-          "ASSIGNED": "المحادثات المسندة",
+          "ASSIGNED": "المحادثات المعينة",
           "ALL_CONVERSATIONS": "كل المحادثات"
         },
         "DEFAULT_TONE": {
@@ -189,10 +189,10 @@
   "APP_GLOBAL": {
     "TRIAL_MESSAGE": "أيام متبقية من الفترة التجريبية.",
     "TRAIL_BUTTON": "اشترك الآن",
-    "DELETED_USER": "حذف المستخدم",
-    "EMAIL_VERIFICATION_PENDING": "It seems that you haven't verified your email address yet. Please check your inbox for the verification email.",
-    "RESEND_VERIFICATION_MAIL": "Resend verification email",
-    "EMAIL_VERIFICATION_SENT": "Verification email has been sent. Please check your inbox.",
+    "DELETED_USER": "المستخدم المحذوف",
+    "EMAIL_VERIFICATION_PENDING": "يبدو أنك لم تتحقق من عنوان بريدك الإلكتروني بعد. الرجاء التحقق من صندوق الوارد الخاص بك للتحقق من البريد الإلكتروني.",
+    "RESEND_VERIFICATION_MAIL": "إعادة إرسال رسالة التحقق",
+    "EMAIL_VERIFICATION_SENT": "تم إرسال البريد الإلكتروني للتحقق. الرجاء التحقق من البريد الوارد الخاص بك.",
     "ACCOUNT_SUSPENDED": {
       "TITLE": "تم تعليق الحساب",
       "MESSAGE": "تم تعليق حسابك. يرجى الاتصال بفريق الدعم للمزيد من المعلومات."
@@ -239,13 +239,14 @@
     "REPORTS": "التقارير",
     "SETTINGS": "الإعدادات",
     "CONTACTS": "جهات الاتصال",
+    "CAPTAIN": "قائد",
     "HOME": "الرئيسية",
-    "AGENTS": "موظف الدعم",
-    "AGENT_BOTS": "البوتات",
+    "AGENTS": "وكيل الدعم",
+    "AGENT_BOTS": "الروبوتات",
     "AUDIT_LOGS": "سجلات التدقيق",
     "INBOXES": "قنوات التواصل",
     "NOTIFICATIONS": "الإشعارات",
-    "CANNED_RESPONSES": "الردود السريعة",
+    "CANNED_RESPONSES": "الردود الجاهزة",
     "INTEGRATIONS": "خيارات الربط",
     "PROFILE_SETTINGS": "إعدادات الملف الشخصي",
     "ACCOUNT_SETTINGS": "إعدادات الحساب",
@@ -270,7 +271,7 @@
     "ONE_OFF": "إيقاف واحد",
     "REPORTS_SLA": "SLA",
     "REPORTS_BOT": "رد آلي",
-    "REPORTS_AGENT": "موظف الدعم",
+    "REPORTS_AGENT": "وكيل الدعم",
     "REPORTS_LABEL": "الوسوم",
     "REPORTS_INBOX": "صندوق الوارد",
     "REPORTS_TEAM": "الفريق",
@@ -278,9 +279,9 @@
     "SLA": "SLA",
     "BETA": "تجريبي",
     "REPORTS_OVERVIEW": "نظرة عامة",
-    "FACEBOOK_REAUTHORIZE": "انتهت صلاحية اتصال الفيسبوك الخاص بك، يرجى إعادة الاتصال بصفحة الفيسبوك الخاصة بك لمواصلة الخدمات",
+    "REAUTHORIZE": "انتهت صلاحية اتصال صندوق الوارد الخاص بك، يرجى إعادة الاتصال\n لمواصلة تلقي وإرسال الرسائل",
     "HELP_CENTER": {
-      "TITLE": "Help Center",
+      "TITLE": "مركز المساعدة",
       "ALL_ARTICLES": "جميع المقالات",
       "MY_ARTICLES": "مقالاتي",
       "DRAFT": "مسودة",
@@ -291,7 +292,7 @@
     },
     "SET_AUTO_OFFLINE": {
       "TEXT": "وضع علامة غير متصل تلقائيا",
-      "INFO_TEXT": "السماح للنظام بوضع علامة  غير متصل أوتوماتيكياً  عندما لا تستخدم التطبيق أو لوحة التحكم."
+      "INFO_TEXT": "السماح للنظام بوضع علامة غير متصل تلقائياً عند عدم استخدام التطبيق أو لوحة التحكم."
     },
     "DOCS": "قراءة المستندات"
   },
@@ -324,7 +325,7 @@
     },
     "FORM": {
       "NAME": {
-        "LABEL": "اسم الشركة",
+        "LABEL": "اسم المنشأة",
         "PLACEHOLDER": "مؤسسة Wayne"
       },
       "SUBMIT": "إرسال"
diff --git a/app/javascript/dashboard/i18n/locale/ar/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ar/teamsSettings.json
index 78e8288690cfc..ef3b31c87ae93 100644
--- a/app/javascript/dashboard/i18n/locale/ar/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ar/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "إنشاء فريق جديد",
     "HEADER": "الفرق",
-    "SIDEBAR_TXT": "<p><b>الفريق</b></p> <p>الفرق تسمح لك بتنظيم عملائك في مجموعات على أساس مسؤولياتهم. <br /> يمكن للمستخدم أن يكون جزءا من فرق متعددة. يمكنك تعيين محادثات مع فريق عندما تعمل بشكل تعاوني. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "لا يوجد موظفي دعم مرتبطين بهذا الحساب.",
-      "EDIT_TEAM": "تعديل الفريق"
+      "EDIT_TEAM": "تعديل الفريق",
+      "NONE": "لا شيء"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -21,10 +24,10 @@
         {
           "title": "إنشاء",
           "route": "settings_teams_new",
-          "body": "إنشاء فريق جديد من الوكلاء."
+          "body": "إنشاء فريق جديد للوكلاء."
         },
         {
-          "title": "إضافة موظفين",
+          "title": "إضافة وكلاء",
           "route": "settings_teams_add_agents",
           "body": "إضافة وكيل إلى فريق."
         },
@@ -68,9 +71,9 @@
       "ERROR_MESSAGE": "تعذر حفظ تفاصيل الفريق. حاول مرة أخرى."
     },
     "AGENTS": {
-      "AGENT": "AGENT",
+      "AGENT": "وكيل",
       "EMAIL": "البريد الإلكتروني",
-      "BUTTON_TEXT": "إضافة موظفين",
+      "BUTTON_TEXT": "إضافة وكلاء",
       "ADD_AGENTS": "إضافة وكلاء إلى فريقك...",
       "SELECT": "حدد",
       "SELECT_ALL": "تحديد جميع الوكلاء",
@@ -82,8 +85,8 @@
       "SELECT": "حدد",
       "SELECT_ALL": "تحديد جميع الوكلاء",
       "SELECTED_COUNT": "تم تحديد %{selected} من أصل %{total} وكيل.",
-      "BUTTON_TEXT": "إضافة موظفين",
-      "AGENT_VALIDATION_ERROR": "اختيار وكيل واحد على الأقل."
+      "BUTTON_TEXT": "إضافة وكلاء",
+      "AGENT_VALIDATION_ERROR": "اختر وكيل واحد على الأقل."
     },
     "FINISH": {
       "TITLE": "أصبح فريقك جاهزة الآن!",
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "تعذر حذف الفريق. حاول مرة أخرى."
       },
       "CONFIRM": {
-        "TITLE": "هل أنت متأكد من أنك تريد حذف - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "الرجاء كتابة {teamName} للتأكيد",
         "MESSAGE": "سيؤدي حذف الفريق إلى إزالة مهمة الفريق من المحادثات التي تم تعيينها لهذا الفريق.",
         "YES": "حذف ",
diff --git a/app/javascript/dashboard/i18n/locale/bg/advancedFilters.json b/app/javascript/dashboard/i18n/locale/bg/advancedFilters.json
index 91d0cd40f3f0e..dd6c9cd226496 100644
--- a/app/javascript/dashboard/i18n/locale/bg/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/bg/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "И",
       "OR": "ИЛИ"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Равно на",
       "not_equal_to": "Различно от",
diff --git a/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json b/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json
index 7380d7530bcf6..d654b8365fa2b 100644
--- a/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Агенти",
     "HEADER_BTN_TXT": "Добави агент",
     "LOADING": "Извличане на списък с агенти",
-    "SIDEBAR_TXT": "<p><b>Агенти</b></p> <p> <b>Агент</b> е член на вашия екип за поддръжка на клиенти. </p><p> Агентите ще могат да преглеждат и отговарят на съобщения от вашите потребители. Списъкът показва всички агенти във вашия акаунт. </p><p> Щракнете върху <b>Добавяне на агент</b>, за да добавите нов агент. Агентът, който добавите, ще получи имейл с връзка за потвърждение, за да активира акаунта си, след което те ще имат достъп до Chatwoot и ще могат да отговарят на съобщения. </p><p> Достъпът до функциите на Chatwoot се основава на следните роли. </p><p> <b>Агент</b> – Агентите с тази роля имат достъп само до входящи кутии, отчети и разговори. Те могат да присвояват разговори на други агенти или на себе си и да ги разрешават.</p><p> <b>Администратор</b> - Администраторът ще има достъп до всички функции на Chatwoot, активирани за вашия акаунт, включително настройки, заедно с всички нормални привилегии на агентите.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Администратор",
       "AGENT": "Агент"
diff --git a/app/javascript/dashboard/i18n/locale/bg/auditLogs.json b/app/javascript/dashboard/i18n/locale/bg/auditLogs.json
index bfef5be29e167..43c9b6c9e8147 100644
--- a/app/javascript/dashboard/i18n/locale/bg/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/bg/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Няма резултати отговарящи на тази заявка",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/bg/automation.json b/app/javascript/dashboard/i18n/locale/bg/automation.json
index b6c377401e267..9623df356099a 100644
--- a/app/javascript/dashboard/i18n/locale/bg/automation.json
+++ b/app/javascript/dashboard/i18n/locale/bg/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Качване...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Изисква се стойност",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/bg/bulkActions.json b/app/javascript/dashboard/i18n/locale/bg/bulkActions.json
index 5b225f3cdf14e..92138294fdf07 100644
--- a/app/javascript/dashboard/i18n/locale/bg/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/bg/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "Търсене",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "Нито един",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/bg/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/bg/cannedMgmt.json
index 9929536edeafd..b0e1e4696f61d 100644
--- a/app/javascript/dashboard/i18n/locale/bg/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/bg/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Готови отговори",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Няма резултати отговарящи на тази заявка.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Няма налични готови отговори в този акаунт.",
       "TITLE": "Управлявайте готовите отговори",
diff --git a/app/javascript/dashboard/i18n/locale/bg/contact.json b/app/javascript/dashboard/i18n/locale/bg/contact.json
index 5a74a3ce75f70..c35c753fe0f35 100644
--- a/app/javascript/dashboard/i18n/locale/bg/contact.json
+++ b/app/javascript/dashboard/i18n/locale/bg/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Успешно обединяване на контакта",
       "ERROR_MESSAGE": "Контактите не бяха обединени, опитайте отново!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/bg/conversation.json b/app/javascript/dashboard/i18n/locale/bg/conversation.json
index 6ef7ee90c56ac..2489d14eed45f 100644
--- a/app/javascript/dashboard/i18n/locale/bg/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/bg/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/bg/general.json b/app/javascript/dashboard/i18n/locale/bg/general.json
index 25bb4dfb736d2..4c2c5bfa23dea 100644
--- a/app/javascript/dashboard/i18n/locale/bg/general.json
+++ b/app/javascript/dashboard/i18n/locale/bg/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": "Търсене",
+      "EMPTY_STATE": "Няма намерени резултати"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/bg/generalSettings.json b/app/javascript/dashboard/i18n/locale/bg/generalSettings.json
index 69a6f4bba6828..2bf3c5f18a095 100644
--- a/app/javascript/dashboard/i18n/locale/bg/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/bg/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/bg/helpCenter.json b/app/javascript/dashboard/i18n/locale/bg/helpCenter.json
index 776058f54e792..56eba13a4bd71 100644
--- a/app/javascript/dashboard/i18n/locale/bg/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/bg/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/bg/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/bg/inboxMgmt.json
index 3410fe61864e0..e544b69f365d8 100644
--- a/app/javascript/dashboard/i18n/locale/bg/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/bg/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/bg/integrations.json b/app/javascript/dashboard/i18n/locale/bg/integrations.json
index bb736e1e6933c..b289f7193a26f 100644
--- a/app/javascript/dashboard/i18n/locale/bg/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/bg/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Създаване",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Описание",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Изберете екип",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Статус",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Създаване",
+        "CANCEL": "Отмени",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Статус",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Етикети",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/bg/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/bg/labelsMgmt.json
index 0a47cba1b8c4f..89a632d2ab081 100644
--- a/app/javascript/dashboard/i18n/locale/bg/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/bg/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Няма резултати отговарящи на тази заявка",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/bg/macros.json b/app/javascript/dashboard/i18n/locale/bg/macros.json
index 15424edeb5409..d0cb6b0a331ab 100644
--- a/app/javascript/dashboard/i18n/locale/bg/macros.json
+++ b/app/javascript/dashboard/i18n/locale/bg/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Изисква се стойност",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/bg/report.json b/app/javascript/dashboard/i18n/locale/bg/report.json
index 76815db4b6a41..bbaab1d7d9980 100644
--- a/app/javascript/dashboard/i18n/locale/bg/report.json
+++ b/app/javascript/dashboard/i18n/locale/bg/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/bg/search.json b/app/javascript/dashboard/i18n/locale/bg/search.json
index 05461367c10b8..66ecf7bb6f2d9 100644
--- a/app/javascript/dashboard/i18n/locale/bg/search.json
+++ b/app/javascript/dashboard/i18n/locale/bg/search.json
@@ -11,6 +11,7 @@
       "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/i18n/locale/bg/settings.json b/app/javascript/dashboard/i18n/locale/bg/settings.json
index f06a19771e67f..eea4442c92c87 100644
--- a/app/javascript/dashboard/i18n/locale/bg/settings.json
+++ b/app/javascript/dashboard/i18n/locale/bg/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Контакти",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Агенти",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/bg/teamsSettings.json b/app/javascript/dashboard/i18n/locale/bg/teamsSettings.json
index 008676de73896..ae58466523e1c 100644
--- a/app/javascript/dashboard/i18n/locale/bg/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/bg/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Нито един"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/ca/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ca/advancedFilters.json
index 96eaa0a3e1195..3afd1fe90dfcb 100644
--- a/app/javascript/dashboard/i18n/locale/ca/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ca/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "I",
       "OR": "O"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Igual a",
       "not_equal_to": "No és igual a",
diff --git a/app/javascript/dashboard/i18n/locale/ca/agentBots.json b/app/javascript/dashboard/i18n/locale/ca/agentBots.json
index a36ed40025c7d..0fd6c87711d21 100644
--- a/app/javascript/dashboard/i18n/locale/ca/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/ca/agentBots.json
@@ -2,67 +2,67 @@
   "AGENT_BOTS": {
     "HEADER": "Bots",
     "LOADING_EDITOR": "S'està carregant l'editor...",
-    "HEADER_BTN_TXT": "Add bot configuration",
-    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
+    "HEADER_BTN_TXT": "Afegir configuració del bot",
+    "SIDEBAR_TXT": "<p><b>Bots d'Agent</b> <p>Bots d'Agent són com els membres més fabulosos del teu equip. Poden gestionar les coses petites, de manera que us podeu centrar en les coses importants. Prova-ls.</p> <p> Pots gestionar els teus bots des d'aquesta pàgina o crear-ne de nous mitjançant el botó \"Afegeix una configuració de bot\".</p> <p> Obre el <a href=\"https:/ /www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Manual de robots d'agent</a> en una altra pestanya per a un cop de mà.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
-        "ERROR": "Bot name is required."
+        "LABEL": "Nom del bot",
+        "PLACEHOLDER": "Anomena el teu bot.",
+        "ERROR": "El nom del bot és obligatori."
       },
       "DESCRIPTION": {
-        "LABEL": "Bot description",
-        "PLACEHOLDER": "What does this bot do?"
+        "LABEL": "Descripció del bot",
+        "PLACEHOLDER": "Què fa aquest bot?"
       },
       "BOT_CONFIG": {
-        "ERROR": "Please enter your CSML bot configuration above.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+        "ERROR": "Introdueix la configuració del bot CSML més amunt.",
+        "API_ERROR": "La vostra configuració CSML no és vàlida. Arregla-ho i torna-ho a provar."
       },
-      "SUBMIT": "Validate and save"
+      "SUBMIT": "Valida i desa"
     },
     "BOT_CONFIGURATION": {
-      "TITLE": "Select an agent bot",
-      "DESC": "Assign an Agent Bot to your inbox. They can handle initial conversations and transfer them to a live agent when necessary.",
+      "TITLE": "Selecciona un bot d'agent",
+      "DESC": "Assigna un bot d'agent a la teva safata d'entrada. Poden gestionar les converses inicials i transferir-les a un agent en directe quan sigui necessari.",
       "SUBMIT": "Actualitza",
-      "DISCONNECT": "Disconnect bot",
-      "SUCCESS_MESSAGE": "Successfully updated the agent bot.",
-      "DISCONNECTED_SUCCESS_MESSAGE": "Successfully disconnected the agent bot.",
-      "ERROR_MESSAGE": "Could not update the agent bot. Please try again.",
-      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot. Please try again.",
-      "SELECT_PLACEHOLDER": "Select bot"
+      "DISCONNECT": "Desconnecta el bot",
+      "SUCCESS_MESSAGE": "S'ha actualitzat correctament el bot de l'agent.",
+      "DISCONNECTED_SUCCESS_MESSAGE": "S'ha desconnectat correctament el bot de l'agent.",
+      "ERROR_MESSAGE": "No s'ha pogut actualitzar el bot de l'agent. Torneu-ho a provar.",
+      "DISCONNECTED_ERROR_MESSAGE": "No s'ha pogut desconnectar el bot de l'agent. Torneu-ho a provar.",
+      "SELECT_PLACEHOLDER": "Selecciona el bot"
     },
     "ADD": {
-      "TITLE": "Configure new bot",
+      "TITLE": "Configura el nou bot",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "API": {
-        "SUCCESS_MESSAGE": "Bot added successfully.",
-        "ERROR_MESSAGE": "Could not add bot. Please try again later."
+        "SUCCESS_MESSAGE": "Bot afegit correctament.",
+        "ERROR_MESSAGE": "No s'ha pogut afegir el bot. Torneu-ho a provar més endavant."
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
-      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "404": "No s'han trobat bots. Pots crear un bot fent clic al botó \"Configura un bot nou\" ↗",
+      "LOADING": "S'estan obtenint bots...",
+      "TYPE": "Tipus de bot"
     },
     "DELETE": {
       "BUTTON_TEXT": "Esborrar",
-      "TITLE": "Delete bot",
+      "TITLE": "Suprimeix el bot",
       "SUBMIT": "Esborrar",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
-      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "DESCRIPTION": "Estàs segur que vols suprimir aquest bot? Aquesta acció és irreversible.",
       "API": {
-        "SUCCESS_MESSAGE": "Bot deleted successfully.",
-        "ERROR_MESSAGE": "Could not delete bot. Please try again."
+        "SUCCESS_MESSAGE": "S'ha esborrat el bot correctament.",
+        "ERROR_MESSAGE": "No s'ha pogut eliminar el bot. Torneu-ho a provar més endavant."
       }
     },
     "EDIT": {
       "BUTTON_TEXT": "Edita",
-      "LOADING": "Fetching bots...",
-      "TITLE": "Edit bot",
+      "LOADING": "S'estan obtenint bots...",
+      "TITLE": "Edita el bot",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "API": {
-        "SUCCESS_MESSAGE": "Bot updated successfully.",
-        "ERROR_MESSAGE": "Could not update bot. Please try again."
+        "SUCCESS_MESSAGE": "Bot actualitzat correctament.",
+        "ERROR_MESSAGE": "No s'ha pogut actualitzar el bot. Torneu-ho a provar."
       }
     },
     "TYPES": {
diff --git a/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
index 33d2d85066231..a4f684d98173c 100644
--- a/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Afegir Agent",
     "LOADING": "S'està recollint la llista d'agents",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> Un <b>Agent</b> és membre del vostre equip d’atenció al client. </p><p> Els agents podran veure i respondre missatges dels teus usuaris. La llista mostra tots els agents que hi ha actualment al teu compte.</p><p> Fer clic a <b>Afegeix Agent</b> per afegir un agent nou. L´agent que afegeixes rebrà un correu electrònic amb un enllaç de confirmació per activar el seu compte, després del qual podrà accedir a Chatwoot i respondre als missatges. </p><p> L´accés a les funcions de Chatwoot es basa en els següents rols.</p><p> <b>Agent</b> - Els agents amb aquesta funció només poden accedir a les bústies d´entrada, als informes i a les converses. Poden assignar converses a altres agents o a ells mateixos i resoldre converses.</p><p> <b>Administrador</b> - L´administrador tindrà accés a totes les funcions de Chatwoot habilitades per al teu compte, inclosa la configuració, juntament amb tots els privilegis dels agents normals.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrador/a",
       "AGENT": "Agent"
@@ -111,7 +112,7 @@
         "PLACEHOLDER": {
           "AGENT": "Cerca agents",
           "TEAM": "Cerca equips",
-          "INPUT": "Cerca agents"
+          "INPUT": "Cerca agent"
         }
       }
     }
diff --git a/app/javascript/dashboard/i18n/locale/ca/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/ca/attributesMgmt.json
index 04cddfe5eeb23..ed0ce4e453c8b 100644
--- a/app/javascript/dashboard/i18n/locale/ca/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/attributesMgmt.json
@@ -1,120 +1,120 @@
 {
   "ATTRIBUTES_MGMT": {
     "HEADER": "Atributs personalitzats",
-    "HEADER_BTN_TXT": "Add Custom Attribute",
-    "LOADING": "Fetching custom attributes",
-    "SIDEBAR_TXT": "<p><b>Custom Attributes</b> <p>A custom attribute tracks facts about your contacts/conversation — like the subscription plan, or when they ordered the first item etc. <br /><br />For creating a Custom Attribute, just click on the <b>Add Custom Attribute.</b> You can also edit or delete an existing  Custom Attribute by clicking on the Edit or Delete button.</p>",
+    "HEADER_BTN_TXT": "Afegir atribut personalitzat",
+    "LOADING": "S'estan recollint atributs personalitzats",
+    "SIDEBAR_TXT": "<p><b>Atributs personalitzats</b> <p>Un atribut personalitzat fa un seguiment dels fets sobre els vostres contactes/converses, com ara el pla de subscripció, o quan van demanar el primer element, etc. <br /><br />Per crear un atribut personalitzat, només cal que feu clic a <b>Afegeix un atribut personalitzat.</b> També podeu editar o suprimir un atribut personalitzat existent fent clic al botó Edita o Suprimeix.</p>",
     "ADD": {
-      "TITLE": "Add Custom Attribute",
+      "TITLE": "Afegir atribut personalitzat",
       "SUBMIT": "Crear",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "FORM": {
         "NAME": {
-          "LABEL": "Display Name",
-          "PLACEHOLDER": "Enter custom attribute display name",
-          "ERROR": "Name is required"
+          "LABEL": "Mostre el nom",
+          "PLACEHOLDER": "Introdueix el nom de visualització de l'atribut personalitzat",
+          "ERROR": "El valor és necessari"
         },
         "DESC": {
           "LABEL": "Descripció",
-          "PLACEHOLDER": "Enter custom attribute description",
-          "ERROR": "Description is required"
+          "PLACEHOLDER": "Introdueix la descripció de l'atribut personalitzat",
+          "ERROR": "La descripció és necessària"
         },
         "MODEL": {
-          "LABEL": "Applies to",
-          "PLACEHOLDER": "Please select one",
-          "ERROR": "Model is required"
+          "LABEL": "S'aplica a",
+          "PLACEHOLDER": "Selecciona un",
+          "ERROR": "El model és necessari"
         },
         "TYPE": {
-          "LABEL": "Type",
+          "LABEL": "Tipus",
           "PLACEHOLDER": "Selecciona un tipus",
-          "ERROR": "Type is required",
+          "ERROR": "El tipus és necessari",
           "LIST": {
-            "LABEL": "List Values",
-            "PLACEHOLDER": "Please enter value and press enter key",
-            "ERROR": "Must have at least one value"
+            "LABEL": "Llista de valors",
+            "PLACEHOLDER": "Introdueix el valor i prem la tecla Intro",
+            "ERROR": "Ha de tenir almenys un valor"
           }
         },
         "KEY": {
-          "LABEL": "Key",
-          "PLACEHOLDER": "Enter custom attribute key",
-          "ERROR": "Key is required",
-          "IN_VALID": "Invalid key"
+          "LABEL": "Clau",
+          "PLACEHOLDER": "Introduïu la clau d'atribut personalitzada",
+          "ERROR": "La clau és necessària",
+          "IN_VALID": "Clau no vàlida"
         },
         "REGEX_PATTERN": {
-          "LABEL": "Regex Pattern",
-          "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+          "LABEL": "Patró d'expressió regular",
+          "PLACEHOLDER": "Introdueix un patró d'expressió regular d'atribut personalitzat. (Opcional)"
         },
         "REGEX_CUE": {
-          "LABEL": "Regex Cue",
-          "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+          "LABEL": "Senyal d'expressió regular",
+          "PLACEHOLDER": "Introdueix la pista del patró d'expressió regular. (Opcional)"
         },
         "ENABLE_REGEX": {
-          "LABEL": "Enable regex validation"
+          "LABEL": "Activa la validació d'expressions regulars"
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "Custom Attribute added successfully!",
-        "ERROR_MESSAGE": "Could not create a Custom Attribute. Please try again later."
+        "SUCCESS_MESSAGE": "Atribut personalitzat afegit correctament!",
+        "ERROR_MESSAGE": "No s'ha pogut crear un atribut personalitzat. Intenta-ho més tard."
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "Esborrar",
       "API": {
-        "SUCCESS_MESSAGE": "Custom Attribute deleted successfully.",
-        "ERROR_MESSAGE": "Couldn't delete the custom attribute. Try again."
+        "SUCCESS_MESSAGE": "Atribut personalitzat suprimit correctament.",
+        "ERROR_MESSAGE": "No s'ha pogut suprimir l'atribut personalitzat. Torna-ho a provar."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{attributeName}",
-        "PLACE_HOLDER": "Please type {attributeName} to confirm",
-        "MESSAGE": "Deleting will remove the custom attribute",
+        "TITLE": "Estàs segur que vols suprimir - %{attributeName}",
+        "PLACE_HOLDER": "Escriu {attributeName} per confirmar",
+        "MESSAGE": "En suprimir, s'eliminarà l'atribut personalitzat",
         "YES": "Suprimeix ",
         "NO": "Cancel·la"
       }
     },
     "EDIT": {
-      "TITLE": "Edit Custom Attribute",
+      "TITLE": "Edita atribut personalitzat",
       "UPDATE_BUTTON_TEXT": "Actualitza",
       "TYPE": {
         "LIST": {
-          "LABEL": "List Values",
-          "PLACEHOLDER": "Please enter values and press enter key"
+          "LABEL": "Llista de valors",
+          "PLACEHOLDER": "Introdueix els valors i prem la tecla Intro"
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "Custom Attribute updated successfully",
-        "ERROR_MESSAGE": "There was an error updating custom attribute, please try again"
+        "SUCCESS_MESSAGE": "Atribut personalitzat actualitzat correctament",
+        "ERROR_MESSAGE": "S'ha produït un error en actualitzar l'atribut personalitzat. Torneu-ho a provar"
       }
     },
     "TABS": {
       "HEADER": "Atributs personalitzats",
-      "CONVERSATION": "Conversation",
-      "CONTACT": "Contact"
+      "CONVERSATION": "Conversa",
+      "CONTACT": "Contacte"
     },
     "LIST": {
       "TABLE_HEADER": [
         "Nom",
         "Descripció",
-        "Type",
-        "Key"
+        "Tipus",
+        "Clau"
       ],
       "BUTTONS": {
         "EDIT": "Edita",
         "DELETE": "Esborrar"
       },
       "EMPTY_RESULT": {
-        "404": "There are no custom attributes created",
-        "NOT_FOUND": "There are no custom attributes configured"
+        "404": "No s'han creat atributs personalitzats",
+        "NOT_FOUND": "No hi ha atributs personalitzats configurats"
       },
       "REGEX_PATTERN": {
-        "LABEL": "Regex Pattern",
-        "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+        "LABEL": "Patró d'expressió regular",
+        "PLACEHOLDER": "Introdueix un patró d'expressió regular d'atribut personalitzat. (Opcional)"
       },
       "REGEX_CUE": {
-        "LABEL": "Regex Cue",
-        "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+        "LABEL": "Senyal d'expressió regular",
+        "PLACEHOLDER": "Introdueix la pista del patró d'expressió regular. (Opcional)"
       },
       "ENABLE_REGEX": {
-        "LABEL": "Enable regex validation"
+        "LABEL": "Activa la validació d'expressions regulars"
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ca/auditLogs.json b/app/javascript/dashboard/i18n/locale/ca/auditLogs.json
index e3dd7c68c1f2f..cc7ba55f98d70 100644
--- a/app/javascript/dashboard/i18n/locale/ca/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ca/auditLogs.json
@@ -1,14 +1,16 @@
 {
   "AUDIT_LOGS": {
-    "HEADER": "Audit Logs",
-    "HEADER_BTN_TXT": "Add Audit Logs",
-    "LOADING": "Fetching Audit Logs",
+    "HEADER": "Registres d'auditoria",
+    "HEADER_BTN_TXT": "Afegeix registres d'auditoria",
+    "LOADING": "S'estan recollint registres d'auditoria",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "No hi ha cap resposta que coincideixi amb aquesta consulta",
-    "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
+    "SIDEBAR_TXT": "<p><b>Registres d'auditoria</b> </p><p> Els registres d'auditoria són pistes d'esdeveniments i accions en un sistema de Chatwoot. </p>",
     "LIST": {
-      "404": "There are no Audit Logs available in this account.",
-      "TITLE": "Manage Audit Logs",
-      "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
+      "404": "No hi ha registres d'auditoria disponibles en aquest compte.",
+      "TITLE": "Gestiona els registres d'auditoria",
+      "DESC": "Els registres d'auditoria són pistes d'esdeveniments i accions en un sistema Chatwoot.",
       "TABLE_HEADER": [
         "User",
         "Temps",
@@ -16,56 +18,57 @@
       ]
     },
     "API": {
-      "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
+      "SUCCESS_MESSAGE": "Els registres d'auditoria s'han recuperat correctament",
       "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
     },
-    "DEFAULT_USER": "System",
+    "DEFAULT_USER": "Sistema",
     "AUTOMATION_RULE": {
-      "ADD": "%{agentName} created a new automation rule (#%{id})",
-      "EDIT": "%{agentName} updated an automation rule (#%{id})",
-      "DELETE": "%{agentName} deleted an automation rule (#%{id})"
+      "ADD": "%{agentName} ha creat una nova regla d'automatització (#%{id})",
+      "EDIT": "%{agentName} ha actualitzat una regla d'automatització (#%{id})",
+      "DELETE": "%{agentName} ha suprimit una regla d'automatització (#%{id})"
     },
     "ACCOUNT_USER": {
-      "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
+      "ADD": "%{agentName} ha convidat %{invitee} al compte com a %{role}",
       "EDIT": {
-        "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "SELF": "%{agentName} ha canviat els seus %{attributes} a %{values}",
+        "OTHER": "%{agentName} ha canviat %{attributes} de %{user} a %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
-      "ADD": "%{agentName} created a new inbox (#%{id})",
-      "EDIT": "%{agentName} updated an inbox (#%{id})",
-      "DELETE": "%{agentName} deleted an inbox (#%{id})"
+      "ADD": "%{agentName} ha creat una safata d'entrada nova (#%{id})",
+      "EDIT": "%{agentName} ha actualitzat una safata d'entrada (#%{id})",
+      "DELETE": "%{agentName} ha suprimit una safata d'entrada (#%{id})"
     },
     "WEBHOOK": {
-      "ADD": "%{agentName} created a new webhook (#%{id})",
-      "EDIT": "%{agentName} updated a webhook (#%{id})",
-      "DELETE": "%{agentName} deleted a webhook (#%{id})"
+      "ADD": "%{agentName} ha creat un nou webhook (#%{id})",
+      "EDIT": "%{agentName} ha actualitzat un webhook (#%{id})",
+      "DELETE": "%{agentName} ha suprimit un webhook (#%{id})"
     },
     "USER_ACTION": {
-      "SIGN_IN": "%{agentName} signed in",
-      "SIGN_OUT": "%{agentName} signed out"
+      "SIGN_IN": "%{agentName} ha iniciat la sessió",
+      "SIGN_OUT": "%{agentName} ha tancat la sessió"
     },
     "TEAM": {
-      "ADD": "%{agentName} created a new team (#%{id})",
-      "EDIT": "%{agentName} updated a team (#%{id})",
-      "DELETE": "%{agentName} deleted a team (#%{id})"
+      "ADD": "%{agentName} ha creat un equip nou (#%{id})",
+      "EDIT": "%{agentName} ha actualitzat un equip (#%{id})",
+      "DELETE": "%{agentName} ha suprimit un equip (#%{id})"
     },
     "MACRO": {
-      "ADD": "%{agentName} created a new macro (#%{id})",
-      "EDIT": "%{agentName} updated a macro (#%{id})",
-      "DELETE": "%{agentName} deleted a macro (#%{id})"
+      "ADD": "%{agentName} ha creat una macro nova (#%{id})",
+      "EDIT": "%{agentName} ha actualitzat una macro (#%{id})",
+      "DELETE": "%{agentName} ha suprimit una macro (#%{id})"
     },
     "INBOX_MEMBER": {
-      "ADD": "%{agentName} added %{user} to the inbox(#%{inbox_id})",
-      "REMOVE": "%{agentName} removed %{user} from the inbox(#%{inbox_id})"
+      "ADD": "%{agentName} ha afegit %{user} a la safata d'entrada(#%{inbox_id})",
+      "REMOVE": "%{agentName} ha eliminat %{user} de la safata d'entrada(#%{inbox_id})"
     },
     "TEAM_MEMBER": {
-      "ADD": "%{agentName} added %{user} to the team(#%{team_id})",
-      "REMOVE": "%{agentName} removed %{user} from the team(#%{team_id})"
+      "ADD": "%{agentName} ha afegit %{user} a l'equip (#%{team_id})",
+      "REMOVE": "%{agentName} ha eliminat %{user} de l'equip (#%{team_id})"
     },
     "ACCOUNT": {
-      "EDIT": "%{agentName} updated the account configuration (#%{id})"
+      "EDIT": "%{agentName} ha actualitzat la configuració del compte (#%{id})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/automation.json b/app/javascript/dashboard/i18n/locale/ca/automation.json
index 9f3429c8b16cd..65e9cba88baa1 100644
--- a/app/javascript/dashboard/i18n/locale/ca/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ca/automation.json
@@ -1,54 +1,54 @@
 {
   "AUTOMATION": {
-    "HEADER": "Automations",
-    "HEADER_BTN_TXT": "Add Automation Rule",
-    "LOADING": "Fetching automation rules",
-    "SIDEBAR_TXT": "<p><b>Automation Rules</b> <p>Automation can replace and automate existing processes that require manual effort. You can do many things with automation, including adding labels and assigning conversation to the best agent. So the team focuses on what they do best and spends more little time on manual tasks.</p>",
+    "HEADER": "Automatització",
+    "HEADER_BTN_TXT": "Afegeix una regla d'automatització",
+    "LOADING": "S'estan recollint regles d'automatització",
+    "SIDEBAR_TXT": "<p><b>Regles d'automatització</b> <p>L'automatització pot substituir i automatitzar processos existents que requereixen un esforç manual. Pots fer moltes coses amb l'automatització, com ara afegir etiquetes i assignar converses al millor agent. Així, l'equip se centra en allò que millor fa i dedica més poc temps a les tasques manuals.</p>",
     "ADD": {
-      "TITLE": "Add Automation Rule",
+      "TITLE": "Afegeix una regla d'automatització",
       "SUBMIT": "Crear",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "FORM": {
         "NAME": {
-          "LABEL": "Rule Name",
-          "PLACEHOLDER": "Enter rule name",
-          "ERROR": "Name is required"
+          "LABEL": "Nom de la regla",
+          "PLACEHOLDER": "Introdueix el nom de la regla",
+          "ERROR": "El valor és necessari"
         },
         "DESC": {
           "LABEL": "Descripció",
-          "PLACEHOLDER": "Enter rule description",
-          "ERROR": "Description is required"
+          "PLACEHOLDER": "Introdueix la descripció de la regla",
+          "ERROR": "La descripció és necessària"
         },
         "EVENT": {
           "LABEL": "Esdeveniment",
-          "PLACEHOLDER": "Please select one",
-          "ERROR": "Event is required"
+          "PLACEHOLDER": "Selecciona un",
+          "ERROR": "És necessari un esdeveniment"
         },
         "CONDITIONS": {
-          "LABEL": "Conditions"
+          "LABEL": "Condicions"
         },
         "ACTIONS": {
           "LABEL": "Accions"
         }
       },
-      "CONDITION_BUTTON_LABEL": "Add Condition",
-      "ACTION_BUTTON_LABEL": "Add Action",
+      "CONDITION_BUTTON_LABEL": "Afegeix condició",
+      "ACTION_BUTTON_LABEL": "Afegeix acció",
       "API": {
-        "SUCCESS_MESSAGE": "Automation rule added successfully",
-        "ERROR_MESSAGE": "Could not able to create a automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "La regla d'automatització s'ha afegit correctament",
+        "ERROR_MESSAGE": "No s'ha pogut crear una regla d'automatització. Intenta-ho més tard"
       }
     },
     "LIST": {
       "TABLE_HEADER": [
         "Nom",
         "Descripció",
-        "Active",
-        "Created on"
+        "Actiu",
+        "Creat el"
       ],
-      "404": "No automation rules found"
+      "404": "No s'han trobat regles d'automatització"
     },
     "DELETE": {
-      "TITLE": "Delete Automation Rule",
+      "TITLE": "Suprimeix una regla d'automatització",
       "SUBMIT": "Esborrar",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "CONFIRM": {
@@ -58,24 +58,24 @@
         "NO": "No, segueix "
       },
       "API": {
-        "SUCCESS_MESSAGE": "Automation rule deleted successfully",
-        "ERROR_MESSAGE": "Could not able to delete a automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "La regla d'automatització s'ha suprimit correctament",
+        "ERROR_MESSAGE": "No s'ha pogut suprimir una regla d'automatització. Intenta-ho més tard"
       }
     },
     "EDIT": {
-      "TITLE": "Edit Automation Rule",
+      "TITLE": "Edita una regla d'automatització",
       "SUBMIT": "Actualitza",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "API": {
-        "SUCCESS_MESSAGE": "Automation rule updated successfully",
-        "ERROR_MESSAGE": "Could not update automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "La regla d'automatització s'ha actualitzat correctament",
+        "ERROR_MESSAGE": "No s'ha pogut actualitzar una regla d'automatització. Intenta-ho més tard"
       }
     },
     "CLONE": {
-      "TOOLTIP": "Clone",
+      "TOOLTIP": "Clona",
       "API": {
-        "SUCCESS_MESSAGE": "Automation cloned successfully",
-        "ERROR_MESSAGE": "Could not clone automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "L'automatització s'ha clonat correctament",
+        "ERROR_MESSAGE": "No s'ha pogut clonar una regla d'automatització. Intenta-ho més tard"
       }
     },
     "FORM": {
@@ -83,36 +83,47 @@
       "CREATE": "Crear",
       "DELETE": "Esborrar",
       "CANCEL": "Cancel·la",
-      "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
+      "RESET_MESSAGE": "Si canvies el tipus d'esdeveniment, es restabliran les condicions i els esdeveniments que has afegit a continuació"
     },
     "CONDITION": {
-      "DELETE_MESSAGE": "You need to have atleast one condition to save",
-      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
-      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
+      "DELETE_MESSAGE": "Necessites almenys una condició per desar",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contacta amb Atributs personalitzats",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Atributs personalitzats de conversa"
     },
     "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"
+      "DELETE_MESSAGE": "Necessites almenys una acció per desar",
+      "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Introdueix el teu missatge aquí",
+      "TEAM_DROPDOWN_PLACEHOLDER": "Selecciona els equips",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
-      "ACTIVATION_TITLE": "Activate Automation Rule",
-      "DEACTIVATION_TITLE": "Deactivate Automation Rule",
-      "ACTIVATION_DESCRIPTION": "This action will activate the automation rule '{automationName}'. Are you sure you want to proceed?",
-      "DEACTIVATION_DESCRIPTION": "This action will deactivate the automation rule '{automationName}'. Are you sure you want to proceed?",
-      "ACTIVATION_SUCCESFUL": "Automation Rule Activated Successfully",
-      "DEACTIVATION_SUCCESFUL": "Automation Rule Deactivated Successfully",
-      "ACTIVATION_ERROR": "Could not Activate Automation, Please try again later",
-      "DEACTIVATION_ERROR": "Could not Deactivate Automation, Please try again later",
+      "ACTIVATION_TITLE": "Activa la regla d'automatització",
+      "DEACTIVATION_TITLE": "Desactiva la regla d'automatització",
+      "ACTIVATION_DESCRIPTION": "Aquesta acció activarà la regla d'automatització '{automationName}'. Estàs segur que vols continuar?",
+      "DEACTIVATION_DESCRIPTION": "Aquesta acció desactivarà la regla d'automatització '{automationName}'. Estàs segur que vols continuar?",
+      "ACTIVATION_SUCCESFUL": "La regla d'automatització s'ha activat correctament",
+      "DEACTIVATION_SUCCESFUL": "La regla d'automatització s'ha desactivat correctament",
+      "ACTIVATION_ERROR": "No s'ha pogut activar l'automatització. Intenta-ho més tard",
+      "DEACTIVATION_ERROR": "No s'ha pogut desactivar l'automatització. Intenta-ho més tard",
       "CONFIRMATION_LABEL": "Si",
       "CANCEL_LABEL": "No"
     },
     "ATTACHMENT": {
-      "UPLOAD_ERROR": "Could not upload attachment, Please try again",
-      "LABEL_IDLE": "Upload Attachment",
+      "UPLOAD_ERROR": "No s'ha pogut carregar el fitxer adjunt. Torna-ho a provar",
+      "LABEL_IDLE": "Puja fitxer adjunt",
       "LABEL_UPLOADING": "S'està carregant...",
-      "LABEL_UPLOADED": "Successfully Uploaded",
-      "LABEL_UPLOAD_FAILED": "Upload Failed"
+      "LABEL_UPLOADED": "S'ha pujat correctament",
+      "LABEL_UPLOAD_FAILED": "Ha fallat la pujada"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "El valor és necessari",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/bulkActions.json b/app/javascript/dashboard/i18n/locale/ca/bulkActions.json
index 4595a205bf688..b288c766e8cd0 100644
--- a/app/javascript/dashboard/i18n/locale/ca/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ca/bulkActions.json
@@ -1,40 +1,41 @@
 {
   "BULK_ACTION": {
-    "CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
+    "CONVERSATIONS_SELECTED": "%{conversationCount} converses seleccionades",
     "AGENT_SELECT_LABEL": "Seleccionar Agent",
-    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
-    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
-    "GO_BACK_LABEL": "Go back",
+    "ASSIGN_CONFIRMATION_LABEL": "Estas segur d'assignar %{conversationCount} %{conversationLabel} a",
+    "UNASSIGN_CONFIRMATION_LABEL": "Estàs segur de desassignar %{conversationCount} %{conversationLabel}?",
+    "GO_BACK_LABEL": "Torna",
     "ASSIGN_LABEL": "Assignar",
     "YES": "Si",
-    "ASSIGN_AGENT_TOOLTIP": "Assign agent",
-    "ASSIGN_TEAM_TOOLTIP": "Assign team",
-    "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
-    "ASSIGN_FAILED": "Failed to assign conversations. Please try again.",
-    "RESOLVE_SUCCESFUL": "Conversations resolved successfully.",
-    "RESOLVE_FAILED": "Failed to resolve conversations. Please try again.",
-    "ALL_CONVERSATIONS_SELECTED_ALERT": "Conversations visible on this page are only selected.",
-    "AGENT_LIST_LOADING": "Loading agents",
+    "SEARCH_INPUT_PLACEHOLDER": "Cercar",
+    "ASSIGN_AGENT_TOOLTIP": "Assigna un agent",
+    "ASSIGN_TEAM_TOOLTIP": "Assigna un equip",
+    "ASSIGN_SUCCESFUL": "Les converses s'han assignat correctament.",
+    "ASSIGN_FAILED": "No s'han pogut assignar les converses. Torna-ho a provar.",
+    "RESOLVE_SUCCESFUL": "Les converses s'han resolt correctament.",
+    "RESOLVE_FAILED": "No s'han pogut resoldre les converses. Torna-ho a provar.",
+    "ALL_CONVERSATIONS_SELECTED_ALERT": "Les converses visibles en aquesta pàgina només estan seleccionades.",
+    "AGENT_LIST_LOADING": "S'estan carregant els agents",
     "UPDATE": {
-      "CHANGE_STATUS": "Change status",
-      "SNOOZE_UNTIL": "Snooze",
-      "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
-      "UPDATE_FAILED": "Failed to update conversations. Please try again."
+      "CHANGE_STATUS": "Canvia l'estat",
+      "SNOOZE_UNTIL": "Posposat",
+      "UPDATE_SUCCESFUL": "L'estat de les converses s'ha actualitzat correctament.",
+      "UPDATE_FAILED": "No s'han pogut actualitzar les converses. Torna-ho a provar."
     },
     "LABELS": {
-      "ASSIGN_LABELS": "Assign labels",
-      "NO_LABELS_FOUND": "No labels found for",
-      "ASSIGN_SELECTED_LABELS": "Assign selected labels",
-      "ASSIGN_SUCCESFUL": "Labels assigned successfully.",
-      "ASSIGN_FAILED": "Failed to assign labels. Please try again."
+      "ASSIGN_LABELS": "Assignar etiquetes",
+      "NO_LABELS_FOUND": "No s'han trobat etiquetes per a",
+      "ASSIGN_SELECTED_LABELS": "Assigna les etiquetes seleccionades",
+      "ASSIGN_SUCCESFUL": "L'etiqueta s'ha assignat correctament.",
+      "ASSIGN_FAILED": "No s'han pogut assignar les etiquetes. Torna-ho a provar."
     },
     "TEAMS": {
       "TEAM_SELECT_LABEL": "Selecciona equip",
       "NONE": "Ningú",
-      "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
-      "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
-      "ASSIGN_FAILED": "Failed to assign team. Please try again."
+      "NO_TEAMS_AVAILABLE": "Encara no hi ha cap equip afegit a aquest compte.",
+      "ASSIGN_SELECTED_TEAMS": "Assigna l'equip seleccionat.",
+      "ASSIGN_SUCCESFUL": "Equips assignats correctament.",
+      "ASSIGN_FAILED": "No s'han pogut assignar els equips. Torna-ho a provar."
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/campaign.json b/app/javascript/dashboard/i18n/locale/ca/campaign.json
index 182e49bd6cfb3..547e400171805 100644
--- a/app/javascript/dashboard/i18n/locale/ca/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/ca/campaign.json
@@ -1,65 +1,65 @@
 {
   "CAMPAIGN": {
-    "HEADER": "Campaigns",
-    "SIDEBAR_TXT": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations. Click on <b>Add Campaign</b> to create a new campaign. You can also edit or delete an existing campaign by clicking on the Edit or Delete button.",
+    "HEADER": "Campanyes",
+    "SIDEBAR_TXT": "Els missatges proactius permeten al client enviar missatges de sortida als seus contactes que desencadenarien més converses. Feu clic a <b>Afegir una campanya</b> per crear una campanya nova. També pots editar o suprimir una campanya existent fent clic al botó Edita o Suprimir.",
     "HEADER_BTN_TXT": {
-      "ONE_OFF": "Create a one off campaign",
-      "ONGOING": "Create a ongoing campaign"
+      "ONE_OFF": "Crea una campanya única",
+      "ONGOING": "Crea una campanya en curs"
     },
     "ADD": {
-      "TITLE": "Create a campaign",
-      "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
+      "TITLE": "Crea una campanya",
+      "DESC": "Els missatges proactius permeten al client enviar missatges de sortida als seus contactes que desencadenarien més converses.",
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "CREATE_BUTTON_TEXT": "Crear",
       "FORM": {
         "TITLE": {
-          "LABEL": "Title",
-          "PLACEHOLDER": "Please enter the title of campaign",
-          "ERROR": "Title is required"
+          "LABEL": "Títol",
+          "PLACEHOLDER": "Introduïu el títol de la campanya",
+          "ERROR": "El títol és necessari"
         },
         "SCHEDULED_AT": {
-          "LABEL": "Scheduled time",
-          "PLACEHOLDER": "Please select the time",
-          "CONFIRM": "Confirm",
-          "ERROR": "Scheduled time is required"
+          "LABEL": "Hora programada",
+          "PLACEHOLDER": "Selecciona l'hora",
+          "CONFIRM": "Confirma",
+          "ERROR": "Es requereix hora programada"
         },
         "AUDIENCE": {
-          "LABEL": "Audience",
-          "PLACEHOLDER": "Select the customer labels",
-          "ERROR": "Audience is required"
+          "LABEL": "Públic",
+          "PLACEHOLDER": "Selecciona les etiquetes dels clients",
+          "ERROR": "L'audiència és obligatòria"
         },
         "INBOX": {
-          "LABEL": "Select Inbox",
-          "PLACEHOLDER": "Select Inbox",
-          "ERROR": "Inbox is required"
+          "LABEL": "Selecciona Safata d'entrada",
+          "PLACEHOLDER": "Selecciona Safata d'entrada",
+          "ERROR": "Safata d'entrada és necessària"
         },
         "MESSAGE": {
           "LABEL": "Missatge",
-          "PLACEHOLDER": "Please enter the message of campaign",
-          "ERROR": "Message is required"
+          "PLACEHOLDER": "Introdueix el missatge de la campanya",
+          "ERROR": "El missatge és obligatori"
         },
         "SENT_BY": {
           "LABEL": "Enviat per",
-          "PLACEHOLDER": "Please select the the content of campaign",
-          "ERROR": "Sender is required"
+          "PLACEHOLDER": "Selecciona el contingut de la campanya",
+          "ERROR": "El remitent és obligatori"
         },
         "END_POINT": {
           "LABEL": "URL",
-          "PLACEHOLDER": "Please enter the URL",
+          "PLACEHOLDER": "Introdueix la URL vàlid",
           "ERROR": "Introduïu una URL vàlid"
         },
         "TIME_ON_PAGE": {
-          "LABEL": "Time on page(Seconds)",
-          "PLACEHOLDER": "Please enter the time",
-          "ERROR": "Time on page is required"
+          "LABEL": "Temps a la pàgina (segons)",
+          "PLACEHOLDER": "Introdueix l'hora",
+          "ERROR": "L'hora a la pàgina és obligatori"
         },
-        "ENABLED": "Enable campaign",
-        "TRIGGER_ONLY_BUSINESS_HOURS": "Trigger only during business hours",
-        "SUBMIT": "Add Campaign"
+        "ENABLED": "Activa la campanya",
+        "TRIGGER_ONLY_BUSINESS_HOURS": "Activa només durant l'horari comercial",
+        "SUBMIT": "Afegeix campanya"
       },
       "API": {
-        "SUCCESS_MESSAGE": "Campaign created successfully",
-        "ERROR_MESSAGE": "There was an error. Please try again."
+        "SUCCESS_MESSAGE": "La campanya s'ha creat correctament",
+        "ERROR_MESSAGE": "S'ha produït un error. Torna-ho a provar."
       }
     },
     "DELETE": {
@@ -71,31 +71,31 @@
         "NO": "No, segueix "
       },
       "API": {
-        "SUCCESS_MESSAGE": "Campaign deleted successfully",
-        "ERROR_MESSAGE": "Could not delete the campaign. Please try again later."
+        "SUCCESS_MESSAGE": "La campanya s'ha suprimit correctament",
+        "ERROR_MESSAGE": "No s'ha pogut esborrar la campanya. Torneu-ho a provar."
       }
     },
     "EDIT": {
-      "TITLE": "Edit campaign",
+      "TITLE": "Edita la campanya",
       "UPDATE_BUTTON_TEXT": "Actualitza",
       "API": {
-        "SUCCESS_MESSAGE": "Campaign updated successfully",
+        "SUCCESS_MESSAGE": "La campanya s'ha actualitzat correctament",
         "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
       }
     },
     "LIST": {
-      "LOADING_MESSAGE": "Loading campaigns...",
-      "404": "There are no campaigns created for this inbox.",
+      "LOADING_MESSAGE": "S'estan carregant les campanyes...",
+      "404": "No hi ha cap campanya creada per a aquesta safata d'entrada.",
       "TABLE_HEADER": {
-        "TITLE": "Title",
+        "TITLE": "Títol",
         "MESSAGE": "Missatge",
-        "INBOX": "Inbox",
+        "INBOX": "Safata d'entrada",
         "STATUS": "Estat",
-        "SENDER": "Sender",
+        "SENDER": "Remitent",
         "URL": "URL",
-        "SCHEDULED_AT": "Scheduled time",
-        "TIME_ON_PAGE": "Time(Seconds)",
-        "CREATED_AT": "Created at"
+        "SCHEDULED_AT": "Hora programada",
+        "TIME_ON_PAGE": "Temps (segons)",
+        "CREATED_AT": "Creat per"
       },
       "BUTTONS": {
         "ADD": "Afegir",
@@ -105,22 +105,22 @@
       "STATUS": {
         "ENABLED": "Habilita",
         "DISABLED": "Inhabilita",
-        "COMPLETED": "Completed",
-        "ACTIVE": "Active"
+        "COMPLETED": "Completat",
+        "ACTIVE": "Actiu"
       },
       "SENDER": {
         "BOT": "Bot"
       }
     },
     "ONE_OFF": {
-      "HEADER": "One off campaigns",
-      "404": "There are no one off campaigns created",
-      "INBOXES_NOT_FOUND": "Please create an sms inbox and start adding campaigns"
+      "HEADER": "Campanyes puntuals",
+      "404": "No s'han creat campanyes individuals",
+      "INBOXES_NOT_FOUND": "Crea una safata d'entrada de SMS i comença a afegir campanyes"
     },
     "ONGOING": {
-      "HEADER": "Ongoing campaigns",
-      "404": "There are no ongoing campaigns created",
-      "INBOXES_NOT_FOUND": "Please create an website inbox and start adding campaigns"
+      "HEADER": "Campanyes en curs",
+      "404": "No hi ha campanyes en curs creades",
+      "INBOXES_NOT_FOUND": "Crea una safata d'entrada del lloc web i comença a afegir campanyes"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ca/cannedMgmt.json
index f0129c7bc51e0..6133fab01288a 100644
--- a/app/javascript/dashboard/i18n/locale/ca/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Respostes predeterminades",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Afegir resposta predeterminada",
     "LOADING": "S'estan recollint les respostes predeterminades...",
     "SEARCH_404": "No hi ha cap resposta que coincideixi amb aquesta consulta.",
-    "SIDEBAR_TXT": "<p><b>Respostes predeterminades</b> </p><p> Les respostes predeterminades són plantilles de respostes escrites prèviament que us ajuden a respondre ràpidament a una conversa. Per inserir una resposta predefinida durant un xat, els agents poden escriure un codi curt precedit d'un caràcter '/'. </p><p> Pots gestionar les teves respostes predefinides des d'aquesta pàgina o crear-ne de noves mitjançant el botó \"Afegeix una resposta predefinida\".</p><p>Obre el <a target=\"_blank\" href=\"https: //www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Manual de respostes llaunes</a> en una altra pestanya per ajudar-te.</p><p>També, fes una ullada al nou <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank \">Biblioteca de respostes predeterminades</a>.</p>",
     "LIST": {
       "404": "No hi ha respostes predeterminades disponibles en aquest compte.",
       "TITLE": "Gestiona les respostes predeterminades",
diff --git a/app/javascript/dashboard/i18n/locale/ca/chatlist.json b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
index 971ae7f33ccf5..120478b4bac65 100644
--- a/app/javascript/dashboard/i18n/locale/ca/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
@@ -59,22 +59,22 @@
         "TEXT": "Última activitat: La més nova primer"
       },
       "created_at_desc": {
-        "TEXT": "Created at: Newest first"
+        "TEXT": "Creat a: El més nou primer"
       },
       "created_at_asc": {
-        "TEXT": "Created at: Oldest first"
+        "TEXT": "Creat a: el més antic primer"
       },
       "priority_desc": {
-        "TEXT": "Priority: Highest first"
+        "TEXT": "Prioritat: primer el més alt"
       },
       "priority_asc": {
-        "TEXT": "Priority: Lowest first"
+        "TEXT": "Prioritat: primer el més baix"
       },
       "waiting_since_asc": {
-        "TEXT": "Pending Response: Longest first"
+        "TEXT": "Resposta pendent: el més llarg primer"
       },
       "waiting_since_desc": {
-        "TEXT": "Pending Response: Shortest first"
+        "TEXT": "Resposta pendent: el més curt primer"
       }
     },
     "ATTACHMENTS": {
@@ -98,20 +98,20 @@
       }
     },
     "CHAT_SORT_BY_FILTER": {
-      "TITLE": "Sort conversation",
+      "TITLE": "Ordena la conversa",
       "DROPDOWN_TITLE": "Ordenat per",
       "ITEMS": {
         "LATEST": {
-          "NAME": "Last activity at",
-          "LABEL": "Last activity"
+          "NAME": "Darrera activitat a les",
+          "LABEL": "Darrera activitat"
         },
         "CREATED_AT": {
           "NAME": "Creat per",
           "LABEL": "Creat per"
         },
         "LAST_USER_MESSAGE_AT": {
-          "NAME": "Last user message at",
-          "LABEL": "Last message"
+          "NAME": "Últim missatge de l'usuari a les",
+          "LABEL": "Últim missatge"
         }
       }
     },
@@ -120,8 +120,8 @@
     "REPLY_TO_TWEET": "Respon a aquest tuit",
     "LINK_TO_STORY": "Ves a la història d'instagram",
     "SENT": "Enviat correctament",
-    "READ": "Read successfully",
-    "DELIVERED": "Delivered successfully",
+    "READ": "Llegit correctament",
+    "DELIVERED": "S'ha lliurat correctament",
     "NO_MESSAGES": "Cap Missatge",
     "NO_CONTENT": "No hi ha contingut disponible",
     "HIDE_QUOTED_TEXT": "Amaga text entre cometes",
diff --git a/app/javascript/dashboard/i18n/locale/ca/contact.json b/app/javascript/dashboard/i18n/locale/ca/contact.json
index 7ba57c201c854..aa7707a1b3051 100644
--- a/app/javascript/dashboard/i18n/locale/ca/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ca/contact.json
@@ -34,15 +34,15 @@
         "TITLE": "Afegir etiquetes",
         "PLACEHOLDER": "Cerca etiquetes",
         "NO_RESULT": "No s'han trobat etiquetes",
-        "CREATE_LABEL": "Create new label"
+        "CREATE_LABEL": "Crea una etiqueta nova"
       }
     },
     "MERGE_CONTACT": "Reagrupa contacte",
     "CONTACT_ACTIONS": "Accions de contacte",
-    "MUTE_CONTACT": "Block Contact",
-    "UNMUTE_CONTACT": "Unblock Contact",
-    "MUTED_SUCCESS": "This contact is blocked successfully. You will not be notified of any future conversations.",
-    "UNMUTED_SUCCESS": "This contact is unblocked successfully.",
+    "MUTE_CONTACT": "Bloqueja el contacte",
+    "UNMUTE_CONTACT": "Desbloqueja el contacte",
+    "MUTED_SUCCESS": "Aquest contacte s'ha bloquejat correctament. No se us notificarà cap conversa futura.",
+    "UNMUTED_SUCCESS": "Aquest contacte s'ha desbloquejat correctament.",
     "SEND_TRANSCRIPT": "Envia la transcripció",
     "EDIT_LABEL": "Edita",
     "SIDEBAR_SECTIONS": {
@@ -72,7 +72,7 @@
       "SUBMIT": "Importa",
       "CANCEL": "Cancel·la"
     },
-    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+    "SUCCESS_MESSAGE": "Es notificarà per correu electrònic quan s'hagi completat la importació.",
     "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
   },
   "EXPORT_CONTACTS": {
@@ -137,9 +137,9 @@
         "PLACEHOLDER": "Introdueix el número de telèfon del contacte",
         "LABEL": "Número de telèfon",
         "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]",
-        "ERROR": "Phone number should be either empty or of E.164 format",
-        "DIAL_CODE_ERROR": "Please select a dial code from the list",
-        "DUPLICATE": "This phone number is in use for another contact."
+        "ERROR": "El número de telèfon ha d'estar buit o en format E.164",
+        "DIAL_CODE_ERROR": "Selecciona un codi de marcatge de la llista",
+        "DUPLICATE": "Aquest número de telèfon està en ús per a un altre contacte."
       },
       "LOCATION": {
         "PLACEHOLDER": "Introdueix la ubicació del contacte",
@@ -150,7 +150,7 @@
         "LABEL": "Nom de la companyia"
       },
       "COUNTRY": {
-        "PLACEHOLDER": "Enter the country name",
+        "PLACEHOLDER": "Introdueix el nom del país",
         "LABEL": "Nom del país",
         "SELECT_PLACEHOLDER": "Selecciona",
         "REMOVE": "Suprimeix",
@@ -192,7 +192,7 @@
     "BUTTON_LABEL": "Inicia la conversa",
     "TITLE": "Nova conversació",
     "DESC": "Inicia una conversa nova enviant un missatge nou.",
-    "NO_INBOX": "Couldn't find an inbox to initiate a new conversation with this contact.",
+    "NO_INBOX": "No s'ha pogut trobar una safata d'entrada per iniciar una conversa nova amb aquest contacte.",
     "FORM": {
       "TO": {
         "LABEL": "Per"
@@ -200,32 +200,32 @@
       "INBOX": {
         "LABEL": "Inbox",
         "PLACEHOLDER": "Trieu la safata d'entrada d'origen",
-        "ERROR": "Select an inbox"
+        "ERROR": "Selecciona una Safata d'entrada"
       },
       "SUBJECT": {
         "LABEL": "Assumpte",
         "PLACEHOLDER": "Assumpte",
-        "ERROR": "Subject can't be empty"
+        "ERROR": "L'assumpte no pot estar buit"
       },
       "MESSAGE": {
         "LABEL": "Missatge",
-        "PLACEHOLDER": "Write your message here",
+        "PLACEHOLDER": "Escriu el teu missatge aquí",
         "ERROR": "El missatge no pot estar buit"
       },
       "ATTACHMENTS": {
         "SELECT": "Trieu fitxers",
         "HELP_TEXT": "Arrossegueu i deixeu anar fitxers aquí o trieu fitxers per adjuntar"
       },
-      "SUBMIT": "Send message",
+      "SUBMIT": "Envia missatge",
       "CANCEL": "Cancel·la",
-      "SUCCESS_MESSAGE": "Message sent!",
+      "SUCCESS_MESSAGE": "Missatges enviat!",
       "GO_TO_CONVERSATION": "Veure",
-      "ERROR_MESSAGE": "Couldn't send! try again"
+      "ERROR_MESSAGE": "No s'ha pogut enviar! torna-ho a provar"
     }
   },
   "CONTACTS_PAGE": {
     "HEADER": "Contactes",
-    "FIELDS": "Contact fields",
+    "FIELDS": "Camps de contacte",
     "SEARCH_BUTTON": "Cercar",
     "SEARCH_INPUT_PLACEHOLDER": "Cerca de contactes",
     "FILTER_CONTACTS": "Filtre",
@@ -235,25 +235,25 @@
     "LIST": {
       "LOADING_MESSAGE": "Carregant contactes...",
       "404": "No hi ha cap contacte que coincideixi amb la vostra cerca 🔍",
-      "NO_CONTACTS": "There are no available contacts",
+      "NO_CONTACTS": "No hi ha contactes disponibles",
       "TABLE_HEADER": {
         "NAME": "Nom",
         "PHONE_NUMBER": "Número de telèfon",
         "CONVERSATIONS": "Converses",
-        "LAST_ACTIVITY": "Last Activity",
-        "CREATED_AT": "Created At",
+        "LAST_ACTIVITY": "Darrera activitat",
+        "CREATED_AT": "Creat per",
         "COUNTRY": "País",
         "CITY": "Ciutat",
-        "SOCIAL_PROFILES": "Social Profiles",
+        "SOCIAL_PROFILES": "Perfils socials",
         "COMPANY": "Companyia",
         "EMAIL_ADDRESS": "Adreça de correu electrònic"
       },
-      "VIEW_DETAILS": "View details"
+      "VIEW_DETAILS": "Veure detalls"
     }
   },
   "CONTACT_PROFILE": {
     "BACK_BUTTON": "Contactes",
-    "LOADING": "Loading contact profile..."
+    "LOADING": "S'està carregant el perfil de contacte..."
   },
   "REMINDER": {
     "ADD_BUTTON": {
@@ -267,7 +267,7 @@
   },
   "NOTES": {
     "FETCHING_NOTES": "S'estan obtenint notes...",
-    "NOT_AVAILABLE": "There are no notes created for this contact",
+    "NOT_AVAILABLE": "No s'han creat notes per a aquest contacte",
     "HEADER": {
       "TITLE": "Notes"
     },
@@ -318,8 +318,8 @@
         "ERROR": "El nom de l'atribut personalitzat no és vàlid"
       },
       "VALUE": {
-        "LABEL": "Attribute value",
-        "PLACEHOLDER": "Eg: 11901 "
+        "LABEL": "Valor de l'atribut",
+        "PLACEHOLDER": "Ex: 11901 "
       },
       "ADD": {
         "TITLE": "Crear nou atribut ",
@@ -348,27 +348,27 @@
       }
     },
     "VALIDATIONS": {
-      "REQUIRED": "Valid value is required",
-      "INVALID_URL": "Invalid URL",
-      "INVALID_INPUT": "Invalid Input"
+      "REQUIRED": "Un valor vàlid és necessari",
+      "INVALID_URL": "URL no vàlid",
+      "INVALID_INPUT": "Entrada incorrecta"
     }
   },
   "MERGE_CONTACTS": {
-    "TITLE": "Merge contacts",
+    "TITLE": "Fusiona contactes",
     "DESCRIPTION": "Merge contacts to combine two profiles into one, including all attributes and conversations. In case of conflict, the Primary contact’ s attributes will take precedence.",
     "PRIMARY": {
-      "TITLE": "Primary contact",
-      "HELP_LABEL": "To be deleted"
+      "TITLE": "Contacte principal",
+      "HELP_LABEL": "Per esborrar"
     },
     "PARENT": {
-      "TITLE": "Contact to merge",
-      "PLACEHOLDER": "Search for a contact",
-      "HELP_LABEL": "To be kept"
+      "TITLE": "Contacte per fusionar",
+      "PLACEHOLDER": "Cerca un contacte",
+      "HELP_LABEL": "S'ha de mantenir"
     },
     "SUMMARY": {
       "TITLE": "Resum",
-      "DELETE_WARNING": "Contact of <strong>%{primaryContactName}</strong> will be deleted.",
-      "ATTRIBUTE_WARNING": "Contact details of <strong>%{primaryContactName}</strong> will be copied to <strong>%{parentContactName}</strong>."
+      "DELETE_WARNING": "El contacte de <strong>%{primaryContactName}</strong> es suprimirà.",
+      "ATTRIBUTE_WARNING": "Les dades de contacte de <strong>%{primaryContactName}</strong> es copiaran a <strong>%{parentContactName}</strong>."
     },
     "SEARCH": {
       "ERROR": "ERROR_MESSAGE"
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contacte fusionat correctament",
       "ERROR_MESSAGE": "No s'ha pogut fusionar els contactes, torna-ho a provar!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/contactFilters.json b/app/javascript/dashboard/i18n/locale/ca/contactFilters.json
index d70dc97d47310..0e0fdd6ae5344 100644
--- a/app/javascript/dashboard/i18n/locale/ca/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ca/contactFilters.json
@@ -1,20 +1,20 @@
 {
   "CONTACTS_FILTER": {
-    "TITLE": "Filter Contacts",
-    "SUBTITLE": "Add filters below and hit 'Submit' to filter contacts.",
-    "EDIT_CUSTOM_SEGMENT": "Edit Segment",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your segment.",
+    "TITLE": "Filtra els contactes",
+    "SUBTITLE": "Afegeix filtres a continuació i prem \"Envia\" per filtrar els contactes.",
+    "EDIT_CUSTOM_SEGMENT": "Edita segment",
+    "CUSTOM_VIEWS_SUBTITLE": "Afegeix o elimina filtres i actualitza el teu segment.",
     "ADD_NEW_FILTER": "Afegeix filtre",
-    "CLEAR_ALL_FILTERS": "Clear All Filters",
-    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
+    "CLEAR_ALL_FILTERS": "Esborra tots els filtres",
+    "FILTER_DELETE_ERROR": "Hauries de tenir almenys un filtre per desar",
     "SUBMIT_BUTTON_LABEL": "Envia",
-    "UPDATE_BUTTON_LABEL": "Update Segment",
+    "UPDATE_BUTTON_LABEL": "Actualitza el segment",
     "CANCEL_BUTTON_LABEL": "Cancel·la",
-    "CLEAR_BUTTON_LABEL": "Clear Filters",
+    "CLEAR_BUTTON_LABEL": "Esborra els filtres",
     "EMPTY_VALUE_ERROR": "El valor és necessari",
-    "SEGMENT_LABEL": "Segment Name",
-    "SEGMENT_QUERY_LABEL": "Segment Query",
-    "TOOLTIP_LABEL": "Filter contacts",
+    "SEGMENT_LABEL": "Nom del segment",
+    "SEGMENT_QUERY_LABEL": "Consulta de segments",
+    "TOOLTIP_LABEL": "Filtra els contactes",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "I",
       "OR": "O"
@@ -27,14 +27,14 @@
       "is_present": "És present",
       "is_not_present": "No és present",
       "is_greater_than": "És més gran que",
-      "is_lesser_than": "Is lesser than",
+      "is_lesser_than": "És més petit que",
       "days_before": "És x dies abans"
     },
     "ATTRIBUTES": {
       "NAME": "Nom",
       "EMAIL": "Correu electrònic",
       "PHONE_NUMBER": "Número de telèfon",
-      "IDENTIFIER": "Identifier",
+      "IDENTIFIER": "Identificador",
       "CITY": "Ciutat",
       "COUNTRY": "País",
       "CUSTOM_ATTRIBUTE_LIST": "Llista",
@@ -42,14 +42,14 @@
       "CUSTOM_ATTRIBUTE_NUMBER": "Número",
       "CUSTOM_ATTRIBUTE_LINK": "Enllaç",
       "CUSTOM_ATTRIBUTE_CHECKBOX": "Casella de selecció",
-      "CREATED_AT": "Created At",
-      "LAST_ACTIVITY": "Last Activity",
-      "REFERER_LINK": "Referrer link",
+      "CREATED_AT": "Creat per",
+      "LAST_ACTIVITY": "Darrera activitat",
+      "REFERER_LINK": "Enllaç de referència",
       "BLOCKED": "Blocat"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Standard Filters",
-      "ADDITIONAL_FILTERS": "Additional Filters",
+      "STANDARD_FILTERS": "Filtres estàndard",
+      "ADDITIONAL_FILTERS": "Filtres addicionals",
       "CUSTOM_ATTRIBUTES": "Atributs personalitzats"
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ca/conversation.json b/app/javascript/dashboard/i18n/locale/ca/conversation.json
index 8b1b7e5fa1d52..e83787f3d1f97 100644
--- a/app/javascript/dashboard/i18n/locale/ca/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ca/conversation.json
@@ -40,19 +40,19 @@
     "UNKNOWN_FILE_TYPE": "Fitxer desconegut",
     "SAVE_CONTACT": "Desar",
     "UPLOADING_ATTACHMENTS": "Pujant fitxers adjunts...",
-    "REPLIED_TO_STORY": "Replied to your story",
-    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
-    "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
-    "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
-    "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
-    "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
+    "REPLIED_TO_STORY": "Va respondre a la teva història",
+    "UNSUPPORTED_MESSAGE": "Aquest missatge no està suportat.",
+    "UNSUPPORTED_MESSAGE_FACEBOOK": "Aquest missatge no està suportat. Pots veure aquest missatge a l'aplicació Facebook Messenger.",
+    "UNSUPPORTED_MESSAGE_INSTAGRAM": "Aquest missatge no està suportat. Pots veure aquest missatge a l'aplicació d'Instagram.",
+    "SUCCESS_DELETE_MESSAGE": "El missatge s'ha suprimit correctament",
+    "FAIL_DELETE_MESSSAGE": "No s'ha pogut suprimir el missatge! Torna-ho a provar",
     "NO_RESPONSE": "Sense resposta",
-    "RATING_TITLE": "Rating",
-    "FEEDBACK_TITLE": "Feedback",
-    "REPLY_MESSAGE_NOT_FOUND": "Message not available",
+    "RATING_TITLE": "Valoració",
+    "FEEDBACK_TITLE": "Comentaris",
+    "REPLY_MESSAGE_NOT_FOUND": "Missatge no disponible",
     "CARD": {
-      "SHOW_LABELS": "Show labels",
-      "HIDE_LABELS": "Hide labels"
+      "SHOW_LABELS": "Mostra etiquetes",
+      "HIDE_LABELS": "Amaga etiquetes"
     },
     "HEADER": {
       "RESOLVE_ACTION": "Resoldre",
@@ -61,31 +61,31 @@
       "OPEN": "Més",
       "CLOSE": "Tanca",
       "DETAILS": "detalls",
-      "SNOOZED_UNTIL": "Snoozed until",
-      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
-      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
-      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
+      "SNOOZED_UNTIL": "Posposat fins a",
+      "SNOOZED_UNTIL_TOMORROW": "Posposat fins demà",
+      "SNOOZED_UNTIL_NEXT_WEEK": "Posposat fins a la setmana vinent",
+      "SNOOZED_UNTIL_NEXT_REPLY": "Posposat fins a la següent resposta",
       "SLA_STATUS": {
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
         "RT": "RT {status}",
-        "MISSED": "missed",
-        "DUE": "due"
+        "MISSED": "perduda",
+        "DUE": "límit"
       }
     },
     "RESOLVE_DROPDOWN": {
-      "MARK_PENDING": "Mark as pending",
-      "SNOOZE_UNTIL": "Snooze",
+      "MARK_PENDING": "Marca com a pendent",
+      "SNOOZE_UNTIL": "Posposat",
       "SNOOZE": {
-        "TITLE": "Snooze until",
-        "NEXT_REPLY": "Next reply",
-        "TOMORROW": "Tomorrow",
-        "NEXT_WEEK": "Next week"
+        "TITLE": "Posposat fins a",
+        "NEXT_REPLY": "Següent resposta",
+        "TOMORROW": "Demà",
+        "NEXT_WEEK": "Pròxima setmana"
       }
     },
     "CUSTOM_SNOOZE": {
-      "TITLE": "Snooze until",
-      "APPLY": "Snooze",
+      "TITLE": "Posposat fins a",
+      "APPLY": "Posposat",
       "CANCEL": "Cancel·la"
     },
     "PRIORITY": {
@@ -93,92 +93,93 @@
       "OPTIONS": {
         "NONE": "Ningú",
         "URGENT": "Urgent",
-        "HIGH": "High",
-        "MEDIUM": "Medium",
-        "LOW": "Low"
+        "HIGH": "Alta",
+        "MEDIUM": "Mitjana",
+        "LOW": "Baixa"
       },
       "CHANGE_PRIORITY": {
         "SELECT_PLACEHOLDER": "Ningú",
-        "INPUT_PLACEHOLDER": "Select priority",
+        "INPUT_PLACEHOLDER": "Selecciona la prioritat",
         "NO_RESULTS": "No s'ha trobat agents",
-        "SUCCESSFUL": "Changed priority of conversation id %{conversationId} to %{priority}",
-        "FAILED": "Couldn't change priority. Please try again."
+        "SUCCESSFUL": "S'ha canviat la prioritat de l'identificador de conversa %{conversationId} a %{priority}",
+        "FAILED": "No s'ha pogut canviar la prioritat. Si us plau, torna-ho a provar."
       }
     },
     "CARD_CONTEXT_MENU": {
-      "PENDING": "Mark as pending",
-      "RESOLVED": "Mark as resolved",
-      "MARK_AS_UNREAD": "Mark as unread",
+      "PENDING": "Marca com a pendent",
+      "RESOLVED": "Marca com a resolt",
+      "MARK_AS_UNREAD": "Marca com a no llegit",
       "REOPEN": "Torna a obrir la conversa",
       "SNOOZE": {
-        "TITLE": "Snooze",
-        "NEXT_REPLY": "Until next reply",
-        "TOMORROW": "Until tomorrow",
-        "NEXT_WEEK": "Until next week"
+        "TITLE": "Posposat",
+        "NEXT_REPLY": "Fins a la propera resposta",
+        "TOMORROW": "Fins demà",
+        "NEXT_WEEK": "Fins a la setmana vinent"
       },
-      "ASSIGN_AGENT": "Assign agent",
-      "ASSIGN_LABEL": "Assign label",
-      "AGENTS_LOADING": "Loading agents...",
-      "ASSIGN_TEAM": "Assign team",
+      "ASSIGN_AGENT": "Assigna un agent",
+      "ASSIGN_LABEL": "Assigna etiqueta",
+      "AGENTS_LOADING": "S'estan carregant els agents...",
+      "ASSIGN_TEAM": "Assigna un equip",
       "API": {
         "AGENT_ASSIGNMENT": {
-          "SUCCESFUL": "Conversation id %{conversationId} assigned to \"%{agentName}\"",
-          "FAILED": "Couldn't assign agent. Please try again."
+          "SUCCESFUL": "Id de conversa %{conversationId} assignat a \"%{agentName}\"",
+          "FAILED": "No s'ha pogut assignar l'agent. Torna-ho a provar."
         },
         "LABEL_ASSIGNMENT": {
-          "SUCCESFUL": "Assigned label #%{labelName} to conversation id %{conversationId}",
-          "FAILED": "Couldn't assign label. Please try again."
+          "SUCCESFUL": "S'ha assignat l'etiqueta #%{labelName} a l'id de conversa %{conversationId}",
+          "FAILED": "No s'ha pogut assignar l'etiqueta. Torna-ho a provar."
         },
         "TEAM_ASSIGNMENT": {
-          "SUCCESFUL": "Assigned team \"%{team}\" to conversation id %{conversationId}",
-          "FAILED": "Couldn't assign team. Please try again."
+          "SUCCESFUL": "S'ha assignat l'equip \"%{team}\" a l'id de conversa %{conversationId}",
+          "FAILED": "No s'ha pogut assignar l'equip. Torna-ho a provar."
         }
       }
     },
     "FOOTER": {
-      "MESSAGE_SIGN_TOOLTIP": "Message signature",
-      "ENABLE_SIGN_TOOLTIP": "Enable signature",
-      "DISABLE_SIGN_TOOLTIP": "Disable signature",
+      "MESSAGE_SIGN_TOOLTIP": "Signatura del missatge",
+      "ENABLE_SIGN_TOOLTIP": "Activa la signatura",
+      "DISABLE_SIGN_TOOLTIP": "Desactiva la signatura",
       "MSG_INPUT": "Shift + enter per a una línia nova. Comença amb '/' per seleccionar una resposta predeterminada.",
       "PRIVATE_MSG_INPUT": "Shift + enter per una línia nova. Això serà visible només per als Agents",
-      "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Message signature is not configured, please configure it in profile settings.",
-      "CLICK_HERE": "Click here to update"
+      "MESSAGE_SIGNATURE_NOT_CONFIGURED": "La signatura del missatge no està configurada, configura-la a la configuració del perfil.",
+      "CLICK_HERE": "Fes clic aquí per actualitzar",
+      "WHATSAPP_TEMPLATES": "Plantilles de Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Respon",
       "PRIVATE_NOTE": "Nota privada",
       "SEND": "Envia",
       "CREATE": "Afegeix una nota",
-      "INSERT_READ_MORE": "Read more",
-      "DISMISS_REPLY": "Dismiss reply",
-      "REPLYING_TO": "Replying to:",
+      "INSERT_READ_MORE": "Llegir més",
+      "DISMISS_REPLY": "Ignora la resposta",
+      "REPLYING_TO": "Responent a:",
       "TIP_FORMAT_ICON": "Mostra l'editor de text enriquit",
       "TIP_EMOJI_ICON": "Mostra la selecció d'emoticones",
       "TIP_ATTACH_ICON": "Ajuntar fitxers",
-      "TIP_AUDIORECORDER_ICON": "Record audio",
-      "TIP_AUDIORECORDER_PERMISSION": "Allow access to audio",
-      "TIP_AUDIORECORDER_ERROR": "Could not open the audio",
-      "DRAG_DROP": "Drag and drop here to attach",
-      "START_AUDIO_RECORDING": "Start audio recording",
-      "STOP_AUDIO_RECORDING": "Stop audio recording",
+      "TIP_AUDIORECORDER_ICON": "Gravar àudio",
+      "TIP_AUDIORECORDER_PERMISSION": "Permet l'accés a l'àudio",
+      "TIP_AUDIORECORDER_ERROR": "No s'ha pogut obrir l'àudio",
+      "DRAG_DROP": "Arrossega i deixa anar aquí per adjuntar-lo",
+      "START_AUDIO_RECORDING": "Inicia la gravació d'àudio",
+      "STOP_AUDIO_RECORDING": "Atura la gravació d'àudio",
       "": "",
       "EMAIL_HEAD": {
-        "TO": "TO",
-        "ADD_BCC": "Add bcc",
+        "TO": "A",
+        "ADD_BCC": "Afegeix cco",
         "CC": {
           "LABEL": "CC",
-          "PLACEHOLDER": "Emails separated by commas",
-          "ERROR": "Please enter valid email addresses"
+          "PLACEHOLDER": "Correus electrònics separats per comes",
+          "ERROR": "Introduïu adreces de correu electrònic vàlides"
         },
         "BCC": {
-          "LABEL": "BCC",
-          "PLACEHOLDER": "Emails separated by commas",
-          "ERROR": "Please enter valid email addresses"
+          "LABEL": "CCO",
+          "PLACEHOLDER": "Correus electrònics separats per comes",
+          "ERROR": "Introduïu adreces de correu electrònic vàlides"
         }
       },
       "UNDEFINED_VARIABLES": {
-        "TITLE": "Undefined variables",
-        "MESSAGE": "You have {undefinedVariablesCount} undefined variables in your message: {undefinedVariables}. Would you like to send the message anyway?",
+        "TITLE": "Variables sense definir",
+        "MESSAGE": "Tens {undefinedVariablesCount} variables sense definir al teu missatge: {undefinedVariables}. Vols enviar el missatge igualment?",
         "CONFIRM": {
           "YES": "Envia",
           "CANCEL": "Cancel·la"
@@ -187,18 +188,18 @@
     },
     "VISIBLE_TO_AGENTS": "Nota privada: Només és visible per tu i el vostre equip",
     "CHANGE_STATUS": "Estat de la conversa canviat",
-    "CHANGE_STATUS_FAILED": "Conversation status change failed",
+    "CHANGE_STATUS_FAILED": "No s'ha pogut canviar l'estat de la conversa",
     "CHANGE_AGENT": "Assignació de la conversa canviat",
-    "CHANGE_AGENT_FAILED": "Assignee change failed",
-    "ASSIGN_LABEL_SUCCESFUL": "Label assigned successfully",
-    "ASSIGN_LABEL_FAILED": "Label assignment failed",
-    "CHANGE_TEAM": "Conversation team changed",
-    "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
-    "MESSAGE_ERROR": "Unable to send this message, please try again later",
+    "CHANGE_AGENT_FAILED": "El canvi de l'assignat ha fallat",
+    "ASSIGN_LABEL_SUCCESFUL": "L'etiqueta s'ha assignat correctament",
+    "ASSIGN_LABEL_FAILED": "L'assignació d'etiquetes ha fallat",
+    "CHANGE_TEAM": "L'equip de conversa ha canviat",
+    "FILE_SIZE_LIMIT": "El fitxer supera el límit de {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB fitxers adjunts",
+    "MESSAGE_ERROR": "No es pot enviar aquest missatge, torna-ho a provar més tard",
     "SENT_BY": "Enviat per:",
     "BOT": "Bot",
-    "SEND_FAILED": "Couldn't send message! Try again",
-    "TRY_AGAIN": "retry",
+    "SEND_FAILED": "No s'ha pogut enviar el missatge! Torna-ho a provar",
+    "TRY_AGAIN": "reintenta",
     "ASSIGNMENT": {
       "SELECT_AGENT": "Seleccionar Agent",
       "REMOVE": "Suprimeix",
@@ -206,15 +207,15 @@
     },
     "CONTEXT_MENU": {
       "COPY": "Copia",
-      "REPLY_TO": "Reply to this message",
+      "REPLY_TO": "Respon a aquest missatge",
       "DELETE": "Esborrar",
-      "CREATE_A_CANNED_RESPONSE": "Add to canned responses",
-      "TRANSLATE": "Translate",
-      "COPY_PERMALINK": "Copy link to the message",
-      "LINK_COPIED": "Message URL copied to the clipboard",
+      "CREATE_A_CANNED_RESPONSE": "Afegir a les respostes predeterminades",
+      "TRANSLATE": "Tradueix",
+      "COPY_PERMALINK": "Copia l'enllaç al missatge",
+      "LINK_COPIED": "URL del missatge copiat al porta-retalls",
       "DELETE_CONFIRMATION": {
-        "TITLE": "Are you sure you want to delete this message?",
-        "MESSAGE": "You cannot undo this action",
+        "TITLE": "Estàs segur que vols suprimir aquest missatge?",
+        "MESSAGE": "No pots desfer aquesta acció",
         "DELETE": "Esborrar",
         "CANCEL": "Cancel·la"
       }
@@ -238,48 +239,48 @@
     }
   },
   "ONBOARDING": {
-    "TITLE": "Hey 👋, Welcome to %{installationName}!",
-    "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
-    "READ_LATEST_UPDATES": "Read our latest updates",
+    "TITLE": "Hola 👋, Benvingut a %{installationName}!",
+    "DESCRIPTION": "Gràcies per registrar-te. Volem que treguis el màxim profit de %{installationName}. Aquí teniu algunes coses que pots fer a %{installationName} perquè l'experiència sigui agradable.",
+    "READ_LATEST_UPDATES": "Llegiu les nostres últimes actualitzacions",
     "ALL_CONVERSATION": {
-      "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "TITLE": "Totes les teves converses en un sol lloc",
+      "DESCRIPTION": "Consulta totes les converses dels teus clients en un únic tauler. Podeu filtrar les converses pel canal d'entrada, l'etiqueta i l'estat."
     },
     "TEAM_MEMBERS": {
-      "TITLE": "Invite your team members",
-      "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
-      "NEW_LINK": "Click here to invite a team member"
+      "TITLE": "Convida els membres del teu equip",
+      "DESCRIPTION": "Com que us esteu preparant per parlar amb el vostre client, feu venir els vostres companys d'equip per ajudar-vos. Pots convidar els teus companys d'equip afegint les seves adreces de correu electrònic a la llista d'agents.",
+      "NEW_LINK": "Feu clic aquí per convidar un membre de l'equip"
     },
     "INBOXES": {
-      "TITLE": "Connect Inboxes",
+      "TITLE": "Connecta les safates d'entrada",
       "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
+      "NEW_LINK": "Fes clic aquí per crear una safata d'entrada"
     },
     "LABELS": {
-      "TITLE": "Organize conversations with labels",
-      "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
-      "NEW_LINK": "Click here to create tags"
+      "TITLE": "Organitza converses amb etiquetes",
+      "DESCRIPTION": "Les etiquetes proporcionen una manera més fàcil de classificar la vostra conversa. Crea algunes etiquetes com #consulta-suport, #pregunta-facturació, etc., perquè les puguis utilitzar en una conversa més endavant.",
+      "NEW_LINK": "Fes clic aquí per crear etiquetes"
     }
   },
   "CONVERSATION_SIDEBAR": {
-    "ASSIGNEE_LABEL": "Assigned Agent",
-    "SELF_ASSIGN": "Assign to me",
-    "TEAM_LABEL": "Assigned Team",
+    "ASSIGNEE_LABEL": "Agent assignat",
+    "SELF_ASSIGN": "Assigna-me-la",
+    "TEAM_LABEL": "Assignada a un equip",
     "SELECT": {
-      "PLACEHOLDER": "None"
+      "PLACEHOLDER": "Ningú"
     },
     "ACCORDION": {
-      "CONTACT_DETAILS": "Contact Details",
-      "CONVERSATION_ACTIONS": "Conversation Actions",
+      "CONTACT_DETAILS": "Detalls de contacte",
+      "CONVERSATION_ACTIONS": "Accions de conversa",
       "CONVERSATION_LABELS": "Etiquetes de converses",
-      "CONVERSATION_INFO": "Conversation Information",
-      "CONTACT_ATTRIBUTES": "Contact Attributes",
+      "CONVERSATION_INFO": "Informació de la conversa",
+      "CONTACT_ATTRIBUTES": "Atributs de contacte",
       "PREVIOUS_CONVERSATION": "Converses prèvies",
       "MACROS": "Macros"
     }
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
-    "ADD_BUTTON_TEXT": "Create attribute",
+    "ADD_BUTTON_TEXT": "Crea atribut",
     "NO_RECORDS_FOUND": "No s'han trobat atributs",
     "UPDATE": {
       "SUCCESS": "Atribut actualitzat correctament",
@@ -301,34 +302,34 @@
     }
   },
   "EMAIL_HEADER": {
-    "FROM": "From",
+    "FROM": "Des de",
     "TO": "Per",
-    "BCC": "Bcc",
+    "BCC": "Cco",
     "CC": "Cc",
-    "SUBJECT": "Subject"
+    "SUBJECT": "Assumpte"
   },
   "CONVERSATION_PARTICIPANTS": {
-    "SIDEBAR_MENU_TITLE": "Participating",
-    "SIDEBAR_TITLE": "Conversation participants",
+    "SIDEBAR_MENU_TITLE": "Participant",
+    "SIDEBAR_TITLE": "Participants de la conversa",
     "NO_RECORDS_FOUND": "No s'ha trobat agents",
-    "ADD_PARTICIPANTS": "Select participants",
-    "REMANING_PARTICIPANTS_TEXT": "+%{count} others",
-    "REMANING_PARTICIPANT_TEXT": "+%{count} other",
-    "TOTAL_PARTICIPANTS_TEXT": "%{count} people are participating.",
-    "TOTAL_PARTICIPANT_TEXT": "%{count} person is participating.",
-    "NO_PARTICIPANTS_TEXT": "No one is participating!.",
-    "WATCH_CONVERSATION": "Join conversation",
-    "YOU_ARE_WATCHING": "You are participating",
+    "ADD_PARTICIPANTS": "Selecciona els participants",
+    "REMANING_PARTICIPANTS_TEXT": "+%{count} més",
+    "REMANING_PARTICIPANT_TEXT": "+%{count} més",
+    "TOTAL_PARTICIPANTS_TEXT": "%{count} persones estan participant.",
+    "TOTAL_PARTICIPANT_TEXT": "%{count} persona està participant.",
+    "NO_PARTICIPANTS_TEXT": "No hi participa ningú!",
+    "WATCH_CONVERSATION": "Uneix-te a la conversa",
+    "YOU_ARE_WATCHING": "Estàs participant",
     "API": {
-      "ERROR_MESSAGE": "Could not update, try again!",
-      "SUCCESS_MESSAGE": "Participants updated!"
+      "ERROR_MESSAGE": "No s'ha pogut actualitzar, torna-ho a provar!",
+      "SUCCESS_MESSAGE": "Participants actualitzats!"
     }
   },
   "TRANSLATE_MODAL": {
-    "TITLE": "View translated content",
-    "DESC": "You can view the translated content in each langauge.",
-    "ORIGINAL_CONTENT": "Original Content",
-    "TRANSLATED_CONTENT": "Translated Content",
-    "NO_TRANSLATIONS_AVAILABLE": "No translations are available for this content"
+    "TITLE": "Veure contingut traduït",
+    "DESC": "Pots veure el contingut traduït a cada idioma.",
+    "ORIGINAL_CONTENT": "Contingut original",
+    "TRANSLATED_CONTENT": "Contingut traduït",
+    "NO_TRANSLATIONS_AVAILABLE": "No hi ha traduccions disponibles per a aquest contingut"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/csatMgmt.json b/app/javascript/dashboard/i18n/locale/ca/csatMgmt.json
index 9e16dc2b3c364..5de22633184c1 100644
--- a/app/javascript/dashboard/i18n/locale/ca/csatMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/csatMgmt.json
@@ -1,13 +1,13 @@
 {
   "CSAT": {
-    "TITLE": "Rate your conversation",
-    "PLACEHOLDER": "Tell us more...",
+    "TITLE": "Valora la teva conversa",
+    "PLACEHOLDER": "Explica'ns més...",
     "RATINGS": {
-      "POOR": "😞 Poor",
-      "FAIR": "😑 Fair",
-      "AVERAGE": "😐 Average",
-      "GOOD": "😀 Good",
-      "EXCELLENT": "😍 Excellent"
+      "POOR": "😞 Pobre",
+      "FAIR": "😑 Just",
+      "AVERAGE": "😐 Mitjana",
+      "GOOD": "😀 Bé",
+      "EXCELLENT": "😍 Excel·lent"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/datePicker.json b/app/javascript/dashboard/i18n/locale/ca/datePicker.json
index 19333d4fd3cdf..37bc1bec7802b 100644
--- a/app/javascript/dashboard/i18n/locale/ca/datePicker.json
+++ b/app/javascript/dashboard/i18n/locale/ca/datePicker.json
@@ -1,19 +1,19 @@
 {
   "DATE_PICKER": {
-    "APPLY_BUTTON": "Apply",
-    "CLEAR_BUTTON": "Clear",
+    "APPLY_BUTTON": "Aplica",
+    "CLEAR_BUTTON": "Neteja",
     "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
+      "START": "Data d'inici",
+      "END": "Data de finalització"
     },
     "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
+      "TITLE": "RANG DE DATES",
       "LAST_7_DAYS": "Últims 7 dies",
       "LAST_30_DAYS": "Últims 30 dies",
-      "LAST_3_MONTHS": "Last 3 months",
-      "LAST_6_MONTHS": "Last 6 months",
-      "LAST_YEAR": "Last year",
-      "CUSTOM_RANGE": "Custom date range"
+      "LAST_3_MONTHS": "Últims tres mesos",
+      "LAST_6_MONTHS": "Últims sis mesos",
+      "LAST_YEAR": "Darrer any",
+      "CUSTOM_RANGE": "Interval de dates personalitzat"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/general.json b/app/javascript/dashboard/i18n/locale/ca/general.json
index c67a5f9e7adfa..d0c48ce7e6a2d 100644
--- a/app/javascript/dashboard/i18n/locale/ca/general.json
+++ b/app/javascript/dashboard/i18n/locale/ca/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Es mostren {firstIndex}-{lastIndex} de {totalCount} elements"
+    "SHOWING_RESULTS": "Es mostren {firstIndex}-{lastIndex} de {totalCount} elements",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Cercar",
+      "EMPTY_STATE": "No s'ha trobat agents"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/generalSettings.json b/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
index b1717a408a308..6ca3a63959dab 100644
--- a/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
@@ -51,26 +51,26 @@
     "UPDATE_CHATWOOT": "L'actualització %{latestChatwootVersion} per Chatwoot està disponible. Si us plau, actualitza l'instancia.",
     "LEARN_MORE": "Aprèn més",
     "PAYMENT_PENDING": "El teu pagament està pendent. Actualitzeu la vostra informació de pagament per continuar utilitzant Chatwoot",
-    "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
-    "OPEN_BILLING": "Open billing"
+    "LIMITS_UPGRADE": "El teu compte ha superat els límits d'ús, actualitza el pla per continuar utilitzant Chatwoot",
+    "OPEN_BILLING": "Obrir facturació"
   },
   "FORMS": {
     "MULTISELECT": {
       "ENTER_TO_SELECT": "Presiona retorn (tecla enter) per seleccionar",
       "ENTER_TO_REMOVE": "Presiona retorn (tecla enter) per eliminar",
       "SELECT_ONE": "Selecciona un",
-      "SELECT": "Select"
+      "SELECT": "Selecciona"
     }
   },
   "NOTIFICATIONS_PAGE": {
     "HEADER": "Notificacions",
     "MARK_ALL_DONE": "Marca Tot Fet",
-    "DELETE_TITLE": "deleted",
+    "DELETE_TITLE": "eliminat",
     "UNREAD_NOTIFICATION": {
-      "TITLE": "Unread Notifications",
-      "ALL_NOTIFICATIONS": "View all notifications",
-      "LOADING_UNREAD_MESSAGE": "Loading unread notifications...",
-      "EMPTY_MESSAGE": "You have no unread notifications"
+      "TITLE": "Notificacions no llegides",
+      "ALL_NOTIFICATIONS": "Veure totes les notificacions",
+      "LOADING_UNREAD_MESSAGE": "S'estan carregant les notificacions no llegides...",
+      "EMPTY_MESSAGE": "No tens notificacions no llegides"
     },
     "LIST": {
       "LOADING_MESSAGE": "Carregant notificacions...",
@@ -88,85 +88,87 @@
       "assigned_conversation_new_message": "Missatge Nou",
       "participating_conversation_new_message": "Missatge Nou",
       "conversation_mention": "Menció",
-      "sla_missed_first_response": "SLA Missed",
-      "sla_missed_next_response": "SLA Missed",
-      "sla_missed_resolution": "SLA Missed"
+      "sla_missed_first_response": "SLA perdut",
+      "sla_missed_next_response": "SLA perdut",
+      "sla_missed_resolution": "SLA perdut"
     }
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Fora de línia"
+      "OFFLINE": "Fora de línia",
+      "RECONNECTING": "Reconnectant...",
+      "RECONNECT_SUCCESS": "Reconnectat"
     },
     "BUTTON": {
-      "REFRESH": "Refresh"
+      "REFRESH": "Actualitza"
     }
   },
   "COMMAND_BAR": {
-    "SEARCH_PLACEHOLDER": "Search or jump to",
+    "SEARCH_PLACEHOLDER": "Cerca o salta a",
     "SECTIONS": {
       "GENERAL": "General",
       "REPORTS": "Informes",
-      "CONVERSATION": "Conversation",
-      "BULK_ACTIONS": "Bulk Actions",
-      "CHANGE_ASSIGNEE": "Change Assignee",
-      "CHANGE_PRIORITY": "Change Priority",
-      "CHANGE_TEAM": "Change Team",
-      "SNOOZE_CONVERSATION": "Snooze Conversation",
-      "ADD_LABEL": "Add label to the conversation",
-      "REMOVE_LABEL": "Remove label from the conversation",
+      "CONVERSATION": "Conversa",
+      "BULK_ACTIONS": "Accions massives",
+      "CHANGE_ASSIGNEE": "Canvia l'assignat",
+      "CHANGE_PRIORITY": "Canvia la prioritat",
+      "CHANGE_TEAM": "Canvia l'equip",
+      "SNOOZE_CONVERSATION": "Posposa la conversa",
+      "ADD_LABEL": "Afegeix una etiqueta a la conversa",
+      "REMOVE_LABEL": "Elimina l'etiqueta de la conversa",
       "SETTINGS": "Configuracions",
-      "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "Appearance",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "AI_ASSIST": "Assistència IA",
+      "APPEARANCE": "Aparença",
+      "SNOOZE_NOTIFICATION": "Posposa la notificació"
     },
     "COMMANDS": {
-      "GO_TO_CONVERSATION_DASHBOARD": "Go to Conversation Dashboard",
-      "GO_TO_CONTACTS_DASHBOARD": "Go to Contacts Dashboard",
-      "GO_TO_REPORTS_OVERVIEW": "Go to Reports Overview",
-      "GO_TO_CONVERSATION_REPORTS": "Go to Conversation Reports",
-      "GO_TO_AGENT_REPORTS": "Go to Agent Reports",
-      "GO_TO_LABEL_REPORTS": "Go to Label Reports",
-      "GO_TO_INBOX_REPORTS": "Go to Inbox Reports",
-      "GO_TO_TEAM_REPORTS": "Go to Team Reports",
-      "GO_TO_SETTINGS_AGENTS": "Go to Agent Settings",
-      "GO_TO_SETTINGS_TEAMS": "Go to Team Settings",
-      "GO_TO_SETTINGS_INBOXES": "Go to Inbox Settings",
-      "GO_TO_SETTINGS_LABELS": "Go to Label Settings",
-      "GO_TO_SETTINGS_CANNED_RESPONSES": "Go to Canned Response Settings",
-      "GO_TO_SETTINGS_APPLICATIONS": "Go to Application Settings",
-      "GO_TO_SETTINGS_ACCOUNT": "Go to Account Settings",
-      "GO_TO_SETTINGS_PROFILE": "Go to Profile Settings",
-      "GO_TO_NOTIFICATIONS": "Go to Notifications",
-      "ADD_LABELS_TO_CONVERSATION": "Add label to the conversation",
-      "ASSIGN_AN_AGENT": "Assign an agent",
-      "AI_ASSIST": "AI Assist",
-      "ASSIGN_PRIORITY": "Assign priority",
-      "ASSIGN_A_TEAM": "Assign a team",
-      "MUTE_CONVERSATION": "Mute conversation",
-      "UNMUTE_CONVERSATION": "Unmute conversation",
-      "REMOVE_LABEL_FROM_CONVERSATION": "Remove label from the conversation",
+      "GO_TO_CONVERSATION_DASHBOARD": "Vés al Tauler de converses",
+      "GO_TO_CONTACTS_DASHBOARD": "Ves al Tauler de contactes",
+      "GO_TO_REPORTS_OVERVIEW": "Ves a Visió general dels informes",
+      "GO_TO_CONVERSATION_REPORTS": "Vés a Informes de converses",
+      "GO_TO_AGENT_REPORTS": "Ves a Informes d'agents",
+      "GO_TO_LABEL_REPORTS": "Ves a Informes d'etiquetes",
+      "GO_TO_INBOX_REPORTS": "Ves a Informes de la safata d'entrada",
+      "GO_TO_TEAM_REPORTS": "Ves a Informes d'equip",
+      "GO_TO_SETTINGS_AGENTS": "Ves a Configuració de l'agent",
+      "GO_TO_SETTINGS_TEAMS": "Ves a Configuració de l'equip",
+      "GO_TO_SETTINGS_INBOXES": "Ves a Configuració de la safata d'entrada",
+      "GO_TO_SETTINGS_LABELS": "Ves a Configuració de l'etiqueta",
+      "GO_TO_SETTINGS_CANNED_RESPONSES": "Ves a Configuració de resposta enllaunada",
+      "GO_TO_SETTINGS_APPLICATIONS": "Ves a Configuració de l'aplicació",
+      "GO_TO_SETTINGS_ACCOUNT": "Ves a Configuració del compte",
+      "GO_TO_SETTINGS_PROFILE": "Ves a Configuració del perfil",
+      "GO_TO_NOTIFICATIONS": "Ves a Notificacions",
+      "ADD_LABELS_TO_CONVERSATION": "Afegeix una etiqueta a la conversa",
+      "ASSIGN_AN_AGENT": "Assigna un agent",
+      "AI_ASSIST": "Assistència IA",
+      "ASSIGN_PRIORITY": "Assigna prioritat",
+      "ASSIGN_A_TEAM": "Assigna un equip",
+      "MUTE_CONVERSATION": "Silencia la conversa",
+      "UNMUTE_CONVERSATION": "No silenciïs la conversa",
+      "REMOVE_LABEL_FROM_CONVERSATION": "Elimina l'etiqueta de la conversa",
       "REOPEN_CONVERSATION": "Torna a obrir la conversa",
       "RESOLVE_CONVERSATION": "Resol la conversa",
-      "SEND_TRANSCRIPT": "Send an email transcript",
-      "SNOOZE_CONVERSATION": "Snooze Conversation",
-      "UNTIL_NEXT_REPLY": "Until next reply",
-      "UNTIL_NEXT_WEEK": "Until next week",
-      "UNTIL_TOMORROW": "Until tomorrow",
-      "UNTIL_NEXT_MONTH": "Until next month",
-      "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
-      "CHANGE_APPEARANCE": "Change Appearance",
-      "LIGHT_MODE": "Light",
-      "DARK_MODE": "Dark",
-      "SYSTEM_MODE": "System",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "SEND_TRANSCRIPT": "Envia la transcripció per correu electrònic",
+      "SNOOZE_CONVERSATION": "Posposa la conversa",
+      "UNTIL_NEXT_REPLY": "Fins a la propera resposta",
+      "UNTIL_NEXT_WEEK": "Fins a la setmana vinent",
+      "UNTIL_TOMORROW": "Fins demà",
+      "UNTIL_NEXT_MONTH": "Fins al mes vinent",
+      "AN_HOUR_FROM_NOW": "Fins d'aquí una hora",
+      "UNTIL_CUSTOM_TIME": "Personalitzat...",
+      "CHANGE_APPEARANCE": "Canvia l'aparença",
+      "LIGHT_MODE": "Clar",
+      "DARK_MODE": "Fosc",
+      "SYSTEM_MODE": "Sistema",
+      "SNOOZE_NOTIFICATION": "Posposa la notificació"
     }
   },
   "DASHBOARD_APPS": {
-    "LOADING_MESSAGE": "Loading Dashboard App..."
+    "LOADING_MESSAGE": "S'està carregant l'aplicació Tauler..."
   },
   "COMMON": {
-    "OR": "Or",
+    "OR": "O",
     "CLICK_HERE": "clica aquí"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/helpCenter.json b/app/javascript/dashboard/i18n/locale/ca/helpCenter.json
index a387032ed5036..53fcc8b71a21f 100644
--- a/app/javascript/dashboard/i18n/locale/ca/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ca/helpCenter.json
@@ -1,486 +1,487 @@
 {
   "HELP_CENTER": {
     "HEADER": {
-      "FILTER": "Filter by",
-      "SORT": "Sort by",
-      "LOCALE": "Locale",
+      "FILTER": "Filtrat per",
+      "SORT": "Ordenat per",
+      "LOCALE": "Localització",
       "SETTINGS_BUTTON": "Configuracions",
-      "NEW_BUTTON": "New Article",
+      "NEW_BUTTON": "Nou article",
       "DROPDOWN_OPTIONS": {
-        "PUBLISHED": "Published",
-        "DRAFT": "Draft",
-        "ARCHIVED": "Archived"
+        "PUBLISHED": "Publicat",
+        "DRAFT": "Esborrany",
+        "ARCHIVED": "Arxivat"
       },
       "TITLES": {
-        "ALL_ARTICLES": "All Articles",
-        "MINE": "My Articles",
-        "DRAFT": "Draft Articles",
-        "ARCHIVED": "Archived Articles"
+        "ALL_ARTICLES": "Tots els articles",
+        "MINE": "Tots els meus articles",
+        "DRAFT": "Esborrany d'articles",
+        "ARCHIVED": "Articles arxivats"
       },
       "LOCALE_SELECT": {
-        "TITLE": "Select locale",
-        "PLACEHOLDER": "Select locale",
-        "NO_RESULT": "No locale found",
-        "SEARCH_PLACEHOLDER": "Search locale"
+        "TITLE": "Selecciona localització",
+        "PLACEHOLDER": "Selecciona localització",
+        "NO_RESULT": "No s'ha trobat localització",
+        "SEARCH_PLACEHOLDER": "Cerca localització"
       }
     },
     "EDIT_HEADER": {
-      "ALL_ARTICLES": "All Articles",
-      "PUBLISH_BUTTON": "Publish",
-      "MOVE_TO_ARCHIVE_BUTTON": "Move to archived",
-      "PREVIEW": "Preview",
-      "ADD_TRANSLATION": "Add translation",
-      "OPEN_SIDEBAR": "Open sidebar",
-      "CLOSE_SIDEBAR": "Close sidebar",
-      "SAVING": "Saving...",
-      "SAVED": "Saved"
+      "ALL_ARTICLES": "Tots els articles",
+      "PUBLISH_BUTTON": "Publica",
+      "MOVE_TO_ARCHIVE_BUTTON": "Mou a arxivat",
+      "PREVIEW": "Vista prèvia",
+      "ADD_TRANSLATION": "Afegeix traducció",
+      "OPEN_SIDEBAR": "Obre la barra lateral",
+      "CLOSE_SIDEBAR": "Tanca la barra lateral",
+      "SAVING": "S'està desant...",
+      "SAVED": "Desat"
     },
     "ARTICLE_EDITOR": {
       "IMAGE_UPLOAD": {
         "TITLE": "Puja imatge",
         "UPLOADING": "S'està carregant...",
-        "SUCCESS": "Image uploaded successfully",
-        "ERROR": "Error while uploading image",
-        "ERROR_FILE_SIZE": "Image size should be less than {size}MB",
-        "ERROR_FILE_FORMAT": "Image format should be jpg, jpeg or png",
-        "ERROR_FILE_DIMENSIONS": "Image dimensions should be less than 2000 x 2000"
+        "SUCCESS": "La imatge s'ha carregat correctament",
+        "ERROR": "S'ha produït un error en carregar la imatge",
+        "ERROR_FILE_SIZE": "La mida de la imatge ha de ser inferior a {size}MB",
+        "ERROR_FILE_FORMAT": "El format de la imatge ha de ser JPG, JPEG o PNG",
+        "ERROR_FILE_DIMENSIONS": "Les dimensions de la imatge han de ser inferiors a 2000 x 2000"
       }
     },
     "ARTICLE_SETTINGS": {
-      "TITLE": "Article Settings",
+      "TITLE": "Configuració de l'article",
       "FORM": {
         "CATEGORY": {
-          "LABEL": "Category",
-          "TITLE": "Select category",
-          "PLACEHOLDER": "Select category",
-          "NO_RESULT": "No category found",
-          "SEARCH_PLACEHOLDER": "Search category"
+          "LABEL": "Categoria",
+          "TITLE": "Selecciona categoria",
+          "PLACEHOLDER": "Selecciona categoria",
+          "NO_RESULT": "No s'ha trobat la categoria",
+          "SEARCH_PLACEHOLDER": "Cerca la categoria"
         },
         "AUTHOR": {
-          "LABEL": "Author",
-          "TITLE": "Select author",
-          "PLACEHOLDER": "Select author",
-          "NO_RESULT": "No authors found",
-          "SEARCH_PLACEHOLDER": "Search author"
+          "LABEL": "Autor",
+          "TITLE": "Selecciona l'autor",
+          "PLACEHOLDER": "Selecciona l'autor",
+          "NO_RESULT": "No s'han trobat autors",
+          "SEARCH_PLACEHOLDER": "Cerca autor"
         },
         "META_TITLE": {
-          "LABEL": "Meta title",
-          "PLACEHOLDER": "Add a meta title"
+          "LABEL": "Meta títol",
+          "PLACEHOLDER": "Afegeix un meta títol"
         },
         "META_DESCRIPTION": {
-          "LABEL": "Meta description",
-          "PLACEHOLDER": "Add your meta description for better SEO results..."
+          "LABEL": "Meta descripció",
+          "PLACEHOLDER": "Afegeix la teva meta descripció per obtenir millors resultats de SEO..."
         },
         "META_TAGS": {
-          "LABEL": "Meta tags",
-          "PLACEHOLDER": "Add meta tags separated by comma..."
+          "LABEL": "Meta etiquetes",
+          "PLACEHOLDER": "Afegeix meta etiquetes separades per comes..."
         }
       },
       "BUTTONS": {
-        "ARCHIVE": "Archive article",
-        "DELETE": "Delete article"
+        "ARCHIVE": "Arxiva article",
+        "DELETE": "Suprimeix article"
       }
     },
     "ARTICLE_SEARCH_RESULT": {
-      "UNCATEGORIZED": "Uncategorized",
-      "SEARCH_RESULTS": "Search results for %{query}",
-      "EMPTY_TEXT": "Search for articles to insert into replies.",
-      "SEARCH_LOADER": "Searching...",
-      "INSERT_ARTICLE": "Insert",
-      "NO_RESULT": "No articles found",
-      "COPY_LINK": "Copy article link to clipboard",
-      "OPEN_LINK": "Open article in new tab",
-      "PREVIEW_LINK": "Preview article"
+      "UNCATEGORIZED": "Sense categoria",
+      "SEARCH_RESULTS": "Resultats de la cerca per a %{query}",
+      "EMPTY_TEXT": "Cerca articles per inserir a les respostes.",
+      "SEARCH_LOADER": "S'està cercant...",
+      "INSERT_ARTICLE": "Insereix",
+      "NO_RESULT": "No s'han trobat articles",
+      "COPY_LINK": "Copia l'enllaç de l'article al porta-retalls",
+      "OPEN_LINK": "Obre l'article en una pestanya nova",
+      "PREVIEW_LINK": "Vista prèvia de l'article"
     },
     "PORTAL": {
       "HEADER": "Portals",
-      "DEFAULT": "Default",
-      "NEW_BUTTON": "New Portal",
-      "ACTIVE_BADGE": "active",
-      "CHOOSE_LOCALE_LABEL": "Choose a locale",
-      "LOADING_MESSAGE": "Loading portals...",
+      "DEFAULT": "Per defecte",
+      "NEW_BUTTON": "Nou portal",
+      "ACTIVE_BADGE": "actiu",
+      "CHOOSE_LOCALE_LABEL": "Escull una localització",
+      "LOADING_MESSAGE": "Carregant portals...",
       "ARTICLES_LABEL": "articles",
-      "NO_PORTALS_MESSAGE": "There are no available portals",
-      "ADD_NEW_LOCALE": "Add a new locale",
+      "NO_PORTALS_MESSAGE": "No hi ha portals disponibles",
+      "ADD_NEW_LOCALE": "Afegeix una nova localització",
       "POPOVER": {
         "TITLE": "Portals",
-        "PORTAL_SETTINGS": "Portal settings",
-        "SUBTITLE": "You have multiple portals and can have different locales for each portal.",
+        "PORTAL_SETTINGS": "Configuració del portal",
+        "SUBTITLE": "Tens diversos portals i pots tenir diferents localitzacions per a cada portal.",
         "CANCEL_BUTTON_LABEL": "Cancel·la",
-        "CHOOSE_LOCALE_BUTTON": "Choose Locale"
+        "CHOOSE_LOCALE_BUTTON": "Escull localització"
       },
       "PORTAL_SETTINGS": {
         "LIST_ITEM": {
           "HEADER": {
             "COUNT_LABEL": "articles",
-            "ADD": "Add locale",
-            "VISIT": "Visit site",
+            "ADD": "Afegeix localització",
+            "VISIT": "Visita el lloc",
             "SETTINGS": "Configuracions",
             "DELETE": "Esborrar"
           },
           "PORTAL_CONFIG": {
-            "TITLE": "Portal Configurations",
+            "TITLE": "Configuracions del portal",
             "ITEMS": {
               "NAME": "Nom",
-              "DOMAIN": "Custom domain",
+              "DOMAIN": "Domini personalitzat",
               "SLUG": "Slug",
-              "TITLE": "Portal title",
-              "THEME": "Theme color",
-              "SUB_TEXT": "Portal sub text"
+              "TITLE": "Títol del portal",
+              "THEME": "Color del tema",
+              "SUB_TEXT": "Subtext del portal"
             }
           },
           "AVAILABLE_LOCALES": {
-            "TITLE": "Available locales",
+            "TITLE": "Localitzacions disponibles",
             "TABLE": {
-              "NAME": "Locale name",
-              "CODE": "Locale code",
-              "ARTICLE_COUNT": "No. of articles",
-              "CATEGORIES": "No. of categories",
-              "SWAP": "Swap",
+              "NAME": "Nom de la localització",
+              "CODE": "Codi de la localització",
+              "ARTICLE_COUNT": "Nre. d'articles",
+              "CATEGORIES": "Nre. de categories",
+              "SWAP": "Intercanvi",
               "DELETE": "Esborrar",
-              "DEFAULT_LOCALE": "Default"
+              "DEFAULT_LOCALE": "Per defecte"
             }
           }
         },
         "DELETE_PORTAL": {
-          "TITLE": "Delete portal",
-          "MESSAGE": "Are you sure you want to delete this portal",
-          "YES": "Yes, delete portal",
-          "NO": "No, keep portal",
+          "TITLE": "Suprimir portal",
+          "MESSAGE": "Estàs segur que vols suprimir aquest portal",
+          "YES": "Sí, esborra el portal",
+          "NO": "No, manté el portal",
           "API": {
-            "DELETE_SUCCESS": "Portal deleted successfully",
-            "DELETE_ERROR": "Error while deleting portal"
+            "DELETE_SUCCESS": "Portal esborrat correctament",
+            "DELETE_ERROR": "S'ha produït un error en suprimir el portal"
           }
         }
       },
       "EDIT": {
-        "HEADER_TEXT": "Edit portal",
+        "HEADER_TEXT": "Edita el portal",
         "TABS": {
           "BASIC_SETTINGS": {
-            "TITLE": "Basic information"
+            "TITLE": "Informació bàsica"
           },
           "CUSTOMIZATION_SETTINGS": {
-            "TITLE": "Portal customization"
+            "TITLE": "Personalització del portal"
           },
           "CATEGORY_SETTINGS": {
             "TITLE": "Categories"
           },
           "LOCALE_SETTINGS": {
-            "TITLE": "Locales"
+            "TITLE": "Localitzacions"
           }
         },
         "CATEGORIES": {
-          "TITLE": "Categories in",
-          "NEW_CATEGORY": "New category",
+          "TITLE": "Categories a",
+          "NEW_CATEGORY": "Nova categoria",
           "TABLE": {
             "NAME": "Nom",
             "DESCRIPTION": "Descripció",
-            "LOCALE": "Locale",
-            "ARTICLE_COUNT": "No. of articles",
+            "LOCALE": "Localització",
+            "ARTICLE_COUNT": "Nre. d'articles",
             "ACTION_BUTTON": {
-              "EDIT": "Edit category",
-              "DELETE": "Delete category"
+              "EDIT": "Edita la categoria",
+              "DELETE": "Suprimeix la categoria"
             },
-            "EMPTY_TEXT": "No categories found"
+            "EMPTY_TEXT": "No s'han trobat categories"
           }
         },
         "EDIT_BASIC_INFO": {
-          "BUTTON_TEXT": "Update basic settings"
+          "BUTTON_TEXT": "Actualitzar la configuració bàsica"
         }
       },
       "ADD": {
         "CREATE_FLOW": [
           {
-            "title": "Help center information",
+            "title": "Informació del centre d'ajuda",
             "route": "new_portal_information",
-            "body": "Basic information about portal",
-            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+            "body": "Informació bàsica sobre el portal",
+            "CREATE_BASIC_SETTING_BUTTON": "Crea la configuració bàsica del portal"
           },
           {
-            "title": "Help center customization",
+            "title": "Personalització del centre d'ajuda",
             "route": "portal_customization",
-            "body": "Customize portal",
-            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+            "body": "Personalitza el portal",
+            "UPDATE_PORTAL_BUTTON": "Actualitza la configuració del portal"
           },
           {
-            "title": "Voila! 🎉",
+            "title": "Llest! 🎉",
             "route": "portal_finish",
-            "body": "You're all set!",
-            "FINISH": "Finish"
+            "body": "Estàs a punt!",
+            "FINISH": "Finalitza"
           }
         ],
         "CREATE_FLOW_PAGE": {
           "BACK_BUTTON": "Enrere",
           "BASIC_SETTINGS_PAGE": {
-            "HEADER": "Create Portal",
-            "TITLE": "Help center information",
-            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+            "HEADER": "Crea un portal",
+            "TITLE": "Informació del centre d'ajuda",
+            "CREATE_BASIC_SETTING_BUTTON": "Crea la configuració bàsica del portal"
           },
           "CUSTOMIZATION_PAGE": {
-            "HEADER": "Portal customisation",
-            "TITLE": "Help center customization",
-            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+            "HEADER": "Personalització del portal",
+            "TITLE": "Personalització del centre d'ajuda",
+            "UPDATE_PORTAL_BUTTON": "Actualitza la configuració del portal"
           },
           "FINISH_PAGE": {
-            "TITLE": "Voila!🎉 You're all set up!",
-            "MESSAGE": "You can now see this created portal on your all portals page.",
-            "FINISH": "Go to all portals page"
+            "TITLE": "Lles!🎉 Estàs a punt!",
+            "MESSAGE": "Ara pots veure aquest portal creat en la teva pàgina de tots els portals.",
+            "FINISH": "Ves a la pàgina de tots els portals"
           }
         },
         "LOGO": {
           "LABEL": "Logo",
-          "UPLOAD_BUTTON": "Upload logo",
-          "HELP_TEXT": "This logo will be displayed on the portal header.",
-          "IMAGE_UPLOAD_SUCCESS": "Logo uploaded successfully",
-          "IMAGE_UPLOAD_ERROR": "Logo deleted successfully",
-          "IMAGE_DELETE_ERROR": "Error while deleting logo"
+          "UPLOAD_BUTTON": "Actualitza el logo",
+          "HELP_TEXT": "Aquest logotip es mostrarà a la capçalera del portal.",
+          "IMAGE_UPLOAD_SUCCESS": "El logotip s'ha penjat correctament",
+          "IMAGE_UPLOAD_ERROR": "El logotip s'ha suprimit correctament",
+          "IMAGE_DELETE_ERROR": "S'ha produït un error en suprimir el logotip"
         },
         "NAME": {
           "LABEL": "Nom",
-          "PLACEHOLDER": "Portal name",
-          "HELP_TEXT": "The name will be used in the public facing portal internally.",
-          "ERROR": "Name is required"
+          "PLACEHOLDER": "Nom del portal",
+          "HELP_TEXT": "El nom s'utilitzarà internament al portal públic.",
+          "ERROR": "El valor és necessari"
         },
         "SLUG": {
           "LABEL": "Slug",
-          "PLACEHOLDER": "Portal slug for urls",
-          "ERROR": "Slug is required"
+          "PLACEHOLDER": "Slug del portal per a URLs",
+          "ERROR": "El slug és obligatori"
         },
         "DOMAIN": {
-          "LABEL": "Custom Domain",
-          "PLACEHOLDER": "Portal custom domain",
+          "LABEL": "Domini personalitzat",
+          "PLACEHOLDER": "Domini personalitzat del portal",
           "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
-          "ERROR": "Enter a valid domain URL"
+          "ERROR": "Introdueix una URL de domini vàlid"
         },
         "HOME_PAGE_LINK": {
-          "LABEL": "Home Page Link",
-          "PLACEHOLDER": "Portal home page link",
+          "LABEL": "Enllaça a la pàgina d'inici",
+          "PLACEHOLDER": "Enllaç a la pàgina d'inici del portal",
           "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
-          "ERROR": "Enter a valid home page URL"
+          "ERROR": "Introdueix una URL de pàgina d'inici vàlid"
         },
         "THEME_COLOR": {
-          "LABEL": "Portal theme color",
-          "HELP_TEXT": "This color will show as the theme color for the portal."
+          "LABEL": "Color del tema del portal",
+          "HELP_TEXT": "Aquest color es mostrarà com a color del tema per al portal."
         },
         "PAGE_TITLE": {
-          "LABEL": "Page Title",
-          "PLACEHOLDER": "Portal page title",
-          "HELP_TEXT": "The page title will be used in the public facing portal.",
-          "ERROR": "Page title is required"
+          "LABEL": "Títol de la pàgina",
+          "PLACEHOLDER": "Títol de la pàgina del portal",
+          "HELP_TEXT": "El títol de la pàgina s'utilitzarà al portal públic.",
+          "ERROR": "El títol de la pàgina és necessari"
         },
         "HEADER_TEXT": {
-          "LABEL": "Header Text",
-          "PLACEHOLDER": "Portal header text",
-          "HELP_TEXT": "The Portal header text will be used in the public facing portal.",
-          "ERROR": "Portal header text is required"
+          "LABEL": "Text de la capçalera",
+          "PLACEHOLDER": "Text de la capçalera del portal",
+          "HELP_TEXT": "El text de la capçalera del portal s'utilitzarà al portal públic.",
+          "ERROR": "El text de la capçalera del portal és obligatori"
         },
         "API": {
-          "SUCCESS_MESSAGE_FOR_BASIC": "Portal created successfully.",
-          "ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.",
-          "SUCCESS_MESSAGE_FOR_UPDATE": "Portal updated successfully.",
-          "ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again."
+          "SUCCESS_MESSAGE_FOR_BASIC": "Portal creat correctament.",
+          "ERROR_MESSAGE_FOR_BASIC": "No s'ha pogut crear el portal. Torna-ho a provar.",
+          "SUCCESS_MESSAGE_FOR_UPDATE": "Portal actualitzat correctament.",
+          "ERROR_MESSAGE_FOR_UPDATE": "No s'ha pogut actualitzar el portal. Torna-ho a provar."
         }
       },
       "ADD_LOCALE": {
-        "TITLE": "Add a new locale",
-        "SUB_TITLE": "This adds a new locale to your available translation list.",
+        "TITLE": "Afegeix una nova localització",
+        "SUB_TITLE": "Això afegeix una configuració regional nova a la teva llista de traduccions disponible.",
         "PORTAL": "Portal",
         "LOCALE": {
-          "LABEL": "Locale",
-          "PLACEHOLDER": "Choose a locale",
-          "ERROR": "Locale is required"
+          "LABEL": "Localització",
+          "PLACEHOLDER": "Escull una localització",
+          "ERROR": "La localització és necessari"
         },
         "BUTTONS": {
-          "CREATE": "Create locale",
+          "CREATE": "Crea una localització",
           "CANCEL": "Cancel·la"
         },
         "API": {
-          "SUCCESS_MESSAGE": "Locale added successfully",
-          "ERROR_MESSAGE": "Unable to add locale. Try again."
+          "SUCCESS_MESSAGE": "La localització s'ha afegit correctament",
+          "ERROR_MESSAGE": "No es pot afegir la localització. Torna-ho a provar."
         }
       },
       "CHANGE_DEFAULT_LOCALE": {
         "API": {
-          "SUCCESS_MESSAGE": "Default locale updated successfully",
-          "ERROR_MESSAGE": "Unable to update default locale. Try again."
+          "SUCCESS_MESSAGE": "La localització predeterminada s'ha actualitzat correctament",
+          "ERROR_MESSAGE": "No es pot actualitzar la localització. Torna-ho a provar."
         }
       },
       "DELETE_LOCALE": {
         "API": {
-          "SUCCESS_MESSAGE": "Locale removed from portal successfully",
-          "ERROR_MESSAGE": "Unable to remove locale from portal. Try again."
+          "SUCCESS_MESSAGE": "La localització s'ha eliminat del portal correctament",
+          "ERROR_MESSAGE": "No es pot eliminar la localització del portal. Torna-ho a provar."
         }
       }
     },
     "TABLE": {
-      "LOADING_MESSAGE": "Loading articles...",
-      "404": "No articles matches your search 🔍",
-      "NO_ARTICLES": "There are no available articles",
+      "LOADING_MESSAGE": "Carregant articles...",
+      "404": "No hi ha cap article que coincideixi amb la teva cerca 🔍",
+      "NO_ARTICLES": "No hi ha articles disponibles",
       "HEADERS": {
-        "TITLE": "Title",
-        "CATEGORY": "Category",
-        "READ_COUNT": "Views",
+        "TITLE": "Títol",
+        "CATEGORY": "Categoria",
+        "READ_COUNT": "Vistes",
         "STATUS": "Estat",
-        "LAST_EDITED": "Last edited"
+        "LAST_EDITED": "Última edició"
       },
       "COLUMNS": {
-        "BY": "by",
-        "AUTHOR_NOT_AVAILABLE": "Author is not available"
+        "BY": "per",
+        "AUTHOR_NOT_AVAILABLE": "L'autor no està disponible"
       }
     },
     "EDIT_ARTICLE": {
-      "LOADING": "Loading article...",
-      "TITLE_PLACEHOLDER": "Article title goes here",
-      "CONTENT_PLACEHOLDER": "Write your article here",
+      "LOADING": "Carregant articles...",
+      "TITLE_PLACEHOLDER": "El títol de l'article va aquí",
+      "CONTENT_PLACEHOLDER": "Escriu el teu article aquí",
       "API": {
-        "ERROR": "Error while saving article"
+        "ERROR": "S'ha produït un error en desar l'article"
       }
     },
     "PUBLISH_ARTICLE": {
       "API": {
-        "ERROR": "Error while publishing article",
-        "SUCCESS": "Article published successfully"
+        "ERROR": "S'ha produït un error en publicar l'article",
+        "SUCCESS": "Article publicat amb èxit"
       }
     },
     "ARCHIVE_ARTICLE": {
       "API": {
-        "ERROR": "Error while archiving article",
-        "SUCCESS": "Article archived successfully"
+        "ERROR": "S'ha produït un error en arxivar l'article",
+        "SUCCESS": "Article arxivat correctament"
       }
     },
     "DELETE_ARTICLE": {
       "MODAL": {
         "CONFIRM": {
           "TITLE": "Confirma l'esborrat",
-          "MESSAGE": "Are you sure to delete the article?",
+          "MESSAGE": "Esteu segur que suprimiu l'article?",
           "YES": "Si, esborra",
           "NO": "No, manten-la"
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "Article deleted successfully",
-        "ERROR_MESSAGE": "Error while deleting article"
+        "SUCCESS_MESSAGE": "Article esborrat correctament",
+        "ERROR_MESSAGE": "S'ha produït un error en suprimir l'article"
       }
     },
     "CREATE_ARTICLE": {
-      "ERROR_MESSAGE": "Please add the article heading and content then only you can update the settings"
+      "ERROR_MESSAGE": "Afegiu l'encapçalament i el contingut de l'article i llavors pots actualitzar la configuració"
     },
     "SIDEBAR": {
       "SEARCH": {
-        "PLACEHOLDER": "Search for articles"
+        "PLACEHOLDER": "Cerca articles"
       }
     },
     "CATEGORY": {
       "ADD": {
-        "TITLE": "Create a category",
-        "SUB_TITLE": "The category will be used in the public facing portal to categorize articles.",
+        "TITLE": "Crea una categoria",
+        "SUB_TITLE": "La categoria s'utilitzarà al portal públic per categoritzar els articles.",
         "PORTAL": "Portal",
-        "LOCALE": "Locale",
+        "LOCALE": "Localització",
         "NAME": {
           "LABEL": "Nom",
-          "PLACEHOLDER": "Category name",
-          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
-          "ERROR": "Name is required"
+          "PLACEHOLDER": "Nom de la categoria",
+          "HELP_TEXT": "El nom i la icona de la categoria s'utilitzaran al portal públic per categoritzar els articles.",
+          "ERROR": "El valor és necessari"
         },
         "SLUG": {
           "LABEL": "Slug",
-          "PLACEHOLDER": "Category slug for urls",
+          "PLACEHOLDER": "Slug de categoria per a URLs",
           "HELP_TEXT": "app.chatwoot.com/hc/my-portal/en-US/categories/my-slug",
-          "ERROR": "Slug is required"
+          "ERROR": "El slug és obligatori"
         },
         "DESCRIPTION": {
           "LABEL": "Descripció",
-          "PLACEHOLDER": "Give a short description about the category.",
-          "ERROR": "Description is required"
+          "PLACEHOLDER": "Fes una breu descripció de la categoria.",
+          "ERROR": "La descripció és necessària"
         },
         "BUTTONS": {
-          "CREATE": "Create category",
+          "CREATE": "Crea la categoria",
           "CANCEL": "Cancel·la"
         },
         "API": {
-          "SUCCESS_MESSAGE": "Category created successfully",
-          "ERROR_MESSAGE": "Unable to create category"
+          "SUCCESS_MESSAGE": "Categoria creada correctament",
+          "ERROR_MESSAGE": "No es pot crear la categoria"
         }
       },
       "EDIT": {
-        "TITLE": "Edit a category",
-        "SUB_TITLE": "Editing a category will update the category in the public facing portal.",
+        "TITLE": "Edita una categoria",
+        "SUB_TITLE": "L'edició d'una categoria actualitzarà la categoria al portal públic.",
         "PORTAL": "Portal",
-        "LOCALE": "Locale",
+        "LOCALE": "Localització",
         "NAME": {
           "LABEL": "Nom",
-          "PLACEHOLDER": "Category name",
-          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
-          "ERROR": "Name is required"
+          "PLACEHOLDER": "Nom de la categoria",
+          "HELP_TEXT": "El nom i la icona de la categoria s'utilitzaran al portal públic per categoritzar els articles.",
+          "ERROR": "El valor és necessari"
         },
         "SLUG": {
           "LABEL": "Slug",
-          "PLACEHOLDER": "Category slug for urls",
+          "PLACEHOLDER": "Slug de categoria per a URLs",
           "HELP_TEXT": "app.chatwoot.com/hc/my-portal/en-US/categories/my-slug",
-          "ERROR": "Slug is required"
+          "ERROR": "El slug és obligatori"
         },
         "DESCRIPTION": {
           "LABEL": "Descripció",
-          "PLACEHOLDER": "Give a short description about the category.",
-          "ERROR": "Description is required"
+          "PLACEHOLDER": "Fes una breu descripció de la categoria.",
+          "ERROR": "La descripció és necessària"
         },
         "BUTTONS": {
-          "CREATE": "Update category",
+          "CREATE": "Actualitza la categoria",
           "CANCEL": "Cancel·la"
         },
         "API": {
-          "SUCCESS_MESSAGE": "Category updated successfully",
-          "ERROR_MESSAGE": "Unable to update category"
+          "SUCCESS_MESSAGE": "Categoria actualitzada correctament",
+          "ERROR_MESSAGE": "No es pot actualitzar la categoria"
         }
       },
       "DELETE": {
         "API": {
-          "SUCCESS_MESSAGE": "Category deleted successfully",
-          "ERROR_MESSAGE": "Unable to delete category"
+          "SUCCESS_MESSAGE": "Categoria suprimida correctament",
+          "ERROR_MESSAGE": "No es pot suprimir la categoria"
         }
       }
     },
     "ARTICLE_SEARCH": {
-      "TITLE": "Search articles",
-      "PLACEHOLDER": "Search articles",
-      "NO_RESULT": "No articles found",
-      "SEARCHING": "Searching...",
+      "TITLE": "Cerca articles",
+      "PLACEHOLDER": "Cerca articles",
+      "NO_RESULT": "No s'han trobat articles",
+      "SEARCHING": "S'està cercant...",
       "SEARCH_BUTTON": "Cercar",
-      "INSERT_ARTICLE": "Insert link",
-      "IFRAME_ERROR": "URL is empty or invalid. Unable to display content.",
-      "OPEN_ARTICLE_SEARCH": "Insert article from Help Center",
-      "SUCCESS_ARTICLE_INSERTED": "Article inserted successfully",
-      "PREVIEW_LINK": "Preview article",
+      "INSERT_ARTICLE": "insereix enllaç",
+      "IFRAME_ERROR": "L'URL és buit o no és vàlid. No es pot mostrar el contingut.",
+      "OPEN_ARTICLE_SEARCH": "Insereix un article del Centre d'ajuda",
+      "SUCCESS_ARTICLE_INSERTED": "Article inserit correctament",
+      "PREVIEW_LINK": "Vista prèvia de l'article",
       "CANCEL": "Tanca",
       "BACK": "Enrere",
-      "BACK_RESULTS": "Back to results"
+      "BACK_RESULTS": "Torna als resultats"
     },
     "UPGRADE_PAGE": {
-      "TITLE": "Help Center",
-      "DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Upgrade your subscription to enable this feature.",
-      "SELF_HOSTED_DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Please contact your administrator to enable this feature.",
+      "TITLE": "Centre d'ajuda",
+      "DESCRIPTION": "Crea portals d'autoservei fàcils d'utilitzar. Ajuda els teus usuaris a accedir als articles i obtenir assistència les 24 hores del dia. Actualitza la teva subscripció per activar aquesta funció.",
+      "SELF_HOSTED_DESCRIPTION": "Crea portals d'autoservei fàcils d'utilitzar. Ajuda els teus usuaris a accedir als articles i obtenir assistència les 24 hores del dia. Posa't en contacte amb el teu administrador per activar aquesta funció.",
       "BUTTON": {
         "LEARN_MORE": "Aprèn més",
-        "UPGRADE": "Upgrade"
+        "UPGRADE": "Actualitza"
       },
       "FEATURES": {
         "PORTALS": {
-          "TITLE": "Multiple portals",
-          "DESCRIPTION": "Create multiple help center portals for different products using the same account."
+          "TITLE": "Múltiples portals",
+          "DESCRIPTION": "Crea diversos portals del centre d'ajuda per a diferents productes amb el mateix compte."
         },
         "LOCALES": {
-          "TITLE": "Full support for locales",
-          "DESCRIPTION": "Localize the portal in your language. We support all locales and allow translations for every article."
+          "TITLE": "Suport total per a localitzacions",
+          "DESCRIPTION": "Localitza el portal en el teu idioma. Admetem totes les localitzacions i permetem traduccions per a cada article."
         },
         "SEO": {
-          "TITLE": "SEO-friendly design",
-          "DESCRIPTION": "Customize your meta tags to improve your visibility on search engines with our SEO-friendly pages."
+          "TITLE": "Disseny SEO-friendly",
+          "DESCRIPTION": "Personalitza les teves meta etiquetes per millorar la teva visibilitat als motors de cerca amb les nostres pàgines SEO-friendly."
         },
         "API": {
-          "TITLE": "Full API support",
-          "DESCRIPTION": "Use the portal as a headless CMS with third party front-end frameworks using our APIs."
+          "TITLE": "Suport complet de l'API",
+          "DESCRIPTION": "Utilitza el portal com a CMS sense cap amb marcs de front-end de tercers mitjançant les nostres API."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/inbox.json b/app/javascript/dashboard/i18n/locale/ca/inbox.json
index 56c87c2666df0..3b2bf78a9edc6 100644
--- a/app/javascript/dashboard/i18n/locale/ca/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/ca/inbox.json
@@ -1,64 +1,64 @@
 {
   "INBOX": {
     "LIST": {
-      "TITLE": "Inbox",
-      "DISPLAY_DROPDOWN": "Display",
-      "LOADING": "Fetching notifications",
-      "404": "There are no active notifications in this group.",
-      "NO_NOTIFICATIONS": "No notifications",
-      "NOTE": "Notifications from all subscribed inboxes",
-      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
-      "SNOOZED_UNTIL": "Snoozed until",
-      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
-      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
+      "TITLE": "Safata d'entrada",
+      "DISPLAY_DROPDOWN": "Visualització",
+      "LOADING": "S'estan obtenint notificacions",
+      "404": "No hi ha notificacions actives en aquest grup.",
+      "NO_NOTIFICATIONS": "No hi ha notificacions",
+      "NOTE": "Notificacions de totes les safates d'entrada subscrites",
+      "NO_MESSAGES_AVAILABLE": "Ups! No es poden recuperar els missatges",
+      "SNOOZED_UNTIL": "Posposat fins a",
+      "SNOOZED_UNTIL_TOMORROW": "Posposat fins demà",
+      "SNOOZED_UNTIL_NEXT_WEEK": "Posposat fins a la setmana vinent"
     },
     "ACTION_HEADER": {
-      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification",
+      "SNOOZE": "Posposa la notificació",
+      "DELETE": "Suprimeix la notificació",
       "BACK": "Enrere"
     },
     "TYPES": {
-      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
-      "CONVERSATION_CREATION": "New conversation created",
-      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
-      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
-      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
-      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
-      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
+      "CONVERSATION_MENTION": "T'han mencionat a la conversa",
+      "CONVERSATION_CREATION": "S'ha creat una nova conversa",
+      "CONVERSATION_ASSIGNMENT": "Una conversa ha estat assignada a tu",
+      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Missatge nou en una conversa assignada",
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Missatge nou en una conversa en què participeu",
+      "SLA_MISSED_FIRST_RESPONSE": "S'ha perdut la primera resposta de l'objectiu de SLA per a la conversa",
+      "SLA_MISSED_NEXT_RESPONSE": "S'ha perdut la següent resposta de l'objectiu de SLA per a la conversa",
+      "SLA_MISSED_RESOLUTION": "S'ha perdut la resolució de l'objectiu de SLA per a la conversa"
     },
     "MENU_ITEM": {
-      "MARK_AS_READ": "Mark as read",
-      "MARK_AS_UNREAD": "Mark as unread",
-      "SNOOZE": "Snooze",
+      "MARK_AS_READ": "Marca com a llegit",
+      "MARK_AS_UNREAD": "Marca com a no llegit",
+      "SNOOZE": "Posposat",
       "DELETE": "Esborrar",
       "MARK_ALL_READ": "Marcar tots com a llegits",
-      "DELETE_ALL": "Delete all",
-      "DELETE_ALL_READ": "Delete all read"
+      "DELETE_ALL": "Suprimeix tot",
+      "DELETE_ALL_READ": "Suprimeix tots els llegits"
     },
     "DISPLAY_MENU": {
-      "SORT": "Sort",
-      "DISPLAY": "Display :",
+      "SORT": "Ordena",
+      "DISPLAY": "Visualització:",
       "SORT_OPTIONS": {
-        "NEWEST": "Newest",
-        "OLDEST": "Oldest",
+        "NEWEST": "Més nou",
+        "OLDEST": "Més antic",
         "PRIORITY": "Prioritat"
       },
       "DISPLAY_OPTIONS": {
         "SNOOZED": "Posposat",
         "READ": "Llegir",
         "LABELS": "Etiquetes",
-        "CONVERSATION_ID": "Conversation ID"
+        "CONVERSATION_ID": "ID de la conversa"
       }
     },
     "ALERTS": {
-      "MARK_AS_READ": "Notification marked as read",
-      "MARK_AS_UNREAD": "Notification marked as unread",
-      "SNOOZE": "Notification snoozed",
-      "DELETE": "Notification deleted",
-      "MARK_ALL_READ": "All notifications marked as read",
-      "DELETE_ALL": "All notifications deleted",
-      "DELETE_ALL_READ": "All read notifications deleted"
+      "MARK_AS_READ": "Notificació marcada com a llegida",
+      "MARK_AS_UNREAD": "Notificació marcada com a no llegida",
+      "SNOOZE": "La notificació s'ha posposat",
+      "DELETE": "S'ha suprimit la notificació",
+      "MARK_ALL_READ": "Totes les notificacions s'han marcat com a llegides",
+      "DELETE_ALL": "S'han suprimit totes les notificacions",
+      "DELETE_ALL_READ": "S'han suprimit totes les notificacions de lectura"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json
index 7858187573752..411fc37881021 100644
--- a/app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Safates d'entrada",
     "SIDEBAR_TXT": "<p><b>Safata d’entrada</b></p> <p> Quan connecteu un lloc web o una pàgina de Facebook a Chatwoot, s’anomena<b>Safata d’entrada</b>. Podeu tenir bústies d’entrada il·limitades al vostre compte de Chatwoot. </p><p> Fer clic a <b>Add Safata d’entrada</b> per connectar un lloc web o una pàgina de Facebook.</p><p> Al tauler, pots veure totes les converses de totes les teves safates d'entrada en un sol lloc i respondre-hi a la pestanya `Converses`.</p><p> També pots veure converses específiques d’una safata d’entrada fent clic al nom de la safata d’entrada a l'esquerre del tauler. </p>",
+    "RECONNECTION_REQUIRED": "La teva safata d'entrada està desconnectada. No rebràs missatges nous fins que no els tornis a autoritzar.",
+    "CLICK_TO_RECONNECT": "Fes clic aquí per tornar a connectar-te.",
     "LIST": {
       "404": "No hi ha cap safata d'entrada connectat a aquest compte."
     },
@@ -30,12 +32,12 @@
     "ADD": {
       "CHANNEL_NAME": {
         "LABEL": "Nom de la safata d'entrada",
-        "PLACEHOLDER": "Enter your inbox name (eg: Acme Inc)",
-        "ERROR": "Please enter a valid inbox name"
+        "PLACEHOLDER": "Introdueix el nom de la safata d'entrada (p. ex.: Acme Inc)",
+        "ERROR": "Introdueix un nom de safata d'entrada vàlid"
       },
       "WEBSITE_NAME": {
         "LABEL": "Nom del lloc web",
-        "PLACEHOLDER": "Enter your website name (eg: Acme Inc)"
+        "PLACEHOLDER": "Introdueix el nom del vostre lloc web (per exemple: Acme Inc)"
       },
       "FB": {
         "HELP": "PD: Al iniciar la sessió, només accediu als missatges de la vostra pàgina. Chatwoot mai no podrà accedir als vostres missatges privats.",
@@ -43,14 +45,14 @@
         "CHOOSE_PLACEHOLDER": "Selecciona una pàgina de la llista",
         "INBOX_NAME": "Nom de la safata d'entrada",
         "ADD_NAME": "Afegeix un nom per a la safata d'entrada",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Tria un nom per a la teva safata d'entrada",
         "PICK_A_VALUE": "Tria un valor"
       },
       "TWITTER": {
         "HELP": "Per afegir el teu perfil de Twitter com a canal, has d'autentificar el vostre perfil de Twitter fent clic a 'Inicieu la sessió amb Twitter' ",
-        "ERROR_MESSAGE": "There was an error connecting to Twitter, please try again",
+        "ERROR_MESSAGE": "S'ha produït un error en connectar amb Twitter, torna-ho a provar",
         "TWEETS": {
-          "ENABLE": "Create conversations from mentioned Tweets"
+          "ENABLE": "Crea converses a partir dels tuits esmentats"
         }
       },
       "WEBSITE_CHANNEL": {
@@ -62,7 +64,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "URL del webhook",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Introdueix l'URL del teu webhook",
           "ERROR": "Introduïu una URL vàlid"
         },
         "CHANNEL_DOMAIN": {
@@ -100,33 +102,33 @@
         },
         "SUBMIT_BUTTON": "Crea la safata entrada",
         "API": {
-          "ERROR_MESSAGE": "We were not able to create a website channel, please try again"
+          "ERROR_MESSAGE": "No hem pogut crear un canal de lloc web, torna-ho a provar"
         }
       },
       "TWILIO": {
-        "TITLE": "Twilio SMS/WhatsApp Channel",
-        "DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp.",
+        "TITLE": "Canal Twilio SMS/WhatsApp",
+        "DESC": "Integra Twilio i comença a donar suport als teus clients mitjançant SMS o WhatsApp.",
         "ACCOUNT_SID": {
           "LABEL": "Compte SID",
           "PLACEHOLDER": "Introduïu el vostre compte Twilio SID",
           "ERROR": "Aquest camp és obligatori"
         },
         "API_KEY": {
-          "USE_API_KEY": "Use API Key Authentication",
+          "USE_API_KEY": "Utilitzeu l'autenticació API Key",
           "LABEL": "API Key SID",
-          "PLACEHOLDER": "Please enter your API Key SID",
+          "PLACEHOLDER": "Introdueix la teva API Key SID",
           "ERROR": "Aquest camp és obligatori"
         },
         "API_KEY_SECRET": {
           "LABEL": "API Key Secret",
-          "PLACEHOLDER": "Please enter your API Key Secret",
+          "PLACEHOLDER": "Introdueix la teva API Key Secret",
           "ERROR": "Aquest camp és obligatori"
         },
         "MESSAGING_SERVICE_SID": {
-          "LABEL": "Messaging Service SID",
-          "PLACEHOLDER": "Please enter your Twilio Messaging Service SID",
+          "LABEL": "SID del servei de missatgeria",
+          "PLACEHOLDER": "Introdueix el teu SID del servei de missatgeria Twilio",
           "ERROR": "Aquest camp és obligatori",
-          "USE_MESSAGING_SERVICE": "Use a Twilio Messaging Service"
+          "USE_MESSAGING_SERVICE": "Utilitza un servei de missatgeria Twilio"
         },
         "CHANNEL_TYPE": {
           "LABEL": "Tipus de canal",
@@ -139,13 +141,13 @@
         },
         "CHANNEL_NAME": {
           "LABEL": "Nom de la safata d'entrada",
-          "PLACEHOLDER": "Please enter a inbox name",
+          "PLACEHOLDER": "Introdueix un nom de safata d'entrada",
           "ERROR": "Aquest camp és obligatori"
         },
         "PHONE_NUMBER": {
           "LABEL": "Número de telèfon",
           "PLACEHOLDER": "Introduïu el número de telèfon des del qual serà enviat el missatge.",
-          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
+          "ERROR": "Proporciona un número de telèfon vàlid que comenci amb un signe \"+\" i que no contingui espais."
         },
         "API_CALLBACK": {
           "TITLE": "Callback URL",
@@ -157,106 +159,106 @@
         }
       },
       "SMS": {
-        "TITLE": "SMS Channel",
-        "DESC": "Start supporting your customers via SMS.",
+        "TITLE": "Canal SMS",
+        "DESC": "Comença a donar suport als teus clients mitjançant SMS.",
         "PROVIDERS": {
-          "LABEL": "API Provider",
+          "LABEL": "Proveïdor d'API",
           "TWILIO": "Twilio",
           "BANDWIDTH": "Bandwidth"
         },
         "API": {
-          "ERROR_MESSAGE": "We were not able to save the SMS channel"
+          "ERROR_MESSAGE": "No hem pogut desar el canal SMS"
         },
         "BANDWIDTH": {
           "ACCOUNT_ID": {
             "LABEL": "ID del compte",
-            "PLACEHOLDER": "Please enter your Bandwidth Account ID",
+            "PLACEHOLDER": "Introdueix l'identificador del teu compte de Bandwidth",
             "ERROR": "Aquest camp és obligatori"
           },
           "API_KEY": {
             "LABEL": "API Key",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Introdueix la teva API Key de Bandwidth",
             "ERROR": "Aquest camp és obligatori"
           },
           "API_SECRET": {
             "LABEL": "API Secret",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Introdueix la teva API Secret de Bandwidth",
             "ERROR": "Aquest camp és obligatori"
           },
           "APPLICATION_ID": {
-            "LABEL": "Application ID",
-            "PLACEHOLDER": "Please enter your Bandwidth Application ID",
+            "LABEL": "ID d'aplicació",
+            "PLACEHOLDER": "Introdueix el teu ID de l'aplicació Bandwidth",
             "ERROR": "Aquest camp és obligatori"
           },
           "INBOX_NAME": {
             "LABEL": "Nom de la safata d'entrada",
-            "PLACEHOLDER": "Please enter a inbox name",
+            "PLACEHOLDER": "Introdueix un nom de safata d'entrada",
             "ERROR": "Aquest camp és obligatori"
           },
           "PHONE_NUMBER": {
             "LABEL": "Número de telèfon",
             "PLACEHOLDER": "Introduïu el número de telèfon des del qual serà enviat el missatge.",
-            "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
+            "ERROR": "Proporciona un número de telèfon vàlid que comenci amb un signe \"+\" i que no contingui espais."
           },
-          "SUBMIT_BUTTON": "Create Bandwidth Channel",
+          "SUBMIT_BUTTON": "Crea un canal de Bandwidth",
           "API": {
-            "ERROR_MESSAGE": "We were not able to authenticate Bandwidth credentials, please try again"
+            "ERROR_MESSAGE": "No hem pogut autenticar les credencials de Bandwidth, prova de nou"
           },
           "API_CALLBACK": {
             "TITLE": "Callback URL",
-            "SUBTITLE": "You have to configure the message callback URL in Bandwidth with the URL mentioned here."
+            "SUBTITLE": "Has de configurar l'URL de devolució del missatge a Bandwidth amb l'URL esmentada aquí."
           }
         }
       },
       "WHATSAPP": {
-        "TITLE": "WhatsApp Channel",
-        "DESC": "Start supporting your customers via WhatsApp.",
+        "TITLE": "Canal WhatsApp",
+        "DESC": "Comença a donar suport als teus clients mitjançant WhatsApp.",
         "PROVIDERS": {
-          "LABEL": "API Provider",
+          "LABEL": "Proveïdor d'API",
           "TWILIO": "Twilio",
           "WHATSAPP_CLOUD": "WhatsApp Cloud",
-          "360_DIALOG": "360Dialog"
+          "360_DIALOG": "360dialog"
         },
         "INBOX_NAME": {
           "LABEL": "Nom de la safata d'entrada",
-          "PLACEHOLDER": "Please enter an inbox name",
+          "PLACEHOLDER": "Introdueix un nom de safata d'entrada",
           "ERROR": "Aquest camp és obligatori"
         },
         "PHONE_NUMBER": {
           "LABEL": "Número de telèfon",
           "PLACEHOLDER": "Introduïu el número de telèfon des del qual serà enviat el missatge.",
-          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
+          "ERROR": "Proporciona un número de telèfon vàlid que comenci amb un signe \"+\" i que no contingui espais."
         },
         "PHONE_NUMBER_ID": {
-          "LABEL": "Phone number ID",
-          "PLACEHOLDER": "Please enter the Phone number ID obtained from Facebook developer dashboard.",
-          "ERROR": "Please enter a valid value."
+          "LABEL": "ID del número de telèfon",
+          "PLACEHOLDER": "Introdueix l'ID del número de telèfon obtingut al tauler de control de desenvolupadors de Facebook.",
+          "ERROR": "Introdueix un valor vàlid."
         },
         "BUSINESS_ACCOUNT_ID": {
-          "LABEL": "Business Account ID",
-          "PLACEHOLDER": "Please enter the Business Account ID obtained from Facebook developer dashboard.",
-          "ERROR": "Please enter a valid value."
+          "LABEL": "ID del compte comercial",
+          "PLACEHOLDER": "Introdueix l'ID del compte comercial obtingut al tauler de control de desenvolupadors de Facebook.",
+          "ERROR": "Introdueix un valor vàlid."
         },
         "WEBHOOK_VERIFY_TOKEN": {
-          "LABEL": "Webhook Verify Token",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
-          "ERROR": "Please enter a valid value."
+          "LABEL": "Token de verificació del webhook",
+          "PLACEHOLDER": "Introdueix un token de verificació que vulguis configurar per als webhooks de Facebook.",
+          "ERROR": "Introdueix un valor vàlid."
         },
         "API_KEY": {
           "LABEL": "API key",
-          "SUBTITLE": "Configure the WhatsApp API key.",
+          "SUBTITLE": "Configura l'API key de WhatsApp.",
           "PLACEHOLDER": "API key",
-          "ERROR": "Please enter a valid value."
+          "ERROR": "Introdueix un valor vàlid."
         },
         "API_CALLBACK": {
           "TITLE": "Callback URL",
-          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "SUBTITLE": "Has de configurar l'URL del webhook i el testimoni de verificació al portal de desenvolupadors de Facebook amb els valors que es mostren a continuació.",
           "WEBHOOK_URL": "URL del webhook",
-          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
+          "WEBHOOK_VERIFICATION_TOKEN": "Token de verificació del webhook"
         },
-        "SUBMIT_BUTTON": "Create WhatsApp Channel",
+        "SUBMIT_BUTTON": "Crea un canal de WhatsApp",
         "API": {
-          "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
+          "ERROR_MESSAGE": "No hem pogut desar el canal WhatsApp"
         }
       },
       "API_CHANNEL": {
@@ -269,7 +271,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "URL del webhook",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Configura l'URL on vulguis rebre les devolucions de trucada dels esdeveniments.",
           "PLACEHOLDER": "URL del webhook"
         },
         "SUBMIT_BUTTON": "Crea un canal API",
@@ -279,7 +281,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Correu electrònic del Canal",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Integra la teva safata d’entrada de correu electrònic.",
         "CHANNEL_NAME": {
           "LABEL": "Nom del canal",
           "PLACEHOLDER": "Introduïu el nom del canal",
@@ -297,55 +299,55 @@
         "FINISH_MESSAGE": "Comença a reenviar els teus correus electrònics a la següent adreça electrònica."
       },
       "LINE_CHANNEL": {
-        "TITLE": "LINE Channel",
-        "DESC": "Integrate with LINE channel and start supporting your customers.",
+        "TITLE": "Canal LINE",
+        "DESC": "Integra't amb el canal LINE i comença a donar suport als teus clients.",
         "CHANNEL_NAME": {
           "LABEL": "Nom del canal",
           "PLACEHOLDER": "Introduïu el nom del canal",
           "ERROR": "Aquest camp és obligatori"
         },
         "LINE_CHANNEL_ID": {
-          "LABEL": "LINE Channel ID",
-          "PLACEHOLDER": "LINE Channel ID"
+          "LABEL": "ID del canal LINE",
+          "PLACEHOLDER": "ID del canal LINE"
         },
         "LINE_CHANNEL_SECRET": {
-          "LABEL": "LINE Channel Secret",
-          "PLACEHOLDER": "LINE Channel Secret"
+          "LABEL": "Secret del canal LINE",
+          "PLACEHOLDER": "Secret del canal LINE"
         },
         "LINE_CHANNEL_TOKEN": {
-          "LABEL": "LINE Channel Token",
-          "PLACEHOLDER": "LINE Channel Token"
+          "LABEL": "Token del canal LINE",
+          "PLACEHOLDER": "Token del canal LINE"
         },
-        "SUBMIT_BUTTON": "Create LINE Channel",
+        "SUBMIT_BUTTON": "Crea un canal LINE",
         "API": {
-          "ERROR_MESSAGE": "We were not able to save the LINE channel"
+          "ERROR_MESSAGE": "No hem pogut desar el canal de LINE"
         },
         "API_CALLBACK": {
           "TITLE": "Callback URL",
-          "SUBTITLE": "You have to configure the webhook URL in LINE application with the URL mentioned here."
+          "SUBTITLE": "Has de configurar l'URL del webhook a l'aplicació LINE amb l'URL esmentat aquí."
         }
       },
       "TELEGRAM_CHANNEL": {
-        "TITLE": "Telegram Channel",
-        "DESC": "Integrate with Telegram channel and start supporting your customers.",
+        "TITLE": "Canal de Telegram",
+        "DESC": "Integra't amb el canal de Telegram i comença a donar suport als teus clients.",
         "BOT_TOKEN": {
-          "LABEL": "Bot Token",
-          "SUBTITLE": "Configure the bot token you have obtained from Telegram BotFather.",
-          "PLACEHOLDER": "Bot Token"
+          "LABEL": "Token del Bot",
+          "SUBTITLE": "Configura el token del bot que has obtingut de Telegram BotFather.",
+          "PLACEHOLDER": "Token del Bot"
         },
-        "SUBMIT_BUTTON": "Create Telegram Channel",
+        "SUBMIT_BUTTON": "Crea el canal de Telegram",
         "API": {
-          "ERROR_MESSAGE": "We were not able to save the telegram channel"
+          "ERROR_MESSAGE": "No hem pogut desar el canal de Telegram"
         }
       },
       "AUTH": {
-        "TITLE": "Choose a channel",
+        "TITLE": "Escull un canal",
         "DESC": "Chatwoot admet widgets de xat en directe, Facebook Messenger, WhatsApp, correus electrònics, etc., com a canals. Si voleu crear un canal personalitzat, podeu crear-lo mitjançant el canal API. Per començar, tria un dels canals següents."
       },
       "AGENTS": {
         "TITLE": "Agents",
         "DESC": "Aquí podeu afegir agents per gestionar la vostra safata d'entrada de nova creació. Només aquests agents seleccionats tindran accés a la vostra safata d'entrada. Els agents que no formen part d'aquesta safata d'entrada no podran veure ni respondre als missatges d'aquesta safata d'entrada quan s’inicien. <br><b>PD:</b> Com a administrador, si necessiteu accés a totes les bústies d’entrada, heu d’afegir-vos com a agent a totes les bústies de sortida que creeu.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Afegeix almenys un agent a la teva safata d'entrada",
         "PICK_AGENTS": "Tria agents per la safata d'entrada"
       },
       "DETAILS": {
@@ -357,22 +359,23 @@
         "DESC": "Heu acabat d'integrar la vostra pàgina de Facebook amb Chatwoot. La propera vegada que un client escrigui un missatge a la vostra pàgina, la conversa apareixerà automàticament a la safata d'entrada. <br>També us proporcionem un script del widget que podeu afegir fàcilment al vostre web. Una vegada que estigui operatiu al vostre web, els clients us podran enviar missatges des del web sense l’ajuda de cap eina externa i la conversa apareixerà aquí mateix, a Chatwoot. <br>Genial, eh? Bé, segur que intentem ser-ho :)"
       },
       "EMAIL_PROVIDER": {
-        "TITLE": "Select your email provider",
-        "DESCRIPTION": "Select an email provider from the list below. If you don't see your email provider in the list, you can select the other provider option and provide the IMAP and SMTP Credentials."
+        "TITLE": "Selecciona el teu proveïdor de correu electrònic",
+        "DESCRIPTION": "Selecciona un proveïdor de correu electrònic de la següent llista. Si no veus el teu proveïdor de correu electrònic a la llista, pots seleccionar l'opció de l'altre proveïdor i proporcionar les credencials IMAP i SMTP."
       },
       "MICROSOFT": {
-        "TITLE": "Microsoft Email",
-        "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
-        "EMAIL_PLACEHOLDER": "Enter email address",
-        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
-        "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
+        "TITLE": "Correu Microsoft",
+        "DESCRIPTION": "Fes clic al botó Inicia sessió amb Microsoft per començar. Se't redirigirà a la pàgina d'inici de sessió del correu electrònic. Un cop acceptis els permisos sol·licitats, se't redirigirà al pas de creació de la safata d'entrada.",
+        "EMAIL_PLACEHOLDER": "Introdueix una adreça de correu electrònic",
+        "SIGN_IN": "Inicia la sessió amb Microsoft",
+        "HELP": "Per afegir el teu compte de Microsoft com a canal, has d'autenticar el teu compte de Microsoft fent clic a \"Inicia la sessió amb Microsoft\" ",
+        "ERROR_MESSAGE": "S'ha produït un error en connectar amb Microsoft, torna-ho a provar"
       }
     },
     "DETAILS": {
       "LOADING_FB": "S'està autenticant amb Facebook...",
       "ERROR_FB_AUTH": "Alguna cosa ha anat malament, actualitza la pàgina...",
-      "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
-      "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
+      "ERROR_FB_UNAUTHORIZED": "No estàs autoritzat per dur a terme aquesta acció. ",
+      "ERROR_FB_UNAUTHORIZED_HELP": "Assegura't que tens accés a la pàgina de Facebook amb control total. Pots obtenir més informació sobre les funcions de Facebook <a href=\" https://www.facebook.com/help/187316341316631\">aquí</a>.",
       "CREATING_CHANNEL": "S'està creant la safata d'entrada...",
       "TITLE": "Configura els detalls de la safata d'entrada",
       "DESC": ""
@@ -385,7 +388,7 @@
       "TITLE": "La vostra safata d'entrada està a punt!",
       "MESSAGE": "Ja podeu interactuar amb els vostres clients a través del vostre canal nou. Feliç suport",
       "BUTTON_TEXT": "Porta'm allà",
-      "MORE_SETTINGS": "More settings",
+      "MORE_SETTINGS": "Més configuracions",
       "WEBSITE_SUCCESS": "Heu finalitzat amb èxit la creació d'un canal web. Copieu el codi que es mostra a continuació i enganxeu-lo al lloc web. La propera vegada que un client utilitzi el xat en directe, la conversa apareixerà automàticament a la safata d'entrada."
     },
     "REAUTH": "Reautoritza",
@@ -394,7 +397,7 @@
       "API": {
         "SUCCESS_MESSAGE": "El color del widget s'ha actualitzat correctament",
         "AUTO_ASSIGNMENT_SUCCESS_MESSAGE": "Assignació automàtica actualitzada correctament",
-        "ERROR_MESSAGE": "We couldn't update inbox settings. Please try again later."
+        "ERROR_MESSAGE": "No hem pogut actualitzar la configuració de la safata d'entrada. Intenta-ho més tard."
       },
       "EMAIL_COLLECT_BOX": {
         "ENABLED": "Habilita",
@@ -405,21 +408,21 @@
         "DISABLED": "Inhabilita"
       },
       "SENDER_NAME_SECTION": {
-        "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
-        "FOR_EG": "For eg:",
+        "TITLE": "Nom del remitent",
+        "SUB_TEXT": "Selecciona el nom que es mostra al vostre client quan reben correus electrònics dels teus agents.",
+        "FOR_EG": "Per exemple:",
         "FRIENDLY": {
-          "TITLE": "Friendly",
-          "FROM": "from",
-          "SUBTITLE": "Add the name of the agent who sent the reply in the sender name to make it friendly."
+          "TITLE": "Amable",
+          "FROM": "des de",
+          "SUBTITLE": "Afegeix el nom de l'agent que ha enviat la resposta al nom del remitent perquè sigui amigable."
         },
         "PROFESSIONAL": {
           "TITLE": "Professional",
-          "SUBTITLE": "Use only the configured business name as the sender name in the email header."
+          "SUBTITLE": "Utilitza només el nom de l'empresa configurat com a nom del remitent a la capçalera del correu electrònic."
         },
         "BUSINESS_NAME": {
-          "BUTTON_TEXT": "+ Configure your business name",
-          "PLACEHOLDER": "Enter your business name",
+          "BUTTON_TEXT": "+ Configura el nom del teu negoci",
+          "PLACEHOLDER": "Introdueix el nom de la teva empresa",
           "SAVE_BUTTON_TEXT": "Desar"
         }
       },
@@ -436,98 +439,98 @@
         "DISABLED": "Inhabilita"
       },
       "ENABLE_HMAC": {
-        "LABEL": "Enable"
+        "LABEL": "Habilita"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "Suprimeix",
-      "AVATAR_DELETE_BUTTON_TEXT": "Delete Avatar",
+      "AVATAR_DELETE_BUTTON_TEXT": "Suprimeix Avatar",
       "CONFIRM": {
         "TITLE": "Confirma esborrat",
         "MESSAGE": "N'estas segur? ",
-        "PLACE_HOLDER": "Please type {inboxName} to confirm",
+        "PLACE_HOLDER": "Escriu {inboxName} per confirmar",
         "YES": "Si, esborra ",
         "NO": "No, segueix "
       },
       "API": {
         "SUCCESS_MESSAGE": "S'ha suprimit la safata d'entrada correctament",
         "ERROR_MESSAGE": "No s'ha pogut eliminar la safata d'entrada. Torneu-ho a provar més endavant.",
-        "AVATAR_SUCCESS_MESSAGE": "Inbox avatar deleted successfully",
-        "AVATAR_ERROR_MESSAGE": "Could not delete the inbox avatar. Please try again later."
+        "AVATAR_SUCCESS_MESSAGE": "L'avatar de la safata d'entrada s'ha suprimit correctament",
+        "AVATAR_ERROR_MESSAGE": "No s'ha pogut esborrar l'avatar de la safata d'entrada. Torneu-ho a provar."
       }
     },
     "TABS": {
       "SETTINGS": "Configuracions",
       "COLLABORATORS": "Col·laboradors",
       "CONFIGURATION": "Configuració",
-      "CAMPAIGN": "Campaigns",
-      "PRE_CHAT_FORM": "Pre Chat Form",
-      "BUSINESS_HOURS": "Business Hours",
-      "WIDGET_BUILDER": "Widget Builder",
-      "BOT_CONFIGURATION": "Bot Configuration"
+      "CAMPAIGN": "Campanyes",
+      "PRE_CHAT_FORM": "Formulari de xat previ",
+      "BUSINESS_HOURS": "Horari comercial",
+      "WIDGET_BUILDER": "Creador del widget",
+      "BOT_CONFIGURATION": "Configuracions del bot"
     },
     "SETTINGS": "Configuracions",
     "FEATURES": {
       "LABEL": "Característiques",
       "DISPLAY_FILE_PICKER": "Mostra el selector de fitxers al widget",
       "DISPLAY_EMOJI_PICKER": "Mostra el selector d'emoji al widget",
-      "ALLOW_END_CONVERSATION": "Allow users to end conversation from the widget",
-      "USE_INBOX_AVATAR_FOR_BOT": "Use inbox name and avatar for the bot"
+      "ALLOW_END_CONVERSATION": "Permet als usuaris finalitzar la conversa des del widget",
+      "USE_INBOX_AVATAR_FOR_BOT": "Utilitza el nom i l'avatar de la safata d'entrada per al bot"
     },
     "SETTINGS_POPUP": {
       "MESSENGER_HEADING": "Script del missatger",
       "MESSENGER_SUB_HEAD": "Col·loca aquest botó dins de l'etiqueta body",
       "INBOX_AGENTS": "Agents",
       "INBOX_AGENTS_SUB_TEXT": "Afegir o eliminar agents d'aquesta safata d'entrada",
-      "AGENT_ASSIGNMENT": "Conversation Assignment",
-      "AGENT_ASSIGNMENT_SUB_TEXT": "Update conversation assignment settings",
+      "AGENT_ASSIGNMENT": "Conversació Assignada",
+      "AGENT_ASSIGNMENT_SUB_TEXT": "Actualitza la configuració de l'assignació de conversa",
       "UPDATE": "Actualitza",
-      "ENABLE_EMAIL_COLLECT_BOX": "Enable email collect box",
-      "ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT": "Enable or disable email collect box on new conversation",
+      "ENABLE_EMAIL_COLLECT_BOX": "Activa la bústia de recollida de correu electrònic",
+      "ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT": "Activa o desactiva la casella de recollida de correu electrònic en una conversa nova",
       "AUTO_ASSIGNMENT": "Activa l'assignació automàtica",
-      "ENABLE_CSAT": "Enable CSAT",
-      "SENDER_NAME_SECTION": "Enable Agent Name in Email",
-      "ENABLE_CSAT_SUB_TEXT": "Enable/Disable CSAT(Customer satisfaction) survey after resolving a conversation",
-      "SENDER_NAME_SECTION_TEXT": "Enable/Disable showing Agent's name in email, if disabled it will show business name",
-      "ENABLE_CONTINUITY_VIA_EMAIL": "Enable conversation continuity via email",
-      "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "Conversations will continue over email if the contact email address is available.",
-      "LOCK_TO_SINGLE_CONVERSATION": "Lock to single conversation",
-      "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "Enable or disable multiple conversations for the same contact in this inbox",
+      "ENABLE_CSAT": "Habilita CSAT",
+      "SENDER_NAME_SECTION": "Activa el nom de l'agent al correu electrònic",
+      "ENABLE_CSAT_SUB_TEXT": "Activa/desactiva l'enquesta CSAT (satisfacció del client) després de resoldre una conversa",
+      "SENDER_NAME_SECTION_TEXT": "Activa/Desactiva la mostra del nom de l'agent al correu electrònic, si està desactivat, mostrarà el nom de l'empresa",
+      "ENABLE_CONTINUITY_VIA_EMAIL": "Activa la continuïtat de la conversa per correu electrònic",
+      "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "Les converses continuaran per correu electrònic si l'adreça electrònica de contacte està disponible.",
+      "LOCK_TO_SINGLE_CONVERSATION": "Bloqueja a una sola conversa",
+      "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "Activa o desactiva diverses converses per al mateix contacte en aquesta safata d'entrada",
       "INBOX_UPDATE_TITLE": "Configuració de la safata d'entrada",
       "INBOX_UPDATE_SUB_TEXT": "Actualitza la configuració de la safata d'entrada",
       "AUTO_ASSIGNMENT_SUB_TEXT": "Activa o desactiva l'assignació automàtica d'agents disponibles a les noves converses",
       "HMAC_VERIFICATION": "Validació de la Identitat del Usuari",
       "HMAC_DESCRIPTION": "In order to validate the user's identity, you can pass an `identifier_hash` for each user. You can generate a HMAC sha256 hash using the `identifier` with the key shown here.",
-      "HMAC_LINK_TO_DOCS": "You can read more here.",
-      "HMAC_MANDATORY_VERIFICATION": "Enforce User Identity Validation",
+      "HMAC_LINK_TO_DOCS": "Pots llegir més aquí.",
+      "HMAC_MANDATORY_VERIFICATION": "Fer complir la validació de la identitat de l'usuari",
       "HMAC_MANDATORY_DESCRIPTION": "If enabled, requests missing the `identifier_hash` will be rejected.",
-      "INBOX_IDENTIFIER": "Inbox Identifier",
-      "INBOX_IDENTIFIER_SUB_TEXT": "Use the `inbox_identifier` token shown here to authentication your API clients.",
-      "FORWARD_EMAIL_TITLE": "Forward to Email",
+      "INBOX_IDENTIFIER": "Identificador de la safata d'entrada",
+      "INBOX_IDENTIFIER_SUB_TEXT": "Utilitza el token \"inbox_identifier\" que es mostra aquí per autenticar els vostres clients de l'API.",
+      "FORWARD_EMAIL_TITLE": "Reenvia al correu electrònic",
       "FORWARD_EMAIL_SUB_TEXT": "Comença a reenviar els teus correus electrònics a la següent adreça electrònica.",
-      "ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
-      "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
-      "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "ALLOW_MESSAGES_AFTER_RESOLVED": "Permet missatges després de resoldre la conversa",
+      "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Permet als usuaris finals enviar missatges fins i tot després de resoldre la conversa.",
+      "WHATSAPP_SECTION_SUBHEADER": "Aquesta API key s'utilitza per a la integració amb les APIs de WhatsApp.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Introdueix la nova clau de l'API que s'utilitzarà per a la integració amb les APIs de WhatsApp.",
       "WHATSAPP_SECTION_TITLE": "API Key",
-      "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
-      "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
+      "WHATSAPP_SECTION_UPDATE_TITLE": "Actualitza l'API Key",
+      "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Introdueix la nova clau de l'API aquí",
       "WHATSAPP_SECTION_UPDATE_BUTTON": "Actualitza",
-      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token",
-      "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.",
-      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
+      "WHATSAPP_WEBHOOK_TITLE": "Token de verificació del webhook",
+      "WHATSAPP_WEBHOOK_SUBHEADER": "Aquest testimoni s'utilitza per verificar l'autenticitat del punt final del webhook.",
+      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Actualitza la configuració del formulari de xat prèvia"
     },
     "HELP_CENTER": {
-      "LABEL": "Help Center",
-      "PLACEHOLDER": "Select Help Center",
-      "SELECT_PLACEHOLDER": "Select Help Center",
-      "REMOVE": "Remove Help Center",
-      "SUB_TEXT": "Attach a Help Center with the inbox"
+      "LABEL": "Centre d'ajuda",
+      "PLACEHOLDER": "Selecciona Centre d'ajuda",
+      "SELECT_PLACEHOLDER": "Selecciona Centre d'ajuda",
+      "REMOVE": "Suprimeix Centre d'ajuda",
+      "SUB_TEXT": "Adjunta un Centre d'ajuda amb la safata d'entrada"
     },
     "AUTO_ASSIGNMENT": {
-      "MAX_ASSIGNMENT_LIMIT": "Auto assignment limit",
-      "MAX_ASSIGNMENT_LIMIT_RANGE_ERROR": "Please enter a value greater than 0",
-      "MAX_ASSIGNMENT_LIMIT_SUB_TEXT": "Limit the maximum number of conversations from this inbox that can be auto assigned to an agent"
+      "MAX_ASSIGNMENT_LIMIT": "Límit d'assignació automàtica",
+      "MAX_ASSIGNMENT_LIMIT_RANGE_ERROR": "Introdueix un valor superior a 0",
+      "MAX_ASSIGNMENT_LIMIT_SUB_TEXT": "Limita el nombre màxim de converses d'aquesta safata d'entrada que es poden assignar automàticament a un agent"
     },
     "FACEBOOK_REAUTHORIZE": {
       "TITLE": "Reautoritza",
@@ -536,63 +539,63 @@
       "MESSAGE_ERROR": "S'ha produït un error; tornau-ho a provar"
     },
     "PRE_CHAT_FORM": {
-      "DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
-      "SET_FIELDS": "Pre chat form fields",
+      "DESCRIPTION": "Els formularis previs al xat et permeten capturar informació de l'usuari abans que comencin a conversar amb vosaltres.",
+      "SET_FIELDS": "Camps del formulari previ al xat",
       "SET_FIELDS_HEADER": {
-        "FIELDS": "Fields",
-        "LABEL": "Label",
-        "PLACE_HOLDER": "Placeholder",
-        "KEY": "Key",
-        "TYPE": "Type",
-        "REQUIRED": "Required"
+        "FIELDS": "Camps",
+        "LABEL": "Etiqueta",
+        "PLACE_HOLDER": "Espai reservat",
+        "KEY": "Clau",
+        "TYPE": "Tipus",
+        "REQUIRED": "Necessari"
       },
       "ENABLE": {
-        "LABEL": "Enable pre chat form",
+        "LABEL": "Activa el formulari de xat previ",
         "OPTIONS": {
           "ENABLED": "Si",
           "DISABLED": "No"
         }
       },
       "PRE_CHAT_MESSAGE": {
-        "LABEL": "Pre chat message",
-        "PLACEHOLDER": "This message would be visible to the users along with the form"
+        "LABEL": "Missatge previ al xat",
+        "PLACEHOLDER": "Aquest missatge seria visible per als usuaris juntament amb el formulari"
       },
       "REQUIRE_EMAIL": {
-        "LABEL": "Visitors should provide their name and email address before starting the chat"
+        "LABEL": "Els visitants han de proporcionar el seu nom i adreça de correu electrònic abans d'iniciar el xat"
       }
     },
     "BUSINESS_HOURS": {
-      "TITLE": "Set your availability",
-      "SUBTITLE": "Set your availability on your livechat widget",
-      "WEEKLY_TITLE": "Set your weekly hours",
-      "TIMEZONE_LABEL": "Select timezone",
-      "UPDATE": "Update business hours settings",
-      "TOGGLE_AVAILABILITY": "Enable business availability for this inbox",
-      "UNAVAILABLE_MESSAGE_LABEL": "Unavailable message for visitors",
-      "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours visitors can be warned with a message and a pre-chat form.",
+      "TITLE": "Estableix la vostra disponibilitat",
+      "SUBTITLE": "Estableix la teva disponibilitat al widget del xat en directe",
+      "WEEKLY_TITLE": "Estableix el teu horari setmanal",
+      "TIMEZONE_LABEL": "Selecciona la zona horària",
+      "UPDATE": "Actualitza la configuració de l'horari comercial",
+      "TOGGLE_AVAILABILITY": "Habilita la disponibilitat comercial per a aquesta safata d'entrada",
+      "UNAVAILABLE_MESSAGE_LABEL": "Missatge no disponible per als visitants",
+      "TOGGLE_HELP": "Si activeu la disponibilitat comercial, es mostraran les hores disponibles al giny del xat en directe, encara que tots els agents estiguin fora de línia. Fora de l'horari disponible, els visitants poden ser avisats amb un missatge i un formulari de xat previ.",
       "DAY": {
-        "ENABLE": "Enable availability for this day",
-        "UNAVAILABLE": "Unavailable",
+        "ENABLE": "Activa la disponibilitat per a aquest dia",
+        "UNAVAILABLE": "No disponible",
         "HOURS": "hores",
-        "VALIDATION_ERROR": "Starting time should be before closing time.",
+        "VALIDATION_ERROR": "L'hora d'inici ha de ser abans de l'hora de tancament.",
         "CHOOSE": "Tria"
       },
-      "ALL_DAY": "All-Day"
+      "ALL_DAY": "Tot el dia"
     },
     "IMAP": {
       "TITLE": "IMAP",
-      "SUBTITLE": "Set your IMAP details",
-      "NOTE_TEXT": "To enable SMTP, please configure IMAP.",
-      "UPDATE": "Update IMAP settings",
-      "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "SUBTITLE": "Configura els detalls de l'IMAP",
+      "NOTE_TEXT": "Per habilitar SMTP, configura IMAP.",
+      "UPDATE": "Actualitza la configuració IMAP",
+      "TOGGLE_AVAILABILITY": "Activa la configuració IMAP per a aquesta safata d'entrada",
+      "TOGGLE_HELP": "Habilitar IMAP ajudarà l'usuari a rebre correu electrònic",
       "EDIT": {
-        "SUCCESS_MESSAGE": "IMAP settings updated successfully",
-        "ERROR_MESSAGE": "Unable to update IMAP settings"
+        "SUCCESS_MESSAGE": "La configuració IMAP s'ha actualitzat correctament",
+        "ERROR_MESSAGE": "No es pot actualitzar la configuració IMAP"
       },
       "ADDRESS": {
-        "LABEL": "Address",
-        "PLACE_HOLDER": "Address (Eg: imap.gmail.com)"
+        "LABEL": "Adreça",
+        "PLACE_HOLDER": "Adreça (p. ex.: imap.gmail.com)"
       },
       "PORT": {
         "LABEL": "Port",
@@ -606,25 +609,25 @@
         "LABEL": "Contrasenya",
         "PLACE_HOLDER": "Contrasenya"
       },
-      "ENABLE_SSL": "Enable SSL"
+      "ENABLE_SSL": "Habilita SSL"
     },
     "MICROSOFT": {
       "TITLE": "Microsoft",
-      "SUBTITLE": "Reauthorize your MICROSOFT account"
+      "SUBTITLE": "Torna a autoritzar el teu compte de MICROSOFT"
     },
     "SMTP": {
       "TITLE": "SMTP",
-      "SUBTITLE": "Set your SMTP details",
-      "UPDATE": "Update SMTP settings",
-      "TOGGLE_AVAILABILITY": "Enable SMTP configuration for this inbox",
-      "TOGGLE_HELP": "Enabling SMTP will help the user to send email",
+      "SUBTITLE": "Configura els detalls del SMTP",
+      "UPDATE": "Actualitza la configuració SMTP",
+      "TOGGLE_AVAILABILITY": "Activa la configuració SNMP per a aquesta safata d'entrada",
+      "TOGGLE_HELP": "Habilitar SMTP ajudarà l'usuari a enviar correu electrònic",
       "EDIT": {
-        "SUCCESS_MESSAGE": "SMTP settings updated successfully",
-        "ERROR_MESSAGE": "Unable to update SMTP settings"
+        "SUCCESS_MESSAGE": "La configuració SMTP s'ha actualitzat correctament",
+        "ERROR_MESSAGE": "No es pot actualitzar la configuració SMTP"
       },
       "ADDRESS": {
-        "LABEL": "Address",
-        "PLACE_HOLDER": "Address (Eg: smtp.gmail.com)"
+        "LABEL": "Adreça",
+        "PLACE_HOLDER": "Adreça (p. ex.: smtp.gmail.com)"
       },
       "PORT": {
         "LABEL": "Port",
@@ -639,77 +642,77 @@
         "PLACE_HOLDER": "Contrasenya"
       },
       "DOMAIN": {
-        "LABEL": "Domain",
-        "PLACE_HOLDER": "Domain"
+        "LABEL": "Domini",
+        "PLACE_HOLDER": "Domini"
       },
-      "ENCRYPTION": "Encryption",
+      "ENCRYPTION": "Xifratge",
       "SSL_TLS": "SSL/TLS",
       "START_TLS": "STARTTLS",
-      "OPEN_SSL_VERIFY_MODE": "Open SSL Verify Mode",
-      "AUTH_MECHANISM": "Authentication"
+      "OPEN_SSL_VERIFY_MODE": "Obre el mode de verificació SSL",
+      "AUTH_MECHANISM": "Autenticació"
     },
-    "NOTE": "Note: ",
+    "NOTE": "Nota: ",
     "WIDGET_BUILDER": {
       "WIDGET_OPTIONS": {
         "AVATAR": {
-          "LABEL": "Website Avatar",
+          "LABEL": "Avatar del lloc web",
           "DELETE": {
             "API": {
-              "SUCCESS_MESSAGE": "Avatar deleted successfully",
+              "SUCCESS_MESSAGE": "Avatar esborrat correctament",
               "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
             }
           }
         },
         "WEBSITE_NAME": {
           "LABEL": "Nom del lloc web",
-          "PLACE_HOLDER": "Enter your website name (eg: Acme Inc)",
-          "ERROR": "Please enter a valid website name"
+          "PLACE_HOLDER": "Introdueix el nom del vostre lloc web (per exemple: Acme Inc)",
+          "ERROR": "Introdueix un nom de lloc web vàlid"
         },
         "WELCOME_HEADING": {
           "LABEL": "Encapçalament de benvinguda",
-          "PLACE_HOLDER": "Hi there!"
+          "PLACE_HOLDER": "Hola!"
         },
         "WELCOME_TAGLINE": {
           "LABEL": "Lema de benvinguda",
           "PLACE_HOLDER": "Facilitem la connexió amb nosaltres. Pregunteu-nos qualsevol cosa o compartiu els vostres comentaris."
         },
         "REPLY_TIME": {
-          "LABEL": "Reply Time",
+          "LABEL": "Temps de resposta",
           "IN_A_FEW_MINUTES": "En pocs minuts",
           "IN_A_FEW_HOURS": "En poques hores",
           "IN_A_DAY": "En un dia"
         },
         "WIDGET_COLOR_LABEL": "Color del Widget",
-        "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position",
-        "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type",
+        "WIDGET_BUBBLE_POSITION_LABEL": "Posició de la bombolla del widget",
+        "WIDGET_BUBBLE_TYPE_LABEL": "Tipus de bombolla de widget",
         "WIDGET_BUBBLE_LAUNCHER_TITLE": {
           "DEFAULT": "Xateja amb nosaltres",
-          "LABEL": "Widget Bubble Launcher Title",
+          "LABEL": "Títol del llançador de bombolles de widget",
           "PLACE_HOLDER": "Xateja amb nosaltres"
         },
         "UPDATE": {
-          "BUTTON_TEXT": "Update Widget Settings",
+          "BUTTON_TEXT": "Actualitza la configuració del widget",
           "API": {
-            "SUCCESS_MESSAGE": "Widget settings updated successfully",
-            "ERROR_MESSAGE": "Unable to update widget settings"
+            "SUCCESS_MESSAGE": "La configuració del widget s'ha actualitzat correctament",
+            "ERROR_MESSAGE": "No es pot actualitzar la configuració del widget"
           }
         },
         "WIDGET_VIEW_OPTION": {
-          "PREVIEW": "Preview",
+          "PREVIEW": "Vista prèvia",
           "SCRIPT": "Script"
         },
         "WIDGET_BUBBLE_POSITION": {
-          "LEFT": "Left",
-          "RIGHT": "Right"
+          "LEFT": "Esquerra",
+          "RIGHT": "Dreta"
         },
         "WIDGET_BUBBLE_TYPE": {
-          "STANDARD": "Standard",
-          "EXPANDED_BUBBLE": "Expanded Bubble"
+          "STANDARD": "Estàndard",
+          "EXPANDED_BUBBLE": "Bombolla expandida"
         }
       },
       "WIDGET_SCREEN": {
-        "DEFAULT": "Default",
-        "CHAT": "Chat"
+        "DEFAULT": "Per defecte",
+        "CHAT": "Xat"
       },
       "REPLY_TIME": {
         "IN_A_FEW_MINUTES": "Normalment responem en pocs minuts",
@@ -722,18 +725,18 @@
       },
       "BODY": {
         "TEAM_AVAILABILITY": {
-          "ONLINE": "We are Online",
+          "ONLINE": "Estem en línia",
           "OFFLINE": "Estem fora en aquest moment"
         },
-        "USER_MESSAGE": "Hi",
-        "AGENT_MESSAGE": "Hello"
+        "USER_MESSAGE": "Hola",
+        "AGENT_MESSAGE": "Hola"
       },
       "BRANDING_TEXT": "Desenvolupat per Chatwoot",
       "SCRIPT_SETTINGS": "\n      window.chatwootSettings = {options};"
     },
     "EMAIL_PROVIDERS": {
       "MICROSOFT": "Microsoft",
-      "OTHER_PROVIDERS": "Other Providers"
+      "OTHER_PROVIDERS": "Altres proveïdors"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/integrationApps.json b/app/javascript/dashboard/i18n/locale/ca/integrationApps.json
index bf5ffcfc4a264..57bd4a29d853f 100644
--- a/app/javascript/dashboard/i18n/locale/ca/integrationApps.json
+++ b/app/javascript/dashboard/i18n/locale/ca/integrationApps.json
@@ -1,36 +1,36 @@
 {
   "INTEGRATION_APPS": {
-    "FETCHING": "Fetching Integrations",
-    "NO_HOOK_CONFIGURED": "There are no %{integrationId} integrations configured in this account.",
-    "HEADER": "Applications",
+    "FETCHING": "S'estan obtenint integracions",
+    "NO_HOOK_CONFIGURED": "No hi ha integracions %{integrationId} configurades en aquest compte.",
+    "HEADER": "Aplicacions",
     "STATUS": {
       "ENABLED": "Habilita",
       "DISABLED": "Inhabilita"
     },
     "CONFIGURE": "Configura",
-    "ADD_BUTTON": "Add a new hook",
+    "ADD_BUTTON": "Afegeix un nou hook",
     "DELETE": {
       "TITLE": {
-        "INBOX": "Confirm deletion",
-        "ACCOUNT": "Disconnect"
+        "INBOX": "Confirma la supressió",
+        "ACCOUNT": "Desconnecta"
       },
       "MESSAGE": {
         "INBOX": "N'estàs segur?",
-        "ACCOUNT": "Are you sure to disconnect?"
+        "ACCOUNT": "Segur que us desconnecteu?"
       },
       "CONFIRM_BUTTON_TEXT": {
         "INBOX": "Si, esborra",
-        "ACCOUNT": "Yes, Disconnect"
+        "ACCOUNT": "Sí, desconnecta"
       },
       "CANCEL_BUTTON_TEXT": "Cancel·la",
       "API": {
-        "SUCCESS_MESSAGE": "Hook deleted successfully",
+        "SUCCESS_MESSAGE": "S'ha esborrat el Hook correctament",
         "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
       }
     },
     "LIST": {
-      "FETCHING": "Fetching integration hooks",
-      "INBOX": "Inbox",
+      "FETCHING": "Recollint els hooks d'integració",
+      "INBOX": "Safata d'entrada",
       "DELETE": {
         "BUTTON_TEXT": "Esborrar"
       }
@@ -38,14 +38,14 @@
     "ADD": {
       "FORM": {
         "INBOX": {
-          "LABEL": "Select Inbox",
-          "PLACEHOLDER": "Select Inbox"
+          "LABEL": "Selecciona Safata d'entrada",
+          "PLACEHOLDER": "Selecciona Safata d'entrada"
         },
         "SUBMIT": "Crear",
         "CANCEL": "Cancel·la"
       },
       "API": {
-        "SUCCESS_MESSAGE": "Integration hook added successfully",
+        "SUCCESS_MESSAGE": "El hook d'integració s'ha afegit correctament",
         "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
       }
     },
@@ -53,10 +53,10 @@
       "BUTTON_TEXT": "Connectar"
     },
     "DISCONNECT": {
-      "BUTTON_TEXT": "Disconnect"
+      "BUTTON_TEXT": "Desconnecta"
     },
     "SIDEBAR_DESCRIPTION": {
-      "DIALOGFLOW": "Dialogflow is a natural language understanding platform that makes it easy to design and integrate a conversational user interface into your mobile app, web application, device, bot, interactive voice response system, and so on. <br /> <br /> Dialogflow integration with %{installationName} allows you to configure a Dialogflow bot with your inboxes which lets the bot handle the queries initially and hand them over to an agent when needed. Dialogflow can be used to qualifying the leads, reduce the workload of agents by providing frequently asked questions etc. <br /> <br /> To add Dialogflow, you need to create a Service Account in your Google project console and share the credentials. Please refer to the Dialogflow docs for more information."
+      "DIALOGFLOW": "Dialogflow és una plataforma de comprensió del llenguatge natural que facilita el disseny i la integració d'una interfície d'usuari conversacional a la teva aplicació mòbil, aplicació web, dispositiu, bot, sistema interactiu de resposta de veu, etc. <br /> <br /> La integració de Dialogflow amb %{installationName} us permet configurar un bot de Dialogflow amb les teves safates d'entrada, la qual cosa permet al bot gestionar les consultes inicialment i lliurar-les a un agent quan sigui necessari. Dialogflow es pot utilitzar per qualificar els clients potencials, reduir la càrrega de treball dels agents proporcionant preguntes freqüents, etc. <br /> <br /> Per afegir Dialogflow, has de crear un compte de servei a la consola del vostre projecte de Google i compartir les credencials. Consulta els documents de Dialogflow per obtenir més informació."
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/integrations.json b/app/javascript/dashboard/i18n/locale/ca/integrations.json
index f732cb103f431..fc9c312f52aa0 100644
--- a/app/javascript/dashboard/i18n/locale/ca/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ca/integrations.json
@@ -1,22 +1,31 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integracions",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
-      "SUBSCRIBED_EVENTS": "Subscribed Events",
+      "SUBSCRIBED_EVENTS": "Esdeveniments subscrits",
       "FORM": {
         "CANCEL": "Cancel·la",
         "DESC": "Els esdeveniments de Webhook us proporcionen informació en temps real sobre el que passa al vostre compte de Chatwoot. Introduïu una URL vàlid per configurar un callback.",
         "SUBSCRIPTIONS": {
-          "LABEL": "Events",
+          "LABEL": "Esdeveniments",
           "EVENTS": {
-            "CONVERSATION_CREATED": "Conversation Created",
-            "CONVERSATION_STATUS_CHANGED": "Conversation Status Changed",
-            "CONVERSATION_UPDATED": "Conversation Updated",
-            "MESSAGE_CREATED": "Message created",
-            "MESSAGE_UPDATED": "Message updated",
-            "WEBWIDGET_TRIGGERED": "Live chat widget opened by the user",
-            "CONTACT_CREATED": "Contact created",
-            "CONTACT_UPDATED": "Contact updated"
+            "CONVERSATION_CREATED": "Conversa Creada",
+            "CONVERSATION_STATUS_CHANGED": "Estat de la conversa canviat",
+            "CONVERSATION_UPDATED": "Conversa Actualitzada",
+            "MESSAGE_CREATED": "Missatge creat",
+            "MESSAGE_UPDATED": "Missatge actualitzat",
+            "WEBWIDGET_TRIGGERED": "Widget de xat en directe obert per l'usuari",
+            "CONTACT_CREATED": "Contacte creat",
+            "CONTACT_UPDATED": "Contacte actualitzat"
           }
         },
         "END_POINT": {
@@ -24,7 +33,7 @@
           "PLACEHOLDER": "Exemple: https://example/api/webhook",
           "ERROR": "Introduïu una URL vàlid"
         },
-        "EDIT_SUBMIT": "Update webhook",
+        "EDIT_SUBMIT": "Webhook actualitzat",
         "ADD_SUBMIT": "Crear webhook"
       },
       "TITLE": "Webhook",
@@ -44,9 +53,9 @@
       },
       "EDIT": {
         "BUTTON_TEXT": "Edita",
-        "TITLE": "Edit webhook",
+        "TITLE": "Edita el webhook",
         "API": {
-          "SUCCESS_MESSAGE": "Webhook configuration updated successfully",
+          "SUCCESS_MESSAGE": "La configuració del webhook s'ha actualitzat correctament",
           "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
         }
       },
@@ -54,7 +63,7 @@
         "CANCEL": "Cancel·la",
         "TITLE": "Afegir un nou webhook",
         "API": {
-          "SUCCESS_MESSAGE": "Webhook configuration added successfully",
+          "SUCCESS_MESSAGE": "La configuració del webhook s'ha afegit correctament",
           "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
         }
       },
@@ -66,7 +75,7 @@
         },
         "CONFIRM": {
           "TITLE": "Confirma l'esborrat",
-          "MESSAGE": "Are you sure to delete the webhook? (%{webhookURL})",
+          "MESSAGE": "N'estàs segur que suprimiu el webhook? (%{webhookURL})",
           "YES": "Si, esborra ",
           "NO": "No, mantén-la"
         }
@@ -75,82 +84,82 @@
     "SLACK": {
       "DELETE": "Esborrar",
       "DELETE_CONFIRMATION": {
-        "TITLE": "Delete the integration",
-        "MESSAGE": "Are you sure you want to delete the integration? Doing so will result in the loss of access to conversations on your Slack workspace."
+        "TITLE": "Suprimeix la integració",
+        "MESSAGE": "N'estàs segur que vols suprimir la integració? Si ho fas, es perdrà l'accés a les converses del vostre espai de treball de Slack."
       },
       "HELP_TEXT": {
         "TITLE": "Com utilitzar la integració de Slack?",
         "BODY": "Amb aquesta integració, totes les teves converses entrants se sincronitzaran amb el canal ***%{selectedChannelName}*** del teu espai de treball de Slack. Podeu gestionar totes les converses dels vostres clients directament des del canal i no perdreu cap missatge.\n\nAquestes són les principals característiques de la integració:\n\n**Respondre a converses des de Slack:** Per respondre a una conversa al ***%{selectedChannelName}*** canal de Slack, només has d'escriure el teu missatge i enviar-lo com a fil. Això crearà una resposta al client mitjançant Chatwoot. Així de senzill!\n\n  **Crear notes privades:** si vols crear notes privades en lloc de respostes, comença el teu missatge amb ***`nota:`***. Això garanteix que el vostre missatge es mantingui privat i no serà visible per al client.\n\n**Associar un perfil d'agent:** si la persona que va respondre a Slack té un perfil d'agent a Chatwoot amb el mateix correu electrònic, les respostes s'associaran amb aquest perfil d'agent automàticament. Això vol dir que podeu fer un seguiment fàcilment qui va dir què i quan. D'altra banda, quan el contestador no té un perfil d'agent associat, les respostes apareixeran des del perfil del bot al client.",
-        "SELECTED": "selected"
+        "SELECTED": "seleccionat"
       },
       "SELECT_CHANNEL": {
-        "OPTION_LABEL": "Select a channel",
+        "OPTION_LABEL": "Selecciona el canal",
         "UPDATE": "Actualitza",
-        "BUTTON_TEXT": "Connect channel",
-        "DESCRIPTION": "Your Slack workspace is now linked with Chatwoot. However, the integration is currently inactive. To activate the integration and connect a channel to Chatwoot, please click the button below.\n\n**Note:** If you are attempting to connect a private channel, add the Chatwoot app to the Slack channel before proceeding with this step.",
-        "ATTENTION_REQUIRED": "Attention required",
-        "EXPIRED": "Your Slack integration has expired. To continue receiving messages on Slack, please delete the integration and connect your workspace again."
-      },
-      "UPDATE_ERROR": "There was an error updating the integration, please try again",
-      "UPDATE_SUCCESS": "The channel is connected successfully",
-      "FAILED_TO_FETCH_CHANNELS": "There was an error fetching the channels from Slack, please try again"
+        "BUTTON_TEXT": "Connecta el canal",
+        "DESCRIPTION": "El teu espai de treball de Slack ara està enllaçat amb Chatwoot. Tanmateix, actualment la integració està inactiva. Per activar la integració i connectar un canal a Chatwoot, feu clic al botó següent.\n\n**Nota:** si estas intentant connectar un canal privat, afegeix l'aplicació Chatwoot al canal de Slack abans de continuar amb aquest pas.",
+        "ATTENTION_REQUIRED": "Es requereix atenció",
+        "EXPIRED": "La teva integració de Slack ha caducat. Per continuar rebent missatges a Slack, suprimeix la integració i torna a connectar el vostre espai de treball."
+      },
+      "UPDATE_ERROR": "S'ha produït un error en actualitzar la integració, torna-ho a provar",
+      "UPDATE_SUCCESS": "El canal s'ha connectat correctament",
+      "FAILED_TO_FETCH_CHANNELS": "S'ha produït un error en obtenir els canals de Slack, torna-ho a provar"
     },
     "DYTE": {
-      "CLICK_HERE_TO_JOIN": "Click here to join",
-      "LEAVE_THE_ROOM": "Leave the room",
-      "START_VIDEO_CALL_HELP_TEXT": "Start a new video call with the customer",
-      "JOIN_ERROR": "There was an error joining the call, please try again",
-      "CREATE_ERROR": "There was an error creating a meeting link, please try again"
+      "CLICK_HERE_TO_JOIN": "Fes clic aquí per unir-te",
+      "LEAVE_THE_ROOM": "Deixa la sala",
+      "START_VIDEO_CALL_HELP_TEXT": "Inicia una nova videotrucada amb el client",
+      "JOIN_ERROR": "S'ha produït un error en unir-se a la trucada, torna-ho a provar",
+      "CREATE_ERROR": "S'ha produït un error en crear un enllaç de reunió, torna-ho a provar"
     },
     "OPEN_AI": {
-      "AI_ASSIST": "AI Assist",
-      "WITH_AI": " %{option} with AI ",
+      "AI_ASSIST": "Assistència IA",
+      "WITH_AI": " %{option} amb IA ",
       "OPTIONS": {
-        "REPLY_SUGGESTION": "Reply Suggestion",
-        "SUMMARIZE": "Summarize",
-        "REPHRASE": "Improve Writing",
-        "FIX_SPELLING_GRAMMAR": "Fix Spelling and Grammar",
-        "SHORTEN": "Shorten",
-        "EXPAND": "Expand",
-        "MAKE_FRIENDLY": "Change message tone to friendly",
-        "MAKE_FORMAL": "Use formal tone",
-        "SIMPLIFY": "Simplify"
+        "REPLY_SUGGESTION": "Suggeriment de resposta",
+        "SUMMARIZE": "Resumir",
+        "REPHRASE": "Millorar l'escriptura",
+        "FIX_SPELLING_GRAMMAR": "Corregir l'ortografia i la gramàtica",
+        "SHORTEN": "Abreuja",
+        "EXPAND": "Expandeix",
+        "MAKE_FRIENDLY": "Canvia el to del missatge a amigable",
+        "MAKE_FORMAL": "Utilitza un to formal",
+        "SIMPLIFY": "Simplifica"
       },
       "ASSISTANCE_MODAL": {
-        "DRAFT_TITLE": "Draft content",
-        "GENERATED_TITLE": "Generated content",
-        "AI_WRITING": "AI is writing",
+        "DRAFT_TITLE": "Esborrany de contingut",
+        "GENERATED_TITLE": "Contingut generat",
+        "AI_WRITING": "La IA està escrivint",
         "BUTTONS": {
-          "APPLY": "Use this suggestion",
+          "APPLY": "Utilitza aquest suggeriment",
           "CANCEL": "Cancel·la"
         }
       },
       "CTA_MODAL": {
-        "TITLE": "Integrate with OpenAI",
-        "DESC": "Bring advanced AI features to your dashboard with OpenAI's GPT models. To begin, enter the API key from your OpenAI account.",
-        "KEY_PLACEHOLDER": "Enter your OpenAI API key",
+        "TITLE": "Integració amb OpenAI",
+        "DESC": "Aporta funcions d'IA avançades al teu tauler amb els models GPT d'OpenAI. Per començar, introdueix la clau API del teu compte d'OpenAI.",
+        "KEY_PLACEHOLDER": "Introdueix la vostra API key d'OpenAI",
         "BUTTONS": {
-          "NEED_HELP": "Need help?",
+          "NEED_HELP": "Necessita ajuda?",
           "DISMISS": "Descartar",
-          "FINISH": "Finish Setup"
+          "FINISH": "Finalitza la configuració"
         },
-        "DISMISS_MESSAGE": "You can setup OpenAI integration later Whenever you want.",
-        "SUCCESS_MESSAGE": "OpenAI integration setup successfully"
+        "DISMISS_MESSAGE": "Pots configurar la integració d'OpenAI més tard quan vulguis.",
+        "SUCCESS_MESSAGE": "S'ha configurat correctament la integració d'OpenAI"
       },
-      "TITLE": "Improve With AI",
-      "SUMMARY_TITLE": "Summary with AI",
-      "REPLY_TITLE": "Reply suggestion with AI",
-      "SUBTITLE": "An improved reply will be generated using AI, based on your current draft.",
+      "TITLE": "Millora amb IA",
+      "SUMMARY_TITLE": "Resum amb IA",
+      "REPLY_TITLE": "Respon el suggeriment amb IA",
+      "SUBTITLE": "Es generarà una resposta millorada mitjançant IA, basada en el teu esborrany actual.",
       "TONE": {
-        "TITLE": "Tone",
+        "TITLE": "To",
         "OPTIONS": {
           "PROFESSIONAL": "Professional",
-          "FRIENDLY": "Friendly"
+          "FRIENDLY": "Amable"
         }
       },
       "BUTTONS": {
-        "GENERATE": "Generate",
-        "GENERATING": "Generating...",
+        "GENERATE": "Genera",
+        "GENERATING": "Generant...",
         "CANCEL": "Cancel·la"
       },
       "GENERATE_ERROR": "There was an error processing the content, please try again"
@@ -165,49 +174,131 @@
       "BUTTON_TEXT": "Connectar"
     },
     "DASHBOARD_APPS": {
-      "TITLE": "Dashboard Apps",
-      "HEADER_BTN_TXT": "Add a new dashboard app",
-      "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
-      "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "TITLE": "Aplicacions del tauler de control",
+      "HEADER_BTN_TXT": "Afegeix una aplicació de tauler nova",
+      "SIDEBAR_TXT": "<p><b>Aplicacions del tauler de control</b></p><p>Les aplicacions del tauler de control permeten a les organitzacions incrustar una aplicació dins del tauler de control de Chatwoot per proporcionar el context als agents d'atenció al client. Aquesta funció et permet crear una aplicació de manera independent i inserir-la dins del tauler per proporcionar informació de l'usuari, les seves comandes o el seu historial de pagaments anteriors.</p><p>Quan incrusteu la teva aplicació mitjançant el tauler de control de Chatwoot, la teva aplicació obté el context de la conversa i el contacte com a esdeveniment de finestra. Implementa un oient per a l'esdeveniment del missatge a la teva pàgina per rebre el context.</p><p>Per afegir una aplicació de tauler nova, feu clic al botó \"Afegeix una aplicació de tauler nova\".</p>",
+      "DESCRIPTION": "Les aplicacions del tauler permeten a les organitzacions incrustar una aplicació dins del tauler per proporcionar el context als agents d'atenció al client. Aquesta funció et permet crear una aplicació de manera independent i incorporar-la per proporcionar informació de l'usuari, les seves comandes o el seu historial de pagaments anterior.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
-        "404": "There are no dashboard apps configured on this account yet",
-        "LOADING": "Fetching dashboard apps...",
+        "404": "Encara no hi ha cap aplicació de tauler configurada en aquest compte",
+        "LOADING": "S'estan obtenint les aplicacions del tauler de control...",
         "TABLE_HEADER": [
           "Nom",
           "Endpoint"
         ],
-        "EDIT_TOOLTIP": "Edit app",
-        "DELETE_TOOLTIP": "Delete app"
+        "EDIT_TOOLTIP": "Edita l'aplicació",
+        "DELETE_TOOLTIP": "Suprimeix l'aplicació"
       },
       "FORM": {
         "TITLE_LABEL": "Nom",
-        "TITLE_PLACEHOLDER": "Enter a name for your dashboard app",
-        "TITLE_ERROR": "A name for the dashboard app is required",
+        "TITLE_PLACEHOLDER": "Introdueix un nom per a l'aplicació del tauler",
+        "TITLE_ERROR": "Un nom per a l'aplicació del tauler és obligatori",
         "URL_LABEL": "Endpoint",
-        "URL_PLACEHOLDER": "Enter the endpoint URL where your app is hosted",
-        "URL_ERROR": "A valid URL is required"
+        "URL_PLACEHOLDER": "Introdueix l'URL del punt final on està allotjada la teva aplicació",
+        "URL_ERROR": "Una URL vàlida és obligatoria"
       },
       "CREATE": {
-        "HEADER": "Add a new dashboard app",
+        "HEADER": "Afegeix una aplicació de tauler nova",
         "FORM_SUBMIT": "Envia",
         "FORM_CANCEL": "Cancel·la",
-        "API_SUCCESS": "Dashboard app configured successfully",
-        "API_ERROR": "We couldn't create an app. Please try again later"
+        "API_SUCCESS": "L'aplicació del tauler de control s'ha configurat correctament",
+        "API_ERROR": "No hem pogut crear una aplicació. Intenta-ho més tard"
       },
       "UPDATE": {
-        "HEADER": "Edit dashboard app",
+        "HEADER": "Edita l'aplicació del tauler",
         "FORM_SUBMIT": "Actualitza",
         "FORM_CANCEL": "Cancel·la",
-        "API_SUCCESS": "Dashboard app updated successfully",
-        "API_ERROR": "We couldn't update the app. Please try again later"
+        "API_SUCCESS": "L'aplicació del tauler de control s'ha actualitzat correctament",
+        "API_ERROR": "No hem pogut actualitzar l'aplicació. Intenta-ho més tard"
       },
       "DELETE": {
-        "CONFIRM_YES": "Yes, delete it",
-        "CONFIRM_NO": "No, keep it",
-        "TITLE": "Confirm deletion",
-        "MESSAGE": "Are you sure to delete the app - %{appName}?",
-        "API_SUCCESS": "Dashboard app deleted successfully",
-        "API_ERROR": "We couldn't delete the app. Please try again later"
+        "CONFIRM_YES": "Sí, esborra-ho",
+        "CONFIRM_NO": "No, mantén-la",
+        "TITLE": "Confirma la supressió",
+        "MESSAGE": "N'estàs segur que vols suprimir l'aplicació - %{appName}?",
+        "API_SUCCESS": "L'aplicació del tauler de control s'ha esborrat correctament",
+        "API_ERROR": "No hem pogut esborrar l'aplicació. Intenta-ho més tard"
+      }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Crear/enllaçar una issue en Linear",
+      "LOADING": "S'estan buscant issues en Linear...",
+      "LOADING_ERROR": "S'ha produït un error en obtenir les issues en Linear, torna-ho a provar",
+      "CREATE": "Crear",
+      "LINK": {
+        "SEARCH": "Cerca issues",
+        "SELECT": "Selecciona una issue",
+        "TITLE": "Enllaç",
+        "EMPTY_LIST": "No s'han trobat issues de Linear",
+        "LOADING": "Carregant",
+        "ERROR": "S'ha produït un error en obtenir les issues en Linear, torna-ho a provar",
+        "LINK_SUCCESS": "S'ha enllaçat la issue correctament",
+        "LINK_ERROR": "S'ha produït un error en enllaçar la issue, torna-ho a provar",
+        "LINK_TITLE": "Conversa (#%{conversationId}) amb %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Crear/enllaçar una issue en Linear",
+        "DESCRIPTION": "Crea issues en Linear a partir de converses o enllaça els existents per fer un seguiment perfecte.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Títol",
+            "PLACEHOLDER": "Introdueix un títol",
+            "REQUIRED_ERROR": "El títol és necessari"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Descripció",
+            "PLACEHOLDER": "Introdueix la descripció"
+          },
+          "TEAM": {
+            "LABEL": "Equip",
+            "PLACEHOLDER": "Selecciona equip",
+            "SEARCH": "Cerca equip",
+            "REQUIRED_ERROR": "Un equip és necessari"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Cessionari",
+            "PLACEHOLDER": "Selecciona assignat",
+            "SEARCH": "Cerca assignat"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritat",
+            "PLACEHOLDER": "Selecciona la prioritat",
+            "SEARCH": "Cerca prioritat"
+          },
+          "LABEL": {
+            "LABEL": "Etiqueta",
+            "PLACEHOLDER": "Selecciona l'etiqueta",
+            "SEARCH": "Cerca etiqueta"
+          },
+          "STATUS": {
+            "LABEL": "Estat",
+            "PLACEHOLDER": "Selecciona l'estat",
+            "SEARCH": "Cerca l'estat"
+          },
+          "PROJECT": {
+            "LABEL": "Projecte",
+            "PLACEHOLDER": "Selecciona el projecte",
+            "SEARCH": "Cerca el projecte"
+          }
+        },
+        "CREATE": "Crear",
+        "CANCEL": "Cancel·la",
+        "CREATE_SUCCESS": "Issue creada correctament",
+        "CREATE_ERROR": "S'ha produït un error en crear la issue, torna-ho a provar",
+        "LOADING_TEAM_ERROR": "S'ha produït un error en obtenir els equips, torna-ho a provar",
+        "LOADING_TEAM_ENTITIES_ERROR": "S'ha produït un error en recuperar les entitats de l'equip, torna-ho a provar"
+      },
+      "ISSUE": {
+        "STATUS": "Estat",
+        "PRIORITY": "Prioritat",
+        "ASSIGNEE": "Cessionari",
+        "LABELS": "Etiquetes",
+        "CREATED_AT": "Creat a %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Desenllaça",
+        "SUCCESS": "S'ha desenllaçat la issue correctament",
+        "ERROR": "S'ha produït un error en desenllaçar la issue, torna-ho a provar"
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ca/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ca/labelsMgmt.json
index b197e881427b3..94b1f4a62afbf 100644
--- a/app/javascript/dashboard/i18n/locale/ca/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiquetes",
     "HEADER_BTN_TXT": "Afegeix etiqueta",
     "LOADING": "Obtenció d’etiquetes",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "No hi ha cap resposta que coincideixi amb aquesta consulta",
-    "SIDEBAR_TXT": "<p><b>Etiquetes</b> <p>Les etiquetes t'ajuden a classificar les converses i a prioritzar-les. Pots assignar una etiqueta a una conversa des del tauler lateral. <br /><br />Les etiquetes estan lligades al compte i es poden utilitzar per crear fluxos de treball personalitzats a la vostra organització. Pots assignar color personalitzat a una etiqueta, cosa que facilita la identificació de l’etiqueta. Pots mostrar l'etiqueta a la barra lateral per filtrar les converses fàcilment.</p>",
     "LIST": {
       "404": "No hi ha etiquetes disponibles en aquest compte.",
       "TITLE": "Gestiona les etiquetes",
@@ -19,9 +20,9 @@
       "NAME": {
         "LABEL": "Nom de l'etiqueta",
         "PLACEHOLDER": "Nom de l'etiqueta",
-        "REQUIRED_ERROR": "Label name is required",
-        "MINIMUM_LENGTH_ERROR": "Minimum length 2 is required",
-        "VALID_ERROR": "Only Alphabets, Numbers, Hyphen and Underscore are allowed"
+        "REQUIRED_ERROR": "El nom de l’etiqueta és obligatori",
+        "MINIMUM_LENGTH_ERROR": "Es requereix una longitud mínima de 2",
+        "VALID_ERROR": "Només es permeten alfabets, números, guionet i guió baix"
       },
       "DESCRIPTION": {
         "LABEL": "Descripció",
@@ -40,16 +41,17 @@
     },
     "SUGGESTIONS": {
       "TOOLTIP": {
-        "SINGLE_SUGGESTION": "Add label to conversation",
-        "MULTIPLE_SUGGESTION": "Select this label",
-        "DESELECT": "Deselect label",
-        "DISMISS": "Dismiss suggestion"
+        "SINGLE_SUGGESTION": "Afegeix una etiqueta a la conversa",
+        "MULTIPLE_SUGGESTION": "Seleccioneu aquesta etiqueta",
+        "DESELECT": "Desseleccioneu l'etiqueta",
+        "DISMISS": "Ignora el suggeriment"
       },
       "POWERED_BY": "Chatwoot AI",
       "DISMISS": "Descartar",
-      "ADD_SELECTED_LABELS": "Add selected labels",
-      "ADD_SELECTED_LABEL": "Add selected label",
-      "ADD_ALL_LABELS": "Add all labels"
+      "ADD_SELECTED_LABELS": "Afegeix les etiquetes seleccionades",
+      "ADD_SELECTED_LABEL": "Afegeix les etiquetes seleccionades",
+      "ADD_ALL_LABELS": "Afegiu totes les etiquetes",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Afegeix etiqueta",
diff --git a/app/javascript/dashboard/i18n/locale/ca/macros.json b/app/javascript/dashboard/i18n/locale/ca/macros.json
index a00bebd6960a3..dbdf08bf90d8a 100644
--- a/app/javascript/dashboard/i18n/locale/ca/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ca/macros.json
@@ -1,78 +1,87 @@
 {
   "MACROS": {
     "HEADER": "Macros",
-    "HEADER_BTN_TXT": "Add a new macro",
-    "HEADER_BTN_TXT_SAVE": "Save macro",
-    "LOADING": "Fetching macros",
-    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
-    "ERROR": "Something went wrong. Please try again",
-    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "HEADER_BTN_TXT": "Afegeix una nova macro",
+    "HEADER_BTN_TXT_SAVE": "Desa la macro",
+    "LOADING": "Obtenció de macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>Una macro és un conjunt d'accions desades que ajuden els agents d'atenció al client a completar tasques fàcilment. Els agents poden definir un conjunt d'accions com etiquetar una conversa amb una etiqueta, enviar una transcripció de correu electrònic, actualitzar un atribut personalitzat, etc., i poden executar aquestes accions amb un sol clic. Quan els agents executen la macro, les accions es realitzaran seqüencialment en l'ordre en què es defineixen. Les macros milloren la productivitat i augmenten la coherència en les accions. </p><p>Una macro pot ser útil de dues maneres. </p><p><b>Com a ajuda d'un agent:</b> si un agent realitza un conjunt d'accions diverses vegades, pot desar-lo com a macro i executar totes les accions junts amb un sol clic.</ p><p><b>Com a opció per incorporar un membre de l'equip:</b> Cada agent ha de realitzar moltes comprovacions/accions diferents durant cada conversa. La incorporació d'un nou membre de l'equip d'assistència serà fàcil si hi ha macros predefinides disponibles al compte. En lloc de descriure cada pas en detall, el responsable o el responsable de l'equip pot indicar les macros utilitzades en diferents escenaris.</p>",
+    "ERROR": "Alguna cosa ha anat malament, torna-ho a provar",
+    "ORDER_INFO": "Les macros s'executaran en l'ordre en què afegeixis les teves accions. Pots reorganitzar-los arrossegant-los per l'identificador al costat de cada node.",
     "ADD": {
       "FORM": {
         "NAME": {
-          "LABEL": "Macro name",
-          "PLACEHOLDER": "Enter a name for your macro",
-          "ERROR": "Name is required for creating a macro"
+          "LABEL": "Nom de la macro",
+          "PLACEHOLDER": "Introdueix un nom per la teva macro",
+          "ERROR": "El nom és necessari per crear una macro"
         },
         "ACTIONS": {
           "LABEL": "Accions"
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "Macro added successfully",
-        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+        "SUCCESS_MESSAGE": "La macro s'ha afegit correctament",
+        "ERROR_MESSAGE": "No es pot crear la macro. Intenta-ho més tard"
       }
     },
     "LIST": {
       "TABLE_HEADER": [
         "Nom",
-        "Created by",
-        "Last updated by",
-        "Visibility"
+        "Creat per",
+        "Última actualització per",
+        "Visibilitat"
       ],
-      "404": "No macros found"
+      "404": "No s'han trobat macros"
     },
     "DELETE": {
-      "TOOLTIP": "Delete macro",
+      "TOOLTIP": "Suprimeix la macro",
       "CONFIRM": {
         "MESSAGE": "N'estas segur? ",
         "YES": "Si, esborra",
         "NO": "No"
       },
       "API": {
-        "SUCCESS_MESSAGE": "Macro deleted successfully",
-        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+        "SUCCESS_MESSAGE": "La macro s'ha suprimit correctament",
+        "ERROR_MESSAGE": "S'ha produït un error suprimint la macro. Torna-ho a provar"
       }
     },
     "EDIT": {
-      "TOOLTIP": "Edit macro",
+      "TOOLTIP": "Edita la macro",
       "API": {
-        "SUCCESS_MESSAGE": "Macro updated successfully",
-        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+        "SUCCESS_MESSAGE": "La macro s'ha actualitzat correctament",
+        "ERROR_MESSAGE": "No s'ha pogut actualitzar la macro. Torna-ho a provar més tard"
       }
     },
     "EDITOR": {
-      "START_FLOW": "Start Flow",
-      "END_FLOW": "End Flow",
-      "LOADING": "Fetching macro",
-      "ADD_BTN_TOOLTIP": "Add new action",
-      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "START_FLOW": "Inicia el flux",
+      "END_FLOW": "Finalitza el flux",
+      "LOADING": "S'està obtenint la macro",
+      "ADD_BTN_TOOLTIP": "Afegeix nova acció",
+      "DELETE_BTN_TOOLTIP": "Suprimeix l'acció",
       "VISIBILITY": {
-        "LABEL": "Macro Visibility",
+        "LABEL": "Visibilitat de la macro",
         "GLOBAL": {
-          "LABEL": "Public",
-          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+          "LABEL": "Públic",
+          "DESCRIPTION": "Aquesta macro està disponible públicament per a tots els agents d'aquest compte."
         },
         "PERSONAL": {
-          "LABEL": "Private",
-          "DESCRIPTION": "This macro will be private to you and not be available to others."
+          "LABEL": "Privat",
+          "DESCRIPTION": "Aquesta macro serà privada per a tu i no estarà disponible per als altres."
         }
       }
     },
     "EXECUTE": {
-      "BUTTON_TOOLTIP": "Execute",
-      "PREVIEW": "Preview Macro",
-      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+      "BUTTON_TOOLTIP": "Executa",
+      "PREVIEW": "Vista prèvia de la macro",
+      "EXECUTED_SUCCESSFULLY": "La macro s'ha executat correctament"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "El valor és necessari",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/report.json b/app/javascript/dashboard/i18n/locale/ca/report.json
index 0817e45626a05..11e9ad073d000 100644
--- a/app/javascript/dashboard/i18n/locale/ca/report.json
+++ b/app/javascript/dashboard/i18n/locale/ca/report.json
@@ -4,8 +4,8 @@
     "LOADING_CHART": "S'estan carregant dades del gràfic...",
     "NO_ENOUGH_DATA": "No hem rebut suficients punts de dades per generar l'informe. Torneu-ho a provar més endavant.",
     "DOWNLOAD_AGENT_REPORTS": "Descarregar Informes d'Agent",
-    "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
-    "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
+    "DATA_FETCHING_FAILED": "No s'han pogut obtenir les dades. Intenta-ho més tard.",
+    "SUMMARY_FETCHING_FAILED": "No s'ha pogut obtenir el resum; torna-ho a provar més tard.",
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Converses",
@@ -20,16 +20,16 @@
         "DESC": "( Total )"
       },
       "FIRST_RESPONSE_TIME": {
-        "NAME": "First Response Time",
+        "NAME": "Primer Temps de Resposta",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de primera resposta (FRT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_TIME": {
         "NAME": "Temps de resolució",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de resolució (RT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_COUNT": {
         "NAME": "Total de resolucions",
@@ -40,21 +40,21 @@
         "DESC": "( Total )"
       },
       "BOT_HANDOFF_COUNT": {
-        "NAME": "Handoff Count",
+        "NAME": "Recompte de lliuraments",
         "DESC": "( Total )"
       },
       "REPLY_TIME": {
-        "NAME": "Customer waiting time",
-        "TOOLTIP_TEXT": "Waiting time is %{metricValue} (based on %{conversationCount} replies)"
+        "NAME": "Temps d'espera del client",
+        "TOOLTIP_TEXT": "El temps d'espera és %{metricValue} (basat en %{conversationCount} respostes)"
       }
     },
     "DATE_RANGE_OPTIONS": {
       "LAST_7_DAYS": "Últims 7 dies",
       "LAST_30_DAYS": "Últims 30 dies",
-      "LAST_3_MONTHS": "Last 3 months",
-      "LAST_6_MONTHS": "Last 6 months",
-      "LAST_YEAR": "Last year",
-      "CUSTOM_DATE_RANGE": "Custom date range"
+      "LAST_3_MONTHS": "Últims tres mesos",
+      "LAST_6_MONTHS": "Últims sis mesos",
+      "LAST_YEAR": "Darrer any",
+      "CUSTOM_DATE_RANGE": "Interval de dates personalitzat"
     },
     "DATE_RANGE": [
       {
@@ -67,61 +67,61 @@
       },
       {
         "id": 2,
-        "name": "Last 3 months"
+        "name": "Últims tres mesos"
       },
       {
         "id": 3,
-        "name": "Last 6 months"
+        "name": "Últims sis mesos"
       },
       {
         "id": 4,
-        "name": "Last year"
+        "name": "Darrer any"
       },
       {
         "id": 5,
-        "name": "Custom date range"
+        "name": "Interval de dates personalitzat"
       }
     ],
     "CUSTOM_DATE_RANGE": {
-      "CONFIRM": "Apply",
-      "PLACEHOLDER": "Select date range"
+      "CONFIRM": "Aplica",
+      "PLACEHOLDER": "Seleccioneu l'interval de dates"
     },
-    "GROUP_BY_FILTER_DROPDOWN_LABEL": "Group By",
-    "DURATION_FILTER_LABEL": "Duration",
+    "GROUP_BY_FILTER_DROPDOWN_LABEL": "Agrupar per",
+    "DURATION_FILTER_LABEL": "Durada",
     "GROUPING_OPTIONS": {
-      "DAY": "Day",
-      "WEEK": "Week",
-      "MONTH": "Month",
+      "DAY": "Dia",
+      "WEEK": "Setmana",
+      "MONTH": "Mes",
       "YEAR": "Any"
     },
     "GROUP_BY_DAY_OPTIONS": [
       {
         "id": 1,
-        "groupBy": "Day"
+        "groupBy": "Dia"
       }
     ],
     "GROUP_BY_WEEK_OPTIONS": [
       {
         "id": 1,
-        "groupBy": "Day"
+        "groupBy": "Dia"
       },
       {
         "id": 2,
-        "groupBy": "Week"
+        "groupBy": "Setmana"
       }
     ],
     "GROUP_BY_MONTH_OPTIONS": [
       {
         "id": 1,
-        "groupBy": "Day"
+        "groupBy": "Dia"
       },
       {
         "id": 2,
-        "groupBy": "Week"
+        "groupBy": "Setmana"
       },
       {
         "id": 3,
-        "groupBy": "Month"
+        "groupBy": "Mes"
       }
     ],
     "GROUP_BY_YEAR_OPTIONS": [
@@ -138,14 +138,14 @@
         "groupBy": "Month"
       }
     ],
-    "BUSINESS_HOURS": "Business Hours",
+    "BUSINESS_HOURS": "Horari comercial",
     "FILTER_ACTIONS": {
       "CLEAR_FILTER": "Esborra els filtres",
       "EMPTY_LIST": "No s'ha trobat agents"
     }
   },
   "AGENT_REPORTS": {
-    "HEADER": "Agents Overview",
+    "HEADER": "Visió general dels agents",
     "LOADING_CHART": "S'estan carregant dades del gràfic...",
     "NO_ENOUGH_DATA": "No hem rebut suficients punts de dades per generar l'informe. Torneu-ho a provar més endavant.",
     "DOWNLOAD_AGENT_REPORTS": "Descarregar Informes d'Agent",
@@ -164,16 +164,16 @@
         "DESC": "( Total )"
       },
       "FIRST_RESPONSE_TIME": {
-        "NAME": "First Response Time",
+        "NAME": "Primer Temps de Resposta",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de primera resposta (FRT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_TIME": {
         "NAME": "Temps de resolució",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de resolució (RT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_COUNT": {
         "NAME": "Total de resolucions",
@@ -191,32 +191,32 @@
       },
       {
         "id": 2,
-        "name": "Last 3 months"
+        "name": "Últims tres mesos"
       },
       {
         "id": 3,
-        "name": "Last 6 months"
+        "name": "Últims sis mesos"
       },
       {
         "id": 4,
-        "name": "Last year"
+        "name": "Darrer any"
       },
       {
         "id": 5,
-        "name": "Custom date range"
+        "name": "Interval de dates personalitzat"
       }
     ],
     "CUSTOM_DATE_RANGE": {
-      "CONFIRM": "Apply",
-      "PLACEHOLDER": "Select date range"
+      "CONFIRM": "Aplica",
+      "PLACEHOLDER": "Seleccioneu l'interval de dates"
     }
   },
   "LABEL_REPORTS": {
-    "HEADER": "Labels Overview",
+    "HEADER": "Visió general de les etiquetes",
     "LOADING_CHART": "S'estan carregant dades del gràfic...",
     "NO_ENOUGH_DATA": "No hem rebut suficients punts de dades per generar l'informe. Torneu-ho a provar més endavant.",
-    "DOWNLOAD_LABEL_REPORTS": "Download label reports",
-    "FILTER_DROPDOWN_LABEL": "Select Label",
+    "DOWNLOAD_LABEL_REPORTS": "Descarregar Informes d'etiquetes",
+    "FILTER_DROPDOWN_LABEL": "Selecciona l'etiqueta",
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Converses",
@@ -231,16 +231,16 @@
         "DESC": "( Total )"
       },
       "FIRST_RESPONSE_TIME": {
-        "NAME": "First Response Time",
+        "NAME": "Primer Temps de Resposta",
         "DESC": "(Mitjana)",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de primera resposta (FRT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_TIME": {
         "NAME": "Temps de resolució",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de resolució (RT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_COUNT": {
         "NAME": "Total de resolucions",
@@ -258,32 +258,32 @@
       },
       {
         "id": 2,
-        "name": "Last 3 months"
+        "name": "Últims tres mesos"
       },
       {
         "id": 3,
-        "name": "Last 6 months"
+        "name": "Últims sis mesos"
       },
       {
         "id": 4,
-        "name": "Last year"
+        "name": "Darrer any"
       },
       {
         "id": 5,
-        "name": "Custom date range"
+        "name": "Interval de dates personalitzat"
       }
     ],
     "CUSTOM_DATE_RANGE": {
-      "CONFIRM": "Apply",
-      "PLACEHOLDER": "Select date range"
+      "CONFIRM": "Aplica",
+      "PLACEHOLDER": "Seleccioneu l'interval de dates"
     }
   },
   "INBOX_REPORTS": {
-    "HEADER": "Inbox Overview",
+    "HEADER": "Visió general de la safata d'entrada",
     "LOADING_CHART": "S'estan carregant dades del gràfic...",
     "NO_ENOUGH_DATA": "No hem rebut suficients punts de dades per generar l'informe. Torneu-ho a provar més endavant.",
-    "DOWNLOAD_INBOX_REPORTS": "Download inbox reports",
-    "FILTER_DROPDOWN_LABEL": "Select Inbox",
+    "DOWNLOAD_INBOX_REPORTS": "Baixa els informes de la safata d'entrada",
+    "FILTER_DROPDOWN_LABEL": "Selecciona Safata d'entrada",
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Converses",
@@ -298,16 +298,16 @@
         "DESC": "( Total )"
       },
       "FIRST_RESPONSE_TIME": {
-        "NAME": "First Response Time",
+        "NAME": "Primer Temps de Resposta",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de primera resposta (FRT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_TIME": {
         "NAME": "Temps de resolució",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de resolució (RT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_COUNT": {
         "NAME": "Total de resolucions",
@@ -325,32 +325,32 @@
       },
       {
         "id": 2,
-        "name": "Last 3 months"
+        "name": "Últims tres mesos"
       },
       {
         "id": 3,
-        "name": "Last 6 months"
+        "name": "Últims sis mesos"
       },
       {
         "id": 4,
-        "name": "Last year"
+        "name": "Darrer any"
       },
       {
         "id": 5,
-        "name": "Custom date range"
+        "name": "Interval de dates personalitzat"
       }
     ],
     "CUSTOM_DATE_RANGE": {
-      "CONFIRM": "Apply",
-      "PLACEHOLDER": "Select date range"
+      "CONFIRM": "Aplica",
+      "PLACEHOLDER": "Seleccioneu l'interval de dates"
     }
   },
   "TEAM_REPORTS": {
-    "HEADER": "Team Overview",
+    "HEADER": "Visió general de l'equip",
     "LOADING_CHART": "S'estan carregant dades del gràfic...",
     "NO_ENOUGH_DATA": "No hem rebut suficients punts de dades per generar l'informe. Torneu-ho a provar més endavant.",
-    "DOWNLOAD_TEAM_REPORTS": "Download team reports",
-    "FILTER_DROPDOWN_LABEL": "Select Team",
+    "DOWNLOAD_TEAM_REPORTS": "Descarregar Informes d'equip",
+    "FILTER_DROPDOWN_LABEL": "Selecciona equip",
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Converses",
@@ -365,16 +365,16 @@
         "DESC": "( Total )"
       },
       "FIRST_RESPONSE_TIME": {
-        "NAME": "First Response Time",
+        "NAME": "Primer Temps de Resposta",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de primera resposta (FRT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_TIME": {
         "NAME": "Temps de resolució",
         "DESC": "( Promig )",
-        "INFO_TEXT": "Total number of conversations used for computation:",
-        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+        "INFO_TEXT": "Nombre total de converses utilitzades per al càlcul:",
+        "TOOLTIP_TEXT": "El temps de resolució (RT) és %{metricValue} (basat en %{conversationCount} converses)"
       },
       "RESOLUTION_COUNT": {
         "NAME": "Total de resolucions",
@@ -392,123 +392,124 @@
       },
       {
         "id": 2,
-        "name": "Last 3 months"
+        "name": "Últims tres mesos"
       },
       {
         "id": 3,
-        "name": "Last 6 months"
+        "name": "Últims sis mesos"
       },
       {
         "id": 4,
-        "name": "Last year"
+        "name": "Darrer any"
       },
       {
         "id": 5,
-        "name": "Custom date range"
+        "name": "Interval de dates personalitzat"
       }
     ],
     "CUSTOM_DATE_RANGE": {
-      "CONFIRM": "Apply",
-      "PLACEHOLDER": "Select date range"
+      "CONFIRM": "Aplica",
+      "PLACEHOLDER": "Seleccioneu l'interval de dates"
     }
   },
   "CSAT_REPORTS": {
-    "HEADER": "CSAT Reports",
-    "NO_RECORDS": "There are no CSAT survey responses available.",
-    "DOWNLOAD": "Download CSAT Reports",
-    "DOWNLOAD_FAILED": "Failed to download CSAT Reports",
+    "HEADER": "Informes CSAT",
+    "NO_RECORDS": "No hi ha respostes de l'enquesta CSAT disponibles.",
+    "DOWNLOAD": "Descarregar informes CSAT",
+    "DOWNLOAD_FAILED": "No s'han pogut baixar els informes CSAT",
     "FILTERS": {
       "AGENTS": {
-        "PLACEHOLDER": "Choose Agents"
+        "PLACEHOLDER": "Escull agents"
       }
     },
     "TABLE": {
       "HEADER": {
-        "CONTACT_NAME": "Contact",
-        "AGENT_NAME": "Assigned agent",
-        "RATING": "Rating",
-        "FEEDBACK_TEXT": "Feedback comment"
+        "CONTACT_NAME": "Contacte",
+        "AGENT_NAME": "Agent assignat",
+        "RATING": "Valoració",
+        "FEEDBACK_TEXT": "Comentaris"
       }
     },
     "METRIC": {
       "TOTAL_RESPONSES": {
-        "LABEL": "Total responses",
-        "TOOLTIP": "Total number of responses collected"
+        "LABEL": "Respostes totals",
+        "TOOLTIP": "Nombre total de respostes recollides"
       },
       "SATISFACTION_SCORE": {
-        "LABEL": "Satisfaction score",
-        "TOOLTIP": "Total number of positive responses / Total number of responses * 100"
+        "LABEL": "Puntuació de satisfacció",
+        "TOOLTIP": "Nombre total de respostes positives / Nombre total de respostes * 100"
       },
       "RESPONSE_RATE": {
-        "LABEL": "Response rate",
-        "TOOLTIP": "Total number of responses / Total number of CSAT survey messages sent * 100"
+        "LABEL": "Taxa de resposta",
+        "TOOLTIP": "Nombre total de respostes / Nombre total de missatges d'enquesta CSAT enviats * 100"
       }
     }
   },
   "BOT_REPORTS": {
-    "HEADER": "Bot Reports",
+    "HEADER": "Informes de bot",
     "METRIC": {
       "TOTAL_CONVERSATIONS": {
-        "LABEL": "No. of Conversations",
-        "TOOLTIP": "Total number of conversations handled by the bot"
+        "LABEL": "Nre. de converses",
+        "TOOLTIP": "Nombre total de converses gestionades pel bot"
       },
       "TOTAL_RESPONSES": {
-        "LABEL": "Total Responses",
-        "TOOLTIP": "Total number of responses sent by the bot"
+        "LABEL": "Respostes totals",
+        "TOOLTIP": "Nombre total de respostes enviades pel bot"
       },
       "RESOLUTION_RATE": {
-        "LABEL": "Resolution Rate",
-        "TOOLTIP": "Total number of conversations resolved by the bot / Total number of conversations handled by the bot * 100"
+        "LABEL": "Taxa de resolució",
+        "TOOLTIP": "Nombre total de converses resoltes pel bot / Nombre total de converses gestionades pel bot * 100"
       },
       "HANDOFF_RATE": {
-        "LABEL": "Handoff Rate",
-        "TOOLTIP": "Total number of conversations handed off to agents / Total number of conversations handled by the bot * 100"
+        "LABEL": "Taxa de trasllat",
+        "TOOLTIP": "Nombre total de converses lliurades als agents / Nombre total de converses gestionades pel bot * 100"
       }
     }
   },
   "OVERVIEW_REPORTS": {
-    "HEADER": "Overview",
-    "LIVE": "Live",
+    "HEADER": "Resum",
+    "LIVE": "En directe",
     "ACCOUNT_CONVERSATIONS": {
-      "HEADER": "Open Conversations",
-      "LOADING_MESSAGE": "Loading conversation metrics...",
+      "HEADER": "Obrir converses",
+      "LOADING_MESSAGE": "S'estan carregant les mètriques de les converses...",
       "OPEN": "Obrir",
-      "UNATTENDED": "Unattended",
+      "UNATTENDED": "Sense assistència",
       "UNASSIGNED": "Sense assignar",
       "PENDING": "Pendent"
     },
     "CONVERSATION_HEATMAP": {
-      "HEADER": "Conversation Traffic",
-      "NO_CONVERSATIONS": "No conversations",
-      "CONVERSATION": "%{count} conversation",
-      "CONVERSATIONS": "%{count} conversations"
+      "HEADER": "Trànsit de conversa",
+      "NO_CONVERSATIONS": "Sense converses",
+      "CONVERSATION": "%{count} conversa",
+      "CONVERSATIONS": "%{count} converses",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
-      "HEADER": "Conversations by agents",
-      "LOADING_MESSAGE": "Loading agent metrics...",
-      "NO_AGENTS": "There are no conversations by agents",
+      "HEADER": "Converses per agents",
+      "LOADING_MESSAGE": "S'estan carregant les mètriques dels agents...",
+      "NO_AGENTS": "No hi ha converses per part dels agents",
       "TABLE_HEADER": {
         "AGENT": "Agent",
-        "OPEN": "OPEN",
-        "UNATTENDED": "Unattended",
+        "OPEN": "OBRE",
+        "UNATTENDED": "Sense assistència",
         "STATUS": "Estat"
       }
     },
     "AGENT_STATUS": {
-      "HEADER": "Agent status",
+      "HEADER": "Estat de l'agent",
       "ONLINE": "En línia",
       "BUSY": "Ocupat",
       "OFFLINE": "Fora de línia"
     }
   },
   "DAYS_OF_WEEK": {
-    "SUNDAY": "Sunday",
-    "MONDAY": "Monday",
-    "TUESDAY": "Tuesday",
-    "WEDNESDAY": "Wednesday",
-    "THURSDAY": "Thursday",
-    "FRIDAY": "Friday",
-    "SATURDAY": "Saturday"
+    "SUNDAY": "Diumenge",
+    "MONDAY": "Dilluns",
+    "TUESDAY": "Dimarts",
+    "WEDNESDAY": "Dimecres",
+    "THURSDAY": "Dijous",
+    "FRIDAY": "Divendres",
+    "SATURDAY": "Dissabte"
   },
   "SLA_REPORTS": {
     "HEADER": "Informes SLA",
@@ -536,6 +537,7 @@
       "LABELS": "Etiqueta",
       "TEAMS": "Equip"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Proporció d'encerts",
diff --git a/app/javascript/dashboard/i18n/locale/ca/resetPassword.json b/app/javascript/dashboard/i18n/locale/ca/resetPassword.json
index 5254f9d37e8bf..5df0b7319ec56 100644
--- a/app/javascript/dashboard/i18n/locale/ca/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/ca/resetPassword.json
@@ -1,8 +1,8 @@
 {
   "RESET_PASSWORD": {
     "TITLE": "Restablir la contrasenya",
-    "DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
-    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
+    "DESCRIPTION": "Introduïu l'adreça de correu electrònic que feu servir per iniciar sessió a Chatwoot per obtenir les instruccions de restabliment de la contrasenya.",
+    "GO_BACK_TO_LOGIN": "Si voleu tornar a la pàgina d'inici de sessió,",
     "EMAIL": {
       "LABEL": "Correu electrònic",
       "PLACEHOLDER": "Introduïu el vostre correu electrònic.",
diff --git a/app/javascript/dashboard/i18n/locale/ca/search.json b/app/javascript/dashboard/i18n/locale/ca/search.json
index ba89f20ecbf9e..65f007fddcd77 100644
--- a/app/javascript/dashboard/i18n/locale/ca/search.json
+++ b/app/javascript/dashboard/i18n/locale/ca/search.json
@@ -11,15 +11,16 @@
       "CONVERSATIONS": "Converses",
       "MESSAGES": "Missatges"
     },
-    "EMPTY_STATE": "No %{item} found for query '%{query}'",
-    "EMPTY_STATE_FULL": "No results found for query '%{query}'",
-    "PLACEHOLDER_KEYBINDING": "/ to focus",
+    "SEARCHING_DATA": "S'està cercant",
+    "EMPTY_STATE": "No s'ha trobat cap %{item} per a la consulta '%{query}'",
+    "EMPTY_STATE_FULL": "No s'han trobat resultats per a la consulta '%{query}'",
+    "PLACEHOLDER_KEYBINDING": "/ centrar",
     "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
     "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results.",
     "BOT_LABEL": "Bot",
-    "READ_MORE": "Read more",
-    "WROTE": "wrote:",
-    "FROM": "from",
+    "READ_MORE": "Llegir més",
+    "WROTE": "va escriure:",
+    "FROM": "des de",
     "EMAIL": "correu electrònic"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/setNewPassword.json b/app/javascript/dashboard/i18n/locale/ca/setNewPassword.json
index 7742e7cc69c47..b465bee367b7c 100644
--- a/app/javascript/dashboard/i18n/locale/ca/setNewPassword.json
+++ b/app/javascript/dashboard/i18n/locale/ca/setNewPassword.json
@@ -1,13 +1,13 @@
 {
   "SET_NEW_PASSWORD": {
-    "TITLE": "Set new password",
+    "TITLE": "Estableix la nova contrasenya",
     "PASSWORD": {
       "LABEL": "Contrasenya",
       "PLACEHOLDER": "Contrasenya",
       "ERROR": "La contrasenya és massa curta."
     },
     "CONFIRM_PASSWORD": {
-      "LABEL": "Confirm password",
+      "LABEL": "Confirma la contrasenya",
       "PLACEHOLDER": "Confirma la contrasenya",
       "ERROR": "La contrasenya no coindeix."
     },
@@ -16,7 +16,7 @@
       "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
     },
     "CAPTCHA": {
-      "ERROR": "Verification expired. Please solve captcha again."
+      "ERROR": "La verificació ha caducat. Si us plau, torna a resoldre captcha."
     },
     "SUBMIT": "Envia"
   }
diff --git a/app/javascript/dashboard/i18n/locale/ca/settings.json b/app/javascript/dashboard/i18n/locale/ca/settings.json
index 3c50095122367..cfdcf4ff5512f 100644
--- a/app/javascript/dashboard/i18n/locale/ca/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ca/settings.json
@@ -3,14 +3,14 @@
     "LINK": "Configuració del Perfil",
     "TITLE": "Configuració del Perfil",
     "BTN_TEXT": "Actualització del Perfil",
-    "DELETE_AVATAR": "Delete Avatar",
-    "AVATAR_DELETE_SUCCESS": "Avatar has been deleted successfully",
-    "AVATAR_DELETE_FAILED": "There is an error while deleting avatar, please try again",
-    "UPDATE_SUCCESS": "Your profile has been updated successfully",
+    "DELETE_AVATAR": "Suprimeix Avatar",
+    "AVATAR_DELETE_SUCCESS": "L'avatar s'ha suprimit correctament",
+    "AVATAR_DELETE_FAILED": "S'ha produït un error en suprimir l'avatar, torneu-ho a provar",
+    "UPDATE_SUCCESS": "El teu perfil s'ha actualitzat correctament",
     "PASSWORD_UPDATE_SUCCESS": "La teva contrasenya ha estat canviada correctament",
     "AFTER_EMAIL_CHANGED": "El vostre perfil s'ha actualitzat correctament. Torneu a iniciar la sessió ja que les vostres credencials d'inici de sessió han canviat",
     "FORM": {
-      "PICTURE": "Profile Picture",
+      "PICTURE": "Imatge de perfil",
       "AVATAR": "Imatge del Perfil",
       "ERROR": "Corregiu els errors del formulari",
       "REMOVE_IMAGE": "Suprimeix",
@@ -21,39 +21,39 @@
         "NOTE": "La vostra adreça de correu electrònic és la vostra identitat i s'utilitza per iniciar la sessió."
       },
       "SEND_MESSAGE": {
-        "TITLE": "Hotkey to send messages",
-        "NOTE": "You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your preference of writing.",
-        "UPDATE_SUCCESS": "Your settings have been updated successfully",
+        "TITLE": "Tecla d'accés ràpid per enviar missatges",
+        "NOTE": "Pots seleccionar una tecla d'accés ràpid (Enter o Cmd/Ctrl+Enter) segons les teves preferències d'escriptura.",
+        "UPDATE_SUCCESS": "La teva configuració s'ha actualitzat correctament",
         "CARD": {
           "ENTER_KEY": {
-            "HEADING": "Enter (↵)",
-            "CONTENT": "Send messages by pressing Enter key instead of clicking the send button."
+            "HEADING": "Retorn (↵)",
+            "CONTENT": "Envia missatges prement la tecla Intro en comptes de fer clic al botó d'enviament."
           },
           "CMD_ENTER_KEY": {
             "HEADING": "Cmd/Ctrl + Enter (⌘ + ↵)",
-            "CONTENT": "Send messages by pressing Cmd/Ctrl + enter key instead of clicking the send button."
+            "CONTENT": "Envia missatges prement Cmd/Ctrl + tecla Intro en lloc de fer clic al botó d'enviament."
           }
         }
       },
       "MESSAGE_SIGNATURE_SECTION": {
-        "TITLE": "Personal message signature",
-        "NOTE": "Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes.",
-        "BTN_TEXT": "Save message signature",
-        "API_ERROR": "Couldn't save signature! Try again",
-        "API_SUCCESS": "Signature saved successfully",
-        "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
-        "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save to save the signature",
-        "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB"
+        "TITLE": "Signatura personal del missatge",
+        "NOTE": "Crea una signatura de missatge única per aparèixer al final de cada missatge que envieu des de qualsevol safata d'entrada. També pots incloure una imatge en línia, que és compatible amb el xat en directe, el correu electrònic i les bústies d'entrada de l'API.",
+        "BTN_TEXT": "Desa la signatura del missatge",
+        "API_ERROR": "No s'ha pogut desar la signatura! Torna-ho a provar",
+        "API_SUCCESS": "La signatura s'ha desat correctament",
+        "IMAGE_UPLOAD_ERROR": "No s'ha pogut carregar la imatge! Torna-ho a provar",
+        "IMAGE_UPLOAD_SUCCESS": "La imatge s'ha afegit correctament. Fes clic a desa per desar la signatura",
+        "IMAGE_UPLOAD_SIZE_ERROR": "La mida de la imatge ha de ser inferior a {size}MB"
       },
       "MESSAGE_SIGNATURE": {
-        "LABEL": "Message Signature",
-        "ERROR": "Message Signature cannot be empty",
-        "PLACEHOLDER": "Insert your personal message signature here."
+        "LABEL": "Signatura del missatge",
+        "ERROR": "La signatura del missatge no pot estar buida",
+        "PLACEHOLDER": "Introdueix aquí la teva signatura de missatge personal."
       },
       "PASSWORD_SECTION": {
         "TITLE": "Contrasenya",
         "NOTE": "L'actualització de la contrasenya restableix els vostres inicis de sessió en múltiples dispositius.",
-        "BTN_TEXT": "Change password"
+        "BTN_TEXT": "Canvia la contrasenya"
       },
       "ACCESS_TOKEN": {
         "TITLE": "Token d'accés",
@@ -61,26 +61,26 @@
         "COPY": "Copia"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
-        "TITLE": "Audio Notifications",
-        "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "TITLE": "Notificacions d'àudio",
+        "NOTE": "Activa les notificacions d'àudio al tauler per a missatges i converses nous.",
         "ALERT_TYPES": {
           "NONE": "Ningú",
-          "MINE": "Assigned",
+          "MINE": "Assignat",
           "ALL": "Totes"
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Esdeveniments d'alerta per a converses:",
           "NONE": "Ningú",
-          "ASSIGNED": "Assigned Conversations",
-          "ALL_CONVERSATIONS": "All Conversations"
+          "ASSIGNED": "Converses assignades",
+          "ALL_CONVERSATIONS": "Totes les converses"
         },
         "DEFAULT_TONE": {
-          "TITLE": "Alert tone:"
+          "TITLE": "To d'alerta:"
         },
         "CONDITIONS": {
-          "TITLE": "Alert conditions:",
-          "CONDITION_ONE": "Send audio alerts only if the browser window is not active",
-          "CONDITION_TWO": "Send alerts every 30s until all the assigned conversations are read"
+          "TITLE": "Condicions d'alerta:",
+          "CONDITION_ONE": "Envia alertes d'àudio només si la finestra del navegador no està activa",
+          "CONDITION_TWO": "Envia alertes cada 30 segons fins que es llegeixin totes les converses assignades"
         }
       },
       "EMAIL_NOTIFICATIONS_SECTION": {
@@ -90,27 +90,27 @@
         "CONVERSATION_CREATION": "Envieu notificacions per correu electrònic quan es crea una nova conversa",
         "CONVERSATION_MENTION": "Enviar notificacions per mail quan siguis esmentat en una conversació",
         "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Envia notificacions per correu electrònic quan es creï un missatge nou en una conversa assignada",
-        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation",
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Envia notificacions per correu electrònic quan es crea un missatge nou en una conversa participant",
         "SLA_MISSED_FIRST_RESPONSE": "Envia notificacions per correu electrònic quan una conversa no compleixi un SLA de primera resposta",
         "SLA_MISSED_NEXT_RESPONSE": "Envia notificacions per correu electrònic quan una conversa es perdi la següent resposta SLA",
         "SLA_MISSED_RESOLUTION": "Envia notificacions per correu electrònic quan una conversa no resol un SLA"
       },
       "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
+        "TITLE": "Preferències de notificació",
+        "TYPE_TITLE": "Tipus de notificació",
         "EMAIL": "Correu electrònic",
-        "PUSH": "Push notification",
+        "PUSH": "Notificació Push",
         "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
-          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
-          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
-          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
-          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
-          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
+          "CONVERSATION_CREATED": "S'ha creat una nova conversa",
+          "CONVERSATION_ASSIGNED": "Se t'assigna una conversa",
+          "CONVERSATION_MENTION": "Se't menciona en una conversa",
+          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Es crea un missatge nou en una conversa assignada",
+          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Es crea un missatge nou en una conversa participant",
+          "SLA_MISSED_FIRST_RESPONSE": "Una conversa no té un SLA de primera resposta",
+          "SLA_MISSED_NEXT_RESPONSE": "SLA de la següent resposta no és una conversa",
+          "SLA_MISSED_RESOLUTION": "Una conversa no resol un SLA"
         },
-        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
+        "BROWSER_PERMISSION": "Activa les notificacions push en el teu navegador perquè puguis rebre-les"
       },
       "API": {
         "UPDATE_SUCCESS": "Les teves preferències de notificació s’han actualitzat correctament",
@@ -123,7 +123,7 @@
         "CONVERSATION_CREATION": "Envia notificacions automàtiques quan es creï una conversa nova",
         "CONVERSATION_MENTION": "Enviar notificacions push quan siguis esmentat en una conversació",
         "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Envia notificacions automàtiques quan es creï un missatge nou en una conversa assignada",
-        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in a participating conversation",
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Envia notificacions push quan es crea un missatge nou en una conversa participant",
         "HAS_ENABLED_PUSH": "Heu activat les notificacions per a aquest navegador.",
         "REQUEST_PUSH": "Activa les notificacions",
         "SLA_MISSED_FIRST_RESPONSE": "Envia notificacions automàtiques quan una conversa no tingui un SLA de primera resposta",
@@ -150,8 +150,8 @@
           "Ocupat",
           "Fora de línia"
         ],
-        "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
-        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
+        "SET_AVAILABILITY_SUCCESS": "La disponibilitat s'ha establert correctament",
+        "SET_AVAILABILITY_ERROR": "No s'ha pogut establir la disponibilitat, torna-ho a provar"
       },
       "EMAIL": {
         "LABEL": "La teva adreça de correu electrònic",
@@ -159,62 +159,62 @@
         "PLACEHOLDER": "Introduïu la vostra adreça de correu electrònic, que es mostrarà a les converses"
       },
       "CURRENT_PASSWORD": {
-        "LABEL": "Current password",
-        "ERROR": "Please enter the current password",
-        "PLACEHOLDER": "Please enter the current password"
+        "LABEL": "Contrasenya actual",
+        "ERROR": "Introdueix la contrasenya actual",
+        "PLACEHOLDER": "Introdueix la contrasenya actual"
       },
       "PASSWORD": {
-        "LABEL": "New password",
+        "LABEL": "Nova contrasenya",
         "ERROR": "Introduïu una contrasenya d'una longitud de 6 o més",
         "PLACEHOLDER": "Introduïu una nova contrasenya"
       },
       "PASSWORD_CONFIRMATION": {
         "LABEL": "Confirmació de la nova contrasenya",
         "ERROR": "Confirmeu que les contrasenyes coincideixin",
-        "PLACEHOLDER": "Please re-enter your new password"
+        "PLACEHOLDER": "Torna a introduir la nova contrasenya"
       }
     }
   },
   "SIDEBAR_ITEMS": {
     "CHANGE_AVAILABILITY_STATUS": "Canvia",
     "CHANGE_ACCOUNTS": "Canvia de compte",
-    "CONTACT_SUPPORT": "Contact Support",
+    "CONTACT_SUPPORT": "Contacte de suport",
     "SELECTOR_SUBTITLE": "Selecciona un compte de la llista següent",
     "PROFILE_SETTINGS": "Configuració del Perfil",
-    "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",
-    "APPEARANCE": "Change Appearance",
-    "SUPER_ADMIN_CONSOLE": "Super Admin Console",
+    "KEYBOARD_SHORTCUTS": "Dreceres de teclat",
+    "APPEARANCE": "Canvia l'aparença",
+    "SUPER_ADMIN_CONSOLE": "Consola de super administració",
     "LOGOUT": "Sortir"
   },
   "APP_GLOBAL": {
     "TRIAL_MESSAGE": "dies de prova restants.",
     "TRAIL_BUTTON": "Compra ara",
-    "DELETED_USER": "Deleted User",
-    "EMAIL_VERIFICATION_PENDING": "It seems that you haven't verified your email address yet. Please check your inbox for the verification email.",
-    "RESEND_VERIFICATION_MAIL": "Resend verification email",
-    "EMAIL_VERIFICATION_SENT": "Verification email has been sent. Please check your inbox.",
+    "DELETED_USER": "Usuari suprimit",
+    "EMAIL_VERIFICATION_PENDING": "Sembla que encara no has verificat la teva adreça de correu electrònic. Comprova la teva safata d'entrada per trobar el correu electrònic de verificació.",
+    "RESEND_VERIFICATION_MAIL": "Reenviar correu electrònic de verificació",
+    "EMAIL_VERIFICATION_SENT": "S'ha enviat un correu electrònic de verificació. Comprova la teva safata d'entrada.",
     "ACCOUNT_SUSPENDED": {
-      "TITLE": "Account Suspended",
-      "MESSAGE": "Your account is suspended. Please reach out to the support team for more information."
+      "TITLE": "Compte suspès",
+      "MESSAGE": "El teu compte està suspès. Posa't en contacte amb l'equip d'assistència per obtenir més informació."
     }
   },
   "COMPONENTS": {
     "CODE": {
       "BUTTON_TEXT": "Copia",
-      "CODEPEN": "Open in CodePen",
+      "CODEPEN": "Obre en CodePen",
       "COPY_SUCCESSFUL": "El codi s'ha copiat al porta-retalls amb èxit"
     },
     "SHOW_MORE_BLOCK": {
-      "SHOW_MORE": "Show More",
-      "SHOW_LESS": "Show Less"
+      "SHOW_MORE": "Mostra més",
+      "SHOW_LESS": "Mostra menys"
     },
     "FILE_BUBBLE": {
       "DOWNLOAD": "Descarrega",
       "UPLOADING": "S'està carregant...",
-      "INSTAGRAM_STORY_UNAVAILABLE": "This story is no longer available."
+      "INSTAGRAM_STORY_UNAVAILABLE": "Aquesta història ja no està disponible."
     },
     "LOCATION_BUBBLE": {
-      "SEE_ON_MAP": "See on map"
+      "SEE_ON_MAP": "Veure al mapa"
     },
     "FORM_BUBBLE": {
       "SUBMIT": "Envia"
@@ -227,94 +227,95 @@
     }
   },
   "SIDEBAR": {
-    "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
-    "SWITCH": "Switch",
-    "INBOX_VIEW": "Inbox View",
+    "CURRENTLY_VIEWING_ACCOUNT": "Visualització actual:",
+    "SWITCH": "Canvia",
+    "INBOX_VIEW": "Vista de la safata d'entrada",
     "CONVERSATIONS": "Converses",
-    "INBOX": "Inbox",
-    "ALL_CONVERSATIONS": "All Conversations",
+    "INBOX": "Safata d'entrada",
+    "ALL_CONVERSATIONS": "Totes les converses",
     "MENTIONED_CONVERSATIONS": "Mencions",
-    "PARTICIPATING_CONVERSATIONS": "Participating",
-    "UNATTENDED_CONVERSATIONS": "Unattended",
+    "PARTICIPATING_CONVERSATIONS": "Participant",
+    "UNATTENDED_CONVERSATIONS": "Sense assistència",
     "REPORTS": "Informes",
     "SETTINGS": "Configuracions",
     "CONTACTS": "Contactes",
+    "CAPTAIN": "Captain",
     "HOME": "Inici",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
-    "AUDIT_LOGS": "Audit Logs",
+    "AUDIT_LOGS": "Registres d'auditoria",
     "INBOXES": "Safates d'entrada",
     "NOTIFICATIONS": "Notificacions",
     "CANNED_RESPONSES": "Respostes predeterminades",
     "INTEGRATIONS": "Integracions",
     "PROFILE_SETTINGS": "Configuració del Perfil",
     "ACCOUNT_SETTINGS": "Configuració del compte",
-    "APPLICATIONS": "Applications",
+    "APPLICATIONS": "Aplicacions",
     "LABELS": "Etiquetes",
     "CUSTOM_ATTRIBUTES": "Atributs personalitzats",
-    "AUTOMATION": "Automation",
+    "AUTOMATION": "Automatització",
     "MACROS": "Macros",
     "TEAMS": "Equips",
-    "BILLING": "Billing",
-    "CUSTOM_VIEWS_FOLDER": "Folders",
+    "BILLING": "Facturació",
+    "CUSTOM_VIEWS_FOLDER": "Carpetes",
     "CUSTOM_VIEWS_SEGMENTS": "Segments",
-    "ALL_CONTACTS": "All Contacts",
-    "TAGGED_WITH": "Tagged with",
+    "ALL_CONTACTS": "Tots els contactes",
+    "TAGGED_WITH": "Etiquetat amb",
     "NEW_LABEL": "Nova etiqueta",
     "NEW_TEAM": "Nou equip",
-    "NEW_INBOX": "New inbox",
+    "NEW_INBOX": "Safata d'entrada nova",
     "REPORTS_CONVERSATION": "Converses",
     "CSAT": "CSAT",
-    "CAMPAIGNS": "Campaigns",
-    "ONGOING": "Ongoing",
-    "ONE_OFF": "One off",
+    "CAMPAIGNS": "Campanyes",
+    "ONGOING": "En marxa",
+    "ONE_OFF": "Un fora",
     "REPORTS_SLA": "SLA",
     "REPORTS_BOT": "Bot",
     "REPORTS_AGENT": "Agents",
     "REPORTS_LABEL": "Etiquetes",
-    "REPORTS_INBOX": "Inbox",
-    "REPORTS_TEAM": "Team",
-    "SET_AVAILABILITY_TITLE": "Set yourself as",
+    "REPORTS_INBOX": "Safata d'entrada",
+    "REPORTS_TEAM": "Equip",
+    "SET_AVAILABILITY_TITLE": "Posa't com",
     "SLA": "SLA",
     "BETA": "Beta",
-    "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "La teva connexió a Facebook ha caducat, torna a connectar la vostra pàgina de Facebook per continuar els serveis",
+    "REPORTS_OVERVIEW": "Resum",
+    "REAUTHORIZE": "La vostra connexió a la safata d'entrada ha caducat, torna a connectar\n per continuar rebent i enviant missatges",
     "HELP_CENTER": {
-      "TITLE": "Help Center",
-      "ALL_ARTICLES": "All Articles",
-      "MY_ARTICLES": "My Articles",
-      "DRAFT": "Draft",
-      "ARCHIVED": "Archived",
-      "CATEGORY": "Category",
+      "TITLE": "Centre d'ajuda",
+      "ALL_ARTICLES": "Tots els articles",
+      "MY_ARTICLES": "Els articles",
+      "DRAFT": "Esborrany",
+      "ARCHIVED": "Arxivat",
+      "CATEGORY": "Categoria",
       "SETTINGS": "Configuracions",
-      "CATEGORY_EMPTY_MESSAGE": "No categories found"
+      "CATEGORY_EMPTY_MESSAGE": "No s'han trobat categories"
     },
     "SET_AUTO_OFFLINE": {
-      "TEXT": "Mark offline automatically",
-      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard."
+      "TEXT": "Marca fora de línia automàticament",
+      "INFO_TEXT": "Permet que el sistema et marqui automàticament fora de línia quan no facis servir l'aplicació o el tauler."
     },
-    "DOCS": "Read docs"
+    "DOCS": "Llegir documents"
   },
   "BILLING_SETTINGS": {
-    "TITLE": "Billing",
+    "TITLE": "Facturació",
     "CURRENT_PLAN": {
-      "TITLE": "Current Plan",
-      "PLAN_NOTE": "You are currently subscribed to the **%{plan}** plan with **%{quantity}** licenses"
+      "TITLE": "Pla actual",
+      "PLAN_NOTE": "Actualment estàs subscrit al pla **%{plan}** amb **%{quantity}** llicències"
     },
     "MANAGE_SUBSCRIPTION": {
-      "TITLE": "Manage your subscription",
-      "DESCRIPTION": "View your previous invoices, edit your billing details, or cancel your subscription.",
-      "BUTTON_TXT": "Go to the billing portal"
+      "TITLE": "Gestiona la teva subscripció",
+      "DESCRIPTION": "Consulta les teves factures anteriors, edita els teus detalls de facturació o cancel·la la teva subscripció.",
+      "BUTTON_TXT": "Ves al portal de facturació"
     },
     "CHAT_WITH_US": {
-      "TITLE": "Need help?",
-      "DESCRIPTION": "Do you face any issues in billing? We are here to help.",
+      "TITLE": "Necessita ajuda?",
+      "DESCRIPTION": "Trobes algun problema en la facturació? Estem aquí per ajudar.",
       "BUTTON_TXT": "Xateja amb nosaltres"
     },
-    "NO_BILLING_USER": "Your billing account is being configured. Please refresh the page and try again."
+    "NO_BILLING_USER": "El teu compte de facturació s'està configurant. Actualitza la pàgina i torna-ho a provar."
   },
   "CREATE_ACCOUNT": {
-    "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",
+    "NO_ACCOUNT_WARNING": "Uh oh! No hem trobat cap compte de Chatwoot. Crea un compte nou per continuar.",
     "NEW_ACCOUNT": "Compte nou",
     "SELECTOR_SUBTITLE": "Crear un compte nou",
     "API": {
@@ -331,22 +332,22 @@
     }
   },
   "KEYBOARD_SHORTCUTS": {
-    "TOGGLE_MODAL": "View all shortcuts",
+    "TOGGLE_MODAL": "Veure totes les dreceres",
     "TITLE": {
-      "OPEN_CONVERSATION": "Open conversation",
-      "RESOLVE_AND_NEXT": "Resolve and move to next",
-      "NAVIGATE_DROPDOWN": "Navigate dropdown items",
-      "RESOLVE_CONVERSATION": "Resolve Conversation",
-      "GO_TO_CONVERSATION_DASHBOARD": "Go to Conversation Dashboard",
-      "ADD_ATTACHMENT": "Add Attachment",
-      "GO_TO_CONTACTS_DASHBOARD": "Go to Contacts Dashboard",
-      "TOGGLE_SIDEBAR": "Toggle Sidebar",
-      "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
-      "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
-      "GO_TO_SETTINGS": "Go to Settings",
-      "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
-      "SWITCH_TO_REPLY": "Switch to Reply",
-      "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
+      "OPEN_CONVERSATION": "Obrir conversa",
+      "RESOLVE_AND_NEXT": "Resol i passa al següent",
+      "NAVIGATE_DROPDOWN": "Navega pels elements desplegables",
+      "RESOLVE_CONVERSATION": "Resol la conversa",
+      "GO_TO_CONVERSATION_DASHBOARD": "Ves al Tauler de converses",
+      "ADD_ATTACHMENT": "Afegeix fitxer adjunt",
+      "GO_TO_CONTACTS_DASHBOARD": "Ves al tauler de contactes",
+      "TOGGLE_SIDEBAR": "Commuta la barra lateral",
+      "GO_TO_REPORTS_SIDEBAR": "Anar a la barra lateral Informes",
+      "MOVE_TO_NEXT_TAB": "Anar a la pestanya següent de la llista de converses",
+      "GO_TO_SETTINGS": "Ves a la configuració",
+      "SWITCH_TO_PRIVATE_NOTE": "Canvia a la nota privada",
+      "SWITCH_TO_REPLY": "Canvia a Respon",
+      "TOGGLE_SNOOZE_DROPDOWN": "Commuta el menú desplegable de posposar"
     },
     "KEYS": {
       "WINDOWS_KEY_AND_COMMAND_KEY": "Win / ⌘",
diff --git a/app/javascript/dashboard/i18n/locale/ca/signup.json b/app/javascript/dashboard/i18n/locale/ca/signup.json
index e0ce2abae4c71..0bcc745d7533e 100644
--- a/app/javascript/dashboard/i18n/locale/ca/signup.json
+++ b/app/javascript/dashboard/i18n/locale/ca/signup.json
@@ -1,15 +1,15 @@
 {
   "REGISTER": {
-    "TRY_WOOT": "Create an account",
+    "TRY_WOOT": "Crear un compte",
     "TITLE": "Registre",
-    "TESTIMONIAL_HEADER": "All it takes is one step to move forward",
-    "TESTIMONIAL_CONTENT": "You're one step away from engaging your customers, retaining them and finding new ones.",
-    "TERMS_ACCEPT": "By creating an account, you agree to our <a href=\"https://www.chatwoot.com/terms\">T & C</a> and <a href=\"https://www.chatwoot.com/privacy-policy\">Privacy policy</a>",
+    "TESTIMONIAL_HEADER": "Només cal un pas per avançar",
+    "TESTIMONIAL_CONTENT": "Esteu a un pas de captar els vostres clients, retenir-los i trobar-ne de nous.",
+    "TERMS_ACCEPT": "En crear un compte, acceptes els nostres <a href=\"https://www.chatwoot.com/terms\">T&C</a> i <a href=\"https://www.chatwoot.com/privacy-policy\">Política de privadesa</a>",
     "OAUTH": {
-      "GOOGLE_SIGNUP": "Sign up with Google"
+      "GOOGLE_SIGNUP": "Registra't amb Google"
     },
     "COMPANY_NAME": {
-      "LABEL": "Company name",
+      "LABEL": "Nom de la companyia",
       "PLACEHOLDER": "Enter your company name. eg: Wayne Enterprises",
       "ERROR": "El nom de l'empresa és massa curt."
     },
@@ -38,7 +38,7 @@
       "SUCCESS_MESSAGE": "Registrat correctament",
       "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
     },
-    "SUBMIT": "Create account",
+    "SUBMIT": "Crear un compte",
     "HAVE_AN_ACCOUNT": "Ja tens un compte?"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/sla.json b/app/javascript/dashboard/i18n/locale/ca/sla.json
index 3c24b3c5f450b..4c453e5e9fbfc 100644
--- a/app/javascript/dashboard/i18n/locale/ca/sla.json
+++ b/app/javascript/dashboard/i18n/locale/ca/sla.json
@@ -5,33 +5,33 @@
     "ADD_ACTION_LONG": "Crea una nova política de SLA",
     "DESCRIPTION": "Els acords de nivell de servei (SLA) són contractes que defineixen expectatives clares entre el vostre equip i els clients. Estableixen estàndards de temps de resposta i resolució, creen un marc de responsabilitat i garanteixen una experiència coherent i d'alta qualitat.",
     "LEARN_MORE": "Més informació sobre SLA",
-    "LOADING": "Fetching SLAs",
+    "LOADING": "S'estan obtenint SLAs",
     "PAYWALL": {
-      "TITLE": "Upgrade to create SLAs",
-      "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
-      "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
-      "UPGRADE_NOW": "Upgrade now",
-      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
+      "TITLE": "Actualitza per crear SLA",
+      "AVAILABLE_ON": "La funció SLA només està disponible als plans Business i Enterprise.",
+      "UPGRADE_PROMPT": "Actualitza el teu pla per accedir a funcions avançades com ara gestió d'equips, automatitzacions, atributs personalitzats i molt més.",
+      "UPGRADE_NOW": "Actualitza ara",
+      "CANCEL_ANYTIME": "Pots canviar o cancel·lar el teu pla en qualsevol moment"
     },
     "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
-      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
-      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
+      "AVAILABLE_ON": "La funció SLA només està disponible als plans de pagament.",
+      "UPGRADE_PROMPT": "Actualitza a un pla de pagament per accedir a funcions avançades com els registres d'auditoria, la capacitat de l'agent i molt més.",
+      "ASK_ADMIN": "Posa't en contacte amb el vostre administrador per obtenir l'actualització."
     },
     "LIST": {
-      "404": "There are no SLAs available in this account.",
+      "404": "No hi ha cap SLA disponible en aquest compte.",
       "EMPTY": {
         "TITLE_1": "Empresa P0",
         "DESC_1": "Problemes plantejats pels clients empresarials, que requereixen atenció immediata.",
         "TITLE_2": "Empresa P1",
         "DESC_2": "Problemes plantejats pels clients empresarials, que cal reconèixer ràpidament."
       },
-      "BUSINESS_HOURS_ON": "Business hours on",
-      "BUSINESS_HOURS_OFF": "Business hours off",
+      "BUSINESS_HOURS_ON": "Horari comercial activat",
+      "BUSINESS_HOURS_OFF": "Horari comercial desactivat",
       "RESPONSE_TYPES": {
-        "FRT": "First response time threshold",
-        "NRT": "Next response time threshold",
-        "RT": "Resolution time threshold",
+        "FRT": "Primer llindar de temps de resposta",
+        "NRT": "Següent llindar de temps de resposta",
+        "RT": "Llindar de temps de resolució",
         "SHORT_HAND": {
           "FRT": "FRT",
           "NRT": "NRT",
@@ -41,22 +41,22 @@
     },
     "FORM": {
       "NAME": {
-        "LABEL": "SLA Name",
-        "PLACEHOLDER": "SLA Name",
-        "REQUIRED_ERROR": "SLA name is required",
-        "MINIMUM_LENGTH_ERROR": "Minimum length 2 is required",
-        "VALID_ERROR": "Only Alphabets, Numbers, Hyphen and Underscore are allowed"
+        "LABEL": "Nom del SLA",
+        "PLACEHOLDER": "Nom del SLA",
+        "REQUIRED_ERROR": "El nom del SLA és obligatori",
+        "MINIMUM_LENGTH_ERROR": "Es requereix una longitud mínima de 2",
+        "VALID_ERROR": "Només es permeten alfabets, números, guionet i guió baix"
       },
       "DESCRIPTION": {
         "LABEL": "Descripció",
-        "PLACEHOLDER": "SLA for premium customers"
+        "PLACEHOLDER": "SLA per a clients premium"
       },
       "FIRST_RESPONSE_TIME": {
-        "LABEL": "First Response Time",
+        "LABEL": "Primer Temps de Resposta",
         "PLACEHOLDER": "5"
       },
       "NEXT_RESPONSE_TIME": {
-        "LABEL": "Next Response Time",
+        "LABEL": "Pròxim temps de resposta",
         "PLACEHOLDER": "5"
       },
       "RESOLUTION_TIME": {
@@ -64,11 +64,11 @@
         "PLACEHOLDER": "60"
       },
       "BUSINESS_HOURS": {
-        "LABEL": "Business Hours",
-        "PLACEHOLDER": "Only during business hours"
+        "LABEL": "Horari comercial",
+        "PLACEHOLDER": "Només durant l'horari comercial"
       },
       "THRESHOLD_TIME": {
-        "INVALID_FORMAT_ERROR": "Threshold should be a number and greater than zero"
+        "INVALID_FORMAT_ERROR": "El llindar ha de ser un nombre i més gran que zero"
       },
       "EDIT": "Edita",
       "CREATE": "Crear",
@@ -76,22 +76,22 @@
       "CANCEL": "Cancel·la"
     },
     "ADD": {
-      "TITLE": "Add SLA",
+      "TITLE": "Afegeix SLA",
       "DESC": "Promeses amistoses per a un gran servei!",
       "API": {
-        "SUCCESS_MESSAGE": "SLA added successfully",
+        "SUCCESS_MESSAGE": "SLA afegit correctament",
         "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
       }
     },
     "DELETE": {
-      "TITLE": "Delete SLA",
+      "TITLE": "Suprimeix el SLA",
       "API": {
-        "SUCCESS_MESSAGE": "SLA deleted successfully",
+        "SUCCESS_MESSAGE": "S'ha esborrat el SLA correctament",
         "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
       },
       "CONFIRM": {
         "TITLE": "Confirma l'esborrat",
-        "MESSAGE": "Are you sure you want to delete ",
+        "MESSAGE": "Estàs segur que vols suprimir ",
         "YES": "Si, esborra ",
         "NO": "No, segueix "
       }
diff --git a/app/javascript/dashboard/i18n/locale/ca/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ca/teamsSettings.json
index 6ec12d43d5017..a3edded629230 100644
--- a/app/javascript/dashboard/i18n/locale/ca/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ca/teamsSettings.json
@@ -1,35 +1,38 @@
 {
   "TEAMS_SETTINGS": {
-    "NEW_TEAM": "Create new team",
+    "NEW_TEAM": "Cea un nou equip",
     "HEADER": "Equips",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
-      "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "404": "No hi ha cap equip creat en aquest compte.",
+      "EDIT_TEAM": "Edita l'equip",
+      "NONE": "Ningú"
     },
     "CREATE_FLOW": {
       "CREATE": {
-        "TITLE": "Create a new team",
-        "DESC": "Add a title and description to your new team."
+        "TITLE": "Cea un nou equip",
+        "DESC": "Afegeix un títol i una descripció al teu nou equip."
       },
       "AGENTS": {
-        "BUTTON_TEXT": "Add agents to team",
-        "TITLE": "Add agents to team - %{teamName}",
-        "DESC": "Add Agents to your newly created team. This lets you collaborate as a team on conversations, get notified on new events in the same conversation."
+        "BUTTON_TEXT": "Afegir agents a l'equip",
+        "TITLE": "Afegeix agents a l'equip - %{teamName}",
+        "DESC": "Afegeix agents al teu equip acabat de crear. Això et permet col·laborar com a equip en converses, rebre notificacions sobre esdeveniments nous a la mateixa conversa."
       },
       "WIZARD": [
         {
           "title": "Crear",
           "route": "settings_teams_new",
-          "body": "Create a new team of agents."
+          "body": "Crea un nou equip d'agents."
         },
         {
           "title": "Afegir agents",
           "route": "settings_teams_add_agents",
-          "body": "Add agents to the team."
+          "body": "Afegeix agents a l'equip."
         },
         {
-          "title": "Finish",
+          "title": "Finalitza",
           "route": "settings_teams_finish",
           "body": "Ja estàs preparat!"
         }
@@ -37,89 +40,89 @@
     },
     "EDIT_FLOW": {
       "CREATE": {
-        "TITLE": "Edit your team details",
-        "DESC": "Edit title and description to your team.",
-        "BUTTON_TEXT": "Update team"
+        "TITLE": "Edita els detalls del teu equip",
+        "DESC": "Edita un títol i una descripció al teu equip.",
+        "BUTTON_TEXT": "Actualitza l'equip"
       },
       "AGENTS": {
-        "BUTTON_TEXT": "Update agents in team",
-        "TITLE": "Add agents to team - %{teamName}",
-        "DESC": "Add Agents to your newly created team. All the added agents will be notified when a conversation is assigned to this team."
+        "BUTTON_TEXT": "Actualitza els agents de l'equip",
+        "TITLE": "Afegeix agents a l'equip - %{teamName}",
+        "DESC": "Afegeix agents al teu equip acabat de crear. Tots els agents afegits rebran una notificació quan s'assigni una conversa a aquest equip."
       },
       "WIZARD": [
         {
-          "title": "Team details",
+          "title": "Detalls de l'equip",
           "route": "settings_teams_edit",
-          "body": "Change name, description and other details."
+          "body": "Canvia el nom, la descripció i altres detalls."
         },
         {
-          "title": "Edit Agents",
+          "title": "Edita agents",
           "route": "settings_teams_edit_members",
-          "body": "Edit agents in your team."
+          "body": "Edita agents en el teu equip."
         },
         {
-          "title": "Finish",
+          "title": "Finalitza",
           "route": "settings_teams_edit_finish",
           "body": "Ja estàs preparat!"
         }
       ]
     },
     "TEAM_FORM": {
-      "ERROR_MESSAGE": "Couldn't save the team details. Try again."
+      "ERROR_MESSAGE": "No s'han pogut desar els detalls de l'equip. Torna-ho a provar."
     },
     "AGENTS": {
       "AGENT": "AGENT",
       "EMAIL": "Correu electrònic",
       "BUTTON_TEXT": "Afegir agents",
-      "ADD_AGENTS": "Adding Agents to your Team...",
-      "SELECT": "select",
-      "SELECT_ALL": "select all agents",
-      "SELECTED_COUNT": "%{selected} out of %{total} agents selected."
+      "ADD_AGENTS": "S'estan afegint agents al teu equip...",
+      "SELECT": "selecciona",
+      "SELECT_ALL": "selecciona tots els agents",
+      "SELECTED_COUNT": "%{selected} de %{total} agents seleccionats."
     },
     "ADD": {
-      "TITLE": "Add agents to team - %{teamName}",
-      "DESC": "Add Agents to your newly created team. This lets you collaborate as a team on conversations, get notified on new events in the same conversation.",
-      "SELECT": "select",
-      "SELECT_ALL": "select all agents",
-      "SELECTED_COUNT": "%{selected} out of %{total} agents selected.",
+      "TITLE": "Afegeix agents a l'equip - %{teamName}",
+      "DESC": "Afegeix agents al teu equip acabat de crear. Això et permet col·laborar com a equip en converses, rebre notificacions sobre esdeveniments nous a la mateixa conversa.",
+      "SELECT": "selecciona",
+      "SELECT_ALL": "selecciona tots els agents",
+      "SELECTED_COUNT": "%{selected} de %{total} agents seleccionats.",
       "BUTTON_TEXT": "Afegir agents",
-      "AGENT_VALIDATION_ERROR": "Select at least one agent."
+      "AGENT_VALIDATION_ERROR": "Selecciona almenys un agent."
     },
     "FINISH": {
-      "TITLE": "Your team is ready!",
-      "MESSAGE": "You can now collaborate as a team on conversations. Happy supporting ",
-      "BUTTON_TEXT": "Finish"
+      "TITLE": "El teu equip està preparat!",
+      "MESSAGE": "Ara pots col·laborar com un equip en les converses. Feliç suport ",
+      "BUTTON_TEXT": "Finalitza"
     },
     "DELETE": {
       "BUTTON_TEXT": "Esborrar",
       "API": {
-        "SUCCESS_MESSAGE": "Team deleted successfully.",
-        "ERROR_MESSAGE": "Couldn't delete the team. Try again."
+        "SUCCESS_MESSAGE": "Equip esborrat correctament.",
+        "ERROR_MESSAGE": "No s'ha pogut suprimir l'equip. Torna-ho a provar."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
-        "PLACE_HOLDER": "Please type {teamName} to confirm",
-        "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
+        "TITLE": "Are you sure you want to delete the team?",
+        "PLACE_HOLDER": "Escriu {teamName} per confirmar",
+        "MESSAGE": "En suprimir l'equip, se suprimirà l'assignació d'equip de les converses assignades a aquest equip.",
         "YES": "Suprimeix ",
         "NO": "Cancel·la"
       }
     },
     "SETTINGS": "Configuracions",
     "FORM": {
-      "UPDATE": "Update team",
-      "CREATE": "Create team",
+      "UPDATE": "Actualitza l'equip",
+      "CREATE": "Crea l'equip",
       "NAME": {
-        "LABEL": "Team name",
-        "PLACEHOLDER": "Example: Sales, Customer Support"
+        "LABEL": "Nom de l'equip",
+        "PLACEHOLDER": "Exemple: Vendes, Atenció al client"
       },
       "DESCRIPTION": {
-        "LABEL": "Team Description",
-        "PLACEHOLDER": "Short description about this team."
+        "LABEL": "Descripció de l’equip",
+        "PLACEHOLDER": "Breu descripció d'aquest equip."
       },
       "AUTO_ASSIGN": {
-        "LABEL": "Allow auto assign for this team."
+        "LABEL": "Permet l'assignació automàtica d'aquest equip."
       },
-      "SUBMIT_CREATE": "Create team"
+      "SUBMIT_CREATE": "Crea l'equip"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ca/whatsappTemplates.json b/app/javascript/dashboard/i18n/locale/ca/whatsappTemplates.json
index bbcf281569bc0..e0107126e2999 100644
--- a/app/javascript/dashboard/i18n/locale/ca/whatsappTemplates.json
+++ b/app/javascript/dashboard/i18n/locale/ca/whatsappTemplates.json
@@ -1,25 +1,25 @@
 {
     "WHATSAPP_TEMPLATES": {
         "MODAL": {
-            "TITLE": "Whatsapp Templates",
-            "SUBTITLE": "Select the whatsapp template you want to send",
-            "TEMPLATE_SELECTED_SUBTITLE": "Process %{templateName}"
+            "TITLE": "Plantilles de Whatsapp",
+            "SUBTITLE": "Selecciona la plantilla de whatsapp que vols enviar",
+            "TEMPLATE_SELECTED_SUBTITLE": "Procés %{templateName}"
         },
         "PICKER": {
-            "SEARCH_PLACEHOLDER": "Search Templates",
-            "NO_TEMPLATES_FOUND": "No templates found for",
+            "SEARCH_PLACEHOLDER": "Cerca plantilles",
+            "NO_TEMPLATES_FOUND": "No s'han trobat plantilles per a",
             "LABELS": {
-                "LANGUAGE": "Language",
-                "TEMPLATE_BODY": "Template Body",
-                "CATEGORY": "Category"
+                "LANGUAGE": "Idioma",
+                "TEMPLATE_BODY": "Cos de la plantilla",
+                "CATEGORY": "Categoria"
             }
         },
         "PARSER": {
             "VARIABLES_LABEL": "Variables",
-            "VARIABLE_PLACEHOLDER": "Enter %{variable} value",
-            "GO_BACK_LABEL": "Go Back",
-            "SEND_MESSAGE_LABEL": "Send Message",
-            "FORM_ERROR_MESSAGE": "Please fill all variables before sending"
+            "VARIABLE_PLACEHOLDER": "Introdueix el valor %{variable}",
+            "GO_BACK_LABEL": "Torna enrere",
+            "SEND_MESSAGE_LABEL": "Envia missatge",
+            "FORM_ERROR_MESSAGE": "Omple totes les variables abans d'enviar-les"
         }
     }
 }
diff --git a/app/javascript/dashboard/i18n/locale/cs/advancedFilters.json b/app/javascript/dashboard/i18n/locale/cs/advancedFilters.json
index 8e5c767cd1d41..99f08c76c9884 100644
--- a/app/javascript/dashboard/i18n/locale/cs/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/cs/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/cs/agentMgmt.json b/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json
index 883dcd0fa477a..09b72d5db6d39 100644
--- a/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenti",
     "HEADER_BTN_TXT": "Přidat agenta",
     "LOADING": "Načítání seznamu agentů",
-    "SIDEBAR_TXT": "<p><b>Agenti</b></p> <p> <b>Agent</b> je členem vašeho týmu zákaznické podpory. </p><p> Agenti budou moci prohlížet a odpovídat na zprávy od uživatelů. Seznam zobrazuje všechny agenty aktuálně na vašem účtu. </p><p> Pro přidání nového agenta klikněte na <b>Přidat agenta</b>. Přidaný agent obdrží e-mail s potvrzovacím odkazem pro aktivaci jejich účtu, poté bude mít přístup k Chatwoot a bude reagovat na zprávy. </p><p> Přístup k funkcím Chatwootu je založen na následujících rolích. </p><p> <b>Agent</b> - Agent s touto rolí může přistupovat pouze k doručeným zprávám, zprávám a konverzacím. Mohou přiřadit konverzace jiným agentům nebo sobě a řešit konverzace.</p><p> <b>Administrátor</b> - Správce bude mít přístup ke všem funkcím Chatwoot povoleným pro váš účet, včetně nastavení spolu se všemi obvyklými právy agenta.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrátor",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/cs/auditLogs.json b/app/javascript/dashboard/i18n/locale/cs/auditLogs.json
index b7245cc99986b..51ac1d29cbf18 100644
--- a/app/javascript/dashboard/i18n/locale/cs/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/cs/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Neexistují žádné položky odpovídající tomuto dotazu",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/cs/automation.json b/app/javascript/dashboard/i18n/locale/cs/automation.json
index 064200a5480cf..26b8c6c77a79c 100644
--- a/app/javascript/dashboard/i18n/locale/cs/automation.json
+++ b/app/javascript/dashboard/i18n/locale/cs/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Nahrávání...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Hodnota je povinná",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/cs/bulkActions.json b/app/javascript/dashboard/i18n/locale/cs/bulkActions.json
index 0b6578024ff12..6a526e9cd6d6d 100644
--- a/app/javascript/dashboard/i18n/locale/cs/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/cs/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Přiřadit",
     "YES": "Ano",
+    "SEARCH_INPUT_PLACEHOLDER": "Hledat",
     "ASSIGN_AGENT_TOOLTIP": "Přiřadit agenta",
     "ASSIGN_TEAM_TOOLTIP": "Přiřadit tým",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "Nic",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/cs/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/cs/cannedMgmt.json
index 39c67561233f8..83d6b7679b536 100644
--- a/app/javascript/dashboard/i18n/locale/cs/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/cs/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Konzervované odpovědi",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Neexistují žádné položky odpovídající tomuto dotazu.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "V tomto účtu nejsou k dispozici žádné konzervované odpovědi.",
       "TITLE": "Spravovat konzervované odpovědi",
diff --git a/app/javascript/dashboard/i18n/locale/cs/chatlist.json b/app/javascript/dashboard/i18n/locale/cs/chatlist.json
index a8ee531b80e2e..ac2c1d322a388 100644
--- a/app/javascript/dashboard/i18n/locale/cs/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/cs/chatlist.json
@@ -47,28 +47,28 @@
         "OLDEST": "Created at:"
       },
       "LAST_ACTIVITY": {
-        "NOT_ACTIVE": "Last activity:",
-        "ACTIVE": "Last activity"
+        "NOT_ACTIVE": "Poslední aktivita:",
+        "ACTIVE": "Poslední aktivita"
       }
     },
     "SORT_ORDER_ITEMS": {
       "last_activity_at_asc": {
-        "TEXT": "Last activity: Oldest first"
+        "TEXT": "Poslední aktivita: od nejstarších"
       },
       "last_activity_at_desc": {
-        "TEXT": "Last activity: Newest first"
+        "TEXT": "Poslední aktivita: od nejnovějších"
       },
       "created_at_desc": {
-        "TEXT": "Created at: Newest first"
+        "TEXT": "Vytvořeno: od nejnovějších"
       },
       "created_at_asc": {
-        "TEXT": "Created at: Oldest first"
+        "TEXT": "Vytvořeno: od nejstarších"
       },
       "priority_desc": {
-        "TEXT": "Priority: Highest first"
+        "TEXT": "Priorita: od nejvyšší"
       },
       "priority_asc": {
-        "TEXT": "Priority: Lowest first"
+        "TEXT": "Priorita: Od nejnižší"
       },
       "waiting_since_asc": {
         "TEXT": "Pending Response: Longest first"
@@ -106,12 +106,12 @@
           "LABEL": "Last activity"
         },
         "CREATED_AT": {
-          "NAME": "Created at",
-          "LABEL": "Created at"
+          "NAME": "Vytvořeno",
+          "LABEL": "Vytvořeno"
         },
         "LAST_USER_MESSAGE_AT": {
           "NAME": "Last user message at",
-          "LABEL": "Last message"
+          "LABEL": "Poslední zpráva"
         }
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/cs/contact.json b/app/javascript/dashboard/i18n/locale/cs/contact.json
index 81380a072b95f..c4d4b77a5dc66 100644
--- a/app/javascript/dashboard/i18n/locale/cs/contact.json
+++ b/app/javascript/dashboard/i18n/locale/cs/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/cs/conversation.json b/app/javascript/dashboard/i18n/locale/cs/conversation.json
index 950828d518efb..e1babc0d457ee 100644
--- a/app/javascript/dashboard/i18n/locale/cs/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/cs/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + zadejte pro nový řádek. Začněte '/' pro výběr zrušené odpovědi.",
       "PRIVATE_MSG_INPUT": "Shift + zadejte pro nový řádek. Toto bude viditelné pouze pro agenty",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Podpis zprávy není nakonfigurován, prosím nakonfigurujte jej v nastavení profilu.",
-      "CLICK_HERE": "Klikněte zde pro aktualizaci"
+      "CLICK_HERE": "Klikněte zde pro aktualizaci",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
     },
     "REPLYBOX": {
       "REPLY": "Odpověď",
diff --git a/app/javascript/dashboard/i18n/locale/cs/general.json b/app/javascript/dashboard/i18n/locale/cs/general.json
index 25bb4dfb736d2..a7a2af822182c 100644
--- a/app/javascript/dashboard/i18n/locale/cs/general.json
+++ b/app/javascript/dashboard/i18n/locale/cs/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": "Hledat",
+      "EMPTY_STATE": "Žádné výsledky"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/cs/generalSettings.json b/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
index 00cf1d19dc0eb..1621a3993ecc9 100644
--- a/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/cs/helpCenter.json b/app/javascript/dashboard/i18n/locale/cs/helpCenter.json
index 95232f8053253..6baa3e661de30 100644
--- a/app/javascript/dashboard/i18n/locale/cs/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/cs/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/cs/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/cs/inboxMgmt.json
index ec2b2cafdc0e7..9208295133c3a 100644
--- a/app/javascript/dashboard/i18n/locale/cs/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/cs/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Schránky",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "K tomuto účtu nejsou připojeny žádné doručené schránky."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/cs/integrations.json b/app/javascript/dashboard/i18n/locale/cs/integrations.json
index b53f61b4ba46c..fa743bdc83d49 100644
--- a/app/javascript/dashboard/i18n/locale/cs/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/cs/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrace",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Odkaz",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Vybrat tým",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Stav",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Zrušit",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Stav",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Štítky",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/cs/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/cs/labelsMgmt.json
index d2c9d417e6362..57d7923f0dd43 100644
--- a/app/javascript/dashboard/i18n/locale/cs/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/cs/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Štítky",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Neexistují žádné položky odpovídající tomuto dotazu",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/cs/macros.json b/app/javascript/dashboard/i18n/locale/cs/macros.json
index 4e31e1dfa4dab..6bfd39cd34c33 100644
--- a/app/javascript/dashboard/i18n/locale/cs/macros.json
+++ b/app/javascript/dashboard/i18n/locale/cs/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Hodnota je povinná",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/cs/report.json b/app/javascript/dashboard/i18n/locale/cs/report.json
index 3bdaedc1db68d..fbbdadb74e092 100644
--- a/app/javascript/dashboard/i18n/locale/cs/report.json
+++ b/app/javascript/dashboard/i18n/locale/cs/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/cs/search.json b/app/javascript/dashboard/i18n/locale/cs/search.json
index a4de7a921bccf..35f91009aabad 100644
--- a/app/javascript/dashboard/i18n/locale/cs/search.json
+++ b/app/javascript/dashboard/i18n/locale/cs/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Konverzace",
       "MESSAGES": "Zprávy"
     },
+    "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/i18n/locale/cs/settings.json b/app/javascript/dashboard/i18n/locale/cs/settings.json
index 684133e33f205..8581470a06e04 100644
--- a/app/javascript/dashboard/i18n/locale/cs/settings.json
+++ b/app/javascript/dashboard/i18n/locale/cs/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Zprávy",
     "SETTINGS": "Nastavení",
     "CONTACTS": "Kontakty",
+    "CAPTAIN": "Captain",
     "HOME": "Domů",
     "AGENTS": "Agenti",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/cs/teamsSettings.json b/app/javascript/dashboard/i18n/locale/cs/teamsSettings.json
index ca5aa7b618e31..32e2f6461a743 100644
--- a/app/javascript/dashboard/i18n/locale/cs/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/cs/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Týmy",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Nic"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Vymazat ",
diff --git a/app/javascript/dashboard/i18n/locale/da/advancedFilters.json b/app/javascript/dashboard/i18n/locale/da/advancedFilters.json
index de7ee13c4c98c..90818e7fcfc1d 100644
--- a/app/javascript/dashboard/i18n/locale/da/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/da/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "OG",
       "OR": "ELLER"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Lig med",
       "not_equal_to": "Ikke lig med",
diff --git a/app/javascript/dashboard/i18n/locale/da/agentMgmt.json b/app/javascript/dashboard/i18n/locale/da/agentMgmt.json
index 549ae64edbe09..6c80602975433 100644
--- a/app/javascript/dashboard/i18n/locale/da/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/da/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenter",
     "HEADER_BTN_TXT": "Tilføj Agent",
     "LOADING": "Henter Agent Liste",
-    "SIDEBAR_TXT": "<p><b>Agenter</b></p> <p> En <b>Agent</b> er medlemmer af dit kundesupportteam. </p><p> Agenter vil være i stand til at se og besvare beskeder fra dine brugere. Listen viser alle agenter i øjeblikket på din konto. </p><p> Klik på <b>Tilføj agent</b> for at tilføje en ny agent. Agent du tilføjer, vil modtage en e-mail med et bekræftelseslink for at aktivere deres konto, hvorefter de kan få adgang til Chatwoot og svare på beskeder. </p><p> Adgang til Chatwoot's funktioner er baseret på følgende roller. </p><p> <b>Agent</b> - Agenter med denne rolle kan kun få adgang til indbakker, rapporter og samtaler. De kan tildele samtaler til andre agenter eller sig selv og løse samtaler.</p><p> <b>Administrator</b> - Administrator vil have adgang til alle Chatwoot-funktioner aktiveret for din konto, herunder indstillinger sammen med alle normale agenters privilegier.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/da/auditLogs.json b/app/javascript/dashboard/i18n/locale/da/auditLogs.json
index 3642b2a6ff12f..6d8216f46f8fd 100644
--- a/app/javascript/dashboard/i18n/locale/da/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/da/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Der er ingen elementer, der matcher denne forespørgsel",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/da/automation.json b/app/javascript/dashboard/i18n/locale/da/automation.json
index 97fd5095e47f4..3daad112beb24 100644
--- a/app/javascript/dashboard/i18n/locale/da/automation.json
+++ b/app/javascript/dashboard/i18n/locale/da/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Du skal have mindst én handling for at gemme",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Indtast din besked her",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Vælg teams"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Vælg teams",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Aktivér Automatiseringsregel",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploader...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Mislykkedes"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Værdi er påkrævet",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/da/bulkActions.json b/app/javascript/dashboard/i18n/locale/da/bulkActions.json
index 4e86440219339..0e293f5bcb504 100644
--- a/app/javascript/dashboard/i18n/locale/da/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/da/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Gå tilbage",
     "ASSIGN_LABEL": "Tildel",
     "YES": "Ja",
+    "SEARCH_INPUT_PLACEHOLDER": "Søg",
     "ASSIGN_AGENT_TOOLTIP": "Tildel agent",
     "ASSIGN_TEAM_TOOLTIP": "Tildel team",
     "ASSIGN_SUCCESFUL": "Samtaler tildelt.",
@@ -33,7 +34,7 @@
       "NONE": "Ingen",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Tildel det valgte team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/da/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/da/cannedMgmt.json
index 81e0a48c71fdb..724802cca367b 100644
--- a/app/javascript/dashboard/i18n/locale/da/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/da/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Standardsvar Svar",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Der er ingen elementer, der matcher denne forespørgsel.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Der er ingen tilgængelige standardsvar på denne konto.",
       "TITLE": "Administrer standardsvar",
diff --git a/app/javascript/dashboard/i18n/locale/da/contact.json b/app/javascript/dashboard/i18n/locale/da/contact.json
index a58948f5566d5..7674610aa826b 100644
--- a/app/javascript/dashboard/i18n/locale/da/contact.json
+++ b/app/javascript/dashboard/i18n/locale/da/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakt flettet med succes",
       "ERROR_MESSAGE": "Kunne ikke sammenflette kontakter, prøv igen!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/da/conversation.json b/app/javascript/dashboard/i18n/locale/da/conversation.json
index 4dbe289f93495..95c31b0ecc618 100644
--- a/app/javascript/dashboard/i18n/locale/da/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/da/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter for ny linje. Start med '/' for at vælge et standardsvar.",
       "PRIVATE_MSG_INPUT": "Shift + enter for ny linje. Dette vil kun være synligt for Agenter",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Beskedsignatur er ikke konfigureret, konfigurer den i profilindstillinger.",
-      "CLICK_HERE": "Klik her for at opdatere"
+      "CLICK_HERE": "Klik her for at opdatere",
+      "WHATSAPP_TEMPLATES": "Whatsapp Skabeloner"
     },
     "REPLYBOX": {
       "REPLY": "Svar",
diff --git a/app/javascript/dashboard/i18n/locale/da/general.json b/app/javascript/dashboard/i18n/locale/da/general.json
index 25bb4dfb736d2..8e95993f49de1 100644
--- a/app/javascript/dashboard/i18n/locale/da/general.json
+++ b/app/javascript/dashboard/i18n/locale/da/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": "Søg",
+      "EMPTY_STATE": "Ingen resultater fundet"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/da/generalSettings.json b/app/javascript/dashboard/i18n/locale/da/generalSettings.json
index 01c27c60f5a40..528c81e421f35 100644
--- a/app/javascript/dashboard/i18n/locale/da/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/da/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Opdater"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Indtil i morgen",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/da/helpCenter.json b/app/javascript/dashboard/i18n/locale/da/helpCenter.json
index 8ad43b61a9e37..d7fe9939891e9 100644
--- a/app/javascript/dashboard/i18n/locale/da/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/da/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/da/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/da/inboxMgmt.json
index 05935391ad888..c889e8f1f0755 100644
--- a/app/javascript/dashboard/i18n/locale/da/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/da/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Indbakker",
     "SIDEBAR_TXT": "<p><b>Indbakke</b></p> <p> Når du forbinder en hjemmeside eller en facebook side til Chatwoot, det kaldes en <b>Indbakke</b>. Du kan have ubegrænset indbakker på din Chatwoot-konto. </p><p> Klik på <b>Tilføj indbakke</b> for at forbinde en hjemmeside eller en Facebook-side. </p><p> I betjeningspanelet du kan se alle samtalerne fra alle dine indbakker på et enkelt sted og svare på dem under fanen 'Samtaler'. </p><p> Du kan også se samtaler, der er specifikke for en indbakke, ved at klikke på indbakkens navn i dashboardets venstre rude. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Der er ingen indbakker tilknyttet denne konto."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/da/integrations.json b/app/javascript/dashboard/i18n/locale/da/integrations.json
index 09cf1dc44723d..d8b8f3334c640 100644
--- a/app/javascript/dashboard/i18n/locale/da/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/da/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrationer",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Abonnerede Begivenheder",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Tilføj en ny dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps tillader organisationer at integrere en applikation i Chatwoot-dashboardet for at give konteksten til kundesupportagenter. Denne funktion giver dig mulighed for at oprette et program uafhængigt og integrere at inde i instrumentbrættet til at give brugerinformation, deres ordrer eller deres tidligere betalingshistorie.</p><p>Når du indlejrer din applikation ved hjælp af instrumentbrættet i Chatwoot, dit program vil få konteksten af samtalen og kontakt som en vinduesbegivenhed. Gennemfør en lytter til besked begivenheden på din side for at modtage konteksten.</p><p>For at tilføje en ny dashboard app, klik på knappen 'Tilføj en ny dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps giver organisationer mulighed for at integrere et program i instrumentbrættet for at give konteksten for kundesupportagenter. Denne funktion giver dig mulighed for at oprette et program uafhængigt og integrere at give brugeroplysninger, deres ordrer, eller deres tidligere betalingshistorik.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Der er ingen dashboard apps konfigureret på denne konto endnu",
         "LOADING": "Henter dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app slettet",
         "API_ERROR": "Vi kunne ikke slette appen. Prøv igen senere"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Opret",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Titel",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Titel er påkrævet"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Beskrivelse",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Vælg hold",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Etiketter",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Opret",
+        "CANCEL": "Annuller",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etiketter",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/da/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/da/labelsMgmt.json
index f87937096f5b4..9ad2cf040bea6 100644
--- a/app/javascript/dashboard/i18n/locale/da/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/da/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiketter",
     "HEADER_BTN_TXT": "Tilføj etiket",
     "LOADING": "Henter etiketter",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Der er ingen elementer, der matcher denne forespørgsel",
-    "SIDEBAR_TXT": "<p><b>Etiketter</b> <p>Etiketter hjælper dig med at kategorisere samtaler og prioritere dem. Du kan tildele etiket til en samtale fra dit sidepanel. <br /><br />Etiketter er bundet til kontoen og kan bruges til at oprette brugerdefinerede arbejdsgange i din organisation. Du kan tildele brugerdefineret farve til en etiket, det gør det lettere at identificere etiketten. Du vil være i stand til at vise etiketten på sidepanelet for nemt at filtrere samtalerne.</p>",
     "LIST": {
       "404": "Der er ingen tilgængelige etiketter på denne konto.",
       "TITLE": "Administrer etiketter",
@@ -49,7 +50,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": "Tilføj etiket",
diff --git a/app/javascript/dashboard/i18n/locale/da/macros.json b/app/javascript/dashboard/i18n/locale/da/macros.json
index b51ebc52a5597..33d2a9647a7e8 100644
--- a/app/javascript/dashboard/i18n/locale/da/macros.json
+++ b/app/javascript/dashboard/i18n/locale/da/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Værdi er påkrævet",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/da/report.json b/app/javascript/dashboard/i18n/locale/da/report.json
index 4d8e4710c52a6..c9a461b6e4c1d 100644
--- a/app/javascript/dashboard/i18n/locale/da/report.json
+++ b/app/javascript/dashboard/i18n/locale/da/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": "Samtaler af agenter",
@@ -536,6 +537,7 @@
       "LABELS": "Etiketter",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/da/search.json b/app/javascript/dashboard/i18n/locale/da/search.json
index 3f1f78776da91..3cdc90a26e507 100644
--- a/app/javascript/dashboard/i18n/locale/da/search.json
+++ b/app/javascript/dashboard/i18n/locale/da/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Samtaler",
       "MESSAGES": "Beskeder"
     },
+    "SEARCHING_DATA": "Søger",
     "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/i18n/locale/da/settings.json b/app/javascript/dashboard/i18n/locale/da/settings.json
index 3ca82a2998df5..b410a2f9d6ee7 100644
--- a/app/javascript/dashboard/i18n/locale/da/settings.json
+++ b/app/javascript/dashboard/i18n/locale/da/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Rapporter",
     "SETTINGS": "Indstillinger",
     "CONTACTS": "Kontakter",
+    "CAPTAIN": "Captain",
     "HOME": "Hjem",
     "AGENTS": "Agenter",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Oversigt",
-    "FACEBOOK_REAUTHORIZE": "Din Facebook-forbindelse er udløbet, tilslut venligst din Facebook-side igen for at fortsætte tjenesterne",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "Alle Artikler",
diff --git a/app/javascript/dashboard/i18n/locale/da/teamsSettings.json b/app/javascript/dashboard/i18n/locale/da/teamsSettings.json
index b055d31ce68fe..f6cc2429f30d1 100644
--- a/app/javascript/dashboard/i18n/locale/da/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/da/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Opret nyt team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Hold</b></p> <p>Hold lader dig organisere dine agenter i grupper baseret på deres ansvar. <br /> En agent kan være en del af flere hold. Du kan tildele samtaler til et team, når du arbejder i fællesskab. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Der er ingen teams oprettet på denne konto.",
-      "EDIT_TEAM": "Rediger team"
+      "EDIT_TEAM": "Rediger team",
+      "NONE": "Ingen"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Kunne ikke slette teamet. Prøv igen."
       },
       "CONFIRM": {
-        "TITLE": "Er du sikker på du vil slette - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Skriv venligst {teamName} for at bekræfte",
         "MESSAGE": "Sletning af teamet vil fjerne teamtildelingen fra de samtaler, der er tildelt dette team.",
         "YES": "Slet ",
diff --git a/app/javascript/dashboard/i18n/locale/de/advancedFilters.json b/app/javascript/dashboard/i18n/locale/de/advancedFilters.json
index 11809a5aa3921..d7611fe346aed 100644
--- a/app/javascript/dashboard/i18n/locale/de/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/de/advancedFilters.json
@@ -1,23 +1,24 @@
 {
   "FILTER": {
     "TITLE": "Gespräche filtern",
-    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
-    "EDIT_CUSTOM_FILTER": "Edit Folder",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
-    "ADD_NEW_FILTER": "Add filter",
-    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
+    "SUBTITLE": "Füge Filter unten hinzu und klicke auf „Filter anwenden“, um das Durcheinander der Chats zu beenden.",
+    "EDIT_CUSTOM_FILTER": "Ordner bearbeiten",
+    "CUSTOM_VIEWS_SUBTITLE": "Füge Filter hinzu oder entferne sie und aktualisieren deinen Ordner.",
+    "ADD_NEW_FILTER": "Filter hinzufügen",
+    "FILTER_DELETE_ERROR": "Hoppla, wir können nicht, nichts speichern! Bitte füge mindestens einen Filter hinzu, um ihn zu speichern.",
     "SUBMIT_BUTTON_LABEL": "Filter übernehmen",
-    "UPDATE_BUTTON_LABEL": "Update folder",
+    "UPDATE_BUTTON_LABEL": "Ordner aktualisieren",
     "CANCEL_BUTTON_LABEL": "Abbrechen",
-    "CLEAR_BUTTON_LABEL": "Clear filters",
-    "FOLDER_LABEL": "Folder Name",
-    "FOLDER_QUERY_LABEL": "Folder Query",
+    "CLEAR_BUTTON_LABEL": "Filter zurücksetzen",
+    "FOLDER_LABEL": "Ordnername",
+    "FOLDER_QUERY_LABEL": "Ordnerabfrage",
     "EMPTY_VALUE_ERROR": "Wert ist erforderlich.",
     "TOOLTIP_LABEL": "Gespräche filtern",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "UND",
       "OR": "ODER"
     },
+    "INPUT_PLACEHOLDER": "Wert eintragen",
     "OPERATOR_LABELS": {
       "equal_to": "Gleich",
       "not_equal_to": "Nicht gleich",
@@ -36,15 +37,15 @@
     },
     "ATTRIBUTES": {
       "STATUS": "Status",
-      "ASSIGNEE_NAME": "Assignee name",
+      "ASSIGNEE_NAME": "Bearbeiter Name",
       "INBOX_NAME": "Posteingangsname",
       "TEAM_NAME": "Teamname",
-      "CONVERSATION_IDENTIFIER": "Conversation identifier",
-      "CAMPAIGN_NAME": "Campaign name",
+      "CONVERSATION_IDENTIFIER": "Konversation-ID",
+      "CAMPAIGN_NAME": "Kampagnenname",
       "LABELS": "Labels",
-      "BROWSER_LANGUAGE": "Browser language",
+      "BROWSER_LANGUAGE": "Browsersprache",
       "PRIORITY": "Priorität",
-      "COUNTRY_NAME": "Country name",
+      "COUNTRY_NAME": "Landesname",
       "REFERER_LINK": "Referer-Link",
       "CUSTOM_ATTRIBUTE_LIST": "Liste",
       "CUSTOM_ATTRIBUTE_TEXT": "Text",
@@ -55,15 +56,15 @@
       "LAST_ACTIVITY": "Letzte Aktivität"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Standard filters",
-      "ADDITIONAL_FILTERS": "Additional filters",
-      "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "STANDARD_FILTERS": "Standard Filter",
+      "ADDITIONAL_FILTERS": "Zusätzliche Filter",
+      "CUSTOM_ATTRIBUTES": "Benutzerdefinierte Attribute"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
         "TITLE": "Möchten Sie diesen Filter speichern?",
         "LABEL": "Diesen Filter benennen",
-        "PLACEHOLDER": "Name your filter to refer it later.",
+        "PLACEHOLDER": "Benenne deinen Filter, um ihn später wiederzuerkennen.",
         "ERROR_MESSAGE": "Name wird benötigt.",
         "SAVE_BUTTON": "Filter speichern",
         "CANCEL_BUTTON": "Abbrechen",
@@ -77,7 +78,7 @@
         }
       },
       "EDIT": {
-        "EDIT_BUTTON": "Edit folder"
+        "EDIT_BUTTON": "Ordner bearbeiten"
       },
       "DELETE": {
         "DELETE_BUTTON": "Filter löschen",
@@ -85,7 +86,7 @@
           "CONFIRM": {
             "TITLE": "Löschen bestätigen",
             "MESSAGE": "Möchten Sie den Filter wirklich löschen ",
-            "YES": "Yes, delete",
+            "YES": "Ja, löschen",
             "NO": "Nein, behalte es"
           }
         },
diff --git a/app/javascript/dashboard/i18n/locale/de/agentBots.json b/app/javascript/dashboard/i18n/locale/de/agentBots.json
index 2560ef1edf4f7..dc5c70d1e041b 100644
--- a/app/javascript/dashboard/i18n/locale/de/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/de/agentBots.json
@@ -1,73 +1,73 @@
 {
   "AGENT_BOTS": {
     "HEADER": "Bots",
-    "LOADING_EDITOR": "Loading editor...",
-    "HEADER_BTN_TXT": "Add bot configuration",
-    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
+    "LOADING_EDITOR": "Lade Editor...",
+    "HEADER_BTN_TXT": "Bot-Konfiguration hinzufügen",
+    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agenten Bots sind wie die besten Mitglieder Ihres Teams. Die Bots können mit den kleinen Themen umgehen, sodass Sie sich auf die Sachen, die wichtig sind, konzentrieren können. Probieren Sie es aus.</p> <p> Sie können Ihre Bots von dieser Seite aus verwalten oder neue mit der Schaltfläche „Bot-Konfiguration hinzufügen“ erstellen.</p> <p> Öffnen Sie das <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent Bots Handbuch</a> in einem neuen Tab, um mehr zu erfahren.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
+        "LABEL": "Bot Name",
+        "PLACEHOLDER": "Benenne den Bot.",
         "ERROR": "Bot Name ist erforderlich."
       },
       "DESCRIPTION": {
-        "LABEL": "Bot description",
+        "LABEL": "Bot Beschreibung",
         "PLACEHOLDER": "Was macht dieser Bot?"
       },
       "BOT_CONFIG": {
         "ERROR": "Bitte geben Sie Ihre CSML Bot-Konfiguration oben ein.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+        "API_ERROR": "Deine CSML-Konfiguration ist ungültig, bitte korrigiere sie und versuche es erneut."
       },
       "SUBMIT": "Validieren und speichern"
     },
     "BOT_CONFIGURATION": {
       "TITLE": "Agenten-Bot auswählen",
-      "DESC": "Assign an Agent Bot to your inbox. They can handle initial conversations and transfer them to a live agent when necessary.",
+      "DESC": "Weise deinem Posteingang einen Agent Bot zu. Er kann die ersten Konversationen bearbeiten und sie bei Bedarf an einen echten Agenten übertragen.",
       "SUBMIT": "Aktualisieren",
-      "DISCONNECT": "Disconnect bot",
+      "DISCONNECT": "Bot-Verbindung trennen",
       "SUCCESS_MESSAGE": "Agenten-Bot erfolgreich aktualisiert.",
       "DISCONNECTED_SUCCESS_MESSAGE": "Agent-Bot erfolgreich getrennt.",
-      "ERROR_MESSAGE": "Could not update the agent bot. Please try again.",
-      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot. Please try again.",
-      "SELECT_PLACEHOLDER": "Select bot"
+      "ERROR_MESSAGE": "Der Agent Bot konnte nicht aktualisiert werden, bitte versuche es später erneut.",
+      "DISCONNECTED_ERROR_MESSAGE": "Der Agent Bot konnte nicht entfernt werden, bitte versuchen Sie es später erneut.",
+      "SELECT_PLACEHOLDER": "Bot auswählen"
     },
     "ADD": {
       "TITLE": "Neuen Bot konfigurieren",
       "CANCEL_BUTTON_TEXT": "Stornieren",
       "API": {
         "SUCCESS_MESSAGE": "Bot erfolgreich hinzugefügt.",
-        "ERROR_MESSAGE": "Could not add bot. Please try again later."
+        "ERROR_MESSAGE": "Bot konnte nicht hinzugefügt werden, bitte versuchen Sie es später erneut."
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
-      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "404": "Keine Bots gefunden. Du kannst einen Bot erstellen, indem du auf den 'Neuen Bot konfigurieren' Knopf klickst ↗",
+      "LOADING": "Bots werden geladen...",
+      "TYPE": "Bot-Typ"
     },
     "DELETE": {
       "BUTTON_TEXT": "Löschen",
-      "TITLE": "Delete bot",
+      "TITLE": "Bot löschen",
       "SUBMIT": "Löschen",
       "CANCEL_BUTTON_TEXT": "Stornieren",
       "DESCRIPTION": "Sind Sie sicher, dass Sie diesen Bot löschen wollen? Diese Aktion kann nicht rückgängig gemacht werden.",
       "API": {
         "SUCCESS_MESSAGE": "Bot erfolgreich gelöscht.",
-        "ERROR_MESSAGE": "Could not delete bot. Please try again."
+        "ERROR_MESSAGE": "Der Bot konnte nicht gelöscht werden, bitte versuche es später erneut."
       }
     },
     "EDIT": {
       "BUTTON_TEXT": "Bearbeiten",
-      "LOADING": "Fetching bots...",
-      "TITLE": "Edit bot",
+      "LOADING": "Bots werden geladen...",
+      "TITLE": "Bot bearbeiten",
       "CANCEL_BUTTON_TEXT": "Stornieren",
       "API": {
         "SUCCESS_MESSAGE": "Bot erfolgreich aktualisiert.",
-        "ERROR_MESSAGE": "Could not update bot. Please try again."
+        "ERROR_MESSAGE": "Der Bot konnte nicht aktualisiert werden, bitte versuche es später erneut."
       }
     },
     "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "Webhook Bot",
+      "CSML": "CSML Bot"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/agentMgmt.json b/app/javascript/dashboard/i18n/locale/de/agentMgmt.json
index c53d7aca7671d..470ec2b2b90c2 100644
--- a/app/javascript/dashboard/i18n/locale/de/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/de/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenten",
     "HEADER_BTN_TXT": "Agent hinzufügen",
     "LOADING": "Agentenliste abrufen",
-    "SIDEBAR_TXT": "<p><b>Agenten</b></p> <p> Ein <b>Agent</b> ist Mitglied Ihres Kundenservice-Teams. </p><p> Agenten können Nachrichten Ihrer Benutzer ansehen und beantworten. Die Liste zeigt alle Agenten, die derzeit in Ihrem Konto sind. </p><p> Klicken Sie auf <b>Agent hinzufügen</b>, um einen neuen Agent hinzuzufügen. Agent, den du hinzufügst, wird eine E-Mail mit einem Bestätigungslink erhalten, um sein Konto zu aktivieren. Danach kann er auf Chatwoot zugreifen und auf Nachrichten antworten. </p><p> Zugriff auf Chatwoots Funktionen basieren auf folgenden Rollen. </p><p> <b>Agent</b> - Agenten mit dieser Rolle können nur auf Posteingänge, Berichte und Unterhaltungen zugreifen. Sie können Konversationen anderen Akteuren oder sich selbst zuweisen und Gespräche lösen.</p><p> <b>Administrator</b> - Administrator hat Zugriff auf alle für Ihr Konto aktivierten Chatwoot-Funktionen einschließlich der Einstellungen, zusammen mit allen Privilegien eines normalen Agenten.</p>",
+    "DESCRIPTION": "Ein Agent ist ein Mitglied Ihres Kundensupport-Teams, das Nachrichten von Benutzern einsehen und beantworten kann. Die folgende Liste zeigt alle Agenten in Ihrem Konto.",
+    "LEARN_MORE": "Lernen Sie mehr über Benutzerrollen",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/de/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/de/attributesMgmt.json
index 1a8e88c38233a..60e2eaffed38a 100644
--- a/app/javascript/dashboard/i18n/locale/de/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/de/attributesMgmt.json
@@ -41,15 +41,15 @@
           "IN_VALID": "Ungültiger Schlüssel"
         },
         "REGEX_PATTERN": {
-          "LABEL": "Regex Pattern",
-          "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+          "LABEL": "Regex Muster",
+          "PLACEHOLDER": "Bitte benutzerdefiniertes Attribut Regex Muster eingeben. (Optional)"
         },
         "REGEX_CUE": {
-          "LABEL": "Regex Cue",
-          "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+          "LABEL": "Regex Hinweis",
+          "PLACEHOLDER": "Bitte geben Sie einen Hinweis zum Regex Muster ein. (Optional)"
         },
         "ENABLE_REGEX": {
-          "LABEL": "Enable regex validation"
+          "LABEL": "Regex Validierung aktivieren"
         }
       },
       "API": {
@@ -106,15 +106,15 @@
         "NOT_FOUND": "Es sind keine benutzerdefinierten Attribute konfiguriert"
       },
       "REGEX_PATTERN": {
-        "LABEL": "Regex Pattern",
-        "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+        "LABEL": "Regex Muster",
+        "PLACEHOLDER": "Bitte benutzerdefiniertes Attribut Regex Muster eingeben. (Optional)"
       },
       "REGEX_CUE": {
-        "LABEL": "Regex Cue",
-        "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+        "LABEL": "Regex Hinweis",
+        "PLACEHOLDER": "Bitte geben Sie einen Hinweis zum Regex Muster ein. (Optional)"
       },
       "ENABLE_REGEX": {
-        "LABEL": "Enable regex validation"
+        "LABEL": "Regex Validierung aktivieren"
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/de/auditLogs.json b/app/javascript/dashboard/i18n/locale/de/auditLogs.json
index 7fd21f6ebc5c5..1bb97354a65ee 100644
--- a/app/javascript/dashboard/i18n/locale/de/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/de/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit-Protokolle",
     "HEADER_BTN_TXT": "Audit-Protokolle hinzufügen",
     "LOADING": "Audit-Protokolle abrufen",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Es gibt keine Elemente, die dieser Abfrage entsprechen",
     "SIDEBAR_TXT": "<p><b>Auditprotokolle</b> </p><p> Auditprotokolle sind Spuren für Ereignisse und Aktionen in einem Chatwoot-System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/de/automation.json b/app/javascript/dashboard/i18n/locale/de/automation.json
index 4701a1e92cdbe..a021c76447ea6 100644
--- a/app/javascript/dashboard/i18n/locale/de/automation.json
+++ b/app/javascript/dashboard/i18n/locale/de/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Zum Speichern ist mindestens eine Aktion erforderlich",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Geben Sie hier Ihre Nachricht ein",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Teams auswählen"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Teams auswählen",
+      "EMAIL_INPUT_PLACEHOLDER": "E-Mail eingeben",
+      "URL_INPUT_PLACEHOLDER": "URL eingeben"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Automatisierungsregel aktivieren",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Hochladen...",
       "LABEL_UPLOADED": "Erfolgreich hochgeladen",
       "LABEL_UPLOAD_FAILED": "Upload fehlgeschlagen"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribut-Schlüssel ist erforderlich",
+      "FILTER_OPERATOR_REQUIRED": "Filter-Operator ist erforderlich",
+      "VALUE_REQUIRED": "Wert ist erforderlich",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Wert muss zwischen 1 und 998 liegen",
+      "ACTION_PARAMETERS_REQUIRED": "Aktionsparameter sind erforderlich",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "Mindestens eine Bedingung ist erforderlich",
+      "ATLEAST_ONE_ACTION_REQUIRED": "Mindestens eine Aktion ist erforderlich"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/bulkActions.json b/app/javascript/dashboard/i18n/locale/de/bulkActions.json
index ea0ba5e2c78cf..de04c6a3f3fc8 100644
--- a/app/javascript/dashboard/i18n/locale/de/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/de/bulkActions.json
@@ -7,26 +7,27 @@
     "GO_BACK_LABEL": "Zurück",
     "ASSIGN_LABEL": "Zuordnen",
     "YES": "Ja",
+    "SEARCH_INPUT_PLACEHOLDER": "Suchen",
     "ASSIGN_AGENT_TOOLTIP": "Agent zuweisen",
     "ASSIGN_TEAM_TOOLTIP": "Team zuweisen",
     "ASSIGN_SUCCESFUL": "Konversationen erfolgreich zugewiesen.",
-    "ASSIGN_FAILED": "Failed to assign conversations. Please try again.",
+    "ASSIGN_FAILED": "Konversationen konnten nicht zugewiesen werden. Bitte versuchen Sie es erneut.",
     "RESOLVE_SUCCESFUL": "Konversationen erfolgreich gelöst.",
-    "RESOLVE_FAILED": "Failed to resolve conversations. Please try again.",
+    "RESOLVE_FAILED": "Konversationen konnten nicht gelöst werden. Bitte versuchen Sie es erneut.",
     "ALL_CONVERSATIONS_SELECTED_ALERT": "Nur auf dieser Seite sichtbaren Konversationen sind ausgewählt.",
     "AGENT_LIST_LOADING": "Agenten werden geladen",
     "UPDATE": {
       "CHANGE_STATUS": "Status ändern",
       "SNOOZE_UNTIL": "Erinnern",
       "UPDATE_SUCCESFUL": "Der Konversationsstatus wurde erfolgreich aktualisiert.",
-      "UPDATE_FAILED": "Failed to update conversations. Please try again."
+      "UPDATE_FAILED": "Konversationen konnten nicht aktualisiert werden. Bitte versuchen Sie es erneut."
     },
     "LABELS": {
-      "ASSIGN_LABELS": "Assign labels",
+      "ASSIGN_LABELS": "Labels zuweisen",
       "NO_LABELS_FOUND": "Keine Labels gefunden für",
       "ASSIGN_SELECTED_LABELS": "Ausgewählte Labels zuweisen",
       "ASSIGN_SUCCESFUL": "Labels erfolgreich zugewiesen.",
-      "ASSIGN_FAILED": "Failed to assign labels. Please try again."
+      "ASSIGN_FAILED": "Labels konnten nicht zugewiesen werden. Bitte versuchen Sie es erneut."
     },
     "TEAMS": {
       "TEAM_SELECT_LABEL": "Team auswählen",
@@ -34,7 +35,7 @@
       "NO_TEAMS_AVAILABLE": "Es wurden noch keine Teams zu diesem Konto hinzugefügt.",
       "ASSIGN_SELECTED_TEAMS": "Ausgewähltes Team zuweisen.",
       "ASSIGN_SUCCESFUL": "Teams erfolgreich zugewiesen.",
-      "ASSIGN_FAILED": "Failed to assign team. Please try again."
+      "ASSIGN_FAILED": "Team konnte nicht zugewiesen werden. Bitte versuche es erneut."
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/de/cannedMgmt.json
index 6bcf5cd44795f..9a3e758f87e5e 100644
--- a/app/javascript/dashboard/i18n/locale/de/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/de/cannedMgmt.json
@@ -1,75 +1,76 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Vorgefertigte Antworten",
-    "HEADER_BTN_TXT": "Add canned response",
-    "LOADING": "Fetching canned responses...",
+    "LEARN_MORE": "Erfahren Sie mehr über vorgefertigte Antworten",
+    "DESCRIPTION": "Vorgefertigte Antworten sind vorgeschriebene Antwortvorlagen, die Ihnen helfen, schnell auf eine Konversation zu reagieren. Agenten können das Zeichen '/' gefolgt von dem Kurzbefehl eingeben, um während einer Konversation eine vorgefertigte Antwort einzufügen. ",
+    "HEADER_BTN_TXT": "Vorgefertigte Antwort hinzufügen",
+    "LOADING": "Lade vorgefertigte Antworten...",
     "SEARCH_404": "Es existieren keine Elemente, die dieser Abfrage entsprechen.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "In diesem Konto sind keine gespeicherten Antworten verfügbar.",
       "TITLE": "Verwalten Sie vordefinierte Antworten",
-      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
+      "DESC": "Vorgefertigte Antworten sind vorgeschriebene Antwortvorlagen, die verwendet werden können, um schnell auf Gespräche zu antworten.",
       "TABLE_HEADER": [
-        "Short code",
+        "Kurzbefehl",
         "Inhalt",
         "Aktionen"
       ]
     },
     "ADD": {
-      "TITLE": "Add canned response",
-      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
+      "TITLE": "Vorgefertigte Antwort hinzufügen",
+      "DESC": "Vorgefertigte Antworten sind vorgeschriebene Antwortvorlagen, die verwendet werden können, um schnell auf Gespräche zu antworten.",
       "CANCEL_BUTTON_TEXT": "Abbrechen",
       "FORM": {
         "SHORT_CODE": {
-          "LABEL": "Short code",
+          "LABEL": "Kurzbefehl",
           "PLACEHOLDER": "Please enter a short code.",
           "ERROR": "Short Code is required."
         },
         "CONTENT": {
           "LABEL": "Nachricht",
-          "PLACEHOLDER": "Please write the message you want to save as a template to use later.",
-          "ERROR": "Message is required."
+          "PLACEHOLDER": "Bitte schreiben Sie die Nachricht, die Sie als Vorlage speichern möchten, um sie später zu verwenden.",
+          "ERROR": "Nachricht ist erforderlich."
         },
         "SUBMIT": "Einreichen"
       },
       "API": {
-        "SUCCESS_MESSAGE": "Canned response added successfully.",
+        "SUCCESS_MESSAGE": "Vorgefertigte Antwort erfolgreich hinzugefügt.",
         "ERROR_MESSAGE": "Es konnte keine Verbindung zum Woot Server hergestellt werden. Bitte versuchen Sie es später erneut"
       }
     },
     "EDIT": {
-      "TITLE": "Edit canned response",
+      "TITLE": "Vorgefertigte Antwort bearbeiten",
       "CANCEL_BUTTON_TEXT": "Abbrechen",
       "FORM": {
         "SHORT_CODE": {
-          "LABEL": "Short code",
+          "LABEL": "Kurzbefehl",
           "PLACEHOLDER": "Please enter a shortcode.",
           "ERROR": "Short code is required."
         },
         "CONTENT": {
           "LABEL": "Nachricht",
-          "PLACEHOLDER": "Please write the message you want to save as a template to use later.",
+          "PLACEHOLDER": "Bitte schreiben Sie die Nachricht, die Sie als Antwortvorlage speichern möchten, um sie später zu verwenden.",
           "ERROR": "Nachricht ist erforderlich."
         },
         "SUBMIT": "Einreichen"
       },
       "BUTTON_TEXT": "Bearbeiten",
       "API": {
-        "SUCCESS_MESSAGE": "Canned response is updated successfully.",
+        "SUCCESS_MESSAGE": "Vorgefertigte Antwort wurde erfolgreich aktualisiert.",
         "ERROR_MESSAGE": "Es konnte keine Verbindung zum Woot Server hergestellt werden. Bitte versuchen Sie es später erneut"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "Löschen",
       "API": {
-        "SUCCESS_MESSAGE": "Canned response deleted successfully.",
+        "SUCCESS_MESSAGE": "Vorgefertigte Antwort wurde erfolgreich gelöscht.",
         "ERROR_MESSAGE": "Es konnte keine Verbindung zum Woot Server hergestellt werden. Bitte versuchen Sie es später erneut"
       },
       "CONFIRM": {
         "TITLE": "Löschen bestätigen",
         "MESSAGE": "Bist du sicher, das du das löschen möchtest",
-        "YES": "Yes, delete ",
-        "NO": "No, keep "
+        "YES": "Ja, löschen ",
+        "NO": "Nein, behalten "
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/de/chatlist.json b/app/javascript/dashboard/i18n/locale/de/chatlist.json
index c5bfe39c7ce37..20ed25a4adeb8 100644
--- a/app/javascript/dashboard/i18n/locale/de/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/de/chatlist.json
@@ -53,28 +53,28 @@
     },
     "SORT_ORDER_ITEMS": {
       "last_activity_at_asc": {
-        "TEXT": "Last activity: Oldest first"
+        "TEXT": "Letzte Aktivität: Älteste zuerst"
       },
       "last_activity_at_desc": {
-        "TEXT": "Last activity: Newest first"
+        "TEXT": "Letzte Aktivität: Neueste zuerst"
       },
       "created_at_desc": {
-        "TEXT": "Created at: Newest first"
+        "TEXT": "Erstellt am: Neueste zuerst"
       },
       "created_at_asc": {
-        "TEXT": "Created at: Oldest first"
+        "TEXT": "Erstellt am: Älteste zuerst"
       },
       "priority_desc": {
-        "TEXT": "Priority: Highest first"
+        "TEXT": "Priorität: Höchste zuerst"
       },
       "priority_asc": {
-        "TEXT": "Priority: Lowest first"
+        "TEXT": "Priorität: Niedrigste zuerst"
       },
       "waiting_since_asc": {
-        "TEXT": "Pending Response: Longest first"
+        "TEXT": "Ausstehende Antwort: Längste zuerst"
       },
       "waiting_since_desc": {
-        "TEXT": "Pending Response: Shortest first"
+        "TEXT": "Ausstehende Antwort: Kürzeste zuerst"
       }
     },
     "ATTACHMENTS": {
diff --git a/app/javascript/dashboard/i18n/locale/de/contact.json b/app/javascript/dashboard/i18n/locale/de/contact.json
index 111f90ecee21b..2b9b790da4cb0 100644
--- a/app/javascript/dashboard/i18n/locale/de/contact.json
+++ b/app/javascript/dashboard/i18n/locale/de/contact.json
@@ -39,10 +39,10 @@
     },
     "MERGE_CONTACT": "Kontakte zusammenführen",
     "CONTACT_ACTIONS": "Kontakt-Aktionen",
-    "MUTE_CONTACT": "Block Contact",
-    "UNMUTE_CONTACT": "Unblock Contact",
-    "MUTED_SUCCESS": "This contact is blocked successfully. You will not be notified of any future conversations.",
-    "UNMUTED_SUCCESS": "This contact is unblocked successfully.",
+    "MUTE_CONTACT": "Kontakt blockieren",
+    "UNMUTE_CONTACT": "Kontakt entsperren",
+    "MUTED_SUCCESS": "Dieser Kontakt wurde erfolgreich blockiert. Sie werden über keine zukünftigen Konversationen benachrichtigt.",
+    "UNMUTED_SUCCESS": "Dieser Kontakt wurde erfolgreich entsperrt.",
     "SEND_TRANSCRIPT": "Transkript senden",
     "EDIT_LABEL": "Bearbeiten",
     "SIDEBAR_SECTIONS": {
@@ -72,7 +72,7 @@
       "SUBMIT": "Importieren",
       "CANCEL": "Abbrechen"
     },
-    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+    "SUCCESS_MESSAGE": "Sie werden per E-Mail benachrichtigt, wenn der Import abgeschlossen ist.",
     "ERROR_MESSAGE": "Es ist ein Fehler aufgetreten, bitte versuchen Sie es erneut"
   },
   "EXPORT_CONTACTS": {
@@ -83,10 +83,10 @@
     "ERROR_MESSAGE": "Es ist ein Fehler aufgetreten, bitte versuchen Sie es erneut",
     "CONFIRM": {
       "TITLE": "Kontakte exportieren",
-      "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
-      "YES": "Yes, Export",
-      "NO": "No, Cancel"
+      "MESSAGE": "Sind Sie sicher, dass Sie alle Kontakte exportieren möchten?",
+      "FILTERED_MESSAGE": "Sind Sie sicher, dass Sie alle gefilterten Kontakte exportieren möchten?",
+      "YES": "Ja, exportieren",
+      "NO": "Nein, abbrechen"
     }
   },
   "DELETE_NOTE": {
@@ -213,8 +213,8 @@
         "ERROR": "Nachricht darf nicht leer sein"
       },
       "ATTACHMENTS": {
-        "SELECT": "Choose files",
-        "HELP_TEXT": "Drag and drop files here or choose files to attach"
+        "SELECT": "Dateien auswählen",
+        "HELP_TEXT": "Ziehe Dateien hierher oder wähle Dateien zum Anhängen aus"
       },
       "SUBMIT": "Nachricht senden",
       "CANCEL": "Abbrechen",
@@ -298,8 +298,8 @@
     "BUTTON": "Eigenes Attribut hinzufügen",
     "NOT_AVAILABLE": "Für diesen Kontakt sind keine benutzerdefinierten Attribute verfügbar.",
     "COPY_SUCCESSFUL": "Erfolgreich in die Zwischenablage kopiert",
-    "SHOW_MORE": "Show all attributes",
-    "SHOW_LESS": "Show less attributes",
+    "SHOW_MORE": "Alle Attribute anzeigen",
+    "SHOW_LESS": "Weniger Attribute anzeigen",
     "ACTIONS": {
       "COPY": "Attribut kopieren",
       "DELETE": "Attribut löschen",
@@ -350,7 +350,7 @@
     "VALIDATIONS": {
       "REQUIRED": "Gültiger Wert ist erforderlich",
       "INVALID_URL": "Ungültige URL",
-      "INVALID_INPUT": "Invalid Input"
+      "INVALID_INPUT": "Ungültige Eingabe"
     }
   },
   "MERGE_CONTACTS": {
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakt erfolgreich zusammengeführt",
       "ERROR_MESSAGE": "Kontakte konnten nicht zusammengeführt werden, bitte erneut versuchen!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/contactFilters.json b/app/javascript/dashboard/i18n/locale/de/contactFilters.json
index 9a33b0a301d16..ed69a789eb4b0 100644
--- a/app/javascript/dashboard/i18n/locale/de/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/de/contactFilters.json
@@ -2,18 +2,18 @@
   "CONTACTS_FILTER": {
     "TITLE": "Kontakte filtern",
     "SUBTITLE": "Fügen Sie unten Filter hinzu und klicken Sie auf 'Senden', um die Kontakte zu filtern.",
-    "EDIT_CUSTOM_SEGMENT": "Edit Segment",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your segment.",
+    "EDIT_CUSTOM_SEGMENT": "Segment bearbeiten",
+    "CUSTOM_VIEWS_SUBTITLE": "Füge Filter hinzu oder entferne sie und aktualisieren dein Segment.",
     "ADD_NEW_FILTER": "Filter hinzufügen",
     "CLEAR_ALL_FILTERS": "Alle Filter löschen",
     "FILTER_DELETE_ERROR": "Sie sollten mindestens einen Filter zum Speichern haben",
     "SUBMIT_BUTTON_LABEL": "Einreichen",
-    "UPDATE_BUTTON_LABEL": "Update Segment",
+    "UPDATE_BUTTON_LABEL": "Segment aktualisieren",
     "CANCEL_BUTTON_LABEL": "Abbrechen",
     "CLEAR_BUTTON_LABEL": "Filter zurücksetzen",
     "EMPTY_VALUE_ERROR": "Wert ist erforderlich",
-    "SEGMENT_LABEL": "Segment Name",
-    "SEGMENT_QUERY_LABEL": "Segment Query",
+    "SEGMENT_LABEL": "Segmentname",
+    "SEGMENT_QUERY_LABEL": "Segment-Abfrage",
     "TOOLTIP_LABEL": "Kontakte filtern",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "UND",
@@ -45,7 +45,7 @@
       "CREATED_AT": "Erstellt am",
       "LAST_ACTIVITY": "Letzte Aktivität",
       "REFERER_LINK": "Verweis-Link",
-      "BLOCKED": "Blocked"
+      "BLOCKED": "Blockiert"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "Standardfilter",
diff --git a/app/javascript/dashboard/i18n/locale/de/conversation.json b/app/javascript/dashboard/i18n/locale/de/conversation.json
index 3f38361cef772..f59d59c7892b9 100644
--- a/app/javascript/dashboard/i18n/locale/de/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/de/conversation.json
@@ -1,7 +1,7 @@
 {
   "CONVERSATION": {
     "SELECT_A_CONVERSATION": "Bitte wählen Sie eine Konversation aus dem linken Bereich aus",
-    "CSAT_REPLY_MESSAGE": "Bitte bewerten Sie diese Konversation",
+    "CSAT_REPLY_MESSAGE": "Bitte bewerten Sie diese Unterhaltung",
     "404": "Wir können die Konversation leider nicht finden. Bitte versuche es erneut",
     "SWITCH_VIEW_LAYOUT": "Layout wechseln",
     "DASHBOARD_APP_TAB_MESSAGES": "Nachrichten",
@@ -13,8 +13,8 @@
     "NO_INBOX_AGENT": "Oh oh! Sieht so aus, als wären Sie nicht Teil eines Posteingangs. Bitte wenden Sie sich an Ihren Administrator",
     "SEARCH_MESSAGES": "Nachrichten in Unterhaltungen suchen",
     "EMPTY_STATE": {
-      "CMD_BAR": "to open command menu",
-      "KEYBOARD_SHORTCUTS": "to view keyboard shortcuts"
+      "CMD_BAR": "zum Öffnen des Kommandomenüs",
+      "KEYBOARD_SHORTCUTS": "um Tastenkürzel anzuzeigen"
     },
     "SEARCH": {
       "TITLE": "Nachrichten durchsuchen",
@@ -41,9 +41,9 @@
     "SAVE_CONTACT": "Speichern",
     "UPLOADING_ATTACHMENTS": "Anhänge werden hochgeladen...",
     "REPLIED_TO_STORY": "Auf deine Geschichte geantwortet",
-    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
-    "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
-    "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
+    "UNSUPPORTED_MESSAGE": "Die Nachricht wird nicht unterstützt.",
+    "UNSUPPORTED_MESSAGE_FACEBOOK": "Diese Nachricht wird nicht unterstützt. Sie können diese Nachricht in der Facebook-Messenger-App sehen.",
+    "UNSUPPORTED_MESSAGE_INSTAGRAM": "Diese Nachricht wird nicht unterstützt. Sie können diese Nachricht in der Instagram-App sehen.",
     "SUCCESS_DELETE_MESSAGE": "Nachricht erfolgreich gelöscht",
     "FAIL_DELETE_MESSSAGE": "Nachricht konnte nicht gelöscht werden! Versuchen Sie es erneut",
     "NO_RESPONSE": "Keine Antwort",
@@ -69,8 +69,8 @@
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
         "RT": "RT {status}",
-        "MISSED": "missed",
-        "DUE": "due"
+        "MISSED": "verpasst",
+        "DUE": "fällig"
       }
     },
     "RESOLVE_DROPDOWN": {
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Umschalt + Eingabetaste für neue Zeile. Beginnen Sie mit '/', um eine vordefinierte Antwort auszuwählen.",
       "PRIVATE_MSG_INPUT": "Umschalt + Eingabetaste für neue Zeile. Dies ist nur für Agenten sichtbar",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Die Nachrichtensignatur ist nicht konfiguriert, bitte konfigurieren Sie sie in den Profileinstellungen.",
-      "CLICK_HERE": "Klicken Sie hier, um zu aktualisieren"
+      "CLICK_HERE": "Klicken Sie hier, um zu aktualisieren",
+      "WHATSAPP_TEMPLATES": "WhatsApp-Vorlagen"
     },
     "REPLYBOX": {
       "REPLY": "Antworten",
diff --git a/app/javascript/dashboard/i18n/locale/de/datePicker.json b/app/javascript/dashboard/i18n/locale/de/datePicker.json
index 4de2a8a901034..4c537051902a0 100644
--- a/app/javascript/dashboard/i18n/locale/de/datePicker.json
+++ b/app/javascript/dashboard/i18n/locale/de/datePicker.json
@@ -1,13 +1,13 @@
 {
   "DATE_PICKER": {
     "APPLY_BUTTON": "Übernehmen",
-    "CLEAR_BUTTON": "Clear",
+    "CLEAR_BUTTON": "Leeren",
     "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
+      "START": "Startdatum",
+      "END": "Enddatum"
     },
     "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
+      "TITLE": "DATUMSSPANNE",
       "LAST_7_DAYS": "Letzten 7 Tage",
       "LAST_30_DAYS": "Letzte 30 Tage",
       "LAST_3_MONTHS": "Die letzten 3 Monate",
diff --git a/app/javascript/dashboard/i18n/locale/de/general.json b/app/javascript/dashboard/i18n/locale/de/general.json
index 25bb4dfb736d2..5915545e7b762 100644
--- a/app/javascript/dashboard/i18n/locale/de/general.json
+++ b/app/javascript/dashboard/i18n/locale/de/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+    "SHOWING_RESULTS": "{firstIndex}-{lastIndex} von {totalCount} Elementen werden angezeigt",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Suchen",
+      "EMPTY_STATE": "Keine Ergebnisse gefunden"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/generalSettings.json b/app/javascript/dashboard/i18n/locale/de/generalSettings.json
index 02b43472f69a5..b4a18a921d3c8 100644
--- a/app/javascript/dashboard/i18n/locale/de/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/de/generalSettings.json
@@ -88,14 +88,16 @@
       "assigned_conversation_new_message": "Neue Nachricht",
       "participating_conversation_new_message": "Neue Nachricht",
       "conversation_mention": "Erwähnung",
-      "sla_missed_first_response": "SLA Missed",
-      "sla_missed_next_response": "SLA Missed",
-      "sla_missed_resolution": "SLA Missed"
+      "sla_missed_first_response": "SLA verpasst",
+      "sla_missed_next_response": "SLA verpasst",
+      "sla_missed_resolution": "SLA verpasst"
     }
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Verbinde neu...",
+      "RECONNECT_SUCCESS": "Wiederverbunden"
     },
     "BUTTON": {
       "REFRESH": "Neu laden"
@@ -107,7 +109,7 @@
       "GENERAL": "Generell",
       "REPORTS": "Berichte",
       "CONVERSATION": "Konversation",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "Massenaktionen",
       "CHANGE_ASSIGNEE": "Beauftragten ändern",
       "CHANGE_PRIORITY": "Priorität ändern",
       "CHANGE_TEAM": "Team wechseln",
@@ -115,9 +117,9 @@
       "ADD_LABEL": "Label zur Konversation hinzufügen",
       "REMOVE_LABEL": "Label aus der Konversation entfernen",
       "SETTINGS": "Einstellungen",
-      "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "Appearance",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "AI_ASSIST": "AI-Assistent",
+      "APPEARANCE": "Darstellung",
+      "SNOOZE_NOTIFICATION": "Ungelesene Benachrichtigungen"
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "Zur Konversationsübersicht",
@@ -139,7 +141,7 @@
       "GO_TO_NOTIFICATIONS": "Zu Benachrichtigungen",
       "ADD_LABELS_TO_CONVERSATION": "Label zur Konversation hinzufügen",
       "ASSIGN_AN_AGENT": "Einen Agent zuweisen",
-      "AI_ASSIST": "AI Assist",
+      "AI_ASSIST": "AI-Assistent",
       "ASSIGN_PRIORITY": "Priorität zuweisen",
       "ASSIGN_A_TEAM": "Ein Team zuweisen",
       "MUTE_CONVERSATION": "Konversation stummschalten",
@@ -154,19 +156,19 @@
       "UNTIL_TOMORROW": "Bis morgen",
       "UNTIL_NEXT_MONTH": "bis zum nächsten Monat",
       "AN_HOUR_FROM_NOW": "bis in einer Stunde von jetzt an",
-      "CUSTOM": "individuell",
-      "CHANGE_APPEARANCE": "Change Appearance",
-      "LIGHT_MODE": "Light",
-      "DARK_MODE": "Dark",
+      "UNTIL_CUSTOM_TIME": "individuell",
+      "CHANGE_APPEARANCE": "Aussehen ändern",
+      "LIGHT_MODE": "Hell",
+      "DARK_MODE": "Dunkel",
       "SYSTEM_MODE": "System",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "SNOOZE_NOTIFICATION": "Ungelesene Benachrichtigungen"
     }
   },
   "DASHBOARD_APPS": {
     "LOADING_MESSAGE": "Dashboard-App wird geladen..."
   },
   "COMMON": {
-    "OR": "Or",
+    "OR": "Oder",
     "CLICK_HERE": "hier klicken"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/helpCenter.json b/app/javascript/dashboard/i18n/locale/de/helpCenter.json
index b6504f0933e2d..2b7e182890153 100644
--- a/app/javascript/dashboard/i18n/locale/de/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/de/helpCenter.json
@@ -18,10 +18,10 @@
         "ARCHIVED": "Archivierte Artikel"
       },
       "LOCALE_SELECT": {
-        "TITLE": "Select locale",
-        "PLACEHOLDER": "Select locale",
-        "NO_RESULT": "No locale found",
-        "SEARCH_PLACEHOLDER": "Search locale"
+        "TITLE": "Sprache auswählen",
+        "PLACEHOLDER": "Sprache auswählen",
+        "NO_RESULT": "Keine Sprache gefunden",
+        "SEARCH_PLACEHOLDER": "Sprache suchen"
       }
     },
     "EDIT_HEADER": {
@@ -82,15 +82,15 @@
       }
     },
     "ARTICLE_SEARCH_RESULT": {
-      "UNCATEGORIZED": "Uncategorized",
-      "SEARCH_RESULTS": "Search results for %{query}",
-      "EMPTY_TEXT": "Search for articles to insert into replies.",
+      "UNCATEGORIZED": "Nicht kategorisiert",
+      "SEARCH_RESULTS": "Suchergebnisse für %{query}",
+      "EMPTY_TEXT": "Suche nach Artikeln, um sie in Antworten einzufügen.",
       "SEARCH_LOADER": "Suchen...",
-      "INSERT_ARTICLE": "Insert",
-      "NO_RESULT": "No articles found",
-      "COPY_LINK": "Copy article link to clipboard",
-      "OPEN_LINK": "Open article in new tab",
-      "PREVIEW_LINK": "Preview article"
+      "INSERT_ARTICLE": "Einfügen",
+      "NO_RESULT": "Keine Artikel gefunden",
+      "COPY_LINK": "Artikellink in die Zwischenablage kopieren",
+      "OPEN_LINK": "Artikel in neuem Fenster öffnen",
+      "PREVIEW_LINK": "Artikelvorschau anzeigen"
     },
     "PORTAL": {
       "HEADER": "Portale",
@@ -231,9 +231,9 @@
           "LABEL": "Logo",
           "UPLOAD_BUTTON": "Logo hochladen",
           "HELP_TEXT": "Dieses Logo wird in der Kopfzeile des Portals angezeigt.",
-          "IMAGE_UPLOAD_SUCCESS": "Logo uploaded successfully",
-          "IMAGE_UPLOAD_ERROR": "Logo deleted successfully",
-          "IMAGE_DELETE_ERROR": "Error while deleting logo"
+          "IMAGE_UPLOAD_SUCCESS": "Logo erfolgreich hochgeladen",
+          "IMAGE_UPLOAD_ERROR": "Logo erfolgreich gelöscht",
+          "IMAGE_DELETE_ERROR": "Fehler beim Löschen des Logos"
         },
         "NAME": {
           "LABEL": "Name",
@@ -319,13 +319,13 @@
       "HEADERS": {
         "TITLE": "Titel",
         "CATEGORY": "Kategorie",
-        "READ_COUNT": "Views",
+        "READ_COUNT": "Ansichten",
         "STATUS": "Status",
         "LAST_EDITED": "Zuletzt bearbeitet"
       },
       "COLUMNS": {
         "BY": "von",
-        "AUTHOR_NOT_AVAILABLE": "Author is not available"
+        "AUTHOR_NOT_AVAILABLE": "Autor ist nicht verfügbar"
       }
     },
     "EDIT_ARTICLE": {
@@ -379,7 +379,7 @@
         "NAME": {
           "LABEL": "Name",
           "PLACEHOLDER": "Kategoriename",
-          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
+          "HELP_TEXT": "Der Kategoriename und das Symbol werden im öffentlich zugänglichen Portal verwendet, um Artikel zu kategorisieren.",
           "ERROR": "Name wird benötigt"
         },
         "SLUG": {
@@ -410,7 +410,7 @@
         "NAME": {
           "LABEL": "Name",
           "PLACEHOLDER": "Kategoriename",
-          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
+          "HELP_TEXT": "Der Kategoriename und das Symbol werden im öffentlich zugänglichen Portal verwendet, um Artikel zu kategorisieren.",
           "ERROR": "Name wird benötigt"
         },
         "SLUG": {
@@ -441,46 +441,47 @@
       }
     },
     "ARTICLE_SEARCH": {
-      "TITLE": "Search articles",
-      "PLACEHOLDER": "Search articles",
-      "NO_RESULT": "No articles found",
+      "TITLE": "Artikel suchen",
+      "PLACEHOLDER": "Artikel suchen",
+      "NO_RESULT": "Keine Artikel gefunden",
       "SEARCHING": "Suchen...",
       "SEARCH_BUTTON": "Suchen",
-      "INSERT_ARTICLE": "Insert link",
-      "IFRAME_ERROR": "URL is empty or invalid. Unable to display content.",
-      "OPEN_ARTICLE_SEARCH": "Insert article from Help Center",
-      "SUCCESS_ARTICLE_INSERTED": "Article inserted successfully",
-      "PREVIEW_LINK": "Preview article",
+      "INSERT_ARTICLE": "Link einfügen",
+      "IFRAME_ERROR": "URL ist leer oder ungültig. Inhalt kann nicht angezeigt werden.",
+      "OPEN_ARTICLE_SEARCH": "Artikel aus dem Help Center einfügen",
+      "SUCCESS_ARTICLE_INSERTED": "Artikel erfolgreich eingefügt",
+      "PREVIEW_LINK": "Artikelvorschau anzeigen",
       "CANCEL": "Schließen",
       "BACK": "Zurück",
-      "BACK_RESULTS": "Back to results"
+      "BACK_RESULTS": "Zurück zu den Ergebnissen"
     },
     "UPGRADE_PAGE": {
       "TITLE": "Hilfezentrum",
-      "DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Upgrade your subscription to enable this feature.",
-      "SELF_HOSTED_DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Please contact your administrator to enable this feature.",
+      "DESCRIPTION": "Erstellen Sie benutzerfreundliche Self Service-Portale. Helfen Sie Ihren Nutzern, auf die Artikel zuzugreifen und rund um die Uhr Unterstützung zu erhalten. Erweitern Sie Ihr Abonnement, um diese Funktion zu aktivieren.",
+      "SELF_HOSTED_DESCRIPTION": "Erstellen Sie benutzerfreundliche Self Service-Portale. Helfen Sie Ihren Nutzern, auf die Artikel zuzugreifen und rund um die Uhr Unterstützung zu erhalten. Bitte kontaktieren Sie Ihren Administrator, um diese Funktion zu aktivieren.",
       "BUTTON": {
         "LEARN_MORE": "Mehr erfahren",
-        "UPGRADE": "Upgrade"
+        "UPGRADE": "Upgrade durchführen"
       },
       "FEATURES": {
         "PORTALS": {
-          "TITLE": "Multiple portals",
-          "DESCRIPTION": "Create multiple help center portals for different products using the same account."
+          "TITLE": "Mehrere Portale",
+          "DESCRIPTION": "Erstellen Sie mehrere Help Center-Portale für verschiedene Produkte mit demselben Konto."
         },
         "LOCALES": {
-          "TITLE": "Full support for locales",
-          "DESCRIPTION": "Localize the portal in your language. We support all locales and allow translations for every article."
+          "TITLE": "Vollständige Unterstützung für Sprachen",
+          "DESCRIPTION": "Finden Sie das Portal in Ihrer Sprache. Wir unterstützen alle Sprachen und ermöglichen Übersetzungen für jeden Artikel."
         },
         "SEO": {
-          "TITLE": "SEO-friendly design",
-          "DESCRIPTION": "Customize your meta tags to improve your visibility on search engines with our SEO-friendly pages."
+          "TITLE": "SEO-freundliches Design",
+          "DESCRIPTION": "Passen Sie Ihre Meta-Tags an, um Ihre Sichtbarkeit in Suchmaschinen mit unseren SEO-freundlichen Seiten zu verbessern."
         },
         "API": {
-          "TITLE": "Full API support",
-          "DESCRIPTION": "Use the portal as a headless CMS with third party front-end frameworks using our APIs."
+          "TITLE": "Vollständige API-Unterstützung",
+          "DESCRIPTION": "Verwenden Sie das Portal als Headless-CMS mit Drittanbieter-Front-End-Frameworks mithilfe unserer APIs."
         }
       }
-    }
+    },
+    "LOADING": "Laden..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/inbox.json b/app/javascript/dashboard/i18n/locale/de/inbox.json
index c25dd79163e76..da476b8c65289 100644
--- a/app/javascript/dashboard/i18n/locale/de/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/de/inbox.json
@@ -2,63 +2,63 @@
   "INBOX": {
     "LIST": {
       "TITLE": "Posteingang",
-      "DISPLAY_DROPDOWN": "Display",
-      "LOADING": "Fetching notifications",
-      "404": "There are no active notifications in this group.",
-      "NO_NOTIFICATIONS": "No notifications",
-      "NOTE": "Notifications from all subscribed inboxes",
-      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
+      "DISPLAY_DROPDOWN": "Anzeigen",
+      "LOADING": "Benachrichtigungen werden abgerufen",
+      "404": "Es gibt keine aktiven Benachrichtigungen in dieser Gruppe.",
+      "NO_NOTIFICATIONS": "Keine Benachrichtigungen",
+      "NOTE": "Benachrichtigungen aus allen abonnierten Posteingängen",
+      "NO_MESSAGES_AVAILABLE": "Hoppla! Nachrichten konnten nicht abgerufen werden",
       "SNOOZED_UNTIL": "Stummschalten bis",
       "SNOOZED_UNTIL_TOMORROW": "Schlummern bis morgen",
       "SNOOZED_UNTIL_NEXT_WEEK": "Schlummern bis nächste Woche"
     },
     "ACTION_HEADER": {
-      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification",
+      "SNOOZE": "Schlummerbenachrichtigung",
+      "DELETE": "Benachrichtigung löschen",
       "BACK": "Zurück"
     },
     "TYPES": {
-      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
-      "CONVERSATION_CREATION": "New conversation created",
-      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
-      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
-      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
-      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
-      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
+      "CONVERSATION_MENTION": "Sie wurden in einer Unterhaltung erwähnt",
+      "CONVERSATION_CREATION": "Neue Unterhaltung erstellt",
+      "CONVERSATION_ASSIGNMENT": "Eine Unterhaltung wurde Ihnen zugewiesen",
+      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Neue Nachricht in einer zugewiesenen Unterhaltung",
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Neue Nachricht in einer Unterhaltung, an dem Sie teilnehmen",
+      "SLA_MISSED_FIRST_RESPONSE": "SLA-Ziel für die erste Antwort in der Unterhaltung verpasst",
+      "SLA_MISSED_NEXT_RESPONSE": "SLA-Ziel für die nächste Antwort in der Unterhaltung verpasst",
+      "SLA_MISSED_RESOLUTION": "SLA-Ziel zur Lösung der Unterhaltung verpasst"
     },
     "MENU_ITEM": {
-      "MARK_AS_READ": "Mark as read",
+      "MARK_AS_READ": "Als gelesen markieren",
       "MARK_AS_UNREAD": "Als ungelesen markieren",
       "SNOOZE": "Erinnern",
       "DELETE": "Löschen",
       "MARK_ALL_READ": "Alle als gelesen markieren",
-      "DELETE_ALL": "Delete all",
-      "DELETE_ALL_READ": "Delete all read"
+      "DELETE_ALL": "Alles löschen",
+      "DELETE_ALL_READ": "Alle gelesenen löschen"
     },
     "DISPLAY_MENU": {
-      "SORT": "Sort",
-      "DISPLAY": "Display :",
+      "SORT": "Sortieren",
+      "DISPLAY": "Anzeigen:",
       "SORT_OPTIONS": {
-        "NEWEST": "Newest",
-        "OLDEST": "Oldest",
+        "NEWEST": "Neuste",
+        "OLDEST": "Älteste",
         "PRIORITY": "Priorität"
       },
       "DISPLAY_OPTIONS": {
         "SNOOZED": "Erinnern",
         "READ": "Lesen",
         "LABELS": "Labels",
-        "CONVERSATION_ID": "Conversation ID"
+        "CONVERSATION_ID": "Konversations-ID"
       }
     },
     "ALERTS": {
-      "MARK_AS_READ": "Notification marked as read",
-      "MARK_AS_UNREAD": "Notification marked as unread",
-      "SNOOZE": "Notification snoozed",
-      "DELETE": "Notification deleted",
-      "MARK_ALL_READ": "All notifications marked as read",
-      "DELETE_ALL": "All notifications deleted",
-      "DELETE_ALL_READ": "All read notifications deleted"
+      "MARK_AS_READ": "Benachrichtigung als gelesen markiert",
+      "MARK_AS_UNREAD": "Benachrichtigung als ungelesen markiert",
+      "SNOOZE": "Benachrichtigung schlummern gestellt",
+      "DELETE": "Benachrichtigung gelöscht",
+      "MARK_ALL_READ": "Alle Benachrichtigungen als gelesen markiert",
+      "DELETE_ALL": "Alle Benachrichtigungen gelöscht",
+      "DELETE_ALL_READ": "Alle gelesenen Benachrichtigungen gelöscht"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/de/inboxMgmt.json
index 2a5aa7a4143e6..947464a30cda8 100644
--- a/app/javascript/dashboard/i18n/locale/de/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/de/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Posteingänge",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> Wenn Sie eine Website oder eine Facebook-Seite mit Chatwoot verbinden, wird diese als bInbox</b> bezeichnet. Sie können unbegrenzte Posteingänge in Ihrem Chatwoot-Konto haben. </p><p Klicken Sie auf <b>Posteingang hinzufügen</b>, um eine Website oder eine Facebook-Seite zu verbinden. </p><p> Im Dashboard können Sie alle Konversationen aus all Ihren Posteingängen an einem einzigen Ort sehen und unter der Registerkarte 'Konversationen' darauf antworten. </p><p> Sie können auch zu einem Posteingang spezifische Konversationen anzeigen, indem Sie auf den Namen des Posteingangs im linken Bereich des Dashboards klicken. </p>",
+    "RECONNECTION_REQUIRED": "Ihr Posteingang ist nicht verbunden. Sie erhalten keine neuen Nachrichten, bis Sie ihn erneut autorisieren.",
+    "CLICK_TO_RECONNECT": "Klicken Sie hier, um die Verbindung wiederherzustellen.",
     "LIST": {
       "404": "Diesem Konto sind keine Posteingänge zugeordnet."
     },
@@ -43,7 +45,7 @@
         "CHOOSE_PLACEHOLDER": "Wähle eine Seite aus der Liste",
         "INBOX_NAME": "Posteingang-Name",
         "ADD_NAME": "Namen für diesen Posteingang eingeben",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Wählen Sie einen Namen für Ihren Posteingang aus",
         "PICK_A_VALUE": "Wählen Sie einen Wert aus"
       },
       "TWITTER": {
@@ -62,7 +64,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "Webhook-URL",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Bitte geben Sie Ihre Webhook-URL ein",
           "ERROR": "Bitte geben Sie eine gültige URL ein"
         },
         "CHANNEL_DOMAIN": {
@@ -112,14 +114,14 @@
           "ERROR": "Dieses Feld wird benötigt"
         },
         "API_KEY": {
-          "USE_API_KEY": "Use API Key Authentication",
-          "LABEL": "API Key SID",
-          "PLACEHOLDER": "Please enter your API Key SID",
+          "USE_API_KEY": "Verwenden Sie die API-Schlüssel-Authentifizierung",
+          "LABEL": "API-Schlüssel SID",
+          "PLACEHOLDER": "Bitte geben Sie Ihre API-Schlüssel SID ein",
           "ERROR": "Dieses Feld wird benötigt"
         },
         "API_KEY_SECRET": {
-          "LABEL": "API Key Secret",
-          "PLACEHOLDER": "Please enter your API Key Secret",
+          "LABEL": "API-Schlüssel-Geheimnis",
+          "PLACEHOLDER": "Bitte geben Sie Ihr API-Schlüssel-Geheimnis ein",
           "ERROR": "Dieses Feld wird benötigt"
         },
         "MESSAGING_SERVICE_SID": {
@@ -175,12 +177,12 @@
           },
           "API_KEY": {
             "LABEL": "API-Schlüssel",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Bitte geben Sie Ihren Bandbreiten-API-Schlüssel ein",
             "ERROR": "Dieses Feld wird benötigt"
           },
           "API_SECRET": {
             "LABEL": "API-Secret",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Bitte geben Sie Ihr Bandbreiten-API-Geheimnis ein",
             "ERROR": "Dieses Feld wird benötigt"
           },
           "APPLICATION_ID": {
@@ -239,7 +241,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Webhook-Verifizierungstoken",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "Geben Sie ein Bestätigungstoken ein, das Sie für Facebook-Webhooks konfigurieren möchten.",
           "ERROR": "Bitte geben Sie einen gültigen Wert ein."
         },
         "API_KEY": {
@@ -269,7 +271,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "Webhook-URL",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Konfigurieren Sie die URL, unter der Sie Rückrufe bei Ereignissen empfangen möchten.",
           "PLACEHOLDER": "Webhook-URL"
         },
         "SUBMIT_BUTTON": "API-Kanal erstellen",
@@ -279,7 +281,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "E-Mail-Kanal",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Integrieren Sie Ihren E-Mail-Posteingang.",
         "CHANNEL_NAME": {
           "LABEL": "Kanal Name",
           "PLACEHOLDER": "Bitte geben Sie einen Kanalnamen ein",
@@ -345,7 +347,7 @@
       "AGENTS": {
         "TITLE": "Agenten",
         "DESC": "Hier können Sie Agenten hinzufügen, um Ihren neu erstellten Posteingang zu verwalten. Nur diese ausgewählten Agenten haben Zugriff auf Ihren Posteingang. Agenten, die nicht Teil dieses Posteingangs sind, können bei der Anmeldung keine Nachrichten in diesem Posteingang sehen oder darauf antworten. <br> <b> PS: </b> Wenn Sie als Administrator Zugriff auf alle Posteingänge benötigen, sollten Sie sich als Agent zu allen von Ihnen erstellten Posteingängen hinzufügen.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Fügen Sie mindestens einen Agenten zu Ihrem neuen Posteingang hinzu",
         "PICK_AGENTS": "Agenten für den Posteingang auswählen"
       },
       "DETAILS": {
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Klicken Sie auf die Schaltfläche Einloggen mit Microsoft, um loszulegen. Sie werden zur E-Mail-Anmeldeseite weitergeleitet. Sobald Sie die angeforderten Berechtigungen angenommen haben, werden Sie zum Erstellungsschritt für den Posteingang weitergeleitet.",
         "EMAIL_PLACEHOLDER": "E-Mail-Adresse eingeben",
+        "SIGN_IN": "Mit Microsoft anmelden",
         "HELP": "Um Ihr Microsoft-Konto als Kanal hinzuzufügen, müssen Sie Ihr Microsoft-Konto authentifizieren, indem Sie auf 'Mit Microsoft anmelden' klicken ",
         "ERROR_MESSAGE": "Beim Verbinden mit Microsoft ist ein Fehler aufgetreten, bitte versuchen Sie es erneut"
       }
@@ -371,8 +374,8 @@
     "DETAILS": {
       "LOADING_FB": "Authentifizierung mit Facebook ...",
       "ERROR_FB_AUTH": "Es ist ein Fehler aufgetreten. Bitte Seite aktualisieren ...",
-      "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
-      "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
+      "ERROR_FB_UNAUTHORIZED": "Sie sind nicht berechtigt, diese Aktion auszuführen. ",
+      "ERROR_FB_UNAUTHORIZED_HELP": "Bitte stellen Sie sicher, dass Sie vollen Zugriff auf die Facebook-Seite haben. Weitere Informationen zu Facebook-Rollen finden Sie <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
       "CREATING_CHANNEL": "Erstellen Sie Ihren Posteingang ...",
       "TITLE": "Posteingangsdetails konfigurieren",
       "DESC": ""
@@ -405,21 +408,21 @@
         "DISABLED": "Deaktiviert"
       },
       "SENDER_NAME_SECTION": {
-        "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
-        "FOR_EG": "For eg:",
+        "TITLE": "Name des Absenders",
+        "SUB_TEXT": "Wählen Sie den Namen aus, der Ihren Kunden angezeigt wird, wenn sie E-Mails von Ihren Agenten erhalten.",
+        "FOR_EG": "Zum Beispiel:",
         "FRIENDLY": {
           "TITLE": "Freundlich",
           "FROM": "von",
-          "SUBTITLE": "Add the name of the agent who sent the reply in the sender name to make it friendly."
+          "SUBTITLE": "Fügen Sie den Namen des Agenten, der die Antwort gesendet hat, in den Absendernamen ein, um es freundlicher zu gestalten."
         },
         "PROFESSIONAL": {
           "TITLE": "Professionell",
-          "SUBTITLE": "Use only the configured business name as the sender name in the email header."
+          "SUBTITLE": "Verwenden Sie nur den konfigurierten Firmennamen als Absendernamen in der E-Mail-Kopfzeile."
         },
         "BUSINESS_NAME": {
-          "BUTTON_TEXT": "+ Configure your business name",
-          "PLACEHOLDER": "Enter your business name",
+          "BUTTON_TEXT": "+ Konfigurieren Sie Ihren Firmennamen",
+          "PLACEHOLDER": "Geben Sie Ihren Firmennamen ein",
           "SAVE_BUTTON_TEXT": "Speichern"
         }
       },
@@ -486,9 +489,9 @@
       "ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT": "E-Mail-Sammelbox für neue Konversation aktivieren oder deaktivieren",
       "AUTO_ASSIGNMENT": "Aktivieren Sie die automatische Zuweisung",
       "ENABLE_CSAT": "CSAT aktivieren",
-      "SENDER_NAME_SECTION": "Enable Agent Name in Email",
+      "SENDER_NAME_SECTION": "Aktivieren Sie den Agentennamen in der E-Mail",
       "ENABLE_CSAT_SUB_TEXT": "CSAT(Kundenzufriedenheit) Umfrage aktivieren/deaktivieren nach Abschluss eines Gesprächs",
-      "SENDER_NAME_SECTION_TEXT": "Enable/Disable showing Agent's name in email, if disabled it will show business name",
+      "SENDER_NAME_SECTION_TEXT": "Aktivieren/Deaktivieren Sie die Anzeige des Agentennamens in der E-Mail. Wenn deaktiviert, wird der Firmenname angezeigt",
       "ENABLE_CONTINUITY_VIA_EMAIL": "Konversationskontinuität per E-Mail aktivieren",
       "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "Konversationen werden per E-Mail fortgesetzt, wenn die Kontakt-E-Mail-Adresse verfügbar ist.",
       "LOCK_TO_SINGLE_CONVERSATION": "Merere Konversationen zulassen",
@@ -508,7 +511,7 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Nachrichten zulassen, nachdem die Konversation gelöst wurde",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Den Endbenutzern erlauben, Nachrichten zu versenden, auch wenn die Unterhaltung abgeschlossen ist.",
       "WHATSAPP_SECTION_SUBHEADER": "Dieser API Key wird für die Integration mit den WhatsApp APIs verwendet.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Geben Sie den neuen API-Schlüssel ein, der für die Integration mit den WhatsApp-APIs verwendet werden soll.",
       "WHATSAPP_SECTION_TITLE": "API-Schlüssel",
       "WHATSAPP_SECTION_UPDATE_TITLE": "API-Schlüssel aktualisieren",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Neuen API-Schlüssel hier eingeben",
@@ -569,7 +572,7 @@
       "UPDATE": "Einstellungen für Geschäftszeiten aktualisieren",
       "TOGGLE_AVAILABILITY": "Geschäftszeiten für diesen Posteingang aktivieren",
       "UNAVAILABLE_MESSAGE_LABEL": "Nachricht für Besucher außerhalb Geschäftszeiten",
-      "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours visitors can be warned with a message and a pre-chat form.",
+      "TOGGLE_HELP": "Wenn die Geschäftsverfügbarkeit aktiviert ist, werden die verfügbaren Stunden im Live-Chat-Widget angezeigt, auch wenn alle Agenten offline sind. Außerhalb der verfügbaren Stunden können Besucher mit einer Nachricht und einem Chat-Formular gewarnt werden.",
       "DAY": {
         "ENABLE": "Verfügbarkeit für diesen Tag aktivieren",
         "UNAVAILABLE": "Nicht verfügbar",
@@ -585,7 +588,7 @@
       "NOTE_TEXT": "Um SMTP zu aktivieren, konfigurieren Sie bitte IMAP.",
       "UPDATE": "IMAP-Einstellungen aktualisieren",
       "TOGGLE_AVAILABILITY": "IMAP-Konfiguration für diesen Posteingang aktivieren",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "Wenn IMAP aktiviert ist, kann der Benutzer E-Mails empfangen",
       "EDIT": {
         "SUCCESS_MESSAGE": "IMAP-Einstellungen erfolgreich aktualisiert",
         "ERROR_MESSAGE": "IMAP-Einstellungen können nicht aktualisiert werden"
diff --git a/app/javascript/dashboard/i18n/locale/de/integrations.json b/app/javascript/dashboard/i18n/locale/de/integrations.json
index f1d497717c83c..edcd79bffffa9 100644
--- a/app/javascript/dashboard/i18n/locale/de/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/de/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrationen",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Abonnierte Events",
       "FORM": {
@@ -103,7 +112,7 @@
       "CREATE_ERROR": "Beim Erstellen eines Meeting-Links ist ein Fehler aufgetreten, bitte versuchen Sie es erneut"
     },
     "OPEN_AI": {
-      "AI_ASSIST": "AI Assist",
+      "AI_ASSIST": "AI-Assistent",
       "WITH_AI": " %{option} with AI ",
       "OPTIONS": {
         "REPLY_SUGGESTION": "Reply Suggestion",
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Eine neue Dashboard-App hinzufügen",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard-Apps ermöglichen es Unternehmen, eine Anwendung in das Chatwoot-Dashboard einzubetten, um den Kontext für Kundendienstmitarbeiter bereitzustellen. Mit dieser Funktion können Sie eine Anwendung unabhängig erstellen und diese in das Dashboard einbetten, um Benutzerinformationen, ihre Bestellungen oder ihren bisherigen Zahlungsverlauf bereitzustellen.</p><p>Wenn Sie Ihre Anwendung über das Dashboard in Chatwoot einbetten, erhält Ihre Anwendung den Kontext der Unterhaltung und des Kontakts als Fensterereignis. Implementieren Sie einen Listener für das Nachrichtenereignis auf Ihrer Seite, um den Kontext zu erhalten. </p><p>Um eine neue Dashboard-App hinzuzufügen, klicken Sie auf die Schaltfläche „Neue Dashboard-App hinzufügen“.</p>",
       "DESCRIPTION": "Dashboard-Apps ermöglichen es Unternehmen, eine Anwendung in das Dashboard einzubetten, um den Kontext für Kundendienstmitarbeiter bereitzustellen. Mit dieser Funktion können Sie eine Anwendung unabhängig erstellen und diese einbetten, um Benutzerinformationen, ihre Bestellungen oder ihren bisherigen Zahlungsverlauf bereitzustellen.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Für dieses Konto sind noch keine Dashboard-Apps konfiguriert",
         "LOADING": "Dashboard-Apps werden abgerufen...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard-App erfolgreich gelöscht",
         "API_ERROR": "Wir konnten die App nicht löschen. Bitte versuchen Sie es später erneut"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Erstellen",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Erstellen Sie lineare Tickets aus Unterhaltungen oder verknüpfen Sie bestehende zur nahtlosen Verfolgung.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Titel",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Titel ist erforderlich"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Beschreibung",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Team auswählen",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Zugewiesener",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priorität",
+            "PLACEHOLDER": "Priorität auswählen",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Erstellen",
+        "CANCEL": "Stornieren",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priorität",
+        "ASSIGNEE": "Zugewiesener",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/de/labelsMgmt.json
index 5d9d599fd2156..55d977ff04cdc 100644
--- a/app/javascript/dashboard/i18n/locale/de/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/de/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Label hinzufügen",
     "LOADING": "Label werden abgerufen",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Es existieren keine Elemente, die dieser Abfrage entsprechen",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Mit Labels können Sie Konversationen kategorisieren und priorisieren. Sie können einer Konversation aus der Seitenleiste ein Label zuweisen. <br /><br />Labels sind an das Konto gebunden und können verwendet werden, um benutzerdefinierte Arbeitsabläufe in Ihrem Unternehmen zu erstellen. Sie können einen Label eine benutzerdefinierte Farbe zuordnen, um die Identifizierung des Labels zu erleichtern. Sie können das Label in der Seitenleiste anzeigen, um die Unterhaltungen einfach zu filtern.</p>",
     "LIST": {
       "404": "In diesem Konto sind keine Labels verfügbar.",
       "TITLE": "Labels verwalten",
@@ -49,7 +50,8 @@
       "DISMISS": "Verwerfen",
       "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": "Label hinzufügen",
diff --git a/app/javascript/dashboard/i18n/locale/de/macros.json b/app/javascript/dashboard/i18n/locale/de/macros.json
index ef0bb113059d1..e2a8b83ee582e 100644
--- a/app/javascript/dashboard/i18n/locale/de/macros.json
+++ b/app/javascript/dashboard/i18n/locale/de/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Ausführen",
       "PREVIEW": "Makrovorschau",
       "EXECUTED_SUCCESSFULLY": "Makro erfolgreich ausgeführt"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribut-Schlüssel ist erforderlich",
+      "FILTER_OPERATOR_REQUIRED": "Filter-Operator ist erforderlich",
+      "VALUE_REQUIRED": "Wert ist erforderlich",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Wert muss zwischen 1 und 998 liegen",
+      "ACTION_PARAMETERS_REQUIRED": "Aktionsparameter sind erforderlich",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "Mindestens eine Bedingung ist erforderlich",
+      "ATLEAST_ONE_ACTION_REQUIRED": "Mindestens eine Aktion ist erforderlich"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/de/report.json b/app/javascript/dashboard/i18n/locale/de/report.json
index ae09da88e1b65..ba5edb4fdb3cf 100644
--- a/app/javascript/dashboard/i18n/locale/de/report.json
+++ b/app/javascript/dashboard/i18n/locale/de/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Gesprächsprotokoll",
       "NO_CONVERSATIONS": "Keine Konversation",
       "CONVERSATION": "%{count} Konversation",
-      "CONVERSATIONS": "%{count} Konversationen"
+      "CONVERSATIONS": "%{count} Konversationen",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Konversationen von Agenten",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "Filter hinzufügen",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "Keine Ergebnisse gefunden",
@@ -530,12 +531,13 @@
         "LABELS": "Labelname",
         "TEAMS": "Teamname"
       },
-      "SLA": "SLA Policy",
+      "SLA": "SLA-Richtlinie",
       "INBOXES": "Posteingang",
       "AGENTS": "Agent",
       "LABELS": "Label",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/de/resetPassword.json b/app/javascript/dashboard/i18n/locale/de/resetPassword.json
index c06e4a41468bb..8923aa78d0531 100644
--- a/app/javascript/dashboard/i18n/locale/de/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/de/resetPassword.json
@@ -2,7 +2,7 @@
   "RESET_PASSWORD": {
     "TITLE": "Passwort zurücksetzen",
     "DESCRIPTION": "Geben Sie die E-Mail-Adresse ein, mit der Sie sich bei Chatwoot anmelden, um die Anweisungen zum Zurücksetzen des Passworts zu erhalten.",
-    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
+    "GO_BACK_TO_LOGIN": "Wenn Sie zur Login-Seite zurückkehren möchten",
     "EMAIL": {
       "LABEL": "E-Mail",
       "PLACEHOLDER": "Bitte geben Sie Ihre E-Mail ein.",
diff --git a/app/javascript/dashboard/i18n/locale/de/search.json b/app/javascript/dashboard/i18n/locale/de/search.json
index 28b19cea27b0d..41258ded7798f 100644
--- a/app/javascript/dashboard/i18n/locale/de/search.json
+++ b/app/javascript/dashboard/i18n/locale/de/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Gespräche",
       "MESSAGES": "Nachrichten"
     },
+    "SEARCHING_DATA": "Suchen",
     "EMPTY_STATE": "Keine %{item} für Abfrage '%{query} ' gefunden",
     "EMPTY_STATE_FULL": "Kein Ergebnis für Abfrage '%{query} ' gefunden",
     "PLACEHOLDER_KEYBINDING": "/ fokussieren",
diff --git a/app/javascript/dashboard/i18n/locale/de/settings.json b/app/javascript/dashboard/i18n/locale/de/settings.json
index e16a11344679a..af21262a8d71f 100644
--- a/app/javascript/dashboard/i18n/locale/de/settings.json
+++ b/app/javascript/dashboard/i18n/locale/de/settings.json
@@ -182,7 +182,7 @@
     "SELECTOR_SUBTITLE": "Wählen Sie ein Benutzerkonto aus der folgenden Liste",
     "PROFILE_SETTINGS": "Profileinstellungen",
     "KEYBOARD_SHORTCUTS": "Tastenkombinationen",
-    "APPEARANCE": "Change Appearance",
+    "APPEARANCE": "Aussehen ändern",
     "SUPER_ADMIN_CONSOLE": "Super-Admin Konsole",
     "LOGOUT": "Ausloggen"
   },
@@ -239,6 +239,7 @@
     "REPORTS": "Berichte",
     "SETTINGS": "Einstellungen",
     "CONTACTS": "Kontakte",
+    "CAPTAIN": "Captain",
     "HOME": "Hauptseite",
     "AGENTS": "Agenten",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Übersicht",
-    "FACEBOOK_REAUTHORIZE": "Ihre Facebook-Verbindung ist abgelaufen, bitte verbinden Sie sich erneut.",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Hilfezentrum",
       "ALL_ARTICLES": "Alle Artikel",
diff --git a/app/javascript/dashboard/i18n/locale/de/teamsSettings.json b/app/javascript/dashboard/i18n/locale/de/teamsSettings.json
index 849aff3905753..b241429f5fc1c 100644
--- a/app/javascript/dashboard/i18n/locale/de/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/de/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Neues Team erstellen",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> Mit <p>Teams können Sie Ihre Agenten basierend auf ihren Verantwortlichkeiten in Gruppen organisieren. <br /> Ein Agent kann mehreren Teams angehören. Sie können Konversationen einem Team zuweisen, wenn Sie zusammenarbeiten. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Es wurden noch keine Teams auf diesem Konto erstellt.",
-      "EDIT_TEAM": "Team bearbeiten"
+      "EDIT_TEAM": "Team bearbeiten",
+      "NONE": "Keine"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Das Team konnte nicht gelöscht werden. Versuchen Sie es erneut."
       },
       "CONFIRM": {
-        "TITLE": "Sind Sie sicher, dass Sie %{teamName} löschen möchten",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Bitte geben Sie {teamName} zur Bestätigung ein",
         "MESSAGE": "Das Löschen des Teams wird die Teamzuordnung aus den Konversationen entfernen, die diesem Team zugewiesen wurden.",
         "YES": "Löschen ",
diff --git a/app/javascript/dashboard/i18n/locale/el/advancedFilters.json b/app/javascript/dashboard/i18n/locale/el/advancedFilters.json
index 9e00b19471cce..bba5aace3a348 100644
--- a/app/javascript/dashboard/i18n/locale/el/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/el/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "AND",
       "OR": "OR"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Ίσο με",
       "not_equal_to": "Όχι ίσο με",
diff --git a/app/javascript/dashboard/i18n/locale/el/agentMgmt.json b/app/javascript/dashboard/i18n/locale/el/agentMgmt.json
index ce1b8f80ea80b..f1d3a6fcac729 100644
--- a/app/javascript/dashboard/i18n/locale/el/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/el/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Πράκτορες",
     "HEADER_BTN_TXT": "Προσθήκη Πράκτορα",
     "LOADING": "Λήψη της λίστα των Πρακτόρων",
-    "SIDEBAR_TXT": "<p><b>Πράκτορες</b></p> <p> Ένας <b>Πράκτορας</b> είναι ένα μέλος της ομάδας υποστήριξής σας. </p><p> Οι πράκτορες θα μπορούν να δουν και να απαντήσουν στα μηνύματα των χρηστών. Στην λίστα φαίνονται όλοι οι πράκτορες που συμμετέχουν στον λογαριασμό σας. </p><p> Πατήστε στο <b>Προσθήκη Πράκτορα</b> για να προσθέσετε έναν νέο. Ο πράκτορας θα λάβει ένα email με σύνδεσμο επιβεβαίωσης για να ενεργοποιήσει τον λογαριασμό του, ύστερα θα μπορούν να δουν το Chatwoot και να ανταποκρίνονται στα μηνύματά τους. </p><p> Η πρόσβαση στις δυνατότητες του Chatwoot βασίζεται στους παρακάτω ρόλους. </p><p> <b>Πράκτορας</b> - Οι χρήστες με αυτόν τον ρόλο έχουν πρόσβαση μόνο στα εισερχόμενα, αναφορές και τις συζητήσεις. Μπορούν επίσης να αναθέσουν συζητήσεις σε άλλους πράκτορες ή τον εαυτό τους και να τις ολοκληρώσουν.</p><p> <b>Διαχειριστής</b> - Ο διαχειριστής θα έχει πρόσβαση σε όλες τις δυνατότητες του Chatwoot που έχουν ενεργοποιηθεί για τον λογαριασμό, συμπεριλαμβανομένων των ρυθμίσεων της εφαρμογής, όπως επίσης και όλα τα δικαιώματα που έχει ένας πράκτορας.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Διαχειριστής",
       "AGENT": "Πράκτορας"
diff --git a/app/javascript/dashboard/i18n/locale/el/auditLogs.json b/app/javascript/dashboard/i18n/locale/el/auditLogs.json
index 9ec81359ec00e..369063d94840f 100644
--- a/app/javascript/dashboard/i18n/locale/el/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/el/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Δεν υπάρχουν αντικείμενα να ταιριάζουν με αυτό το ερώτημα",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/el/automation.json b/app/javascript/dashboard/i18n/locale/el/automation.json
index 035b7e5619310..fa3680241f10b 100644
--- a/app/javascript/dashboard/i18n/locale/el/automation.json
+++ b/app/javascript/dashboard/i18n/locale/el/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Πρέπει να έχετε τουλάχιστον μία ενέργεια για να αποθηκεύσετε",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Γράψτε το μήνυμά σας εδώ",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Επιλογή ομάδων"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Επιλογή ομάδων",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Ενεργοποίηση Κανόνα Αυτοματισμού",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Ανέβασμα...",
       "LABEL_UPLOADED": "Επιτυχής Μεταφόρτωση",
       "LABEL_UPLOAD_FAILED": "Αποτυχία Μεταφόρτωσης"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Απαιτείται τιμή",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/el/bulkActions.json b/app/javascript/dashboard/i18n/locale/el/bulkActions.json
index f69d32ea1b5fb..adce30f30fc8b 100644
--- a/app/javascript/dashboard/i18n/locale/el/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/el/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Πίσω",
     "ASSIGN_LABEL": "Αντιστοίχιση",
     "YES": "Ναι",
+    "SEARCH_INPUT_PLACEHOLDER": "Αναζήτηση",
     "ASSIGN_AGENT_TOOLTIP": "Ανάθεση σε πράκτορα",
     "ASSIGN_TEAM_TOOLTIP": "Ανάθεση ομάδας",
     "ASSIGN_SUCCESFUL": "Οι σινομιλίες αντιστοιχήθηκαν επιτυχώς.",
@@ -33,7 +34,7 @@
       "NONE": "Κανένα",
       "NO_TEAMS_AVAILABLE": "Δεν έχουν προστεθεί ομάδες σε αυτόν τον λογαριασμό ακόμα.",
       "ASSIGN_SELECTED_TEAMS": "Ανάθεση επιλεγμένης ομάδας.",
-      "ASSIGN_SUCCESFUL": "Επιτυχής ανάθεση σε ομάδα.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/el/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/el/cannedMgmt.json
index 29e8e611de2e6..d0effe63e4017 100644
--- a/app/javascript/dashboard/i18n/locale/el/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/el/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Έτοιμες Απαντήσεις",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Δεν υπάρχουν δεδομένα που να ταιριάζουν με αυτό το ερώτημα.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Δεν υπάρχουν τυποποιημένες απαντήσεις σε αυτόν τον λογαριασμό.",
       "TITLE": "Διαχείριση έτοιμων απαντήσεων",
diff --git a/app/javascript/dashboard/i18n/locale/el/contact.json b/app/javascript/dashboard/i18n/locale/el/contact.json
index 9c9a88f7302a9..24042cb1ad3b3 100644
--- a/app/javascript/dashboard/i18n/locale/el/contact.json
+++ b/app/javascript/dashboard/i18n/locale/el/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Η επαφή συγχωνεύθηκε επιτυχώς",
       "ERROR_MESSAGE": "Δεν ήταν δυνατή η συγχώνευση επαφών, προσπαθήστε ξανά!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/el/conversation.json b/app/javascript/dashboard/i18n/locale/el/conversation.json
index 0b564591a9400..dcc4e633aaf7c 100644
--- a/app/javascript/dashboard/i18n/locale/el/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/el/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter για νέα γραμμή. Ξεκινήστε με '/' για να επιλέξτε Τυποποιημένη Απάντηση.",
       "PRIVATE_MSG_INPUT": "Shift + enter για νέα γραμμή. Το κείμενο θα μπορούν να το δουν μόνο οι υπόλοιποι πράκτορες.",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Δεν έχει ρυθμιστεί η υπογραφή μηνύματος, παρακαλώ ρυθμίστε την στις ρυθμίσεις προφίλ.",
-      "CLICK_HERE": "Πατήστε εδώ για ενημέρωση"
+      "CLICK_HERE": "Πατήστε εδώ για ενημέρωση",
+      "WHATSAPP_TEMPLATES": "Πρότυπα Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Απάντηση",
diff --git a/app/javascript/dashboard/i18n/locale/el/general.json b/app/javascript/dashboard/i18n/locale/el/general.json
index 25bb4dfb736d2..a1f613aa74d4f 100644
--- a/app/javascript/dashboard/i18n/locale/el/general.json
+++ b/app/javascript/dashboard/i18n/locale/el/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": "Αναζήτηση",
+      "EMPTY_STATE": "Δεν βρέθηκαν αποτελέσματα"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/el/generalSettings.json b/app/javascript/dashboard/i18n/locale/el/generalSettings.json
index ea9e14e13748c..497783e4bcd90 100644
--- a/app/javascript/dashboard/i18n/locale/el/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/el/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Εκτός"
+      "OFFLINE": "Εκτός",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Ανανέωση"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Μέχρι αύριο",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/el/helpCenter.json b/app/javascript/dashboard/i18n/locale/el/helpCenter.json
index 9c48d47837fcf..c6ba34baefca5 100644
--- a/app/javascript/dashboard/i18n/locale/el/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/el/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/el/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/el/inboxMgmt.json
index b76b54ff5ebde..70d20001f5033 100644
--- a/app/javascript/dashboard/i18n/locale/el/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/el/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Κιβώτια Εισερχομένων",
     "SIDEBAR_TXT": "<p><b>Κιβώτιο Εισερχομένων</b></p> <p> Όταν συνδέετε μια ιστοσελίδα ή μια σελίδα του Facebook με το Chatwoot αυτό καλείται ως <b>Κιβώτιο Εισερχομένων</b>. Μπορείτε να έχετε απεριόριστα κιβώτια σε ένα λογαριασμό. </p><p> Πατήστε στο <b>Προσθήκη Κιβωτίου</b> για να συνδέετε μια ιστοσελίδα ή μια σελίδα Facebook. </p><p> Στον Πίνακα Ελέγχου (Dashboard), μπορείτε να δείτε όλες τις συνομιλίες από όλα τα κιβώτια σε ένα μέρος και να απαντήσετε στις συζητήσεις από την καρτέλα `Συνομιλίες`. </p><p> Μπορείτε επίσης να δείτε τις συνομιλίες που αφορούν ένα συγκεκριμένο κιβώτιο επιλέγοντάς το από το αριστερό τμήμα του πίνακα ελέγχου (dashboard). </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Δεν υπάρχουν κιβώτια εισερχομένων σε αυτόν τον λογαριασμό."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/el/integrations.json b/app/javascript/dashboard/i18n/locale/el/integrations.json
index 7d308f07064d9..bb73e6e00aa0a 100644
--- a/app/javascript/dashboard/i18n/locale/el/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/el/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Ενοποιήσεις",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Εγγεγραμμένα Συμβάντα",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Προσθήκη νέας εφαρμογής Dashboard",
       "SIDEBAR_TXT": "<p><b>Εφαρμογές Dashboard</b></p><p>Οι εφαρμογές Dashboard επιτρέπουν σε οργανισμούς να ενσωματώσουν μια εφαρμογή μέσα στο ταμπλό Chatwoot για να παρέχουν το πλαίσιο για τους πράκτορες υποστήριξης πελατών. Αυτό το χαρακτηριστικό σας επιτρέπει να δημιουργήσετε μια εφαρμογή ανεξάρτητα και ενσωματωμένη που μέσα στον πίνακα ελέγχου για να παρέχει πληροφορίες χρήστη, τις παραγγελίες τους, ή το ιστορικό προηγούμενων πληρωμών τους.</p><p>Όταν ενσωματώσετε την εφαρμογή σας χρησιμοποιώντας το Dashboard στο Chatwoot, η εφαρμογή σας θα πάρει το πλαίσιο της συνομιλίας και θα επικοινωνήσει ως ένα παράθυρο εκδήλωσης. Εφαρμόστε έναν ακροατή για το γεγονός του μηνύματος στη σελίδα σας για να λάβετε το πλαίσιο.</p><p>Για να προσθέσετε μια νέα εφαρμογή ταμπλό, κάντε κλικ στο κουμπί 'Προσθήκη μιας νέας εφαρμογής Dashboard'.</p>",
       "DESCRIPTION": "Οι εφαρμογές Dashboard επιτρέπουν στους οργανισμούς να ενσωματώσουν μια εφαρμογή μέσα στον πίνακα ελέγχου για να παρέχουν το περιεχόμενο για τους πράκτορες υποστήριξης πελατών. Αυτή η λειτουργία σας επιτρέπει να δημιουργήσετε μια εφαρμογή ανεξάρτητα και ενσωματωμένη που θα παρέχει πληροφορίες χρήστη, τις παραγγελίες τους, ή το ιστορικό προηγούμενων πληρωμών τους.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Δεν έχουν δημιουργηθεί εφαρμογές Dashboard για αυτόν το λογαριασμό",
         "LOADING": "Λήψη εφαρμογών dashboard ...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Η εφαρμογή dashboard διαγράφηκε επιτυχώς",
         "API_ERROR": "Δεν μπορούμε να διαγράψουμε την εφαρμογή. Παρακαλώ δοκιμάστε ξανά αργότερα"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Δημιουργία",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Σύνδεσμος",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Τίτλος",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Ο τίτλος είναι απαραίτητος"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Περιγραφή",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Ομάδα",
+            "PLACEHOLDER": "Επιλογή ομάδας",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Ετικέτα",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Κατάσταση",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Δημιουργία",
+        "CANCEL": "Άκυρο",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Κατάσταση",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Ετικέτες",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/el/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/el/labelsMgmt.json
index dbdd5a431937e..0ac079d5e69c4 100644
--- a/app/javascript/dashboard/i18n/locale/el/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/el/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Ετικέτες",
     "HEADER_BTN_TXT": "Προσθήκη Ετικέτας",
     "LOADING": "Λήψη ετικετών",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Δεν υπάρχουν αντικείμενα να ταιριάζουν με αυτό το ερώτημα",
-    "SIDEBAR_TXT": "<p><b>Ετικέτες</b> <p>Οι ετικέτες βοηθούν στην κατηγοριοποίηση των συνομιλιών, και στην απόδοση προτεραιότητας. Μπορείτε να προσθέσετε ετικέτες από το πλευρικό μενού.. <br /><br />Οι Ετικέτες είναι συνδεδεμένες με τον λογαριασμό Οι ετικέτες συνδέονται με τον λογαριασμό και μπορούν να χρησιμοποιηθούν για τη δημιουργία προσαρμοσμένων ροών εργασίας στον οργανισμό σας. Μπορείτε να αντιστοιχίσετε χρώμα σε μια ετικέτα, διευκολύνοντας τον προσδιορισμό της. Μπορείτε επίσης να εμφανίσετε την ετικέτα στην πλευρική γραμμή για να φιλτράρετε εύκολα τις συνομιλίες.</p>",
     "LIST": {
       "404": "Δεν υπάρχουν ετικέτες διαθέσιμες σε αυτόν τον λογαριασμό.",
       "TITLE": "Διαχείριση Ετικετών",
@@ -49,7 +50,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": "Προσθήκη Ετικέτας",
diff --git a/app/javascript/dashboard/i18n/locale/el/macros.json b/app/javascript/dashboard/i18n/locale/el/macros.json
index 9679aa0847d1b..624d8782eaa1a 100644
--- a/app/javascript/dashboard/i18n/locale/el/macros.json
+++ b/app/javascript/dashboard/i18n/locale/el/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Εκτέλεση",
       "PREVIEW": "Προεπισκόπηση Μακροεντολής",
       "EXECUTED_SUCCESSFULLY": "Η μακροεντολή εκτελέστηκε επιτυχώς"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Απαιτείται τιμή",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/el/report.json b/app/javascript/dashboard/i18n/locale/el/report.json
index eebefd684ac85..1aeabcb19c05f 100644
--- a/app/javascript/dashboard/i18n/locale/el/report.json
+++ b/app/javascript/dashboard/i18n/locale/el/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": "Συζητήσεις αντιπροσώπων",
@@ -536,6 +537,7 @@
       "LABELS": "Ετικέτα",
       "TEAMS": "Ομάδα"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/el/search.json b/app/javascript/dashboard/i18n/locale/el/search.json
index e52cd98dd3326..62c4db972c3ac 100644
--- a/app/javascript/dashboard/i18n/locale/el/search.json
+++ b/app/javascript/dashboard/i18n/locale/el/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Συζητήσεις",
       "MESSAGES": "Μηνύματα"
     },
+    "SEARCHING_DATA": "Αναζήτηση",
     "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/i18n/locale/el/settings.json b/app/javascript/dashboard/i18n/locale/el/settings.json
index e63cbc8d2eca9..4d62e5e1412f1 100644
--- a/app/javascript/dashboard/i18n/locale/el/settings.json
+++ b/app/javascript/dashboard/i18n/locale/el/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Αναφορές",
     "SETTINGS": "Ρυθμίσεις",
     "CONTACTS": "Επαφές",
+    "CAPTAIN": "Captain",
     "HOME": "Αρχική",
     "AGENTS": "Πράκτορες",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Επισκόπηση",
-    "FACEBOOK_REAUTHORIZE": "Η σύνδεση Facebook έχει λήξει, παρακαλώ ξανασυνδεθείτε στο Facebook για να συνεχίσετε",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "Όλα Τα Άρθρα",
diff --git a/app/javascript/dashboard/i18n/locale/el/teamsSettings.json b/app/javascript/dashboard/i18n/locale/el/teamsSettings.json
index 1cfe735cd82ac..42c975711095b 100644
--- a/app/javascript/dashboard/i18n/locale/el/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/el/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Δημιουργήσετε νέα ομάδα",
     "HEADER": "Ομάδες",
-    "SIDEBAR_TXT": "<p><b>Ομάδες</b></p> <p>Οι Ομάδες σας επιτρέπουν να οργανώσετε τους πράκτορές σας σε ομάδες με βάση τις ευθύνες τους. <br /> Ένας χρήστης μπορεί να είναι μέλος πολλαπλών ομάδων. Μπορείτε να αναθέσετε συνομιλίες σε μια ομάδα όταν εργάζεστε με συνεργασία. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Δεν έχουν δημιουργηθεί ομάδες σε αυτόν τον λογαριασμό.",
-      "EDIT_TEAM": "Επεξεργασία ομάδας"
+      "EDIT_TEAM": "Επεξεργασία ομάδας",
+      "NONE": "Κανένα"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Δεν ήταν δυνατή η διαγραφή της ομάδας. Δοκιμάστε ξανά."
       },
       "CONFIRM": {
-        "TITLE": "Είστε σίγουροι ότι θέλετε να διαγράψετε την ομάδα %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Παρακαλώ πληκτρολογήστε {teamName} για επιβεβαίωση",
         "MESSAGE": "Διαγράφοντας την ομάδα θα αφαιρέσετε και τις αναθέσεις συνομιλιών σε αυτήν την ομάδα.",
         "YES": "Διαγραφή ",
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 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/agentMgmt.json b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
index d01730ed87f41..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
@@ -33,7 +34,6 @@
           "PLACEHOLDER": "Please select a role",
           "ERROR": "Role is required"
         },
-
         "EMAIL": {
           "LABEL": "Email Address",
           "PLACEHOLDER": "Please enter an email address of the agent"
diff --git a/app/javascript/dashboard/i18n/locale/en/auditLogs.json b/app/javascript/dashboard/i18n/locale/en/auditLogs.json
index 8a3fa7715e906..263f78896efb0 100644
--- a/app/javascript/dashboard/i18n/locale/en/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/en/auditLogs.json
@@ -3,17 +3,15 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
       "404": "There are no Audit Logs available in this account.",
       "TITLE": "Manage Audit Logs",
       "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
-      "TABLE_HEADER": [
-        "Activity",
-        "Time",
-        "IP Address"
-      ]
+      "TABLE_HEADER": ["Activity", "Time", "IP Address"]
     },
     "API": {
       "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
@@ -29,7 +27,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
@@ -50,22 +49,22 @@
       "ADD": "%{agentName} created a new team (#%{id})",
       "EDIT": "%{agentName} updated a team (#%{id})",
       "DELETE": "%{agentName} deleted a team (#%{id})"
-  },
-  "MACRO": {
-    "ADD": "%{agentName} created a new macro (#%{id})",
-    "EDIT": "%{agentName} updated a macro (#%{id})",
-    "DELETE": "%{agentName} deleted a macro (#%{id})"
-  },
-  "INBOX_MEMBER": {
-    "ADD": "%{agentName} added %{user} to the inbox(#%{inbox_id})",
-    "REMOVE": "%{agentName} removed %{user} from the inbox(#%{inbox_id})"
-  },
-  "TEAM_MEMBER": {
-    "ADD": "%{agentName} added %{user} to the team(#%{team_id})",
-    "REMOVE": "%{agentName} removed %{user} from the team(#%{team_id})"
-  },
-  "ACCOUNT": {
-    "EDIT": "%{agentName} updated the account configuration (#%{id})"
+    },
+    "MACRO": {
+      "ADD": "%{agentName} created a new macro (#%{id})",
+      "EDIT": "%{agentName} updated a macro (#%{id})",
+      "DELETE": "%{agentName} deleted a macro (#%{id})"
+    },
+    "INBOX_MEMBER": {
+      "ADD": "%{agentName} added %{user} to the inbox(#%{inbox_id})",
+      "REMOVE": "%{agentName} removed %{user} from the inbox(#%{inbox_id})"
+    },
+    "TEAM_MEMBER": {
+      "ADD": "%{agentName} added %{user} to the team(#%{team_id})",
+      "REMOVE": "%{agentName} removed %{user} from the team(#%{team_id})"
+    },
+    "ACCOUNT": {
+      "EDIT": "%{agentName} updated the account configuration (#%{id})"
+    }
   }
 }
-}
diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index 469df1c24ef40..a933b185339b6 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -39,12 +39,7 @@
       }
     },
     "LIST": {
-      "TABLE_HEADER": [
-        "Name",
-        "Description",
-        "Active",
-        "Created on"
-      ],
+      "TABLE_HEADER": ["Name", "Description", "Active", "Created on"],
       "404": "No automation rules found"
     },
     "DELETE": {
@@ -93,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",
@@ -113,6 +110,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/bulkActions.json b/app/javascript/dashboard/i18n/locale/en/bulkActions.json
index aa5829b8d437a..dbf37defba0f6 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/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
index 71a334d87a932..7721cc3e68422 100644
--- a/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
@@ -1,15 +1,20 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
       "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
-      "TABLE_HEADER": ["Short code", "Content", "Actions"]
+      "TABLE_HEADER": [
+        "Short code",
+        "Content",
+        "Actions"
+      ]
     },
     "ADD": {
       "TITLE": "Add canned response",
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 4db7fce93e026..882643434b3e4 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 742a3657e8560..34fa349814112 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",
@@ -240,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/en/general.json b/app/javascript/dashboard/i18n/locale/en/general.json
index 25bb4dfb736d2..78e97db906a40 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 6c4238b92d9d1..5d77c21aa2cf0 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/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 82e6e7c2b9cd3..eec8ccde6085e 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -379,6 +379,7 @@
     },
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
+      "ERROR_FB_LOADING": "Error loading Facebook SDK. Please disable any ad-blockers and try again from a different browser.",
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
       "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
       "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 6e052949c9176..47349d1b19abf 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -37,7 +46,10 @@
       "LIST": {
         "404": "There are no webhooks configured for this account.",
         "TITLE": "Manage webhooks",
-        "TABLE_HEADER": ["Webhook endpoint", "Actions"]
+        "TABLE_HEADER": [
+          "Webhook endpoint",
+          "Actions"
+        ]
       },
       "EDIT": {
         "BUTTON_TEXT": "Edit",
@@ -166,10 +178,14 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
-        "TABLE_HEADER": ["Name", "Endpoint"],
+        "TABLE_HEADER": [
+          "Name",
+          "Endpoint"
+        ],
         "EDIT_TOOLTIP": "Edit app",
         "DELETE_TOOLTIP": "Delete app"
       },
diff --git a/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
index 978592c8347dc..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
@@ -3,13 +3,18 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
       "DESC": "Labels let you group the conversations together.",
-      "TABLE_HEADER": ["Name", "Description", "Color"]
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Color"
+      ]
     },
     "FORM": {
       "NAME": {
@@ -45,7 +50,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/macros.json b/app/javascript/dashboard/i18n/locale/en/macros.json
index 28c4660aaba06..246d60c26760c 100644
--- a/app/javascript/dashboard/i18n/locale/en/macros.json
+++ b/app/javascript/dashboard/i18n/locale/en/macros.json
@@ -68,6 +68,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 172e5501d43dd..da2df93e545c4 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 107e64fd8a614..546982b364f4d 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/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 445b7244e0c8e..dabbff89fb2b9 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -145,7 +145,11 @@
       },
       "AVAILABILITY": {
         "LABEL": "Availability",
-        "STATUSES_LIST": ["Online", "Busy", "Offline"],
+        "STATUSES_LIST": [
+          "Online",
+          "Busy",
+          "Offline"
+        ],
         "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
         "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
       },
@@ -235,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
diff --git a/app/javascript/dashboard/i18n/locale/en/sla.json b/app/javascript/dashboard/i18n/locale/en/sla.json
index f32f24b61a035..0da7873beb9a6 100644
--- a/app/javascript/dashboard/i18n/locale/en/sla.json
+++ b/app/javascript/dashboard/i18n/locale/en/sla.json
@@ -1,6 +1,6 @@
 {
   "SLA": {
-    "HEADER": "SLA",
+    "HEADER": "Service Level Agreements",
     "ADD_ACTION": "Add SLA",
     "ADD_ACTION_LONG": "Create a new SLA Policy",
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
@@ -105,4 +105,4 @@
       "HIDE": "Hide {count} rows"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/teamsSettings.json b/app/javascript/dashboard/i18n/locale/en/teamsSettings.json
index 50dcb780d7d50..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/en/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -85,7 +88,6 @@
       "BUTTON_TEXT": "Add agents",
       "AGENT_VALIDATION_ERROR": "Select at least one agent."
     },
-
     "FINISH": {
       "TITLE": "Your team is ready!",
       "MESSAGE": "You can now collaborate as a team on conversations. Happy supporting ",
@@ -98,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/es/advancedFilters.json b/app/javascript/dashboard/i18n/locale/es/advancedFilters.json
index 42d7df470829f..892a1ae62fcda 100644
--- a/app/javascript/dashboard/i18n/locale/es/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/es/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "Y",
       "OR": "O"
     },
+    "INPUT_PLACEHOLDER": "Introducir valor",
     "OPERATOR_LABELS": {
       "equal_to": "Igual a",
       "not_equal_to": "No igual a",
diff --git a/app/javascript/dashboard/i18n/locale/es/agentMgmt.json b/app/javascript/dashboard/i18n/locale/es/agentMgmt.json
index 65c71df289610..a8bb0970a2772 100644
--- a/app/javascript/dashboard/i18n/locale/es/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/es/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agentes",
     "HEADER_BTN_TXT": "Añadir agente",
     "LOADING": "Se están listando los agentes",
-    "SIDEBAR_TXT": "<p><b>Agentes</b></p> <p> Un <b>Agente</b> es miembro de su equipo de Atención al Cliente. </p><p> Los agentes podrán ver y responder a los mensajes de sus usuarios. La lista muestra todos los agentes actualmente en su cuenta. </p><p> Haga clic en <b>Añadir agente</b> para añadir un nuevo agente. El agente que añada recibirá un correo electrónico con un enlace de confirmación para activar la cuenta, después de lo cual podrá acceder a Chatwoot y responder los mensajes. </p><p> El acceso a las características de Chatwoot se basa en los siguientes roles. </p><p> <b>Agente</b> - Los agentes con este rol solamente pueden acceder a bandejas, informes y conversaciones. Pueden asignar conversaciones a otros agentes o a sí mismos y resolver conversaciones.</p><p> <b>Administrador</b> - El administrador tendrá acceso a todas las características de Chatwoot habilitadas para su cuenta, incluyendo configuración y facturación, junto con todos los privilegios de los agentes normales.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrador",
       "AGENT": "Agente"
diff --git a/app/javascript/dashboard/i18n/locale/es/auditLogs.json b/app/javascript/dashboard/i18n/locale/es/auditLogs.json
index 4e96ba4e0233f..57e026dfac502 100644
--- a/app/javascript/dashboard/i18n/locale/es/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/es/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Auditoría de registros",
     "HEADER_BTN_TXT": "Añadir registros de auditoría",
     "LOADING": "Obteniendo registros de auditoría",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "No hay elementos que coincidan con esta consulta",
     "SIDEBAR_TXT": "<p><b>Registros de auditoría</b> </p><p> Registros de auditoría son pistas para eventos y acciones en un Sistema de Chatwoot </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invitó a %{invitee} a la cuenta como %{role}",
       "EDIT": {
         "SELF": "%{agentName} cambió su %{attributes} por %{values}",
-        "OTHER": "%{agentName} cambió %{attributes} de %{user} a %{values}"
+        "OTHER": "%{agentName} cambió %{attributes} de %{user} a %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/es/automation.json b/app/javascript/dashboard/i18n/locale/es/automation.json
index 89dd971a93b18..f50fd901106aa 100644
--- a/app/javascript/dashboard/i18n/locale/es/automation.json
+++ b/app/javascript/dashboard/i18n/locale/es/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Necesitas tener al menos una acción para guardar",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Introduzca su mensaje aquí",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Seleccionar equipos"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Seleccionar equipos",
+      "EMAIL_INPUT_PLACEHOLDER": "Introducir email",
+      "URL_INPUT_PLACEHOLDER": "Introducir URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Activar regla de automatización",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Subiendo...",
       "LABEL_UPLOADED": "Subido correctamente",
       "LABEL_UPLOAD_FAILED": "Error al subir"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Clave de atributo es requerida",
+      "FILTER_OPERATOR_REQUIRED": "El operador de filtro es requerido",
+      "VALUE_REQUIRED": "El valor es requerido",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/bulkActions.json b/app/javascript/dashboard/i18n/locale/es/bulkActions.json
index 72c40ad987856..c97e0005b54be 100644
--- a/app/javascript/dashboard/i18n/locale/es/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/es/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Volver",
     "ASSIGN_LABEL": "Asignar",
     "YES": "Si",
+    "SEARCH_INPUT_PLACEHOLDER": "Buscar",
     "ASSIGN_AGENT_TOOLTIP": "Asignar un agente",
     "ASSIGN_TEAM_TOOLTIP": "Asignar equipo",
     "ASSIGN_SUCCESFUL": "Conversaciones asignadas con éxito.",
diff --git a/app/javascript/dashboard/i18n/locale/es/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/es/cannedMgmt.json
index 3c468c3347b62..490e135106bf2 100644
--- a/app/javascript/dashboard/i18n/locale/es/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/es/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Respuestas predefinidas",
+    "LEARN_MORE": "Más información sobre respuestas predefinidas",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Añadir respuesta predefinida",
     "LOADING": "Obteniendo respuestas predefinidas...",
     "SEARCH_404": "No hay elementos que coincidan con esta consulta.",
-    "SIDEBAR_TXT": "<p><b>Respuestas predefinidas</b> </p><p> Las respuestas preparadas son plantillas de respuesta escritas previamente que le ayudan a responder rápidamente a una conversación. Para insertar una respuesta predeterminada durante un chat, los agentes pueden escribir un código corto precedido por un carácter '/'. </p><p>Puedes administrar tus respuestas predeterminadas desde esta página o crear otras nuevas usando el botón \"Agregar respuesta predeterminada\".</p><p>Abre el <a target=\"_blank\" href=\"https: //www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Manual de respuestas predefinidas</a> en otra pestaña para recibir ayuda.</p><p>Además, consulte la nueva <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank \">Biblioteca de respuestas preparadas</a>.</p>",
     "LIST": {
       "404": "No hay respuestas enlatadas disponibles en esta cuenta.",
       "TITLE": "Administrar respuestas predefinidas",
diff --git a/app/javascript/dashboard/i18n/locale/es/contact.json b/app/javascript/dashboard/i18n/locale/es/contact.json
index 5fb0bb5ce6c72..681211027c168 100644
--- a/app/javascript/dashboard/i18n/locale/es/contact.json
+++ b/app/javascript/dashboard/i18n/locale/es/contact.json
@@ -84,7 +84,7 @@
     "CONFIRM": {
       "TITLE": "Exportar contactos",
       "MESSAGE": "¿Está seguro que desea exportar todos los contactos?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
+      "FILTERED_MESSAGE": "¿Está seguro que desea exportar todos los contactos filtrados?",
       "YES": "Sí, exportar",
       "NO": "No, cancelar"
     }
@@ -298,8 +298,8 @@
     "BUTTON": "Añadir atributo personalizado",
     "NOT_AVAILABLE": "No hay atributos personalizados disponibles para este contacto.",
     "COPY_SUCCESSFUL": "Copiado al portapapeles satisfactoriamente",
-    "SHOW_MORE": "Show all attributes",
-    "SHOW_LESS": "Show less attributes",
+    "SHOW_MORE": "Mostrar todos los atributos",
+    "SHOW_LESS": "Mostrar menos atributos",
     "ACTIONS": {
       "COPY": "Copiar atributo",
       "DELETE": "Eliminar atributo",
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contacto fusionado con éxito",
       "ERROR_MESSAGE": "No se pudo combinar los contactos, ¡inténtalo de nuevo!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/conversation.json b/app/javascript/dashboard/i18n/locale/es/conversation.json
index 1f2a4bccbb3ea..53f870d5ba922 100644
--- a/app/javascript/dashboard/i18n/locale/es/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/es/conversation.json
@@ -69,8 +69,8 @@
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
         "RT": "RT {status}",
-        "MISSED": "missed",
-        "DUE": "due"
+        "MISSED": "perdido",
+        "DUE": "vencido"
       }
     },
     "RESOLVE_DROPDOWN": {
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter for new line. Comience con '/' para seleccionar una respuesta predefinida.",
       "PRIVATE_MSG_INPUT": "Mayús + entrar para una nueva línea. Esto será visible sólo para los agentes",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "La firma del mensaje no está configurada, por favor configúrela en la configuración del perfil.",
-      "CLICK_HERE": "Haga clic aquí para actualizar"
+      "CLICK_HERE": "Haga clic aquí para actualizar",
+      "WHATSAPP_TEMPLATES": "Plantillas de Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Responder",
diff --git a/app/javascript/dashboard/i18n/locale/es/datePicker.json b/app/javascript/dashboard/i18n/locale/es/datePicker.json
index 64b38b91d808a..c3c7797461e3c 100644
--- a/app/javascript/dashboard/i18n/locale/es/datePicker.json
+++ b/app/javascript/dashboard/i18n/locale/es/datePicker.json
@@ -1,13 +1,13 @@
 {
   "DATE_PICKER": {
     "APPLY_BUTTON": "Aplicar",
-    "CLEAR_BUTTON": "Clear",
+    "CLEAR_BUTTON": "Limpiar",
     "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
+      "START": "Fecha de inicio",
+      "END": "Fecha de fin"
     },
     "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
+      "TITLE": "Rango de fecha",
       "LAST_7_DAYS": "Últimos 7 días",
       "LAST_30_DAYS": "Últimos 30 días",
       "LAST_3_MONTHS": "Últimos 3 meses",
diff --git a/app/javascript/dashboard/i18n/locale/es/general.json b/app/javascript/dashboard/i18n/locale/es/general.json
index 25bb4dfb736d2..20d218464bdfb 100644
--- a/app/javascript/dashboard/i18n/locale/es/general.json
+++ b/app/javascript/dashboard/i18n/locale/es/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+    "SHOWING_RESULTS": "Mostrando {firstIndex}-{lastIndex} de {totalCount} elementos",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Buscar",
+      "EMPTY_STATE": "No se encontraron resultados"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/generalSettings.json b/app/javascript/dashboard/i18n/locale/es/generalSettings.json
index 63a9b7b0b59b5..6fdbc000dd1d8 100644
--- a/app/javascript/dashboard/i18n/locale/es/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/es/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Fuera de línea"
+      "OFFLINE": "Fuera de línea",
+      "RECONNECTING": "Reconectando...",
+      "RECONNECT_SUCCESS": "Reconectado"
     },
     "BUTTON": {
       "REFRESH": "Actualizar"
@@ -107,7 +109,7 @@
       "GENERAL": "General",
       "REPORTS": "Informes",
       "CONVERSATION": "Conversación",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "Acciones masivas",
       "CHANGE_ASSIGNEE": "Cambiar Asignado",
       "CHANGE_PRIORITY": "Cambiar prioridad",
       "CHANGE_TEAM": "Cambiar equipo",
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Hasta mañana",
       "UNTIL_NEXT_MONTH": "Hasta el mes próximo",
       "AN_HOUR_FROM_NOW": "Hasta una hora a partir de ahora",
-      "CUSTOM": "Personalizar...",
+      "UNTIL_CUSTOM_TIME": "Personalizar...",
       "CHANGE_APPEARANCE": "Cambiar apariencia",
       "LIGHT_MODE": "Claro",
       "DARK_MODE": "Oscuro",
diff --git a/app/javascript/dashboard/i18n/locale/es/helpCenter.json b/app/javascript/dashboard/i18n/locale/es/helpCenter.json
index 6937412caccaa..9073e5842eb8c 100644
--- a/app/javascript/dashboard/i18n/locale/es/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/es/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Utilice el portal como un CMS sin cabeceras con frameworks front-end de terceros usando nuestras APIs."
         }
       }
-    }
+    },
+    "LOADING": "Cargando..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/es/inboxMgmt.json
index 2391d4462a627..ecbac3d75ec43 100644
--- a/app/javascript/dashboard/i18n/locale/es/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/es/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Entradas",
     "SIDEBAR_TXT": "<p><b>Bandeja de entrada</b></p> <p> Cuando conecta un sitio web o una página de Facebook a Chatwoot, se llama una <b>Bandeja de entrada</b>. Puede tener bandejas de entrada ilimitadas en su cuenta de Chatwoot. </p><p> Haga clic en <b>Añadir bandeja de entrada</b> para conectar un sitio web o una página de Facebook. </p><p> en el panel, puede ver todas las conversaciones de todas su bandejas de entrada en un solo lugar y responder a ellas en la pestaña `Conversaciones`. </p><p> También puede ver conversaciones específicas de una bandeja de entrada haciendo clic en el nombre de la bandeja de entrada en el menú izquierdo del panel. </p>",
+    "RECONNECTION_REQUIRED": "Tu bandeja de entrada está desconectada. No recibirás mensajes nuevos hasta que lo vuelvas a autorizar.",
+    "CLICK_TO_RECONNECT": "Haga clic aquí para volver a conectar.",
     "LIST": {
       "404": "No hay entradas adjuntas a esta cuenta."
     },
@@ -22,7 +24,7 @@
         "body": "Añadir agentes a la bandeja de entrada creada."
       },
       {
-        "title": "Voilà!",
+        "title": "Voilà!",
         "route": "settings_inbox_finish",
         "body": "¡Todo está listo!"
       }
@@ -43,7 +45,7 @@
         "CHOOSE_PLACEHOLDER": "Seleccione una página de la lista",
         "INBOX_NAME": "Nombre de la bandeja de entrada",
         "ADD_NAME": "Añada un nombre para su bandeja de entrada",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Elija un nombre para su bandeja de entrada",
         "PICK_A_VALUE": "Elija un valor"
       },
       "TWITTER": {
@@ -62,7 +64,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "URL de Webhook",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Por favor, introduzca su URL de Webhook",
           "ERROR": "Por favor, introduzca una URL válida"
         },
         "CHANNEL_DOMAIN": {
@@ -175,12 +177,12 @@
           },
           "API_KEY": {
             "LABEL": "Clave de API",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Por favor, introduzca su clave API de Bandwith",
             "ERROR": "Este campo es obligatorio"
           },
           "API_SECRET": {
             "LABEL": "API secreta",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Por favor ingrese su Bandwith API Secret",
             "ERROR": "Este campo es obligatorio"
           },
           "APPLICATION_ID": {
@@ -239,7 +241,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Token de verificación del Webhook",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "Introduzca un token de verificación que desea configurar para los webhooks de facebook.",
           "ERROR": "Por favor, introduzca un valor válido."
         },
         "API_KEY": {
@@ -269,7 +271,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "URL de Webhook",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Configure la URL donde recibirá las respuestas a los eventos.",
           "PLACEHOLDER": "URL de Webhook"
         },
         "SUBMIT_BUTTON": "Crear canal de API",
@@ -279,7 +281,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Canal de Email",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Integre su bandeja de entrada del email.",
         "CHANNEL_NAME": {
           "LABEL": "Nombre del canal",
           "PLACEHOLDER": "Por favor, introduzca un nombre de canal",
@@ -345,7 +347,7 @@
       "AGENTS": {
         "TITLE": "Agentes",
         "DESC": "Aquí puede agregar agentes para administrar su recién creada bandeja de entrada. Sólo estos agentes seleccionados tendrán acceso a su bandeja de entrada. Los agentes que no forman parte de esta bandeja de entrada no podrán ver o responder a los mensajes de esta bandeja de entrada cuando inicien sesión. <br> <b>PS:</b> Como administrador, si necesita acceso a todas las bandejas, debes añadirte como agente a todas las bandejas de entrada que crees.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Añade al menos un agente a tu nueva bandeja de entrada",
         "PICK_AGENTS": "Elegir agentes para la bandeja de entrada"
       },
       "DETAILS": {
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Haga clic en el botón Iniciar sesión con Microsoft para empezar. Serás redirigido a la página de inicio de sesión de correo electrónico. Una vez que aceptes los permisos solicitados, serás redirigido al paso de creación de la bandeja de entrada.",
         "EMAIL_PLACEHOLDER": "Introduzca la dirección de correo",
+        "SIGN_IN": "Iniciar sesión con Microsoft",
         "HELP": "Para añadir su cuenta de Microsoft como un canal, debe autenticar su cuenta de Microsoft haciendo clic en 'Iniciar sesión con Microsoft' ",
         "ERROR_MESSAGE": "Hubo un error al conectarse a Microsoft, por favor inténtalo de nuevo"
       }
@@ -406,7 +409,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Nombre del remitente",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Seleccione el nombre que se muestra al cliente cuando reciba correos electrónicos de sus agentes.",
         "FOR_EG": "Por ejemplo:",
         "FRIENDLY": {
           "TITLE": "Amigable",
@@ -508,7 +511,7 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Permitir mensajes después de la conversación resuelta",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Permitir a los usuarios finales enviar mensajes incluso después de que la conversación sea resuelta.",
       "WHATSAPP_SECTION_SUBHEADER": "Esta clave de API se utiliza para la integración con las APIs de WhatsApp.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Introduzca la clave actualizada para la integración con las API de WhatsApp.",
       "WHATSAPP_SECTION_TITLE": "Clave de API",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Actualizar Clave API",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Introduzca aquí la nueva Clave API",
@@ -585,7 +588,7 @@
       "NOTE_TEXT": "Para habilitar SMTP, por favor configure IMAP.",
       "UPDATE": "Actualizar ajustes IMAP",
       "TOGGLE_AVAILABILITY": "Habilitar configuración IMAP para esta bandeja de entrada",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "Habilitar IMAP ayudará al usuario a recibir correo electrónico",
       "EDIT": {
         "SUCCESS_MESSAGE": "Configuración IMAP actualizada correctamente",
         "ERROR_MESSAGE": "No se puede actualizar la configuración IMAP"
diff --git a/app/javascript/dashboard/i18n/locale/es/integrations.json b/app/javascript/dashboard/i18n/locale/es/integrations.json
index abbe73c585a11..951f99bc531b5 100644
--- a/app/javascript/dashboard/i18n/locale/es/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/es/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integraciones",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Más información acerca de integraciones",
+    "LOADING": "Obteniendo integraciones",
+    "CAPTAIN": {
+      "DISABLED": "El capitán no está habilitado en tu cuenta.",
+      "CLICK_HERE_TO_CONFIGURE": "Haz clic aquí para configurar",
+      "LOADING_CONSOLE": "Cargando consola del capitán...",
+      "FAILED_TO_LOAD_CONSOLE": "No se pudo cargar la consola del capitán. Por favor, actualiza e inténtalo de nuevo."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Eventos suscritos",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Añadir una nueva aplicación",
       "SIDEBAR_TXT": "<p><b>Aplicaciones de panel</b></p><p>Aplicaciones de panel de control permiten a las organizaciones incrustar una aplicación dentro del panel de control de Chatwoot para proporcionar el contexto para los agentes de atención al cliente. Esta característica le permite crear una aplicación de forma independiente e incrustarla dentro del panel de control para proporcionar información de usuario, sus pedidos, o su historial de pagos anterior.</p><p>Cuando incrustas tu aplicación usando el panel de control en Chatwoot, tu aplicación obtendrá el contexto de la conversación y el contacto como un evento de ventana. Implementa un oyente para el evento del mensaje en tu página para recibir el contexto.</p><p>Para añadir una nueva aplicación de panel, haga clic en el botón 'Añadir una nueva aplicación de panel'.</p>",
       "DESCRIPTION": "Las aplicaciones de panel permiten a las organizaciones incrustar una aplicación dentro del panel de control para proporcionar el contexto para los agentes de soporte al cliente. Esta función le permite crear una aplicación de forma independiente e incrustada para proporcionar información de usuario, sus pedidos o su historial de pagos anterior.",
+      "LEARN_MORE": "Aprende más sobre el panel de aplicaciones",
       "LIST": {
         "404": "Todavía no hay aplicaciones configuradas en esta cuenta",
         "LOADING": "Obteniendo aplicaciones del tablero...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Panel de control eliminado con éxito",
         "API_ERROR": "No pudimos eliminar la aplicación. Por favor, inténtalo de nuevo más tarde"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Crear/Enlazar Problema Linear",
+      "LOADING": "Cargando problemas lineales...",
+      "LOADING_ERROR": "Hubo un error al recuperar los problemas lineales, por favor inténtalo de nuevo",
+      "CREATE": "Crear",
+      "LINK": {
+        "SEARCH": "Buscar problemas",
+        "SELECT": "Seleccionar problema",
+        "TITLE": "Enlace",
+        "EMPTY_LIST": "No se encontraron problemas lineales",
+        "LOADING": "Cargando",
+        "ERROR": "Hubo un error al recuperar los problemas lineales, por favor inténtalo de nuevo",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Título",
+            "PLACEHOLDER": "Introducir título",
+            "REQUIRED_ERROR": "El título es obligatorio"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Descripción",
+            "PLACEHOLDER": "Introducir descripción"
+          },
+          "TEAM": {
+            "LABEL": "Equipo",
+            "PLACEHOLDER": "Seleccionar equipo",
+            "SEARCH": "Buscar equipos",
+            "REQUIRED_ERROR": "El equipo es requerido"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Cesionario",
+            "PLACEHOLDER": "Seleccionar asignado",
+            "SEARCH": "Buscar asignado"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioridad",
+            "PLACEHOLDER": "Seleccionar prioridad",
+            "SEARCH": "Buscar prioridad"
+          },
+          "LABEL": {
+            "LABEL": "Etiqueta",
+            "PLACEHOLDER": "Seleecionar etiqueta",
+            "SEARCH": "Buscar etiqueta"
+          },
+          "STATUS": {
+            "LABEL": "Estado",
+            "PLACEHOLDER": "Seleccionar estado",
+            "SEARCH": "Buscar estado"
+          },
+          "PROJECT": {
+            "LABEL": "Proyecto",
+            "PLACEHOLDER": "Seleccionar proyecto",
+            "SEARCH": "Buscar proyecto"
+          }
+        },
+        "CREATE": "Crear",
+        "CANCEL": "Cancelar",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Estado",
+        "PRIORITY": "Prioridad",
+        "ASSIGNEE": "Cesionario",
+        "LABELS": "Etiquetas",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Desenlazar",
+        "SUCCESS": "Problema desvinculado con éxito",
+        "ERROR": "Se ha producido un error al desvincular el problema, inténtelo de nuevo"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/es/labelsMgmt.json
index 50fce31e8b7bd..1d46a88ce0f03 100644
--- a/app/javascript/dashboard/i18n/locale/es/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/es/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiquetas",
     "HEADER_BTN_TXT": "Añadir etiqueta",
     "LOADING": "Obteniendo etiquetas",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "No hay elementos que coincidan con esta consulta",
-    "SIDEBAR_TXT": "<p><b>Etiquetas</b> <p>Las etiquetas le ayudan a categorizar las conversaciones y priorizarlas. Puede asignar la etiqueta a una conversación desde el panel lateral. <br /><br />Las etiquetas están vinculadas a la cuenta y pueden utilizarse para crear flujos de trabajo personalizados en su organización. Puede asignar un color personalizado a una etiqueta, hace más fácil identificarla. Podrá mostrar la etiqueta en la barra lateral para filtrar las conversaciones fácilmente.</p>",
     "LIST": {
       "404": "No hay etiquetas disponibles en esta cuenta.",
       "TITLE": "Gestionar etiquetas",
@@ -49,7 +50,8 @@
       "DISMISS": "Descartar",
       "ADD_SELECTED_LABELS": "Asignar etiquetas seleccionadas",
       "ADD_SELECTED_LABEL": "Añadir etiqueta seleccionada",
-      "ADD_ALL_LABELS": "Añadir todas las etiquetas"
+      "ADD_ALL_LABELS": "Añadir todas las etiquetas",
+      "SUGGESTED_LABELS": "Etiquetas sugeridas"
     },
     "ADD": {
       "TITLE": "Añadir etiqueta",
diff --git a/app/javascript/dashboard/i18n/locale/es/macros.json b/app/javascript/dashboard/i18n/locale/es/macros.json
index c9a74ceea8d3e..251020ce5e535 100644
--- a/app/javascript/dashboard/i18n/locale/es/macros.json
+++ b/app/javascript/dashboard/i18n/locale/es/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Ejecutar",
       "PREVIEW": "Previsualizar macro",
       "EXECUTED_SUCCESSFULLY": "Macro ejecutado correctamente"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Clave de atributo es requerida",
+      "FILTER_OPERATOR_REQUIRED": "El operador de filtro es requerido",
+      "VALUE_REQUIRED": "El valor es requerido",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/report.json b/app/javascript/dashboard/i18n/locale/es/report.json
index dac3cc3392eae..0eae29ba352f2 100644
--- a/app/javascript/dashboard/i18n/locale/es/report.json
+++ b/app/javascript/dashboard/i18n/locale/es/report.json
@@ -140,7 +140,7 @@
     ],
     "BUSINESS_HOURS": "Horarios",
     "FILTER_ACTIONS": {
-      "CLEAR_FILTER": "Clear filter",
+      "CLEAR_FILTER": "Limpiar filtros",
       "EMPTY_LIST": "No se encontraron resultados"
     }
   },
@@ -481,7 +481,8 @@
       "HEADER": "Tráfico de Conversación",
       "NO_CONVERSATIONS": "No hay conversaciones",
       "CONVERSATION": "%{count} conversación",
-      "CONVERSATIONS": "%{count} conversaciones"
+      "CONVERSATIONS": "%{count} conversaciones",
+      "DOWNLOAD_REPORT": "Descargar reporte"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversaciones por agentes",
@@ -511,20 +512,20 @@
     "SATURDAY": "Sábado"
   },
   "SLA_REPORTS": {
-    "HEADER": "SLA Reports",
+    "HEADER": "Informes de SLA",
     "NO_RECORDS": "SLA applied conversations are not available.",
     "LOADING": "Loading SLA data...",
-    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_SLA_REPORTS": "Descargar reportes de SLA",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
       "ADD_FIlTER": "Añadir Filtro",
-      "CLEAR_ALL": "Clear all",
-      "CLEAR_FILTER": "Clear filter",
+      "CLEAR_ALL": "Limpiar todo",
+      "CLEAR_FILTER": "Limpiar filtros",
       "EMPTY_LIST": "No se encontraron resultados",
-      "NO_FILTER": "No filters available",
-      "SEARCH": "Search filter",
+      "NO_FILTER": "No hay filtros disponibles",
+      "SEARCH": "Buscar filtro",
       "INPUT_PLACEHOLDER": {
-        "SLA": "SLA name",
+        "SLA": "Nombre de SLA",
         "AGENTS": "Nombre del agente",
         "INBOXES": "Nombre de la bandeja de entrada",
         "LABELS": "Nombre de la etiqueta",
@@ -536,6 +537,7 @@
       "LABELS": "Etiqueta",
       "TEAMS": "Equipo"
     },
+    "WITH": "con",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
@@ -546,17 +548,17 @@
         "TOOLTIP": "Total SLA misses in a certain period"
       },
       "NO_OF_CONVERSATIONS": {
-        "LABEL": "Number of Conversations",
+        "LABEL": "Número de conversaciones",
         "TOOLTIP": "Total number of conversations with SLA"
       }
     },
     "TABLE": {
       "HEADER": {
-        "POLICY": "Policy",
+        "POLICY": "Política",
         "CONVERSATION": "Conversación",
         "AGENT": "Agente"
       },
-      "VIEW_DETAILS": "View Details"
+      "VIEW_DETAILS": "Ver detalles"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/es/search.json b/app/javascript/dashboard/i18n/locale/es/search.json
index 7ba67702e26f9..4a419f8ad5f1b 100644
--- a/app/javascript/dashboard/i18n/locale/es/search.json
+++ b/app/javascript/dashboard/i18n/locale/es/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversaciones",
       "MESSAGES": "Mensajes"
     },
+    "SEARCHING_DATA": "Buscando",
     "EMPTY_STATE": "Ningún %{item} encontrado para la consulta '%{query}'",
     "EMPTY_STATE_FULL": "No se han encontrado resultados para la consulta '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ para enfocar",
diff --git a/app/javascript/dashboard/i18n/locale/es/settings.json b/app/javascript/dashboard/i18n/locale/es/settings.json
index b03322a99b46b..f0e2d53df215c 100644
--- a/app/javascript/dashboard/i18n/locale/es/settings.json
+++ b/app/javascript/dashboard/i18n/locale/es/settings.json
@@ -10,7 +10,7 @@
     "PASSWORD_UPDATE_SUCCESS": "Su contraseña se ha cambiado correctamente",
     "AFTER_EMAIL_CHANGED": "Su perfil ha sido actualizado con éxito, por favor inicie sesión de nuevo cuando sus credenciales de inicio de sesión se hayan cambiado",
     "FORM": {
-      "PICTURE": "Profile Picture",
+      "PICTURE": "Foto de perfil",
       "AVATAR": "Imagen de perfil",
       "ERROR": "Por favor, corrija los errores de formulario",
       "REMOVE_IMAGE": "Eliminar",
@@ -65,11 +65,11 @@
         "NOTE": "Active las notificaciones de sonido en el tablero para los mensajes nuevos y conversaciones.",
         "ALERT_TYPES": {
           "NONE": "Ninguna",
-          "MINE": "Assigned",
+          "MINE": "Asignado",
           "ALL": "Todos"
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Eventos de alerta para conversaciones:",
           "NONE": "Ninguna",
           "ASSIGNED": "Conversaciones asignadas",
           "ALL_CONVERSATIONS": "Todas las conversaciones"
@@ -96,14 +96,14 @@
         "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
       "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
+        "TITLE": "Preferencias de notificación",
+        "TYPE_TITLE": "Tipo de notificación",
         "EMAIL": "E-mail",
         "PUSH": "Notificación push",
         "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
+          "CONVERSATION_CREATED": "Se ha creado una nueva conversación",
+          "CONVERSATION_ASSIGNED": "Se te ha asignado una conversación",
+          "CONVERSATION_MENTION": "Has sido mencionado en una conversación",
           "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
           "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
           "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
@@ -239,6 +239,7 @@
     "REPORTS": "Informes",
     "SETTINGS": "Ajustes",
     "CONTACTS": "Contactos",
+    "CAPTAIN": "Capitán",
     "HOME": "Inicio",
     "AGENTS": "Agentes",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Resumen",
-    "FACEBOOK_REAUTHORIZE": "Su conexión de Facebook expiró, por favor reconecte si página de Facebook para continuar con el servicio",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Centro de ayuda",
       "ALL_ARTICLES": "Todos los artículos",
diff --git a/app/javascript/dashboard/i18n/locale/es/sla.json b/app/javascript/dashboard/i18n/locale/es/sla.json
index acbd235ab17e0..26e0e15104c5f 100644
--- a/app/javascript/dashboard/i18n/locale/es/sla.json
+++ b/app/javascript/dashboard/i18n/locale/es/sla.json
@@ -10,21 +10,21 @@
       "TITLE": "Upgrade to create SLAs",
       "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
       "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
-      "UPGRADE_NOW": "Upgrade now",
-      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
+      "UPGRADE_NOW": "Actualizar ahora",
+      "CANCEL_ANYTIME": "Puede cambiar o cancelar su plan en cualquier momento"
     },
     "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
-      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
-      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
+      "AVAILABLE_ON": "La función de SLA sólo está disponible en los planes de pago.",
+      "UPGRADE_PROMPT": "Actualice a un plan pago para acceder a funciones avanzadas como registros de auditoría, capacidad de agente y más.",
+      "ASK_ADMIN": "Por favor, comuníquese con su administrador para la actualización."
     },
     "LIST": {
       "404": "No hay SLAs disponibles en esta cuenta.",
       "EMPTY": {
-        "TITLE_1": "Enterprise P0",
-        "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
-        "TITLE_2": "Enterprise P1",
-        "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
+        "TITLE_1": "Empresa P0",
+        "DESC_1": "Problemas planteados por los clientes empresariales, que requieren una atención inmediata.",
+        "TITLE_2": "Empresa P1",
+        "DESC_2": "Problemas planteados por los clientes empresariales, deben reconocerse con rapidez."
       },
       "BUSINESS_HOURS_ON": "Horas laborables",
       "BUSINESS_HOURS_OFF": "Horas de descanso",
@@ -77,7 +77,7 @@
     },
     "ADD": {
       "TITLE": "Añadir SLA",
-      "DESC": "Friendly promises for great service!",
+      "DESC": "¡Promesas amigables para un servicio excelente!",
       "API": {
         "SUCCESS_MESSAGE": "SLA añadido correctamente",
         "ERROR_MESSAGE": "Hubo un error, por favor inténtelo de nuevo"
@@ -97,12 +97,12 @@
       }
     },
     "EVENTS": {
-      "TITLE": "SLA Misses",
+      "TITLE": "SLA perdidos",
       "FRT": "Primera respuesta",
-      "NRT": "Next response time",
-      "RT": "Resolution time",
-      "SHOW_MORE": "{count} more",
-      "HIDE": "Hide {count} rows"
+      "NRT": "Tiempo de respuesta siguiente",
+      "RT": "Tiempo de resolución",
+      "SHOW_MORE": "{count} más",
+      "HIDE": "Esconder {count} filas"
     }
   }
 }
\ No newline at end of file
diff --git a/app/javascript/dashboard/i18n/locale/es/teamsSettings.json b/app/javascript/dashboard/i18n/locale/es/teamsSettings.json
index 2125e478b4922..a8a8d7013ee78 100644
--- a/app/javascript/dashboard/i18n/locale/es/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/es/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Crear un nuevo equipo",
     "HEADER": "Equipos",
-    "SIDEBAR_TXT": "<p><b>Equipos</b></p> <p>Los equipos le permiten organizar sus agentes en grupos basados en sus responsabilidades. <br /> Un agente puede ser parte de múltiples equipos. Puedes asignar conversaciones a un equipo cuando trabajas en colaboración. </p>",
+    "LOADING": "Obteniendo equipos",
+    "DESCRIPTION": "Los equipos te permiten organizar a los agentes en grupos basados en sus responsabilidades. Un agente puede pertenecer a varios equipos. Cuando trabajas en colaboración, puedes asignar conversaciones a equipos específicos.",
+    "LEARN_MORE": "Aprende más sobre los equipos",
     "LIST": {
       "404": "No hay equipos creados en ésta cuenta.",
-      "EDIT_TEAM": "Editar equipo"
+      "EDIT_TEAM": "Editar equipo",
+      "NONE": "Ninguna"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "No se pudo borrar el equipo. Intente nuevamente."
       },
       "CONFIRM": {
-        "TITLE": "¿Está seguro que quiere borrar - %{teamName}?",
+        "TITLE": "¿Está seguro que desea eliminar el equipo?",
         "PLACE_HOLDER": "Por favor escriba {teamName} para confirmar",
         "MESSAGE": "Al borrar el equipo se quitara la asignación del equipo en las conversaciones asignadas a éste equipo.",
         "YES": "Eliminar ",
diff --git a/app/javascript/dashboard/i18n/locale/fa/advancedFilters.json b/app/javascript/dashboard/i18n/locale/fa/advancedFilters.json
index 0e8715e56250f..bf9c396265020 100644
--- a/app/javascript/dashboard/i18n/locale/fa/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/fa/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "و",
       "OR": "یا"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "مساوی با",
       "not_equal_to": "مساوی نیست با",
diff --git a/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json b/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json
index 223a6f5254518..bb3d4186eff20 100644
--- a/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "ایجنت ها",
     "HEADER_BTN_TXT": "اضافه کردن ایجنت",
     "LOADING": "دریافت لیست ایجنت ها",
-    "SIDEBAR_TXT": "<p><b>ایجنت ها</b></p>\n <p> یک <b>ایجنت</b> یکی از اعضای تیم پشتیبانی است. </p><p> ایجنت ها می‌توانند پیام‌های کاربران را ببینند و به آن‌ها پاسخ بدهند. این لیست حاوی تمام اپراتورهایی است که در حساب شما تعریف شده اند. </p><p> با زدن روی دکمه <b>اضافه کردن اپراتور</b> می‌توانید یک اپراتور جدید معرفی کنید. به ایمیل اپراتوری که معرفی می‌کنید یک دعوتنامه ارسال می‌شود که بعد از پذیرفتن آن ایجنت می‌تواند به پیام‌های کاربران پاسخ بدهد. </p><p> بسته به سطح دسترسی تعیین شده یک اپراتور می‌تواند به بخش‌های مشخصی از اکانت دسترسی پیدا کند </p><p> <b>اپراتور</b> - اپراتورهایی که این نقش را داشته باشند تنها می‌توانند به صندوق‌های ورودی، گزارشات و گفتگوها دسترسی داشته باشند. آن‌ها می‌توانند یک مکالمه را به اپراتور دیگر یا خودشان تخصیص دهند و یا یک مکالمه را حل شده اعلام کنند.</p><p> <b>مدیر</b> - مدیران می‌توانند علاوه بر تمام بخش‌هایی که یک اپراتور دسترسی دارد، به تمام بخش‌هایی که در حساب کاربری شما وجود دارد دسترسی داشته باشند.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "مدیرکل",
       "AGENT": "ایجنت"
diff --git a/app/javascript/dashboard/i18n/locale/fa/auditLogs.json b/app/javascript/dashboard/i18n/locale/fa/auditLogs.json
index 858c8a165ced0..28071629330f7 100644
--- a/app/javascript/dashboard/i18n/locale/fa/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/fa/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "گزارش های حسابرسی",
     "HEADER_BTN_TXT": "اضافه کردن گزارش های حسابرسی",
     "LOADING": "واکشی گزارش های حسابرسی",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "هیچ آیتمی با این مشخصات یافت نشد",
     "SIDEBAR_TXT": "<p><b>گزارش‌های حسابرسی</b> </p><p> گزارش‌های حسابرسی مسیرهایی برای رویدادها و اقدامات در یک سیستم Chatwoot هستند. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} از %{invitee} دعوت کرد به عنوان %{role} به سیستم اضافه شود",
       "EDIT": {
         "SELF": "%{agentName} مقدار %{attributes} را به %{values} تغییر داد",
-        "OTHER": "%{agentName} مقدار %{attributes} مربوط به %{user} را به %{values} تغییر داد"
+        "OTHER": "%{agentName} مقدار %{attributes} مربوط به %{user} را به %{values} تغییر داد",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/fa/automation.json b/app/javascript/dashboard/i18n/locale/fa/automation.json
index a06342c6d99b0..0b48b778198d3 100644
--- a/app/javascript/dashboard/i18n/locale/fa/automation.json
+++ b/app/javascript/dashboard/i18n/locale/fa/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "برای ذخیره باید حداقل یک اکشن داشته باشید",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "پیام خود را اینجا وارد کنید",
-      "TEAM_DROPDOWN_PLACEHOLDER": "انتخاب تیم‌ها"
+      "TEAM_DROPDOWN_PLACEHOLDER": "انتخاب تیم‌ها",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "فعال کردن قانون اتوماسیون",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "در حال بارگذاری...",
       "LABEL_UPLOADED": "با موفقیت آپلود شد",
       "LABEL_UPLOAD_FAILED": "بارگذاری انجام نشد"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "مقدار الزامی است",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fa/bulkActions.json b/app/javascript/dashboard/i18n/locale/fa/bulkActions.json
index 61379039915d5..2a9e4371870a7 100644
--- a/app/javascript/dashboard/i18n/locale/fa/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/fa/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "بازگشت",
     "ASSIGN_LABEL": "اختصاص دادن",
     "YES": "بله",
+    "SEARCH_INPUT_PLACEHOLDER": "جستجو",
     "ASSIGN_AGENT_TOOLTIP": "اپراتور را تعیین کنید",
     "ASSIGN_TEAM_TOOLTIP": "تیم را تعیین کنید",
     "ASSIGN_SUCCESFUL": "گفتگو با موفقیت اختصاص داده شده.",
@@ -33,7 +34,7 @@
       "NONE": "هیچکدام",
       "NO_TEAMS_AVAILABLE": "هنوز هیچ تیمی به این حساب کاربری اضافه نشده است.",
       "ASSIGN_SELECTED_TEAMS": "اختصاص تیم انتخاب شده.",
-      "ASSIGN_SUCCESFUL": "تیم‌ها با موفقیت اختصاص یافتند.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "اختصاص تیم با موفقیت انجام نشد، لطفا دوباره امتحان کنید."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/fa/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/fa/cannedMgmt.json
index ec98e61031bc7..d96a1abf9ce46 100644
--- a/app/javascript/dashboard/i18n/locale/fa/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fa/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "پاسخ‌های آماده",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "اضافه کردن پاسخ آماده",
     "LOADING": "دریافت پاسخ‌های آماده...",
     "SEARCH_404": "هیچ گزینه‌ای با این شرایط پیدا نشد.",
-    "SIDEBAR_TXT": "<p><b>پاسخ های آماده</b></p><p>پاسخ های آماده الگوهای از پیش نوشته شده ای هستند که به شما کمک می کنند به سرعت به یک گفتگو پاسخ دهید. برای درج یک پاسخ آماده در طول یک گفتگو، اپراتورها می توانند یک کد کوتاه بعد از یک '/' تایپ کنند.</p><p>می توانید پاسخ های آماده خود را از این صفحه مدیریت کنید یا با استفاده از دکمه \"افزودن پاسخ آماده\" پاسخ های جدید ایجاد کنید.</p><p>در یک صفحه جدید صفحه <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\"> را راهنمایی بیشتر باز کنید.</p><p> همچنین با بررسی <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\"> می توانید از پاسخ های آماده جدید مطلع شوید.</p>",
     "LIST": {
       "404": "هیچ پاسخ آماده‌ای برای این حساب تعریف نشده است",
       "TITLE": "مدیریت پاسخ‌های آماده",
diff --git a/app/javascript/dashboard/i18n/locale/fa/contact.json b/app/javascript/dashboard/i18n/locale/fa/contact.json
index 844c4b862d61c..68699f3ee5b6c 100644
--- a/app/javascript/dashboard/i18n/locale/fa/contact.json
+++ b/app/javascript/dashboard/i18n/locale/fa/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "مخاطب با موفقیت ادغام شد",
       "ERROR_MESSAGE": "نمی توان مخاطبین را ادغام کرد، دوباره امتحان کنید!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fa/conversation.json b/app/javascript/dashboard/i18n/locale/fa/conversation.json
index 303f093005c3f..2a1a7ddcf047e 100644
--- a/app/javascript/dashboard/i18n/locale/fa/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/fa/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "برای رفتن به سرخط shift+enter و برای استفاده از پیام های ذخیره شده / را بزنید.",
       "PRIVATE_MSG_INPUT": "برای رفتن به سرخط shift+enter را بزنید. این پیام فقط به ایجنت ها نمایش داده میشود",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "امضای پیام پیکربندی نشده است، لطفاً آن را در تنظیمات نمایه پیکربندی کنید.",
-      "CLICK_HERE": "برای به روز رسانی اینجا را کلیک کنید"
+      "CLICK_HERE": "برای به روز رسانی اینجا را کلیک کنید",
+      "WHATSAPP_TEMPLATES": "قالب های واتساپ"
     },
     "REPLYBOX": {
       "REPLY": "پاسخ",
diff --git a/app/javascript/dashboard/i18n/locale/fa/general.json b/app/javascript/dashboard/i18n/locale/fa/general.json
index 3444763b2b9d9..a4b6d9d88468e 100644
--- a/app/javascript/dashboard/i18n/locale/fa/general.json
+++ b/app/javascript/dashboard/i18n/locale/fa/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "نمایش {firstIndex} تا {lastIndex} از {totalCount} مورد"
+    "SHOWING_RESULTS": "نمایش {firstIndex} تا {lastIndex} از {totalCount} مورد",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "جستجو",
+      "EMPTY_STATE": "نتیجه‌ای یافت نشد"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fa/generalSettings.json b/app/javascript/dashboard/i18n/locale/fa/generalSettings.json
index 7c80079a3fc45..46109d09c08cb 100644
--- a/app/javascript/dashboard/i18n/locale/fa/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fa/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "آفلاین"
+      "OFFLINE": "آفلاین",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "تازه کردن"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "تا فردا",
       "UNTIL_NEXT_MONTH": "تا ماه آینده",
       "AN_HOUR_FROM_NOW": "از حالا تا یک ساعت دیگر",
-      "CUSTOM": "سفارشی...",
+      "UNTIL_CUSTOM_TIME": "سفارشی...",
       "CHANGE_APPEARANCE": "تغییر ظاهر",
       "LIGHT_MODE": "روشن",
       "DARK_MODE": "تیره",
diff --git a/app/javascript/dashboard/i18n/locale/fa/helpCenter.json b/app/javascript/dashboard/i18n/locale/fa/helpCenter.json
index 813520351cd48..260208889f3d7 100644
--- a/app/javascript/dashboard/i18n/locale/fa/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/fa/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "از پرتال به عنوان یک CMS می توانید استفاده کنید که از طریق Front آدرس های API را فراخوانی می کنید."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fa/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/fa/inboxMgmt.json
index 2184c10f82a16..439c02cfd4a45 100644
--- a/app/javascript/dashboard/i18n/locale/fa/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fa/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "صندوق‌های ورودی",
     "SIDEBAR_TXT": "<p><b>صندوق ورودی</b></p>\n <p> وقتی چت ووت به یک وب سایت یا یک صفحه فیس بوک متصل شود به آن <b>صندوق ورودی</b> می‌گوید. شما در حساب  چت ووت خود می‌توانید بی‌نهایت صندوق ورودی داشته باشید. </p><p> روی دکمه <b>اضافه کردن صندوق ورودی</b> کلیک کنید تا به یک وب سایت یا یک صفحه فیس بوک وصل شوید. </p><p> در داشبورد، می‌توانید گفتگوهای همه صندوق‌های ورودی را یکجا ببینید و در تب «گفتگوها» به آن‌ها پاسخ بدهید. </p><p> همچنین می‌توانید با کلیک کردن روی اسم صندوق ورودی از قسمت سمت چپ، فقط گفتگوهای همان صندوق را ببینید. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "برای این حساب هیچ صندوق ورودی معرفی نشده است."
     },
@@ -364,6 +366,7 @@
         "TITLE": "ایمیل مایکروسافت",
         "DESCRIPTION": "برای شروع روی دکمه Sign in with Microsoft کلیک کنید. شما به صفحه ورود به ایمیل هدایت خواهید شد. هنگامی که مجوزهای درخواستی را پذیرفتید، به مرحله ایجاد صندوق ورودی هدایت می شوید.",
         "EMAIL_PLACEHOLDER": "آدرس ایمیل را وارد کنید",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "برای افزودن حساب مایکروسافت خود به عنوان کانال، باید با کلیک بر روی \"ورود به سیستم با مایکروسافت\" اکانت مایکروسافت خود را احراز هویت کنید.",
         "ERROR_MESSAGE": "هنگام اتصال به مایکروسافت خطایی روی داد، لطفاً دوباره امتحان کنید"
       }
diff --git a/app/javascript/dashboard/i18n/locale/fa/integrations.json b/app/javascript/dashboard/i18n/locale/fa/integrations.json
index e7e92b2f3455b..78b85c0304ee2 100644
--- a/app/javascript/dashboard/i18n/locale/fa/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/fa/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "برنامه‌های تلفیق شده",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "رویدادهای مشترک شده",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "اضافه کردن یک برنامه پیشخوان جدید",
       "SIDEBAR_TXT": "<p><b>برنامه‌های داشبورد</b></p><p>برنامه‌های داشبورد به سازمان‌ها اجازه می‌دهند تا برنامه‌ای را در داشبورد Chatwoot جاسازی کنند تا زمینه را برای عوامل پشتیبانی مشتری فراهم کنند. این ویژگی به شما این امکان را می دهد که به طور مستقل یک برنامه ایجاد کنید و آن را در داشبورد جاسازی کنید تا اطلاعات کاربر، سفارشات یا سابقه پرداخت قبلی آنها را ارائه کنید.</p><p>وقتی برنامه خود را با استفاده از داشبورد در Chatwoot جاسازی می کنید، برنامه شما این کار را انجام می دهد. زمینه گفتگو و تماس را به عنوان یک رویداد پنجره دریافت کنید. یک شنونده برای رویداد پیام در صفحه خود اجرا کنید تا زمینه را دریافت کنید.</p><p>برای افزودن یک برنامه داشبورد جدید، روی دکمه \"افزودن یک برنامه داشبورد جدید\" کلیک کنید.</p>",
       "DESCRIPTION": "برنامه‌های داشبورد به سازمان‌ها اجازه می‌دهند تا برنامه‌ای را در داشبورد جاسازی کنند تا زمینه را برای عوامل پشتیبانی مشتری فراهم کنند. این ویژگی به شما این امکان را می دهد که به طور مستقل یک برنامه کاربردی ایجاد کنید و آن را برای ارائه اطلاعات کاربر، سفارشات یا سابقه پرداخت قبلی آنها درج کنید.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "هنوز هیچ برنامه داشبوردی روی این حساب پیکربندی نشده است",
         "LOADING": "در حال واکشی برنامه های داشبورد...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "برنامه پیشخوان با موفقیت حذف شد",
         "API_ERROR": "ما نتوانستیم برنامه را حذف کنیم. لطفا بعدا دوباره امتحان کنید"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "ايجاد كردن",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "پیوند",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "عنوان",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "عنوان الزامی است"
+          },
+          "DESCRIPTION": {
+            "LABEL": "توضیحات",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "تیم‌",
+            "PLACEHOLDER": "انتخاب تیم",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "مسئول",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "اولویت",
+            "PLACEHOLDER": "انتخاب اولویت",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "برچسب",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "وضعیت",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "ايجاد كردن",
+        "CANCEL": "انصراف",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "وضعیت",
+        "PRIORITY": "اولویت",
+        "ASSIGNEE": "مسئول",
+        "LABELS": "برچسب‌ها",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fa/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/fa/labelsMgmt.json
index 115d66adf35bc..e5c74eef3f919 100644
--- a/app/javascript/dashboard/i18n/locale/fa/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fa/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "برچسب‌ها",
     "HEADER_BTN_TXT": "افزودن برچسب",
     "LOADING": "درحال گرفتن برچسب‌ها",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "هیچ آیتمی با این مشخصات یافت نشد",
-    "SIDEBAR_TXT": "<p>\n <b> برچسب ها</b>\n<p> برچسب ها به شما در دسته بندی مکالمات و اولویت بندی آنها کمک می کند. می توانید برچسب را به یک مکالمه از نوار کناری اختصاص دهید.\n <br/>\n <br/>\n برچسب ها به حساب گره خورده اند و می توانند برای ایجاد گردش کار سفارشی در سازمان شما استفاده شوند. می توانید رنگ سفارشی را به برچسب اختصاص دهید ، شناسایی برچسب آسان تر می شود. شما می توانید برچسب را در نوار کناری نمایش دهید تا مکالمه ها به راحتی فیلتر شود.\n</p>",
     "LIST": {
       "404": "هیچ برچسبی در این حساب‌کاربری وجود ندارد.",
       "TITLE": "مدیریت برچسب‌ها",
@@ -49,7 +50,8 @@
       "DISMISS": "نادیده بگیر",
       "ADD_SELECTED_LABELS": "اضافه کردن برچسب‌های انتخاب شده",
       "ADD_SELECTED_LABEL": "اضافه کردن برچسب‌ انتخاب شده",
-      "ADD_ALL_LABELS": "اضافه کردن همه برچسب ها"
+      "ADD_ALL_LABELS": "اضافه کردن همه برچسب ها",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "افزودن برچسب",
diff --git a/app/javascript/dashboard/i18n/locale/fa/macros.json b/app/javascript/dashboard/i18n/locale/fa/macros.json
index ff97a08ae90a8..99c02000aebe0 100644
--- a/app/javascript/dashboard/i18n/locale/fa/macros.json
+++ b/app/javascript/dashboard/i18n/locale/fa/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "اجرا کردن",
       "PREVIEW": "پیش‌نمایش ماکرو",
       "EXECUTED_SUCCESSFULLY": "ماکرو با موفقیت اجرا شد"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "مقدار الزامی است",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fa/report.json b/app/javascript/dashboard/i18n/locale/fa/report.json
index 08dec12509b11..df885fa3942b4 100644
--- a/app/javascript/dashboard/i18n/locale/fa/report.json
+++ b/app/javascript/dashboard/i18n/locale/fa/report.json
@@ -481,7 +481,8 @@
       "HEADER": "ترافیک گفتگو",
       "NO_CONVERSATIONS": "بدون هیچ گفتگویی",
       "CONVERSATION": "%{count} گفتگو",
-      "CONVERSATIONS": "%{count} گفتگو"
+      "CONVERSATIONS": "%{count} گفتگو",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "گفتگوهای اپراتور ها",
@@ -536,6 +537,7 @@
       "LABELS": "برچسب",
       "TEAMS": "تیم‌"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "نرخ برخورد",
diff --git a/app/javascript/dashboard/i18n/locale/fa/search.json b/app/javascript/dashboard/i18n/locale/fa/search.json
index 278115f5e887e..cac41e2a182d0 100644
--- a/app/javascript/dashboard/i18n/locale/fa/search.json
+++ b/app/javascript/dashboard/i18n/locale/fa/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "گفتگوها",
       "MESSAGES": "پیام‌ها"
     },
+    "SEARCHING_DATA": "در حال جستجو",
     "EMPTY_STATE": "هیچ %{item} برای درخواست '%{query}' یافت نشد",
     "EMPTY_STATE_FULL": "هیچ نتیجه ای برای پرس و جو «%{query}» یافت نشد",
     "PLACEHOLDER_KEYBINDING": "/ برای تمرکز",
diff --git a/app/javascript/dashboard/i18n/locale/fa/settings.json b/app/javascript/dashboard/i18n/locale/fa/settings.json
index 0f364dc915fe3..5c932b6e86834 100644
--- a/app/javascript/dashboard/i18n/locale/fa/settings.json
+++ b/app/javascript/dashboard/i18n/locale/fa/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "گزارشات",
     "SETTINGS": "تنظیمات",
     "CONTACTS": "مخاطبین",
+    "CAPTAIN": "Captain",
     "HOME": "صفحه اصلی",
     "AGENTS": "ایجنت ها",
     "AGENT_BOTS": "ربات‌ها",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "آزمایشی",
     "REPORTS_OVERVIEW": "بررسی اجمالی",
-    "FACEBOOK_REAUTHORIZE": "اتصال فیس بوک شما منقضی شده است ، لطفاً برای ادامه خدمات دوباره صفحه فیس بوک خود را متصل کنید",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "مرکز راهنما",
       "ALL_ARTICLES": "همه مقالات",
diff --git a/app/javascript/dashboard/i18n/locale/fa/teamsSettings.json b/app/javascript/dashboard/i18n/locale/fa/teamsSettings.json
index 9dbb17164930a..b561306ff35be 100644
--- a/app/javascript/dashboard/i18n/locale/fa/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fa/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "ایجاد تیم جدید",
     "HEADER": "تیم‌ها",
-    "SIDEBAR_TXT": "<p><b>تیم‌ها</b></p> <p>تیم‌ها به شما امکان می‌دهند ایجنت های خود را بر اساس مسئولیت‌هایشان در گروه‌هایی سازماندهی کنید. <br /> یک ایجنت می تواند بخشی از چندین تیم باشد. وقتی به صورت مشترک کار می کنید، می توانید مکالمات را به یک تیم اختصاص دهید. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "هیچ تیمی در این حساب ایجاد نشده است.",
-      "EDIT_TEAM": "ویرایش تیم"
+      "EDIT_TEAM": "ویرایش تیم",
+      "NONE": "هیچکدام"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "تیم حذف نشد. دوباره امتحان کنید."
       },
       "CONFIRM": {
-        "TITLE": "آیا مطمئن هستید که می خواهید حذف کنید - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "برای تایید لطفا {teamName} را تایپ کنید",
         "MESSAGE": "با حذف تیم ، وظایف تیم از مکالمات اختصاص داده شده به این تیم حذف می شود.",
         "YES": "حذف ",
diff --git a/app/javascript/dashboard/i18n/locale/fi/advancedFilters.json b/app/javascript/dashboard/i18n/locale/fi/advancedFilters.json
index 31d6c696e9642..6cdcccb696901 100644
--- a/app/javascript/dashboard/i18n/locale/fi/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/fi/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/fi/agentMgmt.json b/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json
index 81cf67bbfcb6e..beec9efe9d099 100644
--- a/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Edustajat",
     "HEADER_BTN_TXT": "Lisää edustaja",
     "LOADING": "Haetaan Edustajalistaa",
-    "SIDEBAR_TXT": "<p><b>Edustajat</b></p> <p> An <b>Edustaja</b> on jäsenenä asiakastukitiimissäsi. </p><p> Edustajat voivat katsella ja vastata viesteihin asiakkailtasi. Luettelo näyttää kaikki edustajat, jotka ovat tällä hetkellä tililläsi. </p><p> Klikkaa <b>Lisää edustaja</b> lisätäksesi uuden edustajan. Edustaja, jonka lisäät, saa sähköpostiviestin, jossa on vahvistuslinkki tilin aktivointiin, jonka jälkeen he voivat käyttää Chatwoot -sovellusta ja vastata viesteihin. </p><p> Pääsy Chatwoot'n ominaisuuksiin perustuu seuraaviin rooleihin. </p><p> <b>Edustaja</b> - Tällä roolilla toimivat edustajat voivat käyttää vain saapuneita, raportteja ja keskusteluja. He voivat määrittää keskusteluja muille edustajille tai itse ratkaista keskusteluja.</p><p> <b>Ylläpitäjä</b> - Ylläpitäjällä on pääsy kaikkiin Chatwoot ominaisuuksiin, jotka ovat käytössä tililläsi, mukaan lukien asetukset sekä kaikki normaalien asiamiesten oikeudet.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Ylläpitäjä",
       "AGENT": "Edustajat"
diff --git a/app/javascript/dashboard/i18n/locale/fi/auditLogs.json b/app/javascript/dashboard/i18n/locale/fi/auditLogs.json
index 2d03ea352865e..340f65f0db6af 100644
--- a/app/javascript/dashboard/i18n/locale/fi/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/fi/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Tätä hakua vastaavia kohteita ei löydy",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/fi/automation.json b/app/javascript/dashboard/i18n/locale/fi/automation.json
index a60377e9bf521..1657b4e3ab19e 100644
--- a/app/javascript/dashboard/i18n/locale/fi/automation.json
+++ b/app/javascript/dashboard/i18n/locale/fi/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Lähetetään...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fi/bulkActions.json b/app/javascript/dashboard/i18n/locale/fi/bulkActions.json
index 72705e8b131af..0b3857e634d45 100644
--- a/app/javascript/dashboard/i18n/locale/fi/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/fi/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Mene takaisin",
     "ASSIGN_LABEL": "Delegoi",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "Etsi",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/fi/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/fi/cannedMgmt.json
index 9bc26933ae8a0..cf56b9e2cb195 100644
--- a/app/javascript/dashboard/i18n/locale/fi/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fi/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Tallennetut vastaukset",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Tätä hakua vastaavia kohteita ei löydy.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Tällä tilillä ei ole tallennettuja vastauksia.",
       "TITLE": "Hallitse tallennettuja vastauksia",
diff --git a/app/javascript/dashboard/i18n/locale/fi/contact.json b/app/javascript/dashboard/i18n/locale/fi/contact.json
index 599fcf56ffe8e..219b222eedf61 100644
--- a/app/javascript/dashboard/i18n/locale/fi/contact.json
+++ b/app/javascript/dashboard/i18n/locale/fi/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/fi/conversation.json b/app/javascript/dashboard/i18n/locale/fi/conversation.json
index 95e120c3960f5..c2ee8bb34d19a 100644
--- a/app/javascript/dashboard/i18n/locale/fi/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/fi/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Vaihto + enter siirtyäksesi uudelle riville. Aloita '/' valitaksesi tallennettu vastaus.",
       "PRIVATE_MSG_INPUT": "Vaihto + enter siirtyäksesi uudelle riville. Tämä näkyy vain edustajille",
       "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-pohjat"
     },
     "REPLYBOX": {
       "REPLY": "Vastaa",
diff --git a/app/javascript/dashboard/i18n/locale/fi/general.json b/app/javascript/dashboard/i18n/locale/fi/general.json
index 25bb4dfb736d2..3a3e2079729b4 100644
--- a/app/javascript/dashboard/i18n/locale/fi/general.json
+++ b/app/javascript/dashboard/i18n/locale/fi/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": "Etsi",
+      "EMPTY_STATE": "Tuloksia ei löytynyt"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fi/generalSettings.json b/app/javascript/dashboard/i18n/locale/fi/generalSettings.json
index 6df26953f7a16..d5b9215e3d1ce 100644
--- a/app/javascript/dashboard/i18n/locale/fi/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fi/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Poissa"
+      "OFFLINE": "Poissa",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/fi/helpCenter.json b/app/javascript/dashboard/i18n/locale/fi/helpCenter.json
index f3e8e9246136b..df7e3ffa79d87 100644
--- a/app/javascript/dashboard/i18n/locale/fi/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/fi/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/fi/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/fi/inboxMgmt.json
index a7897227fad85..d560044bf55c9 100644
--- a/app/javascript/dashboard/i18n/locale/fi/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fi/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Saapuneet-kansiot",
     "SIDEBAR_TXT": "<p><b>Postilaatikko</b></p> <p> Kun yhdistät sivuston tai facebook-sivun Chatwotiin, sitä kutsutaan <b>postilaatikoksi</b>. Sinulla voi olla rajoittamaton määrä postilaatikoita Chatwoot tililläsi. </p><p> Klikkaa <b>Lisää postilaatikko</b> yhdistääksesi verkkosivuston tai Facebook-sivun. </p><p> Kojelaudalla näet kaikki keskustelut kaikista saapuneet-kansiostasi yhdessä paikassa ja vastaat niihin `Keskustelut`-välilehdessä. </p><p> Voit myös nähdä postilaatikkoon liittyviä keskusteluja klikkaamalla postilaatikon nimeä kojelaudan vasemmassa paneelissa. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Tähän tiliin ei ole liitetty saapuneet-kansiota."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/fi/integrations.json b/app/javascript/dashboard/i18n/locale/fi/integrations.json
index b600fcaf83b95..538729ca6ce4f 100644
--- a/app/javascript/dashboard/i18n/locale/fi/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/fi/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integraatiot",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Luo",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Kuvaus",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Tiimi",
+            "PLACEHOLDER": "Valitse tiimi",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Tila",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Luo",
+        "CANCEL": "Peruuta",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Tila",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Tunnisteet",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fi/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/fi/labelsMgmt.json
index 1e17cdfc3c4b6..eaaaf1c59fc3d 100644
--- a/app/javascript/dashboard/i18n/locale/fi/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fi/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Tunnisteet",
     "HEADER_BTN_TXT": "Lisää tunniste",
     "LOADING": "Haetaan tunnisteita",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Tätä hakua vastaavia kohteita ei löydy",
-    "SIDEBAR_TXT": "<p><b>Tunnisteet</b> <p>Tunnisteet auttavat sinua luokittelemaan keskustelut ja priorisoimaan ne. Voit määrittää tunnisteen keskusteluun sivupaneelista.<br /><br />Tunnisteet ovat sidottuja tiliin ja niitä voidaan käyttää luomaan mukautettuja työnkulkuja organisaatiollesi. Voit määrittää oman värin tunnisteeseen, mikä helpottaa tunnisteen tunnistamista. Voit näyttää otsikon sivupalkissa, jotta voit suodattaa keskustelut helposti.</p>",
     "LIST": {
       "404": "Tällä tilillä ei ole tunnisteita.",
       "TITLE": "Hallitse tunnisteita",
@@ -49,7 +50,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": "Lisää tunniste",
diff --git a/app/javascript/dashboard/i18n/locale/fi/macros.json b/app/javascript/dashboard/i18n/locale/fi/macros.json
index e1aaf05c79c1a..fa63bcb114301 100644
--- a/app/javascript/dashboard/i18n/locale/fi/macros.json
+++ b/app/javascript/dashboard/i18n/locale/fi/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fi/report.json b/app/javascript/dashboard/i18n/locale/fi/report.json
index 5716f05ec7bf9..19ce86e139cf0 100644
--- a/app/javascript/dashboard/i18n/locale/fi/report.json
+++ b/app/javascript/dashboard/i18n/locale/fi/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": "Tiimi"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/fi/search.json b/app/javascript/dashboard/i18n/locale/fi/search.json
index 8e8487378c1b1..9432f82a69678 100644
--- a/app/javascript/dashboard/i18n/locale/fi/search.json
+++ b/app/javascript/dashboard/i18n/locale/fi/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Keskustelut",
       "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/i18n/locale/fi/settings.json b/app/javascript/dashboard/i18n/locale/fi/settings.json
index 6918a7eb9b13c..76c82f9b24692 100644
--- a/app/javascript/dashboard/i18n/locale/fi/settings.json
+++ b/app/javascript/dashboard/i18n/locale/fi/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Raportit",
     "SETTINGS": "Asetukset",
     "CONTACTS": "Yhteystiedot",
+    "CAPTAIN": "Captain",
     "HOME": "Koti",
     "AGENTS": "Edustajat",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Facebook-yhteytesi on vanhentunut, ole hyvä ja yhdistä uudelleen Facebook-sivusi jatkaaksesi palveluita",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/fi/teamsSettings.json b/app/javascript/dashboard/i18n/locale/fi/teamsSettings.json
index 8fcaec01b0c66..1698e05b30376 100644
--- a/app/javascript/dashboard/i18n/locale/fi/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fi/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Poista ",
diff --git a/app/javascript/dashboard/i18n/locale/fr/advancedFilters.json b/app/javascript/dashboard/i18n/locale/fr/advancedFilters.json
index 09a7e27d7d0d3..4e15118446e4f 100644
--- a/app/javascript/dashboard/i18n/locale/fr/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/fr/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "ET",
       "OR": "OU"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Égal à",
       "not_equal_to": "Pas égal à",
diff --git a/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json
index f1bb049b67e6b..80c79d76db0e1 100644
--- a/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Ajouter un agent",
     "LOADING": "Récupération de la liste des agents",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> Un <b>agent</b> est un membre de votre équipe d'assistance clientèle. </p><p> Les agents pourront voir et répondre aux messages de vos utilisateurs. La liste montre tous les agents actuellement dans votre compte. </p><p> Cliquez sur <b>Ajouter un agent</b> pour ajouter un nouvel agent. L'agent que vous ajoutez recevra un courriel avec un lien de confirmation pour activer son compte, après quoi il pourra accéder à Chatwoot et répondre aux messages. </p><p> L'accès aux fonctionnalités de Chatwoot est basé sur les rôles suivants. </p><p> <b>Agent</b> - Les agents ayant ce rôle ne peuvent accéder qu'aux boîtes de réception, aux rapports et aux conversations. Ils peuvent assigner des conversations à d'autres agents ou eux-mêmes et résoudre des conversations.</p><p> <b>Administrateur</b> - Administrateur aura accès à toutes les fonctionnalités de Chatwoot activées pour votre compte, y compris les paramètres, ainsi que tous les privilèges d'un agent normal.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrateur",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/fr/auditLogs.json b/app/javascript/dashboard/i18n/locale/fr/auditLogs.json
index 9cff6f20435ef..7c80cc941108e 100644
--- a/app/javascript/dashboard/i18n/locale/fr/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/fr/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Journaux d'audit",
     "HEADER_BTN_TXT": "Ajouter des journaux d'audit",
     "LOADING": "Récupération des journaux d'audit",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Il n'y a aucun élément correspondant à cette requête",
     "SIDEBAR_TXT": "</p><b>Les journaux d'audit</b> </p><p>Les journaux d'audit contiennent des événements et des actions associés un système Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} a invité %{invitee} à rejoindre le compte en tant que %{role}",
       "EDIT": {
         "SELF": "%{agentName} a changé sa %{attributes} en %{values}",
-        "OTHER": "%{agentName} a changé %{attributes} de %{user} en %{values}"
+        "OTHER": "%{agentName} a changé %{attributes} de %{user} en %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/fr/automation.json b/app/javascript/dashboard/i18n/locale/fr/automation.json
index ae59ed39260ee..ffcbe20a71a13 100644
--- a/app/javascript/dashboard/i18n/locale/fr/automation.json
+++ b/app/javascript/dashboard/i18n/locale/fr/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Vous devez avoir au moins une action pour enregistrer",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Saisissez votre message ici",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Sélectionner une équipe"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Sélectionner une équipe",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Activer la règle d'automatisation",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Téléversement...",
       "LABEL_UPLOADED": "Téléchargé avec succès",
       "LABEL_UPLOAD_FAILED": "Échec de l'envoi"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "La valeur est requise",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fr/bulkActions.json b/app/javascript/dashboard/i18n/locale/fr/bulkActions.json
index 8a259141366a6..34f95116b5ab8 100644
--- a/app/javascript/dashboard/i18n/locale/fr/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/fr/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Retour",
     "ASSIGN_LABEL": "Assigner",
     "YES": "Oui",
+    "SEARCH_INPUT_PLACEHOLDER": "Rechercher",
     "ASSIGN_AGENT_TOOLTIP": "Assigner un agent",
     "ASSIGN_TEAM_TOOLTIP": "Assigner une équipe",
     "ASSIGN_SUCCESFUL": "Conversations assignées avec succès.",
@@ -33,7 +34,7 @@
       "NONE": "Aucun",
       "NO_TEAMS_AVAILABLE": "Aucune équipe n'a encore été ajoutée à ce compte.",
       "ASSIGN_SELECTED_TEAMS": "Assigner à l'équipe sélectionnée.",
-      "ASSIGN_SUCCESFUL": "Equipes assignées avec succès.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Impossible d'assigner l'équipe, veuillez réessayer."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/fr/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/fr/cannedMgmt.json
index 703be1fc8881e..487cc7483460e 100644
--- a/app/javascript/dashboard/i18n/locale/fr/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fr/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Réponses standardisées",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Ajouter une réponse prédéfinie",
     "LOADING": "Récupération des réponses prédéfinies...",
     "SEARCH_404": "Il n'y a aucun élément correspondant à cette requête.",
-    "SIDEBAR_TXT": "<p><b>Réponses prédéfinies</b> </p><p>Les réponses prédéfinies sont des modèles de réponse pré-écrits qui vous aident à répondre rapidement à une conversation. Pour insérer une réponse prédéfinie pendant un chat, les agents peuvent taper un code court précédé du caractère '/'. </p><p>Vous pouvez gérer vos réponses standard à partir de cette page ou en créer de nouvelles à l'aide du bouton \"Ajouter une réponse standard\".</p><p>Ouvrez le <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Manuel des réponses standard</a> dans un autre onglet pour obtenir un coup de main.</p><p>Vérifiez également la toute nouvelle <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Bibliothèque des réponses standard</a>.</p>",
     "LIST": {
       "404": "Il n'y a aucune réponse standardisée disponible dans ce compte.",
       "TITLE": "Gérer les réponses standardisées",
diff --git a/app/javascript/dashboard/i18n/locale/fr/contact.json b/app/javascript/dashboard/i18n/locale/fr/contact.json
index a15cb65cfe457..30b948494d800 100644
--- a/app/javascript/dashboard/i18n/locale/fr/contact.json
+++ b/app/javascript/dashboard/i18n/locale/fr/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contact fusionné avec succès",
       "ERROR_MESSAGE": "Impossible de fusionner les contacts, essayez à nouveau !"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fr/conversation.json b/app/javascript/dashboard/i18n/locale/fr/conversation.json
index 06c404409936d..6864cf3f7c54c 100644
--- a/app/javascript/dashboard/i18n/locale/fr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/fr/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Maj + entrée pour une nouvelle ligne. Commencez par '/' pour sélectionner une réponse standardisée.",
       "PRIVATE_MSG_INPUT": "Maj + entrée pour une nouvelle ligne. Cela ne sera visible que par les agents",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "La signature du message n'est pas configurée, veuillez le configurer dans les paramètres du profil.",
-      "CLICK_HERE": "Cliquez ici pour mettre à jour"
+      "CLICK_HERE": "Cliquez ici pour mettre à jour",
+      "WHATSAPP_TEMPLATES": "Modèles WhatsApp"
     },
     "REPLYBOX": {
       "REPLY": "Répondre",
diff --git a/app/javascript/dashboard/i18n/locale/fr/general.json b/app/javascript/dashboard/i18n/locale/fr/general.json
index 25bb4dfb736d2..b25c8d702cecf 100644
--- a/app/javascript/dashboard/i18n/locale/fr/general.json
+++ b/app/javascript/dashboard/i18n/locale/fr/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": "Rechercher",
+      "EMPTY_STATE": "Aucun résultat trouvé"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fr/generalSettings.json b/app/javascript/dashboard/i18n/locale/fr/generalSettings.json
index 87d60620ffd31..f5c93bc0a464e 100644
--- a/app/javascript/dashboard/i18n/locale/fr/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fr/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Hors-ligne"
+      "OFFLINE": "Hors-ligne",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Actualiser"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Jusqu'à demain",
       "UNTIL_NEXT_MONTH": "Jusqu'au mois prochain",
       "AN_HOUR_FROM_NOW": "D'ici une heure",
-      "CUSTOM": "Personnalisé...",
+      "UNTIL_CUSTOM_TIME": "Personnalisé...",
       "CHANGE_APPEARANCE": "Changer l'apparence",
       "LIGHT_MODE": "Clair",
       "DARK_MODE": "Sombre",
diff --git a/app/javascript/dashboard/i18n/locale/fr/helpCenter.json b/app/javascript/dashboard/i18n/locale/fr/helpCenter.json
index 3be07446feadb..168d5d2eff63b 100644
--- a/app/javascript/dashboard/i18n/locale/fr/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/fr/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Utilisez le portail comme un CMS sans tête avec des frameworks front-end tiers en utilisant nos API."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fr/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/fr/inboxMgmt.json
index d1283cbff8a1d..7c85387205b0c 100644
--- a/app/javascript/dashboard/i18n/locale/fr/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fr/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Boîtes de réception",
     "SIDEBAR_TXT": "<p><b>Boîte de réception</b></p> <p> Lorsque vous connectez un site Web ou une page Facebook à Chatwoot, elle est appelée une <b>Boîte de réception</b>. Vous pouvez avoir des boîtes de réception illimitées dans votre compte Chatwoot. </p><p> Cliquez sur <b>Ajouter Boîte de réception</b> pour connecter un site Web ou une page Facebook. </p><p> Dans le tableau de bord, vous pouvez voir toutes les conversations de toutes vos boîtes de réception en un seul endroit et y répondre dans l'onglet `Conversations`. </p><p> Vous pouvez également voir les conversations spécifiques à une boîte de réception en cliquant sur le nom de la boîte de réception sur le volet gauche du tableau de bord. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Il n'y a aucune boîte de réception associée à ce compte."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Cliquez sur le bouton Connexion avec Microsoft pour commencer. Vous allez rediriger vers la page de connexion par courriel. Une fois que vous avez accepté les autorisations demandées, vous serez redirigé vers l'étape de création de la boîte de réception.",
         "EMAIL_PLACEHOLDER": "Entrez votre adresse e-mail",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Pour ajouter votre compte Microsoft en tant que canal, vous devez authentifier votre compte Microsoft en cliquant sur 'Connexion avec Microsoft' ",
         "ERROR_MESSAGE": "Une erreur s'est produite lors de la connexion à Microsoft, veuillez réessayer"
       }
diff --git a/app/javascript/dashboard/i18n/locale/fr/integrations.json b/app/javascript/dashboard/i18n/locale/fr/integrations.json
index 4cd66a317ced4..d9392ef2573cc 100644
--- a/app/javascript/dashboard/i18n/locale/fr/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/fr/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Intégrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Événements suivis",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Ajouter une nouvelle application de tableau de bord",
       "SIDEBAR_TXT": "<p><b>Les applications du tableau de bord</b></p><p>Les applications du tableau de bord permettent aux organisations d'intégrer une application dans le tableau de bord Chatwoot pour fournir le contexte aux agents d'assistance client. Cette fonctionnalité vous permet de créer une application indépendamment et d'intégrer cela dans le tableau de bord pour fournir les informations de l'utilisateur, leurs commandes, ou leur historique de paiement précédent.</p><p>Lorsque vous intégrez votre application en utilisant le tableau de bord dans Chatwoot, votre application obtiendra le contexte de la conversation et le contact comme un événement de fenêtre. Implémentez un listener pour l'événement message sur votre page pour recevoir le contexte.</p><p>Pour ajouter une nouvelle application de tableau de bord, cliquez sur le bouton 'Ajouter une nouvelle application de tableau de bord'.</p>",
       "DESCRIPTION": "Les applications du tableau de bord permettent aux organisations d'intégrer une application dans le tableau de bord pour fournir le contexte des agents d'assistance client. Cette fonctionnalité vous permet de créer une application de manière indépendante et d'intégrer les informations de l'utilisateur, leurs commandes ou leur historique de paiement précédent.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Il n'y a pas encore d'applications de tableau de bord configurées sur ce compte",
         "LOADING": "Récupération des applications du tableau de bord ...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Application du tableau de bord supprimée avec succès",
         "API_ERROR": "Nous n'avons pas pu supprimer l'application. Veuillez réessayer plus tard"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Créer",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Lien",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Titre",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Le titre est requis"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Équipes",
+            "PLACEHOLDER": "Sélectionner une équipe",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priorité",
+            "PLACEHOLDER": "Sélectionner la priorité",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Étiquettes",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "État",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Créer",
+        "CANCEL": "Annuler",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "État",
+        "PRIORITY": "Priorité",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Étiquettes",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fr/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/fr/labelsMgmt.json
index 2b894d68f0d90..3b5cfb6bca13e 100644
--- a/app/javascript/dashboard/i18n/locale/fr/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fr/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Étiquettes",
     "HEADER_BTN_TXT": "Ajouter une étiquette",
     "LOADING": "Récupération des étiquettes",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Il n'y a aucun élément correspondant à cette requête",
-    "SIDEBAR_TXT": "<p><b>Étiquettes</b> <p>Les étiquettes vous aident à catégoriser les conversations et à les prioriser. Vous pouvez assigner une étiquette à une conversation depuis le panneau latéral. <br /><br />Les étiquettes sont liées au compte et peuvent être utilisées pour créer des processus personnalisés dans votre entreprise. Vous pouvez assigner une couleur personnalisée à une étiquette, cela rend plus facile l'identification de l'étiquette. Vous serez en mesure d'afficher l'étiquette dans la barre latérale pour filtrer les conversations facilement.</p>",
     "LIST": {
       "404": "Il n'y a aucune étiquette disponible dans ce compte.",
       "TITLE": "Gérer les étiquettes",
@@ -49,7 +50,8 @@
       "DISMISS": "Rejeter",
       "ADD_SELECTED_LABELS": "Ajouter les libellés sélectionnés",
       "ADD_SELECTED_LABEL": "Ajouter le libellé sélectionné",
-      "ADD_ALL_LABELS": "Ajouter tous les libellés"
+      "ADD_ALL_LABELS": "Ajouter tous les libellés",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Ajouter une étiquette",
diff --git a/app/javascript/dashboard/i18n/locale/fr/macros.json b/app/javascript/dashboard/i18n/locale/fr/macros.json
index f7de20e78796a..ff1a5aa0c0aa3 100644
--- a/app/javascript/dashboard/i18n/locale/fr/macros.json
+++ b/app/javascript/dashboard/i18n/locale/fr/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Exécuter",
       "PREVIEW": "Aperçu de la macro",
       "EXECUTED_SUCCESSFULLY": "Macro exécutée"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "La valeur est requise",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/fr/report.json b/app/javascript/dashboard/i18n/locale/fr/report.json
index ab14858e6545e..383f972cb8cfd 100644
--- a/app/javascript/dashboard/i18n/locale/fr/report.json
+++ b/app/javascript/dashboard/i18n/locale/fr/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Trafic des conversations",
       "NO_CONVERSATIONS": "Aucune conversation",
       "CONVERSATION": "Conversation %{count}",
-      "CONVERSATIONS": "%{count} conversations"
+      "CONVERSATIONS": "%{count} conversations",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversations par des agents",
@@ -536,6 +537,7 @@
       "LABELS": "Étiquettes",
       "TEAMS": "Équipes"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/fr/search.json b/app/javascript/dashboard/i18n/locale/fr/search.json
index b814f3bf0792b..b7f7bfac5333b 100644
--- a/app/javascript/dashboard/i18n/locale/fr/search.json
+++ b/app/javascript/dashboard/i18n/locale/fr/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversations",
       "MESSAGES": "Messages"
     },
+    "SEARCHING_DATA": "Recherche en cours",
     "EMPTY_STATE": "Aucun %{item} trouvé pour la requête '%{query}'",
     "EMPTY_STATE_FULL": "Aucun résultat pour la requête '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ pour cibler",
diff --git a/app/javascript/dashboard/i18n/locale/fr/settings.json b/app/javascript/dashboard/i18n/locale/fr/settings.json
index 379b4e18212bb..5b714bd54338f 100644
--- a/app/javascript/dashboard/i18n/locale/fr/settings.json
+++ b/app/javascript/dashboard/i18n/locale/fr/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Rapports",
     "SETTINGS": "Paramètres",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Accueil",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Bêta",
     "REPORTS_OVERVIEW": "Vue d'ensemble",
-    "FACEBOOK_REAUTHORIZE": "Votre connexion Facebook a expiré, veuillez reconnecter votre page Facebook pour continuer les services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Centre d'aide",
       "ALL_ARTICLES": "Tous les articles",
diff --git a/app/javascript/dashboard/i18n/locale/fr/teamsSettings.json b/app/javascript/dashboard/i18n/locale/fr/teamsSettings.json
index 3b2fde171b560..6e72872a4acf7 100644
--- a/app/javascript/dashboard/i18n/locale/fr/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fr/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Créer une nouvelle équipe",
     "HEADER": "Équipes",
-    "SIDEBAR_TXT": "<p><b>Équipes</b></p> <p>Les équipes vous permettent d'organiser vos agents en groupes en fonction de leurs responsabilités. <br /> Un utilisateur peut faire partie de plusieurs équipes. Vous pouvez assigner des conversations à une équipe lorsque vous travaillez en collaboration. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Il n'y a aucune équipe créée sur ce compte.",
-      "EDIT_TEAM": "Modifier l'équipe"
+      "EDIT_TEAM": "Modifier l'équipe",
+      "NONE": "Aucun"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Impossible de supprimer l'équipe. Veuillez réessayer."
       },
       "CONFIRM": {
-        "TITLE": "Voulez-vous vraiment supprimer - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Veuillez entrer {teamName} pour confirmer",
         "MESSAGE": "La suppression de l'équipe supprimera les affectations liées aux conversations de cette équipe.",
         "YES": "Supprimer ",
diff --git a/app/javascript/dashboard/i18n/locale/he/advancedFilters.json b/app/javascript/dashboard/i18n/locale/he/advancedFilters.json
index 6a70d6fcb649c..ca107ffdb2e7a 100644
--- a/app/javascript/dashboard/i18n/locale/he/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/he/advancedFilters.json
@@ -1,23 +1,24 @@
 {
   "FILTER": {
     "TITLE": "סינון שיחות",
-    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
-    "EDIT_CUSTOM_FILTER": "Edit Folder",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
-    "ADD_NEW_FILTER": "Add filter",
-    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
+    "SUBTITLE": "הוסף את המסננים שלך למטה ולחץ על 'החל מסננים' כדי לסנן את הצ'אטים.",
+    "EDIT_CUSTOM_FILTER": "ערוך תקיה",
+    "CUSTOM_VIEWS_SUBTITLE": "הוסף או הסר מסננים ועדכן את התיקיה שלך.",
+    "ADD_NEW_FILTER": "הוסף מסנן",
+    "FILTER_DELETE_ERROR": "אופס, נראה שלא ניתן לשמור שום דבר! אנא הוסף לפחות מסנן אחד כדי לשמור.",
     "SUBMIT_BUTTON_LABEL": "שמור סננים",
-    "UPDATE_BUTTON_LABEL": "Update folder",
+    "UPDATE_BUTTON_LABEL": "עדכן תקיה",
     "CANCEL_BUTTON_LABEL": "ביטול",
-    "CLEAR_BUTTON_LABEL": "Clear filters",
-    "FOLDER_LABEL": "Folder Name",
-    "FOLDER_QUERY_LABEL": "Folder Query",
+    "CLEAR_BUTTON_LABEL": "נקה מסננים",
+    "FOLDER_LABEL": "שם התקייה",
+    "FOLDER_QUERY_LABEL": "שאילתת תיקיה",
     "EMPTY_VALUE_ERROR": "חובה ערך.",
     "TOOLTIP_LABEL": "סינון שיחות",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "ו/גם",
       "OR": "או"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "שווה ל",
       "not_equal_to": "לא שווה ל",
@@ -42,9 +43,9 @@
       "CONVERSATION_IDENTIFIER": "Conversation identifier",
       "CAMPAIGN_NAME": "Campaign name",
       "LABELS": "תוויות",
-      "BROWSER_LANGUAGE": "Browser language",
+      "BROWSER_LANGUAGE": "שפת הדפדפן",
       "PRIORITY": "Priority",
-      "COUNTRY_NAME": "Country name",
+      "COUNTRY_NAME": "שם המדינה",
       "REFERER_LINK": "קישור מפנה",
       "CUSTOM_ATTRIBUTE_LIST": "רשימה",
       "CUSTOM_ATTRIBUTE_TEXT": "טקסט",
@@ -52,18 +53,18 @@
       "CUSTOM_ATTRIBUTE_LINK": "קישור",
       "CUSTOM_ATTRIBUTE_CHECKBOX": "תיבת סימון",
       "CREATED_AT": "נוצר בזמן",
-      "LAST_ACTIVITY": "Last activity"
+      "LAST_ACTIVITY": "פעילות אחרונה"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
-      "ADDITIONAL_FILTERS": "Additional filters",
-      "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "ADDITIONAL_FILTERS": "פילטרים נוספים",
+      "CUSTOM_ATTRIBUTES": "מאפיינים מותאמים אישית"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
         "TITLE": "האם אתה רוצה לשמור את המסנן הזה?",
         "LABEL": "תן שם למסנן הזה",
-        "PLACEHOLDER": "Name your filter to refer it later.",
+        "PLACEHOLDER": "תן שם למסנן שלך כדי להתייחס אליו מאוחר יותר.",
         "ERROR_MESSAGE": "שם שדה חובה.",
         "SAVE_BUTTON": "שמור מסנן",
         "CANCEL_BUTTON": "ביטול",
diff --git a/app/javascript/dashboard/i18n/locale/he/agentMgmt.json b/app/javascript/dashboard/i18n/locale/he/agentMgmt.json
index 52ab71ea5257e..31b1318da073b 100644
--- a/app/javascript/dashboard/i18n/locale/he/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/he/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "סוכנים",
     "HEADER_BTN_TXT": "הוסף סוכן",
     "LOADING": "טוען רשימת סוכנים",
-    "SIDEBAR_TXT": "<p> <b> נציג</b> </p> <p> <b> נציג</b> חבר בצוות תמיכת הלקוחות שלך. </p> <p> נציגים יוכלו לצפות ולהשיב להודעות מהמשתמשים שלך. הרשימה מציגה את כל הסוכנים הנמצאים כעת בחשבונך. </p> <p> לחץ על <b> הוסף נציג</b> כדי להוסיף נציג חדש. הנציג שאתה מוסיף יקבל דוא\"ל עם קישור אישור להפעלת חשבונו, ולאחר מכן יוכל לגשת ל- Chatwoot ולהגיב להודעות. </p> <p> הגישה לתכונות של Chatwoot מבוססת על תפקידים הבאים. </p> <p> <b> נציג </b> - סוכנים בעלי התפקיד הזה יכולים לגשת לתיבות דואר נכנס, לדוחות ולשיחות בלבד. הם יכולים להקצות שיחות לסוכנים אחרים או לעצמם ולפתור שיחות. </P> <p> <b> מנהל </b> - למנהל תהיה גישה לכל תכונות Chatwoot המופעלות בחשבון שלך, כולל הגדרות, יחד עם כל הרשאות נציגים רגילות. </p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "אדמין",
       "AGENT": "סוכן"
diff --git a/app/javascript/dashboard/i18n/locale/he/auditLogs.json b/app/javascript/dashboard/i18n/locale/he/auditLogs.json
index 5e9fa608bbf8e..d52b42955d026 100644
--- a/app/javascript/dashboard/i18n/locale/he/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/he/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "אין פריטים התואמים לשאילתה זו",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/he/automation.json b/app/javascript/dashboard/i18n/locale/he/automation.json
index 0362559904d47..def12f45dfb6f 100644
--- a/app/javascript/dashboard/i18n/locale/he/automation.json
+++ b/app/javascript/dashboard/i18n/locale/he/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "נדרשת פעולה אחת לפחות",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "הכנס כאן את ההודעה",
-      "TEAM_DROPDOWN_PLACEHOLDER": "בחר קבוצות"
+      "TEAM_DROPDOWN_PLACEHOLDER": "בחר קבוצות",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "הפעל אוטומציה",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "מעלה...",
       "LABEL_UPLOADED": "קובץ הועלה בהצלחה",
       "LABEL_UPLOAD_FAILED": "העלאה נכשלה"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "חובה ערך",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/he/bulkActions.json b/app/javascript/dashboard/i18n/locale/he/bulkActions.json
index 6f138be0622c7..70d7cffdcdd13 100644
--- a/app/javascript/dashboard/i18n/locale/he/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/he/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "חזור",
     "ASSIGN_LABEL": "שייך",
     "YES": "כן",
+    "SEARCH_INPUT_PLACEHOLDER": "חפש",
     "ASSIGN_AGENT_TOOLTIP": "שייך סוכן",
     "ASSIGN_TEAM_TOOLTIP": "שייך צוות",
     "ASSIGN_SUCCESFUL": "שיוך בוצע בהצלחה.",
@@ -33,7 +34,7 @@
       "NONE": "כלום",
       "NO_TEAMS_AVAILABLE": "לא קיימות קבוצות להוספה.",
       "ASSIGN_SELECTED_TEAMS": "שייך קבוצה.",
-      "ASSIGN_SUCCESFUL": "שיוך קבוצה בוצע בהצלחה.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/he/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/he/cannedMgmt.json
index 2a6c5d9f36f9f..a4790dc1885b3 100644
--- a/app/javascript/dashboard/i18n/locale/he/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/he/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "תגובות מוכנות",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "אין פריטים התואמים לשאילתה זו.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "אין תגובות מוכנות זמינות בחשבון זה.",
       "TITLE": "נהל תגובות מוכנות",
diff --git a/app/javascript/dashboard/i18n/locale/he/contact.json b/app/javascript/dashboard/i18n/locale/he/contact.json
index 9354c8642030c..aba51300d949d 100644
--- a/app/javascript/dashboard/i18n/locale/he/contact.json
+++ b/app/javascript/dashboard/i18n/locale/he/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "איש הקשר מוזג בהצלחה",
       "ERROR_MESSAGE": "לא ניתן למזג אנשי קשר, נסה שוב!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/he/conversation.json b/app/javascript/dashboard/i18n/locale/he/conversation.json
index e3b2610ec68d3..19db5415badae 100644
--- a/app/javascript/dashboard/i18n/locale/he/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/he/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + Enter עבור שורה חדשה. התחל עם '/' כדי לבחור תגובה מוכנה.",
       "PRIVATE_MSG_INPUT": "Shift + Enter עבור שורה חדשה. זה יהיה גלוי רק לסוכנים",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "חתימת הודעה אינה מוגדרת, נא הגדר אותה בהגדרות הפרופיל.",
-      "CLICK_HERE": "לחץ כאן כדי לעדכן"
+      "CLICK_HERE": "לחץ כאן כדי לעדכן",
+      "WHATSAPP_TEMPLATES": "תבניות וואטסאפ"
     },
     "REPLYBOX": {
       "REPLY": "הגב",
diff --git a/app/javascript/dashboard/i18n/locale/he/general.json b/app/javascript/dashboard/i18n/locale/he/general.json
index 25bb4dfb736d2..7ac10d6a1360d 100644
--- a/app/javascript/dashboard/i18n/locale/he/general.json
+++ b/app/javascript/dashboard/i18n/locale/he/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+    "SHOWING_RESULTS": "מציג {firstIndex}-{lastIndex} מתוך {totalCount} פריטים",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "חפש",
+      "EMPTY_STATE": "לא נמצאו תוצאות"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/he/generalSettings.json b/app/javascript/dashboard/i18n/locale/he/generalSettings.json
index b4e7d15808528..7232fbe55614a 100644
--- a/app/javascript/dashboard/i18n/locale/he/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/he/generalSettings.json
@@ -3,7 +3,7 @@
     "TITLE": "הגדרות חשבון",
     "SUBMIT": "עדכן הגדרות",
     "BACK": "חזור",
-    "DISMISS": "Dismiss",
+    "DISMISS": "סגור",
     "UPDATE": {
       "ERROR": "לא ניתן היה לעדכן את ההגדרות, נסה שוב!",
       "SUCCESS": "הגדרות החשבון עודכנו בהצלחה"
@@ -50,7 +50,7 @@
     },
     "UPDATE_CHATWOOT": "עדכון %{latestChatwootVersion} עבור Chatwoot זמין. אנא עדכן את המופע שלך.",
     "LEARN_MORE": "למד עוד",
-    "PAYMENT_PENDING": "Your payment is pending. Please update your payment information to continue using Chatwoot",
+    "PAYMENT_PENDING": "התשלום שלך ממתין. אנא עדכן את פרטי התשלום שלך כדי להמשיך להשתמש ב-Chatwoot",
     "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
     "OPEN_BILLING": "Open billing"
   },
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "לא מחובר"
+      "OFFLINE": "לא מחובר",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "רענן"
@@ -116,8 +118,8 @@
       "REMOVE_LABEL": "הסר תווית מהשיחה",
       "SETTINGS": "הגדרות",
       "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "Appearance",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "APPEARANCE": "מראה",
+      "SNOOZE_NOTIFICATION": "השבת התראה זמנית"
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "עבור ללוח המחוונים לשיחה",
@@ -140,7 +142,7 @@
       "ADD_LABELS_TO_CONVERSATION": "הוסף תווית לשיחה",
       "ASSIGN_AN_AGENT": "הקצה סוכן",
       "AI_ASSIST": "AI Assist",
-      "ASSIGN_PRIORITY": "Assign priority",
+      "ASSIGN_PRIORITY": "הקצה עדיפות",
       "ASSIGN_A_TEAM": "הקצה צוות",
       "MUTE_CONVERSATION": "שיחה אילמת",
       "UNMUTE_CONVERSATION": "בטל השתקת שיחה",
@@ -152,14 +154,14 @@
       "UNTIL_NEXT_REPLY": "עד לתשובה הבאה",
       "UNTIL_NEXT_WEEK": "עד שבוע הבא",
       "UNTIL_TOMORROW": "עד מחר",
-      "UNTIL_NEXT_MONTH": "Until next month",
-      "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_NEXT_MONTH": "עד החודש הבא",
+      "AN_HOUR_FROM_NOW": "עד שעה מעכשיו",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
       "SYSTEM_MODE": "System",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "SNOOZE_NOTIFICATION": "השבת התראה זמנית"
     }
   },
   "DASHBOARD_APPS": {
diff --git a/app/javascript/dashboard/i18n/locale/he/helpCenter.json b/app/javascript/dashboard/i18n/locale/he/helpCenter.json
index 03f4d9e8ae872..a1d1a3e0b4fd1 100644
--- a/app/javascript/dashboard/i18n/locale/he/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/he/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/he/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/he/inboxMgmt.json
index 8da24448fc487..05f77085972f3 100644
--- a/app/javascript/dashboard/i18n/locale/he/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/he/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "תיבות דואר נכנס",
     "SIDEBAR_TXT": "<p><b>תיבת דואר נכנס</b></p> <p> כאשר אתה מחבר אתר אינטרנט או דף פייסבוק ל-Chatwoot, זה נקרא <b>תיבת דואר נכנס</b>. אתה יכול לקבל תיבות דואר נכנס בלתי מוגבלות בחשבון Chatwoot שלך. </p><p> לחץ על <b>הוסף תיבת דואר נכנס</b> כדי לחבר אתר או דף פייסבוק. </p><p> בלוח המחוונים, תוכל לראות את כל השיחות מכל תיבות הדואר הנכנס שלך במקום אחד ולהגיב להן בכרטיסייה 'שיחות'. </p><p> תוכל גם לראות שיחות ספציפיות לתיבת דואר נכנס על ידי לחיצה על שם תיבת הדואר הנכנס בחלונית השמאלית של לוח המחוונים. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "אין תיבות דואר נכנס מצורפות לחשבון זה."
     },
@@ -364,6 +366,7 @@
         "TITLE": "אימייל של מיקרוסופט",
         "DESCRIPTION": "לחץ על Sign in with Microsoft בכדי להתחיל. אתה תופנה למסך ההתחברות של Microsoft. ברגע שתאשר את בקשת ההרשאות, תופנה חזרה להגדרות תיבת הדואר.",
         "EMAIL_PLACEHOLDER": "הכנס כתובת דוא\"ל",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "בכדי להוסיף חשבון Microsoft כערוץ, עליך להתחבר לחשבונך ע\"י לחיצה על 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "אירעה שגיאה בהתחברות ל- Microsoft, אנא נסה שנית"
       }
diff --git a/app/javascript/dashboard/i18n/locale/he/integrations.json b/app/javascript/dashboard/i18n/locale/he/integrations.json
index 2e1023d201d6d..1a30333f69caa 100644
--- a/app/javascript/dashboard/i18n/locale/he/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/he/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "אינטגרציות",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "אירועים מנויים",
       "FORM": {
@@ -131,7 +140,7 @@
         "KEY_PLACEHOLDER": "Enter your OpenAI API key",
         "BUTTONS": {
           "NEED_HELP": "זקוק לעזרה?",
-          "DISMISS": "Dismiss",
+          "DISMISS": "סגור",
           "FINISH": "Finish Setup"
         },
         "DISMISS_MESSAGE": "You can setup OpenAI integration later Whenever you want.",
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "הוסף אפליקציית לוח מחוונים חדשה",
       "SIDEBAR_TXT": "<p><b>אפליקציות לוח מחוונים</b></p><p>אפליקציות לוח מחוונים מאפשרות לארגונים להטמיע אפליקציה בתוך לוח המחוונים של Chatwoot כדי לספק את ההקשר לסוכני תמיכת לקוחות. תכונה זו מאפשרת לך ליצור אפליקציה באופן עצמאי ולהטמיע אותה בתוך לוח המחוונים כדי לספק מידע על המשתמש, ההזמנות שלו או היסטוריית התשלומים הקודמת שלו.</p><p>כאשר תטמיע את האפליקציה שלך באמצעות לוח המחוונים ב-Chatwoot, האפליקציה שלך תהיה קבל את ההקשר של השיחה והקשר כאירוע חלון. הטמיע מאזין לאירוע ההודעה בדף שלך כדי לקבל את ההקשר.</p><p>כדי להוסיף אפליקציית לוח מחוונים חדשה, לחץ על הלחצן 'הוסף אפליקציית לוח מחוונים חדשה'.</p>",
       "DESCRIPTION": "אפליקציות לוח מחוונים מאפשרות לארגונים להטמיע אפליקציה בתוך לוח המחוונים כדי לספק את ההקשר לסוכני תמיכת לקוחות. תכונה זו מאפשרת לך ליצור אפליקציה באופן עצמאי ולהטמיע אותה כדי לספק מידע על המשתמש, ההזמנות שלהם או היסטוריית התשלומים הקודמת שלהם.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "אין עדיין אפליקציות לוח מחוונים מוגדרות בחשבון זה",
         "LOADING": "מביא אפליקציות לוח מחוונים...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "אפליקציית לוח המחוונים נמחקה בהצלחה",
         "API_ERROR": "לא הצלחנו למחוק את האפליקציה. אנא נסה שוב מאוחר יותר"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "צור",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "קישור",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "כותרת",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "כותרת שדה חובה"
+          },
+          "DESCRIPTION": {
+            "LABEL": "תיאור",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "צוות",
+            "PLACEHOLDER": "בחר קבוצה",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "תווית",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "מצב",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "צור",
+        "CANCEL": "ביטול",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "מצב",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "תוויות",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/he/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/he/labelsMgmt.json
index 311fc358954a3..f21fb8b0b3deb 100644
--- a/app/javascript/dashboard/i18n/locale/he/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/he/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "תוויות",
     "HEADER_BTN_TXT": "הוסף תווית",
     "LOADING": "מביא תוויות",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "אין פריטים התואמים לשאילתה זו",
-    "SIDEBAR_TXT": "<p><b>תוויות</b> <p>תוויות עוזרות לך לסווג שיחות ולתעדף אותן. אתה יכול להקצות תווית לשיחה מהלוח הצדדי. <br /><br />תוויות קשורות לחשבון וניתן להשתמש בהן כדי ליצור זרימות עבודה מותאמות אישית בארגון שלך. אתה יכול להקצות צבע מותאם אישית לתווית, זה מקל על זיהוי התווית. תוכל להציג את התווית בסרגל הצד כדי לסנן את השיחות בקלות.</p>",
     "LIST": {
       "404": "אין תוויות זמינות בחשבון זה.",
       "TITLE": "נהל תוויות",
@@ -46,10 +47,11 @@
         "DISMISS": "Dismiss suggestion"
       },
       "POWERED_BY": "Chatwoot AI",
-      "DISMISS": "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": "הוסף תווית",
diff --git a/app/javascript/dashboard/i18n/locale/he/macros.json b/app/javascript/dashboard/i18n/locale/he/macros.json
index 5e3d06d83d9c3..595191139b071 100644
--- a/app/javascript/dashboard/i18n/locale/he/macros.json
+++ b/app/javascript/dashboard/i18n/locale/he/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "לבצע",
       "PREVIEW": "תצוגה מקדימה מאקרו",
       "EXECUTED_SUCCESSFULLY": "המאקרו הופעל בהצלחה"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "חובה ערך",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/he/report.json b/app/javascript/dashboard/i18n/locale/he/report.json
index 221078e861e32..671620f909105 100644
--- a/app/javascript/dashboard/i18n/locale/he/report.json
+++ b/app/javascript/dashboard/i18n/locale/he/report.json
@@ -481,7 +481,8 @@
       "HEADER": "תנועת שיחות",
       "NO_CONVERSATIONS": "בלי שיחות",
       "CONVERSATION": "שיחה %{count}",
-      "CONVERSATIONS": "%{count} שיחות"
+      "CONVERSATIONS": "%{count} שיחות",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "שיחות של סוכנים",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "הוסף מסנן",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "לא נמצאו תוצאות",
@@ -536,6 +537,7 @@
       "LABELS": "תווית",
       "TEAMS": "צוות"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/he/resetPassword.json b/app/javascript/dashboard/i18n/locale/he/resetPassword.json
index 20de30b1592cb..d693a219c1bc8 100644
--- a/app/javascript/dashboard/i18n/locale/he/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/he/resetPassword.json
@@ -1,8 +1,8 @@
 {
   "RESET_PASSWORD": {
     "TITLE": "אפס את הסיסמה",
-    "DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
-    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
+    "DESCRIPTION": "הזן את כתובת הדוא\"ל שבה אתה משתמש כדי להיכנס ל-Chatwoot לקבלת הוראות לאיפוס הסיסמה.",
+    "GO_BACK_TO_LOGIN": "אם ברצונך לחזור לדף ההתחברות,",
     "EMAIL": {
       "LABEL": "אימייל",
       "PLACEHOLDER": "הזן בבקשה את האימייל שלך.",
diff --git a/app/javascript/dashboard/i18n/locale/he/search.json b/app/javascript/dashboard/i18n/locale/he/search.json
index 73fdef26e3ea7..74f4d597c474e 100644
--- a/app/javascript/dashboard/i18n/locale/he/search.json
+++ b/app/javascript/dashboard/i18n/locale/he/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "שיחות",
       "MESSAGES": "הודעות"
     },
+    "SEARCHING_DATA": "Searching",
     "EMPTY_STATE": "לא נמצא %{item} עבור השאילתה '%{query}'",
     "EMPTY_STATE_FULL": "לא נמצאו תוצאות עבור השאילתה '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ להתמקד",
diff --git a/app/javascript/dashboard/i18n/locale/he/settings.json b/app/javascript/dashboard/i18n/locale/he/settings.json
index 6bb85c95d4288..96aa29630f7d6 100644
--- a/app/javascript/dashboard/i18n/locale/he/settings.json
+++ b/app/javascript/dashboard/i18n/locale/he/settings.json
@@ -10,7 +10,7 @@
     "PASSWORD_UPDATE_SUCCESS": "הסיסמא שונתה בהצלחה",
     "AFTER_EMAIL_CHANGED": "הפרופיל עודכן בהצלחה, יש להתחבר מחדש",
     "FORM": {
-      "PICTURE": "Profile Picture",
+      "PICTURE": "תמונת פרופיל",
       "AVATAR": "תמונת פרופיל",
       "ERROR": "אנא תקן שגיאות בטופס",
       "REMOVE_IMAGE": "הסר",
@@ -37,12 +37,12 @@
       },
       "MESSAGE_SIGNATURE_SECTION": {
         "TITLE": "חתימת הודעה אישית",
-        "NOTE": "Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes.",
+        "NOTE": "צור חתימת הודעה ייחודית שתופיע בסוף כל הודעה שתשלח מכל תיבת דואר נכנס. ניתן לכלול גם תמונה מוטמעת, הנתמכת בצ'אט חי, דוא\"ל ותיבות דואר נכנסות של API.",
         "BTN_TEXT": "שמירה",
         "API_ERROR": "לא ניתן לשמור את החתימה! אנא נסה שנית",
         "API_SUCCESS": "החתימה נשמרה בהצלחה",
-        "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
-        "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save to save the signature",
+        "IMAGE_UPLOAD_ERROR": "לא ניתן להעלות את התמונה! נסה שוב",
+        "IMAGE_UPLOAD_SUCCESS": "התמונה נוספה בהצלחה. אנא לחץ על שמור כדי לשמור את החתימה",
         "IMAGE_UPLOAD_SIZE_ERROR": "גודל התמונה צריך להיות פחות מ-{size}MB"
       },
       "MESSAGE_SIGNATURE": {
@@ -65,11 +65,11 @@
         "NOTE": "אפשר התראות קוליות להודעות ושיחות חדשות.",
         "ALERT_TYPES": {
           "NONE": "כלום",
-          "MINE": "Assigned",
+          "MINE": "הוקצה",
           "ALL": "הכל"
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "אירועי התראה לשיחות:",
           "NONE": "כלום",
           "ASSIGNED": "שיחות משוייכות",
           "ALL_CONVERSATIONS": "כל השיחות"
@@ -91,19 +91,19 @@
         "CONVERSATION_MENTION": "שלח הודעות דחיפה כאשר אתה מוזכר בשיחה",
         "ASSIGNED_CONVERSATION_NEW_MESSAGE": "שלח התראה באימייל כאשר יש הודעה חדשה בשיחה המוקצית עבורי",
         "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "שלח הודעות דחיפה כאשר נוצרת הודעה חדשה בשיחה המיועדת עבורי",
-        "SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
-        "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
+        "SLA_MISSED_FIRST_RESPONSE": "שלח התראות בדוא\"ל כאשר שיחה לא עומדת בהסכם תנאי השירות (SLA) של התגובה הראשונה",
+        "SLA_MISSED_NEXT_RESPONSE": "שלח התראות בדוא\"ל כאשר שיחה לא עומדת ב-הסכם תנאי השירות (SLA) של התגובה הבאה",
         "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
       "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
+        "TITLE": "העדפות התראות",
+        "TYPE_TITLE": "סוג התראה",
         "EMAIL": "אימייל",
         "PUSH": "Push notification",
         "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
+          "CONVERSATION_CREATED": "שיחה חדשה נוצרה",
+          "CONVERSATION_ASSIGNED": "שיחה הוקצתה לך",
+          "CONVERSATION_MENTION": "הוזכרת בשיחה",
           "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
           "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
           "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
@@ -239,6 +239,7 @@
     "REPORTS": "דיווחים",
     "SETTINGS": "הגדרות",
     "CONTACTS": "איש קשר",
+    "CAPTAIN": "Captain",
     "HOME": "בית",
     "AGENTS": "סוכנים",
     "AGENT_BOTS": "בוטים",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "בטא",
     "REPORTS_OVERVIEW": "סקירה כללית",
-    "FACEBOOK_REAUTHORIZE": "פג תוקף החיבור שלך לפייסבוק, אנא חבר מחדש את דף הפייסבוק שלך כדי להמשיך בשירותים",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "כל המאמרים",
diff --git a/app/javascript/dashboard/i18n/locale/he/teamsSettings.json b/app/javascript/dashboard/i18n/locale/he/teamsSettings.json
index 70683fe9e1731..745e73faa3a2a 100644
--- a/app/javascript/dashboard/i18n/locale/he/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/he/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "צור צוות חדש",
     "HEADER": "צוותים",
-    "SIDEBAR_TXT": "<p><b>צוותים</b></p> <p>צוותים מאפשרים לך לארגן את הסוכנים שלך בקבוצות על סמך תחומי האחריות שלהם. <br /> סוכן יכול להיות חלק ממספר צוותים. אתה יכול להקצות שיחות לצוות כאשר אתה עובד בשיתוף פעולה. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "לא נוצרו צוותים בחשבון זה.",
-      "EDIT_TEAM": "ערוך צוות"
+      "EDIT_TEAM": "ערוך צוות",
+      "NONE": "כלום"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "לא ניתן למחוק את הצוות. נסה שוב."
       },
       "CONFIRM": {
-        "TITLE": "האם אתה בטוח רוצה למחוק - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "אנא הקלד {teamName} כדי לאשר",
         "MESSAGE": "מחיקת הצוות תסיר את הקצאת הצוות מהשיחות שהוקצו לצוות זה.",
         "YES": "מחק ",
diff --git a/app/javascript/dashboard/i18n/locale/hi/advancedFilters.json b/app/javascript/dashboard/i18n/locale/hi/advancedFilters.json
index 170f01d7f339c..7fe7183c3654c 100644
--- a/app/javascript/dashboard/i18n/locale/hi/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/hi/advancedFilters.json
@@ -1,7 +1,7 @@
 {
   "FILTER": {
     "TITLE": "Filter conversations",
-    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
+    "SUBTITLE": "नीचे अपने फ़िल्टर जोड़ें और चैट अव्यवस्था को दूर करने के लिए 'फ़िल्टर लागू करें' पर क्लिक करें।",
     "EDIT_CUSTOM_FILTER": "Edit Folder",
     "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
     "ADD_NEW_FILTER": "Add filter",
@@ -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/hi/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json
index d711762faff0e..f6f2fc866e068 100644
--- a/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/hi/auditLogs.json b/app/javascript/dashboard/i18n/locale/hi/auditLogs.json
index bb30079757f72..7f412b4c085ac 100644
--- a/app/javascript/dashboard/i18n/locale/hi/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/hi/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/hi/automation.json b/app/javascript/dashboard/i18n/locale/hi/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/hi/automation.json
+++ b/app/javascript/dashboard/i18n/locale/hi/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hi/bulkActions.json b/app/javascript/dashboard/i18n/locale/hi/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/hi/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/hi/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/hi/cannedMgmt.json
index 082afcb84eec4..74b152c847e1f 100644
--- a/app/javascript/dashboard/i18n/locale/hi/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hi/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/hi/contact.json b/app/javascript/dashboard/i18n/locale/hi/contact.json
index 7a4a3af3721fa..0c713552b474f 100644
--- a/app/javascript/dashboard/i18n/locale/hi/contact.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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/hi/conversation.json b/app/javascript/dashboard/i18n/locale/hi/conversation.json
index cc3e4569bc729..8eb490a4b5e3f 100644
--- a/app/javascript/dashboard/i18n/locale/hi/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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/hi/general.json b/app/javascript/dashboard/i18n/locale/hi/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/hi/general.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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/hi/generalSettings.json b/app/javascript/dashboard/i18n/locale/hi/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/hi/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hi/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/hi/helpCenter.json b/app/javascript/dashboard/i18n/locale/hi/helpCenter.json
index 467b0def962cf..5c74d99289527 100644
--- a/app/javascript/dashboard/i18n/locale/hi/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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/hi/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json
index 2cd3c1f065788..19212a595c75f 100644
--- a/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/hi/integrations.json b/app/javascript/dashboard/i18n/locale/hi/integrations.json
index 45587f2dbf1ac..7c7adad7a57fc 100644
--- a/app/javascript/dashboard/i18n/locale/hi/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/hi/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "रद्द करें",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hi/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/hi/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/hi/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hi/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/hi/macros.json b/app/javascript/dashboard/i18n/locale/hi/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/hi/macros.json
+++ b/app/javascript/dashboard/i18n/locale/hi/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hi/report.json b/app/javascript/dashboard/i18n/locale/hi/report.json
index c27532783f2cb..b27417c82adb7 100644
--- a/app/javascript/dashboard/i18n/locale/hi/report.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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/hi/search.json b/app/javascript/dashboard/i18n/locale/hi/search.json
index fbafaf73c03f6..bf244893cdec4 100644
--- a/app/javascript/dashboard/i18n/locale/hi/search.json
+++ b/app/javascript/dashboard/i18n/locale/hi/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/i18n/locale/hi/settings.json b/app/javascript/dashboard/i18n/locale/hi/settings.json
index fc8d9982778da..632f45fc12c09 100644
--- a/app/javascript/dashboard/i18n/locale/hi/settings.json
+++ b/app/javascript/dashboard/i18n/locale/hi/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/hi/teamsSettings.json b/app/javascript/dashboard/i18n/locale/hi/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/hi/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hi/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/hr/advancedFilters.json b/app/javascript/dashboard/i18n/locale/hr/advancedFilters.json
index f69ce988ffd88..8e568185a6b43 100644
--- a/app/javascript/dashboard/i18n/locale/hr/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/hr/advancedFilters.json
@@ -1,101 +1,102 @@
 {
   "FILTER": {
-    "TITLE": "Filter conversations",
-    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
-    "EDIT_CUSTOM_FILTER": "Edit Folder",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
-    "ADD_NEW_FILTER": "Add filter",
-    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
-    "SUBMIT_BUTTON_LABEL": "Apply filters",
-    "UPDATE_BUTTON_LABEL": "Update folder",
-    "CANCEL_BUTTON_LABEL": "Cancel",
-    "CLEAR_BUTTON_LABEL": "Clear filters",
-    "FOLDER_LABEL": "Folder Name",
-    "FOLDER_QUERY_LABEL": "Folder Query",
-    "EMPTY_VALUE_ERROR": "Value is required.",
-    "TOOLTIP_LABEL": "Filter conversations",
+    "TITLE": "Filtriraj razgovore",
+    "SUBTITLE": "Dodajte svoje filtre ispod i pritisnite 'Primijeni filtre' da biste se probili kroz nered u chatu.",
+    "EDIT_CUSTOM_FILTER": "Uredi mapu",
+    "CUSTOM_VIEWS_SUBTITLE": "Dodajte ili uklonite filtre i ažurirajte svoju mapu.",
+    "ADD_NEW_FILTER": "Dodaj filter",
+    "FILTER_DELETE_ERROR": "Ups, čini se da ne možemo ništa spremiti! Molimo dodajte barem jedan filter za spremanje.",
+    "SUBMIT_BUTTON_LABEL": "Primijeni filtre",
+    "UPDATE_BUTTON_LABEL": "Ažuriraj mapu",
+    "CANCEL_BUTTON_LABEL": "Odustani",
+    "CLEAR_BUTTON_LABEL": "Očisti filtre",
+    "FOLDER_LABEL": "Naziv mape",
+    "FOLDER_QUERY_LABEL": "Upit mape",
+    "EMPTY_VALUE_ERROR": "Vrijednost je obavezna.",
+    "TOOLTIP_LABEL": "Filtriraj razgovore",
     "QUERY_DROPDOWN_LABELS": {
-      "AND": "AND",
-      "OR": "OR"
+      "AND": "I",
+      "OR": "ILI"
     },
+    "INPUT_PLACEHOLDER": "Unesite vrijednost",
     "OPERATOR_LABELS": {
-      "equal_to": "Equal to",
-      "not_equal_to": "Not equal to",
-      "contains": "Contains",
-      "does_not_contain": "Does not contain",
-      "is_present": "Is present",
-      "is_not_present": "Is not present",
-      "is_greater_than": "Is greater than",
-      "is_less_than": "Is lesser than",
-      "days_before": "Is x days before",
+      "equal_to": "Jednako",
+      "not_equal_to": "Nije jednako",
+      "contains": "Sadrži",
+      "does_not_contain": "Ne sadrži",
+      "is_present": "Prisutno je",
+      "is_not_present": "Nije prisutno",
+      "is_greater_than": "Veće je od",
+      "is_less_than": "Manje je od",
+      "days_before": "Je x dana prije",
       "starts_with": "Počinje s"
     },
     "ATTRIBUTE_LABELS": {
-      "TRUE": "True",
-      "FALSE": "False"
+      "TRUE": "Istina",
+      "FALSE": "Neistina"
     },
     "ATTRIBUTES": {
       "STATUS": "Status",
-      "ASSIGNEE_NAME": "Assignee name",
-      "INBOX_NAME": "Inbox name",
-      "TEAM_NAME": "Team name",
-      "CONVERSATION_IDENTIFIER": "Conversation identifier",
-      "CAMPAIGN_NAME": "Campaign name",
-      "LABELS": "Labels",
-      "BROWSER_LANGUAGE": "Browser language",
+      "ASSIGNEE_NAME": "Ime dodijeljenog",
+      "INBOX_NAME": "Naziv sandučića",
+      "TEAM_NAME": "Naziv tima",
+      "CONVERSATION_IDENTIFIER": "Identifikator razgovora",
+      "CAMPAIGN_NAME": "Naziv kampanje",
+      "LABELS": "Oznake",
+      "BROWSER_LANGUAGE": "Jezik preglednika",
       "PRIORITY": "Prioritet",
-      "COUNTRY_NAME": "Country name",
-      "REFERER_LINK": "Referer link",
-      "CUSTOM_ATTRIBUTE_LIST": "List",
-      "CUSTOM_ATTRIBUTE_TEXT": "Text",
-      "CUSTOM_ATTRIBUTE_NUMBER": "Number",
-      "CUSTOM_ATTRIBUTE_LINK": "Link",
-      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
+      "COUNTRY_NAME": "Ime zemlje",
+      "REFERER_LINK": "Povezica preporuke",
+      "CUSTOM_ATTRIBUTE_LIST": "Popis",
+      "CUSTOM_ATTRIBUTE_TEXT": "Tekst",
+      "CUSTOM_ATTRIBUTE_NUMBER": "Broj",
+      "CUSTOM_ATTRIBUTE_LINK": "Povezica",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Kvačica",
       "CREATED_AT": "Kreirano",
       "LAST_ACTIVITY": "Zadnja aktivnost"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Standard filters",
-      "ADDITIONAL_FILTERS": "Additional filters",
-      "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "STANDARD_FILTERS": "Standardni filteri",
+      "ADDITIONAL_FILTERS": "Dodatni filteri",
+      "CUSTOM_ATTRIBUTES": "Dodatni atributi"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
-        "TITLE": "Do you want to save this filter?",
-        "LABEL": "Name this filter",
-        "PLACEHOLDER": "Name your filter to refer it later.",
-        "ERROR_MESSAGE": "Name is required.",
-        "SAVE_BUTTON": "Save filter",
-        "CANCEL_BUTTON": "Cancel",
+        "TITLE": "Želite li spremiti ovaj filteri?",
+        "LABEL": "Naziv ovog filtera",
+        "PLACEHOLDER": "Dajte ime ovom filteru da ga se prisjetite kasnije.",
+        "ERROR_MESSAGE": "Ime je obavezno.",
+        "SAVE_BUTTON": "Spremi filter",
+        "CANCEL_BUTTON": "Odustani",
         "API_FOLDERS": {
-          "SUCCESS_MESSAGE": "Folder created successfully.",
-          "ERROR_MESSAGE": "Error while creating folder."
+          "SUCCESS_MESSAGE": "Mapa uspješno kreirana.",
+          "ERROR_MESSAGE": "Greška prilikom brisanja mape."
         },
         "API_SEGMENTS": {
-          "SUCCESS_MESSAGE": "Segment created successfully.",
-          "ERROR_MESSAGE": "Error while creating segment."
+          "SUCCESS_MESSAGE": "Segment uspješno kreiran.",
+          "ERROR_MESSAGE": "Greška prilikom kreiranja segmenta."
         }
       },
       "EDIT": {
-        "EDIT_BUTTON": "Edit folder"
+        "EDIT_BUTTON": "Uredi folder"
       },
       "DELETE": {
-        "DELETE_BUTTON": "Delete filter",
+        "DELETE_BUTTON": "Izbriši filter",
         "MODAL": {
           "CONFIRM": {
-            "TITLE": "Confirm deletion",
-            "MESSAGE": "Are you sure to delete the filter ",
-            "YES": "Yes, delete",
-            "NO": "No, keep it"
+            "TITLE": "Potvrdi brisanje",
+            "MESSAGE": "Jeste li sigurno da želite izbrisati filter?",
+            "YES": "Da, izbriši",
+            "NO": "Ne, zadrži"
           }
         },
         "API_FOLDERS": {
-          "SUCCESS_MESSAGE": "Folder deleted successfully.",
-          "ERROR_MESSAGE": "Error while deleting folder."
+          "SUCCESS_MESSAGE": "Folder uspješno izbrisan.",
+          "ERROR_MESSAGE": "Greška prilikom brisanja mape."
         },
         "API_SEGMENTS": {
-          "SUCCESS_MESSAGE": "Segment deleted successfully.",
-          "ERROR_MESSAGE": "Error while deleting segment."
+          "SUCCESS_MESSAGE": "Segment uspješno izbrisan.",
+          "ERROR_MESSAGE": "Greška prilikom brisanja segmenta."
         }
       }
     }
diff --git a/app/javascript/dashboard/i18n/locale/hr/agentBots.json b/app/javascript/dashboard/i18n/locale/hr/agentBots.json
index d65a736a7b979..fb3d25d14258d 100644
--- a/app/javascript/dashboard/i18n/locale/hr/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/hr/agentBots.json
@@ -1,73 +1,73 @@
 {
   "AGENT_BOTS": {
     "HEADER": "Botovi",
-    "LOADING_EDITOR": "Loading editor...",
-    "HEADER_BTN_TXT": "Add bot configuration",
-    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
+    "LOADING_EDITOR": "Otvaranje Editora...",
+    "HEADER_BTN_TXT": "Dodaj konfiguraciju Bota",
+    "SIDEBAR_TXT": "<p><b>Agentski Botovi</b> <p>Agentski Botovi su kao najčudesniji članovi vašeg tima. Oni mogu riješiti male stvari, tako da se možete usredotočiti na stvari koje su važne. Isprobajte ih.</p> <p> Možete upravljati svojim botovima s ove stranice ili stvoriti nove pomoću gumba 'Dodaj konfiguraciju bota'.</p> <p> Otvorite <a href=\"https:/ /www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Priručnik o agentskim botovima</a> u drugoj kartici za pomoć.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
+        "LABEL": "Naziv Bota",
+        "PLACEHOLDER": "Naziv Bota.",
         "ERROR": "Potrebno je unijeti ime Bota."
       },
       "DESCRIPTION": {
-        "LABEL": "Bot description",
+        "LABEL": "Opis Bota",
         "PLACEHOLDER": "Što ovaj Bot radi?"
       },
       "BOT_CONFIG": {
         "ERROR": "Unesi iznad svoju CSML bot konfiguraciju.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+        "API_ERROR": "Unesena CSML konfiguracija nije ispravna, molimo ispravite i ponovno unesite."
       },
       "SUBMIT": "Validacija i pohrana"
     },
     "BOT_CONFIGURATION": {
       "TITLE": "Izaberi agentskog bota",
-      "DESC": "Assign an Agent Bot to your inbox. They can handle initial conversations and transfer them to a live agent when necessary.",
+      "DESC": "Dodijelite Agent Bot svojoj pristigloj pošti. Oni mogu voditi početne razgovore i prebaciti ih živom agentu kada je to potrebno.",
       "SUBMIT": "Ažuriraj",
-      "DISCONNECT": "Disconnect bot",
+      "DISCONNECT": "Isključi Bota",
       "SUCCESS_MESSAGE": "Uspješno ažuriran agentski bot.",
       "DISCONNECTED_SUCCESS_MESSAGE": "Uspješno isključen agentski bot.",
-      "ERROR_MESSAGE": "Could not update the agent bot. Please try again.",
-      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot. Please try again.",
-      "SELECT_PLACEHOLDER": "Select bot"
+      "ERROR_MESSAGE": "Nije moguće ažurirati agentskog bota, molimo pokušajte ponovno.",
+      "DISCONNECTED_ERROR_MESSAGE": "Nije moguće ažurirati agentskog bota, molimo pokušajte ponovno.",
+      "SELECT_PLACEHOLDER": "Izaberi Bota"
     },
     "ADD": {
       "TITLE": "Konfiguriraj novog bota",
       "CANCEL_BUTTON_TEXT": "Odustani",
       "API": {
         "SUCCESS_MESSAGE": "Uspješno dodan Bot.",
-        "ERROR_MESSAGE": "Could not add bot. Please try again later."
+        "ERROR_MESSAGE": "Nije moguće dodati bota, molimo pokušajte kasnije."
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
-      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "404": "Nije pronađen nijedan Bot, možeš kreirati Bota koristeći gumb 'Konfiguriraj novog bota' ↗",
+      "LOADING": "Dohvat Botova...",
+      "TYPE": "Vrsta Bota"
     },
     "DELETE": {
       "BUTTON_TEXT": "Izbriši",
-      "TITLE": "Delete bot",
+      "TITLE": "Izbriši Bota",
       "SUBMIT": "Izbriši",
       "CANCEL_BUTTON_TEXT": "Odustani",
       "DESCRIPTION": "Jeste li sigurni da želite izbrisati ovog bota? Akciju nije moguće poništiti.",
       "API": {
         "SUCCESS_MESSAGE": "Bot uspješno izbrisan.",
-        "ERROR_MESSAGE": "Could not delete bot. Please try again."
+        "ERROR_MESSAGE": "Nije moguće izbrisati bota, molimo pokušajte ponovno."
       }
     },
     "EDIT": {
       "BUTTON_TEXT": "Uredi",
-      "LOADING": "Fetching bots...",
-      "TITLE": "Edit bot",
+      "LOADING": "Dohvat Botova...",
+      "TITLE": "Uredi Bota",
       "CANCEL_BUTTON_TEXT": "Odustani",
       "API": {
         "SUCCESS_MESSAGE": "Bot uspješno izbrisan.",
-        "ERROR_MESSAGE": "Could not update bot. Please try again."
+        "ERROR_MESSAGE": "Nije moguće ažurirati bota, molimo pokušajte ponovno."
       }
     },
     "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "Webhook Bot",
+      "CSML": "CSML Bot"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json
index e5af8f6098100..5b66b9d629f2f 100644
--- a/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json
@@ -1,9 +1,10 @@
 {
   "AGENT_MGMT": {
-    "HEADER": "Agents",
-    "HEADER_BTN_TXT": "Add Agent",
-    "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "HEADER": "Agenti",
+    "HEADER_BTN_TXT": "Dodaj agenta",
+    "LOADING": "Dohvaćanje popisa agenata",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
@@ -12,66 +13,66 @@
       "404": "There are no agents associated to this account",
       "TITLE": "Manage agents in your team",
       "DESC": "You can add/remove agents to/in your team.",
-      "NAME": "Name",
-      "EMAIL": "EMAIL",
+      "NAME": "Ime",
+      "EMAIL": "E-pošta",
       "STATUS": "Status",
-      "ACTIONS": "Actions",
-      "VERIFIED": "Verified",
-      "VERIFICATION_PENDING": "Verification Pending"
+      "ACTIONS": "Radnje",
+      "VERIFIED": "Potvrđen",
+      "VERIFICATION_PENDING": "Potvrda na čekanju"
     },
     "ADD": {
-      "TITLE": "Add agent to your team",
+      "TITLE": "Dodaj agenta u svoj tim",
       "DESC": "You can add people who will be able to handle support for your inboxes.",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "FORM": {
         "NAME": {
-          "LABEL": "Agent Name",
+          "LABEL": "Ime agenta",
           "PLACEHOLDER": "Please enter a name of the agent"
         },
         "AGENT_TYPE": {
-          "LABEL": "Role",
+          "LABEL": "Uloga",
           "PLACEHOLDER": "Please select a role",
           "ERROR": "Role is required"
         },
         "EMAIL": {
-          "LABEL": "Email Address",
+          "LABEL": "Adresa e-pošte",
           "PLACEHOLDER": "Please enter an email address of the agent"
         },
-        "SUBMIT": "Add Agent"
+        "SUBMIT": "Dodaj agenta"
       },
       "API": {
-        "SUCCESS_MESSAGE": "Agent added successfully",
+        "SUCCESS_MESSAGE": "Uspješno dodan agent",
         "EXIST_MESSAGE": "Agent email already in use, Please try another email address",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "API": {
-        "SUCCESS_MESSAGE": "Agent deleted successfully",
+        "SUCCESS_MESSAGE": "Agent uspješno izbrisan",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       },
       "CONFIRM": {
-        "TITLE": "Confirm Deletion",
+        "TITLE": "Potvrdi brisanje",
         "MESSAGE": "Are you sure to delete ",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+        "YES": "Da, izbriši",
+        "NO": "Ne, zadrži"
       }
     },
     "EDIT": {
-      "TITLE": "Edit agent",
+      "TITLE": "Uredi agenta",
       "FORM": {
         "NAME": {
-          "LABEL": "Agent Name",
+          "LABEL": "Ime agenta",
           "PLACEHOLDER": "Please enter a name of the agent"
         },
         "AGENT_TYPE": {
-          "LABEL": "Role",
-          "PLACEHOLDER": "Please select a role",
-          "ERROR": "Role is required"
+          "LABEL": "Uloga",
+          "PLACEHOLDER": "Molimo odaberite ulogu",
+          "ERROR": "Potrebno je unijeti ulogu"
         },
         "EMAIL": {
-          "LABEL": "Email Address",
+          "LABEL": "Adresa e-pošte",
           "PLACEHOLDER": "Please enter an email address of the agent"
         },
         "AGENT_AVAILABILITY": {
@@ -79,16 +80,16 @@
           "PLACEHOLDER": "Izaberi status raspoloživosti",
           "ERROR": "Potrebna je raspoloživost"
         },
-        "SUBMIT": "Edit Agent"
+        "SUBMIT": "Uredi agenta"
       },
-      "BUTTON_TEXT": "Edit",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "BUTTON_TEXT": "Uredi",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "API": {
-        "SUCCESS_MESSAGE": "Agent updated successfully",
+        "SUCCESS_MESSAGE": "Agent uspješno ažuriran",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       },
       "PASSWORD_RESET": {
-        "ADMIN_RESET_BUTTON": "Reset Password",
+        "ADMIN_RESET_BUTTON": "Ponovno postvljanje lozinke",
         "ADMIN_SUCCESS_MESSAGE": "An email with reset password instructions has been sent to the agent",
         "SUCCESS_MESSAGE": "Agent password reset successfully",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
diff --git a/app/javascript/dashboard/i18n/locale/hr/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/hr/attributesMgmt.json
index 64a0e83d6f53f..21c5bd24753a4 100644
--- a/app/javascript/dashboard/i18n/locale/hr/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hr/attributesMgmt.json
@@ -7,7 +7,7 @@
     "ADD": {
       "TITLE": "Add Custom Attribute",
       "SUBMIT": "Create",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "FORM": {
         "NAME": {
           "LABEL": "Display Name",
@@ -58,7 +58,7 @@
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "API": {
         "SUCCESS_MESSAGE": "Custom Attribute deleted successfully.",
         "ERROR_MESSAGE": "Couldn't delete the custom attribute. Try again."
@@ -68,7 +68,7 @@
         "PLACE_HOLDER": "Please type {attributeName} to confirm",
         "MESSAGE": "Deleting will remove the custom attribute",
         "YES": "Delete ",
-        "NO": "Cancel"
+        "NO": "Odustani"
       }
     },
     "EDIT": {
@@ -92,14 +92,14 @@
     },
     "LIST": {
       "TABLE_HEADER": [
-        "Name",
+        "Ime",
         "Description",
         "Type",
         "Key"
       ],
       "BUTTONS": {
-        "EDIT": "Edit",
-        "DELETE": "Delete"
+        "EDIT": "Uredi",
+        "DELETE": "Izbriši"
       },
       "EMPTY_RESULT": {
         "404": "There are no custom attributes created",
diff --git a/app/javascript/dashboard/i18n/locale/hr/auditLogs.json b/app/javascript/dashboard/i18n/locale/hr/auditLogs.json
index bbf3034b0dda7..d4bf01e910eea 100644
--- a/app/javascript/dashboard/i18n/locale/hr/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/hr/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logovi",
     "HEADER_BTN_TXT": "Dodaj Audit Logove",
     "LOADING": "Dohvat Audit Logova",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Ne postoji rezultat za zadano pretraživanje",
     "SIDEBAR_TXT": "<p><b>Audit Logovi</b> </p><p> Audit Logovi su tragovi događaja i akcija u Chatwoot sustavu. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/hr/automation.json b/app/javascript/dashboard/i18n/locale/hr/automation.json
index 88056e60de35c..9bfece531ec19 100644
--- a/app/javascript/dashboard/i18n/locale/hr/automation.json
+++ b/app/javascript/dashboard/i18n/locale/hr/automation.json
@@ -7,7 +7,7 @@
     "ADD": {
       "TITLE": "Add Automation Rule",
       "SUBMIT": "Create",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "FORM": {
         "NAME": {
           "LABEL": "Rule Name",
@@ -28,7 +28,7 @@
           "LABEL": "Conditions"
         },
         "ACTIONS": {
-          "LABEL": "Actions"
+          "LABEL": "Radnje"
         }
       },
       "CONDITION_BUTTON_LABEL": "Add Condition",
@@ -40,7 +40,7 @@
     },
     "LIST": {
       "TABLE_HEADER": [
-        "Name",
+        "Ime",
         "Description",
         "Active",
         "Created on"
@@ -49,13 +49,13 @@
     },
     "DELETE": {
       "TITLE": "Delete Automation Rule",
-      "SUBMIT": "Delete",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "SUBMIT": "Izbriši",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "CONFIRM": {
-        "TITLE": "Confirm Deletion",
+        "TITLE": "Potvrdi brisanje",
         "MESSAGE": "Are you sure to delete ",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+        "YES": "Da, izbriši",
+        "NO": "Ne, zadrži"
       },
       "API": {
         "SUCCESS_MESSAGE": "Automation rule deleted successfully",
@@ -65,7 +65,7 @@
     "EDIT": {
       "TITLE": "Edit Automation Rule",
       "SUBMIT": "Update",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "API": {
         "SUCCESS_MESSAGE": "Automation rule updated successfully",
         "ERROR_MESSAGE": "Could not update automation rule, Please try again later"
@@ -79,10 +79,10 @@
       }
     },
     "FORM": {
-      "EDIT": "Edit",
+      "EDIT": "Uredi",
       "CREATE": "Create",
-      "DELETE": "Delete",
-      "CANCEL": "Cancel",
+      "DELETE": "Izbriši",
+      "CANCEL": "Odustani",
       "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
     },
     "CONDITION": {
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Prenosim...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/bulkActions.json b/app/javascript/dashboard/i18n/locale/hr/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/hr/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/hr/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/hr/campaign.json b/app/javascript/dashboard/i18n/locale/hr/campaign.json
index cbf061b30cb44..ff4b0e0ac421e 100644
--- a/app/javascript/dashboard/i18n/locale/hr/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/hr/campaign.json
@@ -9,7 +9,7 @@
     "ADD": {
       "TITLE": "Create a campaign",
       "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "CREATE_BUTTON_TEXT": "Create",
       "FORM": {
         "TITLE": {
@@ -63,12 +63,12 @@
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "CONFIRM": {
-        "TITLE": "Confirm Deletion",
+        "TITLE": "Potvrdi brisanje",
         "MESSAGE": "Are you sure to delete?",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+        "YES": "Da, izbriši",
+        "NO": "Ne, zadrži"
       },
       "API": {
         "SUCCESS_MESSAGE": "Campaign deleted successfully",
@@ -99,8 +99,8 @@
       },
       "BUTTONS": {
         "ADD": "Add",
-        "EDIT": "Edit",
-        "DELETE": "Delete"
+        "EDIT": "Uredi",
+        "DELETE": "Izbriši"
       },
       "STATUS": {
         "ENABLED": "Enabled",
diff --git a/app/javascript/dashboard/i18n/locale/hr/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/hr/cannedMgmt.json
index 15fbe05acb9b7..ada1e02134093 100644
--- a/app/javascript/dashboard/i18n/locale/hr/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hr/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Saznajte više o unaprijed pripremljenim odgovorima",
+    "DESCRIPTION": "Unaprijed pripremljeni odgovori su već napisani predlošci za odgovore koji vam pomažu da brzo odgovorite na razgovor. Agenti mogu upisati znak '/' nakon kojeg slijedi kratki kod za umetanje unaprijed pripremljenog odgovora tijekom razgovora.",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Ne postoji rezultat za zadano pretraživanje.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
@@ -12,13 +13,13 @@
       "TABLE_HEADER": [
         "Short code",
         "Content",
-        "Actions"
+        "Radnje"
       ]
     },
     "ADD": {
       "TITLE": "Add canned response",
       "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "FORM": {
         "SHORT_CODE": {
           "LABEL": "Short code",
@@ -39,7 +40,7 @@
     },
     "EDIT": {
       "TITLE": "Edit canned response",
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "FORM": {
         "SHORT_CODE": {
           "LABEL": "Short code",
@@ -53,14 +54,14 @@
         },
         "SUBMIT": "Submit"
       },
-      "BUTTON_TEXT": "Edit",
+      "BUTTON_TEXT": "Uredi",
       "API": {
         "SUCCESS_MESSAGE": "Canned response is updated successfully.",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "API": {
         "SUCCESS_MESSAGE": "Canned response deleted successfully.",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
diff --git a/app/javascript/dashboard/i18n/locale/hr/contact.json b/app/javascript/dashboard/i18n/locale/hr/contact.json
index ba36b5118f5dc..e92ab9c337f5d 100644
--- a/app/javascript/dashboard/i18n/locale/hr/contact.json
+++ b/app/javascript/dashboard/i18n/locale/hr/contact.json
@@ -1,7 +1,7 @@
 {
   "CONTACT_PANEL": {
     "NOT_AVAILABLE": "Not Available",
-    "EMAIL_ADDRESS": "Email Address",
+    "EMAIL_ADDRESS": "Adresa e-pošte",
     "PHONE_NUMBER": "Phone number",
     "IDENTIFIER": "Identifier",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
@@ -44,7 +44,7 @@
     "MUTED_SUCCESS": "This contact is blocked successfully. You will not be notified of any future conversations.",
     "UNMUTED_SUCCESS": "This contact is unblocked successfully.",
     "SEND_TRANSCRIPT": "Send Transcript",
-    "EDIT_LABEL": "Edit",
+    "EDIT_LABEL": "Uredi",
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Custom Attributes",
       "CONTACT_LABELS": "Contact Labels",
@@ -70,7 +70,7 @@
     "FORM": {
       "LABEL": "CSV File",
       "SUBMIT": "Import",
-      "CANCEL": "Cancel"
+      "CANCEL": "Odustani"
     },
     "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
     "ERROR_MESSAGE": "There was an error, please try again"
@@ -91,7 +91,7 @@
   },
   "DELETE_NOTE": {
     "CONFIRM": {
-      "TITLE": "Confirm Deletion",
+      "TITLE": "Potvrdi brisanje",
       "MESSAGE": "Are you want sure to delete this note?",
       "YES": "Yes, Delete it",
       "NO": "No, Keep it"
@@ -102,7 +102,7 @@
     "TITLE": "Delete contact",
     "DESC": "Delete contact details",
     "CONFIRM": {
-      "TITLE": "Confirm Deletion",
+      "TITLE": "Potvrdi brisanje",
       "MESSAGE": "Are you sure to delete ",
       "YES": "Yes, Delete",
       "NO": "No, Keep"
@@ -115,7 +115,7 @@
   "CONTACT_FORM": {
     "FORM": {
       "SUBMIT": "Submit",
-      "CANCEL": "Cancel",
+      "CANCEL": "Odustani",
       "AVATAR": {
         "LABEL": "Contact Avatar"
       },
@@ -129,7 +129,7 @@
       },
       "EMAIL_ADDRESS": {
         "PLACEHOLDER": "Enter the email address of the contact",
-        "LABEL": "Email Address",
+        "LABEL": "Adresa e-pošte",
         "DUPLICATE": "This email address is in use for another contact.",
         "ERROR": "Please enter a valid email address."
       },
@@ -217,7 +217,7 @@
         "HELP_TEXT": "Drag and drop files here or choose files to attach"
       },
       "SUBMIT": "Send message",
-      "CANCEL": "Cancel",
+      "CANCEL": "Odustani",
       "SUCCESS_MESSAGE": "Message sent!",
       "GO_TO_CONVERSATION": "View",
       "ERROR_MESSAGE": "Couldn't send! try again"
@@ -229,15 +229,15 @@
     "SEARCH_BUTTON": "Search",
     "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
     "FILTER_CONTACTS": "Filter",
-    "FILTER_CONTACTS_SAVE": "Save filter",
-    "FILTER_CONTACTS_DELETE": "Delete filter",
+    "FILTER_CONTACTS_SAVE": "Spremi filter",
+    "FILTER_CONTACTS_DELETE": "Izbriši filter",
     "FILTER_CONTACTS_EDIT": "Edit segment",
     "LIST": {
       "LOADING_MESSAGE": "Loading contacts...",
       "404": "No contacts matches your search 🔍",
       "NO_CONTACTS": "There are no available contacts",
       "TABLE_HEADER": {
-        "NAME": "Name",
+        "NAME": "Ime",
         "PHONE_NUMBER": "Phone Number",
         "CONVERSATIONS": "Conversations",
         "LAST_ACTIVITY": "Last Activity",
@@ -246,7 +246,7 @@
         "CITY": "City",
         "SOCIAL_PROFILES": "Social Profiles",
         "COMPANY": "Company",
-        "EMAIL_ADDRESS": "Email Address"
+        "EMAIL_ADDRESS": "Adresa e-pošte"
       },
       "VIEW_DETAILS": "View details"
     }
@@ -311,7 +311,7 @@
     },
     "FORM": {
       "CREATE": "Add attribute",
-      "CANCEL": "Cancel",
+      "CANCEL": "Odustani",
       "NAME": {
         "LABEL": "Custom attribute name",
         "PLACEHOLDER": "Eg: shopify id",
@@ -375,12 +375,15 @@
     },
     "FORM": {
       "SUBMIT": " Merge contacts",
-      "CANCEL": "Cancel",
+      "CANCEL": "Odustani",
       "CHILD_CONTACT": {
         "ERROR": "Select a child contact to merge"
       },
       "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/hr/contactFilters.json b/app/javascript/dashboard/i18n/locale/hr/contactFilters.json
index 02d5dcf890c17..9d1051c620162 100644
--- a/app/javascript/dashboard/i18n/locale/hr/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/hr/contactFilters.json
@@ -9,39 +9,39 @@
     "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
     "SUBMIT_BUTTON_LABEL": "Submit",
     "UPDATE_BUTTON_LABEL": "Update Segment",
-    "CANCEL_BUTTON_LABEL": "Cancel",
+    "CANCEL_BUTTON_LABEL": "Odustani",
     "CLEAR_BUTTON_LABEL": "Clear Filters",
     "EMPTY_VALUE_ERROR": "Value is required",
     "SEGMENT_LABEL": "Segment Name",
     "SEGMENT_QUERY_LABEL": "Segment Query",
     "TOOLTIP_LABEL": "Filter contacts",
     "QUERY_DROPDOWN_LABELS": {
-      "AND": "AND",
-      "OR": "OR"
+      "AND": "I",
+      "OR": "ILI"
     },
     "OPERATOR_LABELS": {
-      "equal_to": "Equal to",
-      "not_equal_to": "Not equal to",
-      "contains": "Contains",
-      "does_not_contain": "Does not contain",
-      "is_present": "Is present",
-      "is_not_present": "Is not present",
-      "is_greater_than": "Is greater than",
+      "equal_to": "Jednako",
+      "not_equal_to": "Nije jednako",
+      "contains": "Sadrži",
+      "does_not_contain": "Ne sadrži",
+      "is_present": "Prisutno je",
+      "is_not_present": "Nije prisutno",
+      "is_greater_than": "Veće je od",
       "is_lesser_than": "Is lesser than",
-      "days_before": "Is x days before"
+      "days_before": "Je x dana prije"
     },
     "ATTRIBUTES": {
-      "NAME": "Name",
+      "NAME": "Ime",
       "EMAIL": "Email",
       "PHONE_NUMBER": "Phone number",
       "IDENTIFIER": "Identifier",
       "CITY": "City",
       "COUNTRY": "Country",
-      "CUSTOM_ATTRIBUTE_LIST": "List",
-      "CUSTOM_ATTRIBUTE_TEXT": "Text",
-      "CUSTOM_ATTRIBUTE_NUMBER": "Number",
-      "CUSTOM_ATTRIBUTE_LINK": "Link",
-      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
+      "CUSTOM_ATTRIBUTE_LIST": "Popis",
+      "CUSTOM_ATTRIBUTE_TEXT": "Tekst",
+      "CUSTOM_ATTRIBUTE_NUMBER": "Broj",
+      "CUSTOM_ATTRIBUTE_LINK": "Povezica",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Kvačica",
       "CREATED_AT": "Created At",
       "LAST_ACTIVITY": "Last Activity",
       "REFERER_LINK": "Referrer link",
diff --git a/app/javascript/dashboard/i18n/locale/hr/conversation.json b/app/javascript/dashboard/i18n/locale/hr/conversation.json
index b7d31aab7e0c5..e6b513e76a5fc 100644
--- a/app/javascript/dashboard/i18n/locale/hr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hr/conversation.json
@@ -142,14 +142,15 @@
       "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 Predlošci"
     },
     "REPLYBOX": {
       "REPLY": "Reply",
       "PRIVATE_NOTE": "Private Note",
       "SEND": "Send",
       "CREATE": "Add Note",
-      "INSERT_READ_MORE": "Read more",
+      "INSERT_READ_MORE": "Pročitaj više",
       "DISMISS_REPLY": "Dismiss reply",
       "REPLYING_TO": "Replying to:",
       "TIP_FORMAT_ICON": "Show rich text editor",
@@ -181,7 +182,7 @@
         "MESSAGE": "You have {undefinedVariablesCount} undefined variables in your message: {undefinedVariables}. Would you like to send the message anyway?",
         "CONFIRM": {
           "YES": "Send",
-          "CANCEL": "Cancel"
+          "CANCEL": "Odustani"
         }
       }
     },
@@ -201,13 +202,13 @@
     "TRY_AGAIN": "retry",
     "ASSIGNMENT": {
       "SELECT_AGENT": "Select Agent",
-      "REMOVE": "Remove",
+      "REMOVE": "Izbriši",
       "ASSIGN": "Assign"
     },
     "CONTEXT_MENU": {
       "COPY": "Copy",
       "REPLY_TO": "Reply to this message",
-      "DELETE": "Delete",
+      "DELETE": "Izbriši",
       "CREATE_A_CANNED_RESPONSE": "Add to canned responses",
       "TRANSLATE": "Translate",
       "COPY_PERMALINK": "Copy link to the message",
@@ -215,8 +216,8 @@
       "DELETE_CONFIRMATION": {
         "TITLE": "Are you sure you want to delete this message?",
         "MESSAGE": "You cannot undo this action",
-        "DELETE": "Delete",
-        "CANCEL": "Cancel"
+        "DELETE": "Izbriši",
+        "CANCEL": "Odustani"
       }
     }
   },
@@ -224,7 +225,7 @@
     "TITLE": "Send conversation transcript",
     "DESC": "Send a copy of the conversation transcript to the specified email address",
     "SUBMIT": "Submit",
-    "CANCEL": "Cancel",
+    "CANCEL": "Odustani",
     "SEND_EMAIL_SUCCESS": "The chat transcript was sent successfully",
     "SEND_EMAIL_ERROR": "There was an error, please try again",
     "FORM": {
diff --git a/app/javascript/dashboard/i18n/locale/hr/general.json b/app/javascript/dashboard/i18n/locale/hr/general.json
index 25bb4dfb736d2..f6cab3daefc81 100644
--- a/app/javascript/dashboard/i18n/locale/hr/general.json
+++ b/app/javascript/dashboard/i18n/locale/hr/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": "Nisu pronađeni rezultati"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/generalSettings.json b/app/javascript/dashboard/i18n/locale/hr/generalSettings.json
index fe625da3cf524..5b4c8024c9ed8 100644
--- a/app/javascript/dashboard/i18n/locale/hr/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hr/generalSettings.json
@@ -76,7 +76,7 @@
       "LOADING_MESSAGE": "Loading notifications...",
       "404": "No Notifications",
       "TABLE_HEADER": [
-        "Name",
+        "Ime",
         "Phone Number",
         "Conversations",
         "Last Contacted"
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/hr/helpCenter.json b/app/javascript/dashboard/i18n/locale/hr/helpCenter.json
index f36e694053d62..3ed4232b300f8 100644
--- a/app/javascript/dashboard/i18n/locale/hr/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/hr/helpCenter.json
@@ -4,16 +4,16 @@
       "FILTER": "Filter by",
       "SORT": "Sort by",
       "LOCALE": "Locale",
-      "SETTINGS_BUTTON": "Settings",
+      "SETTINGS_BUTTON": "Postavke",
       "NEW_BUTTON": "New Article",
       "DROPDOWN_OPTIONS": {
         "PUBLISHED": "Published",
-        "DRAFT": "Draft",
-        "ARCHIVED": "Archived"
+        "DRAFT": "Skica",
+        "ARCHIVED": "Arhivirano"
       },
       "TITLES": {
-        "ALL_ARTICLES": "All Articles",
-        "MINE": "My Articles",
+        "ALL_ARTICLES": "Svi članci",
+        "MINE": "Moji članci",
         "DRAFT": "Draft Articles",
         "ARCHIVED": "Archived Articles"
       },
@@ -25,10 +25,10 @@
       }
     },
     "EDIT_HEADER": {
-      "ALL_ARTICLES": "All Articles",
-      "PUBLISH_BUTTON": "Publish",
+      "ALL_ARTICLES": "Svi članci",
+      "PUBLISH_BUTTON": "Objavi",
       "MOVE_TO_ARCHIVE_BUTTON": "Move to archived",
-      "PREVIEW": "Preview",
+      "PREVIEW": "Pretpregled",
       "ADD_TRANSLATION": "Add translation",
       "OPEN_SIDEBAR": "Open sidebar",
       "CLOSE_SIDEBAR": "Close sidebar",
@@ -37,7 +37,7 @@
     },
     "ARTICLE_EDITOR": {
       "IMAGE_UPLOAD": {
-        "TITLE": "Upload image",
+        "TITLE": "Prenesi sliku",
         "UPLOADING": "Prenosim...",
         "SUCCESS": "Image uploaded successfully",
         "ERROR": "Error while uploading image",
@@ -106,7 +106,7 @@
         "TITLE": "Portals",
         "PORTAL_SETTINGS": "Portal settings",
         "SUBTITLE": "You have multiple portals and can have different locales for each portal.",
-        "CANCEL_BUTTON_LABEL": "Cancel",
+        "CANCEL_BUTTON_LABEL": "Odustani",
         "CHOOSE_LOCALE_BUTTON": "Choose Locale"
       },
       "PORTAL_SETTINGS": {
@@ -116,12 +116,12 @@
             "ADD": "Add locale",
             "VISIT": "Visit site",
             "SETTINGS": "Settings",
-            "DELETE": "Delete"
+            "DELETE": "Izbriši"
           },
           "PORTAL_CONFIG": {
             "TITLE": "Portal Configurations",
             "ITEMS": {
-              "NAME": "Name",
+              "NAME": "Ime",
               "DOMAIN": "Custom domain",
               "SLUG": "Slug",
               "TITLE": "Portal title",
@@ -137,7 +137,7 @@
               "ARTICLE_COUNT": "No. of articles",
               "CATEGORIES": "No. of categories",
               "SWAP": "Swap",
-              "DELETE": "Delete",
+              "DELETE": "Izbriši",
               "DEFAULT_LOCALE": "Default"
             }
           }
@@ -173,7 +173,7 @@
           "TITLE": "Categories in",
           "NEW_CATEGORY": "New category",
           "TABLE": {
-            "NAME": "Name",
+            "NAME": "Ime",
             "DESCRIPTION": "Description",
             "LOCALE": "Locale",
             "ARTICLE_COUNT": "No. of articles",
@@ -181,7 +181,7 @@
               "EDIT": "Edit category",
               "DELETE": "Delete category"
             },
-            "EMPTY_TEXT": "No categories found"
+            "EMPTY_TEXT": "Nisu pronađene kategorije"
           }
         },
         "EDIT_BASIC_INFO": {
@@ -236,7 +236,7 @@
           "IMAGE_DELETE_ERROR": "Error while deleting logo"
         },
         "NAME": {
-          "LABEL": "Name",
+          "LABEL": "Ime",
           "PLACEHOLDER": "Portal name",
           "HELP_TEXT": "The name will be used in the public facing portal internally.",
           "ERROR": "Name is required"
@@ -292,7 +292,7 @@
         },
         "BUTTONS": {
           "CREATE": "Create locale",
-          "CANCEL": "Cancel"
+          "CANCEL": "Odustani"
         },
         "API": {
           "SUCCESS_MESSAGE": "Locale added successfully",
@@ -351,7 +351,7 @@
     "DELETE_ARTICLE": {
       "MODAL": {
         "CONFIRM": {
-          "TITLE": "Confirm Deletion",
+          "TITLE": "Potvrdi brisanje",
           "MESSAGE": "Are you sure to delete the article?",
           "YES": "Yes, Delete",
           "NO": "No, Keep it"
@@ -377,7 +377,7 @@
         "PORTAL": "Portal",
         "LOCALE": "Locale",
         "NAME": {
-          "LABEL": "Name",
+          "LABEL": "Ime",
           "PLACEHOLDER": "Category name",
           "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
           "ERROR": "Name is required"
@@ -395,7 +395,7 @@
         },
         "BUTTONS": {
           "CREATE": "Create category",
-          "CANCEL": "Cancel"
+          "CANCEL": "Odustani"
         },
         "API": {
           "SUCCESS_MESSAGE": "Category created successfully",
@@ -408,7 +408,7 @@
         "PORTAL": "Portal",
         "LOCALE": "Locale",
         "NAME": {
-          "LABEL": "Name",
+          "LABEL": "Ime",
           "PLACEHOLDER": "Category name",
           "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
           "ERROR": "Name is required"
@@ -426,7 +426,7 @@
         },
         "BUTTONS": {
           "CREATE": "Update category",
-          "CANCEL": "Cancel"
+          "CANCEL": "Odustani"
         },
         "API": {
           "SUCCESS_MESSAGE": "Category updated successfully",
@@ -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/hr/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/hr/inboxMgmt.json
index 95a06c4bde168..53afbe6cba8d9 100644
--- a/app/javascript/dashboard/i18n/locale/hr/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hr/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -343,7 +345,7 @@
         "DESC": "Chatwoot supports live-chat widgets, Facebook Messenger, Twitter profiles, WhatsApp, Emails, etc., as channels. If you want to build a custom channel, you can create it using the API channel. To get started, choose one of the channels below."
       },
       "AGENTS": {
-        "TITLE": "Agents",
+        "TITLE": "Agenti",
         "DESC": "Here you can add agents to manage your newly created inbox. Only these selected agents will have access to your inbox. Agents which are not part of this inbox will not be able to see or respond to messages in this inbox when they login. <br> <b>PS:</b> As an administrator, if you need access to all inboxes, you should add yourself as agent to all inboxes that you create.",
         "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
         "PICK_AGENTS": "Pick agents for the inbox"
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
@@ -410,7 +413,7 @@
         "FOR_EG": "For eg:",
         "FRIENDLY": {
           "TITLE": "Prijateljski",
-          "FROM": "from",
+          "FROM": "od",
           "SUBTITLE": "Add the name of the agent who sent the reply in the sender name to make it friendly."
         },
         "PROFESSIONAL": {
@@ -440,14 +443,14 @@
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "AVATAR_DELETE_BUTTON_TEXT": "Delete Avatar",
       "CONFIRM": {
-        "TITLE": "Confirm Deletion",
+        "TITLE": "Potvrdi brisanje",
         "MESSAGE": "Are you sure to delete ",
         "PLACE_HOLDER": "Please type {inboxName} to confirm",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+        "YES": "Da, izbriši",
+        "NO": "Ne, zadrži"
       },
       "API": {
         "SUCCESS_MESSAGE": "Inbox deleted successfully",
@@ -477,7 +480,7 @@
     "SETTINGS_POPUP": {
       "MESSENGER_HEADING": "Messenger Script",
       "MESSENGER_SUB_HEAD": "Place this button inside your body tag",
-      "INBOX_AGENTS": "Agents",
+      "INBOX_AGENTS": "Agenti",
       "INBOX_AGENTS_SUB_TEXT": "Add or remove agents from this inbox",
       "AGENT_ASSIGNMENT": "Conversation Assignment",
       "AGENT_ASSIGNMENT_SUB_TEXT": "Update conversation assignment settings",
@@ -683,9 +686,9 @@
         "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position",
         "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type",
         "WIDGET_BUBBLE_LAUNCHER_TITLE": {
-          "DEFAULT": "Chat with us",
+          "DEFAULT": "Čavrljajte s nama",
           "LABEL": "Widget Bubble Launcher Title",
-          "PLACE_HOLDER": "Chat with us"
+          "PLACE_HOLDER": "Čavrljajte s nama"
         },
         "UPDATE": {
           "BUTTON_TEXT": "Update Widget Settings",
@@ -695,7 +698,7 @@
           }
         },
         "WIDGET_VIEW_OPTION": {
-          "PREVIEW": "Preview",
+          "PREVIEW": "Pretpregled",
           "SCRIPT": "Script"
         },
         "WIDGET_BUBBLE_POSITION": {
@@ -712,13 +715,13 @@
         "CHAT": "Chat"
       },
       "REPLY_TIME": {
-        "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
-        "IN_A_FEW_HOURS": "Typically replies in a few hours",
-        "IN_A_DAY": "Typically replies in a day"
+        "IN_A_FEW_MINUTES": "Obično odgovara za nekoliko minuta",
+        "IN_A_FEW_HOURS": "Obično odgovara za nekoliko sati",
+        "IN_A_DAY": "Obično odgovara u roku jednog dana"
       },
       "FOOTER": {
-        "START_CONVERSATION_BUTTON_TEXT": "Start Conversation",
-        "CHAT_INPUT_PLACEHOLDER": "Type your message"
+        "START_CONVERSATION_BUTTON_TEXT": "Započnite razgovor",
+        "CHAT_INPUT_PLACEHOLDER": "Unesite svoju poruku"
       },
       "BODY": {
         "TEAM_AVAILABILITY": {
@@ -728,7 +731,7 @@
         "USER_MESSAGE": "Hi",
         "AGENT_MESSAGE": "Hello"
       },
-      "BRANDING_TEXT": "Powered by Chatwoot",
+      "BRANDING_TEXT": "Pokreće Chatwoot",
       "SCRIPT_SETTINGS": "\n      window.chatwootSettings = {options};"
     },
     "EMAIL_PROVIDERS": {
diff --git a/app/javascript/dashboard/i18n/locale/hr/integrationApps.json b/app/javascript/dashboard/i18n/locale/hr/integrationApps.json
index a80ecb8372e78..cde3dc027d714 100644
--- a/app/javascript/dashboard/i18n/locale/hr/integrationApps.json
+++ b/app/javascript/dashboard/i18n/locale/hr/integrationApps.json
@@ -22,7 +22,7 @@
         "INBOX": "Yes, Delete",
         "ACCOUNT": "Yes, Disconnect"
       },
-      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CANCEL_BUTTON_TEXT": "Odustani",
       "API": {
         "SUCCESS_MESSAGE": "Hook deleted successfully",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
@@ -32,7 +32,7 @@
       "FETCHING": "Fetching integration hooks",
       "INBOX": "Inbox",
       "DELETE": {
-        "BUTTON_TEXT": "Delete"
+        "BUTTON_TEXT": "Izbriši"
       }
     },
     "ADD": {
@@ -42,7 +42,7 @@
           "PLACEHOLDER": "Select Inbox"
         },
         "SUBMIT": "Create",
-        "CANCEL": "Cancel"
+        "CANCEL": "Odustani"
       },
       "API": {
         "SUCCESS_MESSAGE": "Integration hook added successfully",
diff --git a/app/javascript/dashboard/i18n/locale/hr/integrations.json b/app/javascript/dashboard/i18n/locale/hr/integrations.json
index 1ac3f3f7cb623..44bd90337ea9b 100644
--- a/app/javascript/dashboard/i18n/locale/hr/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/hr/integrations.json
@@ -1,10 +1,19 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
-        "CANCEL": "Cancel",
+        "CANCEL": "Odustani",
         "DESC": "Webhook events provide you the realtime information about what's happening in your Chatwoot account. Please enter a valid URL to configure a callback.",
         "SUBSCRIPTIONS": {
           "LABEL": "Events",
@@ -39,11 +48,11 @@
         "TITLE": "Manage webhooks",
         "TABLE_HEADER": [
           "Webhook endpoint",
-          "Actions"
+          "Radnje"
         ]
       },
       "EDIT": {
-        "BUTTON_TEXT": "Edit",
+        "BUTTON_TEXT": "Uredi",
         "TITLE": "Edit webhook",
         "API": {
           "SUCCESS_MESSAGE": "Webhook configuration updated successfully",
@@ -51,7 +60,7 @@
         }
       },
       "ADD": {
-        "CANCEL": "Cancel",
+        "CANCEL": "Odustani",
         "TITLE": "Add new webhook",
         "API": {
           "SUCCESS_MESSAGE": "Webhook configuration added successfully",
@@ -59,15 +68,15 @@
         }
       },
       "DELETE": {
-        "BUTTON_TEXT": "Delete",
+        "BUTTON_TEXT": "Izbriši",
         "API": {
           "SUCCESS_MESSAGE": "Webhook deleted successfully",
           "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
         },
         "CONFIRM": {
-          "TITLE": "Confirm Deletion",
+          "TITLE": "Potvrdi brisanje",
           "MESSAGE": "Are you sure to delete the webhook? (%{webhookURL})",
-          "YES": "Yes, Delete ",
+          "YES": "Da, izbriši",
           "NO": "No, Keep it"
         }
       }
@@ -130,7 +139,7 @@
         "DESC": "Bring advanced AI features to your dashboard with OpenAI's GPT models. To begin, enter the API key from your OpenAI account.",
         "KEY_PLACEHOLDER": "Enter your OpenAI API key",
         "BUTTONS": {
-          "NEED_HELP": "Need help?",
+          "NEED_HELP": "Trebate pomoć?",
           "DISMISS": "Dismiss",
           "FINISH": "Finish Setup"
         },
@@ -156,7 +165,7 @@
       "GENERATE_ERROR": "Došlo je do greške tijekom procesiranja sadržaja, molim pokušajte ponovno"
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "API": {
         "SUCCESS_MESSAGE": "Integration deleted successfully"
       }
@@ -169,18 +178,19 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
         "TABLE_HEADER": [
-          "Name",
+          "Ime",
           "Endpoint"
         ],
         "EDIT_TOOLTIP": "Edit app",
         "DELETE_TOOLTIP": "Delete app"
       },
       "FORM": {
-        "TITLE_LABEL": "Name",
+        "TITLE_LABEL": "Ime",
         "TITLE_PLACEHOLDER": "Enter a name for your dashboard app",
         "TITLE_ERROR": "A name for the dashboard app is required",
         "URL_LABEL": "Endpoint",
@@ -190,14 +200,14 @@
       "CREATE": {
         "HEADER": "Add a new dashboard app",
         "FORM_SUBMIT": "Submit",
-        "FORM_CANCEL": "Cancel",
+        "FORM_CANCEL": "Odustani",
         "API_SUCCESS": "Dashboard app configured successfully",
         "API_ERROR": "We couldn't create an app. Please try again later"
       },
       "UPDATE": {
         "HEADER": "Edit dashboard app",
         "FORM_SUBMIT": "Update",
-        "FORM_CANCEL": "Cancel",
+        "FORM_CANCEL": "Odustani",
         "API_SUCCESS": "Dashboard app updated successfully",
         "API_ERROR": "We couldn't update the app. Please try again later"
       },
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Povezica",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Tim",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritet",
+            "PLACEHOLDER": "Odaberi prioritet",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Odustani",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Prioritet",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/hr/labelsMgmt.json
index 09ac38551312e..bf53ba1a86917 100644
--- a/app/javascript/dashboard/i18n/locale/hr/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hr/labelsMgmt.json
@@ -3,14 +3,15 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
       "DESC": "Labels let you group the conversations together.",
       "TABLE_HEADER": [
-        "Name",
+        "Ime",
         "Description",
         "Color"
       ]
@@ -33,10 +34,10 @@
       "SHOW_ON_SIDEBAR": {
         "LABEL": "Show label on sidebar"
       },
-      "EDIT": "Edit",
+      "EDIT": "Uredi",
       "CREATE": "Create",
-      "DELETE": "Delete",
-      "CANCEL": "Cancel"
+      "DELETE": "Izbriši",
+      "CANCEL": "Odustani"
     },
     "SUGGESTIONS": {
       "TOOLTIP": {
@@ -49,7 +50,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",
@@ -67,16 +69,16 @@
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "API": {
         "SUCCESS_MESSAGE": "Label deleted successfully",
         "ERROR_MESSAGE": "There was an error, please try again"
       },
       "CONFIRM": {
-        "TITLE": "Confirm Deletion",
+        "TITLE": "Potvrdi brisanje",
         "MESSAGE": "Are you sure to delete ",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+        "YES": "Da, izbriši",
+        "NO": "Ne, zadrži"
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/hr/macros.json b/app/javascript/dashboard/i18n/locale/hr/macros.json
index 3a59d4f269bd2..89f419da2b1f6 100644
--- a/app/javascript/dashboard/i18n/locale/hr/macros.json
+++ b/app/javascript/dashboard/i18n/locale/hr/macros.json
@@ -15,7 +15,7 @@
           "ERROR": "Name is required for creating a macro"
         },
         "ACTIONS": {
-          "LABEL": "Actions"
+          "LABEL": "Radnje"
         }
       },
       "API": {
@@ -25,7 +25,7 @@
     },
     "LIST": {
       "TABLE_HEADER": [
-        "Name",
+        "Ime",
         "Created by",
         "Last updated by",
         "Visibility"
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/report.json b/app/javascript/dashboard/i18n/locale/hr/report.json
index b38fdf84c4e26..d45042bb15624 100644
--- a/app/javascript/dashboard/i18n/locale/hr/report.json
+++ b/app/javascript/dashboard/i18n/locale/hr/report.json
@@ -467,7 +467,7 @@
     }
   },
   "OVERVIEW_REPORTS": {
-    "HEADER": "Overview",
+    "HEADER": "Pregled",
     "LIVE": "Live",
     "ACCOUNT_CONVERSATIONS": {
       "HEADER": "Open Conversations",
@@ -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",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "Dodaj filter",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "Nisu pronađeni rezultati",
@@ -534,8 +535,9 @@
       "INBOXES": "Inbox",
       "AGENTS": "Agent",
       "LABELS": "Label",
-      "TEAMS": "Team"
+      "TEAMS": "Tim"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/hr/resetPassword.json b/app/javascript/dashboard/i18n/locale/hr/resetPassword.json
index 70d48976e3e0f..a2db00f4a50bd 100644
--- a/app/javascript/dashboard/i18n/locale/hr/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/hr/resetPassword.json
@@ -1,17 +1,17 @@
 {
   "RESET_PASSWORD": {
-    "TITLE": "Reset Password",
-    "DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
-    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
+    "TITLE": "Reset lozinke",
+    "DESCRIPTION": "Unesite email adresu koju koristite za prijavu na Chatwoot kako biste dobili instrukcije za resetiranje lozinke.",
+    "GO_BACK_TO_LOGIN": "Ako se želite vratiti na stranicu za prijavu,",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Please enter your email",
-      "ERROR": "Please enter a valid email"
+      "PLACEHOLDER": "Molimo, unesite e-mail.",
+      "ERROR": "Molimo, unesite validan e-mail."
     },
     "API": {
-      "SUCCESS_MESSAGE": "Password reset link has been sent to your email",
-      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      "SUCCESS_MESSAGE": "Link za reset lozinke je poslan na zadani e-mail.",
+      "ERROR_MESSAGE": "Nije uspjelo spajanje na Woot server. Molimo pokušajte ponovno."
     },
-    "SUBMIT": "Submit"
+    "SUBMIT": "Pošalji"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/search.json b/app/javascript/dashboard/i18n/locale/hr/search.json
index fbafaf73c03f6..68854b4164b5d 100644
--- a/app/javascript/dashboard/i18n/locale/hr/search.json
+++ b/app/javascript/dashboard/i18n/locale/hr/search.json
@@ -1,25 +1,26 @@
 {
   "SEARCH": {
     "TABS": {
-      "ALL": "All",
-      "CONTACTS": "Contacts",
-      "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
+      "ALL": "Sve",
+      "CONTACTS": "Kontakti",
+      "CONVERSATIONS": "Razgovori",
+      "MESSAGES": "Poruke"
     },
     "SECTION": {
-      "CONTACTS": "Contacts",
-      "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
+      "CONTACTS": "Kontakti",
+      "CONVERSATIONS": "Razgovori",
+      "MESSAGES": "Poruke"
     },
-    "EMPTY_STATE": "No %{item} found for query '%{query}'",
-    "EMPTY_STATE_FULL": "No results found for query '%{query}'",
-    "PLACEHOLDER_KEYBINDING": "/ to focus",
-    "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
-    "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results.",
+    "SEARCHING_DATA": "Tražim",
+    "EMPTY_STATE": "Pronađeno %{item} za traženi pojam '%{query}'",
+    "EMPTY_STATE_FULL": "Ništa nije pronađeno za traženi pojam '%{query}'",
+    "PLACEHOLDER_KEYBINDING": "/ za fokusiranje",
+    "INPUT_PLACEHOLDER": "Unesi 3 ili više znakova za pretragu",
+    "EMPTY_STATE_DEFAULT": "Traži po conversation id, e-mail, broj telefona, poruke za bolje rezultate pretrage. ",
     "BOT_LABEL": "Bot",
-    "READ_MORE": "Read more",
-    "WROTE": "wrote:",
-    "FROM": "from",
+    "READ_MORE": "Pročitaj više",
+    "WROTE": "napisao/la:",
+    "FROM": "od",
     "EMAIL": "email"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/setNewPassword.json b/app/javascript/dashboard/i18n/locale/hr/setNewPassword.json
index ec2d9474469e7..0deef8159d112 100644
--- a/app/javascript/dashboard/i18n/locale/hr/setNewPassword.json
+++ b/app/javascript/dashboard/i18n/locale/hr/setNewPassword.json
@@ -1,23 +1,23 @@
 {
   "SET_NEW_PASSWORD": {
-    "TITLE": "Set New Password",
+    "TITLE": "Postavi novu lozinku",
     "PASSWORD": {
-      "LABEL": "Password",
-      "PLACEHOLDER": "Password",
-      "ERROR": "Password is too short"
+      "LABEL": "Lozinka",
+      "PLACEHOLDER": "Lozinka",
+      "ERROR": "Lozinka je prekratka."
     },
     "CONFIRM_PASSWORD": {
-      "LABEL": "Confirm Password",
-      "PLACEHOLDER": "Confirm Password",
-      "ERROR": "Passwords do not match"
+      "LABEL": "Potvrdi lozinku",
+      "PLACEHOLDER": "Potvrdi lozinku",
+      "ERROR": "Lozinke se ne poklapaju."
     },
     "API": {
-      "SUCCESS_MESSAGE": "Successfully changed the password",
-      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      "SUCCESS_MESSAGE": "Lozinka je uspješno promijenjena.",
+      "ERROR_MESSAGE": "Nije uspjelo spajanje na Woot server. Molimo pokušajte ponovno."
     },
     "CAPTCHA": {
-      "ERROR": "Verification expired. Please solve captcha again."
+      "ERROR": "Potvrda istekla. Molimo ponovno riješite captcha."
     },
-    "SUBMIT": "Submit"
+    "SUBMIT": "Pošalji"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hr/settings.json b/app/javascript/dashboard/i18n/locale/hr/settings.json
index 2c65d024573e3..28bea23e168d9 100644
--- a/app/javascript/dashboard/i18n/locale/hr/settings.json
+++ b/app/javascript/dashboard/i18n/locale/hr/settings.json
@@ -1,23 +1,23 @@
 {
   "PROFILE_SETTINGS": {
-    "LINK": "Profile Settings",
-    "TITLE": "Profile Settings",
-    "BTN_TEXT": "Update Profile",
-    "DELETE_AVATAR": "Delete Avatar",
+    "LINK": "Postavke profila",
+    "TITLE": "Postavke profila",
+    "BTN_TEXT": "Ažuriraj profil",
+    "DELETE_AVATAR": "Izbriši avatar",
     "AVATAR_DELETE_SUCCESS": "Avatar has been deleted successfully",
     "AVATAR_DELETE_FAILED": "There is an error while deleting avatar, please try again",
     "UPDATE_SUCCESS": "Your profile has been updated successfully",
     "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
     "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
     "FORM": {
-      "PICTURE": "Profile Picture",
-      "AVATAR": "Profile Image",
+      "PICTURE": "Profilna slika",
+      "AVATAR": "Profilna slika",
       "ERROR": "Please fix form errors",
-      "REMOVE_IMAGE": "Remove",
-      "UPLOAD_IMAGE": "Upload image",
-      "UPDATE_IMAGE": "Update image",
+      "REMOVE_IMAGE": "Izbriši",
+      "UPLOAD_IMAGE": "Prenesi sliku",
+      "UPDATE_IMAGE": "Ažuriraj sliku",
       "PROFILE_SECTION": {
-        "TITLE": "Profile",
+        "TITLE": "Profil",
         "NOTE": "Your email address is your identity and is used to log in."
       },
       "SEND_MESSAGE": {
@@ -51,31 +51,31 @@
         "PLACEHOLDER": "Insert your personal message signature here."
       },
       "PASSWORD_SECTION": {
-        "TITLE": "Password",
+        "TITLE": "Lozinka",
         "NOTE": "Updating your password would reset your logins in multiple devices.",
-        "BTN_TEXT": "Change password"
+        "BTN_TEXT": "Promijeni lozinku"
       },
       "ACCESS_TOKEN": {
-        "TITLE": "Access Token",
+        "TITLE": "Pristupni token",
         "NOTE": "This token can be used if you are building an API based integration",
-        "COPY": "Copy"
+        "COPY": "Kopiraj"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
-        "TITLE": "Audio Notifications",
+        "TITLE": "Audio obavijesti",
         "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
         "ALERT_TYPES": {
           "NONE": "Nijedno",
-          "MINE": "Assigned",
-          "ALL": "All"
+          "MINE": "Dodijeljeno",
+          "ALL": "Sve"
         },
         "ALERT_TYPE": {
           "TITLE": "Alert events for conversations:",
-          "NONE": "None",
-          "ASSIGNED": "Assigned Conversations",
-          "ALL_CONVERSATIONS": "All Conversations"
+          "NONE": "Nijedno",
+          "ASSIGNED": "Dodijeljeni razgovori",
+          "ALL_CONVERSATIONS": "Svi razgovori"
         },
         "DEFAULT_TONE": {
-          "TITLE": "Alert tone:"
+          "TITLE": "Ton obavještenja:"
         },
         "CONDITIONS": {
           "TITLE": "Alert conditions:",
@@ -131,7 +131,7 @@
         "SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
       },
       "PROFILE_IMAGE": {
-        "LABEL": "Profile Image"
+        "LABEL": "Profilna slika"
       },
       "NAME": {
         "LABEL": "Your full name",
@@ -180,7 +180,7 @@
     "CHANGE_ACCOUNTS": "Switch Account",
     "CONTACT_SUPPORT": "Contact Support",
     "SELECTOR_SUBTITLE": "Select an account from the following list",
-    "PROFILE_SETTINGS": "Profile Settings",
+    "PROFILE_SETTINGS": "Postavke profila",
     "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",
     "APPEARANCE": "Change Appearance",
     "SUPER_ADMIN_CONSOLE": "Super Admin Console",
@@ -232,22 +232,23 @@
     "INBOX_VIEW": "Inbox View",
     "CONVERSATIONS": "Conversations",
     "INBOX": "Inbox",
-    "ALL_CONVERSATIONS": "All Conversations",
+    "ALL_CONVERSATIONS": "Svi razgovori",
     "MENTIONED_CONVERSATIONS": "Mentions",
     "PARTICIPATING_CONVERSATIONS": "Participating",
     "UNATTENDED_CONVERSATIONS": "Unattended",
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
-    "AGENTS": "Agents",
+    "AGENTS": "Agenti",
     "AGENT_BOTS": "Botovi",
     "AUDIT_LOGS": "Audit Logovi",
     "INBOXES": "Inboxes",
     "NOTIFICATIONS": "Notifications",
     "CANNED_RESPONSES": "Canned Responses",
     "INTEGRATIONS": "Integrations",
-    "PROFILE_SETTINGS": "Profile Settings",
+    "PROFILE_SETTINGS": "Postavke profila",
     "ACCOUNT_SETTINGS": "Account Settings",
     "APPLICATIONS": "Applications",
     "LABELS": "Labels",
@@ -270,70 +271,70 @@
     "ONE_OFF": "One off",
     "REPORTS_SLA": "SLA",
     "REPORTS_BOT": "Bot",
-    "REPORTS_AGENT": "Agents",
+    "REPORTS_AGENT": "Agenti",
     "REPORTS_LABEL": "Labels",
     "REPORTS_INBOX": "Inbox",
-    "REPORTS_TEAM": "Team",
-    "SET_AVAILABILITY_TITLE": "Set yourself as",
+    "REPORTS_TEAM": "Tim",
+    "SET_AVAILABILITY_TITLE": "Postavi sebe kao",
     "SLA": "SLA",
     "BETA": "Beta",
-    "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REPORTS_OVERVIEW": "Pregled",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Centar za pomoć",
-      "ALL_ARTICLES": "All Articles",
-      "MY_ARTICLES": "My Articles",
-      "DRAFT": "Draft",
-      "ARCHIVED": "Archived",
+      "ALL_ARTICLES": "Svi članci",
+      "MY_ARTICLES": "Moji članci",
+      "DRAFT": "Skica",
+      "ARCHIVED": "Arhivirano",
       "CATEGORY": "Kategorija",
-      "SETTINGS": "Settings",
-      "CATEGORY_EMPTY_MESSAGE": "No categories found"
+      "SETTINGS": "Postavke",
+      "CATEGORY_EMPTY_MESSAGE": "Nisu pronađene kategorije"
     },
     "SET_AUTO_OFFLINE": {
       "TEXT": "Mark offline automatically",
       "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard."
     },
-    "DOCS": "Read docs"
+    "DOCS": "Pročitaj članke"
   },
   "BILLING_SETTINGS": {
-    "TITLE": "Billing",
+    "TITLE": "Naplata",
     "CURRENT_PLAN": {
-      "TITLE": "Current Plan",
+      "TITLE": "Trenutni plan",
       "PLAN_NOTE": "You are currently subscribed to the **%{plan}** plan with **%{quantity}** licenses"
     },
     "MANAGE_SUBSCRIPTION": {
-      "TITLE": "Manage your subscription",
+      "TITLE": "Upravljanje pretplatom",
       "DESCRIPTION": "View your previous invoices, edit your billing details, or cancel your subscription.",
       "BUTTON_TXT": "Go to the billing portal"
     },
     "CHAT_WITH_US": {
-      "TITLE": "Need help?",
+      "TITLE": "Trebate pomoć?",
       "DESCRIPTION": "Do you face any issues in billing? We are here to help.",
-      "BUTTON_TXT": "Chat with us"
+      "BUTTON_TXT": "Čavrljajte s nama"
     },
     "NO_BILLING_USER": "Your billing account is being configured. Please refresh the page and try again."
   },
   "CREATE_ACCOUNT": {
     "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",
-    "NEW_ACCOUNT": "New Account",
-    "SELECTOR_SUBTITLE": "Create a new account",
+    "NEW_ACCOUNT": "Novi račun",
+    "SELECTOR_SUBTITLE": "Kreirajte novi račun",
     "API": {
-      "SUCCESS_MESSAGE": "Account created successfully",
-      "EXIST_MESSAGE": "Account already exists",
+      "SUCCESS_MESSAGE": "Račun uspješno kreiran",
+      "EXIST_MESSAGE": "Račun već postoji",
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
     },
     "FORM": {
       "NAME": {
-        "LABEL": "Company Name",
+        "LABEL": "Naziv tvrtke",
         "PLACEHOLDER": "Wayne Enterprises"
       },
-      "SUBMIT": "Submit"
+      "SUBMIT": "Pošalji"
     }
   },
   "KEYBOARD_SHORTCUTS": {
-    "TOGGLE_MODAL": "View all shortcuts",
+    "TOGGLE_MODAL": "Vidi sve skraćenice",
     "TITLE": {
-      "OPEN_CONVERSATION": "Open conversation",
+      "OPEN_CONVERSATION": "Otvori razgovor",
       "RESOLVE_AND_NEXT": "Resolve and move to next",
       "NAVIGATE_DROPDOWN": "Navigate dropdown items",
       "RESOLVE_CONVERSATION": "Resolve Conversation",
@@ -343,7 +344,7 @@
       "TOGGLE_SIDEBAR": "Toggle Sidebar",
       "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
       "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
-      "GO_TO_SETTINGS": "Go to Settings",
+      "GO_TO_SETTINGS": "Idi na postavke",
       "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
       "SWITCH_TO_REPLY": "Switch to Reply",
       "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
diff --git a/app/javascript/dashboard/i18n/locale/hr/sla.json b/app/javascript/dashboard/i18n/locale/hr/sla.json
index 7629b0c763a82..74a554a6c4feb 100644
--- a/app/javascript/dashboard/i18n/locale/hr/sla.json
+++ b/app/javascript/dashboard/i18n/locale/hr/sla.json
@@ -90,10 +90,10 @@
         "ERROR_MESSAGE": "There was an error, please try again"
       },
       "CONFIRM": {
-        "TITLE": "Confirm Deletion",
+        "TITLE": "Potvrdi brisanje",
         "MESSAGE": "Are you sure you want to delete ",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+        "YES": "Da, izbriši",
+        "NO": "Ne, zadrži"
       }
     },
     "EVENTS": {
diff --git a/app/javascript/dashboard/i18n/locale/hr/teamsSettings.json b/app/javascript/dashboard/i18n/locale/hr/teamsSettings.json
index f9ecaaaae4323..f4836f6a7bb9f 100644
--- a/app/javascript/dashboard/i18n/locale/hr/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hr/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Nijedno"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -69,7 +72,7 @@
     },
     "AGENTS": {
       "AGENT": "AGENT",
-      "EMAIL": "EMAIL",
+      "EMAIL": "E-pošta",
       "BUTTON_TEXT": "Add agents",
       "ADD_AGENTS": "Adding Agents to your Team...",
       "SELECT": "select",
@@ -91,17 +94,17 @@
       "BUTTON_TEXT": "Finish"
     },
     "DELETE": {
-      "BUTTON_TEXT": "Delete",
+      "BUTTON_TEXT": "Izbriši",
       "API": {
         "SUCCESS_MESSAGE": "Team deleted successfully.",
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
-        "NO": "Cancel"
+        "NO": "Odustani"
       }
     },
     "SETTINGS": "Settings",
diff --git a/app/javascript/dashboard/i18n/locale/hu/advancedFilters.json b/app/javascript/dashboard/i18n/locale/hu/advancedFilters.json
index 22a26ac68a33e..b09776d180b75 100644
--- a/app/javascript/dashboard/i18n/locale/hu/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/hu/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "ÉS",
       "OR": "VAGY"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Egyenlő",
       "not_equal_to": "Nem egyenlő",
diff --git a/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json
index e00a8874cf673..14f0d7b06a7fd 100644
--- a/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Ügynökök",
     "HEADER_BTN_TXT": "Ügynök Hozzádása",
     "LOADING": "Ügynökök Listájának Lekérése",
-    "SIDEBAR_TXT": "<p><b>Ügynökök</b></p> <p> Egy <b>Ügynök</b> tagja a terméktámogatási csapatodnak.</p> <p>Az ügynökök láthatják és válaszolhatnak a felhasználóid üzeneteire. A lista minden jelenleg a fiókodban található ügynököt mutatja.</p><p> Kattints az <b>Ügynök hozzáadásra</b> új ügynök hozzáadásához. Az ügynök amelyet hozzáadsz e-mailt fog kapni egy megerősítő linkkel, mellyel aktiválhatják a fiókjukat, mely után hozzáférést kapnak a Chatwoot-hoz és válaszolhatnak üzenetekre. </p><p>A Chatwoot lehetőségeihez a következő szerepkörök alapján férhet hozzá.</p><p><b>Ügynökök</b> - Ezzel a szerepkörrel rendelkező ügynökök hozzáférhetnek az inboxokhoz, jelentésekhez és beszélgetésekhez. Hozzárendelhetnek beszélgetéseket más ügynökökhöz vagy saját magukhoz és lezárhatnak beszélgetéseket.</p><p> <b>Adminisztrátor</b> - Az Adminisztrátor felhasználók hozzáférhetnek minden Chatwoot funkcióhoz mely a fiókhoz tartozik, beleértve a beállításokat, illetve a normális ügynöki felhasználói jogosultságokkal is bírnak.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Adminisztrátor",
       "AGENT": "Ügynök"
diff --git a/app/javascript/dashboard/i18n/locale/hu/auditLogs.json b/app/javascript/dashboard/i18n/locale/hu/auditLogs.json
index 887c9411f3898..a8f5ce3c0ad54 100644
--- a/app/javascript/dashboard/i18n/locale/hu/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/hu/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit logok",
     "HEADER_BTN_TXT": "Audit logok hozzáadása",
     "LOADING": "Audit logok betöltése",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Nincs megfelelő elem",
     "SIDEBAR_TXT": "<p><b>Auditnaplók</b> </p><p> Az auditnaplók a Chatwoot rendszer eseményeinek és műveleteinek nyomvonalai. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} meghívta %{invitee} a fiókba, mint %{role}",
       "EDIT": {
         "SELF": "%{agentName} megváltoztatta az %{attributes} -aikat %{values} - ra",
-        "OTHER": "%{agentName} megváltoztatta %{attributes}  %{user}  %{values} -ra"
+        "OTHER": "%{agentName} megváltoztatta %{attributes}  %{user}  %{values} -ra",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/hu/automation.json b/app/javascript/dashboard/i18n/locale/hu/automation.json
index 10ae1f6b98688..42f20837a6572 100644
--- a/app/javascript/dashboard/i18n/locale/hu/automation.json
+++ b/app/javascript/dashboard/i18n/locale/hu/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Legalább egy tevékenység szükséges a mentéshez",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Írd be az üzeneted ide",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Csapatok kiválasztása"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Csapatok kiválasztása",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Automatizált szabályok aktivizálása",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Frissítés...",
       "LABEL_UPLOADED": "Sikeres feltöltés",
       "LABEL_UPLOAD_FAILED": "Sikertelen feltöltés"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Kötelező megadni",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hu/bulkActions.json b/app/javascript/dashboard/i18n/locale/hu/bulkActions.json
index e8c8e8ebf42c1..5e63ef0e5b939 100644
--- a/app/javascript/dashboard/i18n/locale/hu/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/hu/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Visszaugrás",
     "ASSIGN_LABEL": "Hozzárendelés",
     "YES": "Igen",
+    "SEARCH_INPUT_PLACEHOLDER": "Keresés",
     "ASSIGN_AGENT_TOOLTIP": "Ügynök hozzárendelése",
     "ASSIGN_TEAM_TOOLTIP": "Csapat hozzárendelése",
     "ASSIGN_SUCCESFUL": "Beszélgetés sikeresen hozzá lett rendelve.",
@@ -33,7 +34,7 @@
       "NONE": "Nincs",
       "NO_TEAMS_AVAILABLE": "Ebben a fiókban még nincs csapat létrehozva.",
       "ASSIGN_SELECTED_TEAMS": "Válogatott csapatok hozzárendelése.",
-      "ASSIGN_SUCCESFUL": "Csapatok hozzárendelése sikeres.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Nem sikerült csapatot kijelölni. Kérjük, próbálja újra."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/hu/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/hu/cannedMgmt.json
index f0d0d09166f9c..511fc1edf14e4 100644
--- a/app/javascript/dashboard/i18n/locale/hu/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hu/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Mentett válaszok",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Sablon válasz hozzáadása",
     "LOADING": "Sablon válaszok lekérése...",
     "SEARCH_404": "Nincs megfelelő elem.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Nincs megfelelő mentett válasz ebben a fiókban.",
       "TITLE": "Mentett válaszok kezelése",
diff --git a/app/javascript/dashboard/i18n/locale/hu/contact.json b/app/javascript/dashboard/i18n/locale/hu/contact.json
index 7ba9a6d8a8e02..1455c0a2e6615 100644
--- a/app/javascript/dashboard/i18n/locale/hu/contact.json
+++ b/app/javascript/dashboard/i18n/locale/hu/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakt összevonása sikeres",
       "ERROR_MESSAGE": "Nem sikerült a kontaktot összevonni, próbáld újra!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hu/conversation.json b/app/javascript/dashboard/i18n/locale/hu/conversation.json
index 4bfb9930d2aff..64203743db4b7 100644
--- a/app/javascript/dashboard/i18n/locale/hu/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hu/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter új sorért. Kezdj a '/'-el mentett válasz kiválasztásához.",
       "PRIVATE_MSG_INPUT": "Shift + enter új sorért. Ezt csak ügynökök láthatják",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Üzenet aláírása nem változott, kérlek, változtasd meg a profilod beállításaiban. ",
-      "CLICK_HERE": "Frissítéshez kattints ide"
+      "CLICK_HERE": "Frissítéshez kattints ide",
+      "WHATSAPP_TEMPLATES": "Whatsapp sablonok"
     },
     "REPLYBOX": {
       "REPLY": "Válasz",
diff --git a/app/javascript/dashboard/i18n/locale/hu/general.json b/app/javascript/dashboard/i18n/locale/hu/general.json
index 25bb4dfb736d2..b92df59357d17 100644
--- a/app/javascript/dashboard/i18n/locale/hu/general.json
+++ b/app/javascript/dashboard/i18n/locale/hu/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": "Keresés",
+      "EMPTY_STATE": "Nincs találat"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hu/generalSettings.json b/app/javascript/dashboard/i18n/locale/hu/generalSettings.json
index 09a23508d0754..6bc055c5909cd 100644
--- a/app/javascript/dashboard/i18n/locale/hu/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hu/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Frissítés"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Holnapig",
       "UNTIL_NEXT_MONTH": "Következő hónapig",
       "AN_HOUR_FROM_NOW": "Mostantól egy óráig",
-      "CUSTOM": "Speciális...",
+      "UNTIL_CUSTOM_TIME": "Speciális...",
       "CHANGE_APPEARANCE": "Megjelenés módosítása",
       "LIGHT_MODE": "Világos mód",
       "DARK_MODE": "Sötét mód",
diff --git a/app/javascript/dashboard/i18n/locale/hu/helpCenter.json b/app/javascript/dashboard/i18n/locale/hu/helpCenter.json
index 315bbdf545291..4b32ae3e86c9a 100644
--- a/app/javascript/dashboard/i18n/locale/hu/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/hu/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Használja a portált fej nélküli CMS-ként harmadik féltől származó front-end keretrendszerekkel a mi API-ink segítségével."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hu/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/hu/inboxMgmt.json
index dac1517d00ff4..8b9a6a7b270fa 100644
--- a/app/javascript/dashboard/i18n/locale/hu/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hu/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Fiókok",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p><p>Amikor egy weboldalt vagy facebook oldalt összekötsz a Chatwoottal, <b>inbox</b>-nak vagy fióknak hívjuk. Korlátlan inboxod lehet a Chatwoot fiókodban. </p><p>Kattints a <b>Inbox hozzáadása</b> gombra hogy összekapcsold a weboldaladdal vagy Facebook oldaladdal.</p><p>A műszerfaladon láthatod az összes beszélgetésedet az összes fiókodból egy helyen és válszolhatsz a 'Beszélgetések' fülön.</p><p>Láthatsz továbbá fiókhoz kapcsolódó beszélgetéseket a fiók nevére kattintva a műszerfal bal sávjában.</p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Nincs Inbox kapcsolva ehhez a fiókhoz."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "A kezdéshez kattintson a Bejelentkezés a Microsofttal gombra. A rendszer átirányítja az e-mail bejelentkezési oldalra. Miután elfogadta a kért engedélyeket, a rendszer visszairányítja a beérkező levelek létrehozásának lépéséhez.",
         "EMAIL_PLACEHOLDER": "E-mailcím megadása",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Ha Microsoft-fiókját csatornaként szeretné hozzáadni, hitelesítenie kell Microsoft-fiókját a \"Bejelentkezés Microsoft-fiókkal\" lehetőségre kattintva ",
         "ERROR_MESSAGE": "Hiba történt a Microsoft szervereihez való csatlakozáskor, kérjük próbáld később"
       }
diff --git a/app/javascript/dashboard/i18n/locale/hu/integrations.json b/app/javascript/dashboard/i18n/locale/hu/integrations.json
index 9c25873c19cd4..14145d5aa2661 100644
--- a/app/javascript/dashboard/i18n/locale/hu/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/hu/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrációk",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Feliratkozott események",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Új kezdőlapi applikáció hozzáadása",
       "SIDEBAR_TXT": "<p><b>Irányítópult-alkalmazások</b></p><p>Az irányítópult-alkalmazások segítségével a szervezetek beágyazhatnak egy alkalmazást a Chatwoot irányítópultjába, hogy kontextust biztosítsanak az ügyfélszolgálati ügynökök számára. Ezzel a funkcióval önállóan hozhat létre alkalmazást, és beágyazhatja azt az irányítópultba, hogy megadja a felhasználói információkat, rendeléseiket vagy korábbi fizetési előzményeiket.</p><p>Ha beágyazza alkalmazását a Chatwoot irányítópultjával, az alkalmazás ablakeseményként kapja meg a beszélgetés és a kapcsolatfelvétel kontextusát. Helyezzen el egy figyelőt az üzeneteseményhez az oldalon, hogy megkapja a kontextust.</p><p>Új irányítópult-alkalmazás hozzáadásához kattintson az „Új irányítópult-alkalmazás hozzáadása” gombra.</p>",
       "DESCRIPTION": "Az irányítópult-alkalmazások segítségével a szervezetek beágyazhatnak egy alkalmazást az irányítópultba, hogy kontextust biztosítsanak az ügyfélszolgálati ügynökök számára. Ez a funkció lehetővé teszi, hogy önállóan hozzon létre egy alkalmazást, és beágyazza azt, hogy megadja a felhasználói információkat, rendeléseiket vagy korábbi fizetési előzményeiket.\n",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Ebben a fiókban még nincsenek konfigurálva kezdőlapi-alkalmazások",
         "LOADING": "Kezdőlapi alkalmazások lekérése...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Kezdőlapi applikációk sikeresen törölve",
         "API_ERROR": "Nem tudtuk törölni az appot, kérlek próbáld újra"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Létrehozás",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Cím",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Cím megadása kötelező"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Leírás",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Csapat",
+            "PLACEHOLDER": "Csapat kiválasztása",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritás",
+            "PLACEHOLDER": "Prioritás megadása",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Cimke",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Státusz",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Létrehozás",
+        "CANCEL": "Mégse",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Státusz",
+        "PRIORITY": "Prioritás",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Cimkék",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hu/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/hu/labelsMgmt.json
index ff8543f886adb..6c6d1b8a82cef 100644
--- a/app/javascript/dashboard/i18n/locale/hu/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hu/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Cimkék",
     "HEADER_BTN_TXT": "Cimke hozzáadása",
     "LOADING": "Cimkék letöltése",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Nincs megfelelő elem",
-    "SIDEBAR_TXT": "<p><b>Cimkék</b><p>A cimkék segítenek kategorizálni és priorizálni a beszélgetéseket. A beszélgetésekhez cimkét rendelhetsz az oldalpanelben <br /><br />A cimkék a fiókodhoz vannak kötve. A cimkékkel egyedi munkameneteket hozhatsz létre a szervezetedben. Egyedi színt adhatsz a cimkéknek a könnyű azonosíthatóság érdekében. Az oldalsávban meg tudod majd jeleníteni a cimkéket hogy könnyen szűrhesd a beszélgetéseket</p>",
     "LIST": {
       "404": "Nincs megfelelő cimke ebben a fiókban.",
       "TITLE": "Cimkék kezelése",
@@ -49,7 +50,8 @@
       "DISMISS": "Elutasítás",
       "ADD_SELECTED_LABELS": "Kijelölt címkék hozzáadása",
       "ADD_SELECTED_LABEL": "Kijelölt címke hozzáadása",
-      "ADD_ALL_LABELS": "Minden címke hozzáadása"
+      "ADD_ALL_LABELS": "Minden címke hozzáadása",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Cimke hozzáadása",
diff --git a/app/javascript/dashboard/i18n/locale/hu/macros.json b/app/javascript/dashboard/i18n/locale/hu/macros.json
index 18bea009fcc76..d238211bb3126 100644
--- a/app/javascript/dashboard/i18n/locale/hu/macros.json
+++ b/app/javascript/dashboard/i18n/locale/hu/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Futtatás",
       "PREVIEW": "Makró előnézet",
       "EXECUTED_SUCCESSFULLY": "Makró végrehajtása sikeres"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Kötelező megadni",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hu/report.json b/app/javascript/dashboard/i18n/locale/hu/report.json
index 8314f9958be0d..b8c5d082f9d25 100644
--- a/app/javascript/dashboard/i18n/locale/hu/report.json
+++ b/app/javascript/dashboard/i18n/locale/hu/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Beszélgetés forgalom",
       "NO_CONVERSATIONS": "Nincsennek beszélgetések",
       "CONVERSATION": "Beszélgetése százaléka",
-      "CONVERSATIONS": "Beszélgetések százalékai"
+      "CONVERSATIONS": "Beszélgetések százalékai",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Ügynökök által kezelt beszélgetések",
@@ -536,6 +537,7 @@
       "LABELS": "Cimke",
       "TEAMS": "Csapat"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/hu/search.json b/app/javascript/dashboard/i18n/locale/hu/search.json
index 7b2bd1c8ead12..72652d7096bb7 100644
--- a/app/javascript/dashboard/i18n/locale/hu/search.json
+++ b/app/javascript/dashboard/i18n/locale/hu/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Beszélgetések",
       "MESSAGES": "Üzenetek"
     },
+    "SEARCHING_DATA": "Keresés",
     "EMPTY_STATE": "Nem található %{item}, a keresésre: '%{query}'",
     "EMPTY_STATE_FULL": "Nincs eredménye a következő keresésnek: '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ a fókuszáláshoz",
diff --git a/app/javascript/dashboard/i18n/locale/hu/settings.json b/app/javascript/dashboard/i18n/locale/hu/settings.json
index 80e9ac2a36a13..447aabd54c9b0 100644
--- a/app/javascript/dashboard/i18n/locale/hu/settings.json
+++ b/app/javascript/dashboard/i18n/locale/hu/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Jelentések",
     "SETTINGS": "Beállítások",
     "CONTACTS": "Kontaktok",
+    "CAPTAIN": "Captain",
     "HOME": "Nyitólap",
     "AGENTS": "Ügynökök",
     "AGENT_BOTS": "Botok",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Béta",
     "REPORTS_OVERVIEW": "Áttekintés",
-    "FACEBOOK_REAUTHORIZE": "A Facebook kapcsolatod lejárt, kérjük kapcsold össze oldalad újra a szolgáltatás folytatásához",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Súgóközpont",
       "ALL_ARTICLES": "Minden bejegyzés",
diff --git a/app/javascript/dashboard/i18n/locale/hu/teamsSettings.json b/app/javascript/dashboard/i18n/locale/hu/teamsSettings.json
index 99171f85a8f24..b121ade4ac3d4 100644
--- a/app/javascript/dashboard/i18n/locale/hu/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hu/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Új csapat hozzárendelése",
     "HEADER": "Csapatok",
-    "SIDEBAR_TXT": "<p><b>Csapatok</b></p> <p>A csapatok segítségével csoportokba rendezheti ügynökeit feladataik alapján. <br /> Egy ügynök több csapat tagja is lehet. Együttműködés közben beszélgetéseket rendelhet egy csapathoz. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Ebben a fiókban nincs csapat létrehozva.",
-      "EDIT_TEAM": "Csapat szerkesztése"
+      "EDIT_TEAM": "Csapat szerkesztése",
+      "NONE": "Nincs"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Nem sikerült a csapat törlés. Próbáld újra."
       },
       "CONFIRM": {
-        "TITLE": "Biztosan törölni akarod: %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Kérlek gépeld be, hogy {teamName} a megerősítéshez",
         "MESSAGE": "A csapat letörlése a hozzárendelt beszélgetéseket is eltávolítja.",
         "YES": "Törlés ",
diff --git a/app/javascript/dashboard/i18n/locale/hy/advancedFilters.json b/app/javascript/dashboard/i18n/locale/hy/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/hy/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/hy/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/hy/auditLogs.json b/app/javascript/dashboard/i18n/locale/hy/auditLogs.json
index bb30079757f72..7f412b4c085ac 100644
--- a/app/javascript/dashboard/i18n/locale/hy/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/hy/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/hy/automation.json b/app/javascript/dashboard/i18n/locale/hy/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/hy/automation.json
+++ b/app/javascript/dashboard/i18n/locale/hy/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hy/bulkActions.json b/app/javascript/dashboard/i18n/locale/hy/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/hy/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/hy/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/hy/cannedMgmt.json
index 082afcb84eec4..74b152c847e1f 100644
--- a/app/javascript/dashboard/i18n/locale/hy/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hy/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/hy/contact.json b/app/javascript/dashboard/i18n/locale/hy/contact.json
index 7a4a3af3721fa..0c713552b474f 100644
--- a/app/javascript/dashboard/i18n/locale/hy/contact.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/hy/conversation.json b/app/javascript/dashboard/i18n/locale/hy/conversation.json
index cc3e4569bc729..8eb490a4b5e3f 100644
--- a/app/javascript/dashboard/i18n/locale/hy/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/hy/general.json b/app/javascript/dashboard/i18n/locale/hy/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/hy/general.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/hy/generalSettings.json b/app/javascript/dashboard/i18n/locale/hy/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/hy/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hy/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/hy/helpCenter.json b/app/javascript/dashboard/i18n/locale/hy/helpCenter.json
index 467b0def962cf..5c74d99289527 100644
--- a/app/javascript/dashboard/i18n/locale/hy/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/hy/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/hy/inboxMgmt.json
index b1d9e50aef67d..e2a64d3d87627 100644
--- a/app/javascript/dashboard/i18n/locale/hy/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hy/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/hy/integrations.json b/app/javascript/dashboard/i18n/locale/hy/integrations.json
index 45587f2dbf1ac..b219617fa33f3 100644
--- a/app/javascript/dashboard/i18n/locale/hy/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/hy/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hy/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/hy/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/hy/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hy/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/hy/macros.json b/app/javascript/dashboard/i18n/locale/hy/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/hy/macros.json
+++ b/app/javascript/dashboard/i18n/locale/hy/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/hy/report.json b/app/javascript/dashboard/i18n/locale/hy/report.json
index c27532783f2cb..b27417c82adb7 100644
--- a/app/javascript/dashboard/i18n/locale/hy/report.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/hy/search.json b/app/javascript/dashboard/i18n/locale/hy/search.json
index fbafaf73c03f6..bf244893cdec4 100644
--- a/app/javascript/dashboard/i18n/locale/hy/search.json
+++ b/app/javascript/dashboard/i18n/locale/hy/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/i18n/locale/hy/settings.json b/app/javascript/dashboard/i18n/locale/hy/settings.json
index 4dca590e96dc1..dabbff89fb2b9 100644
--- a/app/javascript/dashboard/i18n/locale/hy/settings.json
+++ b/app/javascript/dashboard/i18n/locale/hy/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/hy/teamsSettings.json b/app/javascript/dashboard/i18n/locale/hy/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/hy/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hy/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/id/advancedFilters.json b/app/javascript/dashboard/i18n/locale/id/advancedFilters.json
index 36191076106c1..3dfeb3d8b85d9 100644
--- a/app/javascript/dashboard/i18n/locale/id/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/id/advancedFilters.json
@@ -4,7 +4,7 @@
     "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
     "EDIT_CUSTOM_FILTER": "Edit Folder",
     "CUSTOM_VIEWS_SUBTITLE": "Tambahkan atau hapus filter dan perbarui folder Anda.",
-    "ADD_NEW_FILTER": "Add filter",
+    "ADD_NEW_FILTER": "Tambah filter",
     "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
     "SUBMIT_BUTTON_LABEL": "Terapkan filter",
     "UPDATE_BUTTON_LABEL": "Perbarui folder",
@@ -18,6 +18,7 @@
       "AND": "DAN",
       "OR": "ATAU"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Sama dengan",
       "not_equal_to": "Tidak sama dengan",
@@ -42,9 +43,9 @@
       "CONVERSATION_IDENTIFIER": "Conversation identifier",
       "CAMPAIGN_NAME": "Campaign name",
       "LABELS": "Label",
-      "BROWSER_LANGUAGE": "Browser language",
+      "BROWSER_LANGUAGE": "Bahasa peramban",
       "PRIORITY": "Prioritas",
-      "COUNTRY_NAME": "Country name",
+      "COUNTRY_NAME": "Nama negara",
       "REFERER_LINK": "Tautan Referer",
       "CUSTOM_ATTRIBUTE_LIST": "Daftar",
       "CUSTOM_ATTRIBUTE_TEXT": "Teks",
@@ -57,7 +58,7 @@
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
       "ADDITIONAL_FILTERS": "Additional filters",
-      "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "CUSTOM_ATTRIBUTES": "Atribut kostum"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
@@ -85,7 +86,7 @@
           "CONFIRM": {
             "TITLE": "Konfirmasi penghapusan",
             "MESSAGE": "Apakah Anda yakin ingin menghapus filter ",
-            "YES": "Yes, delete",
+            "YES": "Ya, hapus",
             "NO": "Tidak, simpan"
           }
         },
diff --git a/app/javascript/dashboard/i18n/locale/id/agentMgmt.json b/app/javascript/dashboard/i18n/locale/id/agentMgmt.json
index 44cb7546b0430..4c0c647fb2d79 100644
--- a/app/javascript/dashboard/i18n/locale/id/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/id/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agen",
     "HEADER_BTN_TXT": "Tambahkan Agen",
     "LOADING": "Mendapatkan Daftar Agen",
-    "SIDEBAR_TXT": "<p><b>Agen</b></p> <p> Seorang <b>Agen</b> adalah anggota tim Dukungan Pelanggan Anda. </p><p> Agen akan dapat melihat dan membalas pesan dari pengguna Anda. Daftar ini menunjukkan semua agen yang saat ini ada di akun Anda. </p><p> Klik Pada <b>Tambah Agent</b> untuk menambahkan agen baru. Agen yang Anda tambahkan akan menerima email dengan tautan konfirmasi untuk mengaktifkan akun mereka, setelah itu mereka dapat mengakses Chatwoot dan menanggapi pesan. </p><p> Akses ke fitur Chatwoot didasarkan pada wewenang berikut. </p><p> <b>Agen</b> - Agen dengan wewenang ini hanya dapat mengakses kotak masuk, laporan, dan percakapan. Mereka dapat menetapkan percakapan ke agen lain atau diri mereka sendiri dan menyelesaikan percakapan.</p><p> <b>Administrator</b> - Administrator akan memiliki akses ke semua fitur Chatwoot yang diaktifkan untuk akun Anda, termasuk pengaturan, bersama dengan semua hak istimewa agen normal.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agen"
diff --git a/app/javascript/dashboard/i18n/locale/id/auditLogs.json b/app/javascript/dashboard/i18n/locale/id/auditLogs.json
index 363bd38651e9e..ab97e83282f34 100644
--- a/app/javascript/dashboard/i18n/locale/id/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/id/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Catatan Audit",
     "HEADER_BTN_TXT": "Tambahkan Catatan Audit",
     "LOADING": "Mengambil Catatan Audit",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Tidak ada item yang cocok dengan kueri ini",
     "SIDEBAR_TXT": "<p><b>Catatan Audit</b> </p><p> Catatan Audit adalah jejak untuk peristiwa dan tindakan dalam Sistem Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} mengundang %{invitee} ke akun sebagai %{role}",
       "EDIT": {
         "SELF": "%{agentName} mengubah %{attributes} mereka menjadi %{values}",
-        "OTHER": "%{agentName} mengubah %{attributes} dari %{user} menjadi %{values}"
+        "OTHER": "%{agentName} mengubah %{attributes} dari %{user} menjadi %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/id/automation.json b/app/javascript/dashboard/i18n/locale/id/automation.json
index 87a52e563122a..ee6c73d432d76 100644
--- a/app/javascript/dashboard/i18n/locale/id/automation.json
+++ b/app/javascript/dashboard/i18n/locale/id/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Anda harus memiliki setidaknya satu aksi untuk disimpan",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Masukkan pesan Anda di sini",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Pilih tim"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Pilih tim",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Aktifkan Aturan Otomatisasi",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Mengunggah...",
       "LABEL_UPLOADED": "Berhasil Diunggah",
       "LABEL_UPLOAD_FAILED": "Gagal Mengunggah"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Nilai dibutuhkan",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/id/bulkActions.json b/app/javascript/dashboard/i18n/locale/id/bulkActions.json
index 2f07fe8a06546..d12ff335ae293 100644
--- a/app/javascript/dashboard/i18n/locale/id/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/id/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Kembali",
     "ASSIGN_LABEL": "Tugaskan",
     "YES": "Ya",
+    "SEARCH_INPUT_PLACEHOLDER": "Cari",
     "ASSIGN_AGENT_TOOLTIP": "Tugaskan agen",
     "ASSIGN_TEAM_TOOLTIP": "Tugaskan tim",
     "ASSIGN_SUCCESFUL": "Percakapan berhasil ditugaskan.",
@@ -33,7 +34,7 @@
       "NONE": "Tidak ada",
       "NO_TEAMS_AVAILABLE": "Belum ada tim yang ditambahkan ke akun ini.",
       "ASSIGN_SELECTED_TEAMS": "Tugaskan tim terpilih.",
-      "ASSIGN_SUCCESFUL": "Tim berhasil ditugaskan.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/id/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/id/cannedMgmt.json
index 205ed3decb3b1..db23733a5a75d 100644
--- a/app/javascript/dashboard/i18n/locale/id/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/id/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Balasan Canned",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Tidak ada item yang cocok dengan kueri ini.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Tidak ada balasan canned yang tersedia di akun ini.",
       "TITLE": "Kelola Balasan Canned",
diff --git a/app/javascript/dashboard/i18n/locale/id/contact.json b/app/javascript/dashboard/i18n/locale/id/contact.json
index d9eb8c2dc5fbb..cc7c9a11d1b0e 100644
--- a/app/javascript/dashboard/i18n/locale/id/contact.json
+++ b/app/javascript/dashboard/i18n/locale/id/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontak berhasil digabungkan",
       "ERROR_MESSAGE": "Tidak dapat menggabungkan kontak, coba lagi!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/id/conversation.json b/app/javascript/dashboard/i18n/locale/id/conversation.json
index 80971d3421b2c..8549b0a9b6c26 100644
--- a/app/javascript/dashboard/i18n/locale/id/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/id/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter untuk baris baru. Mulailah dengan '/' untuk memilih Canned Response.",
       "PRIVATE_MSG_INPUT": "Shift + enter untuk baris baru. Ini hanya akan terlihat oleh Agen",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Tanda tangan pesan tidak dikonfigurasi, harap konfigurasikan di pengaturan profil.",
-      "CLICK_HERE": "Klik di sini untuk memperbarui"
+      "CLICK_HERE": "Klik di sini untuk memperbarui",
+      "WHATSAPP_TEMPLATES": "Templat Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Balas",
diff --git a/app/javascript/dashboard/i18n/locale/id/general.json b/app/javascript/dashboard/i18n/locale/id/general.json
index 25bb4dfb736d2..2b082c9c258ae 100644
--- a/app/javascript/dashboard/i18n/locale/id/general.json
+++ b/app/javascript/dashboard/i18n/locale/id/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": "Cari",
+      "EMPTY_STATE": "Tidak ada hasil ditemukan"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/id/generalSettings.json b/app/javascript/dashboard/i18n/locale/id/generalSettings.json
index 4327e5a70b91a..bd7da57d505ef 100644
--- a/app/javascript/dashboard/i18n/locale/id/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/id/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Segarkan"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Hingga besok",
       "UNTIL_NEXT_MONTH": "Hingga bulan depan",
       "AN_HOUR_FROM_NOW": "Hingga satu jam dari sekarang",
-      "CUSTOM": "Kustom...",
+      "UNTIL_CUSTOM_TIME": "Kustom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/id/helpCenter.json b/app/javascript/dashboard/i18n/locale/id/helpCenter.json
index a51a30a1489a1..82a34dad0af5c 100644
--- a/app/javascript/dashboard/i18n/locale/id/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/id/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/id/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/id/inboxMgmt.json
index 39facb3f6fd4b..770ff3865c1a4 100644
--- a/app/javascript/dashboard/i18n/locale/id/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/id/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Kotak masuk",
     "SIDEBAR_TXT": "<p><b>Kotak Masuk</b></p> <p> Saat Anda menghubungkan website atau Halaman Facebook ke Chatwoot, itu disebut <b>Kotak Masuk</b>. Anda dapat memiliki kotak masuk tak terbatas di akun Chatwoot Anda. </p><p> Klik pada <b>Tambah Kotak masuk</b> untuk menghubungkan situs web atau Halaman Facebook. </p><p> Di Dasbor, Anda dapat melihat semua percakapan dari semua kotak masuk Anda di satu tempat dan menanggapinya di bawah tab `Percakapan`. </p><p> Anda juga dapat melihat percakapan khusus untuk kotak masuk dengan mengklik nama kotak masuk di panel kiri dasbor. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Tidak ada kotak masuk yang dilampirkan ke akun ini."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Klik tombol Masuk dengan Microsoft untuk memulai. Anda akan dialihkan ke halaman masuk email. Setelah Anda menerima izin yang diminta, Anda akan diarahkan kembali ke langkah pembuatan kotak masuk.",
         "EMAIL_PLACEHOLDER": "Masukkan alamat email",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Untuk menambahkan akun Microsoft Anda sebagai saluran, Anda perlu mengotentikasi akun Microsoft Anda dengan mengeklik 'Masuk dengan Microsoft' ",
         "ERROR_MESSAGE": "Terjadi kesalahan saat menghubungkan ke Microsoft, harap coba lagi"
       }
diff --git a/app/javascript/dashboard/i18n/locale/id/integrations.json b/app/javascript/dashboard/i18n/locale/id/integrations.json
index 9b2a9b367390f..e9e3f6d31e808 100644
--- a/app/javascript/dashboard/i18n/locale/id/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/id/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrasi",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Acara Berlangganan",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Tambahkan aplikasi dasbor baru",
       "SIDEBAR_TXT": "<p><b>Aplikasi Dasbor</b></p><p>Aplikasi Dasbor memungkinkan organisasi untuk menyematkan aplikasi di dalam dasbor Chatwoot untuk menyediakan konteks bagi agen dukungan pelanggan. Fitur ini memungkinkan Anda membuat aplikasi secara independen dan menyematkannya di dalam dasbor untuk menyediakan informasi pengguna, pesanan, atau riwayat pembayaran sebelumnya.</p><p>Ketika Anda menyematkan aplikasi Anda menggunakan dasbor di Chatwoot, aplikasi Anda akan mendapatkan konteks percakapan dan kontak sebagai acara window. Implementasikan penerima untuk acara pesan di halaman Anda untuk menerima konteks.</p><p>Untuk menambahkan aplikasi dasbor baru, klik tombol 'Tambahkan aplikasi dasbor baru'.</p>",
       "DESCRIPTION": "Aplikasi Dasbor memungkinkan organisasi untuk menyematkan aplikasi di dalam dasbor untuk menyediakan konteks bagi agen dukungan pelanggan. Fitur ini memungkinkan Anda membuat aplikasi secara independen dan menyematkannya untuk menyediakan informasi pengguna, pesanan, atau riwayat pembayaran sebelumnya.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Belum ada aplikasi dasbor yang dikonfigurasi untuk akun ini",
         "LOADING": "Mengambil aplikasi dasbor...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Aplikasi dasbor berhasil dihapus",
         "API_ERROR": "Kami tidak dapat menghapus aplikasi. Harap coba lagi nanti"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Buat",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Tautan",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Judul",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Judul wajib diisi"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Deskripsi",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Tim",
+            "PLACEHOLDER": "Pilih tim",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritas",
+            "PLACEHOLDER": "Pilih prioritas",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Buat",
+        "CANCEL": "Batalkan",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Prioritas",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Label",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/id/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/id/labelsMgmt.json
index 7db3157ad98ec..01a99a2ac0c07 100644
--- a/app/javascript/dashboard/i18n/locale/id/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/id/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Label",
     "HEADER_BTN_TXT": "Tambah label",
     "LOADING": "Mengambil label",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Tidak ada item yang cocok dengan kueri ini",
-    "SIDEBAR_TXT": "<p><b>Label</b> <p>Label membantu Anda mengkategorikan percakapan dan memprioritaskannya. Anda dapat menetapkan label ke percakapan dari panel samping. <br /><br />Label terikat ke akun dan bisa digunakan untuk membuat alur kerja kustom di organisasi Anda. Anda dapat menetapkan warna khusus ke label, ini membuatnya lebih mudah untuk mengidentifikasi label. Anda akan dapat menampilkan label di sidebar untuk memfilter percakapan dengan mudah.</p>",
     "LIST": {
       "404": "Tidak ada label yang tersedia di akun ini.",
       "TITLE": "Kelola label",
@@ -49,7 +50,8 @@
       "DISMISS": "Tutup",
       "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": "Tambah label",
diff --git a/app/javascript/dashboard/i18n/locale/id/macros.json b/app/javascript/dashboard/i18n/locale/id/macros.json
index 831b41fac0f52..81aa8276d1f92 100644
--- a/app/javascript/dashboard/i18n/locale/id/macros.json
+++ b/app/javascript/dashboard/i18n/locale/id/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Jalankan",
       "PREVIEW": "Pratinjau Makro",
       "EXECUTED_SUCCESSFULLY": "Makro berhasil dijalankan"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Nilai dibutuhkan",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/id/report.json b/app/javascript/dashboard/i18n/locale/id/report.json
index 7c601dd56727e..e6d8721746724 100644
--- a/app/javascript/dashboard/i18n/locale/id/report.json
+++ b/app/javascript/dashboard/i18n/locale/id/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Lalu Lintas Percakapan",
       "NO_CONVERSATIONS": "Tidak ada percakapan",
       "CONVERSATION": "%{count} percakapan",
-      "CONVERSATIONS": "%{count} percakapan"
+      "CONVERSATIONS": "%{count} percakapan",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Percakapan oleh Agen",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "Tambah filter",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "Tidak ada hasil ditemukan",
@@ -536,6 +537,7 @@
       "LABELS": "Label",
       "TEAMS": "Tim"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/id/search.json b/app/javascript/dashboard/i18n/locale/id/search.json
index ca5ab205d55b9..c6ee83b6dcf0c 100644
--- a/app/javascript/dashboard/i18n/locale/id/search.json
+++ b/app/javascript/dashboard/i18n/locale/id/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Percakapan",
       "MESSAGES": "Pesan"
     },
+    "SEARCHING_DATA": "Sedang mencari",
     "EMPTY_STATE": "Tidak ada %{item} ditemukan untuk kueri '%{query}'",
     "EMPTY_STATE_FULL": "Tidak ada hasil ditemukan untuk kueri '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ untuk fokus",
diff --git a/app/javascript/dashboard/i18n/locale/id/settings.json b/app/javascript/dashboard/i18n/locale/id/settings.json
index 18b1438471d2f..af80ff677bded 100644
--- a/app/javascript/dashboard/i18n/locale/id/settings.json
+++ b/app/javascript/dashboard/i18n/locale/id/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Laporan",
     "SETTINGS": "Pengaturan",
     "CONTACTS": "Kontak",
+    "CAPTAIN": "Captain",
     "HOME": "Beranda",
     "AGENTS": "Agen",
     "AGENT_BOTS": "Bot Agen",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Gambaran",
-    "FACEBOOK_REAUTHORIZE": "Koneksi Facebook Anda telah kedaluwarsa, hubungkan kembali halaman Facebook Anda untuk melanjutkan layanan",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Pusat Bantuan",
       "ALL_ARTICLES": "Semua Artikel",
diff --git a/app/javascript/dashboard/i18n/locale/id/teamsSettings.json b/app/javascript/dashboard/i18n/locale/id/teamsSettings.json
index 1f37756731c32..74cc5760ab6ad 100644
--- a/app/javascript/dashboard/i18n/locale/id/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/id/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Buat tim baru",
     "HEADER": "Tim",
-    "SIDEBAR_TXT": "<p><b>Tim</b></p> <p>Tim memungkinkan Anda mengorganisir agen-agen Anda ke dalam kelompok berdasarkan tanggung jawab mereka. <br /> Seorang agen dapat menjadi bagian dari beberapa tim. Anda dapat mengalokasikan percakapan kepada sebuah tim saat bekerja secara kolaboratif. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Belum ada tim yang dibuat pada akun ini.",
-      "EDIT_TEAM": "Edit Tim"
+      "EDIT_TEAM": "Edit Tim",
+      "NONE": "Tidak ada"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Tidak dapat menghapus tim. Coba lagi."
       },
       "CONFIRM": {
-        "TITLE": "Anda yakin akan menghapus - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Silakan ketik %{teamName} untuk konfirmasi",
         "MESSAGE": "Menghapus tim akan menghilangkan alokasi tim dari percakapan yang telah ditetapkan terhadap tim ini.",
         "YES": "Hapus ",
diff --git a/app/javascript/dashboard/i18n/locale/is/advancedFilters.json b/app/javascript/dashboard/i18n/locale/is/advancedFilters.json
index bb883b0f09a8f..8c2cc528f1c51 100644
--- a/app/javascript/dashboard/i18n/locale/is/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/is/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/is/agentMgmt.json b/app/javascript/dashboard/i18n/locale/is/agentMgmt.json
index 8836f13aca6dc..f7344f58c8064 100644
--- a/app/javascript/dashboard/i18n/locale/is/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/is/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Þjónustufulltrúar",
     "HEADER_BTN_TXT": "Bæta við þjónustufulltrúa",
     "LOADING": "Sækja lista yfir þjónustufulltrúa",
-    "SIDEBAR_TXT": "<p><b>Þjónustufulltrúar</b></p> <p> <b>Þjónustufulltrúi</b> er meðlimur í þjónustuverinu þínu. </p><p> Þjónustufulltrúar munu geta skoðað og svarað skilaboðum frá notendum þínum. Listinn sýnir alla þjónustufulltrúa sem eru á reikningnum þínum. </p><p> Smelltu á <b>Bæta við þjónustufulltrúa</b> til að bæta við nýjum þjónustufulltrúa. þjónustufulltrúi sem þú bætir við mun fá tölvupóst með staðfestingartengli til að virkja reikninginn sinn, eftir það getur hann fengið aðgang að Chatwoot og svarað skilaboðum. </p><p> Aðgangur að eiginleikum Chatwoot byggist á eftirfarandi hlutverkum. </p><p> <b>Þjónustufulltrúi</b> - Þjónustufulltrúi með þetta hlutverk hafa aðeins aðgang að innhólfum, skýrslur og samtöl. Þeir geta úthlutað samtölum til annarra umboðsmanna eða á sjálfa sig og leyst samtöl.</p><p> <b>Stjórnandi</b> - Stjórnandi mun hafa aðgang að öllum Chatwoot eiginleikum sem eru virkjaðir fyrir reikninginn þinn, þar á meðal stillingar, ásamt öllum venjulegum réttindum þjónustufulltrúa.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Stjórnandi",
       "AGENT": "Þjónustufulltrúi"
diff --git a/app/javascript/dashboard/i18n/locale/is/auditLogs.json b/app/javascript/dashboard/i18n/locale/is/auditLogs.json
index df05b299584f5..f69062ea80a6f 100644
--- a/app/javascript/dashboard/i18n/locale/is/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/is/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Aðgerðaskrá",
     "HEADER_BTN_TXT": "Bæta við Aðgerðaskrá",
     "LOADING": "Hleð Aðgerðaskrá",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Það eru engin atriði sem passa við þessa fyrirspurn",
     "SIDEBAR_TXT": "<p><b>Aðgerðaskrá</b> </p><p> Aðgerðaskrá heldur utan um alla atburði og aðgerðir í Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/is/automation.json b/app/javascript/dashboard/i18n/locale/is/automation.json
index 49815e07cdc12..0c028c7768789 100644
--- a/app/javascript/dashboard/i18n/locale/is/automation.json
+++ b/app/javascript/dashboard/i18n/locale/is/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Þú þarft að hafa að minnsta kosti eina aðgerð til að vista",
       "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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Hleður upp...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/is/bulkActions.json b/app/javascript/dashboard/i18n/locale/is/bulkActions.json
index fbdab2cdb191c..890dc71074a3f 100644
--- a/app/javascript/dashboard/i18n/locale/is/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/is/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Úthluta",
     "YES": "Já",
+    "SEARCH_INPUT_PLACEHOLDER": "Leit",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "Enginn",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/is/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/is/cannedMgmt.json
index 433fa04bcd5e9..d067a37a9a08e 100644
--- a/app/javascript/dashboard/i18n/locale/is/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/is/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Stöðluð svör",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Það eru engin atriði sem passa við þessa fyrirspurn.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Það eru engin stöðluð svör aðgengileg á þessum reikning.",
       "TITLE": "Stjórna stöðluðum svörum",
diff --git a/app/javascript/dashboard/i18n/locale/is/contact.json b/app/javascript/dashboard/i18n/locale/is/contact.json
index 507ca46641327..dd0d23ca005c6 100644
--- a/app/javascript/dashboard/i18n/locale/is/contact.json
+++ b/app/javascript/dashboard/i18n/locale/is/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Tengiliður sameinaður",
       "ERROR_MESSAGE": "Tókst ekki að sameina tengiliði, reyndu aftur!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/is/conversation.json b/app/javascript/dashboard/i18n/locale/is/conversation.json
index 072148ec58084..81ffa3e80cda0 100644
--- a/app/javascript/dashboard/i18n/locale/is/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/is/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter fyrir nýja línu. Byrjaðu á '/' til að velja tilbúið svar.",
       "PRIVATE_MSG_INPUT": "Shift + enter fyrir nýja línu. Þetta verður aðeins sýnilegt fyrir þjónustufulltrúa",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Skilaboðundirskrift er ekki stillt, vinsamlegast stilltu hana í prófílstillingum.",
-      "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/is/general.json b/app/javascript/dashboard/i18n/locale/is/general.json
index 25bb4dfb736d2..da37c9397459f 100644
--- a/app/javascript/dashboard/i18n/locale/is/general.json
+++ b/app/javascript/dashboard/i18n/locale/is/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": "Leit",
+      "EMPTY_STATE": "Engar niðurstöður fundust"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/is/generalSettings.json b/app/javascript/dashboard/i18n/locale/is/generalSettings.json
index 02e892c26b474..4e77c9d380b97 100644
--- a/app/javascript/dashboard/i18n/locale/is/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/is/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Uppfæra"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Þar til á morgun",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/is/helpCenter.json b/app/javascript/dashboard/i18n/locale/is/helpCenter.json
index 41fc6ebdca46b..8ee3eac390297 100644
--- a/app/javascript/dashboard/i18n/locale/is/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/is/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/is/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/is/inboxMgmt.json
index 259c9193f91e3..db612bd6ef638 100644
--- a/app/javascript/dashboard/i18n/locale/is/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/is/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Innhólf",
     "SIDEBAR_TXT": "<p><b>Innhólf</b></p> <p> Þegar þú tengir vefsíðu eða Facebook-síðu við Chatwoot er það kallað <b>Innhólf</b>. Þú getur haft ótakmörkuð innhólf á Chatwoot reikningnum þínum. </p><p> Smelltu á <b>Bæta við innhólfi</b> til að tengja vefsíðu eða Facebook-síðu. </p><p> Í stjórnborðinu geturðu séð öll samtölin úr öllum innhólfunum þínum á einum stað og svarað þeim undir flipanum 'Samtöl'. </p><p> Þú getur líka séð samtöl sem eru sértæk fyrir innhólf með því að smella á innhólfsnafnið í vinstri glugganum á mælaborðinu. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Það eru engin innhólf tengd við þennan reikning."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/is/integrations.json b/app/javascript/dashboard/i18n/locale/is/integrations.json
index 09c9abd7b147f..5e9cf1931cae8 100644
--- a/app/javascript/dashboard/i18n/locale/is/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/is/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Mælaborðsforrit</b></p><p>Mælaborðsforrit gera fyrirtækjum kleift að innsteypa (e. embed) forrit inn í Chatwoot mælaborðið til að veita þjónustufulltrúum samhengi. Þessi eiginleiki gerir þér kleift að búa til forrit sjálfstætt og innsteypa það inn í mælaborðið til að veita notendaupplýsingar, pantanir þeirra eða fyrri greiðsluferla.</p><p>Þegar þú innsteypir forritið þitt með því að nota mælaborðið í Chatwoot mun forritið þitt fáðu samhengi samtalsins og sambandsins sem gluggaviðburð (e. window event). Settu upp hlustanda fyrir skilaboðaviðburðinn á síðunni þinni til að fá samhengið.</p><p>Til að bæta við nýju stjórnborðsforriti skaltu smella á hnappinn 'Bæta við nýju stjórnborðsforriti'.</p>",
       "DESCRIPTION": "Mælaborðsforrit gera fyrirtækjum kleift að innsteypa (e. embed) forrit inn í mælaborðið til að veita þjónustufulltrúa samhengi. Þessi eiginleiki gerir þér kleift að búa til forrit sjálfstætt og innsteypa það inn til að veita notendaupplýsingar, pantanir þeirra eða fyrri greiðsluferil.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Engin mælaborðsforrit eru stillt á þessum reikningi ennþá",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "Ekki tókst að eyða forriti. Vinsamlegast reyndu aftur síðar"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Stofna",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Velja teymi",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Staða",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Stofna",
+        "CANCEL": "Hætta við",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Staða",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/is/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/is/labelsMgmt.json
index 55c76ef38e5d3..c5d4284fc2789 100644
--- a/app/javascript/dashboard/i18n/locale/is/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/is/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Það eru engin atriði sem passa við þessa fyrirspurn",
-    "SIDEBAR_TXT": "<p><b>Flokkar</b> <p>Flokkar hjálpa þér að flokka samtöl og forgangsraða þeim. Þú getur úthlutað flokk á samtal frá hliðarborðinu. <br /><br />Flokkar eru tengdir við reikninginn og hægt er að nota þau til að búa til sérsniðin verkflæði í fyrirtækinu þínu. Þú getur úthlutað sérsniðnum lit á merkimiðann, það gerir það auðveldara að bera kennsl á merkimiðann. Þú munt geta birt merkimiðann á hliðarstikunni til að sía samtölin auðveldlega.</p>",
     "LIST": {
       "404": "Engar merkingar eru tiltækir á þessum reikningi.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/is/macros.json b/app/javascript/dashboard/i18n/locale/is/macros.json
index 6896ea953ae61..c88c068dd14b8 100644
--- a/app/javascript/dashboard/i18n/locale/is/macros.json
+++ b/app/javascript/dashboard/i18n/locale/is/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/is/report.json b/app/javascript/dashboard/i18n/locale/is/report.json
index 73448d3ac3455..1f5c63129ba22 100644
--- a/app/javascript/dashboard/i18n/locale/is/report.json
+++ b/app/javascript/dashboard/i18n/locale/is/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/is/search.json b/app/javascript/dashboard/i18n/locale/is/search.json
index 53dc6abecb1b0..605050421f419 100644
--- a/app/javascript/dashboard/i18n/locale/is/search.json
+++ b/app/javascript/dashboard/i18n/locale/is/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Samtöl",
       "MESSAGES": "Skilaboð"
     },
+    "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/i18n/locale/is/settings.json b/app/javascript/dashboard/i18n/locale/is/settings.json
index 32acdec203b80..66bd17f5edace 100644
--- a/app/javascript/dashboard/i18n/locale/is/settings.json
+++ b/app/javascript/dashboard/i18n/locale/is/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Stillingar",
     "CONTACTS": "Tengiliðir",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Þjónustufulltrúar",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Facebook tengingin þín er útrunnin, vinsamlegast tengdu Facebook síðuna þína aftur til að halda áfram þjónustu",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/is/teamsSettings.json b/app/javascript/dashboard/i18n/locale/is/teamsSettings.json
index 6bb916df0ec9c..0d01e8098da85 100644
--- a/app/javascript/dashboard/i18n/locale/is/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/is/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Stofna nýtt teymi",
     "HEADER": "Teymi",
-    "SIDEBAR_TXT": "<p><b>Teymi</b></p> <p>Teymi leyfa þér að skipuleggja þjónustufulltrúa þína í hópa út frá ábyrgð þeirra. <br /> Þjónustufulltrúi getur verið hluti af mörgum teymum. Þú getur úthlutað samtölum á teymi þegar þú ert að vinna í samvinnu. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Það eru engin teymi til á þessum reikningi.",
-      "EDIT_TEAM": "Breyta teymi"
+      "EDIT_TEAM": "Breyta teymi",
+      "NONE": "Enginn"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Ef teyminu er eytt verður liðsúthlutunin fjarlægð úr samtölunum sem þessu teymi hefur verið úthlutað.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/it/advancedFilters.json b/app/javascript/dashboard/i18n/locale/it/advancedFilters.json
index ce079085334e4..90819c2e9135b 100644
--- a/app/javascript/dashboard/i18n/locale/it/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/it/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "E",
       "OR": "O"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Uguale a",
       "not_equal_to": "Non uguale a",
diff --git a/app/javascript/dashboard/i18n/locale/it/agentMgmt.json b/app/javascript/dashboard/i18n/locale/it/agentMgmt.json
index 01385d110752c..0e39e39ef0140 100644
--- a/app/javascript/dashboard/i18n/locale/it/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/it/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenti",
     "HEADER_BTN_TXT": "Aggiungi agente",
     "LOADING": "Recupero elenco agenti",
-    "SIDEBAR_TXT": "<p><b>Agenti</b></p> <p> Un <b>agente</b> è membro del tuo team di assistenza clienti. </p><p> Gli agenti saranno in grado di visualizzare e rispondere ai messaggi dei tuoi utenti. L'elenco mostra tutti gli agenti attualmente presenti nel tuo account. </p><p> Clicca su <b>Aggiungi agente</b> per aggiungere un nuovo agente. Ogni agente che aggiungi riceverà un'email con un link di conferma per attivare il loro account, dopo di che possono accedere a Chatwoot e rispondere ai messaggi. </p><p> L'accesso alle funzionalità di Chatwoot si basa sui seguenti ruoli. </p><p> <b>Agente</b> - Gli agenti con questo ruolo possono accedere solo a messaggi, report e conversazioni. Possono assegnare conversazioni ad altri agenti o a se stessi e risolvere le conversazioni.</p><p> <b>Amministratore</b> - L'amministratore avrà accesso a tutte le funzionalità di Chatwoot abilitate per il tuo account, comprese le impostazioni, insieme a tutti i privilegi di un agente normale.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Amministratore",
       "AGENT": "Agente"
diff --git a/app/javascript/dashboard/i18n/locale/it/auditLogs.json b/app/javascript/dashboard/i18n/locale/it/auditLogs.json
index b8f46fc6c01a0..8a5f139104ad6 100644
--- a/app/javascript/dashboard/i18n/locale/it/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/it/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Non ci sono elementi che corrispondono a questa richiesta",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/it/automation.json b/app/javascript/dashboard/i18n/locale/it/automation.json
index 222089f440385..a5e6797680bc6 100644
--- a/app/javascript/dashboard/i18n/locale/it/automation.json
+++ b/app/javascript/dashboard/i18n/locale/it/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "È necessario avere almeno una azione da salvare",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Inserisci qui il tuo messaggio",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Seleziona i team"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Seleziona i team",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Attiva regola di automazione",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Caricamento...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Caricamento fallito"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Il valore è obbligatorio",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/it/bulkActions.json b/app/javascript/dashboard/i18n/locale/it/bulkActions.json
index 320d61f817cde..9800703c64cc2 100644
--- a/app/javascript/dashboard/i18n/locale/it/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/it/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Torna indietro",
     "ASSIGN_LABEL": "Assegna",
     "YES": "Sì",
+    "SEARCH_INPUT_PLACEHOLDER": "Cerca",
     "ASSIGN_AGENT_TOOLTIP": "Assegna agente",
     "ASSIGN_TEAM_TOOLTIP": "Assegna team",
     "ASSIGN_SUCCESFUL": "Conversazioni assegnate correttamente.",
@@ -33,7 +34,7 @@
       "NONE": "Nessuno",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/it/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/it/cannedMgmt.json
index 97d4dd0df8148..813d0a7cd73ba 100644
--- a/app/javascript/dashboard/i18n/locale/it/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/it/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Risposte predefinite",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Non ci sono elementi che corrispondono a questa richiesta.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Non ci sono risposte predefinite disponibili in questo account.",
       "TITLE": "Gestisci le risposte predefinite",
diff --git a/app/javascript/dashboard/i18n/locale/it/contact.json b/app/javascript/dashboard/i18n/locale/it/contact.json
index 02e813746c013..7863c085bf865 100644
--- a/app/javascript/dashboard/i18n/locale/it/contact.json
+++ b/app/javascript/dashboard/i18n/locale/it/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contatto unito con successo",
       "ERROR_MESSAGE": "Impossibile unire i contatti, riprova!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/it/conversation.json b/app/javascript/dashboard/i18n/locale/it/conversation.json
index 494b9f095cfcb..f75f74730122e 100644
--- a/app/javascript/dashboard/i18n/locale/it/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/it/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "MAIUSC + INVIO per la nuova linea. Inizia con '/' per selezionare una risposta predefinita.",
       "PRIVATE_MSG_INPUT": "MAIUSC + INVIO per nuova linea. Questo sarà visibile solo agli agenti",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "La firma del messaggio non è configurata, configurala nelle impostazioni del profilo.",
-      "CLICK_HERE": "Clicca qui per aggiornare"
+      "CLICK_HERE": "Clicca qui per aggiornare",
+      "WHATSAPP_TEMPLATES": "Modelli Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Rispondi",
diff --git a/app/javascript/dashboard/i18n/locale/it/general.json b/app/javascript/dashboard/i18n/locale/it/general.json
index 25bb4dfb736d2..1fd89fe3ab173 100644
--- a/app/javascript/dashboard/i18n/locale/it/general.json
+++ b/app/javascript/dashboard/i18n/locale/it/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": "Cerca",
+      "EMPTY_STATE": "Nessun risultato trovato"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/it/generalSettings.json b/app/javascript/dashboard/i18n/locale/it/generalSettings.json
index ee72c3e972f39..03c67f2099f35 100644
--- a/app/javascript/dashboard/i18n/locale/it/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/it/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Aggiorna"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Fino a domani",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/it/helpCenter.json b/app/javascript/dashboard/i18n/locale/it/helpCenter.json
index d862883388780..29a2fe6df3cc4 100644
--- a/app/javascript/dashboard/i18n/locale/it/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/it/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/it/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/it/inboxMgmt.json
index 0018cdf25fe7b..42789b30e3c4a 100644
--- a/app/javascript/dashboard/i18n/locale/it/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/it/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Posta",
     "SIDEBAR_TXT": "<p><b>Casella</b></p> <p> Quando colleghi un sito web o una pagina facebook a Chatwoot, si chiama <b>Casella</b>. Puoi avere caselle illimitate nel tuo account Chatwoot. </p><p> Clicca su <b>Aggiungi Casella</b> per collegare un sito web o una pagina Facebook. </p><p> Nella Dashboard, puoi vedere tutte le conversazioni da tutte le tue caselle di posta in un unico posto e rispondere ad esse nella scheda `Conversazioni`. </p><p> È anche possibile visualizzare le conversazioni specifiche di una casella facendo clic sul nome della casella nel riquadro sinistro del cruscotto. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Non ci sono caselle allegate a questo account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/it/integrations.json b/app/javascript/dashboard/i18n/locale/it/integrations.json
index fca21ca3adb7f..d259017c30210 100644
--- a/app/javascript/dashboard/i18n/locale/it/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/it/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrazioni",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Eventi iscritti",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Aggiungi una nuova app dashboard",
       "SIDEBAR_TXT": "<p><b>App dashboard</b></p><p>Le app dashboard consentono alle organizzazioni di incorporare un'applicazione all'interno del cruscotto Chatwoot per fornire il contesto per gli agenti di assistenza clienti. Questa funzione consente di creare un'applicazione in modo indipendente e incorporata all'interno della dashboard per fornire informazioni all'utente, i loro ordini, o la loro cronologia di pagamento precedente.</p><p>Quando hai incorporato la tua applicazione usando il cruscotto in Chatwoot, la tua applicazione avrà il contesto della conversazione e del contatto come evento finestra. Implementa un ascoltatore per l'evento del messaggio sulla tua pagina per ricevere il contesto.</p><p>Per aggiungere una nuova app dashboard, clicca sul pulsante 'Aggiungi una nuova app dashboard'.</p>",
       "DESCRIPTION": "Le app dashboard consentono alle organizzazioni di incorporare un'applicazione all'interno della dashboard per fornire il contesto per gli agenti di assistenza clienti. Questa funzione consente di creare un'applicazione in modo indipendente e incorporare che per fornire informazioni sull'utente, i suoi ordini o la loro cronologia di pagamento precedente.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Non ci sono ancora app dashboard configurate su questo account",
         "LOADING": "Recupero delle app dashboard...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "App dashboard cancellata con successo",
         "API_ERROR": "Non è stato possibile eliminare l'app. Riprova più tardi"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Crea",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Titolo",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Il titolo è obbligatorio"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Descrizione",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Seleziona team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priorità",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Etichetta",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Stato",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Crea",
+        "CANCEL": "annulla",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Stato",
+        "PRIORITY": "Priorità",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etichette",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/it/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/it/labelsMgmt.json
index cee675b3378d0..367055311fcfe 100644
--- a/app/javascript/dashboard/i18n/locale/it/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/it/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etichette",
     "HEADER_BTN_TXT": "Aggiungi etichetta",
     "LOADING": "Recupero etichette",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Non ci sono elementi che corrispondono a questa richiesta",
-    "SIDEBAR_TXT": "<p><b>Etichette</b> <p>Le etichette ti aiutano a categorizzare le conversazioni e a dargli una priorità. È possibile assegnare l'etichetta a una conversazione dal pannello laterale. <br /><br />Le etichette sono legate all'account e possono essere utilizzate per creare flussi di lavoro personalizzati nell'organizzazione. È possibile assegnare un colore personalizzato a un'etichetta, così da rendere più facile identificare l'etichetta. Potrai visualizzare l'etichetta sulla barra laterale per filtrare facilmente le conversazioni.</p>",
     "LIST": {
       "404": "Non ci sono etichette disponibili in questo account.",
       "TITLE": "Gestisci etichette",
@@ -49,7 +50,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": "Aggiungi etichetta",
diff --git a/app/javascript/dashboard/i18n/locale/it/macros.json b/app/javascript/dashboard/i18n/locale/it/macros.json
index 6f1f6c84a9d89..bd8e522e8561f 100644
--- a/app/javascript/dashboard/i18n/locale/it/macros.json
+++ b/app/javascript/dashboard/i18n/locale/it/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Il valore è obbligatorio",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/it/report.json b/app/javascript/dashboard/i18n/locale/it/report.json
index af0ada57a9741..8251bc23bffa0 100644
--- a/app/javascript/dashboard/i18n/locale/it/report.json
+++ b/app/javascript/dashboard/i18n/locale/it/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": "Conversazioni degli agenti",
@@ -536,6 +537,7 @@
       "LABELS": "Etichetta",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/it/search.json b/app/javascript/dashboard/i18n/locale/it/search.json
index be89941961a16..b5b93b96f18ef 100644
--- a/app/javascript/dashboard/i18n/locale/it/search.json
+++ b/app/javascript/dashboard/i18n/locale/it/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversazioni",
       "MESSAGES": "Messaggi"
     },
+    "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/i18n/locale/it/settings.json b/app/javascript/dashboard/i18n/locale/it/settings.json
index 7f3ff362726db..f395d8d1cf9cb 100644
--- a/app/javascript/dashboard/i18n/locale/it/settings.json
+++ b/app/javascript/dashboard/i18n/locale/it/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Segnalazioni",
     "SETTINGS": "Impostazioni",
     "CONTACTS": "Contatti",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agenti",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Panoramica",
-    "FACEBOOK_REAUTHORIZE": "La tua connessione a Facebook è scaduta, ricollegati alla tua pagina Facebook per continuare i servizi",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "Tutti gli articoli",
diff --git a/app/javascript/dashboard/i18n/locale/it/teamsSettings.json b/app/javascript/dashboard/i18n/locale/it/teamsSettings.json
index d90df3853227f..98e3dd10fb8fa 100644
--- a/app/javascript/dashboard/i18n/locale/it/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/it/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Crea un nuovo team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams ti permette di organizzare i tuoi agenti in gruppi in base alle loro responsabilità. <br /> Un agente può far parte di più team. È possibile assegnare conversazioni a un team quando si lavora in collaborazione. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Non ci sono team creati su questo account.",
-      "EDIT_TEAM": "Modifica team"
+      "EDIT_TEAM": "Modifica team",
+      "NONE": "Nessuno"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Impossibile eliminare il team. Riprova."
       },
       "CONFIRM": {
-        "TITLE": "Sei sicuro di voler eliminare - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Digita {teamName} per confermare",
         "MESSAGE": "L'eliminazione del team rimuoverà l'assegnazione del team dalle conversazioni assegnate a questo team.",
         "YES": "Elimina ",
diff --git a/app/javascript/dashboard/i18n/locale/ja/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ja/advancedFilters.json
index 6b1f4d15b20b6..c16217615cd4e 100644
--- a/app/javascript/dashboard/i18n/locale/ja/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ja/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "AND",
       "OR": "OR"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "等しい",
       "not_equal_to": "等しくない",
diff --git a/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json
index 2d3c7d27256e1..6a64f552df3cd 100644
--- a/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "担当者",
     "HEADER_BTN_TXT": "担当者を追加",
     "LOADING": "担当者リストを設定",
-    "SIDEBAR_TXT": "<p><b>担当者</b></p> <p> <b>担当者</b> は、カスタマーサポートチームのメンバーです。 </p><p> 担当者は、ユーザーからのメッセージを閲覧でき、返信することができます。リストに、全担当者が表示されます。 </p><p><b>担当者を追加</b> ボタンを押して、担当者を追加してください。あなたが追加した担当者は、自身のメールアドレスにメールが届き、確認リンクを使ってアカウントを有効化します。その後、Chatwootにアクセスし、メッセージに返信します。 </p><p> Chatwoot の機能を利用するには、その権限に準じます。 </p><p> <b>担当者</b> - 担当者権限では、受信トレイにアクセスする他、会話のデータをレポートできます。担当者間で会話の割り当てが行えるほか、会話を解決済みにすることもできます。</p><p> <b>管理者</b> - 管理者は、すべてのChatwootの機能にアクセスでき、担当者権限もすべて有効です。</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "管理者",
       "AGENT": "担当者"
diff --git a/app/javascript/dashboard/i18n/locale/ja/auditLogs.json b/app/javascript/dashboard/i18n/locale/ja/auditLogs.json
index 9f2cd4f29395a..d8307ee4a6286 100644
--- a/app/javascript/dashboard/i18n/locale/ja/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ja/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "検索内容（クエリ）に一致する項目はありませんでした",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ja/automation.json b/app/javascript/dashboard/i18n/locale/ja/automation.json
index 29fe5dad2150d..9d64a738e336d 100644
--- a/app/javascript/dashboard/i18n/locale/ja/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ja/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "アップロード中...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "値は必須です",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ja/bulkActions.json b/app/javascript/dashboard/i18n/locale/ja/bulkActions.json
index 223ceeb877fd6..68387c57c5445 100644
--- a/app/javascript/dashboard/i18n/locale/ja/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ja/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "Search",
     "ASSIGN_AGENT_TOOLTIP": "エージェントを割り当てる",
     "ASSIGN_TEAM_TOOLTIP": "チームを割り当てる",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "該当なし",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ja/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ja/cannedMgmt.json
index 77e43fff46b23..30e14f7ac557d 100644
--- a/app/javascript/dashboard/i18n/locale/ja/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ja/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "定型文",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "検索内容（クエリ）に一致する項目はありませんでした.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "このアカウントには、利用可能な定型文の回答はありません",
       "TITLE": "定型文回答を管理する",
diff --git a/app/javascript/dashboard/i18n/locale/ja/contact.json b/app/javascript/dashboard/i18n/locale/ja/contact.json
index 20a70df5b1ab9..e4bab8eb67fa3 100644
--- a/app/javascript/dashboard/i18n/locale/ja/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ja/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/ja/conversation.json b/app/javascript/dashboard/i18n/locale/ja/conversation.json
index f040383237f56..a6b14aa309f73 100644
--- a/app/javascript/dashboard/i18n/locale/ja/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ja/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + Enter で新しい行を作成します。「/」で開始すると、定型文回答を選択できます。",
       "PRIVATE_MSG_INPUT": "Shift + Enter で新しい行を作成します。これは担当者にのみ表示されます。",
       "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": "返信",
diff --git a/app/javascript/dashboard/i18n/locale/ja/general.json b/app/javascript/dashboard/i18n/locale/ja/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/ja/general.json
+++ b/app/javascript/dashboard/i18n/locale/ja/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/ja/generalSettings.json b/app/javascript/dashboard/i18n/locale/ja/generalSettings.json
index df9e36055d8bf..b616b45d56850 100644
--- a/app/javascript/dashboard/i18n/locale/ja/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ja/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "オフライン"
+      "OFFLINE": "オフライン",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ja/helpCenter.json b/app/javascript/dashboard/i18n/locale/ja/helpCenter.json
index 872b16c524a0d..e917f9e968485 100644
--- a/app/javascript/dashboard/i18n/locale/ja/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ja/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/ja/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ja/inboxMgmt.json
index 954d374f2d28e..58a6fad796325 100644
--- a/app/javascript/dashboard/i18n/locale/ja/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ja/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "受信トレイ",
     "SIDEBAR_TXT": "<p><b>受信トレイ</b></p> <p>ウェブサイトと接続した場合、またはFacebookページとChatwootを接続した場合、受信トレイが作成されます。1つのChatwootアカウントにつき、受信トレイは無制限で作成することができます。</p><p><b>受信トレイ作成</b>ボタンをクリックすると、ウェブサイトまたはFacebookと接続できるようになります。</p><p> 管理画面では、受信トレイ内にあるすべての会話がひとつの場所で確認でき、会話タブにて返信することができます。</p><p> 管理画面の左パネルから受信トレイの名前をクリックすることでも、特定の会話を見ることができます。</p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "このアカウントに紐付けられている受信トレイはありません。"
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ja/integrations.json b/app/javascript/dashboard/i18n/locale/ja/integrations.json
index edcc20abb776f..be8b9ff74d19e 100644
--- a/app/javascript/dashboard/i18n/locale/ja/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ja/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "連携",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "作成",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "説明",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "状況",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "作成",
+        "CANCEL": "キャンセル",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "状況",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "ラベル",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ja/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ja/labelsMgmt.json
index e7dcb6edad816..2fcf65dd3bba6 100644
--- a/app/javascript/dashboard/i18n/locale/ja/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ja/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "ラベル",
     "HEADER_BTN_TXT": "ラベルを追加",
     "LOADING": "ラベルを取得中",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "検索内容（クエリ）に一致する項目はありませんでした",
-    "SIDEBAR_TXT": "<p><b>ラベル</b> <p>ラベルは会話のカテゴリー分けや優先順位づけに便利です。サイドパネルから、会話に対してラベルを設定することができます。<br /><br />ラベルはアカウントと関連付けられ、組織内のカスタムワークフローにも利用できます。ラベルには個別の色を設定できるので、認識が容易になります。サイドバーにラベルを表示させることによって、会話を絞り込むことが簡単にできます。</p>",
     "LIST": {
       "404": "このアカウントには利用可能なラベルがありません。",
       "TITLE": "ラベルの管理",
@@ -49,7 +50,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": "ラベルを追加",
diff --git a/app/javascript/dashboard/i18n/locale/ja/macros.json b/app/javascript/dashboard/i18n/locale/ja/macros.json
index 9e29599d01979..80c1db59eb0ee 100644
--- a/app/javascript/dashboard/i18n/locale/ja/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ja/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "値は必須です",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ja/report.json b/app/javascript/dashboard/i18n/locale/ja/report.json
index ab95f6cc8735a..d43f64ed1533a 100644
--- a/app/javascript/dashboard/i18n/locale/ja/report.json
+++ b/app/javascript/dashboard/i18n/locale/ja/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/ja/search.json b/app/javascript/dashboard/i18n/locale/ja/search.json
index 5c7b2769bfeaf..eea0cfd58cd53 100644
--- a/app/javascript/dashboard/i18n/locale/ja/search.json
+++ b/app/javascript/dashboard/i18n/locale/ja/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "会話データ",
       "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/i18n/locale/ja/settings.json b/app/javascript/dashboard/i18n/locale/ja/settings.json
index ddac71cdbf04f..794027346c5c8 100644
--- a/app/javascript/dashboard/i18n/locale/ja/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ja/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "レポート",
     "SETTINGS": "設定",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "ホーム",
     "AGENTS": "担当者",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Facebookの接続が期限切れになりました。サービスを継続するには、Facebookページを再接続してください。",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ja/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ja/teamsSettings.json
index 387f222e541e2..872bb24c61397 100644
--- a/app/javascript/dashboard/i18n/locale/ja/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ja/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "チームを新規作成",
     "HEADER": "チーム一覧",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "このアカウントにはまだ作成したチームはありません。",
-      "EDIT_TEAM": "チームを編集"
+      "EDIT_TEAM": "チームを編集",
+      "NONE": "該当なし"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "削除 ",
diff --git a/app/javascript/dashboard/i18n/locale/ka/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ka/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/ka/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/ka/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/ka/auditLogs.json b/app/javascript/dashboard/i18n/locale/ka/auditLogs.json
index bb30079757f72..7f412b4c085ac 100644
--- a/app/javascript/dashboard/i18n/locale/ka/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ka/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ka/automation.json b/app/javascript/dashboard/i18n/locale/ka/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/ka/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ka/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ka/bulkActions.json b/app/javascript/dashboard/i18n/locale/ka/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/ka/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ka/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ka/cannedMgmt.json
index 082afcb84eec4..74b152c847e1f 100644
--- a/app/javascript/dashboard/i18n/locale/ka/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ka/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/ka/contact.json b/app/javascript/dashboard/i18n/locale/ka/contact.json
index 7a4a3af3721fa..0c713552b474f 100644
--- a/app/javascript/dashboard/i18n/locale/ka/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/ka/conversation.json b/app/javascript/dashboard/i18n/locale/ka/conversation.json
index cc3e4569bc729..8eb490a4b5e3f 100644
--- a/app/javascript/dashboard/i18n/locale/ka/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/ka/general.json b/app/javascript/dashboard/i18n/locale/ka/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/ka/general.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/ka/generalSettings.json b/app/javascript/dashboard/i18n/locale/ka/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/ka/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ka/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ka/helpCenter.json b/app/javascript/dashboard/i18n/locale/ka/helpCenter.json
index 467b0def962cf..5c74d99289527 100644
--- a/app/javascript/dashboard/i18n/locale/ka/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/ka/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ka/inboxMgmt.json
index 2cd3c1f065788..19212a595c75f 100644
--- a/app/javascript/dashboard/i18n/locale/ka/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ka/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ka/integrations.json b/app/javascript/dashboard/i18n/locale/ka/integrations.json
index 45587f2dbf1ac..b219617fa33f3 100644
--- a/app/javascript/dashboard/i18n/locale/ka/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ka/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ka/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ka/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/ka/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ka/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/ka/macros.json b/app/javascript/dashboard/i18n/locale/ka/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/ka/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ka/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ka/report.json b/app/javascript/dashboard/i18n/locale/ka/report.json
index c27532783f2cb..b27417c82adb7 100644
--- a/app/javascript/dashboard/i18n/locale/ka/report.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/ka/search.json b/app/javascript/dashboard/i18n/locale/ka/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/ka/search.json
+++ b/app/javascript/dashboard/i18n/locale/ka/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/i18n/locale/ka/settings.json b/app/javascript/dashboard/i18n/locale/ka/settings.json
index fc8d9982778da..632f45fc12c09 100644
--- a/app/javascript/dashboard/i18n/locale/ka/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ka/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ka/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ka/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/ka/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ka/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/ko/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ko/advancedFilters.json
index 7ea1703d2c155..30874d3396b28 100644
--- a/app/javascript/dashboard/i18n/locale/ko/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ko/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "와/과",
       "OR": "혹은"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "동일한",
       "not_equal_to": "비동일한",
diff --git a/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json
index 61f00d5dacb5e..2cd078a93fe96 100644
--- a/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "에이전트",
     "HEADER_BTN_TXT": "에이전트 추가",
     "LOADING": "에이전트 목록을 가져오는 중",
-    "SIDEBAR_TXT": "<p><b></b>에이전트<p><b><p><b>에이전트</b>는 고객 지원 팀의 구성원입니다.</p><p>에이전트는 사용자의 메시지를 보고 답장할 수 있습니다. 목록에 현재 계정에 있는 모든 에이전트가 표시됩니다.</p><p>새 에이전트를 추가하려면 <b>[에이전트 추가]</b>를 클릭하십시오. 사용자가 추가한 에이전트는 계정을 활성화하기 위한 확인 링크가 포함된 이메일을 받게 되며, 이후 챗부팅에 액세스하여 메시지에 응답할 수 있습니다.</p><p>Chatwoot의 기능에 대한 액세스는 다음 역할을 기반으로 한다.</p><p></b>에이전트</b> - 이 역할을 가진 에이전트는 받은 편지함, 보고서 및 대화에만 액세스할 수 있다. 그들은 다른 요원이나 자신들에게 대화를 할당하고 대화를 해결할 수 있습니다.</p><p><b>관리자</b> - 관리자는 일반 에이전트의 모든 권한과 함께 설정을 포함하여 계정에 대해 활성화된 모든 챗부팅 기능에 액세스할 수 있습니다.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "관리자",
       "AGENT": "에이전트"
diff --git a/app/javascript/dashboard/i18n/locale/ko/auditLogs.json b/app/javascript/dashboard/i18n/locale/ko/auditLogs.json
index 854d0a47f43e3..1c8a0f1683750 100644
--- a/app/javascript/dashboard/i18n/locale/ko/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ko/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "이 쿼리와 일치하는 항목이 없음",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ko/automation.json b/app/javascript/dashboard/i18n/locale/ko/automation.json
index cf7b67d20a4d1..cca5e455254a2 100644
--- a/app/javascript/dashboard/i18n/locale/ko/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ko/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "업로드 중...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "값이 필요합니다.",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ko/bulkActions.json b/app/javascript/dashboard/i18n/locale/ko/bulkActions.json
index 2a774aecd95b2..e73a8219b3d40 100644
--- a/app/javascript/dashboard/i18n/locale/ko/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ko/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "할당하다",
     "YES": "예",
+    "SEARCH_INPUT_PLACEHOLDER": "검색",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "없음",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ko/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ko/cannedMgmt.json
index 7f41881d66197..df6a5f99c4518 100644
--- a/app/javascript/dashboard/i18n/locale/ko/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ko/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "미리 준비된 답변",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "이 쿼리와 일치하는 항목이 없음.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "이 계정에는 미리 준비된 답변이 없습니다.",
       "TITLE": "미리 준비된 답변 관리",
diff --git a/app/javascript/dashboard/i18n/locale/ko/contact.json b/app/javascript/dashboard/i18n/locale/ko/contact.json
index a73b63deb7d08..2d66432cff42d 100644
--- a/app/javascript/dashboard/i18n/locale/ko/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ko/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/ko/conversation.json b/app/javascript/dashboard/i18n/locale/ko/conversation.json
index ba8552a94ffe1..1ed9dcb361124 100644
--- a/app/javascript/dashboard/i18n/locale/ko/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ko/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "줄바꿈을 하시려면 Shift + enter 클릭하십시오. '/'로 시작하여 미리 준비된 답변을 사용할 수 있습니다.",
       "PRIVATE_MSG_INPUT": "줄바꿈을 하시려면 Shift + enter 클릭하십시오. 에이전트만 볼 수 있습니다.",
       "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": "답글",
diff --git a/app/javascript/dashboard/i18n/locale/ko/general.json b/app/javascript/dashboard/i18n/locale/ko/general.json
index 25bb4dfb736d2..58927922a087e 100644
--- a/app/javascript/dashboard/i18n/locale/ko/general.json
+++ b/app/javascript/dashboard/i18n/locale/ko/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": "검색",
+      "EMPTY_STATE": "검색 결과가 없습니다"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ko/generalSettings.json b/app/javascript/dashboard/i18n/locale/ko/generalSettings.json
index a2eb25cd70cea..94f08c70107ec 100644
--- a/app/javascript/dashboard/i18n/locale/ko/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ko/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "오프라인"
+      "OFFLINE": "오프라인",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ko/helpCenter.json b/app/javascript/dashboard/i18n/locale/ko/helpCenter.json
index 092aff90de688..df102f6709025 100644
--- a/app/javascript/dashboard/i18n/locale/ko/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ko/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/ko/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ko/inboxMgmt.json
index 99d402fef6b0d..54411e8184b8c 100644
--- a/app/javascript/dashboard/i18n/locale/ko/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ko/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "받은 메시지함",
     "SIDEBAR_TXT": "<p><b>받은 메시지함</b></p> <p> 웹사이트나 페이스북 페이지를 Chatwoot에 연결한 것을 <b>받은 메시지함</b>이라고 합니다. 당신은 당신의 Chatwoot 계정에 무제한의 받은 편지함을 가질 수 있습니다. </p><p> 받은 메시지함 추가를 클릭하여 웹 사이트 또는 Facebook 페이지를 연결하십시오.</p><p> 대시보드에서는 모든 받은 메시지함의 모든 대화를 한 곳에서 볼 수 있으며 대화 탭에서는 이에 응답할 수 있습니다.\n</p><p> 대시보드의 왼쪽 창에서 받은 메시지함 이름을 눌러 관련 대화를 볼 수 있습니다.\n </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "이 계정에는 첨부된 받은 메시지함이 없습니다."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ko/integrations.json b/app/javascript/dashboard/i18n/locale/ko/integrations.json
index 7a41267e680c8..30caaa9c961d5 100644
--- a/app/javascript/dashboard/i18n/locale/ko/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ko/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "통합",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "만들기",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "링크",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "내용",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "팀 선택",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "상태",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "만들기",
+        "CANCEL": "취소",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "상태",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "라벨",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ko/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ko/labelsMgmt.json
index b811033f73b84..012c03c0978ee 100644
--- a/app/javascript/dashboard/i18n/locale/ko/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ko/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "라벨",
     "HEADER_BTN_TXT": "라벨 추가",
     "LOADING": "라벨을 가져오는 중",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "이 쿼리와 일치하는 항목이 없음",
-    "SIDEBAR_TXT": "<p><b>라벨</b> </p><p>라벨은 대화를 분류하고 우선순위를 정하는 데 도움이 된다. 사이드패널에서 대화에 라벨을 할당할 수 있다.</p><p>라벨은 계정에 연결되며 조직에서 사용자 정의 워크플로우를 만드는 데 사용할 수 있다. 라벨에 사용자 정의 색상을 지정할 수 있으며, 라벨을 쉽게 식별할 수 있다. 사이드바에 라벨을 표시하여 대화를 쉽게 필터링할 수 있다.</p>",
     "LIST": {
       "404": "이 계정에는 사용 가능한 라벨이 없다.",
       "TITLE": "라벨 관리",
@@ -49,7 +50,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": "라벨 추가",
diff --git a/app/javascript/dashboard/i18n/locale/ko/macros.json b/app/javascript/dashboard/i18n/locale/ko/macros.json
index 675bc1e1142a2..56a606c09e757 100644
--- a/app/javascript/dashboard/i18n/locale/ko/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ko/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "값이 필요합니다.",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ko/report.json b/app/javascript/dashboard/i18n/locale/ko/report.json
index 5ecbb2537e16a..bee66034b08f5 100644
--- a/app/javascript/dashboard/i18n/locale/ko/report.json
+++ b/app/javascript/dashboard/i18n/locale/ko/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/ko/search.json b/app/javascript/dashboard/i18n/locale/ko/search.json
index 2f872cf59429d..e72abb9ee4ad2 100644
--- a/app/javascript/dashboard/i18n/locale/ko/search.json
+++ b/app/javascript/dashboard/i18n/locale/ko/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "대화",
       "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/i18n/locale/ko/settings.json b/app/javascript/dashboard/i18n/locale/ko/settings.json
index b8628279fa128..fbb0842c0776a 100644
--- a/app/javascript/dashboard/i18n/locale/ko/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ko/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "보고서",
     "SETTINGS": "설정",
     "CONTACTS": "연락처",
+    "CAPTAIN": "Captain",
     "HOME": "홈",
     "AGENTS": "에이전트",
     "AGENT_BOTS": "봇",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "페이스북 연결이 만료되었습니다. 서비스를 계속하려면 페이스북 페이지를 다시 연결하십시오.",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ko/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ko/teamsSettings.json
index ad5991ca932e6..687f25f8586c1 100644
--- a/app/javascript/dashboard/i18n/locale/ko/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ko/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "팀 생성하기",
     "HEADER": "팀",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "계정에 연결된 에이전트가 없습니다.",
-      "EDIT_TEAM": "팀 수정하기"
+      "EDIT_TEAM": "팀 수정하기",
+      "NONE": "없음"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "팀을 삭제할 수 없습니다. 다시 시도해주세요."
       },
       "CONFIRM": {
-        "TITLE": "%{teamName}팀을 삭제하시겠습니까?",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "팀을 삭제하면 팀에 할당된 대화들에 대한 할당이 모두 해제됩니다.",
         "YES": "삭제 ",
diff --git a/app/javascript/dashboard/i18n/locale/ko/whatsappTemplates.json b/app/javascript/dashboard/i18n/locale/ko/whatsappTemplates.json
index bbcf281569bc0..4f6834632ba0e 100644
--- a/app/javascript/dashboard/i18n/locale/ko/whatsappTemplates.json
+++ b/app/javascript/dashboard/i18n/locale/ko/whatsappTemplates.json
@@ -9,7 +9,7 @@
             "SEARCH_PLACEHOLDER": "Search Templates",
             "NO_TEMPLATES_FOUND": "No templates found for",
             "LABELS": {
-                "LANGUAGE": "Language",
+                "LANGUAGE": "언어",
                 "TEMPLATE_BODY": "Template Body",
                 "CATEGORY": "Category"
             }
diff --git a/app/javascript/dashboard/i18n/locale/lt/advancedFilters.json b/app/javascript/dashboard/i18n/locale/lt/advancedFilters.json
index 2693e0b627306..2659bd4348389 100644
--- a/app/javascript/dashboard/i18n/locale/lt/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/lt/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "IR",
       "OR": "AR"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Lygu",
       "not_equal_to": "Nelygu",
diff --git a/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json b/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json
index d4887cb8dd9b2..4f85d80b91e02 100644
--- a/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agentai",
     "HEADER_BTN_TXT": "Pridėti Agentą",
     "LOADING": "Gaunamas agentų sąrašas",
-    "SIDEBAR_TXT": "<p><b>Makrokomandos</b><p>Makrokomandos yra išsaugotų veiksmų rinkinys, padedantis klientų aptarnavimo agentams lengvai atlikti užduotis. Agentai gali apibrėžti veiksmų rinkinį, pvz., pokalbio žymėjimą etikete, el. laiško nuorašo siuntimą, tinkinto atributo atnaujinimą ir pan., ir jie gali atlikti šiuos veiksmus vienu paspaudimu. Kai agentai vykdo makrokomandą, veiksmai bus atliekami nuosekliai tokia tvarka, kokia jie yra apibrėžti. Makrokomandos pagerina produktyvumą ir padidina veiksmų nuoseklumą. </p><p>Makrokomandas gali būti naudingas dviem būdais. </p><p><b>Kaip agento pagalba:</b> jei agentas kelis kartus atlieka veiksmų rinkinį, jis gali išsaugoti jį kaip makrokomandą ir atlikti visus veiksmus kartu vienu spustelėjimu.</b> p><p><b>Kaip galimybė įtraukti komandos narį:</b> kiekvienas agentas kiekvieno pokalbio metu turi atlikti daugybę skirtingų patikrinimų / veiksmų. Priimti naują palaikymo komandos narį bus lengva, jei paskyroje bus iš anksto nustatytų makrokomandų. Užuot išsamiai aprašęs kiekvieną veiksmą, vadovas / komandos vadovas gali nurodyti įvairiuose scenarijuose naudojamas makrokomandas.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administratorius",
       "AGENT": "Agentas"
diff --git a/app/javascript/dashboard/i18n/locale/lt/auditLogs.json b/app/javascript/dashboard/i18n/locale/lt/auditLogs.json
index 27617d0afd5b4..40251fe896f96 100644
--- a/app/javascript/dashboard/i18n/locale/lt/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/lt/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audito Žurnalas",
     "HEADER_BTN_TXT": "Pridėti Audito Žurnalus",
     "LOADING": "Parsiunčiami Audito Žurnalai",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Šią užklausą atitinkančių elementų nėra",
     "SIDEBAR_TXT": "<p><b>Audito žurnalai</b> </p><p> Audito žurnalai yra įvykių ir veiksmų Chatwoot sistemoje pėdsakai. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} pakvietė %{invitee} į paskyrą kaip %{role}",
       "EDIT": {
         "SELF": "%{agentName} pakeitė savo %{attributes} į %{values}",
-        "OTHER": "%{agentName} pakeitė %{attributes} iš %{user} į %{values}"
+        "OTHER": "%{agentName} pakeitė %{attributes} iš %{user} į %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/lt/automation.json b/app/javascript/dashboard/i18n/locale/lt/automation.json
index 9f0f1463e02f7..1e1296619bda5 100644
--- a/app/javascript/dashboard/i18n/locale/lt/automation.json
+++ b/app/javascript/dashboard/i18n/locale/lt/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Norėdami išsaugoti, turite išpildyti bent vieną veiksmą",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Rašykite pranešimą čia",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Pasirinkite komandas"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Pasirinkite komandas",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Aktyvuoti automatizavimo taisyklę",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Įkeliama...",
       "LABEL_UPLOADED": "Sėkmingai Įkeltas",
       "LABEL_UPLOAD_FAILED": "Įkelti nepavyko"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Reikalinga vertė",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lt/bulkActions.json b/app/javascript/dashboard/i18n/locale/lt/bulkActions.json
index b89464acdf189..be22d5f886f54 100644
--- a/app/javascript/dashboard/i18n/locale/lt/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/lt/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Grįžti",
     "ASSIGN_LABEL": "Priskirti",
     "YES": "Taip",
+    "SEARCH_INPUT_PLACEHOLDER": "Ieškoti",
     "ASSIGN_AGENT_TOOLTIP": "Priskirti Agentą",
     "ASSIGN_TEAM_TOOLTIP": "Priskirti komandą",
     "ASSIGN_SUCCESFUL": "Pokalbis priskirtas sėkmingai.",
@@ -33,7 +34,7 @@
       "NONE": "Nėra",
       "NO_TEAMS_AVAILABLE": "Šioje paskyroje nėra pridėtų komandų.",
       "ASSIGN_SELECTED_TEAMS": "Priskirti pažymėtą komandą.",
-      "ASSIGN_SUCCESFUL": "Komandos sėkmingai priskirtos.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Nepavyko priskirti komandą. Prašau, pabandykite dar kartą."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/lt/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/lt/cannedMgmt.json
index 14f84cd5975f7..d156af6d30fb5 100644
--- a/app/javascript/dashboard/i18n/locale/lt/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lt/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Atsakymų Ruošiniai",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Pridėti atsakymo ruošinį",
     "LOADING": "Atsakymų ruošinių gavimas...",
     "SEARCH_404": "Šią užklausą atitinkančių elementų nėra.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Šioje paskyroje nėra galimų atsakymų ruošinių.",
       "TITLE": "Tvarkyti atsakymų ruošinius",
diff --git a/app/javascript/dashboard/i18n/locale/lt/contact.json b/app/javascript/dashboard/i18n/locale/lt/contact.json
index fa49f97492200..f85ab67d77015 100644
--- a/app/javascript/dashboard/i18n/locale/lt/contact.json
+++ b/app/javascript/dashboard/i18n/locale/lt/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontaktas apjungtas sėkmingai",
       "ERROR_MESSAGE": "Nepavyko apjungti kontaktų, bandykite dar kartą!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lt/conversation.json b/app/javascript/dashboard/i18n/locale/lt/conversation.json
index ac106c525606e..c1d42f146b641 100644
--- a/app/javascript/dashboard/i18n/locale/lt/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/lt/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Spauksite Shift + Enter, pradėjimui iš naujos eilutės. Pradėkite nuo „/“, kad pasirinktumėte Atsakymo Ruošinį.",
       "PRIVATE_MSG_INPUT": "Spauksite Shift + Enter, pradėjimui iš naujos eilutės. Tai bus matoma tik Agentams",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Pranešimo parašas nesukonfigūruotas, sukonfigūruokite jį profilio nustatymuose.",
-      "CLICK_HERE": "Spausti čia kad atnaujinti"
+      "CLICK_HERE": "Spausti čia kad atnaujinti",
+      "WHATSAPP_TEMPLATES": "Whatsapp Šablonai"
     },
     "REPLYBOX": {
       "REPLY": "Atsakyti",
diff --git a/app/javascript/dashboard/i18n/locale/lt/general.json b/app/javascript/dashboard/i18n/locale/lt/general.json
index 25bb4dfb736d2..ded0ebaef773f 100644
--- a/app/javascript/dashboard/i18n/locale/lt/general.json
+++ b/app/javascript/dashboard/i18n/locale/lt/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": "Ieškoti",
+      "EMPTY_STATE": "Nieko nerasta"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lt/generalSettings.json b/app/javascript/dashboard/i18n/locale/lt/generalSettings.json
index b3488d4d06c59..04da6b9ecf79c 100644
--- a/app/javascript/dashboard/i18n/locale/lt/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/lt/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Atsijungęs"
+      "OFFLINE": "Atsijungęs",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Atnaujinti"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Iki rytojaus",
       "UNTIL_NEXT_MONTH": "Iki kito mėnesio",
       "AN_HOUR_FROM_NOW": "Iki valandos nuo dabar",
-      "CUSTOM": "Personalizuotas...",
+      "UNTIL_CUSTOM_TIME": "Personalizuotas...",
       "CHANGE_APPEARANCE": "Keisti išvaizdą",
       "LIGHT_MODE": "Šviesus",
       "DARK_MODE": "Tamsus",
diff --git a/app/javascript/dashboard/i18n/locale/lt/helpCenter.json b/app/javascript/dashboard/i18n/locale/lt/helpCenter.json
index c8652cc4a1244..8971fe656a930 100644
--- a/app/javascript/dashboard/i18n/locale/lt/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/lt/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/lt/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/lt/inboxMgmt.json
index cdc9ed65f41f6..bcd8035e8780a 100644
--- a/app/javascript/dashboard/i18n/locale/lt/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lt/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Gautų laiškų aplankai",
     "SIDEBAR_TXT": "<p><b>Gautų laiškų aplankas</b></p> <p> Kai prijungiate svetainė arba Facebook puslapį prie Chatwood, tai vadinama <b>Gautų Laiškų Aplankas</b>. Savo Chatwoot paskyroje galite turėti neribotą gautųjų laiškų aplankų skaičių. </p><p> Spustelėkite <b>Pridėti gautųjų laiškų aplanką</b>, kad susietumėte svetainę arba Facebook puslapį. </p><p> Informacijos suvestinėje galite matyti visus pokalbius iš visų gautųjų laiškų aplankų vienoje vietoje ir atsakyti į juos skirtuke „Pokalbiai“. </p><p> Taip pat galite peržiūrėti pokalbius, susijusius su gautų laiškų aplankais, spustelėję pavadinimą kairėje prietaisų skydelio srityje. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Prie šios paskyros nėra pridėtų gautųjų laiškų aplankų."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft El. paštas",
         "DESCRIPTION": "Spustelėkite mygtuką Prisijungti naudojant Microsoft, kad pradėtumėte. Būsite nukreipti į prisijungimo el. pašto pagalba puslapį. Kai sutiksite su prašomais leidimais, būsite nukreipti atgal į gautų laiškų aplanko kūrimo veiksmą.",
         "EMAIL_PLACEHOLDER": "Įvesti el. pašto adresą",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Norėdami pridėti „Microsoft“ paskyrą kaip kanalą, jūs turite autentifikuoti savo Microsoft paskyrą spustelėdami „Prisijungti naudojant Microsoft“ ",
         "ERROR_MESSAGE": "Prisijungiant prie Microsoft įvyko klaida, bandykite dar kartą"
       }
diff --git a/app/javascript/dashboard/i18n/locale/lt/integrations.json b/app/javascript/dashboard/i18n/locale/lt/integrations.json
index c434674ba626a..92d003f0de305 100644
--- a/app/javascript/dashboard/i18n/locale/lt/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/lt/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integracijos",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Prenumeruoti įvykiai",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Pridėkite naują informacinio skydelio programą",
       "SIDEBAR_TXT": "<p><b>Informacinio skydelio programos</b></p><p>Informacinio skydelio programos leidžia organizacijoms įterpti programą į Chatwood valdymo skydelį, kad klientų aptarnavimo agentams būtų suteiktas kontekstas. Ši funkcija leidžia savarankiškai kurti programą ir įterpti informaciją apie vartotoją, jo užsakymus ar mokėjimų istoriją.</p><p>Kai įterpiate programą naudodami Chatwood valdymo skydelį, programa gaus pokalbio kontekstą ir įvykio nuorodas. Įdiekite pranešimo įvykio nuorodas savo puslapyje, kad gautumėte kontekstą.</p><p>Jei norite pridėti naują informacinio skydelio programą, spustelėkite mygtuką \"Pridėti naują skydelio programą\".</p>",
       "DESCRIPTION": "Informacinio skydelio programos leidžia organizacijoms įterpti programą į valdymo skydelį, kad klientų aptarnavimo agentams būtų suteiktas kontekstas. Ši funkcija leidžia savarankiškai kurti programą ir įterpti informaciją apie vartotoją, jo užsakymus ar mokėjimų istoriją.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Šioje paskyroje nėra sukonfigūruotų informacinio skydelio programų",
         "LOADING": "Gaunamos informacinio skydelio programos...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Informacinio skydelio programa ištrinta sėkmingai",
         "API_ERROR": "Nepavyko ištrinti programos. Pabandykite dar kartą vėliau"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Sukurti",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Nuoroda",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Pavadinimas",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Yra reikalingas pavadinimas"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Aprašymas",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Komanda",
+            "PLACEHOLDER": "Pasirinkite komandą",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritetas",
+            "PLACEHOLDER": "Pasirinkti prioritetą",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Etiketė",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Būsena",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Sukurti",
+        "CANCEL": "Atšaukti",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Būsena",
+        "PRIORITY": "Prioritetas",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etiketės",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lt/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/lt/labelsMgmt.json
index dfea92819c631..631209b611148 100644
--- a/app/javascript/dashboard/i18n/locale/lt/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lt/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiketės",
     "HEADER_BTN_TXT": "Pridėti Etiketę",
     "LOADING": "Gaunamos etiketės",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Šią užklausą atitinkančių elementų nėra",
-    "SIDEBAR_TXT": "<p><b>Etiketės</b> <p>Etiketės padeda suskirstyti pokalbius į kategorijas ir nustatyti jiems prioritetus. Galite priskirti etiketę pokalbiui iš šoninio skydelio. <br /><br />Etiketės susietos su paskyra ir gali būti naudojamos kuriant supaprastintus darbo procesus jūsų organizacijoje. Etiketei galite priskirti pasirinktą spalvą, kad būtų lengviau atpažinti etiketę. Galėsite rodyti etiketę šoninėje juostoje, kad galėtumėte lengvai filtruoti pokalbius.</p>",
     "LIST": {
       "404": "Šioje paskyroje nėra galimų etikečių.",
       "TITLE": "Tvarkyti etiketes",
@@ -49,7 +50,8 @@
       "DISMISS": "Atsisakyti",
       "ADD_SELECTED_LABELS": "Pridėti pažymėtas etiketes",
       "ADD_SELECTED_LABEL": "Pridėti pažymėtą etiketę",
-      "ADD_ALL_LABELS": "Pridėti visas etiketes"
+      "ADD_ALL_LABELS": "Pridėti visas etiketes",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Pridėti Etiketę",
diff --git a/app/javascript/dashboard/i18n/locale/lt/macros.json b/app/javascript/dashboard/i18n/locale/lt/macros.json
index 9ebe4b50e23cc..63dc0dfb666ac 100644
--- a/app/javascript/dashboard/i18n/locale/lt/macros.json
+++ b/app/javascript/dashboard/i18n/locale/lt/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Vykdyti",
       "PREVIEW": "Peržiūrėti makrokomandą",
       "EXECUTED_SUCCESSFULLY": "Sėkmingai įvykdyta makrokomanda"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Reikalinga vertė",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lt/report.json b/app/javascript/dashboard/i18n/locale/lt/report.json
index a0b28f1a09327..98ba3b7e5ec80 100644
--- a/app/javascript/dashboard/i18n/locale/lt/report.json
+++ b/app/javascript/dashboard/i18n/locale/lt/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Pokalbių srautas",
       "NO_CONVERSATIONS": "Pokalbių nėra",
       "CONVERSATION": "%{count} pokalbis",
-      "CONVERSATIONS": "%{count} pokalbiai"
+      "CONVERSATIONS": "%{count} pokalbiai",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Agentų pokalbiai",
@@ -536,6 +537,7 @@
       "LABELS": "Etiketė",
       "TEAMS": "Komanda"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/lt/search.json b/app/javascript/dashboard/i18n/locale/lt/search.json
index e87fc02b71ef0..5d78b047b688c 100644
--- a/app/javascript/dashboard/i18n/locale/lt/search.json
+++ b/app/javascript/dashboard/i18n/locale/lt/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Pokalbiai",
       "MESSAGES": "Pranešimai"
     },
+    "SEARCHING_DATA": "Ieškoma",
     "EMPTY_STATE": "Nerasta %{item} pagal užklausą '%{query}'",
     "EMPTY_STATE_FULL": "Nerasta rezultatų pagal užklausą '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ sutelkti dėmesį",
diff --git a/app/javascript/dashboard/i18n/locale/lt/settings.json b/app/javascript/dashboard/i18n/locale/lt/settings.json
index e1e9a17e84673..d0c7fa28b1080 100644
--- a/app/javascript/dashboard/i18n/locale/lt/settings.json
+++ b/app/javascript/dashboard/i18n/locale/lt/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Ataskaitos",
     "SETTINGS": "Nustatymai",
     "CONTACTS": "Kontaktai",
+    "CAPTAIN": "Captain",
     "HOME": "Pagrindinis",
     "AGENTS": "Agentai",
     "AGENT_BOTS": "Botai",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Apžvalga",
-    "FACEBOOK_REAUTHORIZE": "Jūsų ryšys su Facebook nutrūko. Jei norite toliau nauditis paslaugomis, iš naujo prisijunkite prie Facebook puslapio",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Palaikymo centras",
       "ALL_ARTICLES": "Visi Straipsniai",
diff --git a/app/javascript/dashboard/i18n/locale/lt/teamsSettings.json b/app/javascript/dashboard/i18n/locale/lt/teamsSettings.json
index fb59fe9b55ae5..5af262f12a0c7 100644
--- a/app/javascript/dashboard/i18n/locale/lt/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/lt/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Sukurti naują komandą",
     "HEADER": "Komandos",
-    "SIDEBAR_TXT": "<p><b>Komandos</b></p> <p>Komandos leidžia suskirstyti agentus į grupes pagal jų pareigas. <br /> Agentas gali būti kelių komandų narys. Galite priskirti pokalbius komandai, kai dirbate kartu. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Šioje paskyroje nėra sukurtų komandų.",
-      "EDIT_TEAM": "Redaguoti komandą"
+      "EDIT_TEAM": "Redaguoti komandą",
+      "NONE": "Nėra"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Nepavyko ištrinti komandos. Bandykite dar kartą."
       },
       "CONFIRM": {
-        "TITLE": "Ar tikrai norite ištrinti – %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Įveskite {teamName}, kad patvirtintumėte",
         "MESSAGE": "Ištrynus komandą, komandos priskyrimas bus pašalintas iš šiai komandai priskirtų pokalbių.",
         "YES": "Ištrinti ",
diff --git a/app/javascript/dashboard/i18n/locale/lv/advancedFilters.json b/app/javascript/dashboard/i18n/locale/lv/advancedFilters.json
index bccc12cf2452e..5bf06f4dce2a1 100644
--- a/app/javascript/dashboard/i18n/locale/lv/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/lv/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "UN",
       "OR": "VAI"
     },
+    "INPUT_PLACEHOLDER": "Ievadiet vērtību",
     "OPERATOR_LABELS": {
       "equal_to": "Vienāds ar",
       "not_equal_to": "Nav vienāds ar",
diff --git a/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json b/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json
index f8418bfbf245b..b0062e37339e0 100644
--- a/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Aģenti",
     "HEADER_BTN_TXT": "Pievienot Aģentu",
     "LOADING": "Aģentu Saraksta Iegūšana",
-    "SIDEBAR_TXT": "<p><b>Aģenti</b></p> <p><b>Aģents</b> ir Jūsu Klientu Atbalsta komandas biedrs.</p><p> Aģenti varēs skatīt jūsu lietotāju ziņojumus un atbildēt uz tiem. Sarakstā ir redzami visi aģenti, kas pašlaik ir jūsu kontā. </p><p> Klikšķiniet uz <b>Pievienot Aģentu</b> lai pievienotu jaunu aģentu. Jūsu pievienotais aģents saņems e-pasta ziņojumu ar apstiprinājuma saiti, lai aktivizētu savu kontu, pēc tam viņš varēs piekļūt Chatwoot un atbildēt uz ziņojumiem. </p><p> Piekļuve Chatwoot funkcijām ir balstīta uz šādām lomām. </p><p> <b>Aģents</b> - Šīs lomas aģentiem ir piekļuve tikai pie iesūtnēm, pārskatiem un sarunām. Viņi var piešķirt sarunas citiem aģentiem, vai sev, un atrisināt sarunas.</p><p> <b>Administrators</b> - Administratoram būs piekļuve pie visām jūsu kontam iespējotajām Chatwoot funkcijām, tostarp iestatījumiem, kā arī visām parasto aģentu privilēģijām.</p>",
+    "DESCRIPTION": "Aģents ir jūsu klientu atbalsta komandas loceklis, kurš var skatīt lietotāja ziņojumus un atbildēt uz tiem. Tālāk esošajā sarakstā ir parādīti visi aģenti jūsu kontā.",
+    "LEARN_MORE": "Uzzināt par lietotāju lomām",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrators",
       "AGENT": "Aģents"
diff --git a/app/javascript/dashboard/i18n/locale/lv/auditLogs.json b/app/javascript/dashboard/i18n/locale/lv/auditLogs.json
index b1cb63ef08842..b9004fbf995fa 100644
--- a/app/javascript/dashboard/i18n/locale/lv/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/lv/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audita Žurnāli",
     "HEADER_BTN_TXT": "Pievienot Audita Žurnālus",
     "LOADING": "Audita Žurnālu Iegūšana",
+    "DESCRIPTION": "Audita žurnāli saglabā ierakstus par jūsu konta darbību aktivitātēm, ļaujot jums izsekot un pārbaudīt savu kontu, komandu vai pakalpojumus.",
+    "LEARN_MORE": "Uzzināt vairāk par audita žurnāliem",
     "SEARCH_404": "Šim vaicājumam nav atbilstošu vienumu",
     "SIDEBAR_TXT": "<p><b>Audita Žurnāls</b> </p><p> Audita Žurnāli ir notikumu un darbību pēdas Chatwoot sistēmā. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} uzaicināja %{invitee} kontā kā %{role}",
       "EDIT": {
         "SELF": "%{agentName} mainīja savu %{attributes} uz %{values}",
-        "OTHER": "%{agentName} mainīja %{user} %{attributes} uz %{values}"
+        "OTHER": "%{agentName} mainīja %{user} %{attributes} uz %{values}",
+        "DELETED": "%{agentName} mainīja dzēstā lietotāja %{attributes} uz %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/lv/automation.json b/app/javascript/dashboard/i18n/locale/lv/automation.json
index 6483d8e994885..25da57a8a8d84 100644
--- a/app/javascript/dashboard/i18n/locale/lv/automation.json
+++ b/app/javascript/dashboard/i18n/locale/lv/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Lai saglabātu, ir nepieciešama vismaz viena darbība",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Ievadiet savu ziņojumu šeit",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Izvēlieties komandas"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Izvēlieties komandas",
+      "EMAIL_INPUT_PLACEHOLDER": "Ievadiet e-pastu",
+      "URL_INPUT_PLACEHOLDER": "Ievadiet URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Aktivizēt Automatizācijas Noteikumu",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Notiek augšupielāde...",
       "LABEL_UPLOADED": "Veiksmīgi Augšupielādēts",
       "LABEL_UPLOAD_FAILED": "Augšupielāde neizdevās"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Nepieciešama atribūta atslēga",
+      "FILTER_OPERATOR_REQUIRED": "Nepieciešams filtra operators",
+      "VALUE_REQUIRED": "Nepieciešama vērtība",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Vērtībai ir jābūt no 1 līdz 998",
+      "ACTION_PARAMETERS_REQUIRED": "Nepieciešami darbības parametri",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "Ir nepieciešams vismaz viens nosacījums",
+      "ATLEAST_ONE_ACTION_REQUIRED": "Ir nepieciešama vismaz viena darbība"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lv/bulkActions.json b/app/javascript/dashboard/i18n/locale/lv/bulkActions.json
index 42b88f9c4bd21..2ae41de917b69 100644
--- a/app/javascript/dashboard/i18n/locale/lv/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/lv/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Atgriezties",
     "ASSIGN_LABEL": "Piešķirt",
     "YES": "Jā",
+    "SEARCH_INPUT_PLACEHOLDER": "Meklēt",
     "ASSIGN_AGENT_TOOLTIP": "Piešķirt aģentu",
     "ASSIGN_TEAM_TOOLTIP": "Piešķirt komandu",
     "ASSIGN_SUCCESFUL": "Sarunas ir veiksmīgi piešķirtas.",
diff --git a/app/javascript/dashboard/i18n/locale/lv/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/lv/cannedMgmt.json
index d4cefaca32672..2c2279cdeb090 100644
--- a/app/javascript/dashboard/i18n/locale/lv/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lv/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Sagatavotās Atbildes",
+    "LEARN_MORE": "Uzzināt vairāk par sagatavotajām atbildēm",
+    "DESCRIPTION": "Sagatavotās atbildes ir iepriekš uzrakstītas atbilžu veidnes, kas palīdz ātri atbildēt uz sarunu. Lai sarunas laikā ievietotu gatavu atbildi, aģenti var ierakstīt rakstzīmi “/”, kam seko īskods. ",
     "HEADER_BTN_TXT": "Pievienot sagatavoto atbildi",
     "LOADING": "Notiek sagatavoto atbilžu iegūšana...",
     "SEARCH_404": "Šim vaicājumam nav atbilstošu vienumu.",
-    "SIDEBAR_TXT": "<p><b>Sagatavotās Atbildes</b> </p><p> Sagatavotās Atbildes ir iepriekš uzrakstītas atbilžu veidnes, kas palīdz ātri atbildēt uz sarunu. Lai tērzēšanas laikā ievietotu sagatavotu atbildi, aģenti var ievadīt īsu kodu, pirms kura ir rakstzīme “/”. </p><p> Šajā lapā Jūs varat pārvaldīt savas sagatavotās atbildes vai izveidot jaunas, izmantojot pogu \"Pievienot sagatavoto atbildi\".</p><p>Atveriet <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Sagatavoto Atbilžu rokasgrāmatu</a> jaunā cilnē, lai saņemtu palīdzību.</p><p>Apskatiet arī pilnīgi jauno <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Sagatavoto Atbilžu Bibliotēku</a>.</p>",
     "LIST": {
       "404": "Šajā kontā nav pieejama neviena sagatavota atbilde.",
       "TITLE": "Pārvaldīt sagatavotās atbildes",
diff --git a/app/javascript/dashboard/i18n/locale/lv/contact.json b/app/javascript/dashboard/i18n/locale/lv/contact.json
index f14e919580e6f..b171f0fcfac57 100644
--- a/app/javascript/dashboard/i18n/locale/lv/contact.json
+++ b/app/javascript/dashboard/i18n/locale/lv/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontaktpersona ir veiksmīgi apvienota",
       "ERROR_MESSAGE": "Nevarēja apvienot kontaktpersonas, mēģiniet vēlreiz!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lv/conversation.json b/app/javascript/dashboard/i18n/locale/lv/conversation.json
index 1bf543b8a2084..cd406547b3c69 100644
--- a/app/javascript/dashboard/i18n/locale/lv/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/lv/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + Enter, lai pārietu uz jaunu rindu. Sāciet ar '/' lai izvēlētos sagatavotu atbildi.",
       "PRIVATE_MSG_INPUT": "Shift + Enter, lai pārietu uz jaunu rindu. Ziņojums būs redzams tikai Aģentiem",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Ziņojuma paraksts nav nokonfigurēts. Lūdzu, nokonfigurējiet to profila iestatījumos.",
-      "CLICK_HERE": "Noklikšķiniet šeit, lai atjauninātu"
+      "CLICK_HERE": "Noklikšķiniet šeit, lai atjauninātu",
+      "WHATSAPP_TEMPLATES": "WhatsApp Veidnes"
     },
     "REPLYBOX": {
       "REPLY": "Atbildēt",
diff --git a/app/javascript/dashboard/i18n/locale/lv/general.json b/app/javascript/dashboard/i18n/locale/lv/general.json
index 31176001d02bb..ba2b8cf5a26e6 100644
--- a/app/javascript/dashboard/i18n/locale/lv/general.json
+++ b/app/javascript/dashboard/i18n/locale/lv/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Rāda {firstIndex}-{lastIndex} no {totalCount} vienībām"
+    "SHOWING_RESULTS": "Rāda {firstIndex}-{lastIndex} no {totalCount} vienībām",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Meklēt",
+      "EMPTY_STATE": "Nav atrasts"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lv/generalSettings.json b/app/javascript/dashboard/i18n/locale/lv/generalSettings.json
index 860edb902c4cc..19966e45bad7d 100644
--- a/app/javascript/dashboard/i18n/locale/lv/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/lv/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Bezsaistē"
+      "OFFLINE": "Bezsaistē",
+      "RECONNECTING": "Notiek savienojuma atjaunošana...",
+      "RECONNECT_SUCCESS": "Atkārtoti izveidots savienojums"
     },
     "BUTTON": {
       "REFRESH": "Atjaunot"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Līdz rītdienai",
       "UNTIL_NEXT_MONTH": "Līdz nākamajam mēnesim",
       "AN_HOUR_FROM_NOW": "Līdz stundai, no šī brīža",
-      "CUSTOM": "Pielāgot...",
+      "UNTIL_CUSTOM_TIME": "Pielāgot...",
       "CHANGE_APPEARANCE": "Mainīt Izskatu",
       "LIGHT_MODE": "Gaišs",
       "DARK_MODE": "Tumšs",
diff --git a/app/javascript/dashboard/i18n/locale/lv/helpCenter.json b/app/javascript/dashboard/i18n/locale/lv/helpCenter.json
index 0813544157703..f4489f13519e1 100644
--- a/app/javascript/dashboard/i18n/locale/lv/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/lv/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Izmantot portālu kā headless satura pārvaldības sistēmu ar trešās puses front-end framework, izmantojot mūsu API."
         }
       }
-    }
+    },
+    "LOADING": "Notiek ielāde..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lv/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/lv/inboxMgmt.json
index e39f07ee581a9..a6064b24c3f1f 100644
--- a/app/javascript/dashboard/i18n/locale/lv/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lv/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Iesūtnes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> Chatwoot risinājumam pievienoto tīmekļa vietni vai Facebook lapu sauc par <b>Iesūtni</b>. Jūsu Chatwoot kontā var atrasties neierobežots iesūtņu skaits. </p><p> Noklikšķiniet uz <b>Pievienot Iesūtni</b> lai pievienotu tīmekļa vietni vai Facebook lapu. </p><p> Informācijas panelī Jūs varat apskatīt visas sarunas, no visām savām iesūtnēm, un atbildēt uz tām cilnē `Sarunas`. </p><p> Jūs varat arī apskatīt sarunas, kas piesaistītas noteiktai iesūtnei, noklikšķinot uz iesūtnes nosaukuma informācijas paneļa kreisajā rūtī. </p>",
+    "RECONNECTION_REQUIRED": "Jūsu iesūtne ir atvienota. Jūs nesaņemsiet jaunus ziņojumus, kamēr nebūsiet tos atkārtoti autorizējis.",
+    "CLICK_TO_RECONNECT": "Noklikšķiniet šeit, lai atkārtoti izveidotu savienojumu.",
     "LIST": {
       "404": "Šim kontam nav pievienota neviena Iesūtne."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Lai sāktu, noklikšķiniet uz pogas Pierakstīties ar Microsoft. Jūs tiksit novirzīts uz e-pasta pierakstīšanās lapu. Kad būsiet pieņēmis pieprasītās atļaujas, Jūs tiksit novirzīts atpakaļ uz iesūtnes izveides darbību.",
         "EMAIL_PLACEHOLDER": "Ievadiet e-pasta adresi",
+        "SIGN_IN": "Pierakstīties ar Microsoft",
         "HELP": "Lai pievienotu savu Microsoft kontu kā kanālu, Jums ir jāautentificē savs Microsoft konts, noklikšķinot uz \"Pierakstīties ar Microsoft\" ",
         "ERROR_MESSAGE": "Veidojot savienojumu ar Microsoft, radās kļūda. Lūdzu, mēģiniet vēlreiz"
       }
diff --git a/app/javascript/dashboard/i18n/locale/lv/integrations.json b/app/javascript/dashboard/i18n/locale/lv/integrations.json
index 8fae36d23df07..af585b10ffa80 100644
--- a/app/javascript/dashboard/i18n/locale/lv/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/lv/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrācijas",
+    "DESCRIPTION": "Chatwoot integrējas ar vairākiem rīkiem un pakalpojumiem, lai uzlabotu jūsu komandas efektivitāti. Izpētiet tālāk esošo sarakstu, lai konfigurētu savas iecienītākās lietotnes.",
+    "LEARN_MORE": "Uzzināt vairāk par integrācijām",
+    "LOADING": "Integrāciju iegūšana",
+    "CAPTAIN": {
+      "DISABLED": "Captain jūsu kontā nav iespējots.",
+      "CLICK_HERE_TO_CONFIGURE": "Noklikšķiniet šeit, lai konfigurētu",
+      "LOADING_CONSOLE": "Notiek Captain konsoles ielāde...",
+      "FAILED_TO_LOAD_CONSOLE": "Neizdevās ielādēt Captain konsoli. Lūdzu, mēģiniet vēlreiz."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Abonētie Notikumi",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Pievienot jaunu informācijas paneļa lietotni",
       "SIDEBAR_TXT": "<p><b>Informācijas Paneļa Lietotnes</b></p><p>Informācijas paneļa lietotnes ļauj organizācijām iegult lietojumprogrammu Chatwoot informācijas panelī, lai nodrošinātu kontekstu klientu atbalsta aģentiem. Šī funkcija ļauj Jums izveidot lietojumprogrammu neatkarīgi un iegult to informācijas panelī, lai sniegtu informāciju par lietotāju, viņu pasūtījumiem vai viņu iepriekšējo maksājumu vēsturi.</p><p>Kad iegulsiet lietojumprogrammu, izmantojot Chatwoot informācijas paneli, Jūsu lietojumprogramma iegūs sarunas un kontaktpersonas kontekstu kā loga notikumu. Ieviesiet savā lapā ziņojuma notikuma uztvērēju, lai saņemtu kontekstu.</p><p>Lai pievienotu jaunu informācijas paneļa lietotni, noklikšķiniet uz pogas 'Pievienot jaunu informācijas paneļa lietotni'.</p>",
       "DESCRIPTION": "Informācijas paneļa lietotnes ļauj organizācijām iegult lietojumprogrammu informācijas panelī, lai nodrošinātu kontekstu klientu atbalsta aģentiem. Šī funkcija ļauj Jums neatkarīgi izveidot lietojumprogrammu un iegult to, lai sniegtu informāciju par lietotāju, viņu pasūtījumiem vai iepriekšējo maksājumu vēsturi.",
+      "LEARN_MORE": "Uzzināt vairāk par Informācijas paneļa Lietotnēm",
       "LIST": {
         "404": "Šajā kontā vēl nav nokonfigurēta neviena informācijas paneļa lietotne",
         "LOADING": "Notiek informācijas paneļa lietotņu iegūšana...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Informācijas paneļa lietotne ir veiksmīgi izdzēsta",
         "API_ERROR": "Mēs nevarējām izdzēst lietotni. Lūdzu, vēlāk pamēģiniet vēlreiz"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Izveidot/Saistīt lineāru problēmu",
+      "LOADING": "Notiek lineāru problēmu iegūšana...",
+      "LOADING_ERROR": "Lineāru problēmu iegūšanas laikā radās kļūda. Lūdzu, mēģiniet vēlreiz",
+      "CREATE": "Izveidot",
+      "LINK": {
+        "SEARCH": "Meklēt problēmas",
+        "SELECT": "Izvēlieties problēmu",
+        "TITLE": "Saite",
+        "EMPTY_LIST": "Netika atrasta neviena lineāra problēma",
+        "LOADING": "Notiek ielāde",
+        "ERROR": "Lineāru problēmu iegūšanas laikā radās kļūda. Lūdzu, mēģiniet vēlreiz",
+        "LINK_SUCCESS": "Problēma ir veiksmīgi sasaistīta",
+        "LINK_ERROR": "Sasaistot problēmu radās kļūda. Lūdzu, mēģiniet vēlreiz",
+        "LINK_TITLE": "Saruna (#%{conversationId}) ar %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Izveidot/saistīt lineāru problēmu",
+        "DESCRIPTION": "Izveidot lineārus jautājumus no sarunām, vai saistīt esošos netraucētai izsekošanai.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Nosaukums",
+            "PLACEHOLDER": "Ievadiet virsrakstu",
+            "REQUIRED_ERROR": "Nepieciešams nosaukums"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Apraksts",
+            "PLACEHOLDER": "Ievadiet aprakstu"
+          },
+          "TEAM": {
+            "LABEL": "Komanda",
+            "PLACEHOLDER": "Izvēlieties komandu",
+            "SEARCH": "Meklēt komandu",
+            "REQUIRED_ERROR": "Nepieciešama komanda"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Uzdevuma saņēmējs",
+            "PLACEHOLDER": "Izvēlēties pilnvaroto",
+            "SEARCH": "Meklēt pilnvaroto"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritāte",
+            "PLACEHOLDER": "Izvēlieties prioritāti",
+            "SEARCH": "Meklēt prioritāti"
+          },
+          "LABEL": {
+            "LABEL": "Etiķete",
+            "PLACEHOLDER": "Izvēlēties etiķeti",
+            "SEARCH": "Meklēt etiķeti"
+          },
+          "STATUS": {
+            "LABEL": "Statuss",
+            "PLACEHOLDER": "Izvēlēties statusu",
+            "SEARCH": "Meklēt statusu"
+          },
+          "PROJECT": {
+            "LABEL": "Projekts",
+            "PLACEHOLDER": "Izvēlēties projektu",
+            "SEARCH": "Meklēt projektu"
+          }
+        },
+        "CREATE": "Izveidot",
+        "CANCEL": "Atcelt",
+        "CREATE_SUCCESS": "Problēma ir veiksmīgi izveidota",
+        "CREATE_ERROR": "Veidojot problēmu radās kļūda. Lūdzu, mēģiniet vēlreiz",
+        "LOADING_TEAM_ERROR": "Ienesot komandas radās kļūda. Lūdzu, mēģiniet vēlreiz",
+        "LOADING_TEAM_ENTITIES_ERROR": "Ienesot komandas entītijas radās kļūda. Lūdzu, mēģiniet vēlreiz"
+      },
+      "ISSUE": {
+        "STATUS": "Statuss",
+        "PRIORITY": "Prioritāte",
+        "ASSIGNEE": "Uzdevuma saņēmējs",
+        "LABELS": "Etiķetes",
+        "CREATED_AT": "Izveidots %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Atsaistīt",
+        "SUCCESS": "Problēma ir veiksmīgi atsaistīta",
+        "ERROR": "Atsaistot jautājumu radās kļūda. Lūdzu, mēģiniet vēlreiz"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lv/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/lv/labelsMgmt.json
index d83a1c3f3452c..9a6d1319fed06 100644
--- a/app/javascript/dashboard/i18n/locale/lv/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lv/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiķetes",
     "HEADER_BTN_TXT": "Pievienot etiķeti",
     "LOADING": "Notiek etiķešu iegūšana",
+    "DESCRIPTION": "Etiķetes palīdz kategorizēt sarunas, interesentus un noteikt to prioritātes. Etiķeti, sarunai vai kontaktpersonai, varat piešķirt Izmantojot sānu paneli.",
+    "LEARN_MORE": "Uzzināt vairāk par etiķetēm",
     "SEARCH_404": "Šim vaicājumam nav atbilstošu vienumu",
-    "SIDEBAR_TXT": "<p><b>Etiķetes</b> <p>Etiķetes palīdz Jums klasificēt sarunas un noteikt tām prioritātes. Jūs varat piešķirt etiķeti sarunai izmantojot sānjoslu. <br /><br />Etiķetes ir piesaistītas kontam, un tās var izmantot lai izveidotu pielāgotas darbplūsmas jūsu organizācijā. Jūs varat piešķirt pielāgotu krāsu etiķetei, lai etiķeti vieglāk varētu atpazīt. Jūs varēsiet attēlot etiķeti sānjoslā, lai viegli varētu filtrēt sarunas.</p>",
     "LIST": {
       "404": "Šajā kontā nav izveidotas etiķetes.",
       "TITLE": "Pārvaldīt Etiķetes",
@@ -49,7 +50,8 @@
       "DISMISS": "Atcelt",
       "ADD_SELECTED_LABELS": "Pievienot izvēlētās etiķetes",
       "ADD_SELECTED_LABEL": "Pievienot izvēlēto etiķeti",
-      "ADD_ALL_LABELS": "Pievienot visas etiķetes"
+      "ADD_ALL_LABELS": "Pievienot visas etiķetes",
+      "SUGGESTED_LABELS": "Ieteiktās etiķetes"
     },
     "ADD": {
       "TITLE": "Pievienot etiķeti",
diff --git a/app/javascript/dashboard/i18n/locale/lv/macros.json b/app/javascript/dashboard/i18n/locale/lv/macros.json
index 9f3f1f9c57a8c..b9c6870ae5a57 100644
--- a/app/javascript/dashboard/i18n/locale/lv/macros.json
+++ b/app/javascript/dashboard/i18n/locale/lv/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Izpildīt",
       "PREVIEW": "Priekšskatīt Makro",
       "EXECUTED_SUCCESSFULLY": "Makro ir veiksmīgi izpildīts"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Nepieciešama atribūta atslēga",
+      "FILTER_OPERATOR_REQUIRED": "Nepieciešams filtra operators",
+      "VALUE_REQUIRED": "Nepieciešama vērtība",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Vērtībai ir jābūt no 1 līdz 998",
+      "ACTION_PARAMETERS_REQUIRED": "Nepieciešami darbības parametri",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "Ir nepieciešams vismaz viens nosacījums",
+      "ATLEAST_ONE_ACTION_REQUIRED": "Ir nepieciešama vismaz viena darbība"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/lv/report.json b/app/javascript/dashboard/i18n/locale/lv/report.json
index 5677165c77c7f..7d0a00c587dfd 100644
--- a/app/javascript/dashboard/i18n/locale/lv/report.json
+++ b/app/javascript/dashboard/i18n/locale/lv/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Sarunu Satiksme",
       "NO_CONVERSATIONS": "Nav sarunu",
       "CONVERSATION": "%{count} saruna",
-      "CONVERSATIONS": "%{count} sarunas"
+      "CONVERSATIONS": "%{count} sarunas",
+      "DOWNLOAD_REPORT": "Lejupielādēt atskaiti"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Aģentu sarunas",
@@ -536,6 +537,7 @@
       "LABELS": "Etiķete",
       "TEAMS": "Komanda"
     },
+    "WITH": "ar",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Rezultātu Līmenis",
diff --git a/app/javascript/dashboard/i18n/locale/lv/search.json b/app/javascript/dashboard/i18n/locale/lv/search.json
index 42c0b06081e12..a8bdb8fe03d2d 100644
--- a/app/javascript/dashboard/i18n/locale/lv/search.json
+++ b/app/javascript/dashboard/i18n/locale/lv/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Sarunas",
       "MESSAGES": "Ziņojumi"
     },
+    "SEARCHING_DATA": "Meklēšana",
     "EMPTY_STATE": "Vaicājumam '%{query}' nav atrasts neviens %{item} vienums",
     "EMPTY_STATE_FULL": "Vaicājumam '%{query}' nav atrasts neviens rezultāts",
     "PLACEHOLDER_KEYBINDING": "/ fokusēt",
diff --git a/app/javascript/dashboard/i18n/locale/lv/settings.json b/app/javascript/dashboard/i18n/locale/lv/settings.json
index f3a0b36da6e49..0c43906b3226d 100644
--- a/app/javascript/dashboard/i18n/locale/lv/settings.json
+++ b/app/javascript/dashboard/i18n/locale/lv/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Pārskati",
     "SETTINGS": "Iestatījumi",
     "CONTACTS": "Kontaktpersonas",
+    "CAPTAIN": "Captain",
     "HOME": "Sākums",
     "AGENTS": "Aģenti",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Pārskats",
-    "FACEBOOK_REAUTHORIZE": "Jūsu Facebook savienojuma derīguma termiņš ir beidzies. Lūdzu, atkārtoti pievienojiet savu Facebook lapu, lai turpinātu pakalpojumus",
+    "REAUTHORIZE": "Jūsu iesūtnes savienojuma termiņš ir beidzies. Lūdzu, pievienojiet vēlreiz\n lai turpinātu saņemt un sūtīt ziņas",
     "HELP_CENTER": {
       "TITLE": "Palīdzības centrs",
       "ALL_ARTICLES": "Visi Raksti",
diff --git a/app/javascript/dashboard/i18n/locale/lv/teamsSettings.json b/app/javascript/dashboard/i18n/locale/lv/teamsSettings.json
index 7e178ed59f895..6a6b0742cf8b1 100644
--- a/app/javascript/dashboard/i18n/locale/lv/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/lv/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Izveidot jaunu komandu",
     "HEADER": "Komandas",
-    "SIDEBAR_TXT": "<p><b>Komandas</b></p> <p>Komandas ļauj kārtot aģentus grupās, pamatojoties uz viņu pienākumiem. <br /> Aģents var atrasties vairākās komandās. Jūs varat piešķirt sarunas komandai, kad sadarbojaties. </p>",
+    "LOADING": "Notiek komandu iegūšana",
+    "DESCRIPTION": "Komandas ļauj organizēt aģentus grupās, pamatojoties uz viņu pienākumiem. Aģents var piederēt vairākām komandām. Kad strādājat sadarbojoties, varat piešķirt sarunas noteiktām komandām.",
+    "LEARN_MORE": "Uzzināt vairāk par komandām",
     "LIST": {
       "404": "Šajā kontā nav izveidota neviena komanda.",
-      "EDIT_TEAM": "Rediģēt komandu"
+      "EDIT_TEAM": "Rediģēt komandu",
+      "NONE": "Nav"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Nevarēja izdzēst komandu. Lūdzu, mēģiniet vēlreiz."
       },
       "CONFIRM": {
-        "TITLE": "Vai esat pārliecināts, ka vēlaties izdzēst - %{teamName}",
+        "TITLE": "Vai tiešām vēlaties dzēst komandu?",
         "PLACE_HOLDER": "Lūdzu, uzrakstiet {teamName} lai apstiprinātu",
         "MESSAGE": "Komandas dzēšana noņems komandas uzdevumu no sarunām, kas piešķirtas šai komandai.",
         "YES": "Dzēst ",
diff --git a/app/javascript/dashboard/i18n/locale/ml/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ml/advancedFilters.json
index 8fb896cb2a19f..206e691c72655 100644
--- a/app/javascript/dashboard/i18n/locale/ml/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ml/advancedFilters.json
@@ -2,9 +2,9 @@
   "FILTER": {
     "TITLE": "സംഭാഷണങ്ങൾ തരം തിരിക്കുക",
     "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
-    "EDIT_CUSTOM_FILTER": "Edit Folder",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
-    "ADD_NEW_FILTER": "Add filter",
+    "EDIT_CUSTOM_FILTER": "ഫോൾഡർ എഡിറ്റ് ചെയ്യുക",
+    "CUSTOM_VIEWS_SUBTITLE": "ഫിൽട്ടറുകൾ ചേർക്കുക അല്ലെങ്കിൽ നീക്കം ചെയ്യുന്നതിലൂടെ നിങ്ങളുടെ ഫോൾഡർ അപ്ഡേറ്റ് ചെയ്യുക.",
+    "ADD_NEW_FILTER": "ഫിൽട്ടർ ചേർക്കുക",
     "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
     "SUBMIT_BUTTON_LABEL": "ഫിൽട്ടറുകൾ പ്രയോഗിക്കുക",
     "UPDATE_BUTTON_LABEL": "Update folder",
@@ -18,6 +18,7 @@
       "AND": "ഒപ്പം",
       "OR": "അഥവാ"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "തുല്യമാണ്",
       "not_equal_to": "തുല്യമല്ല",
diff --git a/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json
index 32825a222f555..c6f636c9f2b1d 100644
--- a/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "ഏജന്റുമാർ",
     "HEADER_BTN_TXT": "ഏജന്റിനെ ചേർക്കുക",
     "LOADING": "ഏജന്റ് പട്ടിക ലഭ്യമാക്കുന്നു",
-    "SIDEBAR_TXT": "<p> <b> ഏജന്റുമാർ </ b> </p> <p> നിങ്ങളുടെ ഉപഭോക്തൃ പിന്തുണാ ടീമിലെ ഒരു അംഗമാണ് <b> ഏജൻറ് </b>. </p> <p> നിങ്ങളുടെ ഉപയോക്താക്കളിൽ നിന്നുള്ള സന്ദേശങ്ങൾ കാണാനും മറുപടി നൽകാനും ഏജന്റുമാർക്ക് കഴിയും. നിലവിൽ നിങ്ങളുടെ accountലുള്ള എല്ലാ ഏജന്റുമാരെയും പട്ടിക കാണിക്കുന്നു. </p> <p> ഒരു പുതിയ ഏജന്റിനെ ചേർക്കാൻ <b> ഏജന്റിനെ ചേർക്കുക </ b> ക്ലിക്കുചെയ്യുക. നിങ്ങൾ ചേർത്ത ഏജന്റിന് അവരുടെ account സജീവമാക്കുന്നതിന് ഒരു സ്ഥിരീകരണ ലിങ്ക് ഉള്ള ഒരു ഇമെയിൽ ലഭിക്കും, അതിനുശേഷം അവർക്ക് Chatwoot ആക്സസ് ചെയ്യാനും സന്ദേശങ്ങളോട് പ്രതികരിക്കാനും കഴിയും. </p> <p> ചാറ്റ്വൂട്ടിന്റെ സവിശേഷതകളിലേക്കുള്ള ആക്സസ് ഇനിപ്പറയുന്ന റോളുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. </p> <p> <b> ഏജൻറ് </b> - ഈ റോൾ ഉള്ള ഏജന്റുമാർക്ക് ഇൻ‌ബോക്സുകൾ‌, റിപ്പോർ‌ട്ടുകൾ‌, സംഭാഷണങ്ങൾ‌ എന്നിവ മാത്രമേ ആക്‌സസ് ചെയ്യാൻ‌ കഴിയൂ. അവർക്ക് മറ്റ് ഏജന്റുമാരുമായോ തങ്ങളുമായോ സംഭാഷണങ്ങൾ നിയോഗിക്കാനും സംഭാഷണങ്ങൾ പരിഹരിക്കാനും കഴിയും. സാധാരണ ഏജന്റുമാരുടെ പ്രത്യേകാവകാശങ്ങൾ. </p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "അഡ്മിനിസ്‌ട്രേറ്റർ",
       "AGENT": "ഏജന്റ്"
diff --git a/app/javascript/dashboard/i18n/locale/ml/auditLogs.json b/app/javascript/dashboard/i18n/locale/ml/auditLogs.json
index d855ca9460ac0..c465b2a2d3556 100644
--- a/app/javascript/dashboard/i18n/locale/ml/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ml/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "ഈ ചോദ്യവുമായി പൊരുത്തപ്പെടുന്ന ഇനങ്ങളൊന്നുമില്ല",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ml/automation.json b/app/javascript/dashboard/i18n/locale/ml/automation.json
index 832c26aa2f051..c76ab0f098ab5 100644
--- a/app/javascript/dashboard/i18n/locale/ml/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ml/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "അപ്‌ലോഡുചെയ്യുന്നു...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ml/bulkActions.json b/app/javascript/dashboard/i18n/locale/ml/bulkActions.json
index 47c320750f86d..f2c899b50f01c 100644
--- a/app/javascript/dashboard/i18n/locale/ml/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ml/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "നിയോഗിക്കുക",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "തിരയുക",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "ഒന്നുമില്ല",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ml/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ml/cannedMgmt.json
index f6e09a6d9123d..59b3f177a9a53 100644
--- a/app/javascript/dashboard/i18n/locale/ml/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ml/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "ക്യാൻഡ് പ്രതികരണങ്ങൾ",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "ഈ ചോദ്യവുമായി പൊരുത്തപ്പെടുന്ന ഇനങ്ങളൊന്നുമില്ല.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "ഈ അക്കൗണ്ടിൽ ക്യാൻഡ് പ്രതികരണങ്ങളൊന്നും ലഭ്യമല്ല.",
       "TITLE": "ക്യാൻഡ് പ്രതികരണങ്ങൾ നിയന്ത്രിക്കുക",
diff --git a/app/javascript/dashboard/i18n/locale/ml/contact.json b/app/javascript/dashboard/i18n/locale/ml/contact.json
index ccf5b3f0302d7..12d3153b48eab 100644
--- a/app/javascript/dashboard/i18n/locale/ml/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ml/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/ml/conversation.json b/app/javascript/dashboard/i18n/locale/ml/conversation.json
index 51b38cebe77d1..e63a93e4b3e07 100644
--- a/app/javascript/dashboard/i18n/locale/ml/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ml/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "പുതിയ ലൈനിനു വേണ്ടി ഷിഫ്റ്റ് + എന്റർ അടിക്കുക. ഒരു ക്യാൻഡ് പ്രതികരണം തിരഞ്ഞു എടുക്കാൻ വേണ്ടി '/ ' വച്ച് ടൈപ്പ് ചെയ്തു തുടങ്ങുക.",
       "PRIVATE_MSG_INPUT": "പുതിയ ലൈനിനു വേണ്ടി ഷിഫ്റ്റ് + എന്റർ അടിക്കുക. ഇത് ഏജന്റുമാർക്ക് മാത്രമേ ദൃശ്യമാകൂ",
       "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": "മറുപടി",
diff --git a/app/javascript/dashboard/i18n/locale/ml/general.json b/app/javascript/dashboard/i18n/locale/ml/general.json
index 25bb4dfb736d2..158181ca4d5f5 100644
--- a/app/javascript/dashboard/i18n/locale/ml/general.json
+++ b/app/javascript/dashboard/i18n/locale/ml/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": "തിരയുക",
+      "EMPTY_STATE": "ഒരു ഫലവും കണ്ടെത്താനായില്ല"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ml/generalSettings.json b/app/javascript/dashboard/i18n/locale/ml/generalSettings.json
index 71cb85b6b43ae..dae2027601bcd 100644
--- a/app/javascript/dashboard/i18n/locale/ml/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ml/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "ഓഫ്‌ലൈൻ"
+      "OFFLINE": "ഓഫ്‌ലൈൻ",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ml/helpCenter.json b/app/javascript/dashboard/i18n/locale/ml/helpCenter.json
index 68e4794c5756b..92ba797c75405 100644
--- a/app/javascript/dashboard/i18n/locale/ml/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ml/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/ml/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ml/inboxMgmt.json
index af719a2cb7a24..cc94c973c50a1 100644
--- a/app/javascript/dashboard/i18n/locale/ml/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ml/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "ഇൻ‌ബോക്സുകൾ",
     "SIDEBAR_TXT": "<p> <b> ഇൻ‌ബോക്സ് </b> </p> <p> നിങ്ങൾ ഒരു വെബ്‌സൈറ്റ് അല്ലെങ്കിൽ ഒരു ഫേസ്ബുക്ക് പേജ് ചാറ്റ്വൂട്ടിലേക്ക് ബന്ധിപ്പിക്കുമ്പോൾ, അതിനെ <b> ഇൻ‌ബോക്സ് </b> എന്ന് വിളിക്കുന്നു. നിങ്ങളുടെ ചാറ്റ്വൂട്ട് അക്ക in ണ്ടിൽ പരിധിയില്ലാത്ത ഇൻ‌ബോക്സുകൾ‌ നേടാൻ‌ കഴിയും. </p> <p> ഒരു വെബ്‌സൈറ്റോ ഫേസ്ബുക്ക് പേജോ ബന്ധിപ്പിക്കുന്നതിന് <b> ഇൻ‌ബോക്സ് ചേർക്കുക </b> ക്ലിക്കുചെയ്യുക. </p> <p> ഡാഷ്‌ബോർഡിൽ, നിങ്ങളുടെ എല്ലാ ഇൻ‌ബോക്‌സുകളിൽ‌ നിന്നുമുള്ള എല്ലാ സംഭാഷണങ്ങളും ഒരൊറ്റ സ്ഥലത്ത് കാണാനും `സംഭാഷണങ്ങൾ‌ 'ടാബിന് കീഴിൽ അവയോട് പ്രതികരിക്കാനും കഴിയും. </p> <p> ഡാഷ്‌ബോർഡിന്റെ ഇടത് പാളിയിലെ ഇൻ‌ബോക്സ് നാമത്തിൽ ക്ലിക്കുചെയ്തുകൊണ്ട് നിങ്ങൾക്ക് ഇൻ‌ബോക്സിന് പ്രത്യേകമായുള്ള സംഭാഷണങ്ങളും കാണാൻ കഴിയും. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "ഈ അക്കൗണ്ടിലേക്കു ഇൻ‌ബോക്സുകളൊന്നും ബന്ധിപ്പിച്ചിട്ടില്ല."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ml/integrations.json b/app/javascript/dashboard/i18n/locale/ml/integrations.json
index 3c2bd3b2721fb..a3e70d3530e0c 100644
--- a/app/javascript/dashboard/i18n/locale/ml/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ml/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "സംയോജനങ്ങൾ",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "സൃഷ്ടിക്കുക",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "തലക്കെട്ട്",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "ശീർഷകം ആവശ്യമാണ്"
+          },
+          "DESCRIPTION": {
+            "LABEL": "വിവരണം",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "ടീം തിരഞ്ഞെടുക്കുക",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "സ്റ്റാറ്റസ്",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "സൃഷ്ടിക്കുക",
+        "CANCEL": "റദ്ദാക്കുക",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "സ്റ്റാറ്റസ്",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "ലേബലുകൾ",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ml/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ml/labelsMgmt.json
index b1a55d09792ac..fcad3ddb94d6f 100644
--- a/app/javascript/dashboard/i18n/locale/ml/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ml/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "ലേബലുകൾ",
     "HEADER_BTN_TXT": "ലേബൽ ചേർക്കുക",
     "LOADING": "ലേബലുകൾ ലഭ്യമാക്കുന്നു",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "ഈ ചോദ്യവുമായി പൊരുത്തപ്പെടുന്ന ഇനങ്ങളൊന്നുമില്ല",
-    "SIDEBAR_TXT": "<p> <b> ലേബലുകൾ‌ </b> <p> സംഭാഷണങ്ങൾ‌ തരംതിരിക്കാനും മുൻ‌ഗണന നൽകാനും ലേബലുകൾ‌ നിങ്ങളെ സഹായിക്കുന്നു. സൈഡ്‌പാനലിൽ നിന്നുള്ള സംഭാഷണത്തിലേക്ക് നിങ്ങൾക്ക് ലേബൽ നൽകാം. <br /> <br /> ലേബലുകൾ‌ അക്ക with ണ്ടുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു കൂടാതെ നിങ്ങളുടെ ഓർ‌ഗനൈസേഷനിൽ‌ ഇച്ഛാനുസൃത വർ‌ക്ക്ഫ്ലോകൾ‌ സൃഷ്‌ടിക്കാനും ഇത് ഉപയോഗിക്കാം. നിങ്ങൾക്ക് ഒരു ലേബലിന് ഇഷ്‌ടാനുസൃത നിറം നൽകാനാകും, ഇത് ലേബൽ തിരിച്ചറിയുന്നത് എളുപ്പമാക്കുന്നു. സംഭാഷണങ്ങൾ‌ എളുപ്പത്തിൽ‌ ഫിൽ‌റ്റർ‌ ചെയ്യുന്നതിന് സൈഡ്‌ബാറിൽ‌ ലേബൽ‌ പ്രദർശിപ്പിക്കാൻ‌ നിങ്ങൾ‌ക്ക് കഴിയും. </p>",
     "LIST": {
       "404": "ഈ അക്കൗണ്ടിൽ ലേബലുകളൊന്നും ലഭ്യമല്ല.",
       "TITLE": "ലേബലുകൾ നിയന്ത്രിക്കുക",
@@ -49,7 +50,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": "ലേബൽ ചേർക്കുക",
diff --git a/app/javascript/dashboard/i18n/locale/ml/macros.json b/app/javascript/dashboard/i18n/locale/ml/macros.json
index d983d85e8634d..7d23575c74743 100644
--- a/app/javascript/dashboard/i18n/locale/ml/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ml/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ml/report.json b/app/javascript/dashboard/i18n/locale/ml/report.json
index 0303cbf46fff4..95fa3eec4808a 100644
--- a/app/javascript/dashboard/i18n/locale/ml/report.json
+++ b/app/javascript/dashboard/i18n/locale/ml/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",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "ഫിൽട്ടർ ചേർക്കുക",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "ഒരു ഫലവും കണ്ടെത്താനായില്ല",
@@ -536,6 +537,7 @@
       "LABELS": "Label",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/ml/search.json b/app/javascript/dashboard/i18n/locale/ml/search.json
index 30472e86823dd..5f8b71a18c90a 100644
--- a/app/javascript/dashboard/i18n/locale/ml/search.json
+++ b/app/javascript/dashboard/i18n/locale/ml/search.json
@@ -11,6 +11,7 @@
       "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/i18n/locale/ml/settings.json b/app/javascript/dashboard/i18n/locale/ml/settings.json
index 834022d9c80cd..ce8a0b28f87ef 100644
--- a/app/javascript/dashboard/i18n/locale/ml/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ml/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "റിപ്പോർട്ടുകൾ",
     "SETTINGS": "ക്രമീകരണങ്ങൾ",
     "CONTACTS": "കോൺ‌ടാക്റ്റുകൾ",
+    "CAPTAIN": "Captain",
     "HOME": "ഹോം",
     "AGENTS": "ഏജന്റുമാർ",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "അവലോകനം",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ml/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ml/teamsSettings.json
index c701528cbd81d..808bff3b6da26 100644
--- a/app/javascript/dashboard/i18n/locale/ml/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ml/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "ഒന്നുമില്ല"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "ഇല്ലാതാക്കുക ",
diff --git a/app/javascript/dashboard/i18n/locale/ms/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ms/advancedFilters.json
index e9a37551525be..6c9a2a3a6879a 100644
--- a/app/javascript/dashboard/i18n/locale/ms/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ms/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "DAN",
       "OR": "ATAU"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Sama dengan",
       "not_equal_to": "Tak sama dengan",
diff --git a/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json
index eb331f5f5ae29..e581abe453778 100644
--- a/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Ejen",
     "HEADER_BTN_TXT": "Tambahkan ejen",
     "LOADING": "Mendapatkan senarai ejen",
-    "SIDEBAR_TXT": "<p><b>Ejen</b></p> <p> Seorang <b>Ejen</b> adalah ahli sistem bantuan anda. </p><p> Ejen boleh membaca dan menjawab mesej dari pengguna pengguna anda </p><p> Klik di <b>Tambah Ejen</b> untuk menambah bilangan ejen. Ejen yang ditambah akan menerima emel dengan pengesahan untuk mengaktifkan akaun mereka, selepas itu, mereka boleh akses Chatwoot dan respon kepada mesej. </p><p> Akses ke ciri-ciri Chatwoot adalah berdasarkan kepada peranan peranan berikut. </p><p> <b>Ejen</b> - Ejen dengan peranan ini boleh akses inbox, repot dan perbualan. Mereka boleh tugaskan perbualan kepada ejen lain atau mereka sendiri dan boleh selesaikan sendiri.</p><p> <b>Pentadbir</b> - Pentadbir boleh akses semua ciri-ciri Chatwoot yang dibenarkan terhadap akaun anda termasuk, settings dan apa apa yang ejen biasa boleh lakukan.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Pentadbir",
       "AGENT": "Ejen"
diff --git a/app/javascript/dashboard/i18n/locale/ms/auditLogs.json b/app/javascript/dashboard/i18n/locale/ms/auditLogs.json
index 80c19feefd60c..7c3029c9d63c1 100644
--- a/app/javascript/dashboard/i18n/locale/ms/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ms/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ms/automation.json b/app/javascript/dashboard/i18n/locale/ms/automation.json
index a006eaed55b87..66757a92f0b71 100644
--- a/app/javascript/dashboard/i18n/locale/ms/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ms/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Nilai diperlukan",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ms/bulkActions.json b/app/javascript/dashboard/i18n/locale/ms/bulkActions.json
index d13e78b4aced3..e1c81f4685c0f 100644
--- a/app/javascript/dashboard/i18n/locale/ms/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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.",
@@ -33,7 +34,7 @@
       "NONE": "Tiada",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ms/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ms/cannedMgmt.json
index 03571837ac151..b285741e5cd03 100644
--- a/app/javascript/dashboard/i18n/locale/ms/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ms/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/ms/contact.json b/app/javascript/dashboard/i18n/locale/ms/contact.json
index 3c22bbeaf3c4c..b995e420aaff7 100644
--- a/app/javascript/dashboard/i18n/locale/ms/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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/ms/conversation.json b/app/javascript/dashboard/i18n/locale/ms/conversation.json
index f0e107a1da1e1..02589d53c1cdb 100644
--- a/app/javascript/dashboard/i18n/locale/ms/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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/ms/general.json b/app/javascript/dashboard/i18n/locale/ms/general.json
index 25bb4dfb736d2..99f9b07d9520e 100644
--- a/app/javascript/dashboard/i18n/locale/ms/general.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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": "Tiada dijumpa"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ms/generalSettings.json b/app/javascript/dashboard/i18n/locale/ms/generalSettings.json
index e617756b9802d..df78dcafea34c 100644
--- a/app/javascript/dashboard/i18n/locale/ms/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ms/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ms/helpCenter.json b/app/javascript/dashboard/i18n/locale/ms/helpCenter.json
index 3b7dc52761e58..2883329fb2536 100644
--- a/app/javascript/dashboard/i18n/locale/ms/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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/ms/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json
index d7005962995ca..cb1a7176b2560 100644
--- a/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ms/integrations.json b/app/javascript/dashboard/i18n/locale/ms/integrations.json
index d2d4fbaf3e35d..6b2ecc61decc7 100644
--- a/app/javascript/dashboard/i18n/locale/ms/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ms/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Pautan",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Pilih pasukan",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Batalkan",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Label",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ms/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ms/labelsMgmt.json
index c96071bc8d7b0..f81156f7f3ab5 100644
--- a/app/javascript/dashboard/i18n/locale/ms/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ms/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/ms/macros.json b/app/javascript/dashboard/i18n/locale/ms/macros.json
index b7db3339f6047..ba5f038ba4bac 100644
--- a/app/javascript/dashboard/i18n/locale/ms/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ms/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Nilai diperlukan",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ms/report.json b/app/javascript/dashboard/i18n/locale/ms/report.json
index 4449381370592..a2060000607a6 100644
--- a/app/javascript/dashboard/i18n/locale/ms/report.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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/ms/search.json b/app/javascript/dashboard/i18n/locale/ms/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/ms/search.json
+++ b/app/javascript/dashboard/i18n/locale/ms/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/i18n/locale/ms/settings.json b/app/javascript/dashboard/i18n/locale/ms/settings.json
index 5f504c37fd97c..7443c46f381f7 100644
--- a/app/javascript/dashboard/i18n/locale/ms/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ms/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Ejen",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ms/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ms/teamsSettings.json
index 7f46b151d8a5b..12185db3d3370 100644
--- a/app/javascript/dashboard/i18n/locale/ms/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ms/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Tiada"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/ne/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ne/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/ne/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/ne/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/ne/auditLogs.json b/app/javascript/dashboard/i18n/locale/ne/auditLogs.json
index bb30079757f72..7f412b4c085ac 100644
--- a/app/javascript/dashboard/i18n/locale/ne/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ne/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ne/automation.json b/app/javascript/dashboard/i18n/locale/ne/automation.json
index 8d211d0c5299f..0f4646eb4cbd4 100644
--- a/app/javascript/dashboard/i18n/locale/ne/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ne/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "अपलोड गर्दै...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ne/bulkActions.json b/app/javascript/dashboard/i18n/locale/ne/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/ne/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ne/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ne/cannedMgmt.json
index b19386c243907..a7a30e7e39fa1 100644
--- a/app/javascript/dashboard/i18n/locale/ne/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ne/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/ne/contact.json b/app/javascript/dashboard/i18n/locale/ne/contact.json
index 783c6edb72a48..ae4d3e41ba782 100644
--- a/app/javascript/dashboard/i18n/locale/ne/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/ne/conversation.json b/app/javascript/dashboard/i18n/locale/ne/conversation.json
index 088e785a42ec7..c0d9fc0fa6c82 100644
--- a/app/javascript/dashboard/i18n/locale/ne/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/ne/general.json b/app/javascript/dashboard/i18n/locale/ne/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/ne/general.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/ne/generalSettings.json b/app/javascript/dashboard/i18n/locale/ne/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/ne/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ne/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ne/helpCenter.json b/app/javascript/dashboard/i18n/locale/ne/helpCenter.json
index a417ea3096d2f..1ff4a63e26341 100644
--- a/app/javascript/dashboard/i18n/locale/ne/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/ne/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ne/inboxMgmt.json
index 8c62e90bbfd87..302a899853de9 100644
--- a/app/javascript/dashboard/i18n/locale/ne/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ne/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ne/integrations.json b/app/javascript/dashboard/i18n/locale/ne/integrations.json
index f3c90e473080a..3ac90ecb3dcc2 100644
--- a/app/javascript/dashboard/i18n/locale/ne/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ne/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ne/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ne/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/ne/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ne/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/ne/macros.json b/app/javascript/dashboard/i18n/locale/ne/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/ne/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ne/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ne/report.json b/app/javascript/dashboard/i18n/locale/ne/report.json
index c27532783f2cb..b27417c82adb7 100644
--- a/app/javascript/dashboard/i18n/locale/ne/report.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/ne/search.json b/app/javascript/dashboard/i18n/locale/ne/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/ne/search.json
+++ b/app/javascript/dashboard/i18n/locale/ne/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/i18n/locale/ne/settings.json b/app/javascript/dashboard/i18n/locale/ne/settings.json
index fa1f07ed7dca2..6224db1972c14 100644
--- a/app/javascript/dashboard/i18n/locale/ne/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ne/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ne/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ne/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/ne/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ne/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/nl/advancedFilters.json b/app/javascript/dashboard/i18n/locale/nl/advancedFilters.json
index b96a82f2f8a8d..12ac07005b166 100644
--- a/app/javascript/dashboard/i18n/locale/nl/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/nl/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "EN",
       "OR": "OF"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Gelijk aan",
       "not_equal_to": "Niet gelijk aan",
diff --git a/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json
index d9eb79d9939bd..7f478ff5028a2 100644
--- a/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Medewerkers",
     "HEADER_BTN_TXT": "Medewerker toevoegen",
     "LOADING": "Ophalen van medewerkerslijst",
-    "SIDEBAR_TXT": "<p><b>Agenten</b></p> <p> Een <b>Agent</b> is lid van uw klantenservice. </p><p> De agenten kunnen berichten van uw gebruikers bekijken en beantwoorden. De lijst toont alle agenten die momenteel in uw account staan. </p><p> Klik op <b>Voeg agent toe</b> om een nieuwe agent toe te voegen. De agent die je toevoegt ontvangt een e-mail met een bevestigingslink om zijn account te activeren, waarna hij Chatwoot kan bezoeken en op berichten kan reageren. </p><p> Toegang tot Chatwoot's functies zijn gebaseerd op de volgende rollen. </p><p> <b>Agent</b> - Agenten met deze rol kunnen alleen inboxen, rapporten en gesprekken gebruiken. Ze kunnen gesprekken toewijzen aan andere agenten of zichzelf en gesprekken oplossen.</p><p> <b>Beheerder</b> - Beheerder heeft toegang tot alle Chatwoot functies ingeschakeld voor uw account, inclusief instellingen, samen met alle normale agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Beheerder",
       "AGENT": "Medewerker"
diff --git a/app/javascript/dashboard/i18n/locale/nl/auditLogs.json b/app/javascript/dashboard/i18n/locale/nl/auditLogs.json
index 097f8da050c8c..1e5d4c0961f36 100644
--- a/app/javascript/dashboard/i18n/locale/nl/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/nl/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Audit-logs toevoegen",
     "LOADING": "Ophalen van Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Er zijn geen items die overeenkomen met deze zoekopdracht",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs zijn sporen voor gebeurtenissen en acties in een Chatwoot Systeem. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} heeft %{invitee} uitgenodigd voor het account als een %{role}",
       "EDIT": {
         "SELF": "%{agentName} heeft zijn %{attributes} gewijzigd naar %{values}",
-        "OTHER": "%{agentName} heeft %{attributes} van %{user} gewijzigd naar %{values}"
+        "OTHER": "%{agentName} heeft %{attributes} van %{user} gewijzigd naar %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/nl/automation.json b/app/javascript/dashboard/i18n/locale/nl/automation.json
index dd1655ffc9aba..32526ab0044d5 100644
--- a/app/javascript/dashboard/i18n/locale/nl/automation.json
+++ b/app/javascript/dashboard/i18n/locale/nl/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "U moet tenminste één actie hebben om op te slaan",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Voer hier uw bericht in",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Teams selecteren"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Teams selecteren",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Automatiseringsregel activeren",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploaden...",
       "LABEL_UPLOADED": "Succesvol geüpload",
       "LABEL_UPLOAD_FAILED": "Upload mislukt"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Waarde is vereist",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/nl/bulkActions.json b/app/javascript/dashboard/i18n/locale/nl/bulkActions.json
index 6ea5298e71188..e56cfc60a74d6 100644
--- a/app/javascript/dashboard/i18n/locale/nl/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/nl/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Ga terug",
     "ASSIGN_LABEL": "Toewijzen",
     "YES": "Ja",
+    "SEARCH_INPUT_PLACEHOLDER": "Zoeken",
     "ASSIGN_AGENT_TOOLTIP": "Agent toewijzen",
     "ASSIGN_TEAM_TOOLTIP": "Team toewijzen",
     "ASSIGN_SUCCESFUL": "Gesprekken succesvol toegewezen.",
@@ -33,7 +34,7 @@
       "NONE": "Geen",
       "NO_TEAMS_AVAILABLE": "Er zijn nog geen teams toegevoegd aan dit account.",
       "ASSIGN_SELECTED_TEAMS": "Geselecteerde team toewijzen.",
-      "ASSIGN_SUCCESFUL": "Teams succesvol toegewezen.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Toewijzen team mislukt, probeer het opnieuw."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/nl/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/nl/cannedMgmt.json
index aead72726c959..42af0eeab8c6e 100644
--- a/app/javascript/dashboard/i18n/locale/nl/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/nl/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Standaard antwoorden",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Standaard antwoord toevoegen",
     "LOADING": "Standaard antwoorden ophalen...",
     "SEARCH_404": "Er zijn geen items die overeenkomen met deze zoekopdracht.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Er zijn geen standaard antwoorden beschikbaar in dit account.",
       "TITLE": "Beheer standaard antwoorden",
diff --git a/app/javascript/dashboard/i18n/locale/nl/contact.json b/app/javascript/dashboard/i18n/locale/nl/contact.json
index 71b84608539a5..1ebcaf7b0e001 100644
--- a/app/javascript/dashboard/i18n/locale/nl/contact.json
+++ b/app/javascript/dashboard/i18n/locale/nl/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contact succesvol samengevoegd",
       "ERROR_MESSAGE": "Contacten zijn niet samengevoegd, probeer het opnieuw!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/nl/conversation.json b/app/javascript/dashboard/i18n/locale/nl/conversation.json
index 5146497c0b92b..577845ac90542 100644
--- a/app/javascript/dashboard/i18n/locale/nl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/nl/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter voor nieuwe regel. Begin met '/' om een standaard antwoord te selecteren.",
       "PRIVATE_MSG_INPUT": "Shift + nieuwe regel invoeren. Dit is alleen zichtbaar voor medewerkers",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Berichtondertekening is niet geconfigureerd, configureer deze in de profielinstellingen.",
-      "CLICK_HERE": "Klik hier om bij te werken"
+      "CLICK_HERE": "Klik hier om bij te werken",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
     },
     "REPLYBOX": {
       "REPLY": "Beantwoorden",
@@ -159,8 +160,8 @@
       "TIP_AUDIORECORDER_PERMISSION": "Sta toegang tot audio toe",
       "TIP_AUDIORECORDER_ERROR": "Geluid kon niet worden geopend",
       "DRAG_DROP": "Sleep hierheen om toe te voegen",
-      "START_AUDIO_RECORDING": "Start audio recording",
-      "STOP_AUDIO_RECORDING": "Stop audio recording",
+      "START_AUDIO_RECORDING": "Start audio-opname",
+      "STOP_AUDIO_RECORDING": "Stop audio-opname",
       "": "",
       "EMAIL_HEAD": {
         "TO": "AAN",
diff --git a/app/javascript/dashboard/i18n/locale/nl/general.json b/app/javascript/dashboard/i18n/locale/nl/general.json
index 25bb4dfb736d2..38184deee2554 100644
--- a/app/javascript/dashboard/i18n/locale/nl/general.json
+++ b/app/javascript/dashboard/i18n/locale/nl/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": "Zoeken",
+      "EMPTY_STATE": "Geen resultaten gevonden"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/nl/generalSettings.json b/app/javascript/dashboard/i18n/locale/nl/generalSettings.json
index 42a1c6746175d..c6a68c9e896d1 100644
--- a/app/javascript/dashboard/i18n/locale/nl/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/nl/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Tot morgen",
       "UNTIL_NEXT_MONTH": "Tot volgende maand",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/nl/helpCenter.json b/app/javascript/dashboard/i18n/locale/nl/helpCenter.json
index 5aa0123fe1a42..4c79589587854 100644
--- a/app/javascript/dashboard/i18n/locale/nl/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/nl/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/nl/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/nl/inboxMgmt.json
index d16eb2267da9a..5c7e8231170a0 100644
--- a/app/javascript/dashboard/i18n/locale/nl/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/nl/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxen",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Er zijn geen inboxen aan dit account gekoppeld."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/nl/integrations.json b/app/javascript/dashboard/i18n/locale/nl/integrations.json
index 042a6bad573f8..723ac785651a1 100644
--- a/app/javascript/dashboard/i18n/locale/nl/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/nl/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integraties",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Voeg een nieuwe dashboard app toe",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Aanmaken",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Titel",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Beschrijving",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Selecteer team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioriteit",
+            "PLACEHOLDER": "Selecteer prioriteit",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Aanmaken",
+        "CANCEL": "Annuleren",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Prioriteit",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labelen",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/nl/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/nl/labelsMgmt.json
index 3377463b2c556..f57792dd62c43 100644
--- a/app/javascript/dashboard/i18n/locale/nl/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/nl/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labelen",
     "HEADER_BTN_TXT": "Label toevoegen",
     "LOADING": "Labels ophalen",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Er zijn geen items die overeenkomen met deze zoekopdracht",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels helpen u om gesprekken te categoriseren en ze prioriteit te geven. Vanaf het zijpaneel kunt u het label toewijzen aan een gesprek. <br /><br />Labels zijn gekoppeld aan het account en kunnen worden gebruikt om aangepaste workflows in uw organisatie te creëren. U kunt aangepaste kleur aan een label toewijzen, het maakt het gemakkelijker om het label te identificeren. Je kunt het label op de zijbalk weergeven om de gesprekken gemakkelijk te filteren.</p>",
     "LIST": {
       "404": "Er zijn geen labels beschikbaar in dit account.",
       "TITLE": "Beheer labels",
@@ -49,7 +50,8 @@
       "DISMISS": "Negeren",
       "ADD_SELECTED_LABELS": "Voeg geselecteerde labels toe",
       "ADD_SELECTED_LABEL": "Geselecteerde label toevoegen",
-      "ADD_ALL_LABELS": "Voeg alle labels toe"
+      "ADD_ALL_LABELS": "Voeg alle labels toe",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Label toevoegen",
diff --git a/app/javascript/dashboard/i18n/locale/nl/macros.json b/app/javascript/dashboard/i18n/locale/nl/macros.json
index c76ba92acd9e8..947196205f9cc 100644
--- a/app/javascript/dashboard/i18n/locale/nl/macros.json
+++ b/app/javascript/dashboard/i18n/locale/nl/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Waarde is vereist",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/nl/report.json b/app/javascript/dashboard/i18n/locale/nl/report.json
index d602e11ae9724..666c663dfde8a 100644
--- a/app/javascript/dashboard/i18n/locale/nl/report.json
+++ b/app/javascript/dashboard/i18n/locale/nl/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/nl/search.json b/app/javascript/dashboard/i18n/locale/nl/search.json
index 4b0717242b095..0a8589048acac 100644
--- a/app/javascript/dashboard/i18n/locale/nl/search.json
+++ b/app/javascript/dashboard/i18n/locale/nl/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Gesprekken",
       "MESSAGES": "Berichten"
     },
+    "SEARCHING_DATA": "Zoeken",
     "EMPTY_STATE": "Geen %{item} gevonden voor query '%{query}'",
     "EMPTY_STATE_FULL": "Geen resultaten gevonden voor query '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ om te focussen",
diff --git a/app/javascript/dashboard/i18n/locale/nl/settings.json b/app/javascript/dashboard/i18n/locale/nl/settings.json
index 511e3f9c721e2..dba65b10ff6a5 100644
--- a/app/javascript/dashboard/i18n/locale/nl/settings.json
+++ b/app/javascript/dashboard/i18n/locale/nl/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Rapporten",
     "SETTINGS": "Instellingen",
     "CONTACTS": "Contacten",
+    "CAPTAIN": "Captain",
     "HOME": "Startpagina",
     "AGENTS": "Medewerkers",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/nl/teamsSettings.json b/app/javascript/dashboard/i18n/locale/nl/teamsSettings.json
index a9453b569da07..c3f7bfeee4380 100644
--- a/app/javascript/dashboard/i18n/locale/nl/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/nl/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Geen"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Verwijderen ",
diff --git a/app/javascript/dashboard/i18n/locale/no/advancedFilters.json b/app/javascript/dashboard/i18n/locale/no/advancedFilters.json
index 1726f0aac4754..284796e5a614b 100644
--- a/app/javascript/dashboard/i18n/locale/no/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/no/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/no/agentMgmt.json b/app/javascript/dashboard/i18n/locale/no/agentMgmt.json
index bd720bed4d6ea..7d1e62461dd4c 100644
--- a/app/javascript/dashboard/i18n/locale/no/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/no/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenter",
     "HEADER_BTN_TXT": "Legg til agent",
     "LOADING": "Henter agentliste",
-    "SIDEBAR_TXT": "<p><b>Agenter</b></p><p>En <b>agent</b> er en medlem i ditt kundeserivce-team. </p><p>Agenter vil ha mulighet til å se på og svare på henvendelser fra dine brukere. Listen viser alle agenter i din konto</p><p> Klikk på <b>Legg til agent</b> for å legge til agent. Agenten du legger til vil motta en e-post med en link for å bekrefte kontoen deres. Etter dette får de tilgang til Chatwoot og kan begynne å svare på henvendelser. </p><p> Tilgang til funksjonene i Chatwoot er basert på følgende roller. </p><p> <b>Agent</b> - Agenter med denne rollen har bare tilgang til innbokser, rapporter og samtaler. De kan tildele samtaler til seg selv og andre agenter, og markere samtaler som løst. </p><p> <b>Administrator</b> - En administrator har tilgang til alle funksjoner og innstillinger i Chatwoot, i tillegg til det en agent vil ha tilgang til.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/no/auditLogs.json b/app/javascript/dashboard/i18n/locale/no/auditLogs.json
index 0b6267f674b47..f5f38d2fce815 100644
--- a/app/javascript/dashboard/i18n/locale/no/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/no/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Det finnes ingen elementer som samsvarer med denne spørringen",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/no/automation.json b/app/javascript/dashboard/i18n/locale/no/automation.json
index 7f7d4be8ce693..98907e4d0d1f2 100644
--- a/app/javascript/dashboard/i18n/locale/no/automation.json
+++ b/app/javascript/dashboard/i18n/locale/no/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Laster opp...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/no/bulkActions.json b/app/javascript/dashboard/i18n/locale/no/bulkActions.json
index 11487cb77a013..0f2bf3c222a2d 100644
--- a/app/javascript/dashboard/i18n/locale/no/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/no/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Tildel",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "Søk",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/no/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/no/cannedMgmt.json
index efc6fdfb64413..bf5c45a14887f 100644
--- a/app/javascript/dashboard/i18n/locale/no/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/no/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Forhåndslagde svar",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Det finnes ingen elementer som samsvarer med denne spørringen.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Det er ingen forhåndslagde svar tilgjengelig i denne kontoen.",
       "TITLE": "Administrer forhåndslagde svar",
diff --git a/app/javascript/dashboard/i18n/locale/no/contact.json b/app/javascript/dashboard/i18n/locale/no/contact.json
index 3923ecc8f27d8..924b218b93be0 100644
--- a/app/javascript/dashboard/i18n/locale/no/contact.json
+++ b/app/javascript/dashboard/i18n/locale/no/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/no/conversation.json b/app/javascript/dashboard/i18n/locale/no/conversation.json
index 0935ee275c084..a523532f97d60 100644
--- a/app/javascript/dashboard/i18n/locale/no/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/no/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter for ny linje. Start med '/' for å velge et forhåndslagd svar.",
       "PRIVATE_MSG_INPUT": "Skift + enter for ny linje. Dette vil kun være synlig for agenter",
       "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": "Svar",
diff --git a/app/javascript/dashboard/i18n/locale/no/general.json b/app/javascript/dashboard/i18n/locale/no/general.json
index 25bb4dfb736d2..b7140855ac366 100644
--- a/app/javascript/dashboard/i18n/locale/no/general.json
+++ b/app/javascript/dashboard/i18n/locale/no/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": "Søk",
+      "EMPTY_STATE": "Ingen resultater funnet"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/no/generalSettings.json b/app/javascript/dashboard/i18n/locale/no/generalSettings.json
index 7d0829020b1f0..f5a2a4fb91e1e 100644
--- a/app/javascript/dashboard/i18n/locale/no/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/no/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Frakoblet"
+      "OFFLINE": "Frakoblet",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/no/helpCenter.json b/app/javascript/dashboard/i18n/locale/no/helpCenter.json
index ae40223f00811..f9a9ed768cc61 100644
--- a/app/javascript/dashboard/i18n/locale/no/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/no/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/no/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/no/inboxMgmt.json
index c3ba99aabe848..11c4a21f5872e 100644
--- a/app/javascript/dashboard/i18n/locale/no/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/no/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Innbokser",
     "SIDEBAR_TXT": "<p><b>Innboks</b></p> <p> Når du kobler til et nettsted eller en facebook-side til Chatwoot blir den kalt en <b>Innboks</b>. Du kan ha ubegrensede innbokser i din Chatwoot-konto. </p><p> Klikk på <b>Legg til innboks</b> for å koble sammen en nettside eller en facebook-side. </p><p> I oversikten kan du se alle samtalene fra innboksene på et sted og svare på de i samtaler-fanen. </p><p> Du kan også se samtaler for hver enkelt innboks ved å klikke på innboksen på venstre siden av oversikten. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Det er ingen innbokser tilknyttet denne kontoen."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/no/integrations.json b/app/javascript/dashboard/i18n/locale/no/integrations.json
index 19944e3c6ca57..26f6c6b480839 100644
--- a/app/javascript/dashboard/i18n/locale/no/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/no/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrasjoner",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Opprett",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Beskrivelse",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Satus",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Opprett",
+        "CANCEL": "Avbryt",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Satus",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etiketter",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/no/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/no/labelsMgmt.json
index 877dfcf8a9578..0ed84a5fd8e49 100644
--- a/app/javascript/dashboard/i18n/locale/no/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/no/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiketter",
     "HEADER_BTN_TXT": "Legg til etikett",
     "LOADING": "Henter etiketter",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Det finnes ingen elementer som samsvarer med denne spørringen",
-    "SIDEBAR_TXT": "<p><b>Etiketter</b> <p>hjelper deg med å kategorisere samtaler og prioritere dem. Du kan tilordne etiketter til en samtale fra sidepanelet. <br /><br />Etiketter er knyttet til kontoen og kan brukes til å opprette egendefinerte arbeidsstrømmer i din organisasjon. Du kan tilordne egendefinert farge til en etikett- det gjør det enklere å identifisere etiketten. Du vil kunne vise etiketten på sidepanelet for å enkelt filtrere samtalene.</p>",
     "LIST": {
       "404": "Det er ingen etiketter tilgjengelig i denne kontoen.",
       "TITLE": "Administrer etiketter",
@@ -49,7 +50,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": "Legg til etikett",
diff --git a/app/javascript/dashboard/i18n/locale/no/macros.json b/app/javascript/dashboard/i18n/locale/no/macros.json
index 3b34c749486ce..b27bead78ddea 100644
--- a/app/javascript/dashboard/i18n/locale/no/macros.json
+++ b/app/javascript/dashboard/i18n/locale/no/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/no/report.json b/app/javascript/dashboard/i18n/locale/no/report.json
index 4c09109f14f4b..38f883b481528 100644
--- a/app/javascript/dashboard/i18n/locale/no/report.json
+++ b/app/javascript/dashboard/i18n/locale/no/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/no/search.json b/app/javascript/dashboard/i18n/locale/no/search.json
index 19e5f7e951446..22ee7e71760ac 100644
--- a/app/javascript/dashboard/i18n/locale/no/search.json
+++ b/app/javascript/dashboard/i18n/locale/no/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Samtaler",
       "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/i18n/locale/no/settings.json b/app/javascript/dashboard/i18n/locale/no/settings.json
index 4a142b2347511..fce6331137715 100644
--- a/app/javascript/dashboard/i18n/locale/no/settings.json
+++ b/app/javascript/dashboard/i18n/locale/no/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Rapporter",
     "SETTINGS": "Innstillinger",
     "CONTACTS": "Kontakter",
+    "CAPTAIN": "Captain",
     "HOME": "Hjem",
     "AGENTS": "Agenter",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Facebook-tilkoblingen din er utløpt, koble til Facebook-siden din for å fortsette tjenester",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/no/teamsSettings.json b/app/javascript/dashboard/i18n/locale/no/teamsSettings.json
index 30cf468caed3e..5f606abd8dbdb 100644
--- a/app/javascript/dashboard/i18n/locale/no/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/no/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Slett ",
diff --git a/app/javascript/dashboard/i18n/locale/pl/advancedFilters.json b/app/javascript/dashboard/i18n/locale/pl/advancedFilters.json
index 5b82fb085c9d3..5a01cb4781e1e 100644
--- a/app/javascript/dashboard/i18n/locale/pl/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/pl/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "i",
       "OR": "lub"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Równe",
       "not_equal_to": "Nierówne",
diff --git a/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json
index c5c7bc0401cc2..afdc7b6468b8f 100644
--- a/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenci",
     "HEADER_BTN_TXT": "Dodaj agenta",
     "LOADING": "Pobieranie listy agentów",
-    "SIDEBAR_TXT": "<p><b>Agenci</b></p> <p> <b>Agent</b> jest członkiem Twojego zespołu wsparcia klienta. </p><p> Agenci będą mogli przeglądać i odpowiadać na wiadomości od Twoich użytkowników. Lista wyświetla wszystkich agentów aktualnie na Twoim koncie. </p><p> Kliknij <b>Dodaj agenta</b>, aby dodać nowego agenta. Dodany przez Ciebie przedstawiciel otrzyma e-mail z linkiem potwierdzającym, aby aktywować swoje konto, po którym będą mogli uzyskać dostęp do Chatwoot i odpowiadać na wiadomości. </p><p> Dostęp do funkcji Chatwoot opiera się na następujących rolach. </p><p> <b>Agent</b> - Agenci z tą rolą mogą mieć dostęp tylko do skrzynki odbiorczej, raportów i konwersacji. Mogą nadawać rozmowy innym agentom lub sami i rozwiązywać rozmowy.</p><p> <b>Administrator</b> - Administrator będzie miał dostęp do wszystkich funkcji Chatwoot włączonych dla Twojego konta, łącznie z ustawieniami, wraz ze wszystkimi uprawnieniami zwykłych agentów.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/pl/auditLogs.json b/app/javascript/dashboard/i18n/locale/pl/auditLogs.json
index e6b6649ae48fd..15f46d60bf34a 100644
--- a/app/javascript/dashboard/i18n/locale/pl/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/pl/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Dzienniki Audytu",
     "HEADER_BTN_TXT": "Dodaj Dzienniki Audytu",
     "LOADING": "Pobieranie Dzienników Audytu",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Brak elementów pasujących do tego zapytania",
     "SIDEBAR_TXT": "<p><b>Dzienniki Audytu</b></p><p>Dzienniki Audytu to ślady działań i zdarzeń w systemie Chatwoot.</p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} zaprosił %{invitee} do konta jako %{role}",
       "EDIT": {
         "SELF": "%{agentName} zmienił swoje %{attributes} na %{values}",
-        "OTHER": "%{agentName} zmienił %{attributes} użytkownika %{user} na %{values}"
+        "OTHER": "%{agentName} zmienił %{attributes} użytkownika %{user} na %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/pl/automation.json b/app/javascript/dashboard/i18n/locale/pl/automation.json
index 26ea565ff0717..88dd9e822f210 100644
--- a/app/javascript/dashboard/i18n/locale/pl/automation.json
+++ b/app/javascript/dashboard/i18n/locale/pl/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Musisz mieć co najmniej jedną akcję, aby zapisać",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Wprowadź swoją wiadomość tutaj",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Wybierz zespoły"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Wybierz zespoły",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Aktywuj regułę automatyzacji",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Przesyłanie...",
       "LABEL_UPLOADED": "Przesłano pomyślnie",
       "LABEL_UPLOAD_FAILED": "Nie udało się przesłać załącznika"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Wartość jest wymagana",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pl/bulkActions.json b/app/javascript/dashboard/i18n/locale/pl/bulkActions.json
index ef1863750cd89..f0f7b2402bc25 100644
--- a/app/javascript/dashboard/i18n/locale/pl/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/pl/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Powróć",
     "ASSIGN_LABEL": "Przypisz",
     "YES": "Tak",
+    "SEARCH_INPUT_PLACEHOLDER": "Szukaj",
     "ASSIGN_AGENT_TOOLTIP": "Przypisz Agenta",
     "ASSIGN_TEAM_TOOLTIP": "Przypisz zespół",
     "ASSIGN_SUCCESFUL": "Rozmowy zostały pomyślnie przypisane.",
@@ -33,7 +34,7 @@
       "NONE": "Brak",
       "NO_TEAMS_AVAILABLE": "Na tym koncie nie dodano jeszcze żadnych zespołów.",
       "ASSIGN_SELECTED_TEAMS": "Przypisz wybrany zespół.",
-      "ASSIGN_SUCCESFUL": "Zespoły zostały pomyślnie przypisane.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/pl/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/pl/cannedMgmt.json
index ef4e2ce5de47e..d9b442bdba25c 100644
--- a/app/javascript/dashboard/i18n/locale/pl/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pl/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Przygotowane odpowiedzi",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Brak wyników pasujących do wyszukiwania.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Brak dostępnych Gotowych odpowiedzi na tym koncie.",
       "TITLE": "Zarządzaj Gotowymi odpowiedziami",
diff --git a/app/javascript/dashboard/i18n/locale/pl/contact.json b/app/javascript/dashboard/i18n/locale/pl/contact.json
index 83b173659c4b1..c74aae3ba903c 100644
--- a/app/javascript/dashboard/i18n/locale/pl/contact.json
+++ b/app/javascript/dashboard/i18n/locale/pl/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakty zostały pomyślnie połączone",
       "ERROR_MESSAGE": "Nie można połączyć kontaktów. Spróbuj ponownie!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pl/conversation.json b/app/javascript/dashboard/i18n/locale/pl/conversation.json
index 30ac433ac0319..c3a2fc7b612bd 100644
--- a/app/javascript/dashboard/i18n/locale/pl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pl/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter dla nowej linii. Zacznij od '/' aby wybrać Gotową odpowiedź.",
       "PRIVATE_MSG_INPUT": "Shift + enter dla nowej linii. Będzie widoczne tylko dla agentów",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Podpis wiadomości nie jest skonfigurowany, należy go skonfigurować w ustawieniach profilu.",
-      "CLICK_HERE": "Kliknij tutaj, aby zaktualizować"
+      "CLICK_HERE": "Kliknij tutaj, aby zaktualizować",
+      "WHATSAPP_TEMPLATES": "Szablony WhatsApp"
     },
     "REPLYBOX": {
       "REPLY": "Odpowiedz",
diff --git a/app/javascript/dashboard/i18n/locale/pl/general.json b/app/javascript/dashboard/i18n/locale/pl/general.json
index 25bb4dfb736d2..3d1b76f47d48e 100644
--- a/app/javascript/dashboard/i18n/locale/pl/general.json
+++ b/app/javascript/dashboard/i18n/locale/pl/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": "Szukaj",
+      "EMPTY_STATE": "Nie znaleziono rekordów"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pl/generalSettings.json b/app/javascript/dashboard/i18n/locale/pl/generalSettings.json
index 710b006ff9be0..1c7f9927ce5c2 100644
--- a/app/javascript/dashboard/i18n/locale/pl/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pl/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Odśwież"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Do jutra",
       "UNTIL_NEXT_MONTH": "Do następnego miesiąca",
       "AN_HOUR_FROM_NOW": "Do godziny od teraz",
-      "CUSTOM": "Niestandardowe...",
+      "UNTIL_CUSTOM_TIME": "Niestandardowe...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/pl/helpCenter.json b/app/javascript/dashboard/i18n/locale/pl/helpCenter.json
index 9353d1da8abfb..160fef59c513c 100644
--- a/app/javascript/dashboard/i18n/locale/pl/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/pl/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/pl/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/pl/inboxMgmt.json
index 43db2cfe863e9..91d7d94262c71 100644
--- a/app/javascript/dashboard/i18n/locale/pl/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pl/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Zarządzanie skrzynkami",
     "SIDEBAR_TXT": "<p><b>Skrzynka odbiorcza</b></p> <p>Gdy podłączysz stronę internetową lub stronę na Facebooku do Chatwoot, nazywana jest <b>skrzynką odbiorczą</b>. Możesz mieć nieograniczoną liczbę skrzynek odbiorczych na swoim koncie Chatwoot.</p><p>Kliknij <b>Dodaj skrzynkę odbiorczą</b>, aby połączyć swoją stronę internetową lub stronę na Facebooku.</p><p>W panelu możesz zobaczyć wszystkie rozmowy ze wszystkich swoich skrzynek odbiorczych w jednym miejscu i odpowiadać na nie w zakładce „Konwersacje”.</p><p>Możesz również zobaczyć rozmowy specyficzne dla danej skrzynki odbiorczej, klikając na nazwę skrzynki odbiorczej w lewym panelu nawigacyjnym.</p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Nie ma żadnych skrzynek odbiorczych przypisanych do tego konta."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft",
         "DESCRIPTION": "Kliknij przycisk Zaloguj się za pomocą Microsoft, aby rozpocząć. Nastąpi przekierowanie do strony logowania przez e-mail. Po zaakceptowaniu wymaganych uprawnień zostaniesz przekierowany z powrotem do etapu tworzenia skrzynki odbiorczej.",
         "EMAIL_PLACEHOLDER": "Wprowadź adres e-mail",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Aby dodać swoje konto Microsoft jako kanał, musisz uwierzytelnić swoje konto Microsoft, klikając \"Zaloguj się za pomocą Microsoft\" ",
         "ERROR_MESSAGE": "Wystąpił błąd połączenia z Microsoft, spróbuj ponownie"
       }
diff --git a/app/javascript/dashboard/i18n/locale/pl/integrations.json b/app/javascript/dashboard/i18n/locale/pl/integrations.json
index 1c76f92fe1e0a..cd741f3498f82 100644
--- a/app/javascript/dashboard/i18n/locale/pl/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/pl/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integracje",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subskrybowane wydarzenia",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Dodaj nową aplikację na pulpicie",
       "SIDEBAR_TXT": "<p><b>Aplikacje na pulpicie</b></p><p>Aplikacje na pulpicie umożliwiają organizacjom osadzenie aplikacji wewnątrz panelu Chatwoot w celu dostarczenia kontekstu dla agentów obsługi klienta. Ta funkcja umożliwia tworzenie niezależnej aplikacji i osadzanie jej w celu dostarczania informacji o użytkowniku, jego zamówieniach lub historii płatności.</p><p>Kiedy osadzisz swoją aplikację za pomocą pulpitu Chatwoot, Twoja aplikacja otrzyma kontekst rozmowy i kontaktu jako zdarzenie okna. W swojej stronie zaimplementuj nasłuchiwanie zdarzenia wiadomości, aby otrzymać kontekst.</p><p>Aby dodać nową aplikację na pulpicie, kliknij przycisk 'Dodaj nową aplikację na pulpicie'.</p>",
       "DESCRIPTION": "Aplikacje na pulpicie umożliwiają organizacjom osadzenie aplikacji wewnątrz panelu w celu dostarczenia kontekstu dla agentów obsługi klienta. Ta funkcja umożliwia tworzenie niezależnej aplikacji i osadzanie jej w celu dostarczania informacji o użytkowniku, jego zamówieniach lub historii płatności.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Na tym koncie nie skonfigurowano jeszcze aplikacji na pulpicie",
         "LOADING": "Pobieranie aplikacji na pulpicie...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Aplikacja na pulpicie została pomyślnie usunięta",
         "API_ERROR": "Nie udało się usunąć aplikacji. Spróbuj ponownie później"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Stwórz",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Tytuł",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Tytuł jest wymagany"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Opis",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Zespół",
+            "PLACEHOLDER": "Wybierz zespół",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priorytet",
+            "PLACEHOLDER": "Wybierz priorytet",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Etykieta",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Stwórz",
+        "CANCEL": "Anuluj",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priorytet",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etykiety",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pl/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/pl/labelsMgmt.json
index 7454c84c6fdbf..6d05affb00e13 100644
--- a/app/javascript/dashboard/i18n/locale/pl/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pl/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etykiety",
     "HEADER_BTN_TXT": "Dodaj etykietę",
     "LOADING": "Pobieranie etykiet",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Brak elementów pasujących do tego zapytania",
-    "SIDEBAR_TXT": "<p><b>Etykiety</b></p><p>Etykiety pomagają w kategoryzowaniu rozmów i ustalaniu ich priorytetów. Możesz przypisać etykietę do rozmowy z panelu bocznego. <br /><br />Etykiety są przypisane do konta i mogą być wykorzystywane do tworzenia niestandardowych procesów w Twojej organizacji. Możesz przypisać etykiecie niestandardowy kolor, co ułatwia jej identyfikację. Etykietę można wyświetlić na panelu bocznym, aby łatwo filtrować rozmowy.</p>",
     "LIST": {
       "404": "Brak etykiet na tym koncie.",
       "TITLE": "Zarządzaj etykietami",
@@ -49,7 +50,8 @@
       "DISMISS": "Odrzuć",
       "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": "Dodaj etykietę",
diff --git a/app/javascript/dashboard/i18n/locale/pl/macros.json b/app/javascript/dashboard/i18n/locale/pl/macros.json
index f0d2f12801c01..b5162841e6ca6 100644
--- a/app/javascript/dashboard/i18n/locale/pl/macros.json
+++ b/app/javascript/dashboard/i18n/locale/pl/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Wykonaj",
       "PREVIEW": "Podgląd makra",
       "EXECUTED_SUCCESSFULLY": "Makro pomyślnie wykonane"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Wartość jest wymagana",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pl/report.json b/app/javascript/dashboard/i18n/locale/pl/report.json
index e515579c13e47..74e449cb42bc9 100644
--- a/app/javascript/dashboard/i18n/locale/pl/report.json
+++ b/app/javascript/dashboard/i18n/locale/pl/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Ruch rozmów",
       "NO_CONVERSATIONS": "Brak rozmów",
       "CONVERSATION": "%{count} rozmowa",
-      "CONVERSATIONS": "%{count} rozmowy"
+      "CONVERSATIONS": "%{count} rozmowy",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Rozmowy według agentów",
@@ -536,6 +537,7 @@
       "LABELS": "Etykieta",
       "TEAMS": "Zespół"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/pl/search.json b/app/javascript/dashboard/i18n/locale/pl/search.json
index 43710106d736d..07f477f432978 100644
--- a/app/javascript/dashboard/i18n/locale/pl/search.json
+++ b/app/javascript/dashboard/i18n/locale/pl/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Rozmowy",
       "MESSAGES": "Wiadomości"
     },
+    "SEARCHING_DATA": "Wyszukiwanie",
     "EMPTY_STATE": "Nie znaleziono %{item} dla zapytania '%{query}'",
     "EMPTY_STATE_FULL": "Nie znaleziono wyników dla zapytania '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ aby skupić się",
diff --git a/app/javascript/dashboard/i18n/locale/pl/settings.json b/app/javascript/dashboard/i18n/locale/pl/settings.json
index c72b3deec8f12..778b2da2144c4 100644
--- a/app/javascript/dashboard/i18n/locale/pl/settings.json
+++ b/app/javascript/dashboard/i18n/locale/pl/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Raporty",
     "SETTINGS": "Ustawienia",
     "CONTACTS": "Kontakty",
+    "CAPTAIN": "Captain",
     "HOME": "Strona główna",
     "AGENTS": "Agenci",
     "AGENT_BOTS": "Boty",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Przegląd",
-    "FACEBOOK_REAUTHORIZE": "Twoje połączenie z Facebookiem wygasło, aby kontynuować usługi, ponownie połącz swoją stronę na Facebooku",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Centrum pomocy",
       "ALL_ARTICLES": "Wszystkie artykuły",
diff --git a/app/javascript/dashboard/i18n/locale/pl/teamsSettings.json b/app/javascript/dashboard/i18n/locale/pl/teamsSettings.json
index cefd78fde32b4..6e79bba6fa1bc 100644
--- a/app/javascript/dashboard/i18n/locale/pl/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pl/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Utwórz nowy zespół",
     "HEADER": "Zespoły",
-    "SIDEBAR_TXT": "<p><b>Zespoły</b></p> <p>Zespoły pozwalają zorganizować agentów w grupy na podstawie ich odpowiedzialności. <br /> Agent może być częścią wielu zespołów. Możesz przypisywać rozmowy do zespołu, gdy pracujesz w trybie współpracy. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Na tym koncie nie ma żadnych zespołów.",
-      "EDIT_TEAM": "Edytuj zespół"
+      "EDIT_TEAM": "Edytuj zespół",
+      "NONE": "Brak"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Nie można usunąć zespołu. Spróbuj ponownie."
       },
       "CONFIRM": {
-        "TITLE": "Czy na pewno chcesz usunąć - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Wpisz {teamName}, aby potwierdzić",
         "MESSAGE": "Usuwanie zespołu spowoduje usunięcie przypisania zespołu z rozmów przypisanych do tego zespołu.",
         "YES": "Usuń ",
diff --git a/app/javascript/dashboard/i18n/locale/pt/advancedFilters.json b/app/javascript/dashboard/i18n/locale/pt/advancedFilters.json
index b68e385805987..8487b6eb884a7 100644
--- a/app/javascript/dashboard/i18n/locale/pt/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/pt/advancedFilters.json
@@ -1,23 +1,24 @@
 {
   "FILTER": {
-    "TITLE": "Filtrar Conversas",
-    "SUBTITLE": "Adicione os seus filtros abaixo e clique 'Aplicar filtros' para eliminar a confusão no chat.",
-    "EDIT_CUSTOM_FILTER": "Editar Pasta",
+    "TITLE": "Filtrar conversas",
+    "SUBTITLE": "Adicione os seus filtros abaixo e clique em 'Aplicar filtros' para eliminar a confusão no chat.",
+    "EDIT_CUSTOM_FILTER": "Editar pasta",
     "CUSTOM_VIEWS_SUBTITLE": "Adicione ou remova filtros e atualize sua pasta.",
     "ADD_NEW_FILTER": "Adicionar filtro",
-    "FILTER_DELETE_ERROR": "Ops, parece que não conseguimos salvar nada! Por favor, adicione pelo menos um filtro para salvar.",
+    "FILTER_DELETE_ERROR": "Não foi possível guardar! Por favor, adicione, pelo menos, um filtro para guardar.",
     "SUBMIT_BUTTON_LABEL": "Aplicar filtros",
     "UPDATE_BUTTON_LABEL": "Atualizar pasta",
-    "CANCEL_BUTTON_LABEL": "cancelar",
+    "CANCEL_BUTTON_LABEL": "Cancelar",
     "CLEAR_BUTTON_LABEL": "Limpar filtros",
     "FOLDER_LABEL": "Nome da pasta",
-    "FOLDER_QUERY_LABEL": "Consulta de Pasta",
+    "FOLDER_QUERY_LABEL": "Consulta de pasta",
     "EMPTY_VALUE_ERROR": "Valor obrigatório.",
-    "TOOLTIP_LABEL": "Filtrar Conversas",
+    "TOOLTIP_LABEL": "Filtrar conversas",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "E",
       "OR": "OU"
     },
+    "INPUT_PLACEHOLDER": "Inserir valor",
     "OPERATOR_LABELS": {
       "equal_to": "Igual a",
       "not_equal_to": "Não é igual a",
@@ -35,12 +36,12 @@
       "FALSE": "Falso"
     },
     "ATTRIBUTES": {
-      "STATUS": "SItuação",
+      "STATUS": "Situação",
       "ASSIGNEE_NAME": "Nome do titular",
       "INBOX_NAME": "Nome da caixa de entrada",
       "TEAM_NAME": "Nome da equipa",
       "CONVERSATION_IDENTIFIER": "ID da conversa",
-      "CAMPAIGN_NAME": "Nome da Campanha",
+      "CAMPAIGN_NAME": "Nome da campanha",
       "LABELS": "Etiquetas",
       "BROWSER_LANGUAGE": "Idioma do browser",
       "PRIORITY": "Prioridade",
@@ -50,7 +51,7 @@
       "CUSTOM_ATTRIBUTE_TEXT": "Texto",
       "CUSTOM_ATTRIBUTE_NUMBER": "Número",
       "CUSTOM_ATTRIBUTE_LINK": "Endereço",
-      "CUSTOM_ATTRIBUTE_CHECKBOX": "Caixa de Seleção",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Caixa de seleção",
       "CREATED_AT": "Criada em",
       "LAST_ACTIVITY": "Última atividade"
     },
@@ -61,12 +62,12 @@
     },
     "CUSTOM_VIEWS": {
       "ADD": {
-        "TITLE": "Deseja guardar este filtro?",
-        "LABEL": "Nome do Filtro",
-        "PLACEHOLDER": "Dê um nome ao seu filtro para consultá-lo mais tarde.",
+        "TITLE": "Pretende guardar este filtro?",
+        "LABEL": "Nome do filtro",
+        "PLACEHOLDER": "Dê um nome ao filtro, para consultá-lo mais tarde.",
         "ERROR_MESSAGE": "Nome é obrigatório.",
-        "SAVE_BUTTON": "Guardar Filtro",
-        "CANCEL_BUTTON": "cancelar",
+        "SAVE_BUTTON": "Guardar filtro",
+        "CANCEL_BUTTON": "Cancelar",
         "API_FOLDERS": {
           "SUCCESS_MESSAGE": "Pasta criada com sucesso.",
           "ERROR_MESSAGE": "Erro ao criar a pasta."
@@ -77,15 +78,15 @@
         }
       },
       "EDIT": {
-        "EDIT_BUTTON": "Editar Pasta"
+        "EDIT_BUTTON": "Editar pasta"
       },
       "DELETE": {
         "DELETE_BUTTON": "Apagar filtro",
         "MODAL": {
           "CONFIRM": {
-            "TITLE": "Confirmar a eliminação",
-            "MESSAGE": "Tem a certeza que deseja apagar o filtro ",
-            "YES": "Sim, apagar",
+            "TITLE": "Confirmar exclusão",
+            "MESSAGE": "Tem a certeza que deseja excluir o filtro ",
+            "YES": "Sim, excluir",
             "NO": "Não, manter"
           }
         },
diff --git a/app/javascript/dashboard/i18n/locale/pt/agentBots.json b/app/javascript/dashboard/i18n/locale/pt/agentBots.json
index 34c11e11f8c79..0f2816be43d5b 100644
--- a/app/javascript/dashboard/i18n/locale/pt/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/pt/agentBots.json
@@ -3,11 +3,11 @@
     "HEADER": "Bots",
     "LOADING_EDITOR": "A carregar editor...",
     "HEADER_BTN_TXT": "Adicionar configuração do bot",
-    "SIDEBAR_TXT": "<p><b>Agente Bots</b> <p>Agente Bots são como os mais fabulosos membros da sua equipe. Eles podem lidar com pequenis processos, para que se possa focar nas coisas mais importantes. Experimente.</p> <p> Pode gerenciar os seus bots a partir desta página ou criar novos usando o botão 'Adicionar configuração do bot'.</p> <p> Abra o manual dos bots <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agente</a> em nova janela, caso necessite de ajuda.</p>",
+    "SIDEBAR_TXT": "<p><b>Agentes bots</b> <p>Agentes bots podem ser considerados os membros mais extraordinários da sua equipa. Podem lidar com pequenos processos, para que se possa focar nas coisas mais importantes. </p> <p> Pode gerir os seus bots a partir desta página ou criar novos usando o botão 'Adicionar configuração do bot'.</p> <p> Abra o manual dos bots <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agente</a> em nova janela, caso necessite de ajuda.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
         "LABEL": "Nome do bot",
-        "PLACEHOLDER": "Nomeie o seu bot.",
+        "PLACEHOLDER": "Dê um nome ao seu bot.",
         "ERROR": "O nome do bot é obrigatório."
       },
       "DESCRIPTION": {
@@ -15,25 +15,25 @@
         "PLACEHOLDER": "O que faz este bot?"
       },
       "BOT_CONFIG": {
-        "ERROR": "Por favor, insira acima, a sua configuração CSML do bot.",
-        "API_ERROR": "A sua configuração CSML é inválida. Por favor corrija-a e tente novamente."
+        "ERROR": "Por favor, insira, acima, a sua configuração CSML do bot.",
+        "API_ERROR": "A sua configuração CSML é inválida. Por favor, corrija-a e tente novamente."
       },
-      "SUBMIT": "Validar e salvar"
+      "SUBMIT": "Validar e guardar"
     },
     "BOT_CONFIGURATION": {
-      "TITLE": "Selecione um agent bot",
-      "DESC": "Atribua um Agent Bot à sua caixa de entrada. Eles podem lidar com conversas iniciais e transferi-las para um agente humano quando necessário.",
+      "TITLE": "Selecione um agente bot",
+      "DESC": "Atribua um agente bot à sua caixa de entrada. Eles podem lidar com conversas iniciais e transferi-las para um agente humano quando necessário.",
       "SUBMIT": "Atualização",
       "DISCONNECT": "Desligar bot",
-      "SUCCESS_MESSAGE": "Agent bot atualizado com sucesso.",
+      "SUCCESS_MESSAGE": "Agente bot atualizado com sucesso.",
       "DISCONNECTED_SUCCESS_MESSAGE": "O agente bot foi desligado com sucesso.",
-      "ERROR_MESSAGE": "Não foi possível atualizar o agent bot. Por favor, tente novamente.",
-      "DISCONNECTED_ERROR_MESSAGE": "Não foi possível desliga o agent bot. Por favor, tente novamente.",
+      "ERROR_MESSAGE": "Não foi possível atualizar o agente bot. Por favor, tente novamente.",
+      "DISCONNECTED_ERROR_MESSAGE": "Não foi possível desligar o agente bot. Por favor, tente novamente.",
       "SELECT_PLACEHOLDER": "Selecionar bot"
     },
     "ADD": {
       "TITLE": "Configurar novo bot",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "API": {
         "SUCCESS_MESSAGE": "Bot adicionado com sucesso.",
         "ERROR_MESSAGE": "Não foi possível adicionar o bot. Por favor, tente novamente mais tarde."
@@ -41,25 +41,25 @@
     },
     "LIST": {
       "404": "Nenhum bot encontrado. Pode criar um bot clicando no botão 'Configurar novo bot' ↗️",
-      "LOADING": "Carregando bots...",
+      "LOADING": "A carregar bots...",
       "TYPE": "Tipo de bot"
     },
     "DELETE": {
-      "BUTTON_TEXT": "excluir",
+      "BUTTON_TEXT": "Excluir",
       "TITLE": "Apagar bot",
-      "SUBMIT": "excluir",
-      "CANCEL_BUTTON_TEXT": "cancelar",
-      "DESCRIPTION": "Tem certeza que pretende excluir este bot? Esta ação é irreversível.",
+      "SUBMIT": "Excluir",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
+      "DESCRIPTION": "Tem a certeza que pretende excluir este bot? Esta ação é irreversível.",
       "API": {
         "SUCCESS_MESSAGE": "Bot apagado com sucesso.",
         "ERROR_MESSAGE": "Não foi possível apagar o bot. Por favor, tente novamente."
       }
     },
     "EDIT": {
-      "BUTTON_TEXT": "Alterar",
-      "LOADING": "Carregando bots...",
+      "BUTTON_TEXT": "Editar",
+      "LOADING": "A carregar bots...",
       "TITLE": "Editar bot",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "API": {
         "SUCCESS_MESSAGE": "Bot atualizado com sucesso.",
         "ERROR_MESSAGE": "Não foi possível atualizar o bot. Por favor, tente novamente."
diff --git a/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json b/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json
index d6ca9dab8298d..0650e6583d734 100644
--- a/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json
@@ -1,32 +1,33 @@
 {
   "AGENT_MGMT": {
     "HEADER": "Agentes",
-    "HEADER_BTN_TXT": "Adicionar Agente",
-    "LOADING": "Buscando lista de agente",
-    "SIDEBAR_TXT": "<p><b>Agentes</b></p> <p> Um <b>Agente</b> é um membro da sua equipa de Suporte ao Cliente. </p><p> Os agentes podem ver e responder às mensagens dos seus utilizadores. A lista mostra todos os agentes atualmente na sua conta. </p><p> Clique em <b>Adicionar Agente</b> para adicionar um novo agente. O agente que adicionar receberá um e-mail com um link de confirmação para ativar a sua conta, de forma a poderem aceder ao Chatwoot e responder às mensagens. </p><p> Os acessos aos recursos do Chatwoot têm como base as seguintes funções. </p><p> <b>Agentes</b> - Só podem aceder às caixas de entrada, relatórios e conversas. Podem atribuir conversas a outros agentes ou a eles próprios e responder a pedidos.</p><p> <b>Administrador</b> - Têm acesso a todos os recursos do Chatwoot ativados na sua conta, incluindo configurações e todos os privilégios que os Agentes normais têm.</p>",
+    "HEADER_BTN_TXT": "Adicionar agente",
+    "LOADING": "A procurar lista de agentes",
+    "DESCRIPTION": "Um agente é um membro da sua equipa de suporte que pode visualizar e responder às mensagens de clientes. A lista abaixo mostra todos os agentes da sua conta.",
+    "LEARN_MORE": "Saber mais sobre os papéis de utilizadores",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrador",
-      "AGENT": "Representante"
+      "AGENT": "Agente"
     },
     "LIST": {
       "404": "Não há agentes associados a esta conta",
-      "TITLE": "Gerenciar agentes na sua equipe",
-      "DESC": "Você pode adicionar/remover agentes para/da sua equipe.",
+      "TITLE": "Gerir agentes na sua equipa",
+      "DESC": "Pode adicionar/remover agentes para/da sua equipa.",
       "NAME": "Nome:",
       "EMAIL": "E-mail:",
-      "STATUS": "SItuação",
-      "ACTIONS": "Ações.",
+      "STATUS": "Situação",
+      "ACTIONS": "Ações",
       "VERIFIED": "Verificada",
       "VERIFICATION_PENDING": "Verificação pendente"
     },
     "ADD": {
-      "TITLE": "Adicionar agente à sua equipe",
-      "DESC": "Você pode adicionar pessoas que serão capazes de lidar com o suporte de suas caixas de entrada.",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "TITLE": "Adicionar agente à sua equipa",
+      "DESC": "Pode adicionar pessoas que serão capazes de lidar com o suporte das suas caixas de entrada.",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "FORM": {
         "NAME": {
-          "LABEL": "Nome do Representante",
-          "PLACEHOLDER": "Por favor, insira um nome para o agente"
+          "LABEL": "Nome do agente",
+          "PLACEHOLDER": "Por favor, insira o nome do agente"
         },
         "AGENT_TYPE": {
           "LABEL": "Tipo de agente",
@@ -35,35 +36,35 @@
         },
         "EMAIL": {
           "LABEL": "Endereço de e-mail",
-          "PLACEHOLDER": "Por favor insira um endereço de e-mail do agente"
+          "PLACEHOLDER": "Por favor, insira o endereço de e-mail do agente"
         },
-        "SUBMIT": "Adicionar Agente"
+        "SUBMIT": "Adicionar agente"
       },
       "API": {
         "SUCCESS_MESSAGE": "Agente adicionado com sucesso",
-        "EXIST_MESSAGE": "E-mail do representante já está em uso, por favor tente outro endereço de e-mail",
-        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor tente novamente mais tarde"
+        "EXIST_MESSAGE": "O e-mail do agente já está a ser utilizado, por favor tente outro endereço de e-mail",
+        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor, tente novamente mais tarde"
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "excluir",
+      "BUTTON_TEXT": "Excluir",
       "API": {
         "SUCCESS_MESSAGE": "Agente excluído com sucesso",
-        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor tente novamente mais tarde"
+        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor, tente novamente mais tarde"
       },
       "CONFIRM": {
-        "TITLE": "Confirmar Exclusão",
-        "MESSAGE": "Tem certeza que deseja excluir ",
+        "TITLE": "Confirmar exclusão",
+        "MESSAGE": "Tem certeza que deseja excluir agente ",
         "YES": "Sim, excluir ",
-        "NO": "Não, Manter "
+        "NO": "Não, manter "
       }
     },
     "EDIT": {
-      "TITLE": "Editar Representante",
+      "TITLE": "Editar agente",
       "FORM": {
         "NAME": {
-          "LABEL": "Nome do Representante",
-          "PLACEHOLDER": "Por favor, insira um nome para o agente"
+          "LABEL": "Nome do agente",
+          "PLACEHOLDER": "Por favor, insira o nome do agente"
         },
         "AGENT_TYPE": {
           "LABEL": "Tipo de agente",
@@ -72,26 +73,26 @@
         },
         "EMAIL": {
           "LABEL": "Endereço de e-mail",
-          "PLACEHOLDER": "Por favor insira um endereço de e-mail do agente"
+          "PLACEHOLDER": "Por favor, insira o endereço de e-mail do agente"
         },
         "AGENT_AVAILABILITY": {
           "LABEL": "Disponibilidade",
-          "PLACEHOLDER": "Por favor, selecione um status de disponibilidade",
+          "PLACEHOLDER": "Por favor, selecione um estado de disponibilidade",
           "ERROR": "Disponibilidade é necessária"
         },
-        "SUBMIT": "Editar Agente"
+        "SUBMIT": "Editar agente"
       },
-      "BUTTON_TEXT": "Alterar",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "BUTTON_TEXT": "Editar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "API": {
         "SUCCESS_MESSAGE": "Agente atualizado com sucesso",
-        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor tente novamente mais tarde"
+        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor, tente novamente mais tarde"
       },
       "PASSWORD_RESET": {
-        "ADMIN_RESET_BUTTON": "Redefinir a senha",
-        "ADMIN_SUCCESS_MESSAGE": "Um e-mail com instruções de redefinição de senha foi enviado para o agente",
-        "SUCCESS_MESSAGE": "Senha do agente redefinida com sucesso",
-        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor tente novamente mais tarde"
+        "ADMIN_RESET_BUTTON": "Redefinir a palavra-passe",
+        "ADMIN_SUCCESS_MESSAGE": "Um e-mail com instruções para redefinir a palavra-passe foi enviado para o agente",
+        "SUCCESS_MESSAGE": "Palavra-passe do agente redefinida com sucesso",
+        "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor, tente novamente mais tarde"
       }
     },
     "SEARCH": {
@@ -101,16 +102,16 @@
       "PLACEHOLDER": "Nenhum",
       "TITLE": {
         "AGENT": "Escolher agente",
-        "TEAM": "Escolher Equipa"
+        "TEAM": "Escolher equipa"
       },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nenhum agente encontrado",
-          "TEAM": "Nenhuma Equipa encontrada"
+          "TEAM": "Nenhuma equipa encontrada"
         },
         "PLACEHOLDER": {
           "AGENT": "Procurar agentes",
-          "TEAM": "Procurar Equipas",
+          "TEAM": "Procurar equipas",
           "INPUT": "Procurar agentes"
         }
       }
diff --git a/app/javascript/dashboard/i18n/locale/pt/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/pt/attributesMgmt.json
index 27883db0d1f46..1cf3f14e2878b 100644
--- a/app/javascript/dashboard/i18n/locale/pt/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt/attributesMgmt.json
@@ -1,17 +1,17 @@
 {
   "ATTRIBUTES_MGMT": {
     "HEADER": "Atributos personalizados",
-    "HEADER_BTN_TXT": "Adicionar Atributo Personalizado",
-    "LOADING": "Obtendo atributos personalizados",
-    "SIDEBAR_TXT": "<p><b>Atributos personalizados</b> <p>Um atributo personalizado rastreia factos sobre os seus contactos/conversação - como o plano de assinatura, ou quando encomendaram o primeiro artigo, etc. <br /><br />Para criar um Atributo Personalizado, basta clicar no botão <b>Adicionar Atributo Personalizado.</b> Também pode editar ou apagar um Atributo Personalizado existente, clicando no botão Editar ou Apagar.</p>",
+    "HEADER_BTN_TXT": "Adicionar atributo personalizado",
+    "LOADING": "A obter atributos personalizados",
+    "SIDEBAR_TXT": "<p><b>Atributos personalizados</b> <p>Um atributo personalizado rastreia factos sobre os seus contactos/conversação - como o plano de subscrição, ou quando encomendaram o primeiro artigo, etc. <br /><br />Para criar um atributo personalizado, basta clicar no botão <b>Adicionar atributo personalizado.</b> Também pode editar ou excluir um atributo personalizado existente, clicando no botão Editar ou Excluir.</p>",
     "ADD": {
-      "TITLE": "Adicionar Atributo Personalizado",
+      "TITLE": "Adicionar atributo personalizado",
       "SUBMIT": "Criar",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "FORM": {
         "NAME": {
-          "LABEL": "Mostrar Nome",
-          "PLACEHOLDER": "Introduzia um nome de exibição de atributo personalizado",
+          "LABEL": "Mostrar nome",
+          "PLACEHOLDER": "Introduza o nome de exibição do atributo personalizado",
           "ERROR": "Nome é obrigatório"
         },
         "DESC": {
@@ -21,7 +21,7 @@
         },
         "MODEL": {
           "LABEL": "Aplica-se a",
-          "PLACEHOLDER": "Por favor selecione um",
+          "PLACEHOLDER": "Por favor, selecione um",
           "ERROR": "Modelo é obrigatório"
         },
         "TYPE": {
@@ -29,9 +29,9 @@
           "PLACEHOLDER": "Por favor, selecione um tipo",
           "ERROR": "Tipo é obrigatório",
           "LIST": {
-            "LABEL": "Listar Valores",
-            "PLACEHOLDER": "Por favor insira um valor e pressione Enter",
-            "ERROR": "Deve possuir pelo menos um valor"
+            "LABEL": "Listar valores",
+            "PLACEHOLDER": "Por favor, insira um valor e pressione Enter",
+            "ERROR": "Deve possuir, pelo menos, um valor"
           }
         },
         "KEY": {
@@ -41,11 +41,11 @@
           "IN_VALID": "Chave inválida"
         },
         "REGEX_PATTERN": {
-          "LABEL": "Padrão Regex",
+          "LABEL": "Padrão regex",
           "PLACEHOLDER": "Por favor, insira um padrão regex de atributo personalizado. (Opcional)"
         },
         "REGEX_CUE": {
-          "LABEL": "Sugestão Regex",
+          "LABEL": "Sugestão regex",
           "PLACEHOLDER": "Por favor, insira dica para o padrão regex. (Opcional)"
         },
         "ENABLE_REGEX": {
@@ -53,65 +53,65 @@
         }
       },
       "API": {
-        "SUCCESS_MESSAGE": "Atributo Personalizado adicionado com sucesso!",
-        "ERROR_MESSAGE": "Não foi possível criar um atributo personalizado, por favor tente novamente mais tarde."
+        "SUCCESS_MESSAGE": "Atributo personalizado adicionado com sucesso!",
+        "ERROR_MESSAGE": "Não foi possível criar um atributo personalizado, por favor, tente novamente mais tarde."
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "excluir",
+      "BUTTON_TEXT": "Excluir",
       "API": {
-        "SUCCESS_MESSAGE": "Atributo personalizado eliminado com sucesso.",
-        "ERROR_MESSAGE": "Não foi possível apagar o atributo personalizado. Tente novamente."
+        "SUCCESS_MESSAGE": "Atributo personalizado excluído com sucesso.",
+        "ERROR_MESSAGE": "Não foi possível excluir o atributo personalizado. Tente novamente."
       },
       "CONFIRM": {
-        "TITLE": "Tem a certeza que quer apagar a equipa - %{attributeName}",
+        "TITLE": "Tem a certeza que pretende apagar a equipa - %{attributeName}",
         "PLACE_HOLDER": "Por favor, digite {attributeName} para confirmar",
         "MESSAGE": "A eliminação irá remover o atributo personalizado",
-        "YES": "excluir ",
-        "NO": "cancelar"
+        "YES": "Excluir ",
+        "NO": "Cancelar"
       }
     },
     "EDIT": {
-      "TITLE": "Editar Atributo Personalizado",
+      "TITLE": "Editar atributo personalizado",
       "UPDATE_BUTTON_TEXT": "Atualização",
       "TYPE": {
         "LIST": {
-          "LABEL": "Listar Valores",
-          "PLACEHOLDER": "Por favor insira valores e pressione Enter"
+          "LABEL": "Listar valores",
+          "PLACEHOLDER": "Por favor, insira valores e pressione Enter"
         }
       },
       "API": {
         "SUCCESS_MESSAGE": "Atributo personalizado atualizado com sucesso",
-        "ERROR_MESSAGE": "Houve um erro na actualização do atributo personalizado, por favor tente novamente"
+        "ERROR_MESSAGE": "Houve um erro na atualização do atributo personalizado, por favor, tente novamente"
       }
     },
     "TABS": {
       "HEADER": "Atributos personalizados",
       "CONVERSATION": "Conversa",
-      "CONTACT": "Contato"
+      "CONTACT": "Contacto"
     },
     "LIST": {
       "TABLE_HEADER": [
-        "Nome:",
+        "Nome",
         "Descrição",
         "Tipo",
         "Chave"
       ],
       "BUTTONS": {
-        "EDIT": "Alterar",
-        "DELETE": "excluir"
+        "EDIT": "Editar",
+        "DELETE": "Excluir"
       },
       "EMPTY_RESULT": {
         "404": "Não há atributos personalizados criados",
         "NOT_FOUND": "Não há atributos personalizados configurados"
       },
       "REGEX_PATTERN": {
-        "LABEL": "Padrão Regex",
+        "LABEL": "Padrão regex",
         "PLACEHOLDER": "Por favor, insira um padrão regex de atributo personalizado. (Opcional)"
       },
       "REGEX_CUE": {
-        "LABEL": "Sugestão Regex",
-        "PLACEHOLDER": "Por favor, insira dica para o padrão regex. (Opcional)"
+        "LABEL": "Sugestão regex",
+        "PLACEHOLDER": "Por favor, insira uma dica para o padrão regex. (Opcional)"
       },
       "ENABLE_REGEX": {
         "LABEL": "Ativar validação de regex"
diff --git a/app/javascript/dashboard/i18n/locale/pt/auditLogs.json b/app/javascript/dashboard/i18n/locale/pt/auditLogs.json
index 778e8092c9ec9..eaeddf4dfb3e6 100644
--- a/app/javascript/dashboard/i18n/locale/pt/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/pt/auditLogs.json
@@ -3,25 +3,27 @@
     "HEADER": "Logs de auditoria",
     "HEADER_BTN_TXT": "Adicionar logs de auditoria",
     "LOADING": "A obter logs de auditoria",
+    "DESCRIPTION": "Os logs de auditoria mantêm um registo das atividades na sua conta, permitindo-lhe acompanhar e auditar a sua conta, equipa ou serviços.",
+    "LEARN_MORE": "Saber mais sobre os logs de auditoria",
     "SEARCH_404": "Não existem itens correspondentes a esta consulta",
     "SIDEBAR_TXT": "<p><b>Logs de auditoria</b> </p><p> Logs de auditoria são registos de eventos e ações de um Sistema de Chatwoot. </p>",
     "LIST": {
       "404": "Não há logs de auditoria referentes a esta conta.",
-      "TITLE": "Administrar Logs de Auditoria",
-      "DESC": "Logs de auditoria são registos de eventos e ações de um Sistema de Chatwoot.",
+      "TITLE": "Gerir logs de auditoria",
+      "DESC": "Logs de auditoria são registos de eventos e ações do Sistema Chatwoot.",
       "TABLE_HEADER": [
         "User",
-        "Action",
+        "Horário",
         "Endereço IP"
       ]
     },
     "API": {
-      "SUCCESS_MESSAGE": "AuditLogs recuperados com sucesso",
-      "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor tente novamente mais tarde"
+      "SUCCESS_MESSAGE": "Logs de auditoria recuperados com sucesso",
+      "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot, por favor, tente novamente mais tarde"
     },
     "DEFAULT_USER": "Sistema",
     "AUTOMATION_RULE": {
-      "ADD": "%{agentName} criou a regra de automação (#%{id})",
+      "ADD": "%{agentName} criou uma nova regra de automação (#%{id})",
       "EDIT": "%{agentName} atualizou a regra de automação (#%{id})",
       "DELETE": "%{agentName} apagou a regra de automação (#%{id})"
     },
@@ -29,11 +31,12 @@
       "ADD": "%{agentName} convidou %{invitee} para a conta como %{role}",
       "EDIT": {
         "SELF": "%{agentName} alterou o seu %{attributes} para %{values}",
-        "OTHER": "%{agentName} alterou o parâmetro %{attributes} do utilizador %{user} para %{values}"
+        "OTHER": "%{agentName} alterou o parâmetro %{attributes} do utilizador %{user} para %{values}",
+        "DELETED": "%{agentName} alterou o parâmetro %{attributes} de um utilizador excluído para %{values}"
       }
     },
     "INBOX": {
-      "ADD": "%{agentName} criou a caixa de entrada (#%{id})",
+      "ADD": "%{agentName} criou uma nova caixa de entrada (#%{id})",
       "EDIT": "%{agentName} atualizou a caixa de entrada (#%{id})",
       "DELETE": "%{agentName} apagou a caixa de entrada (#%{id})"
     },
@@ -43,13 +46,13 @@
       "DELETE": "%{agentName} apagou o webhook (#%{id})"
     },
     "USER_ACTION": {
-      "SIGN_IN": "%{agentName} fez o login",
-      "SIGN_OUT": "%{agentName} saiu"
+      "SIGN_IN": "%{agentName} iniciou sessão",
+      "SIGN_OUT": "%{agentName} terminou sessão"
     },
     "TEAM": {
       "ADD": "%{agentName} criou a nova equipa (#%{id})",
       "EDIT": "%{agentName} atualizou a equipa (#%{id})",
-      "DELETE": "%{agentName} apagou a equipe (#%{id})"
+      "DELETE": "%{agentName} apagou a equipa (#%{id})"
     },
     "MACRO": {
       "ADD": "%{agentName} criou a nova macro (#%{id})",
diff --git a/app/javascript/dashboard/i18n/locale/pt/automation.json b/app/javascript/dashboard/i18n/locale/pt/automation.json
index cdd43a4fb4a63..16639fa62b099 100644
--- a/app/javascript/dashboard/i18n/locale/pt/automation.json
+++ b/app/javascript/dashboard/i18n/locale/pt/automation.json
@@ -1,46 +1,46 @@
 {
   "AUTOMATION": {
-    "HEADER": "Automatizações",
-    "HEADER_BTN_TXT": "Adicionar Regra de Automação",
-    "LOADING": "Buscando regras de automação",
-    "SIDEBAR_TXT": "<p><b>Regras de automação</b> <p>A automação pode substituir e agilizar processos existentes que requerem esforço manual. Podem ser feitas muitas coisas com automação, incluindo adicionar etiquetas e atribuir a conversas a agentes. Para que a equipa se concentre no que faz melhor e economize tempo em tarefas manuais.</p>",
+    "HEADER": "Automações",
+    "HEADER_BTN_TXT": "Adicionar regra de automação",
+    "LOADING": "A procurar regras de automação",
+    "SIDEBAR_TXT": "<p><b>Regras de automação</b> <p>A automação pode substituir e agilizar processos existentes que requerem esforço manual. Podem ser feitas muitas coisas com automação, incluindo adicionar etiquetas e atribuir conversas a agentes, para que a equipa se concentre no que faz melhor e economize tempo em tarefas manuais.</p>",
     "ADD": {
-      "TITLE": "Adicionar Regra de Automação",
+      "TITLE": "Adicionar regra de automação",
       "SUBMIT": "Criar",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "FORM": {
         "NAME": {
-          "LABEL": "Nome da Regra",
-          "PLACEHOLDER": "Insira nome da regra",
+          "LABEL": "Nome da regra",
+          "PLACEHOLDER": "Insira o nome da regra",
           "ERROR": "Nome é obrigatório"
         },
         "DESC": {
           "LABEL": "Descrição",
-          "PLACEHOLDER": "Insera descrição da regra",
+          "PLACEHOLDER": "Insira descrição da regra",
           "ERROR": "Descrição é obrigatória"
         },
         "EVENT": {
           "LABEL": "Evento",
-          "PLACEHOLDER": "Por favor selecione um",
+          "PLACEHOLDER": "Por favor, selecione um",
           "ERROR": "Evento é necessário"
         },
         "CONDITIONS": {
           "LABEL": "Condições"
         },
         "ACTIONS": {
-          "LABEL": "Ações."
+          "LABEL": "Ações"
         }
       },
-      "CONDITION_BUTTON_LABEL": "Adicionar Condição",
-      "ACTION_BUTTON_LABEL": "Adicionar Ação",
+      "CONDITION_BUTTON_LABEL": "Adicionar condição",
+      "ACTION_BUTTON_LABEL": "Adicionar ação",
       "API": {
-        "SUCCESS_MESSAGE": "Regra de automatização adicionada com sucesso",
-        "ERROR_MESSAGE": "Não foi possível criar uma regra de automatização, por favor tente novamente mais tarde"
+        "SUCCESS_MESSAGE": "Regra de automação adicionada com sucesso",
+        "ERROR_MESSAGE": "Não foi possível criar uma regra de automação, por favor, tente novamente mais tarde"
       }
     },
     "LIST": {
       "TABLE_HEADER": [
-        "Nome:",
+        "Nome",
         "Descrição",
         "Ativa",
         "Criado em"
@@ -48,24 +48,24 @@
       "404": "Nenhuma regra de automação encontrada"
     },
     "DELETE": {
-      "TITLE": "Apagar Regra de Automação",
-      "SUBMIT": "excluir",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "TITLE": "Apagar regra de automação",
+      "SUBMIT": "Excluir",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "CONFIRM": {
-        "TITLE": "Confirmar Exclusão",
-        "MESSAGE": "Tem certeza que deseja excluir ",
+        "TITLE": "Confirmar exclusão",
+        "MESSAGE": "Tem a certeza que pretende excluir a automação ",
         "YES": "Sim, excluir ",
-        "NO": "Não, Manter "
+        "NO": "Não, manter "
       },
       "API": {
-        "SUCCESS_MESSAGE": "Regra de automatização eliminada com sucesso",
+        "SUCCESS_MESSAGE": "Regra de automação excluída com sucesso",
         "ERROR_MESSAGE": "Não foi possível excluir a regra de automação, por favor, tente novamente mais tarde"
       }
     },
     "EDIT": {
-      "TITLE": "Editar Regra de Automação",
+      "TITLE": "Editar regra de automação",
       "SUBMIT": "Atualização",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "API": {
         "SUCCESS_MESSAGE": "Regra de automação atualizada com sucesso",
         "ERROR_MESSAGE": "Não foi possível atualizar a regra de automação, por favor, tente novamente mais tarde"
@@ -75,44 +75,55 @@
       "TOOLTIP": "Clone",
       "API": {
         "SUCCESS_MESSAGE": "Automação clonada com sucesso",
-        "ERROR_MESSAGE": "Não foi possível clonar regra de automação, por favor, tente novamente mais tarde"
+        "ERROR_MESSAGE": "Não foi possível clonar a regra de automação, por favor, tente novamente mais tarde"
       }
     },
     "FORM": {
-      "EDIT": "Alterar",
+      "EDIT": "Editar",
       "CREATE": "Criar",
-      "DELETE": "excluir",
-      "CANCEL": "cancelar",
+      "DELETE": "Excluir",
+      "CANCEL": "Cancelar",
       "RESET_MESSAGE": "Alterar o tipo de evento irá redefinir as condições e eventos adicionados abaixo"
     },
     "CONDITION": {
-      "DELETE_MESSAGE": "É necessário ter pelo menos uma condição para salvar",
-      "CONTACT_CUSTOM_ATTR_LABEL": "Atributos Personalizados do Contato",
-      "CONVERSATION_CUSTOM_ATTR_LABEL": "Atributos Personalizados da Conversa"
+      "DELETE_MESSAGE": "É necessário ter, pelo menos, uma condição para guardar",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Atributos personalizados do contacto",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Atributos personalizados da conversa"
     },
     "ACTION": {
-      "DELETE_MESSAGE": "É necessário ter pelo menos uma ação para salvar",
+      "DELETE_MESSAGE": "É necessário ter, pelo menos, uma ação para guardar",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Introduza aqui a sua mensagem",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Selecionar equipas"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Selecionar equipas",
+      "EMAIL_INPUT_PLACEHOLDER": "Inserir e-mail",
+      "URL_INPUT_PLACEHOLDER": "Inserir URL"
     },
     "TOGGLE": {
-      "ACTIVATION_TITLE": "Ativar Regra de Automação",
-      "DEACTIVATION_TITLE": "Desativar Regra de Automação",
-      "ACTIVATION_DESCRIPTION": "Esta ação irá ativar a regra de automação '{automationName}'. Tem a certeza que deseja continuar?",
-      "DEACTIVATION_DESCRIPTION": "Esta ação irá desativar a regra de automação '{automationName}'. Tem a certeza que deseja continuar?",
-      "ACTIVATION_SUCCESFUL": "Regra de Automação Ativada com Sucesso",
-      "DEACTIVATION_SUCCESFUL": "Regra de Automação Desativada com Sucesso",
-      "ACTIVATION_ERROR": "Não foi possível Ativar a Automação, por favor, tente novamente mais tarde",
-      "DEACTIVATION_ERROR": "Não foi possível Desativar a Automação, por favor, tente novamente mais tarde",
+      "ACTIVATION_TITLE": "Ativar regra de automação",
+      "DEACTIVATION_TITLE": "Desativar regra de automação",
+      "ACTIVATION_DESCRIPTION": "Esta ação irá ativar a regra de automação '{automationName}'. Tem a certeza que pretende continuar?",
+      "DEACTIVATION_DESCRIPTION": "Esta ação irá desativar a regra de automação '{automationName}'. Tem a certeza que pretende continuar?",
+      "ACTIVATION_SUCCESFUL": "Regra de automação ativada com sucesso",
+      "DEACTIVATION_SUCCESFUL": "Regra de automação desativada com sucesso",
+      "ACTIVATION_ERROR": "Não foi possível ativar a automação. Por favor, tente novamente mais tarde",
+      "DEACTIVATION_ERROR": "Não foi possível desativar a automação. Por favor, tente novamente mais tarde",
       "CONFIRMATION_LABEL": "Sim",
       "CANCEL_LABEL": "Não"
     },
     "ATTACHMENT": {
-      "UPLOAD_ERROR": "Não foi possível carregar anexo, por favor tente novamente",
+      "UPLOAD_ERROR": "Não foi possível carregar anexo, por favor, tente novamente",
       "LABEL_IDLE": "Carregar anexo",
       "LABEL_UPLOADING": "A carregar...",
-      "LABEL_UPLOADED": "Carregado com sucesso",
-      "LABEL_UPLOAD_FAILED": "Upload falhou"
+      "LABEL_UPLOADED": "Anexo carregado com sucesso",
+      "LABEL_UPLOAD_FAILED": "Falha ao carregar anexo"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "A chave do atributo é necessária",
+      "FILTER_OPERATOR_REQUIRED": "Operador do filtro é necessário",
+      "VALUE_REQUIRED": "Valor obrigatório",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "O valor deve ser entre 1 e 998",
+      "ACTION_PARAMETERS_REQUIRED": "Os parâmetros de ação são obrigatórios",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "Pelo menos uma condição é obrigatória",
+      "ATLEAST_ONE_ACTION_REQUIRED": "Pelo menos uma ação é obrigatória"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/bulkActions.json b/app/javascript/dashboard/i18n/locale/pt/bulkActions.json
index 94df40284094d..aaac6a16f8af3 100644
--- a/app/javascript/dashboard/i18n/locale/pt/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/pt/bulkActions.json
@@ -2,19 +2,20 @@
   "BULK_ACTION": {
     "CONVERSATIONS_SELECTED": "%{conversationCount} conversas selecionadas",
     "AGENT_SELECT_LABEL": "Escolher agente",
-    "ASSIGN_CONFIRMATION_LABEL": "Tem certeza que pretende atribuir %{conversationCount} %{conversationLabel} a",
-    "UNASSIGN_CONFIRMATION_LABEL": "Tem certeza que pretende remover a atribuição de %{conversationCount} %{conversationLabel}?",
-    "GO_BACK_LABEL": "Retornar",
+    "ASSIGN_CONFIRMATION_LABEL": "Tem a certeza que pretende atribuir %{conversationCount} %{conversationLabel} a",
+    "UNASSIGN_CONFIRMATION_LABEL": "Tem a certeza que pretende remover a atribuição de %{conversationCount} %{conversationLabel}?",
+    "GO_BACK_LABEL": "Voltar",
     "ASSIGN_LABEL": "Atribuir",
     "YES": "Sim",
+    "SEARCH_INPUT_PLACEHOLDER": "Procurar",
     "ASSIGN_AGENT_TOOLTIP": "Atribuir agente",
-    "ASSIGN_TEAM_TOOLTIP": "Atribuir equipe",
+    "ASSIGN_TEAM_TOOLTIP": "Atribuir equipa",
     "ASSIGN_SUCCESFUL": "Conversas atribuídas com sucesso.",
     "ASSIGN_FAILED": "Falha ao atribuir conversas. Por favor, tente novamente.",
     "RESOLVE_SUCCESFUL": "Conversas resolvidas com sucesso.",
     "RESOLVE_FAILED": "Falha ao resolver conversas. Por favor, tente novamente.",
     "ALL_CONVERSATIONS_SELECTED_ALERT": "As conversas visíveis nesta página estão apenas selecionadas.",
-    "AGENT_LIST_LOADING": "Carregando agentes",
+    "AGENT_LIST_LOADING": "A carregar agentes",
     "UPDATE": {
       "CHANGE_STATUS": "Alterar estado",
       "SNOOZE_UNTIL": "Adiar",
@@ -29,11 +30,11 @@
       "ASSIGN_FAILED": "Falha ao atribuir etiquetas. Por favor, tente novamente."
     },
     "TEAMS": {
-      "TEAM_SELECT_LABEL": "Escolher Equipa",
+      "TEAM_SELECT_LABEL": "Escolher equipa",
       "NONE": "Nenhuma",
       "NO_TEAMS_AVAILABLE": "Não há equipas nesta conta.",
       "ASSIGN_SELECTED_TEAMS": "Atribuir equipa selecionada.",
-      "ASSIGN_SUCCESFUL": "Equipas atribuídas com sucesso.",
+      "ASSIGN_SUCCESFUL": "Equipas atribuídas.",
       "ASSIGN_FAILED": "Falha ao atribuir equipa. Tente novamente."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/pt/campaign.json b/app/javascript/dashboard/i18n/locale/pt/campaign.json
index 8a49522fc410b..e0bcdfd9fb4a0 100644
--- a/app/javascript/dashboard/i18n/locale/pt/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/pt/campaign.json
@@ -1,96 +1,96 @@
 {
   "CAMPAIGN": {
     "HEADER": "Campanhas",
-    "SIDEBAR_TXT": "Mensagens proativas permitem-lhe enviar mensagens automáticas aos seus contatos, o que irá originar mais conversas. Clique em <b>Adicionar Campanha</b> para criar uma nova campanha. Também pode editar ou apagar uma campanha existente clicando no botão Editar ou Apagar.",
+    "SIDEBAR_TXT": "As mensagens proativas permitem-lhe enviar mensagens automáticas aos seus contactos, o que irá originar mais conversas. Clique em <b>Adicionar Campanha</b> para criar uma nova campanha. Também pode editar ou apagar uma campanha existente clicando no botão Editar ou Excluir.",
     "HEADER_BTN_TXT": {
-      "ONE_OFF": "Criar uma campanha de ausência",
-      "ONGOING": "Criar uma campanha em andamento"
+      "ONE_OFF": "Criar uma campanha pontual",
+      "ONGOING": "Criar uma campanha contínua"
     },
     "ADD": {
       "TITLE": "Criar uma campanha",
-      "DESC": "As mensagens proativas permitem-lhe enviar mensagens automáticas aos seus contatos, o que origina um maior número de conversas.",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "DESC": "As mensagens proativas permitem-lhe enviar mensagens automáticas aos seus contactos, o que origina um maior número de conversas.",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "CREATE_BUTTON_TEXT": "Criar",
       "FORM": {
         "TITLE": {
-          "LABEL": "Nome",
-          "PLACEHOLDER": "Por favor, digite o nome da campanha",
-          "ERROR": "Nome é obrigatório"
+          "LABEL": "Título",
+          "PLACEHOLDER": "Por favor, insira o título da campanha",
+          "ERROR": "O título é obrigatório"
         },
         "SCHEDULED_AT": {
           "LABEL": "Horário agendado",
-          "PLACEHOLDER": "Por favor, escolha a hora",
+          "PLACEHOLDER": "Por favor, selecione a hora",
           "CONFIRM": "Confirmar",
           "ERROR": "Horário de agendamento obrigatório"
         },
         "AUDIENCE": {
           "LABEL": "Público-alvo",
           "PLACEHOLDER": "Escolher etiquetas dos clientes",
-          "ERROR": "Publico-alvo necessário"
+          "ERROR": "Público-alvo obrigatório"
         },
         "INBOX": {
           "LABEL": "Escolher caixa de entrada",
           "PLACEHOLDER": "Escolher caixa de entrada",
-          "ERROR": "Caixa de entrada necessária"
+          "ERROR": "Caixa de entrada obrigatória"
         },
         "MESSAGE": {
-          "LABEL": "Messagem",
-          "PLACEHOLDER": "Por favor, digite a mensagem da campanha",
+          "LABEL": "Mensagem",
+          "PLACEHOLDER": "Por favor, insira a mensagem da campanha",
           "ERROR": "A mensagem é obrigatória"
         },
         "SENT_BY": {
           "LABEL": "Enviado por",
-          "PLACEHOLDER": "Por favor, escolha o conteúdo da campanha",
-          "ERROR": "Remetente é obrigatório"
+          "PLACEHOLDER": "Por favor, selecione o conteúdo da campanha",
+          "ERROR": "O remetente é obrigatório"
         },
         "END_POINT": {
           "LABEL": "URL",
-          "PLACEHOLDER": "Por favor, insira a URL",
-          "ERROR": "Por favor, insira uma URL válida"
+          "PLACEHOLDER": "Por favor, insira o URL",
+          "ERROR": "Por favor, insira um URL válido"
         },
         "TIME_ON_PAGE": {
           "LABEL": "Tempo na página (segundos)",
-          "PLACEHOLDER": "Por favor, digite a hora",
+          "PLACEHOLDER": "Por favor, insira a hora",
           "ERROR": "O tempo na página é obrigatório"
         },
         "ENABLED": "Ativar a campanha",
         "TRIGGER_ONLY_BUSINESS_HOURS": "Ativar apenas durante o horário de trabalho",
-        "SUBMIT": "Adicionar Campanha"
+        "SUBMIT": "Adicionar campanha"
       },
       "API": {
-        "SUCCESS_MESSAGE": "Campanha criado com sucesso",
+        "SUCCESS_MESSAGE": "Campanha criada com sucesso",
         "ERROR_MESSAGE": "Ocorreu um erro. Por favor, tente novamente."
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "excluir",
+      "BUTTON_TEXT": "Excluir",
       "CONFIRM": {
-        "TITLE": "Confirmar Exclusão",
-        "MESSAGE": "Tem certeza que deseja excluir?",
+        "TITLE": "Confirmar exclusão",
+        "MESSAGE": "Tem certeza que pretende excluir?",
         "YES": "Sim, excluir ",
-        "NO": "Não, Manter "
+        "NO": "Não, manter "
       },
       "API": {
-        "SUCCESS_MESSAGE": "Campanha apagada com sucesso",
-        "ERROR_MESSAGE": "Não foi possível apagar a campanha. Por favor, tente novamente mais tarde."
+        "SUCCESS_MESSAGE": "Campanha excluída com sucesso",
+        "ERROR_MESSAGE": "Não foi possível excluir a campanha. Por favor, tente novamente mais tarde."
       }
     },
     "EDIT": {
-      "TITLE": "Editar a campanha",
+      "TITLE": "Editar campanha",
       "UPDATE_BUTTON_TEXT": "Atualização",
       "API": {
         "SUCCESS_MESSAGE": "Campanha atualizada com sucesso",
-        "ERROR_MESSAGE": "Ocorreu um erro, por favor tente novamente"
+        "ERROR_MESSAGE": "Ocorreu um erro, por favor, tente novamente"
       }
     },
     "LIST": {
       "LOADING_MESSAGE": "A carregar campanhas...",
       "404": "Não há campanhas criadas para esta caixa de entrada.",
       "TABLE_HEADER": {
-        "TITLE": "Nome",
-        "MESSAGE": "Messagem",
-        "INBOX": "Recebidas",
-        "STATUS": "SItuação",
+        "TITLE": "Título",
+        "MESSAGE": "Mensagem",
+        "INBOX": "Caixa de entrada",
+        "STATUS": "Situação",
         "SENDER": "Remetente",
         "URL": "URL",
         "SCHEDULED_AT": "Horário agendado",
@@ -100,11 +100,11 @@
       "BUTTONS": {
         "ADD": "Adicionar",
         "EDIT": "Alterar",
-        "DELETE": "excluir"
+        "DELETE": "Excluir"
       },
       "STATUS": {
         "ENABLED": "Ativado",
-        "DISABLED": "Desabilitado",
+        "DISABLED": "Desativado",
         "COMPLETED": "Concluída",
         "ACTIVE": "Ativa"
       },
@@ -113,14 +113,14 @@
       }
     },
     "ONE_OFF": {
-      "HEADER": "Uma campanha pontual",
+      "HEADER": "Campanhas pontuais",
       "404": "Não há nenhuma campanha pontual criada",
       "INBOXES_NOT_FOUND": "Por favor, crie uma caixa de entrada para SMS e comece a adicionar campanhas"
     },
     "ONGOING": {
-      "HEADER": "Campanhas em andamento",
-      "404": "Não há campanhas em andamento criadas",
-      "INBOXES_NOT_FOUND": "Por favor, crie uma caixa de entrada para o SITE e comece a adicionar campanhas"
+      "HEADER": "Campanhas contínuas",
+      "404": "Não há campanhas contínuas criadas",
+      "INBOXES_NOT_FOUND": "Por favor, crie uma caixa de entrada para o site e comece a adicionar campanhas"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/pt/cannedMgmt.json
index 38d1b298d2346..0f2d68c26b833 100644
--- a/app/javascript/dashboard/i18n/locale/pt/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt/cannedMgmt.json
@@ -1,24 +1,25 @@
 {
   "CANNED_MGMT": {
-    "HEADER": "Respostas Prontas",
+    "HEADER": "Respostas prontas",
+    "LEARN_MORE": "Saber mais sobre respostas prontas",
+    "DESCRIPTION": "Respostas prontas são modelos de resposta pré-escritos que o ajudam a responder rapidamente a uma conversa. Os agentes podem inserir o caractere '/' seguido do código curto para inserir uma resposta pronta durante uma conversa. ",
     "HEADER_BTN_TXT": "Adicionar resposta pronta",
     "LOADING": "A obter respostas prontas...",
-    "SEARCH_404": "Não existem itens correspondentes a esta consulta.",
-    "SIDEBAR_TXT": "<p><b>Respostas Prontas</b> </p><p> Respostas Prontas são modelos de resposta pré-escritos que o ajudam a responder rapidamente a uma conversa. Para inserir uma resposta pronta durante um chat, os agentes podem digitar um pequeno código precedido por um caractere '/'. </p><p> Pode gerir as suas respostas prontas a partir desta página ou criar novas usando o botão \"Adicionar resposta pronta\".</p><p>Abre o <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Manual de Respostas Prontas</a> em outra janela para obter ajuda.</p><p>Além disso, confira a nova <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Biblioteca de Respostas Prontas</a>.</p>",
+    "SEARCH_404": "Não há itens correspondentes a esta consulta.",
     "LIST": {
       "404": "Não há respostas prontas disponíveis nesta conta.",
-      "TITLE": "Gerenciar respostas prontas",
-      "DESC": "Respostas prontas são modelos de resposta pré-definidos, que podem ser usados para enviar respostas rapidamente para conversas.",
+      "TITLE": "Gerir respostas prontas",
+      "DESC": "Respostas prontas são modelos de resposta pré-definidos que podem ser usados para responder mais rapidamente a conversas.",
       "TABLE_HEADER": [
         "Código curto",
         "Conteúdo",
-        "Ações."
+        "Ações"
       ]
     },
     "ADD": {
       "TITLE": "Adicionar resposta pronta",
-      "DESC": "Respostas prontas são modelos de resposta pré-definidos, que podem ser usados para enviar respostas rapidamente para conversas.",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "DESC": "Respostas prontas são modelos de resposta pré-definidos que podem ser usados para responder mais rapidamente a conversas.",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "FORM": {
         "SHORT_CODE": {
           "LABEL": "Código curto",
@@ -26,11 +27,11 @@
           "ERROR": "O código curto é obrigatório."
         },
         "CONTENT": {
-          "LABEL": "Messagem",
-          "PLACEHOLDER": "Por favor escreva a mensagem que deseja salvar como um modelo para usar mais tarde.",
+          "LABEL": "Mensagem",
+          "PLACEHOLDER": "Por favor, escreva a mensagem que pretende guardar como um modelo para usar mais tarde.",
           "ERROR": "Mensagem é um campo obrigatório."
         },
-        "SUBMIT": "submeter"
+        "SUBMIT": "Submeter"
       },
       "API": {
         "SUCCESS_MESSAGE": "Resposta pronta adicionada com sucesso.",
@@ -39,7 +40,7 @@
     },
     "EDIT": {
       "TITLE": "Editar resposta pronta",
-      "CANCEL_BUTTON_TEXT": "cancelar",
+      "CANCEL_BUTTON_TEXT": "Cancelar",
       "FORM": {
         "SHORT_CODE": {
           "LABEL": "Código curto",
@@ -47,28 +48,28 @@
           "ERROR": "Código curto é obrigatório."
         },
         "CONTENT": {
-          "LABEL": "Messagem",
-          "PLACEHOLDER": "Por favor escreva a mensagem que deseja salvar como um modelo para usar mais tarde.",
+          "LABEL": "Mensagem",
+          "PLACEHOLDER": "Por favor, escreva a mensagem que pretende guardar como um modelo para usar mais tarde.",
           "ERROR": "A mensagem é obrigatória."
         },
-        "SUBMIT": "submeter"
+        "SUBMIT": "Submeter"
       },
-      "BUTTON_TEXT": "Alterar",
+      "BUTTON_TEXT": "Editar",
       "API": {
         "SUCCESS_MESSAGE": "Resposta pronta atualizada com sucesso.",
         "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot. Por favor, tente novamente."
       }
     },
     "DELETE": {
-      "BUTTON_TEXT": "excluir",
+      "BUTTON_TEXT": "Excluir",
       "API": {
-        "SUCCESS_MESSAGE": "Resposta pronta apagada com sucesso.",
+        "SUCCESS_MESSAGE": "Resposta pronta excluída com sucesso.",
         "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot. Por favor, tente novamente."
       },
       "CONFIRM": {
-        "TITLE": "Confirmar a eliminação",
-        "MESSAGE": "Tem certeza que deseja excluir ",
-        "YES": "Sim, apagar ",
+        "TITLE": "Confirmar exclusão",
+        "MESSAGE": "Tem a certeza que pretende excluir a resposta pronta ",
+        "YES": "Sim, excluir ",
         "NO": "Não, manter "
       }
     }
diff --git a/app/javascript/dashboard/i18n/locale/pt/chatlist.json b/app/javascript/dashboard/i18n/locale/pt/chatlist.json
index c26e15f117b60..c27f87ef4d22d 100644
--- a/app/javascript/dashboard/i18n/locale/pt/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pt/chatlist.json
@@ -1,7 +1,7 @@
 {
   "CHAT_LIST": {
-    "LOADING": "Buscando conversas",
-    "LOAD_MORE_CONVERSATIONS": "Carregar mais conversas",
+    "LOADING": "A carregar conversas",
+    "LOAD_MORE_CONVERSATIONS": "A carregar mais conversas",
     "EOF": "Todas as conversas carregadas 🎉",
     "LIST": {
       "404": "Não há conversas ativas neste grupo."
@@ -10,7 +10,7 @@
     "MENTION_HEADING": "Menções",
     "UNATTENDED_HEADING": "Por responder",
     "SEARCH": {
-      "INPUT": "Pesquisar pessoas, conversas, respostas salvas .."
+      "INPUT": "Pesquisar pessoas, conversas, respostas guardadas .."
     },
     "FILTER_ALL": "Todas",
     "ASSIGNEE_TYPE_TABS": {
@@ -38,7 +38,7 @@
     "VIEW_FILTER": "Visualizar",
     "SORT_TOOLTIP_LABEL": "Ordenar conversas",
     "CHAT_SORT": {
-      "STATUS": "SItuação",
+      "STATUS": "Situação",
       "ORDER_BY": "Ordenar por"
     },
     "CHAT_TIME_STAMP": {
@@ -53,7 +53,7 @@
     },
     "SORT_ORDER_ITEMS": {
       "last_activity_at_asc": {
-        "TEXT": "Última Atividade: Mais antigos primeiro"
+        "TEXT": "Última Atividade: Mais antigas primeiro"
       },
       "last_activity_at_desc": {
         "TEXT": "Última Atividade: Mais recentes primeiro"
@@ -62,19 +62,19 @@
         "TEXT": "Criado em: Mais recentes primeiro"
       },
       "created_at_asc": {
-        "TEXT": "Criado em: Mais antigos primeiro"
+        "TEXT": "Criado em: Mais antigas primeiro"
       },
       "priority_desc": {
-        "TEXT": "Prioridade: Mais alto primeiro"
+        "TEXT": "Prioridade: Mais alta primeiro"
       },
       "priority_asc": {
-        "TEXT": "Prioridade: Mais baixo primeiro"
+        "TEXT": "Prioridade: Mais baixa primeiro"
       },
       "waiting_since_asc": {
-        "TEXT": "Resposta pendente: Mais longo primeiro"
+        "TEXT": "Resposta pendente: Mais longa primeiro"
       },
       "waiting_since_desc": {
-        "TEXT": "Resposta pendente: Mais curto primeiro"
+        "TEXT": "Resposta pendente: Mais curta primeiro"
       }
     },
     "ATTACHMENTS": {
@@ -88,13 +88,13 @@
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "CONTENT": "Arquivo anexo"
+        "CONTENT": "Carregar anexo"
       },
       "location": {
         "CONTENT": "Local:"
       },
       "fallback": {
-        "CONTENT": "compartilhou uma url"
+        "CONTENT": "partilhou um URL"
       }
     },
     "CHAT_SORT_BY_FILTER": {
@@ -117,15 +117,15 @@
     },
     "RECEIVED_VIA_EMAIL": "Recebido por e-mail",
     "VIEW_TWEET_IN_TWITTER": "Ver mensagem no Twitter",
-    "REPLY_TO_TWEET": "Responder à mensagem",
+    "REPLY_TO_TWEET": "Responder a esta mensagem",
     "LINK_TO_STORY": "Ir para story do instagram",
     "SENT": "Enviado com sucesso",
     "READ": "Lido com sucesso",
     "DELIVERED": "Entregue com sucesso",
-    "NO_MESSAGES": "Nenhuma mensagem",
+    "NO_MESSAGES": "Sem mensagens",
     "NO_CONTENT": "Sem conteúdo disponível",
-    "HIDE_QUOTED_TEXT": "Ocultar Texto Citado",
-    "SHOW_QUOTED_TEXT": "Mostrar Texto Citado",
+    "HIDE_QUOTED_TEXT": "Ocultar texto citado",
+    "SHOW_QUOTED_TEXT": "Mostrar texto citado",
     "MESSAGE_READ": "Lida"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/contact.json b/app/javascript/dashboard/i18n/locale/pt/contact.json
index d614fdbce1f34..d8936471794dd 100644
--- a/app/javascript/dashboard/i18n/locale/pt/contact.json
+++ b/app/javascript/dashboard/i18n/locale/pt/contact.json
@@ -1,115 +1,115 @@
 {
   "CONTACT_PANEL": {
-    "NOT_AVAILABLE": "Não Disponível",
-    "EMAIL_ADDRESS": "Endereço de email",
+    "NOT_AVAILABLE": "Indisponível",
+    "EMAIL_ADDRESS": "Endereço de e-mail",
     "PHONE_NUMBER": "Número de telefone",
     "IDENTIFIER": "Identificador",
     "COPY_SUCCESSFUL": "Copiado para área de transferência com sucesso",
     "COMPANY": "Empresa",
     "LOCATION": "Localização",
-    "BROWSER_LANGUAGE": "Idioma do Navegador",
+    "BROWSER_LANGUAGE": "Idioma do navegador",
     "CONVERSATION_TITLE": "Detalhes da conversa",
-    "VIEW_PROFILE": "Ver Perfil",
+    "VIEW_PROFILE": "Ver perfil",
     "BROWSER": "Navegador",
-    "OS": "Sistema operacional",
+    "OS": "Sistema Operativo",
     "INITIATED_FROM": "Iniciado de",
     "INITIATED_AT": "Iniciado em",
     "IP_ADDRESS": "Endereço IP",
     "CREATED_AT_LABEL": "Criado",
     "NEW_MESSAGE": "Nova mensagem",
     "CONVERSATIONS": {
-      "NO_RECORDS_FOUND": "Não há conversas anteriores associadas a este contato.",
+      "NO_RECORDS_FOUND": "Não há conversas anteriores associadas a este contacto.",
       "TITLE": "Conversas anteriores"
     },
     "LABELS": {
       "CONTACT": {
-        "TITLE": "Etiquetas de Contacto",
-        "ERROR": "Não foi possível atualizar as Etiquetas"
+        "TITLE": "Etiquetas de contacto",
+        "ERROR": "Não foi possível atualizar as etiquetas"
       },
       "CONVERSATION": {
         "TITLE": "Etiquetas da conversa",
-        "ADD_BUTTON": "Adicionar Etiquetas"
+        "ADD_BUTTON": "Adicionar etiquetas"
       },
       "LABEL_SELECT": {
-        "TITLE": "Adicionar Etiquetas",
-        "PLACEHOLDER": "Procurar Etiquetas",
-        "NO_RESULT": "Nenhuma Etiqueta encontrada",
+        "TITLE": "Adicionar etiquetas",
+        "PLACEHOLDER": "Procurar etiquetas",
+        "NO_RESULT": "Nenhuma etiqueta encontrada",
         "CREATE_LABEL": "Criar nova etiqueta"
       }
     },
     "MERGE_CONTACT": "Unir contacto",
     "CONTACT_ACTIONS": "Ações de contacto",
-    "MUTE_CONTACT": "Bloquear Contato",
-    "UNMUTE_CONTACT": "Desbloquear contato",
-    "MUTED_SUCCESS": "Este contato está bloqueado. Não será notificado de nenhuma conversa futura.",
-    "UNMUTED_SUCCESS": "Este contato foi desbloqueado.",
-    "SEND_TRANSCRIPT": "Enviar Transcrição",
-    "EDIT_LABEL": "Alterar",
+    "MUTE_CONTACT": "Bloquear contacto",
+    "UNMUTE_CONTACT": "Desbloquear contacto",
+    "MUTED_SUCCESS": "Este contacto está bloqueado. Não será notificado de nenhuma conversa futura.",
+    "UNMUTED_SUCCESS": "Este contacto foi desbloqueado.",
+    "SEND_TRANSCRIPT": "Enviar transcrição",
+    "EDIT_LABEL": "Editar",
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Atributos personalizados",
-      "CONTACT_LABELS": "Etiquetas de Contacto",
+      "CONTACT_LABELS": "Etiquetas de contacto",
       "PREVIOUS_CONVERSATIONS": "Conversas anteriores",
       "NO_RECORDS_FOUND": "Nenhum atributo encontrado"
     }
   },
   "EDIT_CONTACT": {
-    "BUTTON_LABEL": "Editar Contato",
-    "TITLE": "Editar Contato",
-    "DESC": "Editar detalhes do contato"
+    "BUTTON_LABEL": "Editar contacto",
+    "TITLE": "Editar contacto",
+    "DESC": "Editar detalhes do contacto"
   },
   "CREATE_CONTACT": {
-    "BUTTON_LABEL": "Novo Contato",
+    "BUTTON_LABEL": "Novo contacto",
     "TITLE": "Criar novo contacto",
     "DESC": "Adicionar informações básicas sobre o contacto."
   },
   "IMPORT_CONTACTS": {
     "BUTTON_LABEL": "Importar",
-    "TITLE": "Importar Contactos",
+    "TITLE": "Importar contactos",
     "DESC": "Importar contactos através de um ficheiro CSV.",
     "DOWNLOAD_LABEL": "Descarregar uma amostra CSV.",
     "FORM": {
       "LABEL": "Ficheiro CSV",
       "SUBMIT": "Importar",
-      "CANCEL": "cancelar"
+      "CANCEL": "Cancelar"
     },
     "SUCCESS_MESSAGE": "Será notificado via e-mail quando a importação estiver completa.",
-    "ERROR_MESSAGE": "Ocorreu um erro, por favor tente novamente"
+    "ERROR_MESSAGE": "Ocorreu um erro, por favor, tente novamente"
   },
   "EXPORT_CONTACTS": {
     "BUTTON_LABEL": "Exportar",
     "TITLE": "Exportar contactos",
     "DESC": "Exportar contactos para um ficheiro CSV.",
-    "SUCCESS_MESSAGE": "Export is in progress, You will be notified via email when export file is ready to dowanlod.",
-    "ERROR_MESSAGE": "Ocorreu um erro, por favor tente novamente",
+    "SUCCESS_MESSAGE": "Exportação em progresso. Será notificado via e-mail quando o ficheiro de exportação estiver pronto para descarregar.",
+    "ERROR_MESSAGE": "Ocorreu um erro, por favor, tente novamente",
     "CONFIRM": {
       "TITLE": "Exportar contactos",
       "MESSAGE": "Tem certeza de que deseja exportar todos os contatos?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
-      "YES": "Sim, Exportar",
-      "NO": "Não, Cancelar"
+      "FILTERED_MESSAGE": "Tem certeza que deseja exportar todos os contatos filtrados?",
+      "YES": "Sim, exportar",
+      "NO": "Não, cancelar"
     }
   },
   "DELETE_NOTE": {
     "CONFIRM": {
-      "TITLE": "Confirmar Exclusão",
-      "MESSAGE": "Tem certeza que deseja excluir esta nota?",
+      "TITLE": "Confirmar exclusão",
+      "MESSAGE": "Tem a certeza que pretende excluir esta nota?",
       "YES": "Sim, excluir",
-      "NO": "Não, mantenha isso"
+      "NO": "Não, manter"
     }
   },
   "DELETE_CONTACT": {
-    "BUTTON_LABEL": "Apagar Contacto",
-    "TITLE": "Excluir contato",
+    "BUTTON_LABEL": "Excluir contacto",
+    "TITLE": "Excluir contacto",
     "DESC": "Apagar detalhes do contacto",
     "CONFIRM": {
-      "TITLE": "Confirmar Exclusão",
-      "MESSAGE": "Tem certeza que deseja excluir ",
-      "YES": "Sim, Apagar",
-      "NO": "Não, Manter"
+      "TITLE": "Confirmar exclusão",
+      "MESSAGE": "Tem certeza que pretende excluir ",
+      "YES": "Sim, excluir",
+      "NO": "Não, manter"
     },
     "API": {
-      "SUCCESS_MESSAGE": "Contacto apagado com sucesso",
-      "ERROR_MESSAGE": "Não foi possível apagar o contacto. Por favor tente mais tarde."
+      "SUCCESS_MESSAGE": "Contacto excluído com sucesso",
+      "ERROR_MESSAGE": "Não foi possível excluir o contacto. Por favor, tente mais tarde."
     }
   },
   "CONTACT_FORM": {
@@ -117,41 +117,41 @@
       "SUBMIT": "Submeter",
       "CANCEL": "Cancelar",
       "AVATAR": {
-        "LABEL": "Avatar do Contacto"
+        "LABEL": "Avatar do contacto"
       },
       "NAME": {
-        "PLACEHOLDER": "Digite o nome completo do contato",
-        "LABEL": "Nome Completo"
+        "PLACEHOLDER": "Insira o nome completo do contacto",
+        "LABEL": "Nome completo"
       },
       "BIO": {
-        "PLACEHOLDER": "Digite a biografia do contato",
+        "PLACEHOLDER": "Insira a biografia do contacto",
         "LABEL": "Biografia"
       },
       "EMAIL_ADDRESS": {
-        "PLACEHOLDER": "Digite o endereço de e-mail do contato",
+        "PLACEHOLDER": "Insira o endereço de e-mail do contacto",
         "LABEL": "Endereço de e-mail",
-        "DUPLICATE": "Esse e-mail está a ser utilizado por outro contato.",
+        "DUPLICATE": "O e-mail inserido já está a ser utilizado por outro contacto.",
         "ERROR": "Por favor, insira um endereço de e-mail válido."
       },
       "PHONE_NUMBER": {
-        "PLACEHOLDER": "Digite o número de telefone do contato",
-        "LABEL": "Número de Telefone",
+        "PLACEHOLDER": "Insira o número de telefone do contacto",
+        "LABEL": "Número de telefone",
         "HELP": "O número de telefone deve ter o formato E.164, por exemplo: +1415555555 [+][código do país][código de área] [número de telefone local]",
         "ERROR": "O número de telefone deve estar vazio ou no formato E.164",
-        "DIAL_CODE_ERROR": "Por favor, selecione um código de discagem da lista",
-        "DUPLICATE": "Este número está a ser usado por outro contacto."
+        "DIAL_CODE_ERROR": "Por favor, selecione um código de marcação da lista",
+        "DUPLICATE": "Este número já está a ser usado por outro contacto."
       },
       "LOCATION": {
-        "PLACEHOLDER": "Digite a localização do contato",
-        "LABEL": "Local:"
+        "PLACEHOLDER": "Insira a localização do contacto",
+        "LABEL": "Local"
       },
       "COMPANY_NAME": {
-        "PLACEHOLDER": "Digite o nome da empresa",
+        "PLACEHOLDER": "Insira o nome da empresa",
         "LABEL": "Nome da empresa"
       },
       "COUNTRY": {
         "PLACEHOLDER": "Insira o nome do país",
-        "LABEL": "Nome do País",
+        "LABEL": "Nome do país",
         "SELECT_PLACEHOLDER": "Selecionar",
         "REMOVE": "Excluir",
         "SELECT_COUNTRY": "Selecione o país"
@@ -162,15 +162,15 @@
       },
       "SOCIAL_PROFILES": {
         "FACEBOOK": {
-          "PLACEHOLDER": "Digite o utilizador do Facebook",
+          "PLACEHOLDER": "Insira o nome de utilizador do Facebook",
           "LABEL": "Facebook"
         },
         "TWITTER": {
-          "PLACEHOLDER": "Digite o utilizador do Twitter",
+          "PLACEHOLDER": "Insira o nome de utilizador do Twitter",
           "LABEL": "Twitter"
         },
         "LINKEDIN": {
-          "PLACEHOLDER": "Digite o utilizador do LinkedIn",
+          "PLACEHOLDER": "Insira o nome de utilizador do LinkedIn",
           "LABEL": "LinkedIn"
         },
         "GITHUB": {
@@ -181,24 +181,24 @@
     },
     "DELETE_AVATAR": {
       "API": {
-        "SUCCESS_MESSAGE": "Avatar de contato removido com sucesso",
-        "ERROR_MESSAGE": "Não foi possível remover o avatar do contato. Por favor, tente novamente mais tarde."
+        "SUCCESS_MESSAGE": "Avatar de contacto removido com sucesso",
+        "ERROR_MESSAGE": "Não foi possível remover o avatar do contacto. Por favor, tente novamente mais tarde."
       }
     },
-    "SUCCESS_MESSAGE": "Contato guardado com sucesso",
-    "ERROR_MESSAGE": "Ocorreu um erro, por favor tente novamente"
+    "SUCCESS_MESSAGE": "Contacto guardado com sucesso",
+    "ERROR_MESSAGE": "Ocorreu um erro, por favor, tente novamente"
   },
   "NEW_CONVERSATION": {
     "BUTTON_LABEL": "Iniciar conversa",
     "TITLE": "Nova conversa",
-    "DESC": "Começar uma conversa enviando uma mensagem.",
-    "NO_INBOX": "Não foi possível encontrar uma caixa de entrada para começar uma conversa com este contato.",
+    "DESC": "Começar uma conversa através do envio de uma mensagem.",
+    "NO_INBOX": "Não foi possível encontrar uma caixa de entrada para iniciar uma conversa com este contacto.",
     "FORM": {
       "TO": {
         "LABEL": "Para"
       },
       "INBOX": {
-        "LABEL": "Caixa de Entrada",
+        "LABEL": "Via caixa de entrada",
         "PLACEHOLDER": "Selecionar caixa de entrada",
         "ERROR": "Selecione uma caixa de entrada"
       },
@@ -208,13 +208,13 @@
         "ERROR": "O assunto não pode estar vazio"
       },
       "MESSAGE": {
-        "LABEL": "Messagem",
+        "LABEL": "Mensagem",
         "PLACEHOLDER": "Escreva aqui a sua mensagem",
         "ERROR": "A mensagem não pode estar vazia"
       },
       "ATTACHMENTS": {
-        "SELECT": "Selecionar arquivos",
-        "HELP_TEXT": "Arraste e solte arquivos aqui ou escolha arquivos para anexar"
+        "SELECT": "Selecionar ficheiros",
+        "HELP_TEXT": "Arraste e solte ficheiros aqui ou escolha ficheiros para anexar"
       },
       "SUBMIT": "Enviar mensagem",
       "CANCEL": "Cancelar",
@@ -225,7 +225,7 @@
   },
   "CONTACTS_PAGE": {
     "HEADER": "Contactos",
-    "FIELDS": "Campos do contato",
+    "FIELDS": "Campos do contacto",
     "SEARCH_BUTTON": "Procurar",
     "SEARCH_INPUT_PLACEHOLDER": "Pesquisar por contactos",
     "FILTER_CONTACTS": "Filtro",
@@ -237,14 +237,14 @@
       "404": "Nenhum contacto corresponde à sua pesquisa 🔍",
       "NO_CONTACTS": "Não há contactos disponíveis",
       "TABLE_HEADER": {
-        "NAME": "Nome:",
+        "NAME": "Nome",
         "PHONE_NUMBER": "Número de telefone",
         "CONVERSATIONS": "Conversas",
         "LAST_ACTIVITY": "Última atividade",
-        "CREATED_AT": "Criado Em",
+        "CREATED_AT": "Criado em",
         "COUNTRY": "País",
         "CITY": "Cidade",
-        "SOCIAL_PROFILES": "Perfis Redes Sociais",
+        "SOCIAL_PROFILES": "Perfis das redes sociais",
         "COMPANY": "Empresa",
         "EMAIL_ADDRESS": "Endereço de e-mail"
       },
@@ -266,21 +266,21 @@
     }
   },
   "NOTES": {
-    "FETCHING_NOTES": "Buscando notas...",
+    "FETCHING_NOTES": "A procurar notas...",
     "NOT_AVAILABLE": "Não há notas criadas para este contacto",
     "HEADER": {
-      "TITLE": "Observações"
+      "TITLE": "Notas"
     },
     "LIST": {
-      "LABEL": "adicionado uma anotação"
+      "LABEL": "Nota adicionada"
     },
     "ADD": {
       "BUTTON": "Adicionar",
-      "PLACEHOLDER": "Adicionar observação",
-      "TITLE": "Shift + Enter para criar uma observação"
+      "PLACEHOLDER": "Adicionar nota",
+      "TITLE": "Shift + Enter para criar uma nota"
     },
     "CONTENT_HEADER": {
-      "DELETE": "Apagar anotação"
+      "DELETE": "Apagar nota"
     }
   },
   "EVENTS": {
@@ -288,9 +288,9 @@
       "TITLE": "Atividades"
     },
     "BUTTON": {
-      "PILL_BUTTON_NOTES": "Observações",
+      "PILL_BUTTON_NOTES": "Notas",
       "PILL_BUTTON_EVENTS": "Eventos",
-      "PILL_BUTTON_CONVO": "conversas"
+      "PILL_BUTTON_CONVO": "Conversas"
     }
   },
   "CUSTOM_ATTRIBUTES": {
@@ -307,11 +307,11 @@
     },
     "ADD": {
       "TITLE": "Criar atributo personalizado",
-      "DESC": "Adicionar informação personalizada a este contato."
+      "DESC": "Adicionar informação personalizada a este contacto."
     },
     "FORM": {
       "CREATE": "Adicionar atributo",
-      "CANCEL": "cancelar",
+      "CANCEL": "Cancelar",
       "NAME": {
         "LABEL": "Nome do atributo personalizado",
         "PLACEHOLDER": "Por exemplo: ID shopify",
@@ -319,7 +319,7 @@
       },
       "VALUE": {
         "LABEL": "Valor do atributo",
-        "PLACEHOLDER": "Eg: 11901 "
+        "PLACEHOLDER": "Por exemplo: 11901 "
       },
       "ADD": {
         "TITLE": "Criar novo atributo ",
@@ -328,11 +328,11 @@
       },
       "UPDATE": {
         "SUCCESS": "Atributo atualizado com sucesso",
-        "ERROR": "Não foi possível atualizar o atributo. Por favor tente mais tarde"
+        "ERROR": "Não foi possível atualizar o atributo. Por favor, tente mais tarde"
       },
       "DELETE": {
         "SUCCESS": "Atributo apagado com sucesso",
-        "ERROR": "Não foi possível apagar o atributo. Por favor tente mais tarde"
+        "ERROR": "Não foi possível apagar o atributo. Por favor, tente mais tarde"
       },
       "ATTRIBUTE_SELECT": {
         "TITLE": "Adicionar atributos",
@@ -341,46 +341,49 @@
       },
       "ATTRIBUTE_TYPE": {
         "LIST": {
-          "PLACEHOLDER": "Selecione valor",
+          "PLACEHOLDER": "Selecione o valor",
           "SEARCH_INPUT_PLACEHOLDER": "Pesquisar valor",
           "NO_RESULT": "Nenhum resultado encontrado"
         }
       }
     },
     "VALIDATIONS": {
-      "REQUIRED": "Valor válido é obrigatório",
-      "INVALID_URL": "URL Inválido",
+      "REQUIRED": "É obrigatório um valor válido",
+      "INVALID_URL": "URL inválido",
       "INVALID_INPUT": "Entrada inválida"
     }
   },
   "MERGE_CONTACTS": {
     "TITLE": "Unir contactos",
-    "DESCRIPTION": "Unir contatos para combinar dois perfis em um, incluindo todos os atributos e conversas. Em caso de conflito, os atributos do contacto Principal terão prioridade.",
+    "DESCRIPTION": "Unir contactos para combinar dois perfis num, incluindo todos os atributos e conversas. Em caso de conflito, os atributos do contacto principal terão prioridade.",
     "PRIMARY": {
-      "TITLE": "Contato principal",
+      "TITLE": "Contacto principal",
       "HELP_LABEL": "Para ser apagado"
     },
     "PARENT": {
-      "TITLE": "Contato para juntar",
+      "TITLE": "Contacto para juntar",
       "PLACEHOLDER": "Pesquisar por um contacto",
       "HELP_LABEL": "Para ser mantido"
     },
     "SUMMARY": {
       "TITLE": "Sumário",
       "DELETE_WARNING": "Contacto de <strong>%{primaryContactName}</strong> será apagado.",
-      "ATTRIBUTE_WARNING": "Detalhes do contato do <strong>%{primaryContactName}</strong> serão copiados para <strong>%{parentContactName}</strong>."
+      "ATTRIBUTE_WARNING": "Detalhes do contacto do <strong>%{primaryContactName}</strong> serão copiados para <strong>%{parentContactName}</strong>."
     },
     "SEARCH": {
-      "ERROR": "MENSSAGEM_ERRO"
+      "ERROR": "MENSAGEM_ERRO"
     },
     "FORM": {
       "SUBMIT": " Unir contactos",
-      "CANCEL": "cancelar",
+      "CANCEL": "Cancelar",
       "CHILD_CONTACT": {
-        "ERROR": "Escolher um contato filho para juntar"
+        "ERROR": "Escolher um contacto filho para juntar"
       },
-      "SUCCESS_MESSAGE": "Contato unido com sucesso",
-      "ERROR_MESSAGE": "Não foi possível unir os contactos, tente novamente!"
+      "SUCCESS_MESSAGE": "Contacto unido com sucesso",
+      "ERROR_MESSAGE": "Não foi possível unir os contactos, por favor, tente novamente!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/contactFilters.json b/app/javascript/dashboard/i18n/locale/pt/contactFilters.json
index 82be843c2b337..c01b58cff3376 100644
--- a/app/javascript/dashboard/i18n/locale/pt/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/pt/contactFilters.json
@@ -1,16 +1,16 @@
 {
   "CONTACTS_FILTER": {
-    "TITLE": "Filtrar Contactos",
-    "SUBTITLE": "Adicionar filtros abaixo e clicar 'Submeter' para filtrar contactos.",
+    "TITLE": "Filtrar contactos",
+    "SUBTITLE": "Adicione filtros, abaixo, e clique em 'Submeter' para filtrar contactos.",
     "EDIT_CUSTOM_SEGMENT": "Editar segmento",
-    "CUSTOM_VIEWS_SUBTITLE": "Adicione ou remova filtros e atualiza seu segmento.",
-    "ADD_NEW_FILTER": "Adicionar Filtro",
-    "CLEAR_ALL_FILTERS": "Limpar Todos os Filtros",
-    "FILTER_DELETE_ERROR": "Você deve ter pelo menos um filtro para guardar",
-    "SUBMIT_BUTTON_LABEL": "submeter",
-    "UPDATE_BUTTON_LABEL": "Atualizar Segmento",
-    "CANCEL_BUTTON_LABEL": "cancelar",
-    "CLEAR_BUTTON_LABEL": "Limpar Filtros",
+    "CUSTOM_VIEWS_SUBTITLE": "Adicione ou remova filtros e atualize o seu segmento.",
+    "ADD_NEW_FILTER": "Adicionar filtro",
+    "CLEAR_ALL_FILTERS": "Limpar todos os filtros",
+    "FILTER_DELETE_ERROR": "Deve ter, pelo menos, um filtro para guardar",
+    "SUBMIT_BUTTON_LABEL": "Submeter",
+    "UPDATE_BUTTON_LABEL": "Atualizar segmento",
+    "CANCEL_BUTTON_LABEL": "Cancelar",
+    "CLEAR_BUTTON_LABEL": "Limpar filtros",
     "EMPTY_VALUE_ERROR": "Valor obrigatório",
     "SEGMENT_LABEL": "Nome do segmento",
     "SEGMENT_QUERY_LABEL": "Consulta de segmento",
@@ -31,8 +31,8 @@
       "days_before": "É x dias antes"
     },
     "ATTRIBUTES": {
-      "NAME": "Nome:",
-      "EMAIL": "e-mail",
+      "NAME": "Nome",
+      "EMAIL": "E-mail",
       "PHONE_NUMBER": "Número de telefone",
       "IDENTIFIER": "Identificador",
       "CITY": "Cidade",
@@ -41,15 +41,15 @@
       "CUSTOM_ATTRIBUTE_TEXT": "Texto",
       "CUSTOM_ATTRIBUTE_NUMBER": "Número",
       "CUSTOM_ATTRIBUTE_LINK": "Endereço",
-      "CUSTOM_ATTRIBUTE_CHECKBOX": "Caixa de Seleção",
-      "CREATED_AT": "Criado Em",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Caixa de seleção",
+      "CREATED_AT": "Criado em",
       "LAST_ACTIVITY": "Última atividade",
       "REFERER_LINK": "Link de referência",
       "BLOCKED": "Bloqueado"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Filtros Padrão",
-      "ADDITIONAL_FILTERS": "Filtros Adicionais",
+      "STANDARD_FILTERS": "Filtros padrão",
+      "ADDITIONAL_FILTERS": "Filtros adicionais",
       "CUSTOM_ATTRIBUTES": "Atributos personalizados"
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/pt/conversation.json b/app/javascript/dashboard/i18n/locale/pt/conversation.json
index de2b2e2a51288..73da76bb4d31e 100644
--- a/app/javascript/dashboard/i18n/locale/pt/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt/conversation.json
@@ -2,15 +2,15 @@
   "CONVERSATION": {
     "SELECT_A_CONVERSATION": "Por favor, selecione uma conversa no painel da esquerda",
     "CSAT_REPLY_MESSAGE": "Por favor, avalie a conversa",
-    "404": "Desculpe, não encontramos a conversa. Por favor, tente novamente",
+    "404": "Desculpe, não encontrámos a conversa. Por favor, tente novamente",
     "SWITCH_VIEW_LAYOUT": "Alternar o layout",
     "DASHBOARD_APP_TAB_MESSAGES": "Mensagens",
     "UNVERIFIED_SESSION": "A identidade deste utilizador não foi verificada",
-    "NO_MESSAGE_1": "Oh oh! Parece que não há mensagens de clientes na sua caixa de entrada.",
-    "NO_MESSAGE_2": " para enviar uma mensagem para sua página!",
-    "NO_INBOX_1": "Hola! Parece que você não adicionou nenhuma caixa de entrada ainda.",
+    "NO_MESSAGE_1": "Não há mensagens de clientes na sua caixa de entrada.",
+    "NO_MESSAGE_2": " para enviar uma mensagem para a sua página!",
+    "NO_INBOX_1": "Ainda não adicionou nenhuma caixa de entrada.",
     "NO_INBOX_2": " para começar",
-    "NO_INBOX_AGENT": "Uh Oh! Parece que você não faz parte de nenhuma caixa de entrada. Por favor, contate seu administrador",
+    "NO_INBOX_AGENT": "Não faz parte de nenhuma caixa de entrada. Por favor, contacte o administrador",
     "SEARCH_MESSAGES": "Procurar mensagens em conversas",
     "EMPTY_STATE": {
       "CMD_BAR": "para abrir o menu de comandos",
@@ -19,52 +19,52 @@
     "SEARCH": {
       "TITLE": "Procurar mensagens",
       "RESULT_TITLE": "Resultados da pesquisa",
-      "LOADING_MESSAGE": "Preparando os dados...",
-      "PLACEHOLDER": "Digite qualquer texto para procurar mensagens",
+      "LOADING_MESSAGE": "A preparar os dados...",
+      "PLACEHOLDER": "Insira qualquer texto para procurar mensagens",
       "NO_MATCHING_RESULTS": "Nenhum resultado encontrado."
     },
     "UNREAD_MESSAGES": "Mensagens por ler",
     "UNREAD_MESSAGE": "Mensagens por ler",
     "CLICK_HERE": "Clique aqui",
-    "LOADING_INBOXES": "Carregando caixas de entrada",
-    "LOADING_CONVERSATIONS": "Carregando conversas",
+    "LOADING_INBOXES": "A carregar caixas de entrada",
+    "LOADING_CONVERSATIONS": "A carregar conversas",
     "CANNOT_REPLY": "Não pode responder porque",
     "24_HOURS_WINDOW": "Mensagens bloqueadas durante 24 horas",
     "NOT_ASSIGNED_TO_YOU": "Esta conversa não está atribuída a si. Gostaria de atribuir esta conversa a si mesmo?",
     "ASSIGN_TO_ME": "Atribuir a mim",
-    "TWILIO_WHATSAPP_CAN_REPLY": "Só pode responder, utilizando uma mensagem modelo, porque",
+    "TWILIO_WHATSAPP_CAN_REPLY": "Só pode responder utilizando uma mensagem modelo, porque",
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "Mensagens bloqueadas durante 24 horas",
     "REPLYING_TO": "Está a responder a:",
     "REMOVE_SELECTION": "Remover seleção",
-    "DOWNLOAD": "BAIXAR",
-    "UNKNOWN_FILE_TYPE": "Arquivo Desconhecido",
-    "SAVE_CONTACT": "Salvar",
-    "UPLOADING_ATTACHMENTS": "Carregando anexos...",
+    "DOWNLOAD": "Descarregar",
+    "UNKNOWN_FILE_TYPE": "Ficheiro desconhecido",
+    "SAVE_CONTACT": "Guardar",
+    "UPLOADING_ATTACHMENTS": "A carregar anexos...",
     "REPLIED_TO_STORY": "Respondeu à sua história",
     "UNSUPPORTED_MESSAGE": "Esta mensagem não é suportada.",
     "UNSUPPORTED_MESSAGE_FACEBOOK": "Esta mensagem não é suportada. Pode ver esta mensagem na app Facebook Messenger.",
     "UNSUPPORTED_MESSAGE_INSTAGRAM": "Esta mensagem não é suportada. Pode ver esta mensagem na app do Instagram.",
     "SUCCESS_DELETE_MESSAGE": "Mensagem apagada com sucesso",
-    "FAIL_DELETE_MESSSAGE": "Não foi possível apagar a mensagem! Tente novamente",
+    "FAIL_DELETE_MESSSAGE": "Não foi possível apagar a mensagem! Por favor, tente novamente",
     "NO_RESPONSE": "Sem resposta",
     "RATING_TITLE": "Avaliar",
-    "FEEDBACK_TITLE": "Opiniões",
+    "FEEDBACK_TITLE": "Comentários",
     "REPLY_MESSAGE_NOT_FOUND": "Mensagem indisponível",
     "CARD": {
       "SHOW_LABELS": "Mostrar etiquetas",
-      "HIDE_LABELS": "Ocultar os etiquetas"
+      "HIDE_LABELS": "Ocultar etiquetas"
     },
     "HEADER": {
       "RESOLVE_ACTION": "Resolver",
       "REOPEN_ACTION": "Reabrir",
       "OPEN_ACTION": "Abertas",
-      "OPEN": "MAIS",
-      "CLOSE": "FECHAR",
+      "OPEN": "Mais",
+      "CLOSE": "Fechar",
       "DETAILS": "Detalhes",
       "SNOOZED_UNTIL": "Suspender até",
-      "SNOOZED_UNTIL_TOMORROW": "Adiado até amanhã",
+      "SNOOZED_UNTIL_TOMORROW": "Adiada até amanhã",
       "SNOOZED_UNTIL_NEXT_WEEK": "Adiada até a próxima semana",
-      "SNOOZED_UNTIL_NEXT_REPLY": "Adiado até à próxima resposta",
+      "SNOOZED_UNTIL_NEXT_REPLY": "Adiada até à próxima resposta",
       "SLA_STATUS": {
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
@@ -86,7 +86,7 @@
     "CUSTOM_SNOOZE": {
       "TITLE": "Suspender até",
       "APPLY": "Adiar",
-      "CANCEL": "cancelar"
+      "CANCEL": "Cancelar"
     },
     "PRIORITY": {
       "TITLE": "Prioridade",
@@ -102,7 +102,7 @@
         "INPUT_PLACEHOLDER": "Selecione a prioridade",
         "NO_RESULTS": "Nenhum resultado encontrado",
         "SUCCESSFUL": "Alterar a prioridade da conversa com o id %{conversationId} para %{priority}",
-        "FAILED": "Não foi possível alterar a prioridade, por favor tente novamente."
+        "FAILED": "Não foi possível alterar a prioridade, por favor, tente novamente."
       }
     },
     "CARD_CONTEXT_MENU": {
@@ -118,8 +118,8 @@
       },
       "ASSIGN_AGENT": "Atribuir agente",
       "ASSIGN_LABEL": "Atribuir etiqueta",
-      "AGENTS_LOADING": "Carregando agentes...",
-      "ASSIGN_TEAM": "Atribuir equipe",
+      "AGENTS_LOADING": "A carregar agentes...",
+      "ASSIGN_TEAM": "Atribuir equipa",
       "API": {
         "AGENT_ASSIGNMENT": {
           "SUCCESFUL": "Conversa com ID %{conversationId} atribuída a \"%{agentName}\"",
@@ -130,25 +130,26 @@
           "FAILED": "Não foi possível atribuir etiqueta. Por favor, tente novamente."
         },
         "TEAM_ASSIGNMENT": {
-          "SUCCESFUL": "Equipe \"%{team}\" atribuída  a conversa de ID %{conversationId}",
-          "FAILED": "Não foi possível atribuir equipe. Por favor, tente novamente."
+          "SUCCESFUL": "Equipa \"%{team}\" atribuída  a conversa de ID %{conversationId}",
+          "FAILED": "Não foi possível atribuir equipa. Por favor, tente novamente."
         }
       }
     },
     "FOOTER": {
       "MESSAGE_SIGN_TOOLTIP": "Assinatura da mensagem",
-      "ENABLE_SIGN_TOOLTIP": "Habilitar assinatura",
+      "ENABLE_SIGN_TOOLTIP": "Ativar assinatura",
       "DISABLE_SIGN_TOOLTIP": "Desativar assinatura",
-      "MSG_INPUT": "Shift + enter para nova linha. Comece com '/' para selecionar uma Resposta Pronta.",
-      "PRIVATE_MSG_INPUT": "Shift + Enter para a nova linha. Isto será visível apenas para Agentes",
-      "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Assinatura da mensagem não está configurada. Por favor, configure-a nas configurações do perfil.",
-      "CLICK_HERE": "Clique aqui para atualizar"
+      "MSG_INPUT": "Shift + Enter para nova linha. Comece com '/' para selecionar uma Resposta Pronta.",
+      "PRIVATE_MSG_INPUT": "Shift + Enter para nova linha. Esta mensagem apenas será visível para agentes",
+      "MESSAGE_SIGNATURE_NOT_CONFIGURED": "A assinatura da mensagem não está configurada. Por favor, configure-a nas configurações do perfil.",
+      "CLICK_HERE": "Clique aqui para atualizar",
+      "WHATSAPP_TEMPLATES": "Template do WhatsApp"
     },
     "REPLYBOX": {
       "REPLY": "Responder",
       "PRIVATE_NOTE": "Nota Privada",
-      "SEND": "Mandar",
-      "CREATE": "Adicionar Nota",
+      "SEND": "Enviar",
+      "CREATE": "Adicionar nota",
       "INSERT_READ_MORE": "Ler mais",
       "DISMISS_REPLY": "Descartar resposta",
       "REPLYING_TO": "Em resposta a:",
@@ -163,83 +164,83 @@
       "STOP_AUDIO_RECORDING": "Parar gravação de áudio",
       "": "",
       "EMAIL_HEAD": {
-        "TO": "Para",
-        "ADD_BCC": "Adicionar bcc",
+        "TO": "PARA",
+        "ADD_BCC": "Adicionar Bcc",
         "CC": {
-          "LABEL": "CC",
-          "PLACEHOLDER": "Emails separados por vírgulas",
-          "ERROR": "Por favor, digite endereços de e-mail válidos"
+          "LABEL": "Cc",
+          "PLACEHOLDER": "E-mails separados por vírgulas",
+          "ERROR": "Por favor, insira endereços de e-mail válidos"
         },
         "BCC": {
           "LABEL": "Bcc",
-          "PLACEHOLDER": "Emails separados por vírgulas",
-          "ERROR": "Por favor, digite endereços de e-mail válidos"
+          "PLACEHOLDER": "E-mails separados por vírgulas",
+          "ERROR": "Por favor, insira endereços de e-mail válidos"
         }
       },
       "UNDEFINED_VARIABLES": {
         "TITLE": "Variáveis indefinidas",
-        "MESSAGE": "Você tem {undefinedVariablesCount} variáveis indefinidas em sua mensagem: {undefinedVariables}. Você gostaria de enviar a mensagem mesmo assim?",
+        "MESSAGE": "Tem {undefinedVariablesCount} variáveis indefinidas na sua mensagem: {undefinedVariables}. Pretende enviar a mensagem mesmo assim?",
         "CONFIRM": {
           "YES": "Enviar",
-          "CANCEL": "cancelar"
+          "CANCEL": "Cancelar"
         }
       }
     },
-    "VISIBLE_TO_AGENTS": "Nota Privada: Apenas visível para você e sua equipe",
+    "VISIBLE_TO_AGENTS": "Nota Privada: Apenas visível para si e para a sua equipa",
     "CHANGE_STATUS": "Estado da conversa alterado",
-    "CHANGE_STATUS_FAILED": "Mudança de status da conversa falhou",
+    "CHANGE_STATUS_FAILED": "A mudança de estado da conversa falhou",
     "CHANGE_AGENT": "Responsável da conversa alterado",
     "CHANGE_AGENT_FAILED": "Falha na alteração da atribuição",
     "ASSIGN_LABEL_SUCCESFUL": "Etiqueta atribuída com sucesso",
     "ASSIGN_LABEL_FAILED": "Falha na atribuição de etiqueta",
-    "CHANGE_TEAM": "Equipa de conversação alterada",
-    "FILE_SIZE_LIMIT": "O arquivo excede o limite para anexos de {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB",
+    "CHANGE_TEAM": "Equipa da conversa alterada",
+    "FILE_SIZE_LIMIT": "O ficheiro excede o tamanho limite para anexos de {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB",
     "MESSAGE_ERROR": "Não foi possível enviar esta mensagem, por favor, tente novamente mais tarde",
     "SENT_BY": "Enviado por:",
     "BOT": "Bot",
     "SEND_FAILED": "Não foi possível enviar a mensagem! Tente novamente",
-    "TRY_AGAIN": "tentar novamente",
+    "TRY_AGAIN": "Tentar novamente",
     "ASSIGNMENT": {
-      "SELECT_AGENT": "Escolher Agente",
+      "SELECT_AGENT": "Escolher agente",
       "REMOVE": "Excluir",
       "ASSIGN": "Atribuir"
     },
     "CONTEXT_MENU": {
       "COPY": "Copiar",
       "REPLY_TO": "Responder a esta mensagem",
-      "DELETE": "excluir",
+      "DELETE": "Excluir",
       "CREATE_A_CANNED_RESPONSE": "Adicionar às respostas prontas",
       "TRANSLATE": "Traduzir",
       "COPY_PERMALINK": "Copiar link para a mensagem",
-      "LINK_COPIED": "URL da mensagem copiada para a área de transferência",
+      "LINK_COPIED": "URL da mensagem copiado para a área de transferência",
       "DELETE_CONFIRMATION": {
         "TITLE": "Tem a certeza que pretende apagar esta mensagem?",
         "MESSAGE": "Esta ação é irreversível",
-        "DELETE": "excluir",
-        "CANCEL": "cancelar"
+        "DELETE": "Excluir",
+        "CANCEL": "Cancelar"
       }
     }
   },
   "EMAIL_TRANSCRIPT": {
     "TITLE": "Enviar transcrição da conversa",
-    "DESC": "Enviar uma cópia da transcrição da conversa para o endereço de email especificado",
-    "SUBMIT": "submeter",
-    "CANCEL": "cancelar",
-    "SEND_EMAIL_SUCCESS": "A transcrição do chat foi enviada com sucesso",
-    "SEND_EMAIL_ERROR": "Ocorreu um erro, por favor tente novamente",
+    "DESC": "Envia uma cópia da transcrição da conversa para o endereço de e-mail especificado",
+    "SUBMIT": "Submeter",
+    "CANCEL": "Cancelar",
+    "SEND_EMAIL_SUCCESS": "A transcrição da conversa foi enviada com sucesso",
+    "SEND_EMAIL_ERROR": "Ocorreu um erro, por favor, tente novamente",
     "FORM": {
-      "SEND_TO_CONTACT": "Envie a transcrição ao cliente",
+      "SEND_TO_CONTACT": "Enviar a transcrição ao cliente",
       "SEND_TO_AGENT": "Enviar a transcrição para o agente atribuído",
-      "SEND_TO_OTHER_EMAIL_ADDRESS": "Enviar a transcrição para outro endereço de email",
+      "SEND_TO_OTHER_EMAIL_ADDRESS": "Enviar a transcrição para outro endereço de e-mail",
       "EMAIL": {
-        "PLACEHOLDER": "Digite um endereço de email",
+        "PLACEHOLDER": "Insira um endereço de e-mail",
         "ERROR": "Por favor, insira um endereço de e-mail válido"
       }
     }
   },
   "ONBOARDING": {
-    "TITLE": "Olá, 👋. Bem-vindo ao %{installationName}!",
-    "DESCRIPTION": "Obrigado por se inscrever. Queremos que aproveite ao máximo o sistema %{installationName}. Aqui estão algumas coisas que pode fazer no %{installationName} para tornar a sua experiência ainda mais agradável.",
+    "TITLE": "Olá 👋. Bem-vindo ao %{installationName}!",
+    "DESCRIPTION": "Obrigado por se registar. Queremos que aproveite ao máximo o sistema %{installationName}. Aqui estão algumas coisas que pode fazer no %{installationName} para tornar a sua experiência ainda mais agradável.",
     "READ_LATEST_UPDATES": "Ler as últimas atualizações",
     "ALL_CONVERSATION": {
       "TITLE": "Todas as suas conversas num único lugar",
@@ -247,17 +248,17 @@
     },
     "TEAM_MEMBERS": {
       "TITLE": "Convidar os membros da sua equipa",
-      "DESCRIPTION": "Já que se prepara para começar a conversar com o seu cliente, convide também os seus colegas para o ajudar. Pode adicionar colegas de equipa acrescentando os seus endereço de e-mail na lista de agentes.",
+      "DESCRIPTION": "Já que se prepara para começar a conversar com o seu cliente, convide também os seus colegas para o ajudar. Pode adicionar colegas de equipa acrescentando os seus endereços de e-mail à lista de agentes.",
       "NEW_LINK": "Clique aqui para convidar um membro para a equipa"
     },
     "INBOXES": {
-      "TITLE": "Ligar caixas de entrada",
-      "DESCRIPTION": "Ligue vários canais através dos quais os seus clientes podem conversar consigo. Pode ser um site, um chat ao vivo, um página do Facebook do Twitter ou até mesmo o seu número do WhatsApp.",
+      "TITLE": "Conectar caixas de entrada",
+      "DESCRIPTION": "Conecte vários canais através dos quais os seus clientes podem conversar consigo. Pode ser um site, um chat ao vivo, um página do Facebook do Twitter ou até mesmo o seu número do WhatsApp.",
       "NEW_LINK": "Clique aqui para criar uma caixa de entrada"
     },
     "LABELS": {
       "TITLE": "Organizar conversas com etiquetas",
-      "DESCRIPTION": "As Etiquetas permitem-lhe facilmente categorizar as suas conversas. Crie etiquetas como #suporte, #faturacao etc., para que depois as possa utilizar mais tarde numa conversa.",
+      "DESCRIPTION": "As etiquetas permitem-lhe categorizar facilmente as suas conversas. Crie etiquetas como #suporte, #faturacao, etc., para que as possa utilizar, mais tarde, numa conversa.",
       "NEW_LINK": "Clique aqui para criar etiquetas"
     }
   },
@@ -269,11 +270,11 @@
       "PLACEHOLDER": "Nenhuma"
     },
     "ACCORDION": {
-      "CONTACT_DETAILS": "Detalhes do Contacto",
-      "CONVERSATION_ACTIONS": "Ações de Conversa",
+      "CONTACT_DETAILS": "Detalhes do contacto",
+      "CONVERSATION_ACTIONS": "Ações de conversa",
       "CONVERSATION_LABELS": "Etiquetas da conversa",
       "CONVERSATION_INFO": "Informação da conversa",
-      "CONTACT_ATTRIBUTES": "Atributos do Contato",
+      "CONTACT_ATTRIBUTES": "Atributos do contacto",
       "PREVIOUS_CONVERSATION": "Conversas anteriores",
       "MACROS": "Macros"
     }
@@ -283,7 +284,7 @@
     "NO_RECORDS_FOUND": "Nenhum atributo encontrado",
     "UPDATE": {
       "SUCCESS": "Atributo atualizado com sucesso",
-      "ERROR": "Não foi possível atualizar o atributo. Por favor tente mais tarde"
+      "ERROR": "Não foi possível atualizar o atributo. Por favor, tente mais tarde"
     },
     "ADD": {
       "TITLE": "Adicionar",
@@ -292,7 +293,7 @@
     },
     "DELETE": {
       "SUCCESS": "Atributo apagado com sucesso",
-      "ERROR": "Não foi possível apagar o atributo. Por favor tente mais tarde"
+      "ERROR": "Não foi possível apagar o atributo. Por favor, tente mais tarde"
     },
     "ATTRIBUTE_SELECT": {
       "TITLE": "Adicionar atributos",
@@ -303,32 +304,32 @@
   "EMAIL_HEADER": {
     "FROM": "De",
     "TO": "Para",
-    "BCC": "BCC",
+    "BCC": "Bcc",
     "CC": "Cc",
     "SUBJECT": "Assunto"
   },
   "CONVERSATION_PARTICIPANTS": {
-    "SIDEBAR_MENU_TITLE": "Participando",
+    "SIDEBAR_MENU_TITLE": "A participar",
     "SIDEBAR_TITLE": "Participantes da conversa",
     "NO_RECORDS_FOUND": "Nenhum resultado encontrado",
     "ADD_PARTICIPANTS": "Selecionar participantes",
     "REMANING_PARTICIPANTS_TEXT": "+%{count} outros",
     "REMANING_PARTICIPANT_TEXT": "+%{count} outro",
-    "TOTAL_PARTICIPANTS_TEXT": "%{count} pessoas estão participando.",
-    "TOTAL_PARTICIPANT_TEXT": "%{count} pessoa está participando.",
-    "NO_PARTICIPANTS_TEXT": "Ninguém está participando!",
-    "WATCH_CONVERSATION": "Junte-se a conversa",
-    "YOU_ARE_WATCHING": "Você está participando",
+    "TOTAL_PARTICIPANTS_TEXT": "%{count} pessoas estão a participar.",
+    "TOTAL_PARTICIPANT_TEXT": "%{count} pessoa está a participar.",
+    "NO_PARTICIPANTS_TEXT": "Ninguém está a participar!",
+    "WATCH_CONVERSATION": "Junte-se à conversa",
+    "YOU_ARE_WATCHING": "Está a participar",
     "API": {
-      "ERROR_MESSAGE": "Não foi possível atualizar, tente novamente!",
+      "ERROR_MESSAGE": "Não foi possível atualizar, por favor, tente novamente!",
       "SUCCESS_MESSAGE": "Participantes atualizados!"
     }
   },
   "TRANSLATE_MODAL": {
     "TITLE": "Ver conteúdo traduzido",
-    "DESC": "Você pode visualizar o conteúdo traduzido em cada idioma.",
-    "ORIGINAL_CONTENT": "Conteúdo Original",
-    "TRANSLATED_CONTENT": "Conteúdo Traduzido",
+    "DESC": "Pode visualizar o conteúdo traduzido em cada linguagem.",
+    "ORIGINAL_CONTENT": "Conteúdo original",
+    "TRANSLATED_CONTENT": "Conteúdo traduzido",
     "NO_TRANSLATIONS_AVAILABLE": "Nenhuma tradução está disponível para este conteúdo"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/datePicker.json b/app/javascript/dashboard/i18n/locale/pt/datePicker.json
index 501ba2bd1557d..f193922f4a5f2 100644
--- a/app/javascript/dashboard/i18n/locale/pt/datePicker.json
+++ b/app/javascript/dashboard/i18n/locale/pt/datePicker.json
@@ -3,8 +3,8 @@
     "APPLY_BUTTON": "Confirmar",
     "CLEAR_BUTTON": "Limpar",
     "DATE_RANGE_INPUT": {
-      "START": "Data Inicial",
-      "END": "Data Final"
+      "START": "Data inicial",
+      "END": "Data final"
     },
     "DATE_RANGE_OPTIONS": {
       "TITLE": "Intervalo de datas",
diff --git a/app/javascript/dashboard/i18n/locale/pt/general.json b/app/javascript/dashboard/i18n/locale/pt/general.json
index 0cd2faabc55c8..4c5b9608bed29 100644
--- a/app/javascript/dashboard/i18n/locale/pt/general.json
+++ b/app/javascript/dashboard/i18n/locale/pt/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "A mostrar {firstIndex}-{lastIndex} de {totalCount} itens"
+    "SHOWING_RESULTS": "A mostrar {firstIndex}-{lastIndex} de {totalCount} itens",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Procurar",
+      "EMPTY_STATE": "Nenhum resultado encontrado"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/generalSettings.json b/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
index 741f85f3fdc32..fc067cdb6d759 100644
--- a/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
@@ -29,17 +29,17 @@
         "ERROR": ""
       },
       "DOMAIN": {
-        "LABEL": "Email recebido do domínio",
+        "LABEL": "E-mail recebido do domínio",
         "PLACEHOLDER": "O domínio onde irá receber os emails",
         "ERROR": ""
       },
       "SUPPORT_EMAIL": {
-        "LABEL": "E-mail de Suporte",
+        "LABEL": "E-mail de suporte",
         "PLACEHOLDER": "E-mail de suporte da sua empresa",
         "ERROR": ""
       },
       "AUTO_RESOLVE_DURATION": {
-        "LABEL": "Número de dias sem nenhuma atividade, após os quais, o ticket se auto-resolve",
+        "LABEL": "Número de dias sem nenhuma atividade, após os quais o ticket se auto-resolve",
         "PLACEHOLDER": "30",
         "ERROR": "Por favor, informe um período de resolução automática válido (mínimo de 1 dia e máximo de 999 dias)"
       },
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Ausente"
+      "OFFLINE": "Ausente",
+      "RECONNECTING": "A reconectar...",
+      "RECONNECT_SUCCESS": "Reconectado"
     },
     "BUTTON": {
       "REFRESH": "Atualizar"
@@ -107,7 +109,7 @@
       "GENERAL": "Geral",
       "REPORTS": "relatórios",
       "CONVERSATION": "Conversa",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "Ações em massa",
       "CHANGE_ASSIGNEE": "Alterar Responsável",
       "CHANGE_PRIORITY": "Alterar Prioridade",
       "CHANGE_TEAM": "Alterar Equipa",
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Até amanhã",
       "UNTIL_NEXT_MONTH": "Até ao mês seguinte",
       "AN_HOUR_FROM_NOW": "Até daqui a uma hora",
-      "CUSTOM": "Personalizar...",
+      "UNTIL_CUSTOM_TIME": "Personalizar...",
       "CHANGE_APPEARANCE": "Alterar Aspeto",
       "LIGHT_MODE": "Claro",
       "DARK_MODE": "Escuro",
diff --git a/app/javascript/dashboard/i18n/locale/pt/helpCenter.json b/app/javascript/dashboard/i18n/locale/pt/helpCenter.json
index 390f548d19226..062ef762cdb65 100644
--- a/app/javascript/dashboard/i18n/locale/pt/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/pt/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Use o portal como um CMS com frameworks de front-end externos usando as nossas APIs."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/pt/inboxMgmt.json
index 718e66d62d1f4..3aad38f58b81b 100644
--- a/app/javascript/dashboard/i18n/locale/pt/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Caixas de Entrada",
     "SIDEBAR_TXT": "<p><b>Caixa de entrada</b></p> <p> Ao ligar um site ou uma página do Facebook ao Chatwoot, ela passa a ser chamada de <b>caixa de entrada</b>. Pode ter caixas de entrada ilimitadas na sua conta de Chatwoot. </p><p> Clique em <b>Adicionar caixa de entrada</b> para ligar um site ou uma página do Facebook. </p><p> No Painel, pode ver todas as conversas de todas as suas caixas de entrada num único lugar e responder a elas utilizando o separado `Conversas`. </p><p> Também pode ver conversas específicas de uma determinada caixa de entrada clicando no nome dessa caixa no lado esquerdo do painel lateral. </p>",
+    "RECONNECTION_REQUIRED": "A sua caixa de entrada está desligada. Não serão recebidas novas mensagens até nova autorização.",
+    "CLICK_TO_RECONNECT": "Clique aqui para voltar a ligar.",
     "LIST": {
       "404": "Não há caixas de entrada anexadas a esta conta."
     },
@@ -22,7 +24,7 @@
         "body": "Adicionar agentes à caixa de entrada criada."
       },
       {
-        "title": "Voilà!",
+        "title": "Por Fim!",
         "route": "settings_inbox_finish",
         "body": "Está tudo pronto para começar!"
       }
@@ -43,7 +45,7 @@
         "CHOOSE_PLACEHOLDER": "Escolher uma página da lista",
         "INBOX_NAME": "Nome Caixa de Entrada",
         "ADD_NAME": "Escolha um nome para a sua caixa de entrada",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Selecione um Nome para a sua Caixa de Entrada",
         "PICK_A_VALUE": "Escolha um valor"
       },
       "TWITTER": {
@@ -62,7 +64,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "URL do Webhook",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Introduza o seu URL Webhook",
           "ERROR": "Por favor, insira uma URL válida"
         },
         "CHANNEL_DOMAIN": {
@@ -175,12 +177,12 @@
           },
           "API_KEY": {
             "LABEL": "Chave da API",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Por favor, insira a palavra passe da API Bandwidth",
             "ERROR": "Este campo é obrigatório"
           },
           "API_SECRET": {
             "LABEL": "API Secret",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Por favor, insira a palavra passe da API Bandwidth",
             "ERROR": "Este campo é obrigatório"
           },
           "APPLICATION_ID": {
@@ -239,7 +241,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Webhook de Verificação de Token",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "Digite um token de verificação que deseja configurar para webhooks do Facebook.",
           "ERROR": "Por favor, insira um valor válido."
         },
         "API_KEY": {
@@ -269,7 +271,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "URL do Webhook",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Configurar a URL onde quer receber mensagens de retorno.",
           "PLACEHOLDER": "URL do Webhook"
         },
         "SUBMIT_BUTTON": "Criar canal API",
@@ -279,7 +281,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Canal de e-mail",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Integre a sua caixa de entrada de e-mail.",
         "CHANNEL_NAME": {
           "LABEL": "Nome do Canal",
           "PLACEHOLDER": "Por favor, insira um nome de canal",
@@ -345,7 +347,7 @@
       "AGENTS": {
         "TITLE": "agentes",
         "DESC": "Aqui você pode adicionar agentes para gerenciar a sua caixa de entrada recém-criada. Apenas esses agentes selecionados terão acesso à sua caixa de entrada. Agentes que não fazem parte desta caixa de entrada não serão capazes de ver ou responder a mensagens nesta caixa de entrada quando eles acessarem. <br> <b>PS:</b> como administrador, se precisar de acesso a todas as caixas de entrada, você deve se adicionar como agente em todas as caixas de entrada que você criar.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Adicione pelo menos um agente à sua nova caixa de entrada",
         "PICK_AGENTS": "Escolha os agentes da caixa de entrada"
       },
       "DETAILS": {
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Para começar, clique no botão Entrar com a Microsoft. Será redirecionado para o e-mail que entrar na página. Depois de aceitar as permissões solicitadas, será redirecionado novamente para a etapa de criação da caixa de entrada.",
         "EMAIL_PLACEHOLDER": "Insira endereço de email",
+        "SIGN_IN": "Entrar via Microsoft",
         "HELP": "Para adicionar a sua conta da Microsoft como um canal, é necessário autenticar a sua conta da Microsoft clicando em 'Entrar com Microsoft' ",
         "ERROR_MESSAGE": "Ocorreu um erro ao ligar à Microsoft, por favor tente novamente"
       }
@@ -406,7 +409,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Nome do remetente",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Selecione o nome a apresentar aos seus clientes quando ele receber emails dos seus agentes.",
         "FOR_EG": "Por exemplo:",
         "FRIENDLY": {
           "TITLE": "Amigável",
@@ -508,7 +511,7 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Permitir mensagens após a resolução da conversa",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Permite que os utilizadores finais enviem mensagens após a conversa estar resolvida.",
       "WHATSAPP_SECTION_SUBHEADER": "Esta chave de API é usada para a integração com as APIs do WhatsApp.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Escreva a nova chave de integração com as APIs do WhatsApp.",
       "WHATSAPP_SECTION_TITLE": "Chave da API",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Atualizar Chave de API",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Digite a nova chave da API aqui",
@@ -585,7 +588,7 @@
       "NOTE_TEXT": "Para ativar o SMTP, por favor configure o IMAP.",
       "UPDATE": "Atualizar configurações IMAP",
       "TOGGLE_AVAILABILITY": "Ativar a configuração IMAP para esta caixa de entrada",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "Habilitar o SMTP irá ajudar o utilizador a enviar email",
       "EDIT": {
         "SUCCESS_MESSAGE": "Configurações IMAP atualizadas com sucesso",
         "ERROR_MESSAGE": "Não foi possível atualizar as configurações do IMAP"
diff --git a/app/javascript/dashboard/i18n/locale/pt/integrations.json b/app/javascript/dashboard/i18n/locale/pt/integrations.json
index eb53fc9e891d1..7b7422478b889 100644
--- a/app/javascript/dashboard/i18n/locale/pt/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/pt/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrações",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Eventos Inscritos",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Adicionar nova dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps permite que as organizações incorporem uma aplicação dentro do dashboard do Chatwoot para fornecer o contexto aos agentes de suporte ao cliente. Este recurso permite-lhe criar uma aplicação independente e incorporá-la dentro do dashboard para fornecer informações de utilizador, os seus pedidos ou seu histórico de pagamentos.</p><p>Quando a sua aplicação é incorporada usando o dashboard do Chatwoot, a sua aplicação irá obter o contexto da conversa e do contato como um evento de janela. Implemente um listener para o evento de mensagem na sua página para receber o contexto.</p><p>Para adicionar um novo aplicativo ao dashboard, clique no botão 'Adicionar nova dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps permite que as organizações incorporem um aplicação dentro do dashboard do Chatwoot para fornecer o contexto aos agentes de suporte ao cliente. Este recurso permite-lhe criar uma aplicação independente e incorporá-la dentro do dashboard para fornecer informações de utilizador, os seus pedidos ou seu histórico de pagamentos.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Não há dashboard apps configuradas nesta conta.",
         "LOADING": "A obter dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "App dashboard apagada",
         "API_ERROR": "Não foi possível apagar a app. Por favor, tente novamente mais tarde"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Criar/Vincular Problema Linear",
+      "LOADING": "A procurar problemas lineares...",
+      "LOADING_ERROR": "Houve um erro ao procurar problemas lineares, por favor, tente novamente",
+      "CREATE": "Criar",
+      "LINK": {
+        "SEARCH": "Pesquisar problemas",
+        "SELECT": "Selecionar problema",
+        "TITLE": "Endereço",
+        "EMPTY_LIST": "Nenhum problema linear encontrado",
+        "LOADING": "A carregar",
+        "ERROR": "Houve um erro ao procurar problemas lineares, por favor, tente novamente",
+        "LINK_SUCCESS": "Problema vinculado com sucesso",
+        "LINK_ERROR": "Houve um erro ao vincular o problema, por favor, tente novamente",
+        "LINK_TITLE": "Conversa (#%{conversationId}) com %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Criar/Vincular Problema Linear",
+        "DESCRIPTION": "Crie problemas lineares das conversas, ou vincule as existentes para um rastreamento sem interrupções.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Nome",
+            "PLACEHOLDER": "Digitar nome",
+            "REQUIRED_ERROR": "Nome é obrigatório"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Descrição",
+            "PLACEHOLDER": "Digitar descrição"
+          },
+          "TEAM": {
+            "LABEL": "Equipa",
+            "PLACEHOLDER": "Escolher equipa",
+            "SEARCH": "Procurar equipa",
+            "REQUIRED_ERROR": "Equipa é obrigatória"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Atribuído",
+            "PLACEHOLDER": "Selecionar responsável",
+            "SEARCH": "Pesquisar responsável"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioridade",
+            "PLACEHOLDER": "Selecione a prioridade",
+            "SEARCH": "Procurar prioridade"
+          },
+          "LABEL": {
+            "LABEL": "Etiqueta",
+            "PLACEHOLDER": "Selecionar etiqueta",
+            "SEARCH": "Procurar etiqueta"
+          },
+          "STATUS": {
+            "LABEL": "Situação",
+            "PLACEHOLDER": "Selecionar estado",
+            "SEARCH": "Procurar estado"
+          },
+          "PROJECT": {
+            "LABEL": "Projeto",
+            "PLACEHOLDER": "Selecionar projeto",
+            "SEARCH": "Procurar projeto"
+          }
+        },
+        "CREATE": "Criar",
+        "CANCEL": "Cancelar",
+        "CREATE_SUCCESS": "Problema criado com sucesso",
+        "CREATE_ERROR": "Houve um erro ao criar o problema, por favor, tente novamente",
+        "LOADING_TEAM_ERROR": "Houve um erro ao obter as equipas, por favor, tente novamente",
+        "LOADING_TEAM_ENTITIES_ERROR": "Houve um erro ao obter as entidades das equipas, por favor, tente novamente"
+      },
+      "ISSUE": {
+        "STATUS": "Situação",
+        "PRIORITY": "Prioridade",
+        "ASSIGNEE": "Atribuído",
+        "LABELS": "Etiquetas",
+        "CREATED_AT": "Criado a %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Desvincular",
+        "SUCCESS": "Problema desvinculado com sucesso",
+        "ERROR": "Houve um erro ao desvincular o problema, por favor, tente novamente"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/pt/labelsMgmt.json
index 231f32775d261..921f4ca394cf9 100644
--- a/app/javascript/dashboard/i18n/locale/pt/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiquetas",
     "HEADER_BTN_TXT": "Adicionar Etiqueta",
     "LOADING": "Buscando etiquetas",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Não existem itens correspondentes a esta consulta",
-    "SIDEBAR_TXT": "<p><b>Etiquetas</b> <p>As etiquetas o ajudam a categorizar as conversas e a priorizá-las. Você pode atribuir a etiqueta a uma conversa a partir do painel lateral. <br /><br />As etiquetas estão vinculadas à conta e podem ser usadas para criar fluxos de trabalho personalizados em sua organização. Você pode atribuir uma cor personalizada para uma etiqueta, facilitando a identificação da etiqueta. Você será capaz de exibir o rótulo na barra lateral para filtrar as conversas facilmente.</p>",
     "LIST": {
       "404": "Não há etiquetas disponíveis nesta conta.",
       "TITLE": "Gerir etiquetas",
@@ -49,7 +50,8 @@
       "DISMISS": "Descartar",
       "ADD_SELECTED_LABELS": "Adicionar etiquetas selecionadas",
       "ADD_SELECTED_LABEL": "Adicionar etiqueta selecionada",
-      "ADD_ALL_LABELS": "Adicionar todas as etiquetas"
+      "ADD_ALL_LABELS": "Adicionar todas as etiquetas",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Adicionar Etiqueta",
diff --git a/app/javascript/dashboard/i18n/locale/pt/macros.json b/app/javascript/dashboard/i18n/locale/pt/macros.json
index 9576ccaf09882..cbe0a001aa82f 100644
--- a/app/javascript/dashboard/i18n/locale/pt/macros.json
+++ b/app/javascript/dashboard/i18n/locale/pt/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Executar",
       "PREVIEW": "Pré-visualizar Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executada com sucesso"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "A chave do atributo é necessária",
+      "FILTER_OPERATOR_REQUIRED": "Operador do filtro é necessário",
+      "VALUE_REQUIRED": "Valor obrigatório",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "O valor deve ser entre 1 e 998",
+      "ACTION_PARAMETERS_REQUIRED": "Os parâmetros de ação são obrigatórios",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "Pelo menos uma condição é obrigatória",
+      "ATLEAST_ONE_ACTION_REQUIRED": "Pelo menos uma ação é obrigatória"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/report.json b/app/javascript/dashboard/i18n/locale/pt/report.json
index fb9ae47acd295..a761b380a7090 100644
--- a/app/javascript/dashboard/i18n/locale/pt/report.json
+++ b/app/javascript/dashboard/i18n/locale/pt/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Tráfego de conversa",
       "NO_CONVERSATIONS": "Não existem conversas",
       "CONVERSATION": "%{count} conversa",
-      "CONVERSATIONS": "%{count} conversas"
+      "CONVERSATIONS": "%{count} conversas",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversas por agentes",
@@ -536,6 +537,7 @@
       "LABELS": "Etiqueta",
       "TEAMS": "Equipa"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/pt/resetPassword.json b/app/javascript/dashboard/i18n/locale/pt/resetPassword.json
index d084ba0e45570..a842a0795ab8a 100644
--- a/app/javascript/dashboard/i18n/locale/pt/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/pt/resetPassword.json
@@ -1,17 +1,17 @@
 {
   "RESET_PASSWORD": {
-    "TITLE": "Redefinir senha",
-    "DESCRIPTION": "Escreva o endereço de e-mail que usa para aceder ao ChatWoot para obter as instruções de redefinição da senha.",
+    "TITLE": "Redefinir palavra-passe",
+    "DESCRIPTION": "Escreva o endereço de e-mail que usa para aceder ao Wiseteam para obter as instruções de redefinição da palavra-passe.",
     "GO_BACK_TO_LOGIN": "Se pretende voltar à página de acesso,",
     "EMAIL": {
-      "LABEL": "e-mail",
-      "PLACEHOLDER": "Por favor, digite seu e-mail.",
+      "LABEL": "E-mail",
+      "PLACEHOLDER": "Por favor, digite o seu e-mail.",
       "ERROR": "Por favor, digite um e-mail válido."
     },
     "API": {
-      "SUCCESS_MESSAGE": "Link para redefinir a senha foi enviado para seu e-mail.",
+      "SUCCESS_MESSAGE": "O link para redefinir a palavra-passe foi enviado para o seu e-mail.",
       "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot. Por favor, tente novamente."
     },
-    "SUBMIT": "submeter"
+    "SUBMIT": "Submeter"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt/search.json b/app/javascript/dashboard/i18n/locale/pt/search.json
index 118cc0cd101ac..0c57141b9cf0d 100644
--- a/app/javascript/dashboard/i18n/locale/pt/search.json
+++ b/app/javascript/dashboard/i18n/locale/pt/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversas",
       "MESSAGES": "Mensagens"
     },
+    "SEARCHING_DATA": "A pesquisar",
     "EMPTY_STATE": "Não foi encontrado %{item} para a consulta '%{query}'",
     "EMPTY_STATE_FULL": "Nenhum resultado encontrado para a consulta '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ para focar",
diff --git a/app/javascript/dashboard/i18n/locale/pt/settings.json b/app/javascript/dashboard/i18n/locale/pt/settings.json
index c872daa58e739..c06a8b070ab82 100644
--- a/app/javascript/dashboard/i18n/locale/pt/settings.json
+++ b/app/javascript/dashboard/i18n/locale/pt/settings.json
@@ -10,7 +10,7 @@
     "PASSWORD_UPDATE_SUCCESS": "Sua senha foi alterada com sucesso",
     "AFTER_EMAIL_CHANGED": "Seu perfil foi atualizado com sucesso, faça o login novamente pois suas credenciais foram alteradas",
     "FORM": {
-      "PICTURE": "Profile Picture",
+      "PICTURE": "Imagem de perfil",
       "AVATAR": "Imagem do perfil",
       "ERROR": "Por favor, corrigir erros de formulário",
       "REMOVE_IMAGE": "Excluir",
@@ -65,11 +65,11 @@
         "NOTE": "Ativar notificações de som no painel quando surgirem novas mensagens e conversas.",
         "ALERT_TYPES": {
           "NONE": "Nenhuma",
-          "MINE": "Assigned",
+          "MINE": "Atribuída",
           "ALL": "Todas"
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Eventos de alerta para conversas:",
           "NONE": "Nenhuma",
           "ASSIGNED": "Conversas atribuídas",
           "ALL_CONVERSATIONS": "Todas as conversas"
@@ -96,21 +96,21 @@
         "SLA_MISSED_RESOLUTION": "Enviar notificações por email quando uma conversa falhar a SLA de resolução"
       },
       "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
+        "TITLE": "Preferências de notificação",
+        "TYPE_TITLE": "Tipo de notificação",
         "EMAIL": "e-mail",
-        "PUSH": "Push notification",
+        "PUSH": "Notificações Push",
         "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
-          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
-          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
-          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
-          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
-          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
+          "CONVERSATION_CREATED": "Nova conversa criada",
+          "CONVERSATION_ASSIGNED": "Foi-lhe atribuída uma conversa",
+          "CONVERSATION_MENTION": "Foi mencionado numa conversa",
+          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Foi criada uma nova mensagem numa conversa que lhe está atribuída",
+          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Foi criada uma nova mensagem numa conversa em que está a participar",
+          "SLA_MISSED_FIRST_RESPONSE": "Uma conversa perdeu a primeira resposta SLA",
+          "SLA_MISSED_NEXT_RESPONSE": "Uma conversa perdeu a a próxima resposta SLA",
+          "SLA_MISSED_RESOLUTION": "Uma conversa falhou a SLA de resolução"
         },
-        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
+        "BROWSER_PERMISSION": "Ative as notificações Push do seu navegador para que as possa receber"
       },
       "API": {
         "UPDATE_SUCCESS": "As suas preferências de notificação foram atualizadas com sucesso",
@@ -239,6 +239,7 @@
     "REPORTS": "relatórios",
     "SETTINGS": "Configurações",
     "CONTACTS": "Contactos",
+    "CAPTAIN": "Captain",
     "HOME": "Principal",
     "AGENTS": "Agentes",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Visão geral",
-    "FACEBOOK_REAUTHORIZE": "A sua ligação ao Facebook caducou, volte a ligar a página para poder continuar a utilizar os serviços",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Centro de Suporte",
       "ALL_ARTICLES": "Todos os Artigos",
diff --git a/app/javascript/dashboard/i18n/locale/pt/teamsSettings.json b/app/javascript/dashboard/i18n/locale/pt/teamsSettings.json
index 6a697fbcd62f4..ceae300c40911 100644
--- a/app/javascript/dashboard/i18n/locale/pt/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Criar nova equipa",
     "HEADER": "Equipas",
-    "SIDEBAR_TXT": "<p><b>Equipas</b></p> <p>Equipas permite que você organize os seus agentes em grupos baseados nas suas responsabilidades. <br /> Um agente pode fazer parte de várias equipas. Você pode atribuir conversas a uma equipa quando estiverem a trabalhar colaborativamente. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Não há equipas configuradas para esta conta.",
-      "EDIT_TEAM": "Editar equipa"
+      "EDIT_TEAM": "Editar equipa",
+      "NONE": "Nenhuma"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Não foi possível apagar a equipa. Tente novamente."
       },
       "CONFIRM": {
-        "TITLE": "Tem a certeza que quer apagar a equipa - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Por favor, digite {teamName} para confirmar",
         "MESSAGE": "Ao apagar a equipa irá remover a atribuição de novas conversas a essa equipa.",
         "YES": "excluir ",
diff --git a/app/javascript/dashboard/i18n/locale/pt/whatsappTemplates.json b/app/javascript/dashboard/i18n/locale/pt/whatsappTemplates.json
index 946b6f6bea981..626f289beb28d 100644
--- a/app/javascript/dashboard/i18n/locale/pt/whatsappTemplates.json
+++ b/app/javascript/dashboard/i18n/locale/pt/whatsappTemplates.json
@@ -1,7 +1,7 @@
 {
     "WHATSAPP_TEMPLATES": {
         "MODAL": {
-            "TITLE": "Template do Whatsapp",
+            "TITLE": "Template do WhatsApp",
             "SUBTITLE": "Selecione o template do whatsapp que você deseja enviar",
             "TEMPLATE_SELECTED_SUBTITLE": "Processo %{templateName}"
         },
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/advancedFilters.json b/app/javascript/dashboard/i18n/locale/pt_BR/advancedFilters.json
index 34d11e23b6fc2..dd33da9abed49 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "E",
       "OR": "OU"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Igual a",
       "not_equal_to": "Diferente",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json b/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json
index 4ddf9a6bf2b89..4d5797c72bb05 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agentes",
     "HEADER_BTN_TXT": "Adicionar Agente",
     "LOADING": "Buscando lista de agente",
-    "SIDEBAR_TXT": "<p><b>Agentes</b></p> <p> Um <b>Agente</b> é um membro da sua equipe de Suporte ao Cliente. </p><p> Os agentes serão capazes de ver e responder as mensagens dos seus usuários. A lista mostra todos os agentes atualmente em sua conta. </p><p> Clique em <b>Adicionar Agente</b> para adicionar um novo agente. O agente que você adicionar receberá um e-mail com um link de confirmação para ativar sua conta, para acessar o Chatwoot e responder às mensagens. </p><p> O acesso aos recursos do Chatwoot são baseados nas seguintes funções. </p><p> <b>Agentes</b> - Agentes com essa função só podem acessar caixas de entrada, relatórios e conversas. Eles podem atribuir conversas a outros agentes ou a eles próprios e resolver conversas.</p><p> <b>Administrador</b> - Administrador terá acesso a todos os recursos do Chatwoot ativados para sua conta, incluindo configurações e todos os privilégios de agentes normais.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrador",
       "AGENT": "Agente"
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json b/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json
index 0dd0a58333d80..0b2622c1a1d92 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Registros de Auditoria",
     "HEADER_BTN_TXT": "Adicionar Registros de Auditoria",
     "LOADING": "Buscando Logs de Auditoria",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Não existem itens correspondentes a esta consulta",
     "SIDEBAR_TXT": "<p><b>Registros de Auditoria</b> </p><p> Registros de Auditoria são trilhas para eventos e ações em um Sistema Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} Convidou %{invitee} para sua conta como %{role}",
       "EDIT": {
         "SELF": "%{agentName} Alterado de %{attributes} para %{values}",
-        "OTHER": "%{agentName} Alterado %{attributes} por %{user} para %{values}"
+        "OTHER": "%{agentName} Alterado %{attributes} por %{user} para %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/automation.json b/app/javascript/dashboard/i18n/locale/pt_BR/automation.json
index 57d5c2243119b..a42f62cc10c06 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/automation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Você precisa ter pelo menos uma ação para salvar",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Escreva sua mensagem aqui",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Selecione o time"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Selecione o time",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Ativar regra de automação",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Enviando...",
       "LABEL_UPLOADED": "Upload feito com sucesso",
       "LABEL_UPLOAD_FAILED": "Faha no envio"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Valor obrigatório",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/bulkActions.json b/app/javascript/dashboard/i18n/locale/pt_BR/bulkActions.json
index 129b55bc2d90e..6a3201e39c0e0 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Voltar atrás",
     "ASSIGN_LABEL": "Atribua",
     "YES": "Sim",
+    "SEARCH_INPUT_PLACEHOLDER": "Pesquisar",
     "ASSIGN_AGENT_TOOLTIP": "Atribuir Agente",
     "ASSIGN_TEAM_TOOLTIP": "Atribuir equipe",
     "ASSIGN_SUCCESFUL": "Conversas atribuídas com sucesso.",
@@ -33,7 +34,7 @@
       "NONE": "Nenhuma",
       "NO_TEAMS_AVAILABLE": "Ainda não há equipes adicionadas a esta conta ainda.",
       "ASSIGN_SELECTED_TEAMS": "Atribuir equipe selecionada.",
-      "ASSIGN_SUCCESFUL": "Equipes atribuídos com sucesso.",
+      "ASSIGN_SUCCESFUL": "Times atribuídos com sucesso.",
       "ASSIGN_FAILED": "Falha ao atribuir equipe. Por favor, tente novamente."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/pt_BR/cannedMgmt.json
index e14a449e8b001..91aacdbd417f7 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Atalhos",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Adicionar resposta pronta",
     "LOADING": "Buscando respostas prontas...",
     "SEARCH_404": "Não existem itens correspondentes a esta consulta.",
-    "SIDEBAR_TXT": "<p><b>Respostas Prontas</b></p> <p>As Respostas Prontas são modelos de respostas predefinidas que ajudam você a responder rapidamente a uma conversa. Para inserir uma resposta pronta durante um chat, os agentes podem digitar um código curto precedido por uma barra '/'.</p> <p>Você pode gerenciar suas respostas prontas desta página ou criar novas usando o botão \"Adicionar resposta pronta\".</p> <p>Abra o <a target=\"_blank\" ref=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Manual de Respostas Prontas</a> em outra aba para obter ajuda.</p> <p>Além disso, confira a nova <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" \n arget=\"_blank\">Biblioteca de Respostas Prontas</a>.</p>",
     "LIST": {
       "404": "Não há atalhos disponíveis nesta conta.",
       "TITLE": "Gerenciar Atalhos",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json b/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
index 28d7542ee4f62..f40326ff2368b 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
@@ -53,7 +53,7 @@
     },
     "SORT_ORDER_ITEMS": {
       "last_activity_at_asc": {
-        "TEXT": ""
+        "TEXT": "Última atividade: Mais antigas primeiro"
       },
       "last_activity_at_desc": {
         "TEXT": "Última atividade: Recentes primeiro"
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/contact.json b/app/javascript/dashboard/i18n/locale/pt_BR/contact.json
index 3c6fe33f4291f..0489ce371c656 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/contact.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contato mesclado com sucesso",
       "ERROR_MESSAGE": "Não foi possível mesclar contatos, tente novamente!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
index b01043431b006..ff4350519eb5b 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter para nova linha. Digite '/' para atalhos.",
       "PRIVATE_MSG_INPUT": "A mensagem será visível apenas para agentes",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "A assinatura da mensagem não está configurada. Por favor, configure-a nas configurações do perfil.",
-      "CLICK_HERE": "Clique aqui para atualizar"
+      "CLICK_HERE": "Clique aqui para atualizar",
+      "WHATSAPP_TEMPLATES": "Templates do Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Responder",
@@ -328,7 +329,7 @@
     "TITLE": "Ver conteúdo traduzido",
     "DESC": "Você pode visualizar o conteúdo traduzido em cada idioma.",
     "ORIGINAL_CONTENT": "Conteúdo original",
-    "TRANSLATED_CONTENT": "Conteúdo Traduzido",
+    "TRANSLATED_CONTENT": "Conteúdo traduzido",
     "NO_TRANSLATIONS_AVAILABLE": "Nenhuma tradução está disponível para este conteúdo"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/general.json b/app/javascript/dashboard/i18n/locale/pt_BR/general.json
index 172ec48d119df..69b1703e91b39 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/general.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Mostrando {firstIndex}—{lastIndex} de {totalCount} itens"
+    "SHOWING_RESULTS": "Mostrando {firstIndex}—{lastIndex} de {totalCount} itens",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Pesquisar",
+      "EMPTY_STATE": "Nenhum resultado encontrado"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json b/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json
index fda625c219168..9f2e01550d906 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Desconectado"
+      "OFFLINE": "Desconectado",
+      "RECONNECTING": "Reconectando...",
+      "RECONNECT_SUCCESS": "Reconectado"
     },
     "BUTTON": {
       "REFRESH": "Atualizar"
@@ -107,7 +109,7 @@
       "GENERAL": "Geral",
       "REPORTS": "Relatórios",
       "CONVERSATION": "Conversas",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "Ações em massa",
       "CHANGE_ASSIGNEE": "Alterar Responsável",
       "CHANGE_PRIORITY": "Alterar Prioridade",
       "CHANGE_TEAM": "Alterar a Equipe",
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Até amanhã",
       "UNTIL_NEXT_MONTH": "Até o próximo mês",
       "AN_HOUR_FROM_NOW": "Até daqui a uma hora",
-      "CUSTOM": "Personalizar...",
+      "UNTIL_CUSTOM_TIME": "Personalizar...",
       "CHANGE_APPEARANCE": "Alterar Tema",
       "LIGHT_MODE": "Claro",
       "DARK_MODE": "Escuro",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json b/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json
index 70eb8f75f4fca..36b75ef368733 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Use o portal como um CMS sem interface gráfica com frameworks front-end de terceiros usando nossas APIs."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json
index cd49825d7f6ba..c84a4493dc578 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Caixas de Entrada",
     "SIDEBAR_TXT": "<p><b>Caixa de entrada</b></p> <p> Quando você conectar um site ou uma página de Facebook ao Chatwoot, é chamado de <b>caixa de entrada</b>. Você pode ter caixas de entrada ilimitadas na sua conta de Chatwoot. </p><p> Clique em <b>Adicionar caixa de entrada</b> para conectar um site ou uma página do Facebook. </p><p> No Painel, você pode ver todas as conversas de todas as suas caixas de entrada em um único lugar e responder a elas sob a guia `Conversations`. </p><p> Você também pode ver conversas específicas para uma caixa de entrada clicando no nome da caixa de entrada no painel esquerdo do painel. </p>",
+    "RECONNECTION_REQUIRED": "Sua caixa de entrada está desconectada. Você não receberá novas mensagens até reautorizar.",
+    "CLICK_TO_RECONNECT": "Clique aqui para reconectar.",
     "LIST": {
       "404": "Não há caixas de entrada anexadas a esta conta."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Clique no botão Entrar com a Microsoft para começar. Você será redirecionado para o login do e-mail. Após aceitar as permissões solicitadas, você será redirecionado de volta para a etapa de criação da caixa de entrada.",
         "EMAIL_PLACEHOLDER": "Digite o endereço de e-mail",
+        "SIGN_IN": "Entre com uma conta Microsoft",
         "HELP": "Para adicionar sua conta da Microsoft como um canal, você precisa autenticar em sua conta clicando em 'Entrar com a Microsoft' ",
         "ERROR_MESSAGE": "Ocorreu um erro ao conectar com a Microsoft, por favor, tente novamente"
       }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json b/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json
index 93a7c691f6efd..808e6674efa32 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrações",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Eventos Inscritos",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Adicionar um novo app da dashboard",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps permite que as organizações incorporem um aplicativo dentro da dashboard do Chatwoot para fornecer o contexto para agentes de suporte ao cliente. Este recurso permite-lhe criar uma aplicação independente e incorporá-la dentro da dashboard para fornecer informações do usuário, seus pedidos ou seu histórico de pagamentos anteriores.</p><p>Quando você incorpora seu aplicativo usando a dashboard do Chatwoot, sua aplicação irá obter o contexto da conversa e entrar em contato como um evento de janela. Implementar um ouvinte para o evento de mensagem em sua página receber o contexto.</p><p>Para adicionar um novo aplicativo da dashboard, clique no botão 'Adicionar um novo aplicativo da dashboard'.</p>",
       "DESCRIPTION": "Aplicativos da dashboard permitem que organizações incorporem um aplicativo dentro do painel para fornecer o contexto para agentes de suporte ao cliente. Este recurso permite que você crie uma aplicação independente e incorpore para fornecer informações de usuário, seus pedidos ou seu histórico de pagamentos anteriores.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Ainda não há aplicativos da dashboard nesta conta",
         "LOADING": "Buscando aplicativos da dashboard...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Aplicativo da dashboard excluído com sucesso",
         "API_ERROR": "Não conseguimos excluir o aplicativo. Por favor, tente novamente mais tarde"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Criar",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Carregando",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Crie issues no Linear a partir de conversas, ou vincule às existentes para um rastreamento integrado.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Título",
+            "PLACEHOLDER": "Insira o título",
+            "REQUIRED_ERROR": "Título é obrigatório"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Descrição",
+            "PLACEHOLDER": "Insira a descrição"
+          },
+          "TEAM": {
+            "LABEL": "Times",
+            "PLACEHOLDER": "Selecionar time",
+            "SEARCH": "Pesquisar equipe",
+            "REQUIRED_ERROR": "A equipe é obrigatória"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Responsável",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioridade",
+            "PLACEHOLDER": "Selecionar prioridade",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Nome do campo",
+            "PLACEHOLDER": "Selecione o marcador",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "SItuação",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Criar",
+        "CANCEL": "Cancelar",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "SItuação",
+        "PRIORITY": "Prioridade",
+        "ASSIGNEE": "Responsável",
+        "LABELS": "Marcadores",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "Houve um erro ao desvincular o atributo, por favor, tente novamente"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/pt_BR/labelsMgmt.json
index 36dd83e818d10..35597a033d79c 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Marcadores",
     "HEADER_BTN_TXT": "Adicionar marcador",
     "LOADING": "Buscando marcadores",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Não existem itens correspondentes a esta consulta",
-    "SIDEBAR_TXT": "<p><b>Marcadores</b> <p>Os marcadores o ajudam a categorizar as conversas e a priorizá-las. Você pode atribuir o marcador a uma conversa a partir do menu lateral. <br /><br />Os marcadores estão vinculados à conta e podem ser usados para criar fluxos de trabalho personalizados em sua organização. Você pode atribuir uma cor personalizada para um marcador, facilitando a identificação. Você será capaz de exibir o marcador na barra lateral para filtrar as conversas com mais facilidade.</p>",
     "LIST": {
       "404": "Não há marcadores disponíveis nesta conta.",
       "TITLE": "Gerenciar marcadores",
@@ -49,7 +50,8 @@
       "DISMISS": "Recusar",
       "ADD_SELECTED_LABELS": "Adicionar etiquetas selecionadas",
       "ADD_SELECTED_LABEL": "Adicionar etiqueta selecionada",
-      "ADD_ALL_LABELS": "Adicionar todas as etiquetas"
+      "ADD_ALL_LABELS": "Adicionar todas as etiquetas",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Adicionar marcador",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/macros.json b/app/javascript/dashboard/i18n/locale/pt_BR/macros.json
index bab2f7feac762..ed4b16cb03538 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/macros.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Executar",
       "PREVIEW": "Pré-visualizar Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executada com sucesso"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Valor obrigatório",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/report.json b/app/javascript/dashboard/i18n/locale/pt_BR/report.json
index 528835c723036..7d8544338199d 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/report.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Tráfego de conversa",
       "NO_CONVERSATIONS": "Não há conversas",
       "CONVERSATION": "%{count} conversa",
-      "CONVERSATIONS": "%{count} conversas"
+      "CONVERSATIONS": "%{count} conversas",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversas por agentes",
@@ -536,6 +537,7 @@
       "LABELS": "Nome do campo",
       "TEAMS": "Times"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Taxa de acerto",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/resetPassword.json b/app/javascript/dashboard/i18n/locale/pt_BR/resetPassword.json
index 60a3d9b30f4bd..8ea4eeb6eef56 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/resetPassword.json
@@ -1,7 +1,7 @@
 {
   "RESET_PASSWORD": {
     "TITLE": "Redefinir senha",
-    "DESCRIPTION": "Digite o endereço de e-mail que você usa para acessar o ChatWoot para obter as instruções de redefinição da senha.",
+    "DESCRIPTION": "Digite o endereço de e-mail que você usa para acessar o Chatwoot para obter as instruções de redefinição da senha.",
     "GO_BACK_TO_LOGIN": "Se você quiser voltar para a página de acesso,",
     "EMAIL": {
       "LABEL": "e-mail",
@@ -10,7 +10,7 @@
     },
     "API": {
       "SUCCESS_MESSAGE": "O link para alteração de senha foi enviado para seu e-mail.",
-      "ERROR_MESSAGE": "Não foi possível conectar ao servidor Woot. Por favor, tente novamente."
+      "ERROR_MESSAGE": "Não foi possível conectar ao servidor Chatwoot. Por favor, tente novamente."
     },
     "SUBMIT": "Enviar"
   }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/search.json b/app/javascript/dashboard/i18n/locale/pt_BR/search.json
index 4abe8dc76702b..5f40448f2fd33 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/search.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversas",
       "MESSAGES": "Messagem"
     },
+    "SEARCHING_DATA": "Procurando",
     "EMPTY_STATE": "Nenhum %{item} foi encontrado para a consulta '%{query}'",
     "EMPTY_STATE_FULL": "Nenhum resultado encontrado para a consulta '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ para focar",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/settings.json b/app/javascript/dashboard/i18n/locale/pt_BR/settings.json
index dc4bc3845fac7..471f0ff2db2f0 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/settings.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Relatórios",
     "SETTINGS": "Configurações",
     "CONTACTS": "Contato",
+    "CAPTAIN": "Captain",
     "HOME": "Principal",
     "AGENTS": "Agentes",
     "AGENT_BOTS": "Robôs",
@@ -278,7 +279,7 @@
     "SLA": "",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Visão geral",
-    "FACEBOOK_REAUTHORIZE": "Sua conexão com o Facebook expirou! Por favor, reconecte sua página do Facebook para continuar os serviços",
+    "REAUTHORIZE": "A conexão com a sua caixa de entrada expirou. Por favor, reconecte para continuar recebendo e enviando mensagens",
     "HELP_CENTER": {
       "TITLE": "Central de Ajuda",
       "ALL_ARTICLES": "Todos os artigos",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/teamsSettings.json b/app/javascript/dashboard/i18n/locale/pt_BR/teamsSettings.json
index 6f982b4691e30..0d3a42b5b0e59 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Criar nova equipe",
     "HEADER": "Times",
-    "SIDEBAR_TXT": "<p><b>Equipes</b></p> <p>As equipes permitem que você organize seus agentes em grupos baseados em suas responsabilidades. <br /> Um agente pode fazer parte de várias equipes. Você pode atribuir conversas a uma equipe quando você estiver trabalhando colaborativamente. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Não existem agentes associados a esta conta.",
-      "EDIT_TEAM": "Editar equipe"
+      "EDIT_TEAM": "Editar equipe",
+      "NONE": "Nenhuma"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Não foi possível excluir o departamento. Tente novamente."
       },
       "CONFIRM": {
-        "TITLE": "Tem certeza que deseja excluir - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Digite {teamName} para confirmar",
         "MESSAGE": "A exclusão do departamento irá remover a atribuição da equipe das conversas atribuídas a esse departamento.",
         "YES": "Excluir ",
diff --git a/app/javascript/dashboard/i18n/locale/ro/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ro/advancedFilters.json
index fa5b27a973356..856183800892f 100644
--- a/app/javascript/dashboard/i18n/locale/ro/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ro/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "ȘI",
       "OR": "SAU"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Egal cu",
       "not_equal_to": "Nu este egal cu",
diff --git a/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json
index 7f2429387ac71..4490332cda770 100644
--- a/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenți",
     "HEADER_BTN_TXT": "Adaugă agent",
     "LOADING": "Se preia lista de agenți",
-    "SIDEBAR_TXT": "<p><b>Agenții</b></p> <p> Un agent <b></b> este membru al echipei dumneavoastră de asistență pentru clienți. </p><p> Agenți vor putea vizualiza mesajele utilizatorilor și le vor putea răspunde. Lista afișează toți agenții din contul tău. </p><p> Faceți clic pe <b>Adăugați Agent</b> pentru a adăuga un agent nou. Agentul pe care îl adăugați va primi un e-mail cu un link de confirmare pentru a-și activa contul, după care pot accesa Chatwoot și răspunde la mesaje. </p><p> Accesul la Chatwoot este bazat pe următoarele roluri. </p><p> <b>Agent</b> - Agenții cu acest rol pot accesa doar mesaje, rapoarte și conversații. Ei pot atribui conversații altor agenți sau ei înșiși și pot rezolva conversațiile.</p><p> <b>Administrator</b> - Administratorul va avea acces la toate caracteristicile Chatwoot activate pentru contul dumneavoastră, inclusiv setările şi facturarea, împreună cu toate privilegiile agenţilor obişnuiţi.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/ro/auditLogs.json b/app/javascript/dashboard/i18n/locale/ro/auditLogs.json
index 3aa43fbb13e3c..d9b73d1fef5d6 100644
--- a/app/javascript/dashboard/i18n/locale/ro/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ro/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Jurnale de audit",
     "HEADER_BTN_TXT": "Adăugarea jurnalelor de audit",
     "LOADING": "Preluarea jurnalelor de audit",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Nu există elemente care să corespundă acestei interogări",
     "SIDEBAR_TXT": "<p><b>Jurnale de audit</b> </p><p> Jurnalele de audit sunt piste pentru evenimente și acțiuni într-un sistem Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ro/automation.json b/app/javascript/dashboard/i18n/locale/ro/automation.json
index 63857aae03574..96836b07274e4 100644
--- a/app/javascript/dashboard/i18n/locale/ro/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ro/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Trebuie să aveți atleast o acțiune pentru a salva",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Introduceți mesajul aici",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Selectați echipe"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Selectați echipe",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Activați regula de automatizare",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Încărcare...",
       "LABEL_UPLOADED": "Încărcare reușită",
       "LABEL_UPLOAD_FAILED": "Încărcare eșuată"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Este necesară o valoare validă",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ro/bulkActions.json b/app/javascript/dashboard/i18n/locale/ro/bulkActions.json
index 7f6e2cc5acf4c..65e677415fa66 100644
--- a/app/javascript/dashboard/i18n/locale/ro/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ro/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Mergeți înapoi",
     "ASSIGN_LABEL": "Atribuiți",
     "YES": "Da",
+    "SEARCH_INPUT_PLACEHOLDER": "Caută",
     "ASSIGN_AGENT_TOOLTIP": "Atribuiți agent",
     "ASSIGN_TEAM_TOOLTIP": "Atribuiți echipă",
     "ASSIGN_SUCCESFUL": "Conversațiile au fost atribuite.",
@@ -33,7 +34,7 @@
       "NONE": "Nimic",
       "NO_TEAMS_AVAILABLE": "Nu există încă echipe adăugate la acest cont.",
       "ASSIGN_SELECTED_TEAMS": "Atribuirea echipei selectate.",
-      "ASSIGN_SUCCESFUL": "Echipe assiged cu succes.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ro/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ro/cannedMgmt.json
index c7e7f5a4603db..8b04465cdb7c1 100644
--- a/app/javascript/dashboard/i18n/locale/ro/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ro/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Răspunsuri predefinite",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Nu există elemente care să corespundă acestei interogări.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Nu există răspunsuri predefinite disponibile în acest cont.",
       "TITLE": "Gestionare Răspunsuri predefinite",
diff --git a/app/javascript/dashboard/i18n/locale/ro/contact.json b/app/javascript/dashboard/i18n/locale/ro/contact.json
index 8272b283385cd..acca437a103aa 100644
--- a/app/javascript/dashboard/i18n/locale/ro/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ro/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contact unit cu succes",
       "ERROR_MESSAGE": "Contactele nu au putut fi îmbinate, încercați din nou!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ro/conversation.json b/app/javascript/dashboard/i18n/locale/ro/conversation.json
index e362cfbfcd7ba..6de1835f7b8d9 100644
--- a/app/javascript/dashboard/i18n/locale/ro/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ro/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter pentru linie nouă. Începe cu '/' pentru a selecta un răspuns predeterminat.",
       "PRIVATE_MSG_INPUT": "Shift + enter pentru linie nouă. Acest lucru va fi vizibil doar pentru Agenți",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Semnătura mesajului nu este configurată, vă rugăm să o configurați în setările profilului.",
-      "CLICK_HERE": "Click aici pentru a actualiza"
+      "CLICK_HERE": "Click aici pentru a actualiza",
+      "WHATSAPP_TEMPLATES": "Șabloane WhatsApp"
     },
     "REPLYBOX": {
       "REPLY": "Răspunde",
diff --git a/app/javascript/dashboard/i18n/locale/ro/general.json b/app/javascript/dashboard/i18n/locale/ro/general.json
index 25bb4dfb736d2..49c0fc5667d3a 100644
--- a/app/javascript/dashboard/i18n/locale/ro/general.json
+++ b/app/javascript/dashboard/i18n/locale/ro/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": "Caută",
+      "EMPTY_STATE": "Niciun rezultat găsit"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ro/generalSettings.json b/app/javascript/dashboard/i18n/locale/ro/generalSettings.json
index 49692a0117dcc..b8e3b795d499c 100644
--- a/app/javascript/dashboard/i18n/locale/ro/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ro/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Deconectat"
+      "OFFLINE": "Deconectat",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Reîmprospătare"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Până mâine",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ro/helpCenter.json b/app/javascript/dashboard/i18n/locale/ro/helpCenter.json
index 5395606fe4ced..edc2eb7aaf9e0 100644
--- a/app/javascript/dashboard/i18n/locale/ro/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ro/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/ro/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ro/inboxMgmt.json
index c60fe9aa8f599..629da82218af2 100644
--- a/app/javascript/dashboard/i18n/locale/ro/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ro/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Căsuțe",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> Când conectezi un site web sau o pagină de Facebook la Chatwoot, se numește <b>Inbox</b>. Poți avea inbox-uri nelimitate în contul tău din Chatwoot. </p><p> Faceţi clic pe <b>Adăugaţi Inbox</b> pentru a conecta un website sau o pagină Facebook. </p><p> În tabloul de bord, poți vedea toate conversațiile din toate cutiile tale într-un singur loc și să le răspunzi sub fila `Conversations`. </p><p> De asemenea, poți vedea conversații specifice unei căsuțe poștale făcând clic pe numele inbox-ului din panoul stâng al tabloului de bord. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Nu există căsuțe poștale atașate acestui cont."
     },
@@ -364,6 +366,7 @@
         "TITLE": "E-mail Microsoft",
         "DESCRIPTION": "Faceți clic pe butonul Conectare cu Microsoft pentru a începe. Veți redirecționa către pagina de conectare la e-mail. După ce acceptați permisiunile solicitate, veți fi redirecționat înapoi la pasul de creare a inboxului.",
         "EMAIL_PLACEHOLDER": "Introdu adresa de e-mail",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Pentru a vă adăuga contul Microsoft ca canal, trebuie să vă autentificați contul Microsoft făcând clic pe \"Conectați-vă cu Microsoft\" ",
         "ERROR_MESSAGE": "A existat o eroare la conectarea la Microsoft, încercați din nou"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ro/integrations.json b/app/javascript/dashboard/i18n/locale/ro/integrations.json
index a8ba58e90fb8a..1cf5ef07d1173 100644
--- a/app/javascript/dashboard/i18n/locale/ro/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ro/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrări",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Evenimente subscrise",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Adăugarea unei noi aplicații pentru tabloul de bord",
       "SIDEBAR_TXT": "<p><b>Aplicații tablou de bord</b></p><p>Aplicațiile tablou de bord permit organizațiilor să încorporeze o aplicație în tabloul de bord Chatwoot pentru a oferi contextul pentru agenții de asistență pentru clienți. Această caracteristică vă permite să creați o aplicație independent și să o încorporați în interiorul tabloului de bord pentru a furniza informații despre utilizator, comenzile lor sau istoricul plăților anterioare.</p><p>Când încorporați aplicația utilizând tabloul de bord în Chatwoot, aplicația va primi contextul conversației și al contactului ca eveniment de fereastră. Implementați un ascultător pentru evenimentul mesajului de pe pagina dvs., pentru a primi contextul.</p><p>Pentru a adăuga o nouă aplicație de tablou de bord, faceți clic pe butonul \"Adăugați o nouă aplicație de tablou de bord\".</p>",
       "DESCRIPTION": "Aplicațiile tablou de bord permit organizațiilor să încorporeze o aplicație în interiorul tabloului de bord pentru a oferi contextul agenților de asistență pentru clienți. Această caracteristică vă permite să creați o aplicație independent și să o încorporați pentru a furniza informații despre utilizator, comenzile lor sau istoricul plăților anterioare.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Nu există încă aplicații de tablou de bord configurate pe acest cont",
         "LOADING": "Preluarea aplicațiilor de tablou de bord...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Aplicația Tablou de bord ștearsă cu succes",
         "API_ERROR": "Nu am putut șterge aplicația. Încercați din nou mai târziu"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Creeaza",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Legătură",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Titlu",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Titlul este necesar"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Descriere",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Echipa",
+            "PLACEHOLDER": "Selectați echipa",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritate",
+            "PLACEHOLDER": "Selectați prioritatea",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Etichetă",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Creeaza",
+        "CANCEL": "Renunță",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Prioritate",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etichete",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ro/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ro/labelsMgmt.json
index 13d2adae88f54..c1316ebc1957e 100644
--- a/app/javascript/dashboard/i18n/locale/ro/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ro/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etichete",
     "HEADER_BTN_TXT": "Adăugare etichetă",
     "LOADING": "Preluarea etichetelor",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Nu există elemente care să corespundă acestei interogări",
-    "SIDEBAR_TXT": "<p><b>Etichete</b> <p>Etichetele vă ajută să clasificați conversațiile și să le prioritizați. Poți atribui eticheta unei conversații din sidepanel. <br /><br />Etichetele sunt legate de cont și pot fi utilizate pentru a crea fluxuri de lucru personalizate în organizația dvs. Puteți atribui o culoare personalizată unei etichete, aceasta facilitează identificarea etichetei. Veți putea afișa eticheta pe bara laterală pentru a filtra ușor conversațiile.</p>",
     "LIST": {
       "404": "Nu există răspunsuri predefinite disponibile în acest cont.",
       "TITLE": "Gestionați etichetele",
@@ -49,7 +50,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": "Adăugare etichetă",
diff --git a/app/javascript/dashboard/i18n/locale/ro/macros.json b/app/javascript/dashboard/i18n/locale/ro/macros.json
index 822caef8b6ab7..0e9eb0989517b 100644
--- a/app/javascript/dashboard/i18n/locale/ro/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ro/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Executa",
       "PREVIEW": "Previzualizarea macrocomenzii",
       "EXECUTED_SUCCESSFULLY": "Macrocomandă executată cu succes"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Este necesară o valoare validă",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ro/report.json b/app/javascript/dashboard/i18n/locale/ro/report.json
index f4a905ea63c81..ec34fa3d70653 100644
--- a/app/javascript/dashboard/i18n/locale/ro/report.json
+++ b/app/javascript/dashboard/i18n/locale/ro/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Trafic de conversație",
       "NO_CONVERSATIONS": "Fără conversații",
       "CONVERSATION": "%{count} conversație",
-      "CONVERSATIONS": "conversații %{count}"
+      "CONVERSATIONS": "conversații %{count}",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversațiile agenților",
@@ -536,6 +537,7 @@
       "LABELS": "Etichetă",
       "TEAMS": "Echipa"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/ro/search.json b/app/javascript/dashboard/i18n/locale/ro/search.json
index 106339043c350..88ebafd3de65a 100644
--- a/app/javascript/dashboard/i18n/locale/ro/search.json
+++ b/app/javascript/dashboard/i18n/locale/ro/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversații",
       "MESSAGES": "Mesaje"
     },
+    "SEARCHING_DATA": "In căutare",
     "EMPTY_STATE": "Nu s-a găsit niciun %{item} pentru interogarea \"%{query}\"",
     "EMPTY_STATE_FULL": "Nu s-au găsit rezultate pentru interogarea \"%{query}\"",
     "PLACEHOLDER_KEYBINDING": "/ să se concentreze",
diff --git a/app/javascript/dashboard/i18n/locale/ro/settings.json b/app/javascript/dashboard/i18n/locale/ro/settings.json
index 4f1cd9af28630..dd0984765d523 100644
--- a/app/javascript/dashboard/i18n/locale/ro/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ro/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Rapoarte",
     "SETTINGS": "Setări",
     "CONTACTS": "Contacte",
+    "CAPTAIN": "Captain",
     "HOME": "Acasa",
     "AGENTS": "Agenți",
     "AGENT_BOTS": "Boți",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Prezentare generală",
-    "FACEBOOK_REAUTHORIZE": "Conexiunea ta de Facebook a expirat, te rugăm să-ți reconectezi pagina de Facebook pentru a continua serviciile",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Asistenta",
       "ALL_ARTICLES": "Toate articolele",
diff --git a/app/javascript/dashboard/i18n/locale/ro/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ro/teamsSettings.json
index fd405ec2a651c..90d95d37c8cd9 100644
--- a/app/javascript/dashboard/i18n/locale/ro/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ro/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Crează o echipă nouă",
     "HEADER": "Echipe",
-    "SIDEBAR_TXT": "<p><b>Echipe</b></p> <p>Echipele vă permit să vă organizați agenții în grupuri în funcție de responsabilitățile lor. <br /> Un agent poate face parte din mai multe echipe. Puteți atribui conversații unei echipe atunci când lucrați în colaborare. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Nu există echipe create în acest cont.",
-      "EDIT_TEAM": "Editează echipa"
+      "EDIT_TEAM": "Editează echipa",
+      "NONE": "Nimic"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Nu a putut șterge echipa. Încearcă din nou."
       },
       "CONFIRM": {
-        "TITLE": "Sunteți sigur că doriți să ștergeți - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Vă rugăm să tastați {teamName} pentru a confirma",
         "MESSAGE": "Ștergerea echipei va elimina atribuirea echipei din conversațiile atribuite acestei echipe.",
         "YES": "Şterge ",
diff --git a/app/javascript/dashboard/i18n/locale/ru/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ru/advancedFilters.json
index 18c1c92bef900..b95cb6aba1577 100644
--- a/app/javascript/dashboard/i18n/locale/ru/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ru/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "И",
       "OR": "ИЛИ"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Равно",
       "not_equal_to": "Не равно",
diff --git a/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json
index 70b74a6f1489a..55a1b4906fb33 100644
--- a/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Операторы",
     "HEADER_BTN_TXT": "Добавить оператора",
     "LOADING": "Загружаем список операторов",
-    "SIDEBAR_TXT": "<p><b>Операторы</b></p> <p> <b>Оператор</b> – это член вашей команды поддержки. </p><p> Операторы смогут читать сообщения от ваших пользователей и отвечать на них. В этом списке все операторы, подключенные к вашему аккаунту. </p><p> Нажмите <b>Добавить оператора</b>, чтобы пригласить нового оператора. Оператор получит письмо со ссылкой для подтверждения аккаунта, после чего он сможет входить в Chatwoot и отвечать на сообщения. </p><p> Доступ к функциям Chatwoot определяется следующими ролями: </p><p> <b>Оператор</b> - открывает доступ к списку сообщений, отчетам и диалогам. Операторы могут назначать диалоги себе или другим операторам и завершать диалоги.</p><p> <b>Администратор</b> - открывает доступ ко всем функциям Chatwook на вашем аккаунте, включая настройки, в дополнение к стандартным правам оператора.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Администратор",
       "AGENT": "Оператор"
diff --git a/app/javascript/dashboard/i18n/locale/ru/auditLogs.json b/app/javascript/dashboard/i18n/locale/ru/auditLogs.json
index ac9784829c560..5781bf76fed40 100644
--- a/app/javascript/dashboard/i18n/locale/ru/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ru/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Журнал аудита",
     "HEADER_BTN_TXT": "Добавить журнал аудита",
     "LOADING": "Получение журналов аудита",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Нет шаблонных ответов, соответствующих запросу",
     "SIDEBAR_TXT": "<p><b>Журналы аудита</b> </p><p> Логи аудита являются следами событий и действий в системе Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} Пригашен %{invitee} права аккаунта %{role}",
       "EDIT": {
         "SELF": "%{agentName} изменить %{attributes} на %{values}",
-        "OTHER": "%{agentName} изменить %{attributes} на %{values}"
+        "OTHER": "%{agentName} изменить %{attributes} на %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ru/automation.json b/app/javascript/dashboard/i18n/locale/ru/automation.json
index e579f53f543ae..da1845515332d 100644
--- a/app/javascript/dashboard/i18n/locale/ru/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ru/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Вам нужно иметь по крайней мере одно условие для сохранения",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Напишите здесь ваше сообщение",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Выберите команды"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Выберите команды",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Включить правило автоматизации",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Загружаем...",
       "LABEL_UPLOADED": "Успешно загружено",
       "LABEL_UPLOAD_FAILED": "Загрузка не удалась"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Необходимо указать значение",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ru/bulkActions.json b/app/javascript/dashboard/i18n/locale/ru/bulkActions.json
index 8c64c6cb6eb76..1ec968642c72f 100644
--- a/app/javascript/dashboard/i18n/locale/ru/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ru/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Вернуться",
     "ASSIGN_LABEL": "Назначить",
     "YES": "Да",
+    "SEARCH_INPUT_PLACEHOLDER": "Поиск",
     "ASSIGN_AGENT_TOOLTIP": "Назначить агента",
     "ASSIGN_TEAM_TOOLTIP": "Назначить команду",
     "ASSIGN_SUCCESFUL": "Беседы успешно назначены.",
@@ -33,7 +34,7 @@
       "NONE": "Ничего",
       "NO_TEAMS_AVAILABLE": "Нет команд, добавленных в этот аккаунт.",
       "ASSIGN_SELECTED_TEAMS": "Назначить выбранную команду.",
-      "ASSIGN_SUCCESFUL": "Команды, назначенные успешно.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Не удалось назначить команду, попробуйте еще раз."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ru/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ru/cannedMgmt.json
index a1c1fe68de6bc..51c0ee7edee10 100644
--- a/app/javascript/dashboard/i18n/locale/ru/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ru/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Шаблонные ответы",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Добавить шаблонный ответ",
     "LOADING": "Загружаем шаблонные ответы...",
     "SEARCH_404": "Нет категорий, соответствующих запросу.",
-    "SIDEBAR_TXT": "<p><b>Шаблонные ответы</b> </p><p> Шаблонные ответы это написаные заранее шаблоны, которые помогут вам быстрее ответить на сообщение. Чтобы вставить шаблонный ответ в чат, операторы могут ввести короткий код после символа '/'. </p><p> Вы можете управлять шаблонными ответами с этой страницы или создавать новые шаблоны, используя кнопку \"Добавить шаблонный ответ\".</p><p>Откройте <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">«Гайд по шаблонам»</a> на другой вкладке для помощи.</p><p>Кроме того, ознакомьтесь с новой библиотекой <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Шаблонных ответов</a></p>",
     "LIST": {
       "404": "У вас нет шаблонных ответов.",
       "TITLE": "Управление шаблонными ответами",
diff --git a/app/javascript/dashboard/i18n/locale/ru/contact.json b/app/javascript/dashboard/i18n/locale/ru/contact.json
index 62a3e2c29f71a..b6c8be62f6f7e 100644
--- a/app/javascript/dashboard/i18n/locale/ru/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ru/contact.json
@@ -84,7 +84,7 @@
     "CONFIRM": {
       "TITLE": "Экспорт контактов",
       "MESSAGE": "Вы уверены, что хотите экспортировать все контакты?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
+      "FILTERED_MESSAGE": "Вы действительно хотите экспортировать все отфильтрованные контакты?",
       "YES": "Да, экспортировать",
       "NO": "Нет, отменить"
     }
@@ -298,8 +298,8 @@
     "BUTTON": "Добавить пользовательский атрибут",
     "NOT_AVAILABLE": "Для этого контакта нет пользовательских атрибутов.",
     "COPY_SUCCESSFUL": "Скопировано в буфер обмена",
-    "SHOW_MORE": "Show all attributes",
-    "SHOW_LESS": "Show less attributes",
+    "SHOW_MORE": "Показать все атрибуты",
+    "SHOW_LESS": "Скрыть лишние атрибуты",
     "ACTIONS": {
       "COPY": "Копировать атрибут",
       "DELETE": "Удалить атрибут",
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Контакт успешно объединён",
       "ERROR_MESSAGE": "Невозможно объединить контакты, попробуйте еще раз!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ru/conversation.json b/app/javascript/dashboard/i18n/locale/ru/conversation.json
index b714a54ffe18e..6741cc46f0e16 100644
--- a/app/javascript/dashboard/i18n/locale/ru/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ru/conversation.json
@@ -69,8 +69,8 @@
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
         "RT": "RT {status}",
-        "MISSED": "missed",
-        "DUE": "due"
+        "MISSED": "пропущенный",
+        "DUE": "до"
       }
     },
     "RESOLVE_DROPDOWN": {
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter чтобы начать новую строку. Начните с '/', чтобы выбрать шаблонный ответ.",
       "PRIVATE_MSG_INPUT": "Shift + enter для новой строки. Это будет видно только Операторам",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Подпись сообщения не настроена, пожалуйста настройте её в настройках профиля.",
-      "CLICK_HERE": "Нажмите здесь, чтобы обновить"
+      "CLICK_HERE": "Нажмите здесь, чтобы обновить",
+      "WHATSAPP_TEMPLATES": "Шаблоны Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Ответить",
diff --git a/app/javascript/dashboard/i18n/locale/ru/general.json b/app/javascript/dashboard/i18n/locale/ru/general.json
index 25bb4dfb736d2..6191f3cfb52c3 100644
--- a/app/javascript/dashboard/i18n/locale/ru/general.json
+++ b/app/javascript/dashboard/i18n/locale/ru/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+    "SHOWING_RESULTS": "Показаны {firstIndex}-{lastIndex} из {totalCount} элементов",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Поиск",
+      "EMPTY_STATE": "Результаты не найдены"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ru/generalSettings.json b/app/javascript/dashboard/i18n/locale/ru/generalSettings.json
index c6691e23f21c0..2c12a66a19fe4 100644
--- a/app/javascript/dashboard/i18n/locale/ru/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ru/generalSettings.json
@@ -88,14 +88,16 @@
       "assigned_conversation_new_message": "Новое сообщение",
       "participating_conversation_new_message": "Новое сообщение",
       "conversation_mention": "Упоминание",
-      "sla_missed_first_response": "SLA Missed",
-      "sla_missed_next_response": "SLA Missed",
-      "sla_missed_resolution": "SLA Missed"
+      "sla_missed_first_response": "Пропущено SLA",
+      "sla_missed_next_response": "Пропущено SLA",
+      "sla_missed_resolution": "Пропущено SLA"
     }
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Оффлайн"
+      "OFFLINE": "Оффлайн",
+      "RECONNECTING": "Повторное подключение:",
+      "RECONNECT_SUCCESS": "Повторное подключение успешно"
     },
     "BUTTON": {
       "REFRESH": "Обновить"
@@ -107,7 +109,7 @@
       "GENERAL": "Главное",
       "REPORTS": "Отчёты",
       "CONVERSATION": "Диалоги",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "Массовые действия",
       "CHANGE_ASSIGNEE": "Изменить Назначенного",
       "CHANGE_PRIORITY": "Изменить приоритет",
       "CHANGE_TEAM": "Изменить команду",
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "До завтра",
       "UNTIL_NEXT_MONTH": "До следующего месяца",
       "AN_HOUR_FROM_NOW": "Еще через час",
-      "CUSTOM": "Пользовательский...",
+      "UNTIL_CUSTOM_TIME": "Пользовательский...",
       "CHANGE_APPEARANCE": "Изменить внешний вид",
       "LIGHT_MODE": "Светлая",
       "DARK_MODE": "Тёмная",
diff --git a/app/javascript/dashboard/i18n/locale/ru/helpCenter.json b/app/javascript/dashboard/i18n/locale/ru/helpCenter.json
index c8c41dae1e070..e2053226588fb 100644
--- a/app/javascript/dashboard/i18n/locale/ru/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ru/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Используйте портал в качестве бесконечного CMS с сторонними фронт-фреймворками, используя наши API."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ru/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ru/inboxMgmt.json
index 887bf51f5bf9b..79111208a2af1 100644
--- a/app/javascript/dashboard/i18n/locale/ru/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ru/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Источники",
     "SIDEBAR_TXT": "<p><b>Источники</b></p> <p> Когда вы подключаете страницу Facebook к Chatwoot, это называется <b>Источником</b>. У вас может быть неограниченное количество источников в вашем аккаунте Chatwoot. </p><p> Нажмите на <b>Добавить источник</b> для подключения сайта или страницы на Facebook. </p><p> На главной страницы вы увидите все диалоги из всех источников и можете отвечать на них во вкладке `Диалоги`. </p><p> Вы можете просмотреть диалоги конкретного источника по нажатию на его имя в левой части главной страницы. </p>",
+    "RECONNECTION_REQUIRED": "Входящие сообщения отключены. Вы не будете получать новые сообщения пока не пройдете авторизацию повторно.",
+    "CLICK_TO_RECONNECT": "Нажмите здесь для повторного подключения.",
     "LIST": {
       "404": "У вас пока нет источников."
     },
@@ -43,7 +45,7 @@
         "CHOOSE_PLACEHOLDER": "Выберите страницу из списка",
         "INBOX_NAME": "Имя источника",
         "ADD_NAME": "Введите имя источника",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Выберите имя для папки \"Входящие\"",
         "PICK_A_VALUE": "Выберите значение"
       },
       "TWITTER": {
@@ -62,7 +64,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "URL вебхука",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Введите URL-адрес вебхука",
           "ERROR": "Пожалуйста, введите правильный URL"
         },
         "CHANNEL_DOMAIN": {
@@ -175,12 +177,12 @@
           },
           "API_KEY": {
             "LABEL": "Ключ API",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Пожалуйста, введите ваш Bandwith API Key",
             "ERROR": "Это поле обязательно"
           },
           "API_SECRET": {
             "LABEL": "Секретный ключ API",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Пожалуйста, введите ваш Bandwith API Secret",
             "ERROR": "Это поле обязательно"
           },
           "APPLICATION_ID": {
@@ -239,7 +241,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Вебхук верифицировать токен",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "Введите верификационный токен, который вы хотите настроить для Facebook webhooks.",
           "ERROR": "Пожалуйста, введите правильное значение."
         },
         "API_KEY": {
@@ -269,7 +271,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "URL вебхука",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Добавьте URL, на который вы бы хотели получать callback-события.",
           "PLACEHOLDER": "URL вебхука"
         },
         "SUBMIT_BUTTON": "Создайте источник API",
@@ -279,7 +281,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Email источник",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Интегрируйте ваш почтовый ящик.",
         "CHANNEL_NAME": {
           "LABEL": "имя источника",
           "PLACEHOLDER": "Пожалуйста введите имя источника",
@@ -345,7 +347,7 @@
       "AGENTS": {
         "TITLE": "Операторы",
         "DESC": "Здесь вы можете добавить операторов для управления только что созданным источником. Только эти операторы будут иметь доступ к вашему источнику. Операторы, которые не являются частью этого источника, не смогут видеть диалоги или отвечать на них. <br> <b>PS:</b> Если вам как администратору нужен доступ ко всем источникам, то вы должны добавить себя как операторы во все каналы, которые вы создаете.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Добавьте хотя бы одного агента в новый канал",
         "PICK_AGENTS": "Выберите агентов для канала"
       },
       "DETAILS": {
@@ -364,6 +366,7 @@
         "TITLE": "Почта Microsoft",
         "DESCRIPTION": "Нажмите на кнопку Войти с помощью Microsoft, чтобы начать. Вы будете перенаправлены на страницу входа по электронной почте. Как только вы согласитесь с запрошенными правами, вы будете перенаправлены обратно на этап создания входящих сообщений.",
         "EMAIL_PLACEHOLDER": "Введите адрес электронной почты",
+        "SIGN_IN": "Войти с помощью Microsoft",
         "HELP": "Чтобы добавить учетную запись Microsoft в качестве канала, вам нужно авторизоваться в учетной записи Майкрософт, нажав на кнопку \"Войти с помощью Microsoft\" ",
         "ERROR_MESSAGE": "Произошла ошибка при подключении к Microsoft, попробуйте еще раз"
       }
@@ -406,7 +409,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Имя отправителя",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Выберите имя, отображаемое клиенту, когда он получает письма от ваших агентов.",
         "FOR_EG": "Например:",
         "FRIENDLY": {
           "TITLE": "Дружелюбный",
@@ -508,7 +511,7 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Разрешить отправлять сообщения после завершения разговора",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Разрешить пользователям отправлять сообщения даже после того, как разговор будет завершен.",
       "WHATSAPP_SECTION_SUBHEADER": "Этот ключ API используется для интеграции с API WhatsApp.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Введите новый ключ API, используемый для интеграции с WhatsApp API.",
       "WHATSAPP_SECTION_TITLE": "Ключ API",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Обновить ключ API",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Введите сюда новый ключ API",
@@ -585,7 +588,7 @@
       "NOTE_TEXT": "Для включения SMTP, настройте IMAP.",
       "UPDATE": "Обновить настройки IMAP",
       "TOGGLE_AVAILABILITY": "Включить конфигурацию IMAP для этого ящика",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "Включение IMAP поможет пользователю получать электронную почту",
       "EDIT": {
         "SUCCESS_MESSAGE": "Настройки IMAP успешно обновлены",
         "ERROR_MESSAGE": "Невозможно обновить настройки IMAP"
diff --git a/app/javascript/dashboard/i18n/locale/ru/integrations.json b/app/javascript/dashboard/i18n/locale/ru/integrations.json
index 48bc702e20b3c..feee6336b862e 100644
--- a/app/javascript/dashboard/i18n/locale/ru/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ru/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Интеграции",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "События с подпиской",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Добавить новое приложение",
       "SIDEBAR_TXT": "<p><b>Панель приложений</b></p><p>Панель приложений, позволяют организациям встраивать приложение в панель управления Chatwoot, чтобы предоставлять контекст для агентов службы поддержки клиентов. Эта функция позволяет вам создать приложение независимо и встроить его в панель инструментов для предоставления информации о пользователях, их заказах или их предыдущей истории платежей.</p><p>Когда вы встраиваете свое приложение с помощью панели инструментов в Chatwoot, ваше приложение будет получить контекст разговора и связей событий. Реализуйте связи для события сообщения на своей странице, чтобы получать контекст.</p><p>Чтобы добавить новое приложение панели приложений, нажмите кнопку \"Добавить приложение\".</p>",
       "DESCRIPTION": "Панель приложений, позволяют организациям встраивать приложение внутри панели управления для обеспечения контекста агентов по поддержке клиентов. Эта функция позволяет создать приложение независимо и встраивать информацию о пользователе, его заказах или их истории платежей.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "В этой панели приложений не настроено ни одной интеграции",
         "LOADING": "Загрузка приложений...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Приложение успешно удалено",
         "API_ERROR": "Не удалось удалить приложение. Повторите попытку позже"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Создать/Связать Задачу",
+      "LOADING": "Загрузка связанных задач...",
+      "LOADING_ERROR": "Ошибка получения данных о связанных задачах, пожалуйста попробуйте еще раз",
+      "CREATE": "Создать",
+      "LINK": {
+        "SEARCH": "Поиск задач",
+        "SELECT": "Выбрать задачу",
+        "TITLE": "Ссылка",
+        "EMPTY_LIST": "Связанных проблем не найдено",
+        "LOADING": "Загрузка",
+        "ERROR": "Ошибка получения данных о связанных задачах, пожалуйста попробуйте еще раз",
+        "LINK_SUCCESS": "Связывание задачи прошло успешно",
+        "LINK_ERROR": "При привязке этой задачи произошла проблема",
+        "LINK_TITLE": "Диалог"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Создать/Привязать задачу из linear",
+        "DESCRIPTION": "Создать задачу из linear из сообщения или привязать существующую задачу",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Название",
+            "PLACEHOLDER": "Введите название",
+            "REQUIRED_ERROR": "Необходимо указать название"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Описание",
+            "PLACEHOLDER": "Введите описание"
+          },
+          "TEAM": {
+            "LABEL": "Команда",
+            "PLACEHOLDER": "Выберите команду",
+            "SEARCH": "Найти команду",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Назначено",
+            "PLACEHOLDER": "Выбрать ответственного",
+            "SEARCH": "Поиск ответственного"
+          },
+          "PRIORITY": {
+            "LABEL": "Приоритет",
+            "PLACEHOLDER": "Выберите приоритет",
+            "SEARCH": "Приоритет поиска"
+          },
+          "LABEL": {
+            "LABEL": "Метка",
+            "PLACEHOLDER": "Выбрать метку",
+            "SEARCH": "Поиск меток"
+          },
+          "STATUS": {
+            "LABEL": "Статус",
+            "PLACEHOLDER": "Выбрать статус",
+            "SEARCH": "Статус поиска"
+          },
+          "PROJECT": {
+            "LABEL": "Проект",
+            "PLACEHOLDER": "Выбрать проект",
+            "SEARCH": "Поиск проекта"
+          }
+        },
+        "CREATE": "Создать",
+        "CANCEL": "Отменить",
+        "CREATE_SUCCESS": "Проблема успешно создана",
+        "CREATE_ERROR": "Произошла ошибка при создании проблемы, пожалуйста, попробуйте еще раз",
+        "LOADING_TEAM_ERROR": "Ошибка получения данных о связанных задачах, пожалуйста попробуйте еще раз",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Статус",
+        "PRIORITY": "Приоритет",
+        "ASSIGNEE": "Назначено",
+        "LABELS": "Категории",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ru/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ru/labelsMgmt.json
index 4753ef6bc42fd..5614272a4088f 100644
--- a/app/javascript/dashboard/i18n/locale/ru/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ru/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Категории",
     "HEADER_BTN_TXT": "Добавить категорию",
     "LOADING": "Загрузка категорий",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Нет категорий, соответствующих запросу",
-    "SIDEBAR_TXT": "<p><b>Категории</b> <p>Категории помогают вам классифицировать диалоги и приоритизировать их. Вы можете назначить категорию диалогу из бокового меню. <br /><br />Категории привязаны к учетной записи и могут быть использованы для упрощения рабочих процессов в вашей организации. Вы можете назначить цвет категории. Также вы можете легко отфильтровать диалоги по категориям из боковой панели.</p>",
     "LIST": {
       "404": "У вас нет категорий.",
       "TITLE": "Управлять категориями",
@@ -49,7 +50,8 @@
       "DISMISS": "Отклонить",
       "ADD_SELECTED_LABELS": "Добавить выбранные метки",
       "ADD_SELECTED_LABEL": "Добавить метку",
-      "ADD_ALL_LABELS": "Добавить все метки"
+      "ADD_ALL_LABELS": "Добавить все метки",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Добавить категорию",
diff --git a/app/javascript/dashboard/i18n/locale/ru/macros.json b/app/javascript/dashboard/i18n/locale/ru/macros.json
index 342b21d29a525..aff41ed819588 100644
--- a/app/javascript/dashboard/i18n/locale/ru/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ru/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Выполнение",
       "PREVIEW": "Предпросмотр макроса",
       "EXECUTED_SUCCESSFULLY": "Макрос успешно выполнен"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Необходимо указать значение",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ru/report.json b/app/javascript/dashboard/i18n/locale/ru/report.json
index 04f751a10b27b..9b034e38ca4d8 100644
--- a/app/javascript/dashboard/i18n/locale/ru/report.json
+++ b/app/javascript/dashboard/i18n/locale/ru/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Трафик сообщений",
       "NO_CONVERSATIONS": "Нет сообщений",
       "CONVERSATION": "%{count} разговор",
-      "CONVERSATIONS": "%{count} разговоров"
+      "CONVERSATIONS": "%{count} разговоров",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Диалоги по операторам",
@@ -511,20 +512,20 @@
     "SATURDAY": "Суббота"
   },
   "SLA_REPORTS": {
-    "HEADER": "SLA Reports",
+    "HEADER": "Отчеты по SLA",
     "NO_RECORDS": "SLA applied conversations are not available.",
-    "LOADING": "Loading SLA data...",
-    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "LOADING": "Загрузка данных по SLA...",
+    "DOWNLOAD_SLA_REPORTS": "Скачать отчеты по SLA",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
       "ADD_FIlTER": "Добавить фильтр",
-      "CLEAR_ALL": "Clear all",
+      "CLEAR_ALL": "Очистить всё",
       "CLEAR_FILTER": "Очистить фильтр",
       "EMPTY_LIST": "Результаты не найдены",
-      "NO_FILTER": "No filters available",
-      "SEARCH": "Search filter",
+      "NO_FILTER": "Нет доступных фильтров",
+      "SEARCH": "Поиск по фильтру",
       "INPUT_PLACEHOLDER": {
-        "SLA": "SLA name",
+        "SLA": "Название SLA",
         "AGENTS": "Имя оператора",
         "INBOXES": "Имя источника",
         "LABELS": "Название категории",
@@ -536,6 +537,7 @@
       "LABELS": "Метка",
       "TEAMS": "Команда"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/ru/search.json b/app/javascript/dashboard/i18n/locale/ru/search.json
index 347f1396e1272..ede39709d5a74 100644
--- a/app/javascript/dashboard/i18n/locale/ru/search.json
+++ b/app/javascript/dashboard/i18n/locale/ru/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Диалоги",
       "MESSAGES": "Сообщения"
     },
+    "SEARCHING_DATA": "Идёт поиск",
     "EMPTY_STATE": "Не найдено %{item} для запроса '%{query}'",
     "EMPTY_STATE_FULL": "Ничего не найдено по запросу '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ фокусироваться",
diff --git a/app/javascript/dashboard/i18n/locale/ru/settings.json b/app/javascript/dashboard/i18n/locale/ru/settings.json
index 5748315b60019..2cb09e45d53bf 100644
--- a/app/javascript/dashboard/i18n/locale/ru/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ru/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Отчёты",
     "SETTINGS": "Настройки",
     "CONTACTS": "Контакты",
+    "CAPTAIN": "Captain",
     "HOME": "Главная",
     "AGENTS": "Операторы",
     "AGENT_BOTS": "Боты",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Бета",
     "REPORTS_OVERVIEW": "Обзор",
-    "FACEBOOK_REAUTHORIZE": "Ваше подключение к Facebook истекло. Пожалуйста, переподключитесь к Facebook для продолжения работы",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Центр поддержки",
       "ALL_ARTICLES": "Все статьи",
diff --git a/app/javascript/dashboard/i18n/locale/ru/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ru/teamsSettings.json
index 0f26072ce5141..b3d6d944e981a 100644
--- a/app/javascript/dashboard/i18n/locale/ru/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ru/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Создать новую команду",
     "HEADER": "Команды",
-    "SIDEBAR_TXT": "<p><b>Команды</b></p> <p>Команды позволяют вам организовывать своих операторов в группы в зависимости от их обязанностей. <br /> Пользователь может быть частью нескольких команд. Вы можете назначить разговоры команде, когда вы работаете совместно. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "В этом аккаунте нет ни одной команды.",
-      "EDIT_TEAM": "Редактировать команду"
+      "EDIT_TEAM": "Редактировать команду",
+      "NONE": "Ничего"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Не удалось удалить команду. Повторите попытку."
       },
       "CONFIRM": {
-        "TITLE": "Вы уверены, что хотите удалить - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Пожалуйста, введите {teamName} для подтверждения",
         "MESSAGE": "Удаление команды снимет назначение команды из бесед, связанных с этой командой.",
         "YES": "Удалить ",
diff --git a/app/javascript/dashboard/i18n/locale/sh/advancedFilters.json b/app/javascript/dashboard/i18n/locale/sh/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/sh/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/sh/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/sh/auditLogs.json b/app/javascript/dashboard/i18n/locale/sh/auditLogs.json
index bb30079757f72..7f412b4c085ac 100644
--- a/app/javascript/dashboard/i18n/locale/sh/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/sh/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/sh/automation.json b/app/javascript/dashboard/i18n/locale/sh/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/sh/automation.json
+++ b/app/javascript/dashboard/i18n/locale/sh/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sh/bulkActions.json b/app/javascript/dashboard/i18n/locale/sh/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/sh/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/sh/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/sh/cannedMgmt.json
index a23fc14ac8af6..7721cc3e68422 100644
--- a/app/javascript/dashboard/i18n/locale/sh/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sh/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/sh/contact.json b/app/javascript/dashboard/i18n/locale/sh/contact.json
index 992f9e1f48a3f..017edbe45731e 100644
--- a/app/javascript/dashboard/i18n/locale/sh/contact.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/sh/conversation.json b/app/javascript/dashboard/i18n/locale/sh/conversation.json
index cc3e4569bc729..8eb490a4b5e3f 100644
--- a/app/javascript/dashboard/i18n/locale/sh/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/sh/general.json b/app/javascript/dashboard/i18n/locale/sh/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/sh/general.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/sh/generalSettings.json b/app/javascript/dashboard/i18n/locale/sh/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/sh/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sh/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/sh/helpCenter.json b/app/javascript/dashboard/i18n/locale/sh/helpCenter.json
index 467b0def962cf..5c74d99289527 100644
--- a/app/javascript/dashboard/i18n/locale/sh/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/sh/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/sh/inboxMgmt.json
index 674f0ef961e82..df4b67604ec0f 100644
--- a/app/javascript/dashboard/i18n/locale/sh/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sh/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/sh/integrations.json b/app/javascript/dashboard/i18n/locale/sh/integrations.json
index 45587f2dbf1ac..b219617fa33f3 100644
--- a/app/javascript/dashboard/i18n/locale/sh/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/sh/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sh/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/sh/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/sh/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sh/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/sh/macros.json b/app/javascript/dashboard/i18n/locale/sh/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/sh/macros.json
+++ b/app/javascript/dashboard/i18n/locale/sh/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sh/report.json b/app/javascript/dashboard/i18n/locale/sh/report.json
index c27532783f2cb..b27417c82adb7 100644
--- a/app/javascript/dashboard/i18n/locale/sh/report.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/sh/search.json b/app/javascript/dashboard/i18n/locale/sh/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/sh/search.json
+++ b/app/javascript/dashboard/i18n/locale/sh/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/i18n/locale/sh/settings.json b/app/javascript/dashboard/i18n/locale/sh/settings.json
index 4dca590e96dc1..dabbff89fb2b9 100644
--- a/app/javascript/dashboard/i18n/locale/sh/settings.json
+++ b/app/javascript/dashboard/i18n/locale/sh/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/sh/teamsSettings.json b/app/javascript/dashboard/i18n/locale/sh/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/sh/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sh/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/sk/advancedFilters.json b/app/javascript/dashboard/i18n/locale/sk/advancedFilters.json
index eb0685ad95aaa..9300772c2f0be 100644
--- a/app/javascript/dashboard/i18n/locale/sk/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/sk/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/sk/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json
index 9c0b2754dc88b..5f6a3c80bbd26 100644
--- a/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenti",
     "HEADER_BTN_TXT": "Pridať agenta",
     "LOADING": "Zoznam agentov sa načítava",
-    "SIDEBAR_TXT": "<p><b>Agent</b></p> <p>Agent</b> je člen vášho tímu zákazníckej podpory. </p><p>Agenti budú môcť zobrazovať správy od vašich používateľov a odpovedať na ne. V zozname sa zobrazujú všetci agenti, ktorí sa aktuálne nachádzajú vo vašom účte. </p><p> Kliknutím na <b>Pridať agenta</b> pridáte nového agenta. Agent, ktorého pridáte, dostane e-mail s potvrdzovacím odkazom na aktiváciu svojho konta, po ktorej môže pristupovať k službe Chatwoot a odpovedať na správy. </p><p> Prístup k funkciám Chatwoot je založený na nasledujúcich rolách. </p><p> <b>Agent</b> - agenti s touto rolou majú prístup len k doručeným správam, správam a konverzáciám. Môžu priraďovať konverzácie iným agentom alebo sebe a riešiť konverzácie.</p><p> <b>Administrátor</b> - Administrátor bude mať prístup ku všetkým funkciám Chatwoot povoleným pre vaše konto vrátane nastavení spolu so všetkými oprávneniami bežných agentov.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrátor",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/sk/auditLogs.json b/app/javascript/dashboard/i18n/locale/sk/auditLogs.json
index 28cb7a60c21f4..f5058bfdbf9eb 100644
--- a/app/javascript/dashboard/i18n/locale/sk/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/sk/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Neexistujú žiadne položky, ktoré by zodpovedali tejto požiadavke",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/sk/automation.json b/app/javascript/dashboard/i18n/locale/sk/automation.json
index 3047c3b4f9655..196e01a08a835 100644
--- a/app/javascript/dashboard/i18n/locale/sk/automation.json
+++ b/app/javascript/dashboard/i18n/locale/sk/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Nahrávanie...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sk/bulkActions.json b/app/javascript/dashboard/i18n/locale/sk/bulkActions.json
index a5041dce4464c..c3960c434fd50 100644
--- a/app/javascript/dashboard/i18n/locale/sk/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/sk/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
     "YES": "Áno",
+    "SEARCH_INPUT_PLACEHOLDER": "Hľadať",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "Žiadne",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/sk/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/sk/cannedMgmt.json
index cf78cfad099c4..5f1ae71ede63a 100644
--- a/app/javascript/dashboard/i18n/locale/sk/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sk/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Uložené odpovede",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Neexistujú žiadne položky, ktoré by zodpovedali tejto požiadavke.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Žiadne uložené odpovede nie sú k dispozícii pre tento účet.",
       "TITLE": "Manažuj uložené odpovede",
diff --git a/app/javascript/dashboard/i18n/locale/sk/contact.json b/app/javascript/dashboard/i18n/locale/sk/contact.json
index 105a2faccdd60..3847382c6a4bc 100644
--- a/app/javascript/dashboard/i18n/locale/sk/contact.json
+++ b/app/javascript/dashboard/i18n/locale/sk/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakt úspešne zlúčený",
       "ERROR_MESSAGE": "Nepodarilo sa zlúčiť kontakty, skúste to znova!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sk/conversation.json b/app/javascript/dashboard/i18n/locale/sk/conversation.json
index b2fae8f0d21f2..8c7f8b8175f60 100644
--- a/app/javascript/dashboard/i18n/locale/sk/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sk/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter pre nový riadok. Ak chcete vybrať Uloženú odpoveď, začnite klávesou '/'.",
       "PRIVATE_MSG_INPUT": "Shift + enter pre nový riadok. Toto bude viditeľné len pre agentov",
       "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": "Odpovedať",
diff --git a/app/javascript/dashboard/i18n/locale/sk/general.json b/app/javascript/dashboard/i18n/locale/sk/general.json
index 25bb4dfb736d2..2e1198efe875d 100644
--- a/app/javascript/dashboard/i18n/locale/sk/general.json
+++ b/app/javascript/dashboard/i18n/locale/sk/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": "Hľadať",
+      "EMPTY_STATE": "Žiadne výsledky neboli nájdené"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sk/generalSettings.json b/app/javascript/dashboard/i18n/locale/sk/generalSettings.json
index ed241f423e63b..ad254119311e8 100644
--- a/app/javascript/dashboard/i18n/locale/sk/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sk/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Obnoviť"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/sk/helpCenter.json b/app/javascript/dashboard/i18n/locale/sk/helpCenter.json
index b7eccc3585658..81c52fc786819 100644
--- a/app/javascript/dashboard/i18n/locale/sk/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/sk/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/sk/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/sk/inboxMgmt.json
index 549d28eade092..07d1f9cd751ca 100644
--- a/app/javascript/dashboard/i18n/locale/sk/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sk/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/sk/integrations.json b/app/javascript/dashboard/i18n/locale/sk/integrations.json
index 905d1948ca2e4..c421bb20d5789 100644
--- a/app/javascript/dashboard/i18n/locale/sk/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/sk/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Vybrať tím",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Zrušiť",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sk/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/sk/labelsMgmt.json
index 01af0fce76ea4..67c53dd8c8b92 100644
--- a/app/javascript/dashboard/i18n/locale/sk/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sk/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Neexistujú žiadne položky, ktoré by zodpovedali tejto požiadavke",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/sk/macros.json b/app/javascript/dashboard/i18n/locale/sk/macros.json
index 3b8895cf8cee9..d3734a816a0e4 100644
--- a/app/javascript/dashboard/i18n/locale/sk/macros.json
+++ b/app/javascript/dashboard/i18n/locale/sk/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sk/report.json b/app/javascript/dashboard/i18n/locale/sk/report.json
index 2695a4a58b708..2d31991ac3978 100644
--- a/app/javascript/dashboard/i18n/locale/sk/report.json
+++ b/app/javascript/dashboard/i18n/locale/sk/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/sk/search.json b/app/javascript/dashboard/i18n/locale/sk/search.json
index 11102ba60d17e..767ea12337484 100644
--- a/app/javascript/dashboard/i18n/locale/sk/search.json
+++ b/app/javascript/dashboard/i18n/locale/sk/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Rozhovory",
       "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/i18n/locale/sk/settings.json b/app/javascript/dashboard/i18n/locale/sk/settings.json
index 151996596ce1f..c94dfa0d44538 100644
--- a/app/javascript/dashboard/i18n/locale/sk/settings.json
+++ b/app/javascript/dashboard/i18n/locale/sk/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Nastavenia",
     "CONTACTS": "Kontakty",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agenti",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Prehľad",
-    "FACEBOOK_REAUTHORIZE": "Vaše pripojenie k Facebooku vypršalo, pre pokračovanie v službách prosím znovu pripojte svoju stránku na Facebooku",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/sk/teamsSettings.json b/app/javascript/dashboard/i18n/locale/sk/teamsSettings.json
index f709a7b1872ad..bfed6166c0cb0 100644
--- a/app/javascript/dashboard/i18n/locale/sk/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sk/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Žiadne"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Tím sa nepodarilo vymazať! Skúste to znova."
       },
       "CONFIRM": {
-        "TITLE": "Určite chcete vymazať - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Pre potvrdenie zadajte {teamName}",
         "MESSAGE": "Odstránením tímu sa odstráni priradenie tímu z konverzácií priradených k tomuto tímu.",
         "YES": "Vymazať ",
diff --git a/app/javascript/dashboard/i18n/locale/sl/advancedFilters.json b/app/javascript/dashboard/i18n/locale/sl/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/sl/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/sl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/sl/auditLogs.json b/app/javascript/dashboard/i18n/locale/sl/auditLogs.json
index d30ec0091b0eb..7a693f66cf053 100644
--- a/app/javascript/dashboard/i18n/locale/sl/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/sl/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/sl/automation.json b/app/javascript/dashboard/i18n/locale/sl/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/sl/automation.json
+++ b/app/javascript/dashboard/i18n/locale/sl/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sl/bulkActions.json b/app/javascript/dashboard/i18n/locale/sl/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/sl/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/sl/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/sl/cannedMgmt.json
index a23fc14ac8af6..7721cc3e68422 100644
--- a/app/javascript/dashboard/i18n/locale/sl/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sl/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/sl/contact.json b/app/javascript/dashboard/i18n/locale/sl/contact.json
index 4db7fce93e026..882643434b3e4 100644
--- a/app/javascript/dashboard/i18n/locale/sl/contact.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/sl/conversation.json b/app/javascript/dashboard/i18n/locale/sl/conversation.json
index 742a3657e8560..4cc4b9bed5fca 100644
--- a/app/javascript/dashboard/i18n/locale/sl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/sl/general.json b/app/javascript/dashboard/i18n/locale/sl/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/sl/general.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/sl/generalSettings.json b/app/javascript/dashboard/i18n/locale/sl/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/sl/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sl/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/sl/helpCenter.json b/app/javascript/dashboard/i18n/locale/sl/helpCenter.json
index 6c4238b92d9d1..5d77c21aa2cf0 100644
--- a/app/javascript/dashboard/i18n/locale/sl/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/sl/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/sl/inboxMgmt.json
index a168e82f02bb3..20c738a86aa9b 100644
--- a/app/javascript/dashboard/i18n/locale/sl/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sl/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/sl/integrations.json b/app/javascript/dashboard/i18n/locale/sl/integrations.json
index 5397fcb630423..47349d1b19abf 100644
--- a/app/javascript/dashboard/i18n/locale/sl/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/sl/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sl/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/sl/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/sl/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sl/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/sl/macros.json b/app/javascript/dashboard/i18n/locale/sl/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/sl/macros.json
+++ b/app/javascript/dashboard/i18n/locale/sl/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sl/report.json b/app/javascript/dashboard/i18n/locale/sl/report.json
index 172e5501d43dd..da2df93e545c4 100644
--- a/app/javascript/dashboard/i18n/locale/sl/report.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/sl/search.json b/app/javascript/dashboard/i18n/locale/sl/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/sl/search.json
+++ b/app/javascript/dashboard/i18n/locale/sl/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/i18n/locale/sl/settings.json b/app/javascript/dashboard/i18n/locale/sl/settings.json
index 4dca590e96dc1..dabbff89fb2b9 100644
--- a/app/javascript/dashboard/i18n/locale/sl/settings.json
+++ b/app/javascript/dashboard/i18n/locale/sl/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/sl/teamsSettings.json b/app/javascript/dashboard/i18n/locale/sl/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/sl/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sl/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/sq/advancedFilters.json b/app/javascript/dashboard/i18n/locale/sq/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/sq/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/sq/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/sq/auditLogs.json b/app/javascript/dashboard/i18n/locale/sq/auditLogs.json
index d30ec0091b0eb..7a693f66cf053 100644
--- a/app/javascript/dashboard/i18n/locale/sq/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/sq/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/sq/automation.json b/app/javascript/dashboard/i18n/locale/sq/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/sq/automation.json
+++ b/app/javascript/dashboard/i18n/locale/sq/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sq/bulkActions.json b/app/javascript/dashboard/i18n/locale/sq/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/sq/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/sq/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/sq/cannedMgmt.json
index a23fc14ac8af6..7721cc3e68422 100644
--- a/app/javascript/dashboard/i18n/locale/sq/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sq/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/sq/contact.json b/app/javascript/dashboard/i18n/locale/sq/contact.json
index 4db7fce93e026..882643434b3e4 100644
--- a/app/javascript/dashboard/i18n/locale/sq/contact.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/sq/conversation.json b/app/javascript/dashboard/i18n/locale/sq/conversation.json
index 742a3657e8560..4cc4b9bed5fca 100644
--- a/app/javascript/dashboard/i18n/locale/sq/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/sq/general.json b/app/javascript/dashboard/i18n/locale/sq/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/sq/general.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/sq/generalSettings.json b/app/javascript/dashboard/i18n/locale/sq/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/sq/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sq/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/sq/helpCenter.json b/app/javascript/dashboard/i18n/locale/sq/helpCenter.json
index 6c4238b92d9d1..5d77c21aa2cf0 100644
--- a/app/javascript/dashboard/i18n/locale/sq/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/sq/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/sq/inboxMgmt.json
index a168e82f02bb3..20c738a86aa9b 100644
--- a/app/javascript/dashboard/i18n/locale/sq/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sq/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/sq/integrations.json b/app/javascript/dashboard/i18n/locale/sq/integrations.json
index 5397fcb630423..47349d1b19abf 100644
--- a/app/javascript/dashboard/i18n/locale/sq/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/sq/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sq/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/sq/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/sq/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sq/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/sq/macros.json b/app/javascript/dashboard/i18n/locale/sq/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/sq/macros.json
+++ b/app/javascript/dashboard/i18n/locale/sq/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sq/report.json b/app/javascript/dashboard/i18n/locale/sq/report.json
index 172e5501d43dd..da2df93e545c4 100644
--- a/app/javascript/dashboard/i18n/locale/sq/report.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/sq/search.json b/app/javascript/dashboard/i18n/locale/sq/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/sq/search.json
+++ b/app/javascript/dashboard/i18n/locale/sq/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/i18n/locale/sq/settings.json b/app/javascript/dashboard/i18n/locale/sq/settings.json
index 4dca590e96dc1..dabbff89fb2b9 100644
--- a/app/javascript/dashboard/i18n/locale/sq/settings.json
+++ b/app/javascript/dashboard/i18n/locale/sq/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/sq/teamsSettings.json b/app/javascript/dashboard/i18n/locale/sq/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/sq/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sq/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/sr/advancedFilters.json b/app/javascript/dashboard/i18n/locale/sr/advancedFilters.json
index b981a4d30a6c1..56b2459a2a021 100644
--- a/app/javascript/dashboard/i18n/locale/sr/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/sr/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "I",
       "OR": "ILI"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Jednako sa",
       "not_equal_to": "Nije jednako sa",
diff --git a/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json
index 2b473b717fc4a..034b5d6724c75 100644
--- a/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenti",
     "HEADER_BTN_TXT": "Dodaj agenta",
     "LOADING": "Preuzimanje liste agenata",
-    "SIDEBAR_TXT": "<p><b>Agenti</b></p> <p> <b>Agent</b> je član vašeg tima korisničke podršek. </p><p> Agenti će biti u mogućnosti da vide i odgovore na poruke od strane vaših korisnika. Spisak prikazuje sve trenutne agente na vašem nalogu. </p><p> Kliknite na <b>Dodaj agenta</b> da bi ste dodali novog agenta. Agent će dobiti e-poruku sa vezom za potvrdu aktiviranja njihovog naloga, nakon čega mogu da pristupe Chatwoot-u i odgovaraju na poruke. </p><p> Pristup mogućnostima Chatwoot-a zavisi od sledećih uloga. </p><p> <b>Agent</b> - Agent sa ovom ulogom može samo da pristupa prijamnim sandučićima, izveštajima i razgovorima. Oni mogu da dodele razgovore drugim agentima ili sami sebi i da rešavaju razgovore.</p><p> <b>Administrator</b> - Administrator ima pristup svim mogućnostima Chatwoot-a koja su aktivirana za vaš nalog, uključujući podešavanjima, pored svih normalnih privilegija agenata.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/sr/auditLogs.json b/app/javascript/dashboard/i18n/locale/sr/auditLogs.json
index a9dbf6ed4b89d..6256cfc288b2d 100644
--- a/app/javascript/dashboard/i18n/locale/sr/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/sr/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Nema stavki koje se poklapaju sa upitom",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/sr/automation.json b/app/javascript/dashboard/i18n/locale/sr/automation.json
index 1c054b77dfc15..5cf5a1ba41085 100644
--- a/app/javascript/dashboard/i18n/locale/sr/automation.json
+++ b/app/javascript/dashboard/i18n/locale/sr/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Morate imati barem jednu akciju da bi ste mogli da sačuvate",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Unesite ovde vašu poruku",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Izaberite timove"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Izaberite timove",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Aktiviraj pravilo automatizacije",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Dodavanje...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Dodavanje nije uspelo"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Vrednost je neophodna",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sr/bulkActions.json b/app/javascript/dashboard/i18n/locale/sr/bulkActions.json
index d294574fef0e5..3a75edd02242a 100644
--- a/app/javascript/dashboard/i18n/locale/sr/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/sr/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Povratak",
     "ASSIGN_LABEL": "Dodeli",
     "YES": "Da",
+    "SEARCH_INPUT_PLACEHOLDER": "Traži",
     "ASSIGN_AGENT_TOOLTIP": "Dodeli agenta",
     "ASSIGN_TEAM_TOOLTIP": "Dodeli tim",
     "ASSIGN_SUCCESFUL": "Razgovor je uspešno dodeljen.",
@@ -33,7 +34,7 @@
       "NONE": "Niko",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/sr/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/sr/cannedMgmt.json
index 5bb923dfc2413..36cf162ffb7f8 100644
--- a/app/javascript/dashboard/i18n/locale/sr/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sr/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Brzi odgovori",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Nema stavki koje se poklapaju sa upitom.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Ne postoje brzi odgovori u ovom nalogu.",
       "TITLE": "Upravljajte brzim odgovorima",
diff --git a/app/javascript/dashboard/i18n/locale/sr/contact.json b/app/javascript/dashboard/i18n/locale/sr/contact.json
index 53d0d60d6ee6f..34fd29c2f2e23 100644
--- a/app/javascript/dashboard/i18n/locale/sr/contact.json
+++ b/app/javascript/dashboard/i18n/locale/sr/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakt je uspešno spojen",
       "ERROR_MESSAGE": "Nije bilo moguće spojiti kontakte, pokušajte ponovo!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sr/conversation.json b/app/javascript/dashboard/i18n/locale/sr/conversation.json
index 6902ac4fce78a..abefe4531c3c6 100644
--- a/app/javascript/dashboard/i18n/locale/sr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sr/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter za novi red. Počni sa '/' da bi ste izabrali brzi odgovor.",
       "PRIVATE_MSG_INPUT": "Shift + enter za novi red. Ovo će biti vidljivo samo agentima",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Potpis poruke nije podešen, molim vas podesite ga u podešavanjima profila.",
-      "CLICK_HERE": "Kliknite ovde da izmenite"
+      "CLICK_HERE": "Kliknite ovde da izmenite",
+      "WHATSAPP_TEMPLATES": "Whatsapp šabloni"
     },
     "REPLYBOX": {
       "REPLY": "Odgovor",
diff --git a/app/javascript/dashboard/i18n/locale/sr/general.json b/app/javascript/dashboard/i18n/locale/sr/general.json
index 25bb4dfb736d2..46e1d3a00eeff 100644
--- a/app/javascript/dashboard/i18n/locale/sr/general.json
+++ b/app/javascript/dashboard/i18n/locale/sr/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": "Traži",
+      "EMPTY_STATE": "Ništa nije pronađeno"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sr/generalSettings.json b/app/javascript/dashboard/i18n/locale/sr/generalSettings.json
index ecbf3e360b2e3..352edb4d740bd 100644
--- a/app/javascript/dashboard/i18n/locale/sr/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sr/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Nedostupan"
+      "OFFLINE": "Nedostupan",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Osveži"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Do sutra",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/sr/helpCenter.json b/app/javascript/dashboard/i18n/locale/sr/helpCenter.json
index b2e7aaf326a4c..c98128b633b3f 100644
--- a/app/javascript/dashboard/i18n/locale/sr/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/sr/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/sr/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/sr/inboxMgmt.json
index b03568abd8588..3d7e5ce3365ff 100644
--- a/app/javascript/dashboard/i18n/locale/sr/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sr/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Prijemni sandučići",
     "SIDEBAR_TXT": "<p><b>Prijemno sanduče</b></p> <p> Kada povežete veb sajt ili fejsbuk stranicu sa Chatwoot, to se zove <b>prijemno sanduče</b>. Možete imati neograničen broj prijemnih sandučića na vašem Chatwoot nalogu. </p><p> Kliknite na <b>Dodaj prijemno sanduče</b> da bi ste povezali veb sajt ili Fejsbuk stranicu. </p><p> U glavnoj tabli, na jednom mestu možete videti sve razgovore iz svih vaših prijemnih sandučića i odgovarati na njih pod karticom 'Razgovori'. </p><p> Takođe možete videti razgovore u određenom prijemnom sandučetu klikom na ime prijemnog sandučeta u levom panelu glavne table. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Nema prijamnih sandučeta povezanih sa ovim nalogom."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/sr/integrations.json b/app/javascript/dashboard/i18n/locale/sr/integrations.json
index 38a4b6b88d444..87d1f233447f4 100644
--- a/app/javascript/dashboard/i18n/locale/sr/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/sr/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integracije",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Pretplaćeni događaji",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Dodaj novu aplikaciju radne table",
       "SIDEBAR_TXT": "<p><b>Aplikacije radne table</b></p><p>Aplikacije radne table omogućavaju organizacijama da integrišu aplikaciju unutar Chatwoot radne table da dostave kontekst agentima podrške. Ova mogućnosti vam omogućava da napravite aplikaciju nezavisno i integrišete je unutar radne table da bi ste dostavili informacije o korisniku, njihovim narudžbama ili istoriji prethodnih plaćanja.</p><p>Kada integrišete vašu aplikaciju koristeći radnu tablu u Chatwoot-u, vaša aplikacija će dobiti kontakst razgovora i kontakta kao window događaj. Implementirajte osluškivač događaj poruke na vašoj stranici da bi ste primili kontakst.</p><p>Da bi ste dodali novu aplikaciju radne table, kliknite na dugme 'Dodaj novu aplikaciju radne table'.</p>",
       "DESCRIPTION": "Aplikacije radne table omogućavaju organizacijama da integrišu aplikaciju unutar radne table da bi omogućili kontekst agentima podrške. Ova mogućnost omogućava da nezavisno napravite aplikaciju i integrišete je da bi ste dostavili informacije o korisniku, njihovim narudžbama ili njihovoj istoriji plaćanja.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Još uvek nema aplikacija radne table podešenih za ovaj nalog",
         "LOADING": "Prikupljanje aplikacija radne table...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Aplikacija radne table je uspešno obrisana",
         "API_ERROR": "Nismo mogli da obrišemo aplikaciju. Molim vas pokušajte ponovo"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Napravi",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Veza",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Naslov",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Naslov je obavezan"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Opis",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Tim",
+            "PLACEHOLDER": "Izaberite tim",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritet",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Oznaka",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Napravi",
+        "CANCEL": "Otkaži",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Prioritet",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Oznake",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sr/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/sr/labelsMgmt.json
index 00284e29881b0..00570cc648c2b 100644
--- a/app/javascript/dashboard/i18n/locale/sr/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sr/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Oznake",
     "HEADER_BTN_TXT": "Dodaj oznaku",
     "LOADING": "Preuzimanje oznaka",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Nema razultata",
-    "SIDEBAR_TXT": "<p><b>Oznake</b> <p>Oznake vam pomažu da kategorišete razgovore i učinite ih prioritetnim. Možete dodeliti oznaku razgovoru iz trake sa strane. <br /><br />Oznake su povezane sa nalogom i mogu biti korišćene za pravljenje prilagođenih radnih tokova u vašoj organizaciji. Možete dodeliti prilagođenu boju oznaci, što će je učiniti lakšom za identifikaciju. Možete da prikažete oznaku na traci sa strane da bi ste lakše filtrirali razgovore.</p>",
     "LIST": {
       "404": "Ne postoje dostupne oznake u ovom nalogu.",
       "TITLE": "Upravljanje oznakama",
@@ -49,7 +50,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": "Dodaj oznaku",
diff --git a/app/javascript/dashboard/i18n/locale/sr/macros.json b/app/javascript/dashboard/i18n/locale/sr/macros.json
index 95fedd6ae7522..5a6f2cb2e20b6 100644
--- a/app/javascript/dashboard/i18n/locale/sr/macros.json
+++ b/app/javascript/dashboard/i18n/locale/sr/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Vrednost je neophodna",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sr/report.json b/app/javascript/dashboard/i18n/locale/sr/report.json
index de4e12154d8e3..02eccf6031c03 100644
--- a/app/javascript/dashboard/i18n/locale/sr/report.json
+++ b/app/javascript/dashboard/i18n/locale/sr/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": "Razgovori prema agentima",
@@ -536,6 +537,7 @@
       "LABELS": "Oznaka",
       "TEAMS": "Tim"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/sr/search.json b/app/javascript/dashboard/i18n/locale/sr/search.json
index 99b1652f2904e..da2e7379d7ef0 100644
--- a/app/javascript/dashboard/i18n/locale/sr/search.json
+++ b/app/javascript/dashboard/i18n/locale/sr/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Razgovori",
       "MESSAGES": "Poruke"
     },
+    "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/i18n/locale/sr/settings.json b/app/javascript/dashboard/i18n/locale/sr/settings.json
index 5a66f107a0121..169ff6026f1fe 100644
--- a/app/javascript/dashboard/i18n/locale/sr/settings.json
+++ b/app/javascript/dashboard/i18n/locale/sr/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Izveštaji",
     "SETTINGS": "Podešavanja",
     "CONTACTS": "Kontakti",
+    "CAPTAIN": "Captain",
     "HOME": "Početak",
     "AGENTS": "Agenti",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Pregled",
-    "FACEBOOK_REAUTHORIZE": "Vaša veza sa Fejsbukom je istekla, molim vas povežite ponovo vašu Fejsbuk stranicu za nastavak servisa",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "Svi članci",
diff --git a/app/javascript/dashboard/i18n/locale/sr/teamsSettings.json b/app/javascript/dashboard/i18n/locale/sr/teamsSettings.json
index b4284cb968c10..aaa0c72070577 100644
--- a/app/javascript/dashboard/i18n/locale/sr/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sr/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Napravite novi tim",
     "HEADER": "Timovi",
-    "SIDEBAR_TXT": "<p><b>Timovi</b></p> <p>Timovi vam omogućavaju da organizujete vaše agente u grupe prema njihovim odgovornostima. <br /> Agent može biti član više timova. Možete dodeliti razgovore timu kada radite u saradnji. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Nema timova napravljenih na ovom nalogu.",
-      "EDIT_TEAM": "Uredi tim"
+      "EDIT_TEAM": "Uredi tim",
+      "NONE": "Niko"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Nije bilo moguće obrisati tim. Pokušajte ponovo."
       },
       "CONFIRM": {
-        "TITLE": "Da li zaista želite da obrišete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Molim upišite {teamName} za potvrdu",
         "MESSAGE": "Brisanjem tima će se ukloniti sve dodele timu iz razgovora koje su bile dodeljene ovom timu.",
         "YES": "Obriši ",
diff --git a/app/javascript/dashboard/i18n/locale/sv/advancedFilters.json b/app/javascript/dashboard/i18n/locale/sv/advancedFilters.json
index 2fe0174d215f4..e106bae0dbcc9 100644
--- a/app/javascript/dashboard/i18n/locale/sv/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/sv/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/sv/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json
index ab5fdffe92917..f1cd7d11e8bfa 100644
--- a/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agenter",
     "HEADER_BTN_TXT": "Lägg till agent",
     "LOADING": "Hämtar agentlista",
-    "SIDEBAR_TXT": "<p><b>Agenter</b></p> <p> En <b>Agent</b> är medlem i ditt kundsupportteam. </p><p> Agenter kommer att kunna se och svara på meddelanden från dina användare. Listan visar alla agenter som finns på ditt konto. </p><p> Klicka på <b>Lägg till agent</b> för att lägga till en ny agent. Agenter du lägger till kommer att få ett e-postmeddelande med en bekräftelselänk för att aktivera sitt konto, vartefter de kan komma åt Chatwoot och svara på meddelanden. </p><p> Åtkomst till Chatwoots funktioner baseras på följande roller: </p><p> <b>Agent</b> - Agenter med denna roll kan endast komma åt inkorgar, rapporter och konversationer. De kan tilldela konversationer till andra agenter eller sig själva och lösa konversationer.</p><p> <b>Administratör</b> - Administratörer kommer att ha tillgång till alla Chatwoot-funktioner som är aktiverade för ditt konto, inklusive inställningar, tillsammans med alla normala agenters privilegier.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administratör",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/sv/auditLogs.json b/app/javascript/dashboard/i18n/locale/sv/auditLogs.json
index 37b3a201a04e7..86ee92ebe0bf6 100644
--- a/app/javascript/dashboard/i18n/locale/sv/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/sv/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Det finns inga objekt som matchar denna fråga",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/sv/automation.json b/app/javascript/dashboard/i18n/locale/sv/automation.json
index af3b2f82241b4..57eac69562110 100644
--- a/app/javascript/dashboard/i18n/locale/sv/automation.json
+++ b/app/javascript/dashboard/i18n/locale/sv/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Laddar upp...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sv/bulkActions.json b/app/javascript/dashboard/i18n/locale/sv/bulkActions.json
index 220c2de0b5ffa..28f74b4a27c16 100644
--- a/app/javascript/dashboard/i18n/locale/sv/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/sv/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Tilldela",
     "YES": "Ja",
+    "SEARCH_INPUT_PLACEHOLDER": "Sök",
     "ASSIGN_AGENT_TOOLTIP": "Tilldela agent",
     "ASSIGN_TEAM_TOOLTIP": "Tilldela team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "Inget",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/sv/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/sv/cannedMgmt.json
index 1447159b0863c..158453770e7ec 100644
--- a/app/javascript/dashboard/i18n/locale/sv/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sv/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Svarsmallar",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Lägg till svarsmall",
     "LOADING": "Hämtar svarsmallar...",
     "SEARCH_404": "Det finns inga objekt som matchar denna fråga.",
-    "SIDEBAR_TXT": "<p><b>Svarsmallar</b> </p><p> Svarsmallar är mallar med färdiga svar som hjälper dig att snabbt svara på en konversation. För att infoga en svarsmall i en chatt, kan agenter skriva en kortkod som föregås av ett \"/\"-tecken. </p><p> Du kan hantera dina svarsmallar från denna sida eller skapa nya med hjälp av knappen \"Lägg till svarsmallar\".</p><p>Öppna <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Dokumentation av svarsmallar</a> i en annan flik för mer information.</p><p>Kolla även in det helt nya <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Biblioteket med svarsmallar</a>.</p>",
     "LIST": {
       "404": "Det finns inga svarsmallar tillgängliga på detta konto.",
       "TITLE": "Hantera svarsmallar",
diff --git a/app/javascript/dashboard/i18n/locale/sv/contact.json b/app/javascript/dashboard/i18n/locale/sv/contact.json
index d57c6655fe343..6e740857e7619 100644
--- a/app/javascript/dashboard/i18n/locale/sv/contact.json
+++ b/app/javascript/dashboard/i18n/locale/sv/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kontakten har slagits samman",
       "ERROR_MESSAGE": "Kunde inte slå samman kontakter, försök igen!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sv/conversation.json b/app/javascript/dashboard/i18n/locale/sv/conversation.json
index 3a40f68bde2fe..056697b8f2b01 100644
--- a/app/javascript/dashboard/i18n/locale/sv/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sv/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Skift + Enter för ny rad. Börja med '/' för att välja en svarsmall.",
       "PRIVATE_MSG_INPUT": "Skift + Enter för ny rad. Detta kommer endast att vara synligt för agenter",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Meddelandesignaturen är inte konfigurerad. Konfigurera den i profilinställningarna.",
-      "CLICK_HERE": "Klicka här för att uppdatera"
+      "CLICK_HERE": "Klicka här för att uppdatera",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
     },
     "REPLYBOX": {
       "REPLY": "Svara",
diff --git a/app/javascript/dashboard/i18n/locale/sv/general.json b/app/javascript/dashboard/i18n/locale/sv/general.json
index 25bb4dfb736d2..c5218d71db000 100644
--- a/app/javascript/dashboard/i18n/locale/sv/general.json
+++ b/app/javascript/dashboard/i18n/locale/sv/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": "Sök",
+      "EMPTY_STATE": "Inga resultat hittades"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sv/generalSettings.json b/app/javascript/dashboard/i18n/locale/sv/generalSettings.json
index 325d7b36a6c6e..581393333ed62 100644
--- a/app/javascript/dashboard/i18n/locale/sv/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sv/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/sv/helpCenter.json b/app/javascript/dashboard/i18n/locale/sv/helpCenter.json
index 4be6a1d03d19b..68e241f1fd752 100644
--- a/app/javascript/dashboard/i18n/locale/sv/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/sv/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/sv/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/sv/inboxMgmt.json
index 68ed3a292226f..76c2f85c6ad6d 100644
--- a/app/javascript/dashboard/i18n/locale/sv/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sv/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inkorgar",
     "SIDEBAR_TXT": "<p><b>Inkorg</b></p> <p> När du ansluter en webbplats eller en Facebook-sida till Chatwoot, så kallas det för en <b>Inkorg</b>. Du kan ha obegränsad mängd inkorgar i ditt Chatwoot-konto. </p><p> Klicka på <b>Lägg till inkorg</b> för att ansluta en webbplats eller en Facebook-sida. </p><p> I instrumentpanelen kan du se alla konversationer från alla dina inkorgar på en enda plats och svara på dem under fliken \"Konversationer\". </p><p> Du kan också se konversationer specifika för en inkorg genom att klicka på inkorgnamnet i den vänstra rutan på instrumentbrädan. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Det finns inga inkorgar kopplade till detta konto."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/sv/integrations.json b/app/javascript/dashboard/i18n/locale/sv/integrations.json
index 3b7d9f5d6d095..f2ecc4a59a8f1 100644
--- a/app/javascript/dashboard/i18n/locale/sv/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/sv/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrationer",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Skapa",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Beskrivning",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Välj team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Prioritet",
+            "PLACEHOLDER": "Välj prioritet",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Skapa",
+        "CANCEL": "Avbryt",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Prioritet",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etiketter",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sv/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/sv/labelsMgmt.json
index 90fd320e85d88..26c19a6578297 100644
--- a/app/javascript/dashboard/i18n/locale/sv/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sv/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiketter",
     "HEADER_BTN_TXT": "Lägg till etikett",
     "LOADING": "Hämtar etiketter",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Det finns inga objekt som matchar denna fråga",
-    "SIDEBAR_TXT": "<p><b>Etiketter</b> <p>Etiketter hjälper dig att kategorisera konversationer och prioritera dem. Du kan tilldela etiketter till en konversation från sidopanelen. <br /><br />Etiketter är knutna till kontot och kan användas för att skapa anpassade arbetsflöden i din organisation. Du kan tilldela en färg till en etikett, det gör det lättare att identifiera etiketten. Du kommer att kunna visa etiketten på sidofältet för att enkelt filtrera konversationerna.</p>",
     "LIST": {
       "404": "Det finns inga etiketter tillgängliga på detta konto.",
       "TITLE": "Hantera etiketter",
@@ -49,7 +50,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": "Lägg till etikett",
diff --git a/app/javascript/dashboard/i18n/locale/sv/macros.json b/app/javascript/dashboard/i18n/locale/sv/macros.json
index ea6e618e9f852..db8bf601a36a0 100644
--- a/app/javascript/dashboard/i18n/locale/sv/macros.json
+++ b/app/javascript/dashboard/i18n/locale/sv/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/sv/report.json b/app/javascript/dashboard/i18n/locale/sv/report.json
index a937178ae0f15..edacf6e017474 100644
--- a/app/javascript/dashboard/i18n/locale/sv/report.json
+++ b/app/javascript/dashboard/i18n/locale/sv/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/sv/search.json b/app/javascript/dashboard/i18n/locale/sv/search.json
index 6219e27e50659..c91d04f32ef3a 100644
--- a/app/javascript/dashboard/i18n/locale/sv/search.json
+++ b/app/javascript/dashboard/i18n/locale/sv/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Konversationer",
       "MESSAGES": "Meddelanden"
     },
+    "SEARCHING_DATA": "Searching",
     "EMPTY_STATE": "Ingen %{item} hittades med orden '%{query}'",
     "EMPTY_STATE_FULL": "Inga resultat hittades med orden '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ att fokusera",
diff --git a/app/javascript/dashboard/i18n/locale/sv/settings.json b/app/javascript/dashboard/i18n/locale/sv/settings.json
index 5d3f3d614b3ad..cd6845a0d63f8 100644
--- a/app/javascript/dashboard/i18n/locale/sv/settings.json
+++ b/app/javascript/dashboard/i18n/locale/sv/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Rapporter",
     "SETTINGS": "Inställningar",
     "CONTACTS": "Kontakter",
+    "CAPTAIN": "Captain",
     "HOME": "Hem",
     "AGENTS": "Agenter",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Din Facebook-anslutning har löpt ut, vänligen återanslut din Facebook-sida för att fortsätta med tjänsterna",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Hjälpcenter",
       "ALL_ARTICLES": "Alla artiklar",
diff --git a/app/javascript/dashboard/i18n/locale/sv/teamsSettings.json b/app/javascript/dashboard/i18n/locale/sv/teamsSettings.json
index c9667d362a9e6..91ef46f4cdb95 100644
--- a/app/javascript/dashboard/i18n/locale/sv/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sv/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "Inget"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Radera ",
diff --git a/app/javascript/dashboard/i18n/locale/ta/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ta/advancedFilters.json
index 353e219badd44..a2521595a30d6 100644
--- a/app/javascript/dashboard/i18n/locale/ta/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ta/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/ta/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json
index 6cd62d27b94dd..87b788ea6dee5 100644
--- a/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "ஏஜென்ட்கள்",
     "HEADER_BTN_TXT": "ஏஜென்ட்களைச் சேர்க்க",
     "LOADING": "ஏஜென்ட் பட்டியலைப் பெறபடுகிறது",
-    "SIDEBAR_TXT": "<p> <b>ஏஜென்ட்கள் </ b> </ p> <p> ஒரு <b> ஏஜென்ட் </ b> உங்கள் வாடிக்கையாளர் சேவை குழுவில் உறுப்பினராக உள்ளார். </p> <p> ஏஜென்ட்கள் உங்கள் பயனர்களிடமிருந்து வரும் செய்திகளைக் காணவும் பதிலளிக்கவும் முடியும். தற்போது உங்கள் கணக்கில் உள்ள அனைத்து ஏஜென்ட்களையும் இந்த பட்டியல் காட்டுகிறது. </p> <p> புதிய ஏஜென்ட்களைச் சேர்க்க <b> முகவரைச் சேர் </ b> என்பதைக் கிளிக் செய்யவும். நீங்கள் சேர்க்கும் ஏஜென்ட் தங்கள் கணக்கைச் செயல்படுத்த உறுதிப்படுத்தல் இணைப்பைக் கொண்ட ஈமெயிலைப் பெறுவார், அதன் பிறகு அவர்கள் சாட்வூட்டை அணுகலாம் மற்றும் செய்திகளுக்கு பதிலளிக்கலாம். </p> <p> சாட்வூட்டின் அம்சங்களுக்கான அணுகல் பின்வரும் பாத்திரங்களை அடிப்படையாகக் கொண்டது. </p> <p> <b> ஏஜென்ட் </ b> - இந்த பாத்திரத்தைக் கொண்ட ஏஜென்ட்கள் இன்பாக்ஸ்கள், அறிக்கைகள் மற்றும் உரையாடல்களை மட்டுமே அணுக முடியும். அவர்கள் மற்ற ஏஜென்ட்களுக்கோ அல்லது தங்களுக்கோ உரையாடல்களை ஒதுக்கலாம் மற்றும் உரையாடல்களை தீர்க்கலாம். </ P> <p> <b> நிர்வாகி </ b> - அமைப்புகள் உட்பட, உங்கள் கணக்கில் இயக்கப்பட்ட அனைத்து சாட்வூட் அம்சங்களுக்கும் மற்றும் இதர சாதாரண சலுகைகளும் அடங்கும்</ p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "நிர்வாகி",
       "AGENT": "ஏஜென்ட்"
diff --git a/app/javascript/dashboard/i18n/locale/ta/auditLogs.json b/app/javascript/dashboard/i18n/locale/ta/auditLogs.json
index 25d1d30ed5628..83feedc7e3049 100644
--- a/app/javascript/dashboard/i18n/locale/ta/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ta/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "இந்த கேள்விக்கு பொருந்தக்கூடியவை எதுவும் இல்லை",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ta/automation.json b/app/javascript/dashboard/i18n/locale/ta/automation.json
index 458627daf54a0..8acc77a2a0118 100644
--- a/app/javascript/dashboard/i18n/locale/ta/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ta/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "பதிவேறுகிறது...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ta/bulkActions.json b/app/javascript/dashboard/i18n/locale/ta/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/ta/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ta/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ta/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ta/cannedMgmt.json
index 898a057a10725..fd388e26a7e59 100644
--- a/app/javascript/dashboard/i18n/locale/ta/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ta/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "பதிவு செய்யப்பட்ட பதில்கள்",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "இந்த கணக்கில் பதிவு செய்யப்பட்ட பதில்கள் எதுவும் இல்லை.",
       "TITLE": "பதிவு செய்யப்பட்ட பதில்களை நிர்வகிக்கவும்",
diff --git a/app/javascript/dashboard/i18n/locale/ta/contact.json b/app/javascript/dashboard/i18n/locale/ta/contact.json
index 9d7c17e1313bf..f3a79b4c08749 100644
--- a/app/javascript/dashboard/i18n/locale/ta/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ta/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/ta/conversation.json b/app/javascript/dashboard/i18n/locale/ta/conversation.json
index 364439a143206..951cb6fafbc6e 100644
--- a/app/javascript/dashboard/i18n/locale/ta/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ta/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "புதிய வரிக்கு Shift + Enter ஐ அழுத்தவும். பதிவு செய்யப்பட்ட பதிலைத் தேர்ந்தெடுக்க '/' உடன் தொடங்கவும்.",
       "PRIVATE_MSG_INPUT": "புதிய வரிக்கு Shift + Enter ஐ அழுத்தவும். இது ஏஜென்ட்களுக்கு மட்டுமே தெரியும்",
       "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": "பதில்",
diff --git a/app/javascript/dashboard/i18n/locale/ta/general.json b/app/javascript/dashboard/i18n/locale/ta/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/ta/general.json
+++ b/app/javascript/dashboard/i18n/locale/ta/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/ta/generalSettings.json b/app/javascript/dashboard/i18n/locale/ta/generalSettings.json
index 6e452195a5b33..445484fb0bc60 100644
--- a/app/javascript/dashboard/i18n/locale/ta/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ta/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ta/helpCenter.json b/app/javascript/dashboard/i18n/locale/ta/helpCenter.json
index b861aed036f21..6225320975dd0 100644
--- a/app/javascript/dashboard/i18n/locale/ta/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ta/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/ta/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ta/inboxMgmt.json
index bf924fe58a51e..8ff31a302a53f 100644
--- a/app/javascript/dashboard/i18n/locale/ta/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ta/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "இன்பாக்ஸ்கள்",
     "SIDEBAR_TXT": "<p> <b> இன்பாக்ஸ் <b> </p> <p> நீங்கள் ஒரு வலைத்தளம் அல்லது ஃபேஸ்புக் பக்கத்தை சாட்வூட்டுடன் இணைக்கும்போது, அது <b> இன்பாக்ஸ் <b> என அழைக்கப்படுகிறது. உங்கள் சாட்வூட் கணக்கில் வரம்பற்ற இன்பாக்ஸை வைத்திருக்க முடியும். </p> <p> ஒரு வலைத்தளம் அல்லது பேஸ்புக் பக்கத்தை இணைக்க <b> இன்பாக்ஸைச் சேர் <b> என்பதைக் கிளிக் செய்க. </p> <p> டாஷ்போர்டில், உங்கள் எல்லா இன்பாக்ஸிலிருந்தும் எல்லா உரையாடல்களையும் ஒரே இடத்தில் காணலாம் மற்றும் அவற்றுக்கு `உரையாடல்கள்` தாவலின் கீழ் பதிலளிக்கலாம். </p> <p> டாஷ்போர்டின் இடது பலகத்தில் உள்ள இன்பாக்ஸ் பெயரைக் கிளிக் செய்வதன் மூலம் இன்பாக்ஸிற்கான குறிப்பிட்ட உரையாடல்களையும் நீங்கள் காணலாம். </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "இந்த கணக்கில் இன்பாக்ஸ்கள் எதுவும் இணைக்கப்படவில்லை."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ta/integrations.json b/app/javascript/dashboard/i18n/locale/ta/integrations.json
index 945fd851dc86a..dcd82f057f2d9 100644
--- a/app/javascript/dashboard/i18n/locale/ta/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ta/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "சேர்ப்புகள்",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "நிலை",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "ரத்துசெய்",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "நிலை",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ta/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ta/labelsMgmt.json
index d9f0878f2b7f1..28bfe5e483a97 100644
--- a/app/javascript/dashboard/i18n/locale/ta/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ta/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "இந்த கேள்விக்கு பொருந்தக்கூடியவை எதுவும் இல்லை",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/ta/macros.json b/app/javascript/dashboard/i18n/locale/ta/macros.json
index 414b3093f2ef7..35774f7ad234d 100644
--- a/app/javascript/dashboard/i18n/locale/ta/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ta/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ta/report.json b/app/javascript/dashboard/i18n/locale/ta/report.json
index c6089d7918664..0e5b5c9664801 100644
--- a/app/javascript/dashboard/i18n/locale/ta/report.json
+++ b/app/javascript/dashboard/i18n/locale/ta/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/ta/search.json b/app/javascript/dashboard/i18n/locale/ta/search.json
index 243c0da2cdf29..7f2e02fc5112f 100644
--- a/app/javascript/dashboard/i18n/locale/ta/search.json
+++ b/app/javascript/dashboard/i18n/locale/ta/search.json
@@ -11,6 +11,7 @@
       "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/i18n/locale/ta/settings.json b/app/javascript/dashboard/i18n/locale/ta/settings.json
index a76dd9dc11cbd..c2462fa8e6699 100644
--- a/app/javascript/dashboard/i18n/locale/ta/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ta/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "அறிக்கைகள்",
     "SETTINGS": "அமைப்புகள்",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "முகப்பு",
     "AGENTS": "ஏஜென்ட்கள்",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ta/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ta/teamsSettings.json
index 085d0d8c1483e..7ba0363948845 100644
--- a/app/javascript/dashboard/i18n/locale/ta/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ta/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/th/advancedFilters.json b/app/javascript/dashboard/i18n/locale/th/advancedFilters.json
index 462f3da9e4391..356e8fc179fc5 100644
--- a/app/javascript/dashboard/i18n/locale/th/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/th/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "และ",
       "OR": "หรือ"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "เท่ากับ",
       "not_equal_to": "ไม่เท่ากับ",
diff --git a/app/javascript/dashboard/i18n/locale/th/agentMgmt.json b/app/javascript/dashboard/i18n/locale/th/agentMgmt.json
index 3837533c8a6cc..8ba4e71f0dbba 100644
--- a/app/javascript/dashboard/i18n/locale/th/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/th/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "พนักงาน",
     "HEADER_BTN_TXT": "เพิ่มพนักงาน",
     "LOADING": "กำลังดึงข้อมูลรายชื่อพนักงาน",
-    "SIDEBAR_TXT": "<p> <b> พนักงาน </b> <p> <b> พนักงาน </b> คือสมาชิกของทีมสนับสนุนลูกค้าของคุณ </p> <p> พนักงานจะสามารถดูและตอบกลับข้อความจากผู้ใช้ของคุณได้ รายการนี้แสดงพนักงานทั้งหมดที่อยู่ในบัญชีของคุณ </p> <p> คลิกที่ <b> เพิ่มตัวแทน </b> เพื่อเพิ่มตัวแทนใหม่ ตัวแทนที่คุณเพิ่มจะได้รับอีเมลพร้อมลิงก์ยืนยันเพื่อเปิดใช้งานบัญชีของพวกเขาหลังจากนั้นพวกเขาสามารถเข้าถึง Chatwoot และตอบกลับข้อความได้ </p> <p> การเข้าถึงคุณสมบัติของ Chatwoot ขึ้นอยู่กับบทบาทต่อไปนี้ </p> <p> <b> พนักงาน </b> - ตัวแทนที่มีบทบาทนี้สามารถเข้าถึงได้เฉพาะกล่องจดหมายรายงานและการสนทนา พวกเขาสามารถกำหนดการสนทนาให้กับตัวแทนคนอื่น ๆ หรือตัวเองและแก้ไขการสนทนาได้ </p> <p> <b> ผู้ดูแลระบบ </b> - ผู้ดูแลระบบจะสามารถเข้าถึงคุณลักษณะ Chatwoot ทั้งหมดที่เปิดใช้งานสำหรับบัญชีของคุณรวมถึงการตั้งค่าพร้อมด้วย สิทธิพิเศษของตัวแทนทั่วไป </p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "ผู้ดูเเล",
       "AGENT": "พนักงาน"
diff --git a/app/javascript/dashboard/i18n/locale/th/auditLogs.json b/app/javascript/dashboard/i18n/locale/th/auditLogs.json
index 44dd1f26d1258..a457b3a94d64e 100644
--- a/app/javascript/dashboard/i18n/locale/th/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/th/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "ไม่มีรายการที่ตรงกับเนื้อหานี้",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/th/automation.json b/app/javascript/dashboard/i18n/locale/th/automation.json
index ccba934133529..f2961416ca488 100644
--- a/app/javascript/dashboard/i18n/locale/th/automation.json
+++ b/app/javascript/dashboard/i18n/locale/th/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "คุณต้องมีเงื่อนไขอย่างน้อย 1 การกระทำเพื่อบันทึก",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Geben Sie hier Ihre Nachricht ein",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Teams auswählen"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Teams auswählen",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "เปิดใช้เงื่อนไขอัตโนมัติ",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "กำลังอัปโหลด",
       "LABEL_UPLOADED": "การอัปโหลดเสร็จสมบูรณ์",
       "LABEL_UPLOAD_FAILED": "อัปโหลดไม่สำเร็จ"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "โปรดระบุค่า",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/th/bulkActions.json b/app/javascript/dashboard/i18n/locale/th/bulkActions.json
index 8aff7ecc850bb..54e49da0efe4e 100644
--- a/app/javascript/dashboard/i18n/locale/th/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/th/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "มอบหมาย",
     "YES": "ใช่",
+    "SEARCH_INPUT_PLACEHOLDER": "ค้นหา",
     "ASSIGN_AGENT_TOOLTIP": "มอบหมายให้กับ",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "ไม่มี",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/th/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/th/cannedMgmt.json
index c33dd55e24fa9..b9771ef1afb1d 100644
--- a/app/javascript/dashboard/i18n/locale/th/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/th/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "คำตอบสำเร็จรูป",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "ไม่มีการตอบสำเร็จรูปในบัญชีนี้",
       "TITLE": "จัดกาาคำตอบสำเร็จรูป",
diff --git a/app/javascript/dashboard/i18n/locale/th/contact.json b/app/javascript/dashboard/i18n/locale/th/contact.json
index 9459caf1db3c5..517cce91bfc36 100644
--- a/app/javascript/dashboard/i18n/locale/th/contact.json
+++ b/app/javascript/dashboard/i18n/locale/th/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "รวมผู้ติดต่อสำเร็จเเล้ว",
       "ERROR_MESSAGE": "ไม่สามารถรวมผู้ติดต่อได้ โปรดลองใหม่อีกครั้ง!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/th/conversation.json b/app/javascript/dashboard/i18n/locale/th/conversation.json
index c3293bafa2dd1..437873d5f0849 100644
--- a/app/javascript/dashboard/i18n/locale/th/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/th/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter สำหรับบรรทัดใหม่ เริ่มต้นด้วย '/' เพื่อเลือกคำตอบสำเร็จรูป",
       "PRIVATE_MSG_INPUT": "Shift + enter สำหรับบรรทัดใหม่ สิ่งนี้จะปรากฏแก่พนักงานเท่านั้น",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "ข้อความลายเซ็นต์ไม่ได้ถูกตั้งค่า โปรดปรับแต่งในหน้าตั้งค่าข้อมูลส่วนตัว",
-      "CLICK_HERE": "คลิกที่นี่เพื่ออัปเดต"
+      "CLICK_HERE": "คลิกที่นี่เพื่ออัปเดต",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
     },
     "REPLYBOX": {
       "REPLY": "ตอบ",
diff --git a/app/javascript/dashboard/i18n/locale/th/general.json b/app/javascript/dashboard/i18n/locale/th/general.json
index 25bb4dfb736d2..a081fc80ad69b 100644
--- a/app/javascript/dashboard/i18n/locale/th/general.json
+++ b/app/javascript/dashboard/i18n/locale/th/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": "ค้นหา",
+      "EMPTY_STATE": "No results found"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/th/generalSettings.json b/app/javascript/dashboard/i18n/locale/th/generalSettings.json
index c503e8c767990..544532ca671dd 100644
--- a/app/javascript/dashboard/i18n/locale/th/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/th/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "ออฟไลน์"
+      "OFFLINE": "ออฟไลน์",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "โหลดใหม่"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "จนกว่าพรุ่งนี้",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/th/helpCenter.json b/app/javascript/dashboard/i18n/locale/th/helpCenter.json
index 859236cc81e92..91808be4b465b 100644
--- a/app/javascript/dashboard/i18n/locale/th/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/th/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/th/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/th/inboxMgmt.json
index fea6b9c18b9a1..9ac2b8f1f1da4 100644
--- a/app/javascript/dashboard/i18n/locale/th/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/th/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "กล่องข้อความ",
     "SIDEBAR_TXT": "<p><b>กล่องข้อความ</b></p> <p> เมื่อคุณเชื่อมต่อเว็บไซต์หรือหน้า Facebook กับ Chatwoot จะเรียกว่า <b>Inbox</b> คุณสามารถมีกล่องจดหมายได้ไม่ จำกัด ในบัญชี Chatwoot ของคุณ </p> <p> คลิกที่ <b> เพิ่มกล่องจดหมาย </b>เพื่อเชื่อมต่อเว็บไซต์หรือเพจ Facebook </p> <p> ในแดชบอร์ดคุณสามารถดูการสนทนาทั้งหมดจากกล่องจดหมายทั้งหมดของคุณในที่เดียวและตอบกลับได้ในแท็บ \"การสนทนา\" </p> <p> คุณยังสามารถดูการสนทนาเฉพาะสำหรับกล่องจดหมายได้โดยคลิกที่ชื่อกล่องจดหมายในบานหน้าต่างด้านซ้ายของแผงควบคุม </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "ไม่มีกล่องข้อความที่เกี่ยวข้องในบัญชีนี้"
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/th/integrations.json b/app/javascript/dashboard/i18n/locale/th/integrations.json
index 14f4e00bb120f..00cc71664bdff 100644
--- a/app/javascript/dashboard/i18n/locale/th/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/th/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "การเชื่อมต่อกับระบบ",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "เหตุการณ์ที่ติดตามอยู่",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "สร้าง",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "ลิงก์",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "หัวข้อ",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "โปรดระบุหัวข้อด้วย"
+          },
+          "DESCRIPTION": {
+            "LABEL": "คำอธิบาย",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "ทีม",
+            "PLACEHOLDER": "เลือกทีม",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "ป้ายกำกับ",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "สถานะ",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "สร้าง",
+        "CANCEL": "ยกเลิก",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "สถานะ",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "ป้ายกำกับ",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/th/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/th/labelsMgmt.json
index bc542c3ffbcf5..91dcfbbfebdab 100644
--- a/app/javascript/dashboard/i18n/locale/th/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/th/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "ป้ายกำกับ",
     "HEADER_BTN_TXT": "เพิ่มป้ายกำกับ",
     "LOADING": "กำลังโหลดป้ายกำกับ",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "ไม่มีรายการที่ตรงกับเนื้อหานี้",
-    "SIDEBAR_TXT": "<p><b>ป้ายกำกับ</b><p> ป้ายกำกับช่วยให้คุณจัดกลุ่มและลำดับความสำคัญของการสนทนา คุณสามารถติดป้ายกำกับให้กับการสนทนาได้จากหน้าต่างด้านขวา <br /><br /> ป้ายกำกับผูกกับบัญชีและสามารถใช้เพื่อสร้างระบบการทำงานในบริษัทของคุณ คุณยังสามารถปรับแต่งสีของป้ายกำกับได้ซึ่งช่วยให้มองเห็นป้ายได้ง่ายขึ้น ป้ายกำกับที่สร้างขึ้นจะแสดงบนเมนูข้าง",
     "LIST": {
       "404": "ไม่มีป้ายกำกับในบัญชีนี้",
       "TITLE": "จัดการป้ายกำกับ",
@@ -49,7 +50,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": "เพิ่มป้ายกำกับ",
diff --git a/app/javascript/dashboard/i18n/locale/th/macros.json b/app/javascript/dashboard/i18n/locale/th/macros.json
index 9352844b7903f..4244efd3ef504 100644
--- a/app/javascript/dashboard/i18n/locale/th/macros.json
+++ b/app/javascript/dashboard/i18n/locale/th/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "โปรดระบุค่า",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/th/report.json b/app/javascript/dashboard/i18n/locale/th/report.json
index 33decb4142ef4..9324013326925 100644
--- a/app/javascript/dashboard/i18n/locale/th/report.json
+++ b/app/javascript/dashboard/i18n/locale/th/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": "การสนทนาที่พนักงานดูแล",
@@ -536,6 +537,7 @@
       "LABELS": "ป้ายกำกับ",
       "TEAMS": "ทีม"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/th/search.json b/app/javascript/dashboard/i18n/locale/th/search.json
index da078584b4348..b32ed7360179b 100644
--- a/app/javascript/dashboard/i18n/locale/th/search.json
+++ b/app/javascript/dashboard/i18n/locale/th/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "การสนทนา",
       "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/i18n/locale/th/settings.json b/app/javascript/dashboard/i18n/locale/th/settings.json
index 5b0155803a15d..be3e208899d6f 100644
--- a/app/javascript/dashboard/i18n/locale/th/settings.json
+++ b/app/javascript/dashboard/i18n/locale/th/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "รายงาน",
     "SETTINGS": "ตั้งค่า",
     "CONTACTS": "ผู้ติดต่อ",
+    "CAPTAIN": "Captain",
     "HOME": "หน้าหลัก",
     "AGENTS": "พนักงาน",
     "AGENT_BOTS": "บอท",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "ภาพรวม",
-    "FACEBOOK_REAUTHORIZE": "การเชื่อมต่อกับ Facebook หมดอายุแล้ว โปรดเชื่อมต่อใหม่อีกครั้ง",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/th/teamsSettings.json b/app/javascript/dashboard/i18n/locale/th/teamsSettings.json
index ce8d3e2374f83..59c9b4369d2e8 100644
--- a/app/javascript/dashboard/i18n/locale/th/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/th/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "สร้างทีมใหม่",
     "HEADER": "ทีม",
-    "SIDEBAR_TXT": "<p><b>ทีม</b></p> <p>คุณสามารถจัดกลุ่มให้กับพนักงานตามความรับผิดชอบที่พวกเขาได้รับ <br /> พนักงานหนึ่งคนสามารถเข้าร่วมได้หลายทีม มอบหมายการสนทนาให้กับทีมเมื่อต้องทำงานร่วมกัน </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "ยังไม่มีทีมที่ถูกสร้างในบัญชีนี้",
-      "EDIT_TEAM": "แก้ไขทีม"
+      "EDIT_TEAM": "แก้ไขทีม",
+      "NONE": "ไม่มี"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "ไม่สามารถลบทีมได้ โปรดลองใหม่อีกครั้ง"
       },
       "CONFIRM": {
-        "TITLE": "คุณแน่ใจว่าต้องการลบ %{teamName} หรือไม่",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "โปรดพิมพ์ {teamName} เพื่อยืนยัน",
         "MESSAGE": "การลบทีมจะยกเลิกการมอบหมายการสนทนาที่ทีมนี้รับผิดชอบไปด้วย",
         "YES": "ลบ ",
diff --git a/app/javascript/dashboard/i18n/locale/tl/advancedFilters.json b/app/javascript/dashboard/i18n/locale/tl/advancedFilters.json
new file mode 100644
index 0000000000000..564bd161bd6ce
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/advancedFilters.json
@@ -0,0 +1,104 @@
+{
+  "FILTER": {
+    "TITLE": "Filter conversations",
+    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
+    "EDIT_CUSTOM_FILTER": "Edit Folder",
+    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
+    "ADD_NEW_FILTER": "Add filter",
+    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
+    "SUBMIT_BUTTON_LABEL": "Apply filters",
+    "UPDATE_BUTTON_LABEL": "Update folder",
+    "CANCEL_BUTTON_LABEL": "Cancel",
+    "CLEAR_BUTTON_LABEL": "Clear filters",
+    "FOLDER_LABEL": "Folder Name",
+    "FOLDER_QUERY_LABEL": "Folder Query",
+    "EMPTY_VALUE_ERROR": "Value is required.",
+    "TOOLTIP_LABEL": "Filter conversations",
+    "QUERY_DROPDOWN_LABELS": {
+      "AND": "AND",
+      "OR": "OR"
+    },
+    "INPUT_PLACEHOLDER": "Enter value",
+    "OPERATOR_LABELS": {
+      "equal_to": "Equal to",
+      "not_equal_to": "Not equal to",
+      "contains": "Contains",
+      "does_not_contain": "Does not contain",
+      "is_present": "Is present",
+      "is_not_present": "Is not present",
+      "is_greater_than": "Is greater than",
+      "is_less_than": "Is lesser than",
+      "days_before": "Is x days before",
+      "starts_with": "Starts with"
+    },
+    "ATTRIBUTE_LABELS": {
+      "TRUE": "True",
+      "FALSE": "False"
+    },
+    "ATTRIBUTES": {
+      "STATUS": "Status",
+      "ASSIGNEE_NAME": "Assignee name",
+      "INBOX_NAME": "Inbox name",
+      "TEAM_NAME": "Team name",
+      "CONVERSATION_IDENTIFIER": "Conversation identifier",
+      "CAMPAIGN_NAME": "Campaign name",
+      "LABELS": "Labels",
+      "BROWSER_LANGUAGE": "Browser language",
+      "PRIORITY": "Priority",
+      "COUNTRY_NAME": "Country name",
+      "REFERER_LINK": "Referer link",
+      "CUSTOM_ATTRIBUTE_LIST": "List",
+      "CUSTOM_ATTRIBUTE_TEXT": "Text",
+      "CUSTOM_ATTRIBUTE_NUMBER": "Number",
+      "CUSTOM_ATTRIBUTE_LINK": "Link",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
+      "CREATED_AT": "Created at",
+      "LAST_ACTIVITY": "Last activity"
+    },
+    "GROUPS": {
+      "STANDARD_FILTERS": "Standard filters",
+      "ADDITIONAL_FILTERS": "Additional filters",
+      "CUSTOM_ATTRIBUTES": "Custom attributes"
+    },
+    "CUSTOM_VIEWS": {
+      "ADD": {
+        "TITLE": "Do you want to save this filter?",
+        "LABEL": "Name this filter",
+        "PLACEHOLDER": "Name your filter to refer it later.",
+        "ERROR_MESSAGE": "Name is required.",
+        "SAVE_BUTTON": "Save filter",
+        "CANCEL_BUTTON": "Cancel",
+        "API_FOLDERS": {
+          "SUCCESS_MESSAGE": "Folder created successfully.",
+          "ERROR_MESSAGE": "Error while creating folder."
+        },
+        "API_SEGMENTS": {
+          "SUCCESS_MESSAGE": "Segment created successfully.",
+          "ERROR_MESSAGE": "Error while creating segment."
+        }
+      },
+      "EDIT": {
+        "EDIT_BUTTON": "Edit folder"
+      },
+      "DELETE": {
+        "DELETE_BUTTON": "Delete filter",
+        "MODAL": {
+          "CONFIRM": {
+            "TITLE": "Confirm deletion",
+            "MESSAGE": "Are you sure to delete the filter ",
+            "YES": "Yes, delete",
+            "NO": "No, keep it"
+          }
+        },
+        "API_FOLDERS": {
+          "SUCCESS_MESSAGE": "Folder deleted successfully.",
+          "ERROR_MESSAGE": "Error while deleting folder."
+        },
+        "API_SEGMENTS": {
+          "SUCCESS_MESSAGE": "Segment deleted successfully.",
+          "ERROR_MESSAGE": "Error while deleting segment."
+        }
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/agentBots.json b/app/javascript/dashboard/i18n/locale/tl/agentBots.json
new file mode 100644
index 0000000000000..fb744b4a980db
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/agentBots.json
@@ -0,0 +1,73 @@
+{
+  "AGENT_BOTS": {
+    "HEADER": "Bots",
+    "LOADING_EDITOR": "Loading editor...",
+    "HEADER_BTN_TXT": "Add bot configuration",
+    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
+    "CSML_BOT_EDITOR": {
+      "NAME": {
+        "LABEL": "Bot name",
+        "PLACEHOLDER": "Name your bot.",
+        "ERROR": "Bot name is required."
+      },
+      "DESCRIPTION": {
+        "LABEL": "Bot description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "BOT_CONFIG": {
+        "ERROR": "Please enter your CSML bot configuration above.",
+        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+      },
+      "SUBMIT": "Validate and save"
+    },
+    "BOT_CONFIGURATION": {
+      "TITLE": "Select an agent bot",
+      "DESC": "Assign an Agent Bot to your inbox. They can handle initial conversations and transfer them to a live agent when necessary.",
+      "SUBMIT": "Update",
+      "DISCONNECT": "Disconnect bot",
+      "SUCCESS_MESSAGE": "Successfully updated the agent bot.",
+      "DISCONNECTED_SUCCESS_MESSAGE": "Successfully disconnected the agent bot.",
+      "ERROR_MESSAGE": "Could not update the agent bot. Please try again.",
+      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot. Please try again.",
+      "SELECT_PLACEHOLDER": "Select bot"
+    },
+    "ADD": {
+      "TITLE": "Configure new bot",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot added successfully.",
+        "ERROR_MESSAGE": "Could not add bot. Please try again later."
+      }
+    },
+    "LIST": {
+      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
+      "LOADING": "Fetching bots...",
+      "TYPE": "Bot type"
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "TITLE": "Delete bot",
+      "SUBMIT": "Delete",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot deleted successfully.",
+        "ERROR_MESSAGE": "Could not delete bot. Please try again."
+      }
+    },
+    "EDIT": {
+      "BUTTON_TEXT": "Edit",
+      "LOADING": "Fetching bots...",
+      "TITLE": "Edit bot",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot updated successfully.",
+        "ERROR_MESSAGE": "Could not update bot. Please try again."
+      }
+    },
+    "TYPES": {
+      "WEBHOOK": "Webhook bot",
+      "CSML": "CSML bot"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json
new file mode 100644
index 0000000000000..442b6becd2ac5
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json
@@ -0,0 +1,120 @@
+{
+  "AGENT_MGMT": {
+    "HEADER": "Agents",
+    "HEADER_BTN_TXT": "Add Agent",
+    "LOADING": "Fetching Agent List",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
+    "AGENT_TYPES": {
+      "ADMINISTRATOR": "Administrator",
+      "AGENT": "Agent"
+    },
+    "LIST": {
+      "404": "There are no agents associated to this account",
+      "TITLE": "Manage agents in your team",
+      "DESC": "You can add/remove agents to/in your team.",
+      "NAME": "Name",
+      "EMAIL": "EMAIL",
+      "STATUS": "Status",
+      "ACTIONS": "Actions",
+      "VERIFIED": "Verified",
+      "VERIFICATION_PENDING": "Verification Pending"
+    },
+    "ADD": {
+      "TITLE": "Add agent to your team",
+      "DESC": "You can add people who will be able to handle support for your inboxes.",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "FORM": {
+        "NAME": {
+          "LABEL": "Agent Name",
+          "PLACEHOLDER": "Please enter a name of the agent"
+        },
+        "AGENT_TYPE": {
+          "LABEL": "Role",
+          "PLACEHOLDER": "Please select a role",
+          "ERROR": "Role is required"
+        },
+        "EMAIL": {
+          "LABEL": "Email Address",
+          "PLACEHOLDER": "Please enter an email address of the agent"
+        },
+        "SUBMIT": "Add Agent"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Agent added successfully",
+        "EXIST_MESSAGE": "Agent email already in use, Please try another email address",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Agent deleted successfully",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit agent",
+      "FORM": {
+        "NAME": {
+          "LABEL": "Agent Name",
+          "PLACEHOLDER": "Please enter a name of the agent"
+        },
+        "AGENT_TYPE": {
+          "LABEL": "Role",
+          "PLACEHOLDER": "Please select a role",
+          "ERROR": "Role is required"
+        },
+        "EMAIL": {
+          "LABEL": "Email Address",
+          "PLACEHOLDER": "Please enter an email address of the agent"
+        },
+        "AGENT_AVAILABILITY": {
+          "LABEL": "Availability",
+          "PLACEHOLDER": "Please select an availability status",
+          "ERROR": "Availability is required"
+        },
+        "SUBMIT": "Edit Agent"
+      },
+      "BUTTON_TEXT": "Edit",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "API": {
+        "SUCCESS_MESSAGE": "Agent updated successfully",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      },
+      "PASSWORD_RESET": {
+        "ADMIN_RESET_BUTTON": "Reset Password",
+        "ADMIN_SUCCESS_MESSAGE": "An email with reset password instructions has been sent to the agent",
+        "SUCCESS_MESSAGE": "Agent password reset successfully",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      }
+    },
+    "SEARCH": {
+      "NO_RESULTS": "No results found."
+    },
+    "MULTI_SELECTOR": {
+      "PLACEHOLDER": "None",
+      "TITLE": {
+        "AGENT": "Select agent",
+        "TEAM": "Select team"
+      },
+      "SEARCH": {
+        "NO_RESULTS": {
+          "AGENT": "No agents found",
+          "TEAM": "No teams found"
+        },
+        "PLACEHOLDER": {
+          "AGENT": "Search agents",
+          "TEAM": "Search teams",
+          "INPUT": "Search for agents"
+        }
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/tl/attributesMgmt.json
new file mode 100644
index 0000000000000..64a0e83d6f53f
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/attributesMgmt.json
@@ -0,0 +1,121 @@
+{
+  "ATTRIBUTES_MGMT": {
+    "HEADER": "Custom Attributes",
+    "HEADER_BTN_TXT": "Add Custom Attribute",
+    "LOADING": "Fetching custom attributes",
+    "SIDEBAR_TXT": "<p><b>Custom Attributes</b> <p>A custom attribute tracks facts about your contacts/conversation — like the subscription plan, or when they ordered the first item etc. <br /><br />For creating a Custom Attribute, just click on the <b>Add Custom Attribute.</b> You can also edit or delete an existing  Custom Attribute by clicking on the Edit or Delete button.</p>",
+    "ADD": {
+      "TITLE": "Add Custom Attribute",
+      "SUBMIT": "Create",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "FORM": {
+        "NAME": {
+          "LABEL": "Display Name",
+          "PLACEHOLDER": "Enter custom attribute display name",
+          "ERROR": "Name is required"
+        },
+        "DESC": {
+          "LABEL": "Description",
+          "PLACEHOLDER": "Enter custom attribute description",
+          "ERROR": "Description is required"
+        },
+        "MODEL": {
+          "LABEL": "Applies to",
+          "PLACEHOLDER": "Please select one",
+          "ERROR": "Model is required"
+        },
+        "TYPE": {
+          "LABEL": "Type",
+          "PLACEHOLDER": "Please select a type",
+          "ERROR": "Type is required",
+          "LIST": {
+            "LABEL": "List Values",
+            "PLACEHOLDER": "Please enter value and press enter key",
+            "ERROR": "Must have at least one value"
+          }
+        },
+        "KEY": {
+          "LABEL": "Key",
+          "PLACEHOLDER": "Enter custom attribute key",
+          "ERROR": "Key is required",
+          "IN_VALID": "Invalid key"
+        },
+        "REGEX_PATTERN": {
+          "LABEL": "Regex Pattern",
+          "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+        },
+        "REGEX_CUE": {
+          "LABEL": "Regex Cue",
+          "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+        },
+        "ENABLE_REGEX": {
+          "LABEL": "Enable regex validation"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Custom Attribute added successfully!",
+        "ERROR_MESSAGE": "Could not create a Custom Attribute. Please try again later."
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Custom Attribute deleted successfully.",
+        "ERROR_MESSAGE": "Couldn't delete the custom attribute. Try again."
+      },
+      "CONFIRM": {
+        "TITLE": "Are you sure want to delete - %{attributeName}",
+        "PLACE_HOLDER": "Please type {attributeName} to confirm",
+        "MESSAGE": "Deleting will remove the custom attribute",
+        "YES": "Delete ",
+        "NO": "Cancel"
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit Custom Attribute",
+      "UPDATE_BUTTON_TEXT": "Update",
+      "TYPE": {
+        "LIST": {
+          "LABEL": "List Values",
+          "PLACEHOLDER": "Please enter values and press enter key"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Custom Attribute updated successfully",
+        "ERROR_MESSAGE": "There was an error updating custom attribute, please try again"
+      }
+    },
+    "TABS": {
+      "HEADER": "Custom Attributes",
+      "CONVERSATION": "Conversation",
+      "CONTACT": "Contact"
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Type",
+        "Key"
+      ],
+      "BUTTONS": {
+        "EDIT": "Edit",
+        "DELETE": "Delete"
+      },
+      "EMPTY_RESULT": {
+        "404": "There are no custom attributes created",
+        "NOT_FOUND": "There are no custom attributes configured"
+      },
+      "REGEX_PATTERN": {
+        "LABEL": "Regex Pattern",
+        "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+      },
+      "REGEX_CUE": {
+        "LABEL": "Regex Cue",
+        "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+      },
+      "ENABLE_REGEX": {
+        "LABEL": "Enable regex validation"
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/auditLogs.json b/app/javascript/dashboard/i18n/locale/tl/auditLogs.json
new file mode 100644
index 0000000000000..7a693f66cf053
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/auditLogs.json
@@ -0,0 +1,74 @@
+{
+  "AUDIT_LOGS": {
+    "HEADER": "Audit Logs",
+    "HEADER_BTN_TXT": "Add Audit Logs",
+    "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
+    "SEARCH_404": "There are no items matching this query",
+    "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
+    "LIST": {
+      "404": "There are no Audit Logs available in this account.",
+      "TITLE": "Manage Audit Logs",
+      "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
+      "TABLE_HEADER": [
+        "Activity",
+        "Time",
+        "IP Address"
+      ]
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
+      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+    },
+    "DEFAULT_USER": "System",
+    "AUTOMATION_RULE": {
+      "ADD": "%{agentName} created a new automation rule (#%{id})",
+      "EDIT": "%{agentName} updated an automation rule (#%{id})",
+      "DELETE": "%{agentName} deleted an automation rule (#%{id})"
+    },
+    "ACCOUNT_USER": {
+      "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
+      "EDIT": {
+        "SELF": "%{agentName} changed their %{attributes} to %{values}",
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
+      }
+    },
+    "INBOX": {
+      "ADD": "%{agentName} created a new inbox (#%{id})",
+      "EDIT": "%{agentName} updated an inbox (#%{id})",
+      "DELETE": "%{agentName} deleted an inbox (#%{id})"
+    },
+    "WEBHOOK": {
+      "ADD": "%{agentName} created a new webhook (#%{id})",
+      "EDIT": "%{agentName} updated a webhook (#%{id})",
+      "DELETE": "%{agentName} deleted a webhook (#%{id})"
+    },
+    "USER_ACTION": {
+      "SIGN_IN": "%{agentName} signed in",
+      "SIGN_OUT": "%{agentName} signed out"
+    },
+    "TEAM": {
+      "ADD": "%{agentName} created a new team (#%{id})",
+      "EDIT": "%{agentName} updated a team (#%{id})",
+      "DELETE": "%{agentName} deleted a team (#%{id})"
+    },
+    "MACRO": {
+      "ADD": "%{agentName} created a new macro (#%{id})",
+      "EDIT": "%{agentName} updated a macro (#%{id})",
+      "DELETE": "%{agentName} deleted a macro (#%{id})"
+    },
+    "INBOX_MEMBER": {
+      "ADD": "%{agentName} added %{user} to the inbox(#%{inbox_id})",
+      "REMOVE": "%{agentName} removed %{user} from the inbox(#%{inbox_id})"
+    },
+    "TEAM_MEMBER": {
+      "ADD": "%{agentName} added %{user} to the team(#%{team_id})",
+      "REMOVE": "%{agentName} removed %{user} from the team(#%{team_id})"
+    },
+    "ACCOUNT": {
+      "EDIT": "%{agentName} updated the account configuration (#%{id})"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/automation.json b/app/javascript/dashboard/i18n/locale/tl/automation.json
new file mode 100644
index 0000000000000..9c8207fbd1e15
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/automation.json
@@ -0,0 +1,129 @@
+{
+  "AUTOMATION": {
+    "HEADER": "Automations",
+    "HEADER_BTN_TXT": "Add Automation Rule",
+    "LOADING": "Fetching automation rules",
+    "SIDEBAR_TXT": "<p><b>Automation Rules</b> <p>Automation can replace and automate existing processes that require manual effort. You can do many things with automation, including adding labels and assigning conversation to the best agent. So the team focuses on what they do best and spends more little time on manual tasks.</p>",
+    "ADD": {
+      "TITLE": "Add Automation Rule",
+      "SUBMIT": "Create",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "FORM": {
+        "NAME": {
+          "LABEL": "Rule Name",
+          "PLACEHOLDER": "Enter rule name",
+          "ERROR": "Name is required"
+        },
+        "DESC": {
+          "LABEL": "Description",
+          "PLACEHOLDER": "Enter rule description",
+          "ERROR": "Description is required"
+        },
+        "EVENT": {
+          "LABEL": "Event",
+          "PLACEHOLDER": "Please select one",
+          "ERROR": "Event is required"
+        },
+        "CONDITIONS": {
+          "LABEL": "Conditions"
+        },
+        "ACTIONS": {
+          "LABEL": "Actions"
+        }
+      },
+      "CONDITION_BUTTON_LABEL": "Add Condition",
+      "ACTION_BUTTON_LABEL": "Add Action",
+      "API": {
+        "SUCCESS_MESSAGE": "Automation rule added successfully",
+        "ERROR_MESSAGE": "Could not able to create a automation rule, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Active",
+        "Created on"
+      ],
+      "404": "No automation rules found"
+    },
+    "DELETE": {
+      "TITLE": "Delete Automation Rule",
+      "SUBMIT": "Delete",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Automation rule deleted successfully",
+        "ERROR_MESSAGE": "Could not able to delete a automation rule, Please try again later"
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit Automation Rule",
+      "SUBMIT": "Update",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "API": {
+        "SUCCESS_MESSAGE": "Automation rule updated successfully",
+        "ERROR_MESSAGE": "Could not update automation rule, Please try again later"
+      }
+    },
+    "CLONE": {
+      "TOOLTIP": "Clone",
+      "API": {
+        "SUCCESS_MESSAGE": "Automation cloned successfully",
+        "ERROR_MESSAGE": "Could not clone automation rule, Please try again later"
+      }
+    },
+    "FORM": {
+      "EDIT": "Edit",
+      "CREATE": "Create",
+      "DELETE": "Delete",
+      "CANCEL": "Cancel",
+      "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
+    },
+    "CONDITION": {
+      "DELETE_MESSAGE": "You need to have atleast one condition to save",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
+    },
+    "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",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
+    },
+    "TOGGLE": {
+      "ACTIVATION_TITLE": "Activate Automation Rule",
+      "DEACTIVATION_TITLE": "Deactivate Automation Rule",
+      "ACTIVATION_DESCRIPTION": "This action will activate the automation rule '{automationName}'. Are you sure you want to proceed?",
+      "DEACTIVATION_DESCRIPTION": "This action will deactivate the automation rule '{automationName}'. Are you sure you want to proceed?",
+      "ACTIVATION_SUCCESFUL": "Automation Rule Activated Successfully",
+      "DEACTIVATION_SUCCESFUL": "Automation Rule Deactivated Successfully",
+      "ACTIVATION_ERROR": "Could not Activate Automation, Please try again later",
+      "DEACTIVATION_ERROR": "Could not Deactivate Automation, Please try again later",
+      "CONFIRMATION_LABEL": "Yes",
+      "CANCEL_LABEL": "No"
+    },
+    "ATTACHMENT": {
+      "UPLOAD_ERROR": "Could not upload attachment, Please try again",
+      "LABEL_IDLE": "Upload Attachment",
+      "LABEL_UPLOADING": "Uploading...",
+      "LABEL_UPLOADED": "Successfully Uploaded",
+      "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/bulkActions.json b/app/javascript/dashboard/i18n/locale/tl/bulkActions.json
new file mode 100644
index 0000000000000..dbf37defba0f6
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/bulkActions.json
@@ -0,0 +1,41 @@
+{
+  "BULK_ACTION": {
+    "CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
+    "AGENT_SELECT_LABEL": "Select agent",
+    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
+    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
+    "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.",
+    "ASSIGN_FAILED": "Failed to assign conversations. Please try again.",
+    "RESOLVE_SUCCESFUL": "Conversations resolved successfully.",
+    "RESOLVE_FAILED": "Failed to resolve conversations. Please try again.",
+    "ALL_CONVERSATIONS_SELECTED_ALERT": "Conversations visible on this page are only selected.",
+    "AGENT_LIST_LOADING": "Loading agents",
+    "UPDATE": {
+      "CHANGE_STATUS": "Change status",
+      "SNOOZE_UNTIL": "Snooze",
+      "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
+      "UPDATE_FAILED": "Failed to update conversations. Please try again."
+    },
+    "LABELS": {
+      "ASSIGN_LABELS": "Assign labels",
+      "NO_LABELS_FOUND": "No labels found for",
+      "ASSIGN_SELECTED_LABELS": "Assign selected labels",
+      "ASSIGN_SUCCESFUL": "Labels assigned successfully.",
+      "ASSIGN_FAILED": "Failed to assign labels. Please try again."
+    },
+    "TEAMS": {
+      "TEAM_SELECT_LABEL": "Select team",
+      "NONE": "None",
+      "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
+      "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
+      "ASSIGN_FAILED": "Failed to assign team. Please try again."
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/campaign.json b/app/javascript/dashboard/i18n/locale/tl/campaign.json
new file mode 100644
index 0000000000000..bbcc463ee493c
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/campaign.json
@@ -0,0 +1,126 @@
+{
+  "CAMPAIGN": {
+    "HEADER": "Campaigns",
+    "SIDEBAR_TXT": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations. Click on <b>Add Campaign</b> to create a new campaign. You can also edit or delete an existing campaign by clicking on the Edit or Delete button.",
+    "HEADER_BTN_TXT": {
+      "ONE_OFF": "Create a one off campaign",
+      "ONGOING": "Create a ongoing campaign"
+    },
+    "ADD": {
+      "TITLE": "Create a campaign",
+      "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "CREATE_BUTTON_TEXT": "Create",
+      "FORM": {
+        "TITLE": {
+          "LABEL": "Title",
+          "PLACEHOLDER": "Please enter the title of campaign",
+          "ERROR": "Title is required"
+        },
+        "SCHEDULED_AT": {
+          "LABEL": "Scheduled time",
+          "PLACEHOLDER": "Please select the time",
+          "CONFIRM": "Confirm",
+          "ERROR": "Scheduled time is required"
+        },
+        "AUDIENCE": {
+          "LABEL": "Audience",
+          "PLACEHOLDER": "Select the customer labels",
+          "ERROR": "Audience is required"
+        },
+        "INBOX": {
+          "LABEL": "Select Inbox",
+          "PLACEHOLDER": "Select Inbox",
+          "ERROR": "Inbox is required"
+        },
+        "MESSAGE": {
+          "LABEL": "Message",
+          "PLACEHOLDER": "Please enter the message of campaign",
+          "ERROR": "Message is required"
+        },
+        "SENT_BY": {
+          "LABEL": "Sent by",
+          "PLACEHOLDER": "Please select the the content of campaign",
+          "ERROR": "Sender is required"
+        },
+        "END_POINT": {
+          "LABEL": "URL",
+          "PLACEHOLDER": "Please enter the URL",
+          "ERROR": "Please enter a valid URL"
+        },
+        "TIME_ON_PAGE": {
+          "LABEL": "Time on page(Seconds)",
+          "PLACEHOLDER": "Please enter the time",
+          "ERROR": "Time on page is required"
+        },
+        "ENABLED": "Enable campaign",
+        "TRIGGER_ONLY_BUSINESS_HOURS": "Trigger only during business hours",
+        "SUBMIT": "Add Campaign"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Campaign created successfully",
+        "ERROR_MESSAGE": "There was an error. Please try again."
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure to delete?",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Campaign deleted successfully",
+        "ERROR_MESSAGE": "Could not delete the campaign. Please try again later."
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit campaign",
+      "UPDATE_BUTTON_TEXT": "Update",
+      "API": {
+        "SUCCESS_MESSAGE": "Campaign updated successfully",
+        "ERROR_MESSAGE": "There was an error, please try again"
+      }
+    },
+    "LIST": {
+      "LOADING_MESSAGE": "Loading campaigns...",
+      "404": "There are no campaigns created for this inbox.",
+      "TABLE_HEADER": {
+        "TITLE": "Title",
+        "MESSAGE": "Message",
+        "INBOX": "Inbox",
+        "STATUS": "Status",
+        "SENDER": "Sender",
+        "URL": "URL",
+        "SCHEDULED_AT": "Scheduled time",
+        "TIME_ON_PAGE": "Time(Seconds)",
+        "CREATED_AT": "Created at"
+      },
+      "BUTTONS": {
+        "ADD": "Add",
+        "EDIT": "Edit",
+        "DELETE": "Delete"
+      },
+      "STATUS": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled",
+        "COMPLETED": "Completed",
+        "ACTIVE": "Active"
+      },
+      "SENDER": {
+        "BOT": "Bot"
+      }
+    },
+    "ONE_OFF": {
+      "HEADER": "One off campaigns",
+      "404": "There are no one off campaigns created",
+      "INBOXES_NOT_FOUND": "Please create an sms inbox and start adding campaigns"
+    },
+    "ONGOING": {
+      "HEADER": "Ongoing campaigns",
+      "404": "There are no ongoing campaigns created",
+      "INBOXES_NOT_FOUND": "Please create an website inbox and start adding campaigns"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/tl/cannedMgmt.json
new file mode 100644
index 0000000000000..7721cc3e68422
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/cannedMgmt.json
@@ -0,0 +1,77 @@
+{
+  "CANNED_MGMT": {
+    "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
+    "HEADER_BTN_TXT": "Add canned response",
+    "LOADING": "Fetching canned responses...",
+    "SEARCH_404": "There are no items matching this query.",
+    "LIST": {
+      "404": "There are no canned responses available in this account.",
+      "TITLE": "Manage canned responses",
+      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
+      "TABLE_HEADER": [
+        "Short code",
+        "Content",
+        "Actions"
+      ]
+    },
+    "ADD": {
+      "TITLE": "Add canned response",
+      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "FORM": {
+        "SHORT_CODE": {
+          "LABEL": "Short code",
+          "PLACEHOLDER": "Please enter a short code.",
+          "ERROR": "Short Code is required."
+        },
+        "CONTENT": {
+          "LABEL": "Message",
+          "PLACEHOLDER": "Please write the message you want to save as a template to use later.",
+          "ERROR": "Message is required."
+        },
+        "SUBMIT": "Submit"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Canned response added successfully.",
+        "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit canned response",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "FORM": {
+        "SHORT_CODE": {
+          "LABEL": "Short code",
+          "PLACEHOLDER": "Please enter a shortcode.",
+          "ERROR": "Short code is required."
+        },
+        "CONTENT": {
+          "LABEL": "Message",
+          "PLACEHOLDER": "Please write the message you want to save as a template to use later.",
+          "ERROR": "Message is required."
+        },
+        "SUBMIT": "Submit"
+      },
+      "BUTTON_TEXT": "Edit",
+      "API": {
+        "SUCCESS_MESSAGE": "Canned response is updated successfully.",
+        "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Canned response deleted successfully.",
+        "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm deletion",
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, delete ",
+        "NO": "No, keep "
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/chatlist.json b/app/javascript/dashboard/i18n/locale/tl/chatlist.json
new file mode 100644
index 0000000000000..1458bf58a0020
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/chatlist.json
@@ -0,0 +1,131 @@
+{
+  "CHAT_LIST": {
+    "LOADING": "Fetching conversations",
+    "LOAD_MORE_CONVERSATIONS": "Load more conversations",
+    "EOF": "All conversations loaded 🎉",
+    "LIST": {
+      "404": "There are no active conversations in this group."
+    },
+    "TAB_HEADING": "Conversations",
+    "MENTION_HEADING": "Mentions",
+    "UNATTENDED_HEADING": "Unattended",
+    "SEARCH": {
+      "INPUT": "Search for People, Chats, Saved Replies .."
+    },
+    "FILTER_ALL": "All",
+    "ASSIGNEE_TYPE_TABS": {
+      "me": "Mine",
+      "unassigned": "Unassigned",
+      "all": "All"
+    },
+    "CHAT_STATUS_FILTER_ITEMS": {
+      "open": {
+        "TEXT": "Open"
+      },
+      "resolved": {
+        "TEXT": "Resolved"
+      },
+      "pending": {
+        "TEXT": "Pending"
+      },
+      "snoozed": {
+        "TEXT": "Snoozed"
+      },
+      "all": {
+        "TEXT": "All"
+      }
+    },
+    "VIEW_FILTER": "View",
+    "SORT_TOOLTIP_LABEL": "Sort conversations",
+    "CHAT_SORT": {
+      "STATUS": "Status",
+      "ORDER_BY": "Order by"
+    },
+    "CHAT_TIME_STAMP": {
+      "CREATED": {
+        "LATEST": "Created",
+        "OLDEST": "Created at:"
+      },
+      "LAST_ACTIVITY": {
+        "NOT_ACTIVE": "Last activity:",
+        "ACTIVE": "Last activity"
+      }
+    },
+    "SORT_ORDER_ITEMS": {
+      "last_activity_at_asc": {
+        "TEXT": "Last activity: Oldest first"
+      },
+      "last_activity_at_desc": {
+        "TEXT": "Last activity: Newest first"
+      },
+      "created_at_desc": {
+        "TEXT": "Created at: Newest first"
+      },
+      "created_at_asc": {
+        "TEXT": "Created at: Oldest first"
+      },
+      "priority_desc": {
+        "TEXT": "Priority: Highest first"
+      },
+      "priority_asc": {
+        "TEXT": "Priority: Lowest first"
+      },
+      "waiting_since_asc": {
+        "TEXT": "Pending Response: Longest first"
+      },
+      "waiting_since_desc": {
+        "TEXT": "Pending Response: Shortest first"
+      }
+    },
+    "ATTACHMENTS": {
+      "image": {
+        "CONTENT": "Picture message"
+      },
+      "audio": {
+        "CONTENT": "Audio message"
+      },
+      "video": {
+        "CONTENT": "Video message"
+      },
+      "file": {
+        "CONTENT": "File Attachment"
+      },
+      "location": {
+        "CONTENT": "Location"
+      },
+      "fallback": {
+        "CONTENT": "has shared a url"
+      }
+    },
+    "CHAT_SORT_BY_FILTER": {
+      "TITLE": "Sort conversation",
+      "DROPDOWN_TITLE": "Sort by",
+      "ITEMS": {
+        "LATEST": {
+          "NAME": "Last activity at",
+          "LABEL": "Last activity"
+        },
+        "CREATED_AT": {
+          "NAME": "Created at",
+          "LABEL": "Created at"
+        },
+        "LAST_USER_MESSAGE_AT": {
+          "NAME": "Last user message at",
+          "LABEL": "Last message"
+        }
+      }
+    },
+    "RECEIVED_VIA_EMAIL": "Received via email",
+    "VIEW_TWEET_IN_TWITTER": "View tweet in Twitter",
+    "REPLY_TO_TWEET": "Reply to this tweet",
+    "LINK_TO_STORY": "Go to instagram story",
+    "SENT": "Sent successfully",
+    "READ": "Read successfully",
+    "DELIVERED": "Delivered successfully",
+    "NO_MESSAGES": "No Messages",
+    "NO_CONTENT": "No content available",
+    "HIDE_QUOTED_TEXT": "Hide Quoted Text",
+    "SHOW_QUOTED_TEXT": "Show Quoted Text",
+    "MESSAGE_READ": "Read"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/contact.json b/app/javascript/dashboard/i18n/locale/tl/contact.json
new file mode 100644
index 0000000000000..882643434b3e4
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/contact.json
@@ -0,0 +1,389 @@
+{
+  "CONTACT_PANEL": {
+    "NOT_AVAILABLE": "Not Available",
+    "EMAIL_ADDRESS": "Email Address",
+    "PHONE_NUMBER": "Phone number",
+    "IDENTIFIER": "Identifier",
+    "COPY_SUCCESSFUL": "Copied to clipboard successfully",
+    "COMPANY": "Company",
+    "LOCATION": "Location",
+    "BROWSER_LANGUAGE": "Browser Language",
+    "CONVERSATION_TITLE": "Conversation Details",
+    "VIEW_PROFILE": "View Profile",
+    "BROWSER": "Browser",
+    "OS": "Operating System",
+    "INITIATED_FROM": "Initiated from",
+    "INITIATED_AT": "Initiated at",
+    "IP_ADDRESS": "IP Address",
+    "CREATED_AT_LABEL": "Created",
+    "NEW_MESSAGE": "New message",
+    "CONVERSATIONS": {
+      "NO_RECORDS_FOUND": "There are no previous conversations associated to this contact.",
+      "TITLE": "Previous Conversations"
+    },
+    "LABELS": {
+      "CONTACT": {
+        "TITLE": "Contact Labels",
+        "ERROR": "Couldn't update labels"
+      },
+      "CONVERSATION": {
+        "TITLE": "Conversation Labels",
+        "ADD_BUTTON": "Add Labels"
+      },
+      "LABEL_SELECT": {
+        "TITLE": "Add Labels",
+        "PLACEHOLDER": "Search labels",
+        "NO_RESULT": "No labels found",
+        "CREATE_LABEL": "Create new label"
+      }
+    },
+    "MERGE_CONTACT": "Merge contact",
+    "CONTACT_ACTIONS": "Contact actions",
+    "MUTE_CONTACT": "Block Contact",
+    "UNMUTE_CONTACT": "Unblock Contact",
+    "MUTED_SUCCESS": "This contact is blocked successfully. You will not be notified of any future conversations.",
+    "UNMUTED_SUCCESS": "This contact is unblocked successfully.",
+    "SEND_TRANSCRIPT": "Send Transcript",
+    "EDIT_LABEL": "Edit",
+    "SIDEBAR_SECTIONS": {
+      "CUSTOM_ATTRIBUTES": "Custom Attributes",
+      "CONTACT_LABELS": "Contact Labels",
+      "PREVIOUS_CONVERSATIONS": "Previous Conversations",
+      "NO_RECORDS_FOUND": "No attributes found"
+    }
+  },
+  "EDIT_CONTACT": {
+    "BUTTON_LABEL": "Edit Contact",
+    "TITLE": "Edit contact",
+    "DESC": "Edit contact details"
+  },
+  "CREATE_CONTACT": {
+    "BUTTON_LABEL": "New Contact",
+    "TITLE": "Create new contact",
+    "DESC": "Add basic information details about the contact."
+  },
+  "IMPORT_CONTACTS": {
+    "BUTTON_LABEL": "Import",
+    "TITLE": "Import Contacts",
+    "DESC": "Import contacts through a CSV file.",
+    "DOWNLOAD_LABEL": "Download a sample csv.",
+    "FORM": {
+      "LABEL": "CSV File",
+      "SUBMIT": "Import",
+      "CANCEL": "Cancel"
+    },
+    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+    "ERROR_MESSAGE": "There was an error, please try again"
+  },
+  "EXPORT_CONTACTS": {
+    "BUTTON_LABEL": "Export",
+    "TITLE": "Export Contacts",
+    "DESC": "Export contacts to a CSV file.",
+    "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
+    "ERROR_MESSAGE": "There was an error, please try again",
+    "CONFIRM": {
+      "TITLE": "Export Contacts",
+      "MESSAGE": "Are you sure you want to export all contacts?",
+      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
+      "YES": "Yes, Export",
+      "NO": "No, Cancel"
+    }
+  },
+  "DELETE_NOTE": {
+    "CONFIRM": {
+      "TITLE": "Confirm Deletion",
+      "MESSAGE": "Are you want sure to delete this note?",
+      "YES": "Yes, Delete it",
+      "NO": "No, Keep it"
+    }
+  },
+  "DELETE_CONTACT": {
+    "BUTTON_LABEL": "Delete Contact",
+    "TITLE": "Delete contact",
+    "DESC": "Delete contact details",
+    "CONFIRM": {
+      "TITLE": "Confirm Deletion",
+      "MESSAGE": "Are you sure to delete ",
+      "YES": "Yes, Delete",
+      "NO": "No, Keep"
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Contact deleted successfully",
+      "ERROR_MESSAGE": "Could not delete contact. Please try again later."
+    }
+  },
+  "CONTACT_FORM": {
+    "FORM": {
+      "SUBMIT": "Submit",
+      "CANCEL": "Cancel",
+      "AVATAR": {
+        "LABEL": "Contact Avatar"
+      },
+      "NAME": {
+        "PLACEHOLDER": "Enter the full name of the contact",
+        "LABEL": "Full Name"
+      },
+      "BIO": {
+        "PLACEHOLDER": "Enter the bio of the contact",
+        "LABEL": "Bio"
+      },
+      "EMAIL_ADDRESS": {
+        "PLACEHOLDER": "Enter the email address of the contact",
+        "LABEL": "Email Address",
+        "DUPLICATE": "This email address is in use for another contact.",
+        "ERROR": "Please enter a valid email address."
+      },
+      "PHONE_NUMBER": {
+        "PLACEHOLDER": "Enter the phone number of the contact",
+        "LABEL": "Phone Number",
+        "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]. You can select the dial code from the dropdown.",
+        "ERROR": "Phone number should be either empty or of E.164 format",
+        "DIAL_CODE_ERROR": "Please select a dial code from the list",
+        "DUPLICATE": "This phone number is in use for another contact."
+      },
+      "LOCATION": {
+        "PLACEHOLDER": "Enter the location of the contact",
+        "LABEL": "Location"
+      },
+      "COMPANY_NAME": {
+        "PLACEHOLDER": "Enter the company name",
+        "LABEL": "Company Name"
+      },
+      "COUNTRY": {
+        "PLACEHOLDER": "Enter the country name",
+        "LABEL": "Country Name",
+        "SELECT_PLACEHOLDER": "Select",
+        "REMOVE": "Remove",
+        "SELECT_COUNTRY": "Select Country"
+      },
+      "CITY": {
+        "PLACEHOLDER": "Enter the city name",
+        "LABEL": "City Name"
+      },
+      "SOCIAL_PROFILES": {
+        "FACEBOOK": {
+          "PLACEHOLDER": "Enter the Facebook username",
+          "LABEL": "Facebook"
+        },
+        "TWITTER": {
+          "PLACEHOLDER": "Enter the Twitter username",
+          "LABEL": "Twitter"
+        },
+        "LINKEDIN": {
+          "PLACEHOLDER": "Enter the LinkedIn username",
+          "LABEL": "LinkedIn"
+        },
+        "GITHUB": {
+          "PLACEHOLDER": "Enter the Github username",
+          "LABEL": "Github"
+        }
+      }
+    },
+    "DELETE_AVATAR": {
+      "API": {
+        "SUCCESS_MESSAGE": "Contact avatar deleted successfully",
+        "ERROR_MESSAGE": "Could not delete the contact avatar. Please try again later."
+      }
+    },
+    "SUCCESS_MESSAGE": "Contact saved successfully",
+    "ERROR_MESSAGE": "There was an error, please try again"
+  },
+  "NEW_CONVERSATION": {
+    "BUTTON_LABEL": "Start conversation",
+    "TITLE": "New conversation",
+    "DESC": "Start a new conversation by sending a new message.",
+    "NO_INBOX": "Couldn't find an inbox to initiate a new conversation with this contact.",
+    "FORM": {
+      "TO": {
+        "LABEL": "To"
+      },
+      "INBOX": {
+        "LABEL": "Via Inbox",
+        "PLACEHOLDER": "Choose source inbox",
+        "ERROR": "Select an inbox"
+      },
+      "SUBJECT": {
+        "LABEL": "Subject",
+        "PLACEHOLDER": "Subject",
+        "ERROR": "Subject can't be empty"
+      },
+      "MESSAGE": {
+        "LABEL": "Message",
+        "PLACEHOLDER": "Write your message here",
+        "ERROR": "Message can't be empty"
+      },
+      "ATTACHMENTS": {
+        "SELECT": "Choose files",
+        "HELP_TEXT": "Drag and drop files here or choose files to attach"
+      },
+      "SUBMIT": "Send message",
+      "CANCEL": "Cancel",
+      "SUCCESS_MESSAGE": "Message sent!",
+      "GO_TO_CONVERSATION": "View",
+      "ERROR_MESSAGE": "Couldn't send! try again"
+    }
+  },
+  "CONTACTS_PAGE": {
+    "HEADER": "Contacts",
+    "FIELDS": "Contact fields",
+    "SEARCH_BUTTON": "Search",
+    "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
+    "FILTER_CONTACTS": "Filter",
+    "FILTER_CONTACTS_SAVE": "Save filter",
+    "FILTER_CONTACTS_DELETE": "Delete filter",
+    "FILTER_CONTACTS_EDIT": "Edit segment",
+    "LIST": {
+      "LOADING_MESSAGE": "Loading contacts...",
+      "404": "No contacts matches your search 🔍",
+      "NO_CONTACTS": "There are no available contacts",
+      "TABLE_HEADER": {
+        "NAME": "Name",
+        "PHONE_NUMBER": "Phone Number",
+        "CONVERSATIONS": "Conversations",
+        "LAST_ACTIVITY": "Last Activity",
+        "CREATED_AT": "Created At",
+        "COUNTRY": "Country",
+        "CITY": "City",
+        "SOCIAL_PROFILES": "Social Profiles",
+        "COMPANY": "Company",
+        "EMAIL_ADDRESS": "Email Address"
+      },
+      "VIEW_DETAILS": "View details"
+    }
+  },
+  "CONTACT_PROFILE": {
+    "BACK_BUTTON": "Contacts",
+    "LOADING": "Loading contact profile..."
+  },
+  "REMINDER": {
+    "ADD_BUTTON": {
+      "BUTTON": "Add",
+      "TITLE": "Shift + Enter to create a task"
+    },
+    "FOOTER": {
+      "DUE_DATE": "Due date",
+      "LABEL_TITLE": "Set type"
+    }
+  },
+  "NOTES": {
+    "FETCHING_NOTES": "Fetching notes...",
+    "NOT_AVAILABLE": "There are no notes created for this contact",
+    "HEADER": {
+      "TITLE": "Notes"
+    },
+    "LIST": {
+      "LABEL": "added a note"
+    },
+    "ADD": {
+      "BUTTON": "Add",
+      "PLACEHOLDER": "Add a note",
+      "TITLE": "Shift + Enter to create a note"
+    },
+    "CONTENT_HEADER": {
+      "DELETE": "Delete note"
+    }
+  },
+  "EVENTS": {
+    "HEADER": {
+      "TITLE": "Activities"
+    },
+    "BUTTON": {
+      "PILL_BUTTON_NOTES": "notes",
+      "PILL_BUTTON_EVENTS": "events",
+      "PILL_BUTTON_CONVO": "conversations"
+    }
+  },
+  "CUSTOM_ATTRIBUTES": {
+    "ADD_BUTTON_TEXT": "Add attributes",
+    "BUTTON": "Add custom attribute",
+    "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
+    "COPY_SUCCESSFUL": "Copied to clipboard successfully",
+    "SHOW_MORE": "Show all attributes",
+    "SHOW_LESS": "Show less attributes",
+    "ACTIONS": {
+      "COPY": "Copy attribute",
+      "DELETE": "Delete attribute",
+      "EDIT": "Edit attribute"
+    },
+    "ADD": {
+      "TITLE": "Create custom attribute",
+      "DESC": "Add custom information to this contact."
+    },
+    "FORM": {
+      "CREATE": "Add attribute",
+      "CANCEL": "Cancel",
+      "NAME": {
+        "LABEL": "Custom attribute name",
+        "PLACEHOLDER": "Eg: shopify id",
+        "ERROR": "Invalid custom attribute name"
+      },
+      "VALUE": {
+        "LABEL": "Attribute value",
+        "PLACEHOLDER": "Eg: 11901 "
+      },
+      "ADD": {
+        "TITLE": "Create new attribute ",
+        "SUCCESS": "Attribute added successfully",
+        "ERROR": "Unable to add attribute. Please try again later"
+      },
+      "UPDATE": {
+        "SUCCESS": "Attribute updated successfully",
+        "ERROR": "Unable to update attribute. Please try again later"
+      },
+      "DELETE": {
+        "SUCCESS": "Attribute deleted successfully",
+        "ERROR": "Unable to delete attribute. Please try again later"
+      },
+      "ATTRIBUTE_SELECT": {
+        "TITLE": "Add attributes",
+        "PLACEHOLDER": "Search attributes",
+        "NO_RESULT": "No attributes found"
+      },
+      "ATTRIBUTE_TYPE": {
+        "LIST": {
+          "PLACEHOLDER": "Select value",
+          "SEARCH_INPUT_PLACEHOLDER": "Search value",
+          "NO_RESULT": "No result found"
+        }
+      }
+    },
+    "VALIDATIONS": {
+      "REQUIRED": "Valid value is required",
+      "INVALID_URL": "Invalid URL",
+      "INVALID_INPUT": "Invalid Input"
+    }
+  },
+  "MERGE_CONTACTS": {
+    "TITLE": "Merge contacts",
+    "DESCRIPTION": "Merge contacts to combine two profiles into one, including all attributes and conversations. In case of conflict, the Primary contact’s attributes will take precedence.",
+    "PRIMARY": {
+      "TITLE": "Primary contact",
+      "HELP_LABEL": "To be deleted"
+    },
+    "PARENT": {
+      "TITLE": "Contact to merge",
+      "PLACEHOLDER": "Search for a contact",
+      "HELP_LABEL": "To be kept"
+    },
+    "SUMMARY": {
+      "TITLE": "Summary",
+      "DELETE_WARNING": "Contact of <strong>%{primaryContactName}</strong> will be deleted.",
+      "ATTRIBUTE_WARNING": "Contact details of <strong>%{primaryContactName}</strong> will be copied to <strong>%{parentContactName}</strong>."
+    },
+    "SEARCH": {
+      "ERROR": "ERROR_MESSAGE"
+    },
+    "FORM": {
+      "SUBMIT": " Merge contacts",
+      "CANCEL": "Cancel",
+      "CHILD_CONTACT": {
+        "ERROR": "Select a child contact to merge"
+      },
+      "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/tl/contactFilters.json b/app/javascript/dashboard/i18n/locale/tl/contactFilters.json
new file mode 100644
index 0000000000000..02d5dcf890c17
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/contactFilters.json
@@ -0,0 +1,56 @@
+{
+  "CONTACTS_FILTER": {
+    "TITLE": "Filter Contacts",
+    "SUBTITLE": "Add filters below and hit 'Submit' to filter contacts.",
+    "EDIT_CUSTOM_SEGMENT": "Edit Segment",
+    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your segment.",
+    "ADD_NEW_FILTER": "Add Filter",
+    "CLEAR_ALL_FILTERS": "Clear All Filters",
+    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
+    "SUBMIT_BUTTON_LABEL": "Submit",
+    "UPDATE_BUTTON_LABEL": "Update Segment",
+    "CANCEL_BUTTON_LABEL": "Cancel",
+    "CLEAR_BUTTON_LABEL": "Clear Filters",
+    "EMPTY_VALUE_ERROR": "Value is required",
+    "SEGMENT_LABEL": "Segment Name",
+    "SEGMENT_QUERY_LABEL": "Segment Query",
+    "TOOLTIP_LABEL": "Filter contacts",
+    "QUERY_DROPDOWN_LABELS": {
+      "AND": "AND",
+      "OR": "OR"
+    },
+    "OPERATOR_LABELS": {
+      "equal_to": "Equal to",
+      "not_equal_to": "Not equal to",
+      "contains": "Contains",
+      "does_not_contain": "Does not contain",
+      "is_present": "Is present",
+      "is_not_present": "Is not present",
+      "is_greater_than": "Is greater than",
+      "is_lesser_than": "Is lesser than",
+      "days_before": "Is x days before"
+    },
+    "ATTRIBUTES": {
+      "NAME": "Name",
+      "EMAIL": "Email",
+      "PHONE_NUMBER": "Phone number",
+      "IDENTIFIER": "Identifier",
+      "CITY": "City",
+      "COUNTRY": "Country",
+      "CUSTOM_ATTRIBUTE_LIST": "List",
+      "CUSTOM_ATTRIBUTE_TEXT": "Text",
+      "CUSTOM_ATTRIBUTE_NUMBER": "Number",
+      "CUSTOM_ATTRIBUTE_LINK": "Link",
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
+      "CREATED_AT": "Created At",
+      "LAST_ACTIVITY": "Last Activity",
+      "REFERER_LINK": "Referrer link",
+      "BLOCKED": "Blocked"
+    },
+    "GROUPS": {
+      "STANDARD_FILTERS": "Standard Filters",
+      "ADDITIONAL_FILTERS": "Additional Filters",
+      "CUSTOM_ATTRIBUTES": "Custom Attributes"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/conversation.json b/app/javascript/dashboard/i18n/locale/tl/conversation.json
new file mode 100644
index 0000000000000..4cc4b9bed5fca
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/conversation.json
@@ -0,0 +1,335 @@
+{
+  "CONVERSATION": {
+    "SELECT_A_CONVERSATION": "Please select a conversation from left pane",
+    "CSAT_REPLY_MESSAGE": "Please rate the conversation",
+    "404": "Sorry, we cannot find the conversation. Please try again",
+    "SWITCH_VIEW_LAYOUT": "Switch the layout",
+    "DASHBOARD_APP_TAB_MESSAGES": "Messages",
+    "UNVERIFIED_SESSION": "The identity of this user is not verified",
+    "NO_MESSAGE_1": "Uh oh! Looks like there are no messages from customers in your inbox.",
+    "NO_MESSAGE_2": " to send a message to your page!",
+    "NO_INBOX_1": "Hola! Looks like you haven't added any inboxes yet.",
+    "NO_INBOX_2": " to get started",
+    "NO_INBOX_AGENT": "Uh Oh! Looks like you are not part of any inbox. Please contact your administrator",
+    "SEARCH_MESSAGES": "Search for messages in conversations",
+    "EMPTY_STATE": {
+      "CMD_BAR": "to open command menu",
+      "KEYBOARD_SHORTCUTS": "to view keyboard shortcuts"
+    },
+    "SEARCH": {
+      "TITLE": "Search messages",
+      "RESULT_TITLE": "Search Results",
+      "LOADING_MESSAGE": "Crunching data...",
+      "PLACEHOLDER": "Type any text to search messages",
+      "NO_MATCHING_RESULTS": "No results found."
+    },
+    "UNREAD_MESSAGES": "Unread Messages",
+    "UNREAD_MESSAGE": "Unread Message",
+    "CLICK_HERE": "Click here",
+    "LOADING_INBOXES": "Loading inboxes",
+    "LOADING_CONVERSATIONS": "Loading Conversations",
+    "CANNOT_REPLY": "You cannot reply due to",
+    "24_HOURS_WINDOW": "24 hour message window restriction",
+    "NOT_ASSIGNED_TO_YOU": "This conversation is not assigned to you. Would you like to assign this conversation to yourself?",
+    "ASSIGN_TO_ME": "Assign to me",
+    "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
+    "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
+    "REPLYING_TO": "You are replying to:",
+    "REMOVE_SELECTION": "Remove Selection",
+    "DOWNLOAD": "Download",
+    "UNKNOWN_FILE_TYPE": "Unknown File",
+    "SAVE_CONTACT": "Save",
+    "UPLOADING_ATTACHMENTS": "Uploading attachments...",
+    "REPLIED_TO_STORY": "Replied to your story",
+    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
+    "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
+    "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
+    "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
+    "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
+    "NO_RESPONSE": "No response",
+    "RATING_TITLE": "Rating",
+    "FEEDBACK_TITLE": "Feedback",
+    "REPLY_MESSAGE_NOT_FOUND": "Message not available",
+    "CARD": {
+      "SHOW_LABELS": "Show labels",
+      "HIDE_LABELS": "Hide labels"
+    },
+    "HEADER": {
+      "RESOLVE_ACTION": "Resolve",
+      "REOPEN_ACTION": "Reopen",
+      "OPEN_ACTION": "Open",
+      "OPEN": "More",
+      "CLOSE": "Close",
+      "DETAILS": "details",
+      "SNOOZED_UNTIL": "Snoozed until",
+      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
+      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
+      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
+      "SLA_STATUS": {
+        "FRT": "FRT {status}",
+        "NRT": "NRT {status}",
+        "RT": "RT {status}",
+        "MISSED": "missed",
+        "DUE": "due"
+      }
+    },
+    "RESOLVE_DROPDOWN": {
+      "MARK_PENDING": "Mark as pending",
+      "SNOOZE_UNTIL": "Snooze",
+      "SNOOZE": {
+        "TITLE": "Snooze until",
+        "NEXT_REPLY": "Next reply",
+        "TOMORROW": "Tomorrow",
+        "NEXT_WEEK": "Next week"
+      }
+    },
+    "CUSTOM_SNOOZE": {
+      "TITLE": "Snooze until",
+      "APPLY": "Snooze",
+      "CANCEL": "Cancel"
+    },
+    "PRIORITY": {
+      "TITLE": "Priority",
+      "OPTIONS": {
+        "NONE": "None",
+        "URGENT": "Urgent",
+        "HIGH": "High",
+        "MEDIUM": "Medium",
+        "LOW": "Low"
+      },
+      "CHANGE_PRIORITY": {
+        "SELECT_PLACEHOLDER": "None",
+        "INPUT_PLACEHOLDER": "Select priority",
+        "NO_RESULTS": "No results found",
+        "SUCCESSFUL": "Changed priority of conversation id %{conversationId} to %{priority}",
+        "FAILED": "Couldn't change priority. Please try again."
+      }
+    },
+    "CARD_CONTEXT_MENU": {
+      "PENDING": "Mark as pending",
+      "RESOLVED": "Mark as resolved",
+      "MARK_AS_UNREAD": "Mark as unread",
+      "REOPEN": "Reopen conversation",
+      "SNOOZE": {
+        "TITLE": "Snooze",
+        "NEXT_REPLY": "Until next reply",
+        "TOMORROW": "Until tomorrow",
+        "NEXT_WEEK": "Until next week"
+      },
+      "ASSIGN_AGENT": "Assign agent",
+      "ASSIGN_LABEL": "Assign label",
+      "AGENTS_LOADING": "Loading agents...",
+      "ASSIGN_TEAM": "Assign team",
+      "API": {
+        "AGENT_ASSIGNMENT": {
+          "SUCCESFUL": "Conversation id %{conversationId} assigned to \"%{agentName}\"",
+          "FAILED": "Couldn't assign agent. Please try again."
+        },
+        "LABEL_ASSIGNMENT": {
+          "SUCCESFUL": "Assigned label #%{labelName} to conversation id %{conversationId}",
+          "FAILED": "Couldn't assign label. Please try again."
+        },
+        "TEAM_ASSIGNMENT": {
+          "SUCCESFUL": "Assigned team \"%{team}\" to conversation id %{conversationId}",
+          "FAILED": "Couldn't assign team. Please try again."
+        }
+      }
+    },
+    "FOOTER": {
+      "MESSAGE_SIGN_TOOLTIP": "Message signature",
+      "ENABLE_SIGN_TOOLTIP": "Enable signature",
+      "DISABLE_SIGN_TOOLTIP": "Disable signature",
+      "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",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
+    },
+    "REPLYBOX": {
+      "REPLY": "Reply",
+      "PRIVATE_NOTE": "Private Note",
+      "SEND": "Send",
+      "CREATE": "Add Note",
+      "INSERT_READ_MORE": "Read more",
+      "DISMISS_REPLY": "Dismiss reply",
+      "REPLYING_TO": "Replying to:",
+      "TIP_FORMAT_ICON": "Show rich text editor",
+      "TIP_EMOJI_ICON": "Show emoji selector",
+      "TIP_ATTACH_ICON": "Attach files",
+      "TIP_AUDIORECORDER_ICON": "Record audio",
+      "TIP_AUDIORECORDER_PERMISSION": "Allow access to audio",
+      "TIP_AUDIORECORDER_ERROR": "Could not open the audio",
+      "DRAG_DROP": "Drag and drop here to attach",
+      "START_AUDIO_RECORDING": "Start audio recording",
+      "STOP_AUDIO_RECORDING": "Stop audio recording",
+      "": "",
+      "EMAIL_HEAD": {
+        "TO": "TO",
+        "ADD_BCC": "Add bcc",
+        "CC": {
+          "LABEL": "CC",
+          "PLACEHOLDER": "Emails separated by commas",
+          "ERROR": "Please enter valid email addresses"
+        },
+        "BCC": {
+          "LABEL": "BCC",
+          "PLACEHOLDER": "Emails separated by commas",
+          "ERROR": "Please enter valid email addresses"
+        }
+      },
+      "UNDEFINED_VARIABLES": {
+        "TITLE": "Undefined variables",
+        "MESSAGE": "You have {undefinedVariablesCount} undefined variables in your message: {undefinedVariables}. Would you like to send the message anyway?",
+        "CONFIRM": {
+          "YES": "Send",
+          "CANCEL": "Cancel"
+        }
+      }
+    },
+    "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team",
+    "CHANGE_STATUS": "Conversation status changed",
+    "CHANGE_STATUS_FAILED": "Conversation status change failed",
+    "CHANGE_AGENT": "Conversation Assignee changed",
+    "CHANGE_AGENT_FAILED": "Assignee change failed",
+    "ASSIGN_LABEL_SUCCESFUL": "Label assigned successfully",
+    "ASSIGN_LABEL_FAILED": "Label assignment failed",
+    "CHANGE_TEAM": "Conversation team changed",
+    "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
+    "MESSAGE_ERROR": "Unable to send this message, please try again later",
+    "SENT_BY": "Sent by:",
+    "BOT": "Bot",
+    "SEND_FAILED": "Couldn't send message! Try again",
+    "TRY_AGAIN": "retry",
+    "ASSIGNMENT": {
+      "SELECT_AGENT": "Select Agent",
+      "REMOVE": "Remove",
+      "ASSIGN": "Assign"
+    },
+    "CONTEXT_MENU": {
+      "COPY": "Copy",
+      "REPLY_TO": "Reply to this message",
+      "DELETE": "Delete",
+      "CREATE_A_CANNED_RESPONSE": "Add to canned responses",
+      "TRANSLATE": "Translate",
+      "COPY_PERMALINK": "Copy link to the message",
+      "LINK_COPIED": "Message URL copied to the clipboard",
+      "DELETE_CONFIRMATION": {
+        "TITLE": "Are you sure you want to delete this message?",
+        "MESSAGE": "You cannot undo this action",
+        "DELETE": "Delete",
+        "CANCEL": "Cancel"
+      }
+    }
+  },
+  "EMAIL_TRANSCRIPT": {
+    "TITLE": "Send conversation transcript",
+    "DESC": "Send a copy of the conversation transcript to the specified email address",
+    "SUBMIT": "Submit",
+    "CANCEL": "Cancel",
+    "SEND_EMAIL_SUCCESS": "The chat transcript was sent successfully",
+    "SEND_EMAIL_ERROR": "There was an error, please try again",
+    "FORM": {
+      "SEND_TO_CONTACT": "Send the transcript to the customer",
+      "SEND_TO_AGENT": "Send the transcript to the assigned agent",
+      "SEND_TO_OTHER_EMAIL_ADDRESS": "Send the transcript to another email address",
+      "EMAIL": {
+        "PLACEHOLDER": "Enter an email address",
+        "ERROR": "Please enter a valid email address"
+      }
+    }
+  },
+  "ONBOARDING": {
+    "TITLE": "Hey 👋, Welcome to %{installationName}!",
+    "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "READ_LATEST_UPDATES": "Read our latest updates",
+    "ALL_CONVERSATION": {
+      "TITLE": "All your conversations in one place",
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+    },
+    "TEAM_MEMBERS": {
+      "TITLE": "Invite your team members",
+      "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
+      "NEW_LINK": "Click here to invite a team member"
+    },
+    "INBOXES": {
+      "TITLE": "Connect Inboxes",
+      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook page or even your WhatsApp number.",
+      "NEW_LINK": "Click here to create an inbox"
+    },
+    "LABELS": {
+      "TITLE": "Organize conversations with labels",
+      "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
+      "NEW_LINK": "Click here to create tags"
+    }
+  },
+  "CONVERSATION_SIDEBAR": {
+    "ASSIGNEE_LABEL": "Assigned Agent",
+    "SELF_ASSIGN": "Assign to me",
+    "TEAM_LABEL": "Assigned Team",
+    "SELECT": {
+      "PLACEHOLDER": "None"
+    },
+    "ACCORDION": {
+      "CONTACT_DETAILS": "Contact Details",
+      "CONVERSATION_ACTIONS": "Conversation Actions",
+      "CONVERSATION_LABELS": "Conversation Labels",
+      "CONVERSATION_INFO": "Conversation Information",
+      "CONTACT_ATTRIBUTES": "Contact Attributes",
+      "PREVIOUS_CONVERSATION": "Previous Conversations",
+      "MACROS": "Macros"
+    }
+  },
+  "CONVERSATION_CUSTOM_ATTRIBUTES": {
+    "ADD_BUTTON_TEXT": "Create attribute",
+    "NO_RECORDS_FOUND": "No attributes found",
+    "UPDATE": {
+      "SUCCESS": "Attribute updated successfully",
+      "ERROR": "Unable to update attribute. Please try again later"
+    },
+    "ADD": {
+      "TITLE": "Add",
+      "SUCCESS": "Attribute added successfully",
+      "ERROR": "Unable to add attribute. Please try again later"
+    },
+    "DELETE": {
+      "SUCCESS": "Attribute deleted successfully",
+      "ERROR": "Unable to delete attribute. Please try again later"
+    },
+    "ATTRIBUTE_SELECT": {
+      "TITLE": "Add attributes",
+      "PLACEHOLDER": "Search attributes",
+      "NO_RESULT": "No attributes found"
+    }
+  },
+  "EMAIL_HEADER": {
+    "FROM": "From",
+    "TO": "To",
+    "BCC": "Bcc",
+    "CC": "Cc",
+    "SUBJECT": "Subject"
+  },
+  "CONVERSATION_PARTICIPANTS": {
+    "SIDEBAR_MENU_TITLE": "Participating",
+    "SIDEBAR_TITLE": "Conversation participants",
+    "NO_RECORDS_FOUND": "No results found",
+    "ADD_PARTICIPANTS": "Select participants",
+    "REMANING_PARTICIPANTS_TEXT": "+%{count} others",
+    "REMANING_PARTICIPANT_TEXT": "+%{count} other",
+    "TOTAL_PARTICIPANTS_TEXT": "%{count} people are participating.",
+    "TOTAL_PARTICIPANT_TEXT": "%{count} person is participating.",
+    "NO_PARTICIPANTS_TEXT": "No one is participating!.",
+    "WATCH_CONVERSATION": "Join conversation",
+    "YOU_ARE_WATCHING": "You are participating",
+    "API": {
+      "ERROR_MESSAGE": "Could not update, try again!",
+      "SUCCESS_MESSAGE": "Participants updated!"
+    }
+  },
+  "TRANSLATE_MODAL": {
+    "TITLE": "View translated content",
+    "DESC": "You can view the translated content in each langauge.",
+    "ORIGINAL_CONTENT": "Original Content",
+    "TRANSLATED_CONTENT": "Translated Content",
+    "NO_TRANSLATIONS_AVAILABLE": "No translations are available for this content"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/csatMgmt.json b/app/javascript/dashboard/i18n/locale/tl/csatMgmt.json
new file mode 100644
index 0000000000000..9e16dc2b3c364
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/csatMgmt.json
@@ -0,0 +1,13 @@
+{
+  "CSAT": {
+    "TITLE": "Rate your conversation",
+    "PLACEHOLDER": "Tell us more...",
+    "RATINGS": {
+      "POOR": "😞 Poor",
+      "FAIR": "😑 Fair",
+      "AVERAGE": "😐 Average",
+      "GOOD": "😀 Good",
+      "EXCELLENT": "😍 Excellent"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/datePicker.json b/app/javascript/dashboard/i18n/locale/tl/datePicker.json
new file mode 100644
index 0000000000000..c7ef068803cba
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/datePicker.json
@@ -0,0 +1,19 @@
+{
+  "DATE_PICKER": {
+    "APPLY_BUTTON": "Apply",
+    "CLEAR_BUTTON": "Clear",
+    "DATE_RANGE_INPUT": {
+      "START": "Start Date",
+      "END": "End Date"
+    },
+    "DATE_RANGE_OPTIONS": {
+      "TITLE": "DATE RANGE",
+      "LAST_7_DAYS": "Last 7 days",
+      "LAST_30_DAYS": "Last 30 days",
+      "LAST_3_MONTHS": "Last 3 months",
+      "LAST_6_MONTHS": "Last 6 months",
+      "LAST_YEAR": "Last year",
+      "CUSTOM_RANGE": "Custom date range"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/emoji.json b/app/javascript/dashboard/i18n/locale/tl/emoji.json
new file mode 100644
index 0000000000000..d5b96f0f94a6b
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/emoji.json
@@ -0,0 +1,7 @@
+{
+  "EMOJI": {
+    "PLACEHOLDER": "Search emojis",
+    "NOT_FOUND": "No emoji match your search",
+    "REMOVE": "Remove"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/general.json b/app/javascript/dashboard/i18n/locale/tl/general.json
new file mode 100644
index 0000000000000..78e97db906a40
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/general.json
@@ -0,0 +1,9 @@
+{
+  "GENERAL": {
+    "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/tl/generalSettings.json b/app/javascript/dashboard/i18n/locale/tl/generalSettings.json
new file mode 100644
index 0000000000000..bba50316ca736
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/generalSettings.json
@@ -0,0 +1,174 @@
+{
+  "GENERAL_SETTINGS": {
+    "TITLE": "Account settings",
+    "SUBMIT": "Update settings",
+    "BACK": "Back",
+    "DISMISS": "Dismiss",
+    "UPDATE": {
+      "ERROR": "Could not update settings, try again!",
+      "SUCCESS": "Successfully updated account settings"
+    },
+    "FORM": {
+      "ERROR": "Please fix form errors",
+      "GENERAL_SECTION": {
+        "TITLE": "General settings",
+        "NOTE": ""
+      },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
+      "NAME": {
+        "LABEL": "Account name",
+        "PLACEHOLDER": "Your account name",
+        "ERROR": "Please enter a valid account name"
+      },
+      "LANGUAGE": {
+        "LABEL": "Site language",
+        "PLACEHOLDER": "Your account name",
+        "ERROR": ""
+      },
+      "DOMAIN": {
+        "LABEL": "Incoming Email Domain",
+        "PLACEHOLDER": "The domain where you will receive the emails",
+        "ERROR": ""
+      },
+      "SUPPORT_EMAIL": {
+        "LABEL": "Support Email",
+        "PLACEHOLDER": "Your company's support email",
+        "ERROR": ""
+      },
+      "AUTO_RESOLVE_DURATION": {
+        "LABEL": "Number of days after a ticket should auto resolve if there is no activity",
+        "PLACEHOLDER": "30",
+        "ERROR": "Please enter a valid auto resolve duration (minimum 1 day and maximum 999 days)"
+      },
+      "FEATURES": {
+        "INBOUND_EMAIL_ENABLED": "Conversation continuity with emails is enabled for your account.",
+        "CUSTOM_EMAIL_DOMAIN_ENABLED": "You can receive emails in your custom domain now."
+      }
+    },
+    "UPDATE_CHATWOOT": "An update %{latestChatwootVersion} for Chatwoot is available. Please update your instance.",
+    "LEARN_MORE": "Learn more",
+    "PAYMENT_PENDING": "Your payment is pending. Please update your payment information to continue using Chatwoot",
+    "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
+    "OPEN_BILLING": "Open billing"
+  },
+  "FORMS": {
+    "MULTISELECT": {
+      "ENTER_TO_SELECT": "Press enter to select",
+      "ENTER_TO_REMOVE": "Press enter to remove",
+      "SELECT_ONE": "Select one",
+      "SELECT": "Select"
+    }
+  },
+  "NOTIFICATIONS_PAGE": {
+    "HEADER": "Notifications",
+    "MARK_ALL_DONE": "Mark All Done",
+    "DELETE_TITLE": "deleted",
+    "UNREAD_NOTIFICATION": {
+      "TITLE": "Unread Notifications",
+      "ALL_NOTIFICATIONS": "View all notifications",
+      "LOADING_UNREAD_MESSAGE": "Loading unread notifications...",
+      "EMPTY_MESSAGE": "You have no unread notifications"
+    },
+    "LIST": {
+      "LOADING_MESSAGE": "Loading notifications...",
+      "404": "No Notifications",
+      "TABLE_HEADER": [
+        "Name",
+        "Phone Number",
+        "Conversations",
+        "Last Contacted"
+      ]
+    },
+    "TYPE_LABEL": {
+      "conversation_creation": "New conversation",
+      "conversation_assignment": "Conversation Assigned",
+      "assigned_conversation_new_message": "New Message",
+      "participating_conversation_new_message": "New Message",
+      "conversation_mention": "Mention",
+      "sla_missed_first_response": "SLA Missed",
+      "sla_missed_next_response": "SLA Missed",
+      "sla_missed_resolution": "SLA Missed"
+    }
+  },
+  "NETWORK": {
+    "NOTIFICATION": {
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
+    },
+    "BUTTON": {
+      "REFRESH": "Refresh"
+    }
+  },
+  "COMMAND_BAR": {
+    "SEARCH_PLACEHOLDER": "Search or jump to",
+    "SECTIONS": {
+      "GENERAL": "General",
+      "REPORTS": "Reports",
+      "CONVERSATION": "Conversation",
+      "BULK_ACTIONS": "Bulk Actions",
+      "CHANGE_ASSIGNEE": "Change Assignee",
+      "CHANGE_PRIORITY": "Change Priority",
+      "CHANGE_TEAM": "Change Team",
+      "SNOOZE_CONVERSATION": "Snooze Conversation",
+      "ADD_LABEL": "Add label to the conversation",
+      "REMOVE_LABEL": "Remove label from the conversation",
+      "SETTINGS": "Settings",
+      "AI_ASSIST": "AI Assist",
+      "APPEARANCE": "Appearance",
+      "SNOOZE_NOTIFICATION": "Snooze Notification"
+    },
+    "COMMANDS": {
+      "GO_TO_CONVERSATION_DASHBOARD": "Go to Conversation Dashboard",
+      "GO_TO_CONTACTS_DASHBOARD": "Go to Contacts Dashboard",
+      "GO_TO_REPORTS_OVERVIEW": "Go to Reports Overview",
+      "GO_TO_CONVERSATION_REPORTS": "Go to Conversation Reports",
+      "GO_TO_AGENT_REPORTS": "Go to Agent Reports",
+      "GO_TO_LABEL_REPORTS": "Go to Label Reports",
+      "GO_TO_INBOX_REPORTS": "Go to Inbox Reports",
+      "GO_TO_TEAM_REPORTS": "Go to Team Reports",
+      "GO_TO_SETTINGS_AGENTS": "Go to Agent Settings",
+      "GO_TO_SETTINGS_TEAMS": "Go to Team Settings",
+      "GO_TO_SETTINGS_INBOXES": "Go to Inbox Settings",
+      "GO_TO_SETTINGS_LABELS": "Go to Label Settings",
+      "GO_TO_SETTINGS_CANNED_RESPONSES": "Go to Canned Response Settings",
+      "GO_TO_SETTINGS_APPLICATIONS": "Go to Application Settings",
+      "GO_TO_SETTINGS_ACCOUNT": "Go to Account Settings",
+      "GO_TO_SETTINGS_PROFILE": "Go to Profile Settings",
+      "GO_TO_NOTIFICATIONS": "Go to Notifications",
+      "ADD_LABELS_TO_CONVERSATION": "Add label to the conversation",
+      "ASSIGN_AN_AGENT": "Assign an agent",
+      "AI_ASSIST": "AI Assist",
+      "ASSIGN_PRIORITY": "Assign priority",
+      "ASSIGN_A_TEAM": "Assign a team",
+      "MUTE_CONVERSATION": "Mute conversation",
+      "UNMUTE_CONVERSATION": "Unmute conversation",
+      "REMOVE_LABEL_FROM_CONVERSATION": "Remove label from the conversation",
+      "REOPEN_CONVERSATION": "Reopen conversation",
+      "RESOLVE_CONVERSATION": "Resolve conversation",
+      "SEND_TRANSCRIPT": "Send an email transcript",
+      "SNOOZE_CONVERSATION": "Snooze Conversation",
+      "UNTIL_NEXT_REPLY": "Until next reply",
+      "UNTIL_NEXT_WEEK": "Until next week",
+      "UNTIL_TOMORROW": "Until tomorrow",
+      "UNTIL_NEXT_MONTH": "Until next month",
+      "AN_HOUR_FROM_NOW": "Until an hour from now",
+      "UNTIL_CUSTOM_TIME": "Custom...",
+      "CHANGE_APPEARANCE": "Change Appearance",
+      "LIGHT_MODE": "Light",
+      "DARK_MODE": "Dark",
+      "SYSTEM_MODE": "System",
+      "SNOOZE_NOTIFICATION": "Snooze Notification"
+    }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
+  },
+  "COMMON": {
+    "OR": "Or",
+    "CLICK_HERE": "click here"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/helpCenter.json b/app/javascript/dashboard/i18n/locale/tl/helpCenter.json
new file mode 100644
index 0000000000000..5d77c21aa2cf0
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/helpCenter.json
@@ -0,0 +1,487 @@
+{
+  "HELP_CENTER": {
+    "HEADER": {
+      "FILTER": "Filter by",
+      "SORT": "Sort by",
+      "LOCALE": "Locale",
+      "SETTINGS_BUTTON": "Settings",
+      "NEW_BUTTON": "New Article",
+      "DROPDOWN_OPTIONS": {
+        "PUBLISHED": "Published",
+        "DRAFT": "Draft",
+        "ARCHIVED": "Archived"
+      },
+      "TITLES": {
+        "ALL_ARTICLES": "All Articles",
+        "MINE": "My Articles",
+        "DRAFT": "Draft Articles",
+        "ARCHIVED": "Archived Articles"
+      },
+      "LOCALE_SELECT": {
+        "TITLE": "Select locale",
+        "PLACEHOLDER": "Select locale",
+        "NO_RESULT": "No locale found",
+        "SEARCH_PLACEHOLDER": "Search locale"
+      }
+    },
+    "EDIT_HEADER": {
+      "ALL_ARTICLES": "All Articles",
+      "PUBLISH_BUTTON": "Publish",
+      "MOVE_TO_ARCHIVE_BUTTON": "Move to archived",
+      "PREVIEW": "Preview",
+      "ADD_TRANSLATION": "Add translation",
+      "OPEN_SIDEBAR": "Open sidebar",
+      "CLOSE_SIDEBAR": "Close sidebar",
+      "SAVING": "Saving...",
+      "SAVED": "Saved"
+    },
+    "ARTICLE_EDITOR": {
+      "IMAGE_UPLOAD": {
+        "TITLE": "Upload image",
+        "UPLOADING": "Uploading...",
+        "SUCCESS": "Image uploaded successfully",
+        "ERROR": "Error while uploading image",
+        "ERROR_FILE_SIZE": "Image size should be less than {size}MB",
+        "ERROR_FILE_FORMAT": "Image format should be jpg, jpeg or png",
+        "ERROR_FILE_DIMENSIONS": "Image dimensions should be less than 2000 x 2000"
+      }
+    },
+    "ARTICLE_SETTINGS": {
+      "TITLE": "Article Settings",
+      "FORM": {
+        "CATEGORY": {
+          "LABEL": "Category",
+          "TITLE": "Select category",
+          "PLACEHOLDER": "Select category",
+          "NO_RESULT": "No category found",
+          "SEARCH_PLACEHOLDER": "Search category"
+        },
+        "AUTHOR": {
+          "LABEL": "Author",
+          "TITLE": "Select author",
+          "PLACEHOLDER": "Select author",
+          "NO_RESULT": "No authors found",
+          "SEARCH_PLACEHOLDER": "Search author"
+        },
+        "META_TITLE": {
+          "LABEL": "Meta title",
+          "PLACEHOLDER": "Add a meta title"
+        },
+        "META_DESCRIPTION": {
+          "LABEL": "Meta description",
+          "PLACEHOLDER": "Add your meta description for better SEO results..."
+        },
+        "META_TAGS": {
+          "LABEL": "Meta tags",
+          "PLACEHOLDER": "Add meta tags separated by comma..."
+        }
+      },
+      "BUTTONS": {
+        "ARCHIVE": "Archive article",
+        "DELETE": "Delete article"
+      }
+    },
+    "ARTICLE_SEARCH_RESULT": {
+      "UNCATEGORIZED": "Uncategorized",
+      "SEARCH_RESULTS": "Search results for %{query}",
+      "EMPTY_TEXT": "Search for articles to insert into replies.",
+      "SEARCH_LOADER": "Searching...",
+      "INSERT_ARTICLE": "Insert",
+      "NO_RESULT": "No articles found",
+      "COPY_LINK": "Copy article link to clipboard",
+      "OPEN_LINK": "Open article in new tab",
+      "PREVIEW_LINK": "Preview article"
+    },
+    "PORTAL": {
+      "HEADER": "Portals",
+      "DEFAULT": "Default",
+      "NEW_BUTTON": "New Portal",
+      "ACTIVE_BADGE": "active",
+      "CHOOSE_LOCALE_LABEL": "Choose a locale",
+      "LOADING_MESSAGE": "Loading portals...",
+      "ARTICLES_LABEL": "articles",
+      "NO_PORTALS_MESSAGE": "There are no available portals",
+      "ADD_NEW_LOCALE": "Add a new locale",
+      "POPOVER": {
+        "TITLE": "Portals",
+        "PORTAL_SETTINGS": "Portal settings",
+        "SUBTITLE": "You have multiple portals and can have different locales for each portal.",
+        "CANCEL_BUTTON_LABEL": "Cancel",
+        "CHOOSE_LOCALE_BUTTON": "Choose Locale"
+      },
+      "PORTAL_SETTINGS": {
+        "LIST_ITEM": {
+          "HEADER": {
+            "COUNT_LABEL": "articles",
+            "ADD": "Add locale",
+            "VISIT": "Visit site",
+            "SETTINGS": "Settings",
+            "DELETE": "Delete"
+          },
+          "PORTAL_CONFIG": {
+            "TITLE": "Portal Configurations",
+            "ITEMS": {
+              "NAME": "Name",
+              "DOMAIN": "Custom domain",
+              "SLUG": "Slug",
+              "TITLE": "Portal title",
+              "THEME": "Theme color",
+              "SUB_TEXT": "Portal sub text"
+            }
+          },
+          "AVAILABLE_LOCALES": {
+            "TITLE": "Available locales",
+            "TABLE": {
+              "NAME": "Locale name",
+              "CODE": "Locale code",
+              "ARTICLE_COUNT": "No. of articles",
+              "CATEGORIES": "No. of categories",
+              "SWAP": "Swap",
+              "DELETE": "Delete",
+              "DEFAULT_LOCALE": "Default"
+            }
+          }
+        },
+        "DELETE_PORTAL": {
+          "TITLE": "Delete portal",
+          "MESSAGE": "Are you sure you want to delete this portal",
+          "YES": "Yes, delete portal",
+          "NO": "No, keep portal",
+          "API": {
+            "DELETE_SUCCESS": "Portal deleted successfully",
+            "DELETE_ERROR": "Error while deleting portal"
+          }
+        }
+      },
+      "EDIT": {
+        "HEADER_TEXT": "Edit portal",
+        "TABS": {
+          "BASIC_SETTINGS": {
+            "TITLE": "Basic information"
+          },
+          "CUSTOMIZATION_SETTINGS": {
+            "TITLE": "Portal customization"
+          },
+          "CATEGORY_SETTINGS": {
+            "TITLE": "Categories"
+          },
+          "LOCALE_SETTINGS": {
+            "TITLE": "Locales"
+          }
+        },
+        "CATEGORIES": {
+          "TITLE": "Categories in",
+          "NEW_CATEGORY": "New category",
+          "TABLE": {
+            "NAME": "Name",
+            "DESCRIPTION": "Description",
+            "LOCALE": "Locale",
+            "ARTICLE_COUNT": "No. of articles",
+            "ACTION_BUTTON": {
+              "EDIT": "Edit category",
+              "DELETE": "Delete category"
+            },
+            "EMPTY_TEXT": "No categories found"
+          }
+        },
+        "EDIT_BASIC_INFO": {
+          "BUTTON_TEXT": "Update basic settings"
+        }
+      },
+      "ADD": {
+        "CREATE_FLOW": [
+          {
+            "title": "Help center information",
+            "route": "new_portal_information",
+            "body": "Basic information about portal",
+            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+          },
+          {
+            "title": "Help center customization",
+            "route": "portal_customization",
+            "body": "Customize portal",
+            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+          },
+          {
+            "title": "Voila! 🎉",
+            "route": "portal_finish",
+            "body": "You're all set!",
+            "FINISH": "Finish"
+          }
+        ],
+        "CREATE_FLOW_PAGE": {
+          "BACK_BUTTON": "Back",
+          "BASIC_SETTINGS_PAGE": {
+            "HEADER": "Create Portal",
+            "TITLE": "Help center information",
+            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+          },
+          "CUSTOMIZATION_PAGE": {
+            "HEADER": "Portal customisation",
+            "TITLE": "Help center customization",
+            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+          },
+          "FINISH_PAGE": {
+            "TITLE": "Voila!🎉 You're all set up!",
+            "MESSAGE": "You can now see this created portal on your all portals page.",
+            "FINISH": "Go to all portals page"
+          }
+        },
+        "LOGO": {
+          "LABEL": "Logo",
+          "UPLOAD_BUTTON": "Upload logo",
+          "HELP_TEXT": "This logo will be displayed on the portal header.",
+          "IMAGE_UPLOAD_SUCCESS": "Logo uploaded successfully",
+          "IMAGE_UPLOAD_ERROR": "Logo deleted successfully",
+          "IMAGE_DELETE_ERROR": "Error while deleting logo"
+        },
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Portal name",
+          "HELP_TEXT": "The name will be used in the public facing portal internally.",
+          "ERROR": "Name is required"
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Portal slug for urls",
+          "ERROR": "Slug is required"
+        },
+        "DOMAIN": {
+          "LABEL": "Custom Domain",
+          "PLACEHOLDER": "Portal custom domain",
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: %{exampleURL}",
+          "ERROR": "Enter a valid domain URL"
+        },
+        "HOME_PAGE_LINK": {
+          "LABEL": "Home Page Link",
+          "PLACEHOLDER": "Portal home page link",
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: %{exampleURL}",
+          "ERROR": "Enter a valid home page URL"
+        },
+        "THEME_COLOR": {
+          "LABEL": "Portal theme color",
+          "HELP_TEXT": "This color will show as the theme color for the portal."
+        },
+        "PAGE_TITLE": {
+          "LABEL": "Page Title",
+          "PLACEHOLDER": "Portal page title",
+          "HELP_TEXT": "The page title will be used in the public facing portal.",
+          "ERROR": "Page title is required"
+        },
+        "HEADER_TEXT": {
+          "LABEL": "Header Text",
+          "PLACEHOLDER": "Portal header text",
+          "HELP_TEXT": "The Portal header text will be used in the public facing portal.",
+          "ERROR": "Portal header text is required"
+        },
+        "API": {
+          "SUCCESS_MESSAGE_FOR_BASIC": "Portal created successfully.",
+          "ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.",
+          "SUCCESS_MESSAGE_FOR_UPDATE": "Portal updated successfully.",
+          "ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again."
+        }
+      },
+      "ADD_LOCALE": {
+        "TITLE": "Add a new locale",
+        "SUB_TITLE": "This adds a new locale to your available translation list.",
+        "PORTAL": "Portal",
+        "LOCALE": {
+          "LABEL": "Locale",
+          "PLACEHOLDER": "Choose a locale",
+          "ERROR": "Locale is required"
+        },
+        "BUTTONS": {
+          "CREATE": "Create locale",
+          "CANCEL": "Cancel"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Locale added successfully",
+          "ERROR_MESSAGE": "Unable to add locale. Try again."
+        }
+      },
+      "CHANGE_DEFAULT_LOCALE": {
+        "API": {
+          "SUCCESS_MESSAGE": "Default locale updated successfully",
+          "ERROR_MESSAGE": "Unable to update default locale. Try again."
+        }
+      },
+      "DELETE_LOCALE": {
+        "API": {
+          "SUCCESS_MESSAGE": "Locale removed from portal successfully",
+          "ERROR_MESSAGE": "Unable to remove locale from portal. Try again."
+        }
+      }
+    },
+    "TABLE": {
+      "LOADING_MESSAGE": "Loading articles...",
+      "404": "No articles matches your search 🔍",
+      "NO_ARTICLES": "There are no available articles",
+      "HEADERS": {
+        "TITLE": "Title",
+        "CATEGORY": "Category",
+        "READ_COUNT": "Views",
+        "STATUS": "Status",
+        "LAST_EDITED": "Last edited"
+      },
+      "COLUMNS": {
+        "BY": "by",
+        "AUTHOR_NOT_AVAILABLE": "Author is not available"
+      }
+    },
+    "EDIT_ARTICLE": {
+      "LOADING": "Loading article...",
+      "TITLE_PLACEHOLDER": "Article title goes here",
+      "CONTENT_PLACEHOLDER": "Write your article here",
+      "API": {
+        "ERROR": "Error while saving article"
+      }
+    },
+    "PUBLISH_ARTICLE": {
+      "API": {
+        "ERROR": "Error while publishing article",
+        "SUCCESS": "Article published successfully"
+      }
+    },
+    "ARCHIVE_ARTICLE": {
+      "API": {
+        "ERROR": "Error while archiving article",
+        "SUCCESS": "Article archived successfully"
+      }
+    },
+    "DELETE_ARTICLE": {
+      "MODAL": {
+        "CONFIRM": {
+          "TITLE": "Confirm Deletion",
+          "MESSAGE": "Are you sure to delete the article?",
+          "YES": "Yes, Delete",
+          "NO": "No, Keep it"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Article deleted successfully",
+        "ERROR_MESSAGE": "Error while deleting article"
+      }
+    },
+    "CREATE_ARTICLE": {
+      "ERROR_MESSAGE": "Please add the article heading and content then only you can update the settings"
+    },
+    "SIDEBAR": {
+      "SEARCH": {
+        "PLACEHOLDER": "Search for articles"
+      }
+    },
+    "CATEGORY": {
+      "ADD": {
+        "TITLE": "Create a category",
+        "SUB_TITLE": "The category will be used in the public facing portal to categorize articles.",
+        "PORTAL": "Portal",
+        "LOCALE": "Locale",
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Category name",
+          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
+          "ERROR": "Name is required"
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Category slug for urls",
+          "HELP_TEXT": "app.chatwoot.com/hc/my-portal/en-US/categories/my-slug",
+          "ERROR": "Slug is required"
+        },
+        "DESCRIPTION": {
+          "LABEL": "Description",
+          "PLACEHOLDER": "Give a short description about the category.",
+          "ERROR": "Description is required"
+        },
+        "BUTTONS": {
+          "CREATE": "Create category",
+          "CANCEL": "Cancel"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Category created successfully",
+          "ERROR_MESSAGE": "Unable to create category"
+        }
+      },
+      "EDIT": {
+        "TITLE": "Edit a category",
+        "SUB_TITLE": "Editing a category will update the category in the public facing portal.",
+        "PORTAL": "Portal",
+        "LOCALE": "Locale",
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Category name",
+          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
+          "ERROR": "Name is required"
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Category slug for urls",
+          "HELP_TEXT": "app.chatwoot.com/hc/my-portal/en-US/categories/my-slug",
+          "ERROR": "Slug is required"
+        },
+        "DESCRIPTION": {
+          "LABEL": "Description",
+          "PLACEHOLDER": "Give a short description about the category.",
+          "ERROR": "Description is required"
+        },
+        "BUTTONS": {
+          "CREATE": "Update category",
+          "CANCEL": "Cancel"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Category updated successfully",
+          "ERROR_MESSAGE": "Unable to update category"
+        }
+      },
+      "DELETE": {
+        "API": {
+          "SUCCESS_MESSAGE": "Category deleted successfully",
+          "ERROR_MESSAGE": "Unable to delete category"
+        }
+      }
+    },
+    "ARTICLE_SEARCH": {
+      "TITLE": "Search articles",
+      "PLACEHOLDER": "Search articles",
+      "NO_RESULT": "No articles found",
+      "SEARCHING": "Searching...",
+      "SEARCH_BUTTON": "Search",
+      "INSERT_ARTICLE": "Insert link",
+      "IFRAME_ERROR": "URL is empty or invalid. Unable to display content.",
+      "OPEN_ARTICLE_SEARCH": "Insert article from Help Center",
+      "SUCCESS_ARTICLE_INSERTED": "Article inserted successfully",
+      "PREVIEW_LINK": "Preview article",
+      "CANCEL": "Close",
+      "BACK": "Back",
+      "BACK_RESULTS": "Back to results"
+    },
+    "UPGRADE_PAGE": {
+      "TITLE": "Help Center",
+      "DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Upgrade your subscription to enable this feature.",
+      "SELF_HOSTED_DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Please contact your administrator to enable this feature.",
+      "BUTTON": {
+        "LEARN_MORE": "Learn more",
+        "UPGRADE": "Upgrade"
+      },
+      "FEATURES": {
+        "PORTALS": {
+          "TITLE": "Multiple portals",
+          "DESCRIPTION": "Create multiple help center portals for different products using the same account."
+        },
+        "LOCALES": {
+          "TITLE": "Full support for locales",
+          "DESCRIPTION": "Localize the portal in your language. We support all locales and allow translations for every article."
+        },
+        "SEO": {
+          "TITLE": "SEO-friendly design",
+          "DESCRIPTION": "Customize your meta tags to improve your visibility on search engines with our SEO-friendly pages."
+        },
+        "API": {
+          "TITLE": "Full API support",
+          "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/tl/inbox.json b/app/javascript/dashboard/i18n/locale/tl/inbox.json
new file mode 100644
index 0000000000000..137aac54b75ca
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/inbox.json
@@ -0,0 +1,64 @@
+{
+  "INBOX": {
+    "LIST": {
+      "TITLE": "Inbox",
+      "DISPLAY_DROPDOWN": "Display",
+      "LOADING": "Fetching notifications",
+      "404": "There are no active notifications in this group.",
+      "NO_NOTIFICATIONS": "No notifications",
+      "NOTE": "Notifications from all subscribed inboxes",
+      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
+      "SNOOZED_UNTIL": "Snoozed until",
+      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
+      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
+    },
+    "ACTION_HEADER": {
+      "SNOOZE": "Snooze notification",
+      "DELETE": "Delete notification",
+      "BACK": "Back"
+    },
+    "TYPES": {
+      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
+      "CONVERSATION_CREATION": "New conversation created",
+      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
+      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
+      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
+      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
+      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
+    },
+    "MENU_ITEM": {
+      "MARK_AS_READ": "Mark as read",
+      "MARK_AS_UNREAD": "Mark as unread",
+      "SNOOZE": "Snooze",
+      "DELETE": "Delete",
+      "MARK_ALL_READ": "Mark all as read",
+      "DELETE_ALL": "Delete all",
+      "DELETE_ALL_READ": "Delete all read"
+    },
+    "DISPLAY_MENU": {
+      "SORT": "Sort",
+      "DISPLAY": "Display :",
+      "SORT_OPTIONS": {
+        "NEWEST": "Newest",
+        "OLDEST": "Oldest",
+        "PRIORITY": "Priority"
+      },
+      "DISPLAY_OPTIONS": {
+        "SNOOZED": "Snoozed",
+        "READ": "Read",
+        "LABELS": "Labels",
+        "CONVERSATION_ID": "Conversation ID"
+      }
+    },
+    "ALERTS": {
+      "MARK_AS_READ": "Notification marked as read",
+      "MARK_AS_UNREAD": "Notification marked as unread",
+      "SNOOZE": "Notification snoozed",
+      "DELETE": "Notification deleted",
+      "MARK_ALL_READ": "All notifications marked as read",
+      "DELETE_ALL": "All notifications deleted",
+      "DELETE_ALL_READ": "All read notifications deleted"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/tl/inboxMgmt.json
new file mode 100644
index 0000000000000..20c738a86aa9b
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/inboxMgmt.json
@@ -0,0 +1,742 @@
+{
+  "INBOX_MGMT": {
+    "HEADER": "Inboxes",
+    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
+    "LIST": {
+      "404": "There are no inboxes attached to this account."
+    },
+    "CREATE_FLOW": [
+      {
+        "title": "Choose Channel",
+        "route": "settings_inbox_new",
+        "body": "Choose the provider you want to integrate with Chatwoot."
+      },
+      {
+        "title": "Create Inbox",
+        "route": "settings_inboxes_page_channel",
+        "body": "Authenticate your account and create an inbox."
+      },
+      {
+        "title": "Add Agents",
+        "route": "settings_inboxes_add_agents",
+        "body": "Add agents to the created inbox."
+      },
+      {
+        "title": "Voilà!",
+        "route": "settings_inbox_finish",
+        "body": "You are all set to go!"
+      }
+    ],
+    "ADD": {
+      "CHANNEL_NAME": {
+        "LABEL": "Inbox Name",
+        "PLACEHOLDER": "Enter your inbox name (eg: Acme Inc)",
+        "ERROR": "Please enter a valid inbox name"
+      },
+      "WEBSITE_NAME": {
+        "LABEL": "Website Name",
+        "PLACEHOLDER": "Enter your website name (eg: Acme Inc)"
+      },
+      "FB": {
+        "HELP": "PS: By signing in, we only get access to your Page's messages. Your private messages can never be accessed by Chatwoot.",
+        "CHOOSE_PAGE": "Choose Page",
+        "CHOOSE_PLACEHOLDER": "Select a page from the list",
+        "INBOX_NAME": "Inbox Name",
+        "ADD_NAME": "Add a name for your inbox",
+        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_A_VALUE": "Pick a value"
+      },
+      "TWITTER": {
+        "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' ",
+        "ERROR_MESSAGE": "There was an error connecting to Twitter, please try again",
+        "TWEETS": {
+          "ENABLE": "Create conversations from mentioned Tweets"
+        }
+      },
+      "WEBSITE_CHANNEL": {
+        "TITLE": "Website channel",
+        "DESC": "Create a channel for your website and start supporting your customers via our website widget.",
+        "LOADING_MESSAGE": "Creating Website Support Channel",
+        "CHANNEL_AVATAR": {
+          "LABEL": "Channel Avatar"
+        },
+        "CHANNEL_WEBHOOK_URL": {
+          "LABEL": "Webhook URL",
+          "PLACEHOLDER": "Please enter your Webhook URL",
+          "ERROR": "Please enter a valid URL"
+        },
+        "CHANNEL_DOMAIN": {
+          "LABEL": "Website Domain",
+          "PLACEHOLDER": "Enter your website domain (eg: acme.com)"
+        },
+        "CHANNEL_WELCOME_TITLE": {
+          "LABEL": "Welcome Heading",
+          "PLACEHOLDER": "Hi there !"
+        },
+        "CHANNEL_WELCOME_TAGLINE": {
+          "LABEL": "Welcome Tagline",
+          "PLACEHOLDER": "We make it simple to connect with us. Ask us anything, or share your feedback."
+        },
+        "CHANNEL_GREETING_MESSAGE": {
+          "LABEL": "Channel greeting message",
+          "PLACEHOLDER": "Acme Inc typically replies in a few hours."
+        },
+        "CHANNEL_GREETING_TOGGLE": {
+          "LABEL": "Enable channel greeting",
+          "HELP_TEXT": "Auto-send greeting messages when customers start a conversation and send their first message.",
+          "ENABLED": "Enabled",
+          "DISABLED": "Disabled"
+        },
+        "REPLY_TIME": {
+          "TITLE": "Set Reply time",
+          "IN_A_FEW_MINUTES": "In a few minutes",
+          "IN_A_FEW_HOURS": "In a few hours",
+          "IN_A_DAY": "In a day",
+          "HELP_TEXT": "This reply time will be displayed on the live chat widget"
+        },
+        "WIDGET_COLOR": {
+          "LABEL": "Widget Color",
+          "PLACEHOLDER": "Update the widget color used in widget"
+        },
+        "SUBMIT_BUTTON": "Create inbox",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to create a website channel, please try again"
+        }
+      },
+      "TWILIO": {
+        "TITLE": "Twilio SMS/WhatsApp Channel",
+        "DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp.",
+        "ACCOUNT_SID": {
+          "LABEL": "Account SID",
+          "PLACEHOLDER": "Please enter your Twilio Account SID",
+          "ERROR": "This field is required"
+        },
+        "API_KEY": {
+          "USE_API_KEY": "Use API Key Authentication",
+          "LABEL": "API Key SID",
+          "PLACEHOLDER": "Please enter your API Key SID",
+          "ERROR": "This field is required"
+        },
+        "API_KEY_SECRET": {
+          "LABEL": "API Key Secret",
+          "PLACEHOLDER": "Please enter your API Key Secret",
+          "ERROR": "This field is required"
+        },
+        "MESSAGING_SERVICE_SID": {
+          "LABEL": "Messaging Service SID",
+          "PLACEHOLDER": "Please enter your Twilio Messaging Service SID",
+          "ERROR": "This field is required",
+          "USE_MESSAGING_SERVICE": "Use a Twilio Messaging Service"
+        },
+        "CHANNEL_TYPE": {
+          "LABEL": "Channel Type",
+          "ERROR": "Please select your Channel Type"
+        },
+        "AUTH_TOKEN": {
+          "LABEL": "Auth Token",
+          "PLACEHOLDER": "Please enter your Twilio Auth Token",
+          "ERROR": "This field is required"
+        },
+        "CHANNEL_NAME": {
+          "LABEL": "Inbox Name",
+          "PLACEHOLDER": "Please enter a inbox name",
+          "ERROR": "This field is required"
+        },
+        "PHONE_NUMBER": {
+          "LABEL": "Phone Number",
+          "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
+          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
+        },
+        "API_CALLBACK": {
+          "TITLE": "Callback URL",
+          "SUBTITLE": "You have to configure the message callback URL in Twilio with the URL mentioned here."
+        },
+        "SUBMIT_BUTTON": "Create Twilio Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
+        }
+      },
+      "SMS": {
+        "TITLE": "SMS Channel",
+        "DESC": "Start supporting your customers via SMS.",
+        "PROVIDERS": {
+          "LABEL": "API Provider",
+          "TWILIO": "Twilio",
+          "BANDWIDTH": "Bandwidth"
+        },
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the SMS channel"
+        },
+        "BANDWIDTH": {
+          "ACCOUNT_ID": {
+            "LABEL": "Account ID",
+            "PLACEHOLDER": "Please enter your Bandwidth Account ID",
+            "ERROR": "This field is required"
+          },
+          "API_KEY": {
+            "LABEL": "API Key",
+            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "ERROR": "This field is required"
+          },
+          "API_SECRET": {
+            "LABEL": "API Secret",
+            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "ERROR": "This field is required"
+          },
+          "APPLICATION_ID": {
+            "LABEL": "Application ID",
+            "PLACEHOLDER": "Please enter your Bandwidth Application ID",
+            "ERROR": "This field is required"
+          },
+          "INBOX_NAME": {
+            "LABEL": "Inbox Name",
+            "PLACEHOLDER": "Please enter a inbox name",
+            "ERROR": "This field is required"
+          },
+          "PHONE_NUMBER": {
+            "LABEL": "Phone number",
+            "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
+            "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
+          },
+          "SUBMIT_BUTTON": "Create Bandwidth Channel",
+          "API": {
+            "ERROR_MESSAGE": "We were not able to authenticate Bandwidth credentials, please try again"
+          },
+          "API_CALLBACK": {
+            "TITLE": "Callback URL",
+            "SUBTITLE": "You have to configure the message callback URL in Bandwidth with the URL mentioned here."
+          }
+        }
+      },
+      "WHATSAPP": {
+        "TITLE": "WhatsApp Channel",
+        "DESC": "Start supporting your customers via WhatsApp.",
+        "PROVIDERS": {
+          "LABEL": "API Provider",
+          "TWILIO": "Twilio",
+          "WHATSAPP_CLOUD": "WhatsApp Cloud",
+          "360_DIALOG": "360Dialog"
+        },
+        "INBOX_NAME": {
+          "LABEL": "Inbox Name",
+          "PLACEHOLDER": "Please enter an inbox name",
+          "ERROR": "This field is required"
+        },
+        "PHONE_NUMBER": {
+          "LABEL": "Phone number",
+          "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
+          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
+        },
+        "PHONE_NUMBER_ID": {
+          "LABEL": "Phone number ID",
+          "PLACEHOLDER": "Please enter the Phone number ID obtained from Facebook developer dashboard.",
+          "ERROR": "Please enter a valid value."
+        },
+        "BUSINESS_ACCOUNT_ID": {
+          "LABEL": "Business Account ID",
+          "PLACEHOLDER": "Please enter the Business Account ID obtained from Facebook developer dashboard.",
+          "ERROR": "Please enter a valid value."
+        },
+        "WEBHOOK_VERIFY_TOKEN": {
+          "LABEL": "Webhook Verify Token",
+          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "ERROR": "Please enter a valid value."
+        },
+        "API_KEY": {
+          "LABEL": "API key",
+          "SUBTITLE": "Configure the WhatsApp API key.",
+          "PLACEHOLDER": "API key",
+          "ERROR": "Please enter a valid value."
+        },
+        "API_CALLBACK": {
+          "TITLE": "Callback URL",
+          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "WEBHOOK_URL": "Webhook URL",
+          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
+        },
+        "SUBMIT_BUTTON": "Create WhatsApp Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
+        }
+      },
+      "API_CHANNEL": {
+        "TITLE": "API Channel",
+        "DESC": "Integrate with API channel and start supporting your customers.",
+        "CHANNEL_NAME": {
+          "LABEL": "Channel Name",
+          "PLACEHOLDER": "Please enter a channel name",
+          "ERROR": "This field is required"
+        },
+        "WEBHOOK_URL": {
+          "LABEL": "Webhook URL",
+          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "PLACEHOLDER": "Webhook URL"
+        },
+        "SUBMIT_BUTTON": "Create API Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the api channel"
+        }
+      },
+      "EMAIL_CHANNEL": {
+        "TITLE": "Email Channel",
+        "DESC": "Integrate your email inbox.",
+        "CHANNEL_NAME": {
+          "LABEL": "Channel Name",
+          "PLACEHOLDER": "Please enter a channel name",
+          "ERROR": "This field is required"
+        },
+        "EMAIL": {
+          "LABEL": "Email",
+          "SUBTITLE": "Provide the email address where your customers send support requests.",
+          "PLACEHOLDER": "Email"
+        },
+        "SUBMIT_BUTTON": "Create Email Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the email channel"
+        },
+        "FINISH_MESSAGE": "Start forwarding your emails to the following email address."
+      },
+      "LINE_CHANNEL": {
+        "TITLE": "LINE Channel",
+        "DESC": "Integrate with LINE channel and start supporting your customers.",
+        "CHANNEL_NAME": {
+          "LABEL": "Channel Name",
+          "PLACEHOLDER": "Please enter a channel name",
+          "ERROR": "This field is required"
+        },
+        "LINE_CHANNEL_ID": {
+          "LABEL": "LINE Channel ID",
+          "PLACEHOLDER": "LINE Channel ID"
+        },
+        "LINE_CHANNEL_SECRET": {
+          "LABEL": "LINE Channel Secret",
+          "PLACEHOLDER": "LINE Channel Secret"
+        },
+        "LINE_CHANNEL_TOKEN": {
+          "LABEL": "LINE Channel Token",
+          "PLACEHOLDER": "LINE Channel Token"
+        },
+        "SUBMIT_BUTTON": "Create LINE Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the LINE channel"
+        },
+        "API_CALLBACK": {
+          "TITLE": "Callback URL",
+          "SUBTITLE": "You have to configure the webhook URL in LINE application with the URL mentioned here."
+        }
+      },
+      "TELEGRAM_CHANNEL": {
+        "TITLE": "Telegram Channel",
+        "DESC": "Integrate with Telegram channel and start supporting your customers.",
+        "BOT_TOKEN": {
+          "LABEL": "Bot Token",
+          "SUBTITLE": "Configure the bot token you have obtained from Telegram BotFather.",
+          "PLACEHOLDER": "Bot Token"
+        },
+        "SUBMIT_BUTTON": "Create Telegram Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the telegram channel"
+        }
+      },
+      "AUTH": {
+        "TITLE": "Choose a channel",
+        "DESC": "Chatwoot supports live-chat widgets, Facebook Messenger, WhatsApp, Emails, etc., as channels. If you want to build a custom channel, you can create it using the API channel. To get started, choose one of the channels below."
+      },
+      "AGENTS": {
+        "TITLE": "Agents",
+        "DESC": "Here you can add agents to manage your newly created inbox. Only these selected agents will have access to your inbox. Agents which are not part of this inbox will not be able to see or respond to messages in this inbox when they login. <br> <b>PS:</b> As an administrator, if you need access to all inboxes, you should add yourself as agent to all inboxes that you create.",
+        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "PICK_AGENTS": "Pick agents for the inbox"
+      },
+      "DETAILS": {
+        "TITLE": "Inbox Details",
+        "DESC": "From the dropdown below, select the Facebook Page you want to connect to Chatwoot. You can also give a custom name to your inbox for better identification."
+      },
+      "FINISH": {
+        "TITLE": "Nailed It!",
+        "DESC": "You have successfully finished integrating your Facebook Page with Chatwoot. Next time a customer messages your Page, the conversation will automatically appear on your inbox.<br>We are also providing you with a widget script that you can easily add to your website. Once this is live on your website, customers can message you right from your website without the help of any external tool and the conversation will appear right here, on Chatwoot.<br>Cool, huh? Well, we sure try to be :)"
+      },
+      "EMAIL_PROVIDER": {
+        "TITLE": "Select your email provider",
+        "DESCRIPTION": "Select an email provider from the list below. If you don't see your email provider in the list, you can select the other provider option and provide the IMAP and SMTP Credentials."
+      },
+      "MICROSOFT": {
+        "TITLE": "Microsoft Email",
+        "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
+        "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
+        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
+        "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
+      }
+    },
+    "DETAILS": {
+      "LOADING_FB": "Authenticating you with Facebook...",
+      "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
+      "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
+      "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
+      "CREATING_CHANNEL": "Creating your Inbox...",
+      "TITLE": "Configure Inbox Details",
+      "DESC": ""
+    },
+    "AGENTS": {
+      "BUTTON_TEXT": "Add agents",
+      "ADD_AGENTS": "Adding Agents to your Inbox..."
+    },
+    "FINISH": {
+      "TITLE": "Your Inbox is ready!",
+      "MESSAGE": "You can now engage with your customers through your new Channel. Happy supporting",
+      "BUTTON_TEXT": "Take me there",
+      "MORE_SETTINGS": "More settings",
+      "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox."
+    },
+    "REAUTH": "Reauthorize",
+    "VIEW": "View",
+    "EDIT": {
+      "API": {
+        "SUCCESS_MESSAGE": "Inbox settings updated successfully",
+        "AUTO_ASSIGNMENT_SUCCESS_MESSAGE": "Auto assignment updated successfully",
+        "ERROR_MESSAGE": "We couldn't update inbox settings. Please try again later."
+      },
+      "EMAIL_COLLECT_BOX": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      },
+      "ENABLE_CSAT": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      },
+      "SENDER_NAME_SECTION": {
+        "TITLE": "Sender name",
+        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "FOR_EG": "For eg:",
+        "FRIENDLY": {
+          "TITLE": "Friendly",
+          "FROM": "from",
+          "SUBTITLE": "Add the name of the agent who sent the reply in the sender name to make it friendly."
+        },
+        "PROFESSIONAL": {
+          "TITLE": "Professional",
+          "SUBTITLE": "Use only the configured business name as the sender name in the email header."
+        },
+        "BUSINESS_NAME": {
+          "BUTTON_TEXT": "+ Configure your business name",
+          "PLACEHOLDER": "Enter your business name",
+          "SAVE_BUTTON_TEXT": "Save"
+        }
+      },
+      "ALLOW_MESSAGES_AFTER_RESOLVED": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      },
+      "ENABLE_CONTINUITY_VIA_EMAIL": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      },
+      "LOCK_TO_SINGLE_CONVERSATION": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      },
+      "ENABLE_HMAC": {
+        "LABEL": "Enable"
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "AVATAR_DELETE_BUTTON_TEXT": "Delete Avatar",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure to delete ",
+        "PLACE_HOLDER": "Please type {inboxName} to confirm",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Inbox deleted successfully",
+        "ERROR_MESSAGE": "Could not delete inbox. Please try again later.",
+        "AVATAR_SUCCESS_MESSAGE": "Inbox avatar deleted successfully",
+        "AVATAR_ERROR_MESSAGE": "Could not delete the inbox avatar. Please try again later."
+      }
+    },
+    "TABS": {
+      "SETTINGS": "Settings",
+      "COLLABORATORS": "Collaborators",
+      "CONFIGURATION": "Configuration",
+      "CAMPAIGN": "Campaigns",
+      "PRE_CHAT_FORM": "Pre Chat Form",
+      "BUSINESS_HOURS": "Business Hours",
+      "WIDGET_BUILDER": "Widget Builder",
+      "BOT_CONFIGURATION": "Bot Configuration"
+    },
+    "SETTINGS": "Settings",
+    "FEATURES": {
+      "LABEL": "Features",
+      "DISPLAY_FILE_PICKER": "Display file picker on the widget",
+      "DISPLAY_EMOJI_PICKER": "Display emoji picker on the widget",
+      "ALLOW_END_CONVERSATION": "Allow users to end conversation from the widget",
+      "USE_INBOX_AVATAR_FOR_BOT": "Use inbox name and avatar for the bot"
+    },
+    "SETTINGS_POPUP": {
+      "MESSENGER_HEADING": "Messenger Script",
+      "MESSENGER_SUB_HEAD": "Place this button inside your body tag",
+      "INBOX_AGENTS": "Agents",
+      "INBOX_AGENTS_SUB_TEXT": "Add or remove agents from this inbox",
+      "AGENT_ASSIGNMENT": "Conversation Assignment",
+      "AGENT_ASSIGNMENT_SUB_TEXT": "Update conversation assignment settings",
+      "UPDATE": "Update",
+      "ENABLE_EMAIL_COLLECT_BOX": "Enable email collect box",
+      "ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT": "Enable or disable email collect box on new conversation",
+      "AUTO_ASSIGNMENT": "Enable auto assignment",
+      "ENABLE_CSAT": "Enable CSAT",
+      "SENDER_NAME_SECTION": "Enable Agent Name in Email",
+      "ENABLE_CSAT_SUB_TEXT": "Enable/Disable CSAT(Customer satisfaction) survey after resolving a conversation",
+      "SENDER_NAME_SECTION_TEXT": "Enable/Disable showing Agent's name in email, if disabled it will show business name",
+      "ENABLE_CONTINUITY_VIA_EMAIL": "Enable conversation continuity via email",
+      "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "Conversations will continue over email if the contact email address is available.",
+      "LOCK_TO_SINGLE_CONVERSATION": "Lock to single conversation",
+      "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "Enable or disable multiple conversations for the same contact in this inbox",
+      "INBOX_UPDATE_TITLE": "Inbox Settings",
+      "INBOX_UPDATE_SUB_TEXT": "Update your inbox settings",
+      "AUTO_ASSIGNMENT_SUB_TEXT": "Enable or disable the automatic assignment of new conversations to the agents added to this inbox.",
+      "HMAC_VERIFICATION": "User Identity Validation",
+      "HMAC_DESCRIPTION": "With this key you can generate a secret token that can be used to verify the identity of your users.",
+      "HMAC_LINK_TO_DOCS": "You can read more here.",
+      "HMAC_MANDATORY_VERIFICATION": "Enforce User Identity Validation",
+      "HMAC_MANDATORY_DESCRIPTION": "If enabled, requests that cannot be verified will be rejected.",
+      "INBOX_IDENTIFIER": "Inbox Identifier",
+      "INBOX_IDENTIFIER_SUB_TEXT": "Use the `inbox_identifier` token shown here to authentication your API clients.",
+      "FORWARD_EMAIL_TITLE": "Forward to Email",
+      "FORWARD_EMAIL_SUB_TEXT": "Start forwarding your emails to the following email address.",
+      "ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
+      "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
+      "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_TITLE": "API Key",
+      "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
+      "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
+      "WHATSAPP_SECTION_UPDATE_BUTTON": "Update",
+      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token",
+      "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.",
+      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
+    },
+    "HELP_CENTER": {
+      "LABEL": "Help Center",
+      "PLACEHOLDER": "Select Help Center",
+      "SELECT_PLACEHOLDER": "Select Help Center",
+      "REMOVE": "Remove Help Center",
+      "SUB_TEXT": "Attach a Help Center with the inbox"
+    },
+    "AUTO_ASSIGNMENT": {
+      "MAX_ASSIGNMENT_LIMIT": "Auto assignment limit",
+      "MAX_ASSIGNMENT_LIMIT_RANGE_ERROR": "Please enter a value greater than 0",
+      "MAX_ASSIGNMENT_LIMIT_SUB_TEXT": "Limit the maximum number of conversations from this inbox that can be auto assigned to an agent"
+    },
+    "FACEBOOK_REAUTHORIZE": {
+      "TITLE": "Reauthorize",
+      "SUBTITLE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+      "MESSAGE_SUCCESS": "Reconnection successful",
+      "MESSAGE_ERROR": "There was an error, please try again"
+    },
+    "PRE_CHAT_FORM": {
+      "DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
+      "SET_FIELDS": "Pre chat form fields",
+      "SET_FIELDS_HEADER": {
+        "FIELDS": "Fields",
+        "LABEL": "Label",
+        "PLACE_HOLDER": "Placeholder",
+        "KEY": "Key",
+        "TYPE": "Type",
+        "REQUIRED": "Required"
+      },
+      "ENABLE": {
+        "LABEL": "Enable pre chat form",
+        "OPTIONS": {
+          "ENABLED": "Yes",
+          "DISABLED": "No"
+        }
+      },
+      "PRE_CHAT_MESSAGE": {
+        "LABEL": "Pre chat message",
+        "PLACEHOLDER": "This message would be visible to the users along with the form"
+      },
+      "REQUIRE_EMAIL": {
+        "LABEL": "Visitors should provide their name and email address before starting the chat"
+      }
+    },
+    "BUSINESS_HOURS": {
+      "TITLE": "Set your availability",
+      "SUBTITLE": "Set your availability on your livechat widget",
+      "WEEKLY_TITLE": "Set your weekly hours",
+      "TIMEZONE_LABEL": "Select timezone",
+      "UPDATE": "Update business hours settings",
+      "TOGGLE_AVAILABILITY": "Enable business availability for this inbox",
+      "UNAVAILABLE_MESSAGE_LABEL": "Unavailable message for visitors",
+      "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours visitors can be warned with a message and a pre-chat form.",
+      "DAY": {
+        "ENABLE": "Enable availability for this day",
+        "UNAVAILABLE": "Unavailable",
+        "HOURS": "hours",
+        "VALIDATION_ERROR": "Starting time should be before closing time.",
+        "CHOOSE": "Choose"
+      },
+      "ALL_DAY": "All-Day"
+    },
+    "IMAP": {
+      "TITLE": "IMAP",
+      "SUBTITLE": "Set your IMAP details",
+      "NOTE_TEXT": "To enable SMTP, please configure IMAP.",
+      "UPDATE": "Update IMAP settings",
+      "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
+      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "EDIT": {
+        "SUCCESS_MESSAGE": "IMAP settings updated successfully",
+        "ERROR_MESSAGE": "Unable to update IMAP settings"
+      },
+      "ADDRESS": {
+        "LABEL": "Address",
+        "PLACE_HOLDER": "Address (Eg: imap.gmail.com)"
+      },
+      "PORT": {
+        "LABEL": "Port",
+        "PLACE_HOLDER": "Port"
+      },
+      "LOGIN": {
+        "LABEL": "Login",
+        "PLACE_HOLDER": "Login"
+      },
+      "PASSWORD": {
+        "LABEL": "Password",
+        "PLACE_HOLDER": "Password"
+      },
+      "ENABLE_SSL": "Enable SSL"
+    },
+    "MICROSOFT": {
+      "TITLE": "Microsoft",
+      "SUBTITLE": "Reauthorize your MICROSOFT account"
+    },
+    "SMTP": {
+      "TITLE": "SMTP",
+      "SUBTITLE": "Set your SMTP details",
+      "UPDATE": "Update SMTP settings",
+      "TOGGLE_AVAILABILITY": "Enable SMTP configuration for this inbox",
+      "TOGGLE_HELP": "Enabling SMTP will help the user to send email",
+      "EDIT": {
+        "SUCCESS_MESSAGE": "SMTP settings updated successfully",
+        "ERROR_MESSAGE": "Unable to update SMTP settings"
+      },
+      "ADDRESS": {
+        "LABEL": "Address",
+        "PLACE_HOLDER": "Address (Eg: smtp.gmail.com)"
+      },
+      "PORT": {
+        "LABEL": "Port",
+        "PLACE_HOLDER": "Port"
+      },
+      "LOGIN": {
+        "LABEL": "Login",
+        "PLACE_HOLDER": "Login"
+      },
+      "PASSWORD": {
+        "LABEL": "Password",
+        "PLACE_HOLDER": "Password"
+      },
+      "DOMAIN": {
+        "LABEL": "Domain",
+        "PLACE_HOLDER": "Domain"
+      },
+      "ENCRYPTION": "Encryption",
+      "SSL_TLS": "SSL/TLS",
+      "START_TLS": "STARTTLS",
+      "OPEN_SSL_VERIFY_MODE": "Open SSL Verify Mode",
+      "AUTH_MECHANISM": "Authentication"
+    },
+    "NOTE": "Note: ",
+    "WIDGET_BUILDER": {
+      "WIDGET_OPTIONS": {
+        "AVATAR": {
+          "LABEL": "Website Avatar",
+          "DELETE": {
+            "API": {
+              "SUCCESS_MESSAGE": "Avatar deleted successfully",
+              "ERROR_MESSAGE": "There was an error, please try again"
+            }
+          }
+        },
+        "WEBSITE_NAME": {
+          "LABEL": "Website Name",
+          "PLACE_HOLDER": "Enter your website name (eg: Acme Inc)",
+          "ERROR": "Please enter a valid website name"
+        },
+        "WELCOME_HEADING": {
+          "LABEL": "Welcome Heading",
+          "PLACE_HOLDER": "Hi there!"
+        },
+        "WELCOME_TAGLINE": {
+          "LABEL": "Welcome Tagline",
+          "PLACE_HOLDER": "We make it simple to connect with us. Ask us anything, or share your feedback."
+        },
+        "REPLY_TIME": {
+          "LABEL": "Reply Time",
+          "IN_A_FEW_MINUTES": "In a few minutes",
+          "IN_A_FEW_HOURS": "In a few hours",
+          "IN_A_DAY": "In a day"
+        },
+        "WIDGET_COLOR_LABEL": "Widget Color",
+        "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position",
+        "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type",
+        "WIDGET_BUBBLE_LAUNCHER_TITLE": {
+          "DEFAULT": "Chat with us",
+          "LABEL": "Widget Bubble Launcher Title",
+          "PLACE_HOLDER": "Chat with us"
+        },
+        "UPDATE": {
+          "BUTTON_TEXT": "Update Widget Settings",
+          "API": {
+            "SUCCESS_MESSAGE": "Widget settings updated successfully",
+            "ERROR_MESSAGE": "Unable to update widget settings"
+          }
+        },
+        "WIDGET_VIEW_OPTION": {
+          "PREVIEW": "Preview",
+          "SCRIPT": "Script"
+        },
+        "WIDGET_BUBBLE_POSITION": {
+          "LEFT": "Left",
+          "RIGHT": "Right"
+        },
+        "WIDGET_BUBBLE_TYPE": {
+          "STANDARD": "Standard",
+          "EXPANDED_BUBBLE": "Expanded Bubble"
+        }
+      },
+      "WIDGET_SCREEN": {
+        "DEFAULT": "Default",
+        "CHAT": "Chat"
+      },
+      "REPLY_TIME": {
+        "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
+        "IN_A_FEW_HOURS": "Typically replies in a few hours",
+        "IN_A_DAY": "Typically replies in a day"
+      },
+      "FOOTER": {
+        "START_CONVERSATION_BUTTON_TEXT": "Start Conversation",
+        "CHAT_INPUT_PLACEHOLDER": "Type your message"
+      },
+      "BODY": {
+        "TEAM_AVAILABILITY": {
+          "ONLINE": "We are Online",
+          "OFFLINE": "We are away at the moment"
+        },
+        "USER_MESSAGE": "Hi",
+        "AGENT_MESSAGE": "Hello"
+      },
+      "BRANDING_TEXT": "Powered by Chatwoot",
+      "SCRIPT_SETTINGS": "\n      window.chatwootSettings = {options};"
+    },
+    "EMAIL_PROVIDERS": {
+      "MICROSOFT": "Microsoft",
+      "OTHER_PROVIDERS": "Other Providers"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/integrationApps.json b/app/javascript/dashboard/i18n/locale/tl/integrationApps.json
new file mode 100644
index 0000000000000..a80ecb8372e78
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/integrationApps.json
@@ -0,0 +1,62 @@
+{
+  "INTEGRATION_APPS": {
+    "FETCHING": "Fetching Integrations",
+    "NO_HOOK_CONFIGURED": "There are no %{integrationId} integrations configured in this account.",
+    "HEADER": "Applications",
+    "STATUS": {
+      "ENABLED": "Enabled",
+      "DISABLED": "Disabled"
+    },
+    "CONFIGURE": "Configure",
+    "ADD_BUTTON": "Add a new hook",
+    "DELETE": {
+      "TITLE": {
+        "INBOX": "Confirm deletion",
+        "ACCOUNT": "Disconnect"
+      },
+      "MESSAGE": {
+        "INBOX": "Are you sure to delete?",
+        "ACCOUNT": "Are you sure to disconnect?"
+      },
+      "CONFIRM_BUTTON_TEXT": {
+        "INBOX": "Yes, Delete",
+        "ACCOUNT": "Yes, Disconnect"
+      },
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "API": {
+        "SUCCESS_MESSAGE": "Hook deleted successfully",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      }
+    },
+    "LIST": {
+      "FETCHING": "Fetching integration hooks",
+      "INBOX": "Inbox",
+      "DELETE": {
+        "BUTTON_TEXT": "Delete"
+      }
+    },
+    "ADD": {
+      "FORM": {
+        "INBOX": {
+          "LABEL": "Select Inbox",
+          "PLACEHOLDER": "Select Inbox"
+        },
+        "SUBMIT": "Create",
+        "CANCEL": "Cancel"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Integration hook added successfully",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      }
+    },
+    "CONNECT": {
+      "BUTTON_TEXT": "Connect"
+    },
+    "DISCONNECT": {
+      "BUTTON_TEXT": "Disconnect"
+    },
+    "SIDEBAR_DESCRIPTION": {
+      "DIALOGFLOW": "Dialogflow is a natural language understanding platform that makes it easy to design and integrate a conversational user interface into your mobile app, web application, device, bot, interactive voice response system, and so on. <br /> <br /> Dialogflow integration with %{installationName} allows you to configure a Dialogflow bot with your inboxes which lets the bot handle the queries initially and hand them over to an agent when needed. Dialogflow can be used to qualifying the leads, reduce the workload of agents by providing frequently asked questions etc. <br /> <br /> To add Dialogflow, you need to create a Service Account in your Google project console and share the credentials. Please refer to the Dialogflow docs for more information."
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/integrations.json b/app/javascript/dashboard/i18n/locale/tl/integrations.json
new file mode 100644
index 0000000000000..47349d1b19abf
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/integrations.json
@@ -0,0 +1,305 @@
+{
+  "INTEGRATION_SETTINGS": {
+    "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
+    "WEBHOOK": {
+      "SUBSCRIBED_EVENTS": "Subscribed Events",
+      "FORM": {
+        "CANCEL": "Cancel",
+        "DESC": "Webhook events provide you the realtime information about what's happening in your Chatwoot account. Please enter a valid URL to configure a callback.",
+        "SUBSCRIPTIONS": {
+          "LABEL": "Events",
+          "EVENTS": {
+            "CONVERSATION_CREATED": "Conversation Created",
+            "CONVERSATION_STATUS_CHANGED": "Conversation Status Changed",
+            "CONVERSATION_UPDATED": "Conversation Updated",
+            "MESSAGE_CREATED": "Message created",
+            "MESSAGE_UPDATED": "Message updated",
+            "WEBWIDGET_TRIGGERED": "Live chat widget opened by the user",
+            "CONTACT_CREATED": "Contact created",
+            "CONTACT_UPDATED": "Contact updated"
+          }
+        },
+        "END_POINT": {
+          "LABEL": "Webhook URL",
+          "PLACEHOLDER": "Example: %{webhookExampleURL}",
+          "ERROR": "Please enter a valid URL"
+        },
+        "EDIT_SUBMIT": "Update webhook",
+        "ADD_SUBMIT": "Create webhook"
+      },
+      "TITLE": "Webhook",
+      "CONFIGURE": "Configure",
+      "HEADER": "Webhook settings",
+      "HEADER_BTN_TXT": "Add new webhook",
+      "LOADING": "Fetching attached webhooks",
+      "SEARCH_404": "There are no items matching this query",
+      "SIDEBAR_TXT": "<p><b>Webhooks</b> </p> <p>Webhooks are HTTP callbacks which can be defined for every account. They are triggered by events like message creation in Chatwoot. You can create more than one webhook for this account. <br /><br /> For creating a <b>webhook</b>, click on the <b>Add new webhook</b> button. You can also remove any existing webhook by clicking on the Delete button.</p>",
+      "LIST": {
+        "404": "There are no webhooks configured for this account.",
+        "TITLE": "Manage webhooks",
+        "TABLE_HEADER": [
+          "Webhook endpoint",
+          "Actions"
+        ]
+      },
+      "EDIT": {
+        "BUTTON_TEXT": "Edit",
+        "TITLE": "Edit webhook",
+        "API": {
+          "SUCCESS_MESSAGE": "Webhook configuration updated successfully",
+          "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        }
+      },
+      "ADD": {
+        "CANCEL": "Cancel",
+        "TITLE": "Add new webhook",
+        "API": {
+          "SUCCESS_MESSAGE": "Webhook configuration added successfully",
+          "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        }
+      },
+      "DELETE": {
+        "BUTTON_TEXT": "Delete",
+        "API": {
+          "SUCCESS_MESSAGE": "Webhook deleted successfully",
+          "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        },
+        "CONFIRM": {
+          "TITLE": "Confirm Deletion",
+          "MESSAGE": "Are you sure to delete the webhook? (%{webhookURL})",
+          "YES": "Yes, Delete ",
+          "NO": "No, Keep it"
+        }
+      }
+    },
+    "SLACK": {
+      "DELETE": "Delete",
+      "DELETE_CONFIRMATION": {
+        "TITLE": "Delete the integration",
+        "MESSAGE": "Are you sure you want to delete the integration? Doing so will result in the loss of access to conversations on your Slack workspace."
+      },
+      "HELP_TEXT": {
+        "TITLE": "How to use the Slack Integration?",
+        "BODY": "With this integration, all of your incoming conversations will be synced to the ***%{selectedChannelName}*** channel in your Slack workspace. You can manage all your customer conversations right within the channel and never miss a message.\n\nHere are the main features of the integration:\n\n**Respond to conversations from within Slack:** To respond to a conversation in the ***%{selectedChannelName}*** Slack channel, simply type out your message and send it as a thread. This will create a response back to the customer through Chatwoot. It's that simple!\n\n **Create private notes:** If you want to create private notes instead of replies, start your message with ***`note:`***. This ensures that your message is kept private and won't be visible to the customer.\n\n**Associate an agent profile:** If the person who replied on Slack has an agent profile in Chatwoot under the same email, the replies will be associated with that agent profile automatically. This means you can easily track who said what and when. On the other hand, when the replier doesn't have an associated agent profile, the replies will appear from the bot profile to the customer.",
+        "SELECTED": "selected"
+      },
+      "SELECT_CHANNEL": {
+        "OPTION_LABEL": "Select a channel",
+        "UPDATE": "Update",
+        "BUTTON_TEXT": "Connect channel",
+        "DESCRIPTION": "Your Slack workspace is now linked with Chatwoot. However, the integration is currently inactive. To activate the integration and connect a channel to Chatwoot, please click the button below.\n\n**Note:** If you are attempting to connect a private channel, add the Chatwoot app to the Slack channel before proceeding with this step.",
+        "ATTENTION_REQUIRED": "Attention required",
+        "EXPIRED": "Your Slack integration has expired. To continue receiving messages on Slack, please delete the integration and connect your workspace again."
+      },
+      "UPDATE_ERROR": "There was an error updating the integration, please try again",
+      "UPDATE_SUCCESS": "The channel is connected successfully",
+      "FAILED_TO_FETCH_CHANNELS": "There was an error fetching the channels from Slack, please try again"
+    },
+    "DYTE": {
+      "CLICK_HERE_TO_JOIN": "Click here to join",
+      "LEAVE_THE_ROOM": "Leave the room",
+      "START_VIDEO_CALL_HELP_TEXT": "Start a new video call with the customer",
+      "JOIN_ERROR": "There was an error joining the call, please try again",
+      "CREATE_ERROR": "There was an error creating a meeting link, please try again"
+    },
+    "OPEN_AI": {
+      "AI_ASSIST": "AI Assist",
+      "WITH_AI": " %{option} with AI ",
+      "OPTIONS": {
+        "REPLY_SUGGESTION": "Reply Suggestion",
+        "SUMMARIZE": "Summarize",
+        "REPHRASE": "Improve Writing",
+        "FIX_SPELLING_GRAMMAR": "Fix Spelling and Grammar",
+        "SHORTEN": "Shorten",
+        "EXPAND": "Expand",
+        "MAKE_FRIENDLY": "Change message tone to friendly",
+        "MAKE_FORMAL": "Use formal tone",
+        "SIMPLIFY": "Simplify"
+      },
+      "ASSISTANCE_MODAL": {
+        "DRAFT_TITLE": "Draft content",
+        "GENERATED_TITLE": "Generated content",
+        "AI_WRITING": "AI is writing",
+        "BUTTONS": {
+          "APPLY": "Use this suggestion",
+          "CANCEL": "Cancel"
+        }
+      },
+      "CTA_MODAL": {
+        "TITLE": "Integrate with OpenAI",
+        "DESC": "Bring advanced AI features to your dashboard with OpenAI's GPT models. To begin, enter the API key from your OpenAI account.",
+        "KEY_PLACEHOLDER": "Enter your OpenAI API key",
+        "BUTTONS": {
+          "NEED_HELP": "Need help?",
+          "DISMISS": "Dismiss",
+          "FINISH": "Finish Setup"
+        },
+        "DISMISS_MESSAGE": "You can setup OpenAI integration later Whenever you want.",
+        "SUCCESS_MESSAGE": "OpenAI integration setup successfully"
+      },
+      "TITLE": "Improve With AI",
+      "SUMMARY_TITLE": "Summary with AI",
+      "REPLY_TITLE": "Reply suggestion with AI",
+      "SUBTITLE": "An improved reply will be generated using AI, based on your current draft.",
+      "TONE": {
+        "TITLE": "Tone",
+        "OPTIONS": {
+          "PROFESSIONAL": "Professional",
+          "FRIENDLY": "Friendly"
+        }
+      },
+      "BUTTONS": {
+        "GENERATE": "Generate",
+        "GENERATING": "Generating...",
+        "CANCEL": "Cancel"
+      },
+      "GENERATE_ERROR": "There was an error processing the content, please verify your OpenAI API key and try again"
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Integration deleted successfully"
+      }
+    },
+    "CONNECT": {
+      "BUTTON_TEXT": "Connect"
+    },
+    "DASHBOARD_APPS": {
+      "TITLE": "Dashboard Apps",
+      "HEADER_BTN_TXT": "Add a new dashboard app",
+      "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
+      "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
+      "LIST": {
+        "404": "There are no dashboard apps configured on this account yet",
+        "LOADING": "Fetching dashboard apps...",
+        "TABLE_HEADER": [
+          "Name",
+          "Endpoint"
+        ],
+        "EDIT_TOOLTIP": "Edit app",
+        "DELETE_TOOLTIP": "Delete app"
+      },
+      "FORM": {
+        "TITLE_LABEL": "Name",
+        "TITLE_PLACEHOLDER": "Enter a name for your dashboard app",
+        "TITLE_ERROR": "A name for the dashboard app is required",
+        "URL_LABEL": "Endpoint",
+        "URL_PLACEHOLDER": "Enter the endpoint URL where your app is hosted",
+        "URL_ERROR": "A valid URL is required"
+      },
+      "CREATE": {
+        "HEADER": "Add a new dashboard app",
+        "FORM_SUBMIT": "Submit",
+        "FORM_CANCEL": "Cancel",
+        "API_SUCCESS": "Dashboard app configured successfully",
+        "API_ERROR": "We couldn't create an app. Please try again later"
+      },
+      "UPDATE": {
+        "HEADER": "Edit dashboard app",
+        "FORM_SUBMIT": "Update",
+        "FORM_CANCEL": "Cancel",
+        "API_SUCCESS": "Dashboard app updated successfully",
+        "API_ERROR": "We couldn't update the app. Please try again later"
+      },
+      "DELETE": {
+        "CONFIRM_YES": "Yes, delete it",
+        "CONFIRM_NO": "No, keep it",
+        "TITLE": "Confirm deletion",
+        "MESSAGE": "Are you sure to delete the app - %{appName}?",
+        "API_SUCCESS": "Dashboard app deleted successfully",
+        "API_ERROR": "We couldn't delete the app. Please try again later"
+      }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/tl/labelsMgmt.json
new file mode 100644
index 0000000000000..a24266fb43702
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/labelsMgmt.json
@@ -0,0 +1,85 @@
+{
+  "LABEL_MGMT": {
+    "HEADER": "Labels",
+    "HEADER_BTN_TXT": "Add label",
+    "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
+    "SEARCH_404": "There are no items matching this query",
+    "LIST": {
+      "404": "There are no labels available in this account.",
+      "TITLE": "Manage labels",
+      "DESC": "Labels let you group the conversations together.",
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Color"
+      ]
+    },
+    "FORM": {
+      "NAME": {
+        "LABEL": "Label Name",
+        "PLACEHOLDER": "Label name",
+        "REQUIRED_ERROR": "Label name is required",
+        "MINIMUM_LENGTH_ERROR": "Minimum length 2 is required",
+        "VALID_ERROR": "Only Alphabets, Numbers, Hyphen and Underscore are allowed"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Description",
+        "PLACEHOLDER": "Label Description"
+      },
+      "COLOR": {
+        "LABEL": "Color"
+      },
+      "SHOW_ON_SIDEBAR": {
+        "LABEL": "Show label on sidebar"
+      },
+      "EDIT": "Edit",
+      "CREATE": "Create",
+      "DELETE": "Delete",
+      "CANCEL": "Cancel"
+    },
+    "SUGGESTIONS": {
+      "TOOLTIP": {
+        "SINGLE_SUGGESTION": "Add label to conversation",
+        "MULTIPLE_SUGGESTION": "Select this label",
+        "DESELECT": "Deselect label",
+        "DISMISS": "Dismiss suggestion"
+      },
+      "POWERED_BY": "Chatwoot AI",
+      "DISMISS": "Dismiss",
+      "ADD_SELECTED_LABELS": "Add selected labels",
+      "ADD_SELECTED_LABEL": "Add selected label",
+      "ADD_ALL_LABELS": "Add all labels",
+      "SUGGESTED_LABELS": "Suggested labels"
+    },
+    "ADD": {
+      "TITLE": "Add label",
+      "DESC": "Labels let you group the conversations together.",
+      "API": {
+        "SUCCESS_MESSAGE": "Label added successfully",
+        "ERROR_MESSAGE": "There was an error, please try again"
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit label",
+      "API": {
+        "SUCCESS_MESSAGE": "Label updated successfully",
+        "ERROR_MESSAGE": "There was an error, please try again"
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Label deleted successfully",
+        "ERROR_MESSAGE": "There was an error, please try again"
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/login.json b/app/javascript/dashboard/i18n/locale/tl/login.json
new file mode 100644
index 0000000000000..fb33028d61f35
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/login.json
@@ -0,0 +1,27 @@
+{
+  "LOGIN": {
+    "TITLE": "Login to Chatwoot",
+    "EMAIL": {
+      "LABEL": "Email",
+      "PLACEHOLDER": "example@companyname.com",
+      "ERROR": "Please enter a valid email address"
+    },
+    "PASSWORD": {
+      "LABEL": "Password",
+      "PLACEHOLDER": "Password"
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Login successful",
+      "ERROR_MESSAGE": "Could not connect to Woot server. Please try again.",
+      "UNAUTH": "Username or password is incorrect. Please try again."
+    },
+    "OAUTH": {
+      "GOOGLE_LOGIN": "Login with Google",
+      "BUSINESS_ACCOUNTS_ONLY": "Please use your company email address to login",
+      "NO_ACCOUNT_FOUND": "We couldn't find an account for your email address."
+    },
+    "FORGOT_PASSWORD": "Forgot your password?",
+    "CREATE_NEW_ACCOUNT": "Create a new account",
+    "SUBMIT": "Login"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/macros.json b/app/javascript/dashboard/i18n/locale/tl/macros.json
new file mode 100644
index 0000000000000..543b481bd9bbd
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/macros.json
@@ -0,0 +1,87 @@
+{
+  "MACROS": {
+    "HEADER": "Macros",
+    "HEADER_BTN_TXT": "Add a new macro",
+    "HEADER_BTN_TXT_SAVE": "Save macro",
+    "LOADING": "Fetching macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
+    "ERROR": "Something went wrong. Please try again",
+    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "ADD": {
+      "FORM": {
+        "NAME": {
+          "LABEL": "Macro name",
+          "PLACEHOLDER": "Enter a name for your macro",
+          "ERROR": "Name is required for creating a macro"
+        },
+        "ACTIONS": {
+          "LABEL": "Actions"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro added successfully",
+        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Name",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
+      "404": "No macros found"
+    },
+    "DELETE": {
+      "TOOLTIP": "Delete macro",
+      "CONFIRM": {
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, Delete",
+        "NO": "No"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+      }
+    },
+    "EDIT": {
+      "TOOLTIP": "Edit macro",
+      "API": {
+        "SUCCESS_MESSAGE": "Macro updated successfully",
+        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+      }
+    },
+    "EDITOR": {
+      "START_FLOW": "Start Flow",
+      "END_FLOW": "End Flow",
+      "LOADING": "Fetching macro",
+      "ADD_BTN_TOOLTIP": "Add new action",
+      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "VISIBILITY": {
+        "LABEL": "Macro Visibility",
+        "GLOBAL": {
+          "LABEL": "Public",
+          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+        },
+        "PERSONAL": {
+          "LABEL": "Private",
+          "DESCRIPTION": "This macro will be private to you and not be available to others."
+        }
+      }
+    },
+    "EXECUTE": {
+      "BUTTON_TOOLTIP": "Execute",
+      "PREVIEW": "Preview Macro",
+      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/report.json b/app/javascript/dashboard/i18n/locale/tl/report.json
new file mode 100644
index 0000000000000..da2df93e545c4
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/report.json
@@ -0,0 +1,564 @@
+{
+  "REPORT": {
+    "HEADER": "Conversations",
+    "LOADING_CHART": "Loading chart data...",
+    "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
+    "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
+    "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
+    "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
+    "METRICS": {
+      "CONVERSATIONS": {
+        "NAME": "Conversations",
+        "DESC": "( Total )"
+      },
+      "INCOMING_MESSAGES": {
+        "NAME": "Messages received",
+        "DESC": "( Total )"
+      },
+      "OUTGOING_MESSAGES": {
+        "NAME": "Messages sent",
+        "DESC": "( Total )"
+      },
+      "FIRST_RESPONSE_TIME": {
+        "NAME": "First Response Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_TIME": {
+        "NAME": "Resolution Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      },
+      "BOT_RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      },
+      "BOT_HANDOFF_COUNT": {
+        "NAME": "Handoff Count",
+        "DESC": "( Total )"
+      },
+      "REPLY_TIME": {
+        "NAME": "Customer waiting time",
+        "TOOLTIP_TEXT": "Waiting time is %{metricValue} (based on %{conversationCount} replies)"
+      }
+    },
+    "DATE_RANGE_OPTIONS": {
+      "LAST_7_DAYS": "Last 7 days",
+      "LAST_30_DAYS": "Last 30 days",
+      "LAST_3_MONTHS": "Last 3 months",
+      "LAST_6_MONTHS": "Last 6 months",
+      "LAST_YEAR": "Last year",
+      "CUSTOM_DATE_RANGE": "Custom date range"
+    },
+    "DATE_RANGE": [
+      {
+        "id": 0,
+        "name": "Last 7 days"
+      },
+      {
+        "id": 1,
+        "name": "Last 30 days"
+      },
+      {
+        "id": 2,
+        "name": "Last 3 months"
+      },
+      {
+        "id": 3,
+        "name": "Last 6 months"
+      },
+      {
+        "id": 4,
+        "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
+      }
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
+    },
+    "GROUP_BY_FILTER_DROPDOWN_LABEL": "Group By",
+    "DURATION_FILTER_LABEL": "Duration",
+    "GROUPING_OPTIONS": {
+      "DAY": "Day",
+      "WEEK": "Week",
+      "MONTH": "Month",
+      "YEAR": "Year"
+    },
+    "GROUP_BY_DAY_OPTIONS": [
+      {
+        "id": 1,
+        "groupBy": "Day"
+      }
+    ],
+    "GROUP_BY_WEEK_OPTIONS": [
+      {
+        "id": 1,
+        "groupBy": "Day"
+      },
+      {
+        "id": 2,
+        "groupBy": "Week"
+      }
+    ],
+    "GROUP_BY_MONTH_OPTIONS": [
+      {
+        "id": 1,
+        "groupBy": "Day"
+      },
+      {
+        "id": 2,
+        "groupBy": "Week"
+      },
+      {
+        "id": 3,
+        "groupBy": "Month"
+      }
+    ],
+    "GROUP_BY_YEAR_OPTIONS": [
+      {
+        "id": 2,
+        "groupBy": "Week"
+      },
+      {
+        "id": 3,
+        "groupBy": "Month"
+      },
+      {
+        "id": 4,
+        "groupBy": "Year"
+      }
+    ],
+    "BUSINESS_HOURS": "Business Hours",
+    "FILTER_ACTIONS": {
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found"
+    }
+  },
+  "AGENT_REPORTS": {
+    "HEADER": "Agents Overview",
+    "LOADING_CHART": "Loading chart data...",
+    "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
+    "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
+    "FILTER_DROPDOWN_LABEL": "Select Agent",
+    "METRICS": {
+      "CONVERSATIONS": {
+        "NAME": "Conversations",
+        "DESC": "( Total )"
+      },
+      "INCOMING_MESSAGES": {
+        "NAME": "Incoming Messages",
+        "DESC": "( Total )"
+      },
+      "OUTGOING_MESSAGES": {
+        "NAME": "Outgoing Messages",
+        "DESC": "( Total )"
+      },
+      "FIRST_RESPONSE_TIME": {
+        "NAME": "First Response Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_TIME": {
+        "NAME": "Resolution Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      }
+    },
+    "DATE_RANGE": [
+      {
+        "id": 0,
+        "name": "Last 7 days"
+      },
+      {
+        "id": 1,
+        "name": "Last 30 days"
+      },
+      {
+        "id": 2,
+        "name": "Last 3 months"
+      },
+      {
+        "id": 3,
+        "name": "Last 6 months"
+      },
+      {
+        "id": 4,
+        "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
+      }
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
+    }
+  },
+  "LABEL_REPORTS": {
+    "HEADER": "Labels Overview",
+    "LOADING_CHART": "Loading chart data...",
+    "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
+    "DOWNLOAD_LABEL_REPORTS": "Download label reports",
+    "FILTER_DROPDOWN_LABEL": "Select Label",
+    "METRICS": {
+      "CONVERSATIONS": {
+        "NAME": "Conversations",
+        "DESC": "( Total )"
+      },
+      "INCOMING_MESSAGES": {
+        "NAME": "Incoming Messages",
+        "DESC": "( Total )"
+      },
+      "OUTGOING_MESSAGES": {
+        "NAME": "Outgoing Messages",
+        "DESC": "( Total )"
+      },
+      "FIRST_RESPONSE_TIME": {
+        "NAME": "First Response Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_TIME": {
+        "NAME": "Resolution Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      }
+    },
+    "DATE_RANGE": [
+      {
+        "id": 0,
+        "name": "Last 7 days"
+      },
+      {
+        "id": 1,
+        "name": "Last 30 days"
+      },
+      {
+        "id": 2,
+        "name": "Last 3 months"
+      },
+      {
+        "id": 3,
+        "name": "Last 6 months"
+      },
+      {
+        "id": 4,
+        "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
+      }
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
+    }
+  },
+  "INBOX_REPORTS": {
+    "HEADER": "Inbox Overview",
+    "LOADING_CHART": "Loading chart data...",
+    "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
+    "DOWNLOAD_INBOX_REPORTS": "Download inbox reports",
+    "FILTER_DROPDOWN_LABEL": "Select Inbox",
+    "METRICS": {
+      "CONVERSATIONS": {
+        "NAME": "Conversations",
+        "DESC": "( Total )"
+      },
+      "INCOMING_MESSAGES": {
+        "NAME": "Incoming Messages",
+        "DESC": "( Total )"
+      },
+      "OUTGOING_MESSAGES": {
+        "NAME": "Outgoing Messages",
+        "DESC": "( Total )"
+      },
+      "FIRST_RESPONSE_TIME": {
+        "NAME": "First Response Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_TIME": {
+        "NAME": "Resolution Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      }
+    },
+    "DATE_RANGE": [
+      {
+        "id": 0,
+        "name": "Last 7 days"
+      },
+      {
+        "id": 1,
+        "name": "Last 30 days"
+      },
+      {
+        "id": 2,
+        "name": "Last 3 months"
+      },
+      {
+        "id": 3,
+        "name": "Last 6 months"
+      },
+      {
+        "id": 4,
+        "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
+      }
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
+    }
+  },
+  "TEAM_REPORTS": {
+    "HEADER": "Team Overview",
+    "LOADING_CHART": "Loading chart data...",
+    "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
+    "DOWNLOAD_TEAM_REPORTS": "Download team reports",
+    "FILTER_DROPDOWN_LABEL": "Select Team",
+    "METRICS": {
+      "CONVERSATIONS": {
+        "NAME": "Conversations",
+        "DESC": "( Total )"
+      },
+      "INCOMING_MESSAGES": {
+        "NAME": "Incoming Messages",
+        "DESC": "( Total )"
+      },
+      "OUTGOING_MESSAGES": {
+        "NAME": "Outgoing Messages",
+        "DESC": "( Total )"
+      },
+      "FIRST_RESPONSE_TIME": {
+        "NAME": "First Response Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "First Response Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_TIME": {
+        "NAME": "Resolution Time",
+        "DESC": "( Avg )",
+        "INFO_TEXT": "Total number of conversations used for computation:",
+        "TOOLTIP_TEXT": "Resolution Time is %{metricValue} (based on %{conversationCount} conversations)"
+      },
+      "RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      }
+    },
+    "DATE_RANGE": [
+      {
+        "id": 0,
+        "name": "Last 7 days"
+      },
+      {
+        "id": 1,
+        "name": "Last 30 days"
+      },
+      {
+        "id": 2,
+        "name": "Last 3 months"
+      },
+      {
+        "id": 3,
+        "name": "Last 6 months"
+      },
+      {
+        "id": 4,
+        "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
+      }
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
+    }
+  },
+  "CSAT_REPORTS": {
+    "HEADER": "CSAT Reports",
+    "NO_RECORDS": "There are no CSAT survey responses available.",
+    "DOWNLOAD": "Download CSAT Reports",
+    "DOWNLOAD_FAILED": "Failed to download CSAT Reports",
+    "FILTERS": {
+      "AGENTS": {
+        "PLACEHOLDER": "Choose Agents"
+      }
+    },
+    "TABLE": {
+      "HEADER": {
+        "CONTACT_NAME": "Contact",
+        "AGENT_NAME": "Assigned agent",
+        "RATING": "Rating",
+        "FEEDBACK_TEXT": "Feedback comment"
+      }
+    },
+    "METRIC": {
+      "TOTAL_RESPONSES": {
+        "LABEL": "Total responses",
+        "TOOLTIP": "Total number of responses collected"
+      },
+      "SATISFACTION_SCORE": {
+        "LABEL": "Satisfaction score",
+        "TOOLTIP": "Total number of positive responses / Total number of responses * 100"
+      },
+      "RESPONSE_RATE": {
+        "LABEL": "Response rate",
+        "TOOLTIP": "Total number of responses / Total number of CSAT survey messages sent * 100"
+      }
+    }
+  },
+  "BOT_REPORTS": {
+    "HEADER": "Bot Reports",
+    "METRIC": {
+      "TOTAL_CONVERSATIONS": {
+        "LABEL": "No. of Conversations",
+        "TOOLTIP": "Total number of conversations handled by the bot"
+      },
+      "TOTAL_RESPONSES": {
+        "LABEL": "Total Responses",
+        "TOOLTIP": "Total number of responses sent by the bot"
+      },
+      "RESOLUTION_RATE": {
+        "LABEL": "Resolution Rate",
+        "TOOLTIP": "Total number of conversations resolved by the bot / Total number of conversations handled by the bot * 100"
+      },
+      "HANDOFF_RATE": {
+        "LABEL": "Handoff Rate",
+        "TOOLTIP": "Total number of conversations handed off to agents / Total number of conversations handled by the bot * 100"
+      }
+    }
+  },
+  "OVERVIEW_REPORTS": {
+    "HEADER": "Overview",
+    "LIVE": "Live",
+    "ACCOUNT_CONVERSATIONS": {
+      "HEADER": "Open Conversations",
+      "LOADING_MESSAGE": "Loading conversation metrics...",
+      "OPEN": "Open",
+      "UNATTENDED": "Unattended",
+      "UNASSIGNED": "Unassigned",
+      "PENDING": "Pending"
+    },
+    "CONVERSATION_HEATMAP": {
+      "HEADER": "Conversation Traffic",
+      "NO_CONVERSATIONS": "No conversations",
+      "CONVERSATION": "%{count} conversation",
+      "CONVERSATIONS": "%{count} conversations",
+      "DOWNLOAD_REPORT": "Download report"
+    },
+    "AGENT_CONVERSATIONS": {
+      "HEADER": "Conversations by agents",
+      "LOADING_MESSAGE": "Loading agent metrics...",
+      "NO_AGENTS": "There are no conversations by agents",
+      "TABLE_HEADER": {
+        "AGENT": "Agent",
+        "OPEN": "OPEN",
+        "UNATTENDED": "Unattended",
+        "STATUS": "Status"
+      }
+    },
+    "AGENT_STATUS": {
+      "HEADER": "Agent status",
+      "ONLINE": "Online",
+      "BUSY": "Busy",
+      "OFFLINE": "Offline"
+    }
+  },
+  "DAYS_OF_WEEK": {
+    "SUNDAY": "Sunday",
+    "MONDAY": "Monday",
+    "TUESDAY": "Tuesday",
+    "WEDNESDAY": "Wednesday",
+    "THURSDAY": "Thursday",
+    "FRIDAY": "Friday",
+    "SATURDAY": "Saturday"
+  },
+  "SLA_REPORTS": {
+    "HEADER": "SLA Reports",
+    "NO_RECORDS": "SLA applied conversations are not available.",
+    "LOADING": "Loading SLA data...",
+    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_FAILED": "Failed to download SLA Reports",
+    "DROPDOWN": {
+      "ADD_FIlTER": "Add filter",
+      "CLEAR_ALL": "Clear all",
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found",
+      "NO_FILTER": "No filters available",
+      "SEARCH": "Search filter",
+      "INPUT_PLACEHOLDER": {
+        "SLA": "SLA name",
+        "AGENTS": "Agent name",
+        "INBOXES": "Inbox name",
+        "LABELS": "Label name",
+        "TEAMS": "Team name"
+      },
+      "SLA": "SLA Policy",
+      "INBOXES": "Inbox",
+      "AGENTS": "Agent",
+      "LABELS": "Label",
+      "TEAMS": "Team"
+    },
+    "WITH": "with",
+    "METRICS": {
+      "HIT_RATE": {
+        "LABEL": "Hit Rate",
+        "TOOLTIP": "Percentage of SLAs created were completed successfully"
+      },
+      "NO_OF_MISSES": {
+        "LABEL": "Number of Misses",
+        "TOOLTIP": "Total SLA misses in a certain period"
+      },
+      "NO_OF_CONVERSATIONS": {
+        "LABEL": "Number of Conversations",
+        "TOOLTIP": "Total number of conversations with SLA"
+      }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY": "Policy",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      },
+      "VIEW_DETAILS": "View Details"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/resetPassword.json b/app/javascript/dashboard/i18n/locale/tl/resetPassword.json
new file mode 100644
index 0000000000000..955696b0cffb7
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/resetPassword.json
@@ -0,0 +1,17 @@
+{
+  "RESET_PASSWORD": {
+    "TITLE": "Reset password",
+    "DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
+    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
+    "EMAIL": {
+      "LABEL": "Email",
+      "PLACEHOLDER": "Please enter your email.",
+      "ERROR": "Please enter a valid email."
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Password reset link has been sent to your email.",
+      "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+    },
+    "SUBMIT": "Submit"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/search.json b/app/javascript/dashboard/i18n/locale/tl/search.json
new file mode 100644
index 0000000000000..546982b364f4d
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/search.json
@@ -0,0 +1,26 @@
+{
+  "SEARCH": {
+    "TABS": {
+      "ALL": "All",
+      "CONTACTS": "Contacts",
+      "CONVERSATIONS": "Conversations",
+      "MESSAGES": "Messages"
+    },
+    "SECTION": {
+      "CONTACTS": "Contacts",
+      "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",
+    "INPUT_PLACEHOLDER": "Type 3 or more characters to search",
+    "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results. ",
+    "BOT_LABEL": "Bot",
+    "READ_MORE": "Read more",
+    "WROTE": "wrote:",
+    "FROM": "from",
+    "EMAIL": "email"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/setNewPassword.json b/app/javascript/dashboard/i18n/locale/tl/setNewPassword.json
new file mode 100644
index 0000000000000..4908dad021392
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/setNewPassword.json
@@ -0,0 +1,23 @@
+{
+  "SET_NEW_PASSWORD": {
+    "TITLE": "Set new password",
+    "PASSWORD": {
+      "LABEL": "Password",
+      "PLACEHOLDER": "Password",
+      "ERROR": "Password is too short."
+    },
+    "CONFIRM_PASSWORD": {
+      "LABEL": "Confirm password",
+      "PLACEHOLDER": "Confirm Password",
+      "ERROR": "Passwords do not match."
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Successfully changed the password.",
+      "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+    },
+    "CAPTCHA": {
+      "ERROR": "Verification expired. Please solve captcha again."
+    },
+    "SUBMIT": "Submit"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/settings.json b/app/javascript/dashboard/i18n/locale/tl/settings.json
new file mode 100644
index 0000000000000..dabbff89fb2b9
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/settings.json
@@ -0,0 +1,358 @@
+{
+  "PROFILE_SETTINGS": {
+    "LINK": "Profile Settings",
+    "TITLE": "Profile Settings",
+    "BTN_TEXT": "Update Profile",
+    "DELETE_AVATAR": "Delete Avatar",
+    "AVATAR_DELETE_SUCCESS": "Avatar has been deleted successfully",
+    "AVATAR_DELETE_FAILED": "There is an error while deleting avatar, please try again",
+    "UPDATE_SUCCESS": "Your profile has been updated successfully",
+    "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
+    "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
+    "FORM": {
+      "PICTURE": "Profile Picture",
+      "AVATAR": "Profile Image",
+      "ERROR": "Please fix form errors",
+      "REMOVE_IMAGE": "Remove",
+      "UPLOAD_IMAGE": "Upload image",
+      "UPDATE_IMAGE": "Update image",
+      "PROFILE_SECTION": {
+        "TITLE": "Profile",
+        "NOTE": "Your email address is your identity and is used to log in."
+      },
+      "SEND_MESSAGE": {
+        "TITLE": "Hotkey to send messages",
+        "NOTE": "You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your preference of writing.",
+        "UPDATE_SUCCESS": "Your settings have been updated successfully",
+        "CARD": {
+          "ENTER_KEY": {
+            "HEADING": "Enter (↵)",
+            "CONTENT": "Send messages by pressing Enter key instead of clicking the send button."
+          },
+          "CMD_ENTER_KEY": {
+            "HEADING": "Cmd/Ctrl + Enter (⌘ + ↵)",
+            "CONTENT": "Send messages by pressing Cmd/Ctrl + enter key instead of clicking the send button."
+          }
+        }
+      },
+      "MESSAGE_SIGNATURE_SECTION": {
+        "TITLE": "Personal message signature",
+        "NOTE": "Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes.",
+        "BTN_TEXT": "Save message signature",
+        "API_ERROR": "Couldn't save signature! Try again",
+        "API_SUCCESS": "Signature saved successfully",
+        "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
+        "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save to save the signature",
+        "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB"
+      },
+      "MESSAGE_SIGNATURE": {
+        "LABEL": "Message Signature",
+        "ERROR": "Message Signature cannot be empty",
+        "PLACEHOLDER": "Insert your personal message signature here."
+      },
+      "PASSWORD_SECTION": {
+        "TITLE": "Password",
+        "NOTE": "Updating your password would reset your logins in multiple devices.",
+        "BTN_TEXT": "Change password"
+      },
+      "ACCESS_TOKEN": {
+        "TITLE": "Access Token",
+        "NOTE": "This token can be used if you are building an API based integration",
+        "COPY": "Copy"
+      },
+      "AUDIO_NOTIFICATIONS_SECTION": {
+        "TITLE": "Audio Notifications",
+        "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "ALERT_TYPES": {
+          "NONE": "None",
+          "MINE": "Assigned",
+          "ALL": "All"
+        },
+        "ALERT_TYPE": {
+          "TITLE": "Alert events for conversations:",
+          "NONE": "None",
+          "ASSIGNED": "Assigned Conversations",
+          "ALL_CONVERSATIONS": "All Conversations"
+        },
+        "DEFAULT_TONE": {
+          "TITLE": "Alert tone:"
+        },
+        "CONDITIONS": {
+          "TITLE": "Alert conditions:",
+          "CONDITION_ONE": "Send audio alerts only if the browser window is not active",
+          "CONDITION_TWO": "Send alerts every 30s until all the assigned conversations are read"
+        }
+      },
+      "EMAIL_NOTIFICATIONS_SECTION": {
+        "TITLE": "Email Notifications",
+        "NOTE": "Update your email notification preferences here",
+        "CONVERSATION_ASSIGNMENT": "Send email notifications when a conversation is assigned to me",
+        "CONVERSATION_CREATION": "Send email notifications when a new conversation is created",
+        "CONVERSATION_MENTION": "Send email notifications when you are mentioned in a conversation",
+        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in an assigned conversation",
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation",
+        "SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
+      },
+      "NOTIFICATIONS": {
+        "TITLE": "Notification preferences",
+        "TYPE_TITLE": "Notification type",
+        "EMAIL": "Email",
+        "PUSH": "Push notification",
+        "TYPES": {
+          "CONVERSATION_CREATED": "A new conversation is created",
+          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
+          "CONVERSATION_MENTION": "You are mentioned in a conversation",
+          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
+          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
+          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
+          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
+          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
+        },
+        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
+      },
+      "API": {
+        "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
+        "UPDATE_ERROR": "There is an error while updating the preferences, please try again"
+      },
+      "PUSH_NOTIFICATIONS_SECTION": {
+        "TITLE": "Push Notifications",
+        "NOTE": "Update your push notification preferences here",
+        "CONVERSATION_ASSIGNMENT": "Send push notifications when a conversation is assigned to me",
+        "CONVERSATION_CREATION": "Send push notifications when a new conversation is created",
+        "CONVERSATION_MENTION": "Send push notifications when you are mentioned in a conversation",
+        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in an assigned conversation",
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in a participating conversation",
+        "HAS_ENABLED_PUSH": "You have enabled push for this browser.",
+        "REQUEST_PUSH": "Enable push notifications",
+        "SLA_MISSED_FIRST_RESPONSE": "Send push notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send push notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
+      },
+      "PROFILE_IMAGE": {
+        "LABEL": "Profile Image"
+      },
+      "NAME": {
+        "LABEL": "Your full name",
+        "ERROR": "Please enter a valid full name",
+        "PLACEHOLDER": "Please enter your full name"
+      },
+      "DISPLAY_NAME": {
+        "LABEL": "Display name",
+        "ERROR": "Please enter a valid display name",
+        "PLACEHOLDER": "Please enter a display name, this would be displayed in conversations"
+      },
+      "AVAILABILITY": {
+        "LABEL": "Availability",
+        "STATUSES_LIST": [
+          "Online",
+          "Busy",
+          "Offline"
+        ],
+        "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
+        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
+      },
+      "EMAIL": {
+        "LABEL": "Your email address",
+        "ERROR": "Please enter a valid email address",
+        "PLACEHOLDER": "Please enter your email address, this would be displayed in conversations"
+      },
+      "CURRENT_PASSWORD": {
+        "LABEL": "Current password",
+        "ERROR": "Please enter the current password",
+        "PLACEHOLDER": "Please enter the current password"
+      },
+      "PASSWORD": {
+        "LABEL": "New password",
+        "ERROR": "Please enter a password of length 6 or more",
+        "PLACEHOLDER": "Please enter a new password"
+      },
+      "PASSWORD_CONFIRMATION": {
+        "LABEL": "Confirm new password",
+        "ERROR": "Confirm password should match the password",
+        "PLACEHOLDER": "Please re-enter your new password"
+      }
+    }
+  },
+  "SIDEBAR_ITEMS": {
+    "CHANGE_AVAILABILITY_STATUS": "Change",
+    "CHANGE_ACCOUNTS": "Switch Account",
+    "CONTACT_SUPPORT": "Contact Support",
+    "SELECTOR_SUBTITLE": "Select an account from the following list",
+    "PROFILE_SETTINGS": "Profile Settings",
+    "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",
+    "APPEARANCE": "Change Appearance",
+    "SUPER_ADMIN_CONSOLE": "Super Admin Console",
+    "LOGOUT": "Logout"
+  },
+  "APP_GLOBAL": {
+    "TRIAL_MESSAGE": "days trial remaining.",
+    "TRAIL_BUTTON": "Buy Now",
+    "DELETED_USER": "Deleted User",
+    "EMAIL_VERIFICATION_PENDING": "It seems that you haven't verified your email address yet. Please check your inbox for the verification email.",
+    "RESEND_VERIFICATION_MAIL": "Resend verification email",
+    "EMAIL_VERIFICATION_SENT": "Verification email has been sent. Please check your inbox.",
+    "ACCOUNT_SUSPENDED": {
+      "TITLE": "Account Suspended",
+      "MESSAGE": "Your account is suspended. Please reach out to the support team for more information."
+    }
+  },
+  "COMPONENTS": {
+    "CODE": {
+      "BUTTON_TEXT": "Copy",
+      "CODEPEN": "Open in CodePen",
+      "COPY_SUCCESSFUL": "Copied to clipboard"
+    },
+    "SHOW_MORE_BLOCK": {
+      "SHOW_MORE": "Show More",
+      "SHOW_LESS": "Show Less"
+    },
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Download",
+      "UPLOADING": "Uploading...",
+      "INSTAGRAM_STORY_UNAVAILABLE": "This story is no longer available."
+    },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Submit"
+    }
+  },
+  "CONFIRM_EMAIL": "Verifying...",
+  "SETTINGS": {
+    "INBOXES": {
+      "NEW_INBOX": "Add Inbox"
+    }
+  },
+  "SIDEBAR": {
+    "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
+    "SWITCH": "Switch",
+    "INBOX_VIEW": "Inbox View",
+    "CONVERSATIONS": "Conversations",
+    "INBOX": "Inbox",
+    "ALL_CONVERSATIONS": "All Conversations",
+    "MENTIONED_CONVERSATIONS": "Mentions",
+    "PARTICIPATING_CONVERSATIONS": "Participating",
+    "UNATTENDED_CONVERSATIONS": "Unattended",
+    "REPORTS": "Reports",
+    "SETTINGS": "Settings",
+    "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
+    "HOME": "Home",
+    "AGENTS": "Agents",
+    "AGENT_BOTS": "Bots",
+    "AUDIT_LOGS": "Audit Logs",
+    "INBOXES": "Inboxes",
+    "NOTIFICATIONS": "Notifications",
+    "CANNED_RESPONSES": "Canned Responses",
+    "INTEGRATIONS": "Integrations",
+    "PROFILE_SETTINGS": "Profile Settings",
+    "ACCOUNT_SETTINGS": "Account Settings",
+    "APPLICATIONS": "Applications",
+    "LABELS": "Labels",
+    "CUSTOM_ATTRIBUTES": "Custom Attributes",
+    "AUTOMATION": "Automation",
+    "MACROS": "Macros",
+    "TEAMS": "Teams",
+    "BILLING": "Billing",
+    "CUSTOM_VIEWS_FOLDER": "Folders",
+    "CUSTOM_VIEWS_SEGMENTS": "Segments",
+    "ALL_CONTACTS": "All Contacts",
+    "TAGGED_WITH": "Tagged with",
+    "NEW_LABEL": "New label",
+    "NEW_TEAM": "New team",
+    "NEW_INBOX": "New inbox",
+    "REPORTS_CONVERSATION": "Conversations",
+    "CSAT": "CSAT",
+    "CAMPAIGNS": "Campaigns",
+    "ONGOING": "Ongoing",
+    "ONE_OFF": "One off",
+    "REPORTS_SLA": "SLA",
+    "REPORTS_BOT": "Bot",
+    "REPORTS_AGENT": "Agents",
+    "REPORTS_LABEL": "Labels",
+    "REPORTS_INBOX": "Inbox",
+    "REPORTS_TEAM": "Team",
+    "SET_AVAILABILITY_TITLE": "Set yourself as",
+    "SLA": "SLA",
+    "BETA": "Beta",
+    "REPORTS_OVERVIEW": "Overview",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
+    "HELP_CENTER": {
+      "TITLE": "Help Center",
+      "ALL_ARTICLES": "All Articles",
+      "MY_ARTICLES": "My Articles",
+      "DRAFT": "Draft",
+      "ARCHIVED": "Archived",
+      "CATEGORY": "Category",
+      "SETTINGS": "Settings",
+      "CATEGORY_EMPTY_MESSAGE": "No categories found"
+    },
+    "SET_AUTO_OFFLINE": {
+      "TEXT": "Mark offline automatically",
+      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard."
+    },
+    "DOCS": "Read docs"
+  },
+  "BILLING_SETTINGS": {
+    "TITLE": "Billing",
+    "CURRENT_PLAN": {
+      "TITLE": "Current Plan",
+      "PLAN_NOTE": "You are currently subscribed to the **%{plan}** plan with **%{quantity}** licenses"
+    },
+    "MANAGE_SUBSCRIPTION": {
+      "TITLE": "Manage your subscription",
+      "DESCRIPTION": "View your previous invoices, edit your billing details, or cancel your subscription.",
+      "BUTTON_TXT": "Go to the billing portal"
+    },
+    "CHAT_WITH_US": {
+      "TITLE": "Need help?",
+      "DESCRIPTION": "Do you face any issues in billing? We are here to help.",
+      "BUTTON_TXT": "Chat with us"
+    },
+    "NO_BILLING_USER": "Your billing account is being configured. Please refresh the page and try again."
+  },
+  "CREATE_ACCOUNT": {
+    "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",
+    "NEW_ACCOUNT": "New Account",
+    "SELECTOR_SUBTITLE": "Create a new account",
+    "API": {
+      "SUCCESS_MESSAGE": "Account created successfully",
+      "EXIST_MESSAGE": "Account already exists",
+      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+    },
+    "FORM": {
+      "NAME": {
+        "LABEL": "Company Name",
+        "PLACEHOLDER": "Wayne Enterprises"
+      },
+      "SUBMIT": "Submit"
+    }
+  },
+  "KEYBOARD_SHORTCUTS": {
+    "TOGGLE_MODAL": "View all shortcuts",
+    "TITLE": {
+      "OPEN_CONVERSATION": "Open conversation",
+      "RESOLVE_AND_NEXT": "Resolve and move to next",
+      "NAVIGATE_DROPDOWN": "Navigate dropdown items",
+      "RESOLVE_CONVERSATION": "Resolve Conversation",
+      "GO_TO_CONVERSATION_DASHBOARD": "Go to Conversation Dashboard",
+      "ADD_ATTACHMENT": "Add Attachment",
+      "GO_TO_CONTACTS_DASHBOARD": "Go to Contacts Dashboard",
+      "TOGGLE_SIDEBAR": "Toggle Sidebar",
+      "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
+      "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
+      "GO_TO_SETTINGS": "Go to Settings",
+      "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
+      "SWITCH_TO_REPLY": "Switch to Reply",
+      "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
+    },
+    "KEYS": {
+      "WINDOWS_KEY_AND_COMMAND_KEY": "Win / ⌘",
+      "ALT_OR_OPTION_KEY": "Alt / ⌥",
+      "FORWARD_SLASH_KEY": "/"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/signup.json b/app/javascript/dashboard/i18n/locale/tl/signup.json
new file mode 100644
index 0000000000000..1ad4865ff2d8e
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/signup.json
@@ -0,0 +1,44 @@
+{
+  "REGISTER": {
+    "TRY_WOOT": "Create an account",
+    "TITLE": "Register",
+    "TESTIMONIAL_HEADER": "All it takes is one step to move forward",
+    "TESTIMONIAL_CONTENT": "You're one step away from engaging your customers, retaining them and finding new ones.",
+    "TERMS_ACCEPT": "By creating an account, you agree to our <a href=\"https://www.chatwoot.com/terms\">T & C</a> and <a href=\"https://www.chatwoot.com/privacy-policy\">Privacy policy</a>",
+    "OAUTH": {
+      "GOOGLE_SIGNUP": "Sign up with Google"
+    },
+    "COMPANY_NAME": {
+      "LABEL": "Company name",
+      "PLACEHOLDER": "Enter your company name. E.g., Wayne Enterprises",
+      "ERROR": "Company name is too short."
+    },
+    "FULL_NAME": {
+      "LABEL": "Full name",
+      "PLACEHOLDER": "Enter your full name. E.g., Bruce Wayne",
+      "ERROR": "Full name is too short."
+    },
+    "EMAIL": {
+      "LABEL": "Work email",
+      "PLACEHOLDER": "Enter your work email address. E.g., bruce@wayne.enterprises",
+      "ERROR": "Please enter a valid work email address."
+    },
+    "PASSWORD": {
+      "LABEL": "Password",
+      "PLACEHOLDER": "Password",
+      "ERROR": "Password is too short.",
+      "IS_INVALID_PASSWORD": "Password should contain atleast 1 uppercase letter, 1 lowercase letter, 1 number and 1 special character."
+    },
+    "CONFIRM_PASSWORD": {
+      "LABEL": "Confirm password",
+      "PLACEHOLDER": "Confirm password",
+      "ERROR": "Password doesnot match."
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Registration Successfull",
+      "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+    },
+    "SUBMIT": "Create account",
+    "HAVE_AN_ACCOUNT": "Already have an account?"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/sla.json b/app/javascript/dashboard/i18n/locale/tl/sla.json
new file mode 100644
index 0000000000000..f32f24b61a035
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/sla.json
@@ -0,0 +1,108 @@
+{
+  "SLA": {
+    "HEADER": "SLA",
+    "ADD_ACTION": "Add SLA",
+    "ADD_ACTION_LONG": "Create a new SLA Policy",
+    "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
+    "LEARN_MORE": "Learn more about SLA",
+    "LOADING": "Fetching SLAs",
+    "PAYWALL": {
+      "TITLE": "Upgrade to create SLAs",
+      "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
+      "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
+      "UPGRADE_NOW": "Upgrade now",
+      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
+    },
+    "ENTERPRISE_PAYWALL": {
+      "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
+      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
+      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
+    },
+    "LIST": {
+      "404": "There are no SLAs available in this account.",
+      "EMPTY": {
+        "TITLE_1": "Enterprise P0",
+        "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
+        "TITLE_2": "Enterprise P1",
+        "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
+      },
+      "BUSINESS_HOURS_ON": "Business hours on",
+      "BUSINESS_HOURS_OFF": "Business hours off",
+      "RESPONSE_TYPES": {
+        "FRT": "First response time threshold",
+        "NRT": "Next response time threshold",
+        "RT": "Resolution time threshold",
+        "SHORT_HAND": {
+          "FRT": "FRT",
+          "NRT": "NRT",
+          "RT": "RT"
+        }
+      }
+    },
+    "FORM": {
+      "NAME": {
+        "LABEL": "SLA Name",
+        "PLACEHOLDER": "SLA Name",
+        "REQUIRED_ERROR": "SLA name is required",
+        "MINIMUM_LENGTH_ERROR": "Minimum length 2 is required",
+        "VALID_ERROR": "Only Alphabets, Numbers, Hyphen and Underscore are allowed"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Description",
+        "PLACEHOLDER": "SLA for premium customers"
+      },
+      "FIRST_RESPONSE_TIME": {
+        "LABEL": "First Response Time",
+        "PLACEHOLDER": "5"
+      },
+      "NEXT_RESPONSE_TIME": {
+        "LABEL": "Next Response Time",
+        "PLACEHOLDER": "5"
+      },
+      "RESOLUTION_TIME": {
+        "LABEL": "Resolution Time",
+        "PLACEHOLDER": "60"
+      },
+      "BUSINESS_HOURS": {
+        "LABEL": "Business Hours",
+        "PLACEHOLDER": "Only during business hours"
+      },
+      "THRESHOLD_TIME": {
+        "INVALID_FORMAT_ERROR": "Threshold should be a number and greater than zero"
+      },
+      "EDIT": "Edit",
+      "CREATE": "Create",
+      "DELETE": "Delete",
+      "CANCEL": "Cancel"
+    },
+    "ADD": {
+      "TITLE": "Add SLA",
+      "DESC": "Friendly promises for great service!",
+      "API": {
+        "SUCCESS_MESSAGE": "SLA added successfully",
+        "ERROR_MESSAGE": "There was an error, please try again"
+      }
+    },
+    "DELETE": {
+      "TITLE": "Delete SLA",
+      "API": {
+        "SUCCESS_MESSAGE": "SLA deleted successfully",
+        "ERROR_MESSAGE": "There was an error, please try again"
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure you want to delete ",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      }
+    },
+    "EVENTS": {
+      "TITLE": "SLA Misses",
+      "FRT": "First response time",
+      "NRT": "Next response time",
+      "RT": "Resolution time",
+      "SHOW_MORE": "{count} more",
+      "HIDE": "Hide {count} rows"
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/dashboard/i18n/locale/tl/teamsSettings.json b/app/javascript/dashboard/i18n/locale/tl/teamsSettings.json
new file mode 100644
index 0000000000000..6cbe5503250ff
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/teamsSettings.json
@@ -0,0 +1,128 @@
+{
+  "TEAMS_SETTINGS": {
+    "NEW_TEAM": "Create new team",
+    "HEADER": "Teams",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
+    "LIST": {
+      "404": "There are no teams created on this account.",
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
+    },
+    "CREATE_FLOW": {
+      "CREATE": {
+        "TITLE": "Create a new team",
+        "DESC": "Add a title and description to your new team."
+      },
+      "AGENTS": {
+        "BUTTON_TEXT": "Add agents to team",
+        "TITLE": "Add agents to team - %{teamName}",
+        "DESC": "Add Agents to your newly created team. This lets you collaborate as a team on conversations, get notified on new events in the same conversation."
+      },
+      "WIZARD": [
+        {
+          "title": "Create",
+          "route": "settings_teams_new",
+          "body": "Create a new team of agents."
+        },
+        {
+          "title": "Add Agents",
+          "route": "settings_teams_add_agents",
+          "body": "Add agents to the team."
+        },
+        {
+          "title": "Finish",
+          "route": "settings_teams_finish",
+          "body": "You are all set to go!"
+        }
+      ]
+    },
+    "EDIT_FLOW": {
+      "CREATE": {
+        "TITLE": "Edit your team details",
+        "DESC": "Edit title and description to your team.",
+        "BUTTON_TEXT": "Update team"
+      },
+      "AGENTS": {
+        "BUTTON_TEXT": "Update agents in team",
+        "TITLE": "Add agents to team - %{teamName}",
+        "DESC": "Add Agents to your newly created team. All the added agents will be notified when a conversation is assigned to this team."
+      },
+      "WIZARD": [
+        {
+          "title": "Team details",
+          "route": "settings_teams_edit",
+          "body": "Change name, description and other details."
+        },
+        {
+          "title": "Edit Agents",
+          "route": "settings_teams_edit_members",
+          "body": "Edit agents in your team."
+        },
+        {
+          "title": "Finish",
+          "route": "settings_teams_edit_finish",
+          "body": "You are all set to go!"
+        }
+      ]
+    },
+    "TEAM_FORM": {
+      "ERROR_MESSAGE": "Couldn't save the team details. Try again."
+    },
+    "AGENTS": {
+      "AGENT": "AGENT",
+      "EMAIL": "EMAIL",
+      "BUTTON_TEXT": "Add agents",
+      "ADD_AGENTS": "Adding Agents to your Team...",
+      "SELECT": "select",
+      "SELECT_ALL": "select all agents",
+      "SELECTED_COUNT": "%{selected} out of %{total} agents selected."
+    },
+    "ADD": {
+      "TITLE": "Add agents to team - %{teamName}",
+      "DESC": "Add Agents to your newly created team. This lets you collaborate as a team on conversations, get notified on new events in the same conversation.",
+      "SELECT": "select",
+      "SELECT_ALL": "select all agents",
+      "SELECTED_COUNT": "%{selected} out of %{total} agents selected.",
+      "BUTTON_TEXT": "Add agents",
+      "AGENT_VALIDATION_ERROR": "Select at least one agent."
+    },
+    "FINISH": {
+      "TITLE": "Your team is ready!",
+      "MESSAGE": "You can now collaborate as a team on conversations. Happy supporting ",
+      "BUTTON_TEXT": "Finish"
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Team deleted successfully.",
+        "ERROR_MESSAGE": "Couldn't delete the team. Try again."
+      },
+      "CONFIRM": {
+        "TITLE": "Are you sure you want to delete the team?",
+        "PLACE_HOLDER": "Please type {teamName} to confirm",
+        "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
+        "YES": "Delete ",
+        "NO": "Cancel"
+      }
+    },
+    "SETTINGS": "Settings",
+    "FORM": {
+      "UPDATE": "Update team",
+      "CREATE": "Create team",
+      "NAME": {
+        "LABEL": "Team name",
+        "PLACEHOLDER": "Example: Sales, Customer Support"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Team Description",
+        "PLACEHOLDER": "Short description about this team."
+      },
+      "AUTO_ASSIGN": {
+        "LABEL": "Allow auto assign for this team."
+      },
+      "SUBMIT_CREATE": "Create team"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/webhooks.json b/app/javascript/dashboard/i18n/locale/tl/webhooks.json
new file mode 100644
index 0000000000000..347c9689374cd
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/webhooks.json
@@ -0,0 +1,5 @@
+{
+  "WEBHOOKS_SETTINGS": {
+    "HEADER": "Webhook Settings"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tl/whatsappTemplates.json b/app/javascript/dashboard/i18n/locale/tl/whatsappTemplates.json
new file mode 100644
index 0000000000000..bbcf281569bc0
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/tl/whatsappTemplates.json
@@ -0,0 +1,25 @@
+{
+    "WHATSAPP_TEMPLATES": {
+        "MODAL": {
+            "TITLE": "Whatsapp Templates",
+            "SUBTITLE": "Select the whatsapp template you want to send",
+            "TEMPLATE_SELECTED_SUBTITLE": "Process %{templateName}"
+        },
+        "PICKER": {
+            "SEARCH_PLACEHOLDER": "Search Templates",
+            "NO_TEMPLATES_FOUND": "No templates found for",
+            "LABELS": {
+                "LANGUAGE": "Language",
+                "TEMPLATE_BODY": "Template Body",
+                "CATEGORY": "Category"
+            }
+        },
+        "PARSER": {
+            "VARIABLES_LABEL": "Variables",
+            "VARIABLE_PLACEHOLDER": "Enter %{variable} value",
+            "GO_BACK_LABEL": "Go Back",
+            "SEND_MESSAGE_LABEL": "Send Message",
+            "FORM_ERROR_MESSAGE": "Please fill all variables before sending"
+        }
+    }
+}
diff --git a/app/javascript/dashboard/i18n/locale/tr/advancedFilters.json b/app/javascript/dashboard/i18n/locale/tr/advancedFilters.json
index e9e048a18729b..1c0dc219ac6ad 100644
--- a/app/javascript/dashboard/i18n/locale/tr/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/tr/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "VE",
       "OR": "YA DA"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Eşit",
       "not_equal_to": "Eşit Değil",
diff --git a/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json
index 4fd1a9bda70bf..45f632df1d15a 100644
--- a/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Kullanıcılar",
     "HEADER_BTN_TXT": "Kullanıcı Ekle",
     "LOADING": "Kullanıcı Listesi Alınıyor",
-    "SIDEBAR_TXT": "<p><b>Alanlar</b> </p> <p> Bir <b> Temsilci </b>, Müşteri Destek ekibinizin bir üyesidir. </p> <p> Temsilciler, kullanıcılarınızdan gelen mesajları görüntüleyebilecek ve yanıtlayabilecek. Liste, şu anda hesabınızda bulunan tüm aracıları gösterir. </p> <p> Yeni bir temsilci eklemek için <b> Temsilci Ekle </b> 'yi tıklayın. Eklediğiniz temsilci, hesabını etkinleştirmek için bir onay bağlantısı içeren bir e-posta alacak ve ardından Chatwoot'a erişebilecek ve mesajlara yanıt verebilecek. </p> <p> Chatwoot'un özelliklerine erişim aşağıdaki rollere bağlıdır. </p> <p> <b> Temsilci </b> - Bu role sahip temsilciler yalnızca gelen kutularına, raporlara ve konuşmalara erişebilir. Görüşmeleri başka aracılara veya kendilerine atayabilir ve görüşmeleri çözebilirler. </p> <p> <b> Yönetici </b> - Yönetici, ayarlar da dahil olmak üzere hesabınız için etkinleştirilmiş tüm Chatwoot özelliklerine ve tüm normal temsilcilerin ayrıcalıkları. </p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Yönetici",
       "AGENT": "Kullanıcı"
diff --git a/app/javascript/dashboard/i18n/locale/tr/auditLogs.json b/app/javascript/dashboard/i18n/locale/tr/auditLogs.json
index e7680ea4cc4d1..cfacbd624cd0d 100644
--- a/app/javascript/dashboard/i18n/locale/tr/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/tr/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Denetim Kayıtları",
     "HEADER_BTN_TXT": "Denetim Kaydı Ekle",
     "LOADING": "Denetim Kayıtları Alınıyor",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Bu sorgu ile eşleşen öğe yok",
     "SIDEBAR_TXT": "<p><b>Denetim Kayıtları</b></p><p>Denetim Kayıtları, Chatwoot Sistemi'ndeki olaylar ve eylemler için izlerdir.</p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName}, %{invitee}'yi %{role} olarak hesaba davet etti",
       "EDIT": {
         "SELF": "%{agentName}, %{attributes}ını %{values} olarak değiştirdi",
-        "OTHER": "%{agentName}, %{user}'ın %{attributes}ını %{values} olarak değiştirdi"
+        "OTHER": "%{agentName}, %{user}'ın %{attributes}ını %{values} olarak değiştirdi",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/tr/automation.json b/app/javascript/dashboard/i18n/locale/tr/automation.json
index d88c0a798490d..9c12e65035b32 100644
--- a/app/javascript/dashboard/i18n/locale/tr/automation.json
+++ b/app/javascript/dashboard/i18n/locale/tr/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Kaydetmek için en az bir olay seçmelisiniz",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Mesajınızı buraya yazınız",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Takımları seçin"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Takımları seçin",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Otomasyon Kuralını Etkinleştir",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Yükleniyor ...",
       "LABEL_UPLOADED": "Başarıyla Yüklendi",
       "LABEL_UPLOAD_FAILED": "Yükleme Başarısız"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Değer gereklidir",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/tr/bulkActions.json b/app/javascript/dashboard/i18n/locale/tr/bulkActions.json
index 92d0462e2aff8..e5d109edd5fd3 100644
--- a/app/javascript/dashboard/i18n/locale/tr/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/tr/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Geri git",
     "ASSIGN_LABEL": "Atama yap",
     "YES": "Evet",
+    "SEARCH_INPUT_PLACEHOLDER": "Ara",
     "ASSIGN_AGENT_TOOLTIP": "Temsilci ata",
     "ASSIGN_TEAM_TOOLTIP": "Takım ata",
     "ASSIGN_SUCCESFUL": "Görüşmeler başarıyla atandı.",
@@ -33,7 +34,7 @@
       "NONE": "Hiçbiri",
       "NO_TEAMS_AVAILABLE": "Bu hesaba henüz eklenmiş takımlar yok.",
       "ASSIGN_SELECTED_TEAMS": "Seçili takımları atama",
-      "ASSIGN_SUCCESFUL": "Takımlar başarıyla atandı.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Takımlar atanırken bir hata oluştu. Lütfen tekrar deneyin."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/tr/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/tr/cannedMgmt.json
index f92fe3cd4e5b3..0e45e5a764db0 100644
--- a/app/javascript/dashboard/i18n/locale/tr/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/tr/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Hazır Yanıtlar",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Hazır yanıt ekle",
     "LOADING": "Hazır yanıtlar getiriliyor...",
     "SEARCH_404": "Bu sorgu ile eşleşen öğe yok.",
-    "SIDEBAR_TXT": "<p><b>Hazır Yanıtlar</b> </p><p> Hazır Yanıtlar, konuşmalara hızlı yanıt vermenize yardımcı olan önceden yazılmış yanıt şablonlarıdır. Bir sohbet sırasında hazır yanıt eklemek için, ajanlar '/' karakterinden önce kısa bir kodu yazabilirler.</p><p> Hazır yanıtlarınızı bu sayfadan yönetebilir veya \"Hazır yanıt ekle\" düğmesini kullanarak yeni hazır yanıtlar oluşturabilirsiniz.</p><p> Yardım almak için <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Hazır Yanıtlar el kitabını</a> başka bir sekmede açın.</p><p>Ayrıca, tüm yeni <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Hazır Yanıtlar Kütüphanesini</a> kontrol edin.</p>",
     "LIST": {
       "404": "Bu hesapta hazır yanıt yok.",
       "TITLE": "Hazır yanıtları yönetin",
diff --git a/app/javascript/dashboard/i18n/locale/tr/contact.json b/app/javascript/dashboard/i18n/locale/tr/contact.json
index 48d622128e8ff..d5ca1feee110a 100644
--- a/app/javascript/dashboard/i18n/locale/tr/contact.json
+++ b/app/javascript/dashboard/i18n/locale/tr/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Kişi başarıyla birleştirildi",
       "ERROR_MESSAGE": "Kişiler birleştirilemedi, tekrar deneyin!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/tr/conversation.json b/app/javascript/dashboard/i18n/locale/tr/conversation.json
index a5dc43b465019..21de4b9ad47ef 100644
--- a/app/javascript/dashboard/i18n/locale/tr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/tr/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Yeni satır için Shift + enter. Bir Hazır Yanıt seçmek için \"/\" ile başlayın.",
       "PRIVATE_MSG_INPUT": "Yeni satır için Shift + enter. Bu yalnızca Temsilciler tarafından görülebilir",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Mesaj imzası yapılandırılmamış, lütfen profil ayarlarında yapılandırın.",
-      "CLICK_HERE": "Güncellemek için tıklayın"
+      "CLICK_HERE": "Güncellemek için tıklayın",
+      "WHATSAPP_TEMPLATES": "WhatsApp Şablonları"
     },
     "REPLYBOX": {
       "REPLY": "Cevapla",
diff --git a/app/javascript/dashboard/i18n/locale/tr/general.json b/app/javascript/dashboard/i18n/locale/tr/general.json
index 25bb4dfb736d2..862c4388a05f2 100644
--- a/app/javascript/dashboard/i18n/locale/tr/general.json
+++ b/app/javascript/dashboard/i18n/locale/tr/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": "Ara",
+      "EMPTY_STATE": "Kayıt bulunamadı"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/tr/generalSettings.json b/app/javascript/dashboard/i18n/locale/tr/generalSettings.json
index 325f15e5661b6..e56764bfe9f17 100644
--- a/app/javascript/dashboard/i18n/locale/tr/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/tr/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Çevrimdışı"
+      "OFFLINE": "Çevrimdışı",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Yenile"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Yarına kadar",
       "UNTIL_NEXT_MONTH": "Bir sonraki aya kadar",
       "AN_HOUR_FROM_NOW": "Bir saat sonra kadar",
-      "CUSTOM": "Özel...",
+      "UNTIL_CUSTOM_TIME": "Özel...",
       "CHANGE_APPEARANCE": "Görünümü Değiştir",
       "LIGHT_MODE": "Açık Mod",
       "DARK_MODE": "Koyu Mod",
diff --git a/app/javascript/dashboard/i18n/locale/tr/helpCenter.json b/app/javascript/dashboard/i18n/locale/tr/helpCenter.json
index 7467368b2eb1b..1e545661e4fa0 100644
--- a/app/javascript/dashboard/i18n/locale/tr/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/tr/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "API'larımızı kullanarak portali başsız bir CMS olarak üçüncü taraf ön yüz çerçeveleriyle kullanın."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/tr/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/tr/inboxMgmt.json
index 4e2860237ca26..8f5c87a4d031a 100644
--- a/app/javascript/dashboard/i18n/locale/tr/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/tr/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Gelen kutuları",
     "SIDEBAR_TXT": "<p><b>Gelen Kutusu</b></p> <p> Chatwoot'a bir web sitesi veya Facebook Sayfası bağladığınızda, buna <b> Gelen Kutusu </b> denir. Chatwoot hesabınızda sınırsız gelen kutunuz olabilir. </p> <p> Bir web sitesine veya Facebook Sayfasına bağlanmak için <b> Gelen Kutusu Ekle </b> 'yi tıklayın. </p> <p> Gösterge Panosunda, tüm gelen kutularınızdaki tüm konuşmaları tek bir yerde görebilir ve bunlara 'Görüşmeler' sekmesi altında yanıt verebilirsiniz. </p> <p> Ayrıca, kontrol panelinin sol bölmesindeki gelen kutusu adını tıklayarak bir gelen kutusuna özel görüşmeleri de görebilirsiniz. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Bu hesaba bağlı gelen kutusu yok."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft E-posta",
         "DESCRIPTION": "Başlamak için Microsoft ile giriş yapın düğmesine tıklayın. E-posta giriş sayfasına yönlendirileceksiniz. İstenen izinleri kabul ettiğinizde, giriş sayfasına geri yönlendirileceksiniz.",
         "EMAIL_PLACEHOLDER": "E-posta adresini girin",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Microsoft hesabınızı bir kanal olarak eklemek için, Microsoft hesabınızı 'Microsoft ile Giriş Yap' seçeneğine tıklayarak kimlik doğrulamanız gerekiyor.",
         "ERROR_MESSAGE": "Microsoft ile bağlantı kurulurken bir hata oluştu, lütfen tekrar deneyin"
       }
diff --git a/app/javascript/dashboard/i18n/locale/tr/integrations.json b/app/javascript/dashboard/i18n/locale/tr/integrations.json
index 2879984b400e6..ecff22c735545 100644
--- a/app/javascript/dashboard/i18n/locale/tr/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/tr/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Entegrasyonlar",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Abone Olunan Olaylar",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Yeni bir panel uygulaması ekle",
       "SIDEBAR_TXT": "<p><b>Panel Uygulamaları</b></p><p>Panel Uygulamaları, organizasyonlara destek uzmanları için bağlam sağlamak amacıyla bir uygulamayı Chatwoot paneli içine yerleştirmelerine izin verir. Bu özellik, bağımsız bir uygulama oluşturmanıza ve bunu panel içine yerleştirmenize olanak tanır, böylece kullanıcı bilgilerini, siparişlerini veya önceki ödeme geçmişini sağlayabilirsiniz.</p><p>Chatwoot'taki panel üzerine uygulamanızı yerleştirdiğinizde, uygulamanız konuşma ve iletişim bağlamını pencere olayı olarak alır. Bağlamı almak için sayfanızda bir message olayı için bir dinleyici uygulayın.</p><p>Yeni bir panel uygulaması eklemek için 'Yeni bir panel uygulaması ekle' düğmesine tıklayın.</p>",
       "DESCRIPTION": "Panel Uygulamaları, organizasyonlara destek uzmanları için bağlam sağlamak amacıyla bir uygulamayı panel içine yerleştirmelerine izin verir. Bu özellik, bağımsız bir uygulama oluşturmanıza ve bunu panel içine yerleştirmenize olanak tanır, böylece kullanıcı bilgilerini, siparişlerini veya önceki ödeme geçmişini sağlayabilirsiniz.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Bu hesapta henüz yapılandırılmış panel uygulamaları yok",
         "LOADING": "Panel uygulamaları alınıyor...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Panel uygulaması başarıyla silindi",
         "API_ERROR": "Uygulamayı silemedik. Lütfen daha sonra tekrar deneyin"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Yarat",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Bağlantı",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Başlık",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Başlık gerekli"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Açıklama",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Ekip",
+            "PLACEHOLDER": "Takım seçin",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Öncelik",
+            "PLACEHOLDER": "Öncelik seçin",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Etiket",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Durum",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Yarat",
+        "CANCEL": "İptal Et",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Durum",
+        "PRIORITY": "Öncelik",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Etiketler",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/tr/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/tr/labelsMgmt.json
index 8a807c1578539..9ab8b27a690bd 100644
--- a/app/javascript/dashboard/i18n/locale/tr/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/tr/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Etiketler",
     "HEADER_BTN_TXT": "Etiket ekleyin",
     "LOADING": "Etiketler getiriliyor",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Bu sorgu ile eşleşen öğe yok",
-    "SIDEBAR_TXT": "<p> <b> Etiketler </b> <p> Etiketler, sohbetleri kategorize etmenize ve önceliklerini belirlemenize yardımcı olur. Yan panelden bir görüşmeye etiket atayabilirsiniz. <br /> <br /> Etiketler hesaba bağlıdır ve kuruluşunuzda özel iş akışları oluşturmak için kullanılabilir. Bir etikete özel renk atayabilirsiniz, etiketin tanımlanmasını kolaylaştırır. Sohbetleri kolayca filtrelemek için kenar çubuğunda etiketi görüntüleyebileceksiniz. </p>",
     "LIST": {
       "404": "Bu hesapta mevcut etiket yok.",
       "TITLE": "Etiketleri yönet",
@@ -49,7 +50,8 @@
       "DISMISS": "Kapat",
       "ADD_SELECTED_LABELS": "Seçili etiketleri ekle",
       "ADD_SELECTED_LABEL": "Seçili etiketi ekle",
-      "ADD_ALL_LABELS": "Tüm etiketleri ekle"
+      "ADD_ALL_LABELS": "Tüm etiketleri ekle",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Etiket ekleyin",
diff --git a/app/javascript/dashboard/i18n/locale/tr/macros.json b/app/javascript/dashboard/i18n/locale/tr/macros.json
index 813559257e6c3..3fc93541b6d26 100644
--- a/app/javascript/dashboard/i18n/locale/tr/macros.json
+++ b/app/javascript/dashboard/i18n/locale/tr/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Çalıştır",
       "PREVIEW": "Makro Önizlemesi",
       "EXECUTED_SUCCESSFULLY": "Makro başarıyla çalıştırıldı"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Değer gereklidir",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/tr/report.json b/app/javascript/dashboard/i18n/locale/tr/report.json
index f4683fa2a9be9..66bec620e86ce 100644
--- a/app/javascript/dashboard/i18n/locale/tr/report.json
+++ b/app/javascript/dashboard/i18n/locale/tr/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Konuşma Trafik",
       "NO_CONVERSATIONS": "Hiç konuşma yok",
       "CONVERSATION": "%{count} konuşma",
-      "CONVERSATIONS": "%{count} konuşmalar"
+      "CONVERSATIONS": "%{count} konuşmalar",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Temsilciler Tarafından Yapılan Konuşmalar",
@@ -536,6 +537,7 @@
       "LABELS": "Etiket",
       "TEAMS": "Ekip"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/tr/search.json b/app/javascript/dashboard/i18n/locale/tr/search.json
index 703aecc9c33f7..5039521cad963 100644
--- a/app/javascript/dashboard/i18n/locale/tr/search.json
+++ b/app/javascript/dashboard/i18n/locale/tr/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Konuşmalar",
       "MESSAGES": "Mesajlar"
     },
+    "SEARCHING_DATA": "Aranıyor",
     "EMPTY_STATE": "%{query} sorgusunda hiç bir %{item} bulunamadı",
     "EMPTY_STATE_FULL": "%{query} sorgusu için hiç bir sonuç bulunamadı",
     "PLACEHOLDER_KEYBINDING": "odaklanmak için / basın",
diff --git a/app/javascript/dashboard/i18n/locale/tr/settings.json b/app/javascript/dashboard/i18n/locale/tr/settings.json
index a84de60a0abe4..f307be8352c3b 100644
--- a/app/javascript/dashboard/i18n/locale/tr/settings.json
+++ b/app/javascript/dashboard/i18n/locale/tr/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Raporlar",
     "SETTINGS": "Ayarlar",
     "CONTACTS": "Kişiler",
+    "CAPTAIN": "Captain",
     "HOME": "Anasayfa",
     "AGENTS": "Kullanıcılar",
     "AGENT_BOTS": "Botlar",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Önizleme",
-    "FACEBOOK_REAUTHORIZE": "Facebook bağlantınızın süresi doldu, hizmetlere devam etmek için lütfen Facebook sayfanızı yeniden bağlayın",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Yardım Merkezi",
       "ALL_ARTICLES": "Tüm Makaleler",
diff --git a/app/javascript/dashboard/i18n/locale/tr/teamsSettings.json b/app/javascript/dashboard/i18n/locale/tr/teamsSettings.json
index 01f4b6f2ba957..7ea3105c05cef 100644
--- a/app/javascript/dashboard/i18n/locale/tr/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/tr/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Yeni ekip oluştur",
     "HEADER": "Ekipler",
-    "SIDEBAR_TXT": "<p><b>Ekipler</b></p> <p>Ekipler, temsilcilerinizi sorumluluklarına göre gruplayabilmenizi sağlar. <br />Bir temsilci birden çok ekibe dahil olabilir. Ekip olarak çalışıyorsanız, görüşmeleri tüm ekibe atayabilirsiniz. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Bu hesap üzerine oluşturulmuş ekip bulunmamaktadır.",
-      "EDIT_TEAM": "Ekibi düzenle"
+      "EDIT_TEAM": "Ekibi düzenle",
+      "NONE": "Hiç"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Ekip silinemiyor. Tekrar deneyin."
       },
       "CONFIRM": {
-        "TITLE": "Silmek istediğinize emin misiniz - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Onaylamak için lütfen {teamName} yazınız",
         "MESSAGE": "Ekibi silmek aynı zamanda görüşmelere atanmış ekipleri de temizler.",
         "YES": "Sil ",
diff --git a/app/javascript/dashboard/i18n/locale/uk/advancedFilters.json b/app/javascript/dashboard/i18n/locale/uk/advancedFilters.json
index 38a7d7516879c..232d7d7bf92c9 100644
--- a/app/javascript/dashboard/i18n/locale/uk/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/uk/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "ТА",
       "OR": "АБО"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Дорівнює",
       "not_equal_to": "Не дорівнює",
diff --git a/app/javascript/dashboard/i18n/locale/uk/agentBots.json b/app/javascript/dashboard/i18n/locale/uk/agentBots.json
index 419672b491eeb..10641ca695dfe 100644
--- a/app/javascript/dashboard/i18n/locale/uk/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/uk/agentBots.json
@@ -3,7 +3,7 @@
     "HEADER": "Боти",
     "LOADING_EDITOR": "Завантаження редактора...",
     "HEADER_BTN_TXT": "Додати конфігурацію бота",
-    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
+    "SIDEBAR_TXT": "<p><b>Боти-агенти</b></p>Боти-агенти – це найкращі члени вашої команди. Вони можуть впоратися з дрібницями, щоб ви могли зосередитися на тому, що дійсно важливо. Спробуйте їх.<p></p> Ви можете керувати своїми ботами з цієї сторінки або створювати нових за допомогою кнопки \"Додати конфігурацію бота\".<p></p> Відкрийте <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Посібник з ботів-агентів</a> на іншій вкладці, щоб отримати допомогу.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
         "LABEL": "Ім'я бота",
diff --git a/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json b/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json
index b40f0582fd9b7..c6a301bcdba1a 100644
--- a/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Агенти",
     "HEADER_BTN_TXT": "Додати агента",
     "LOADING": "Отримання списку агентів",
-    "SIDEBAR_TXT": "<p><b>Агенти</b></p> <p> <b>Агент</b> є членом вашої служби підтримки клієнтів. </p><p> Агенти зможуть переглядати повідомлення ваших користувачів і відповідати на них. У списку відображаються всі агенти, які зараз є у вашому обліковому записі. </p><p> Натисніть <b>Додати агента</b>, щоб додати нового агента. Агент, якого ви додаєте, отримає електронний лист із посиланням для підтвердження та активації свого облікового запису, після чого він зможе отримати доступ до Chatwoot і відповідати на повідомлення. </p><p> Доступ до функцій Chatwoot заснований на наступних ролях. </p><p> <b>Агент</b> - Агенти з цією роллю мають доступ лише до папок \"Вхідні\", звітів і розмов. Вони можуть призначати розмови іншим агентам або собі та завершувати розмови.</p><p> <b>Адміністратор</b> - адміністратор матиме доступ до всіх функцій Chatwoot, увімкнених для вашого облікового запису, включаючи налаштування, а також усі звичайні привілеї агентів.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Адміністратор",
       "AGENT": "Агент"
diff --git a/app/javascript/dashboard/i18n/locale/uk/auditLogs.json b/app/javascript/dashboard/i18n/locale/uk/auditLogs.json
index ed1b42803169e..6a16aada5f8ee 100644
--- a/app/javascript/dashboard/i18n/locale/uk/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/uk/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Логи аудиту",
     "HEADER_BTN_TXT": "Додати логи",
     "LOADING": "Завантаження логів",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Немає елементів, що відповідають запиту",
     "SIDEBAR_TXT": "<p><b>Логи аудиту</b> </p><p> Логи - це історія всіх подій в системі Chatwoot. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} запросив %{invitee} на акаунт як %{role}",
       "EDIT": {
         "SELF": "%{agentName} змінив свій %{attributes} на %{values}",
-        "OTHER": "%{agentName} змінив %{attributes} %{user} на %{values}"
+        "OTHER": "%{agentName} змінив %{attributes} %{user} на %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/uk/automation.json b/app/javascript/dashboard/i18n/locale/uk/automation.json
index 66bac58aadb00..7a20ceb4f541c 100644
--- a/app/javascript/dashboard/i18n/locale/uk/automation.json
+++ b/app/javascript/dashboard/i18n/locale/uk/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Ви повинні мати принаймні одну дію для збереження",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Введіть ваше повідомлення тут",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Обрати команди"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Обрати команди",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Активувати правило автоматизації",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Завантажується...",
       "LABEL_UPLOADED": "Успішно завантажено",
       "LABEL_UPLOAD_FAILED": "Не вдалося завантажити"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Необхідно вказати значення",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/uk/bulkActions.json b/app/javascript/dashboard/i18n/locale/uk/bulkActions.json
index ffe8e444d69d2..511e1a4a750bd 100644
--- a/app/javascript/dashboard/i18n/locale/uk/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/uk/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Повернутися назад",
     "ASSIGN_LABEL": "Призначити",
     "YES": "Так",
+    "SEARCH_INPUT_PLACEHOLDER": "Пошук",
     "ASSIGN_AGENT_TOOLTIP": "Призначити агента",
     "ASSIGN_TEAM_TOOLTIP": "Призначити команду",
     "ASSIGN_SUCCESFUL": "Розмови успішно призначені.",
@@ -33,7 +34,7 @@
       "NONE": "Нiчого",
       "NO_TEAMS_AVAILABLE": "Цей акаунт ще не доданий до жодної команди.",
       "ASSIGN_SELECTED_TEAMS": "Призначити обрану команду.",
-      "ASSIGN_SUCCESFUL": "Команди успішно призначені.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Не вдалося призначити команду, будь ласка, спробуйте ще раз."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/uk/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/uk/cannedMgmt.json
index c690cee098add..e18bff131255d 100644
--- a/app/javascript/dashboard/i18n/locale/uk/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/uk/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Швидкі відповіді",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Додати швидку відповідь",
     "LOADING": "Отримання швидких відповідей...",
     "SEARCH_404": "Немає елементів, що відповідають запиту.",
-    "SIDEBAR_TXT": "<p><b>Шаблони відповідей</b> </p><p> Шаблони відповідей — це попередньо написані шаблони відповідей, які допомагають швидко відповідати на діалог. Щоб вставити стандартну відповідь під час чату, агенти можуть ввести короткий код (шорт-код), перед яким стоїть символ «/». </p><p> Ви можете керувати своїми стандартними відповідями на цій сторінці або створювати нові за допомогою кнопки «Додати шаблон відповіді».</p><p>Відкрийте <a target=\"_blank\" href=\"https: //www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Посібник із шаблонів відповідей</a> на іншій вкладці.</p><p>Також перегляньте абсолютно нову <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank \">Бібліотеку шаблонних відповідей</a>.</p>",
     "LIST": {
       "404": "В цьому обліковому записі немає швидких відповідей.",
       "TITLE": "Керування швидкими вдіповідями",
diff --git a/app/javascript/dashboard/i18n/locale/uk/contact.json b/app/javascript/dashboard/i18n/locale/uk/contact.json
index 5bdf28d8a4858..038ef1425eb21 100644
--- a/app/javascript/dashboard/i18n/locale/uk/contact.json
+++ b/app/javascript/dashboard/i18n/locale/uk/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Контакт успішно об'єднано",
       "ERROR_MESSAGE": "Не вдалося об'єднати контакти, спробуйте ще раз!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/uk/conversation.json b/app/javascript/dashboard/i18n/locale/uk/conversation.json
index 1df537bd9effb..fde7a310754eb 100644
--- a/app/javascript/dashboard/i18n/locale/uk/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/uk/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + Enter для нового рядка. Для вибору швидкої відповіді, уведіть '/'.",
       "PRIVATE_MSG_INPUT": "Shift + Enter для нового рядка. Видиме лише для співробітників",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Не налаштовано підпис повідомлення, будь ласка, налаштуйте його в налаштуваннях профілю.",
-      "CLICK_HERE": "Натисніть тут для оновлення"
+      "CLICK_HERE": "Натисніть тут для оновлення",
+      "WHATSAPP_TEMPLATES": "Шаблони Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Відповісти",
diff --git a/app/javascript/dashboard/i18n/locale/uk/general.json b/app/javascript/dashboard/i18n/locale/uk/general.json
index b4b781f99d862..4b8be24039ca4 100644
--- a/app/javascript/dashboard/i18n/locale/uk/general.json
+++ b/app/javascript/dashboard/i18n/locale/uk/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Показані {firstIndex}-{lastIndex} з елементів {totalCount}"
+    "SHOWING_RESULTS": "Показані {firstIndex}-{lastIndex} з елементів {totalCount}",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Пошук",
+      "EMPTY_STATE": "Результатів не знайдено"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/uk/generalSettings.json b/app/javascript/dashboard/i18n/locale/uk/generalSettings.json
index 52fa06b9dac4e..5b45fc1a8790d 100644
--- a/app/javascript/dashboard/i18n/locale/uk/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/uk/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Не в мережі"
+      "OFFLINE": "Не в мережі",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Оновити"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "До завтра",
       "UNTIL_NEXT_MONTH": "До наступного місяця",
       "AN_HOUR_FROM_NOW": "На годину з цього моменту",
-      "CUSTOM": "Власний...",
+      "UNTIL_CUSTOM_TIME": "Власний...",
       "CHANGE_APPEARANCE": "Змінити зовнішній вигляд",
       "LIGHT_MODE": "Світла",
       "DARK_MODE": "Темна",
diff --git a/app/javascript/dashboard/i18n/locale/uk/helpCenter.json b/app/javascript/dashboard/i18n/locale/uk/helpCenter.json
index cc0dfa911534b..ded61fdb42225 100644
--- a/app/javascript/dashboard/i18n/locale/uk/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/uk/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/uk/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/uk/inboxMgmt.json
index 59eefdc6f5d02..045b58837a30b 100644
--- a/app/javascript/dashboard/i18n/locale/uk/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/uk/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Вхідні",
     "SIDEBAR_TXT": "<p><b>Джерела</b></p> <p> Коли ви підключаєте веб-сайт або сторінку у Facebook до Chatwoot, вони називаються <b>Джерелом</b>. Ви можете мати необмежену кількість джерел у своєму обліковому записі Chatwoot. </p><p> Натисніть <b>Додати папку \"Джерело\"</b>, щоб підключити веб-сайт або сторінку Facebook. </p><p> На інформаційній панелі ви можете переглядати всі бесіди з усіх своїх поштових скриньок в одному місці та відповідати на них на вкладці \"Розмови\". </p><p> Ви також можете переглянути розмови, специфічні для папки \"Джерела\", клацнувши назву папки \"Джерело\" на лівій панелі інформаційної панелі. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "В цього облікового запису немає скриньк."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Натисніть на кнопку входу через Microsoft для початку. Ви будете перенаправлені на сторінку входу в систему. Як тільки ви приймете запитані дозволи, ви будете перенаправлені на сторінку створення вхідних повідомлень.",
         "EMAIL_PLACEHOLDER": "Некоректна адреса ел. пошти",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "Щоб додати свій обліковий запис Microsoft у якості каналу, вам потрібно автентифікувати свій обліковий запис Microsoft, натиснувши \"Увійти через Microsoft\" ",
         "ERROR_MESSAGE": "Сталася помилка підключення до Microsoft, будь ласка, спробуйте ще раз"
       }
diff --git a/app/javascript/dashboard/i18n/locale/uk/integrations.json b/app/javascript/dashboard/i18n/locale/uk/integrations.json
index d824e9b5ed5e6..0b7d0da346d18 100644
--- a/app/javascript/dashboard/i18n/locale/uk/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/uk/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Інтеграції",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Події з підпискою",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Додати нову інформаційну панель",
       "SIDEBAR_TXT": "<p><b>Панель управління</b></p><p>Додатки дозволяють організаціям вставляти в панель керування Chatwoot інформацію, щоб надати контекст агентам підтримки клієнтів. Ця функція дозволяє створювати додаток незалежно і вставляти його в панелі управління відомості про користувача, їхні замовлення або історію попередніх платежів.</p><p>Коли ви вставляєте свій застосунок за допомогою панелі керування в Chatwoot, ваша програма отримає контекст розмови і зв'яжеться як віконна подія. Налаштуйте слухача для заходу повідомлення на вашій сторінці, щоб отримати контекст.</p><p>Щоб додати нову панель керування, натисніть кнопку 'Додати нову програму'.</p>",
       "DESCRIPTION": "Додатки дозволяють організаціям вбудовувати інформаційну панель керування і надавати контекст для агентів підтримки клієнтів. Ця функція дозволяє створювати додаток незалежно і додавати інформацію, що надавали про користувача, його замовлення або історію платежів.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Поки що немає налаштованих додатків в цьому акаунті",
         "LOADING": "Отримання додатків панелі керування...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Панель інструментів успішно видалено",
         "API_ERROR": "Не вдалося видалити додаток. Будь ласка, спробуйте ще раз пізніше"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Створити",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Лінк",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Назва",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Необхідно вказати назву"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Опис",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Команда",
+            "PLACEHOLDER": "Виберіть команду",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Пріоритет",
+            "PLACEHOLDER": "Оберіть пріоритет",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Мітка",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Статус",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Створити",
+        "CANCEL": "Скасувати",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Статус",
+        "PRIORITY": "Пріоритет",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Мітки",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/uk/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/uk/labelsMgmt.json
index 6b752b92e3012..bb5493c6242a2 100644
--- a/app/javascript/dashboard/i18n/locale/uk/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/uk/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Мітки",
     "HEADER_BTN_TXT": "Додати мітку",
     "LOADING": "Отримання міток",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Немає елементів, що відповідають запиту",
-    "SIDEBAR_TXT": "<p><b>Мітки</b> <p>Мітки допомагають вам розділити розмови та визначити пріоритети. Ви можете призначати мітку до розмови з панелі завдань. <br /><br />Мітки зв'язані з обліковим записом і можуть бути використані для створення користувацьких робочих процесів у вашій організації. Ви можете призначати користувацький колір до мітки, це полегшує визначення мітки. Ви зможете відображати мітку на бічній панелі, щоб легко відфільтрувати розмови.</p>",
     "LIST": {
       "404": "У цьому акаунті немає міток.",
       "TITLE": "Керувати мітками",
@@ -49,7 +50,8 @@
       "DISMISS": "Відхилити",
       "ADD_SELECTED_LABELS": "Додати вибрані мітки",
       "ADD_SELECTED_LABEL": "Додати вибрану мітку",
-      "ADD_ALL_LABELS": "Додати всі мітки"
+      "ADD_ALL_LABELS": "Додати всі мітки",
+      "SUGGESTED_LABELS": "Suggested labels"
     },
     "ADD": {
       "TITLE": "Додати мітку",
diff --git a/app/javascript/dashboard/i18n/locale/uk/macros.json b/app/javascript/dashboard/i18n/locale/uk/macros.json
index 14e34c2881650..4e50b37374bb5 100644
--- a/app/javascript/dashboard/i18n/locale/uk/macros.json
+++ b/app/javascript/dashboard/i18n/locale/uk/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Виконати",
       "PREVIEW": "Перегляд макросу",
       "EXECUTED_SUCCESSFULLY": "Макрос успішно виконано"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Необхідно вказати значення",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/uk/report.json b/app/javascript/dashboard/i18n/locale/uk/report.json
index 5501e8bb27bd4..f2afaa7d27b30 100644
--- a/app/javascript/dashboard/i18n/locale/uk/report.json
+++ b/app/javascript/dashboard/i18n/locale/uk/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Бесіди",
       "NO_CONVERSATIONS": "Немає бесід",
       "CONVERSATION": "%{count} бесід",
-      "CONVERSATIONS": "%{count} бесід"
+      "CONVERSATIONS": "%{count} бесід",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Розмови агентів",
@@ -536,6 +537,7 @@
       "LABELS": "Мітка",
       "TEAMS": "Команда"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Рейтинг попадань",
diff --git a/app/javascript/dashboard/i18n/locale/uk/search.json b/app/javascript/dashboard/i18n/locale/uk/search.json
index d9c90c3662b1d..988830537ce2a 100644
--- a/app/javascript/dashboard/i18n/locale/uk/search.json
+++ b/app/javascript/dashboard/i18n/locale/uk/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Бесіди",
       "MESSAGES": "Текст повідомлень"
     },
+    "SEARCHING_DATA": "Шукаємо",
     "EMPTY_STATE": "На запит '%{query} не знайдено %{item}",
     "EMPTY_STATE_FULL": "Немає результатів за запитом '%{query}",
     "PLACEHOLDER_KEYBINDING": "/ фокус",
diff --git a/app/javascript/dashboard/i18n/locale/uk/settings.json b/app/javascript/dashboard/i18n/locale/uk/settings.json
index 7113099d87dc7..3546675247ef5 100644
--- a/app/javascript/dashboard/i18n/locale/uk/settings.json
+++ b/app/javascript/dashboard/i18n/locale/uk/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Звіти",
     "SETTINGS": "Налаштування",
     "CONTACTS": "Контакти",
+    "CAPTAIN": "Captain",
     "HOME": "Головна",
     "AGENTS": "Агенти",
     "AGENT_BOTS": "Боти",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Огляд",
-    "FACEBOOK_REAUTHORIZE": "Підключення до Facebook закінчилося, будь ласка, поновіть сторінку Facebook, щоб продовжити роботу служб",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Довідковий центр",
       "ALL_ARTICLES": "Всі статті",
diff --git a/app/javascript/dashboard/i18n/locale/uk/teamsSettings.json b/app/javascript/dashboard/i18n/locale/uk/teamsSettings.json
index 546260d0a5258..20ba291e52542 100644
--- a/app/javascript/dashboard/i18n/locale/uk/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/uk/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Створити нову команду",
     "HEADER": "Команди",
-    "SIDEBAR_TXT": "<p><b>Команди</b></p> <p>команд дозволяють організовувати своїх агентів в групи на основі їх обов'язків. <br /> агент може бути частиною кількох команд. Ви можете призначити розмови команді, коли працюєте спільно. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "В цьому обліковому запису не створено жодної команди.",
-      "EDIT_TEAM": "Редагувати команду"
+      "EDIT_TEAM": "Редагувати команду",
+      "NONE": "Нiчого"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Не вдалося видалити команду. Повторіть спробу."
       },
       "CONFIRM": {
-        "TITLE": "Ви впевнені, що бажаєте видалити - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Будь ласка, введіть {teamName} щоб підтвердити",
         "MESSAGE": "Видалення команди призведе до видалення призначення команди з розмов.",
         "YES": "Видалити ",
diff --git a/app/javascript/dashboard/i18n/locale/ur/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ur/advancedFilters.json
index 29acbfa9c38d6..b59cc0129dbd7 100644
--- a/app/javascript/dashboard/i18n/locale/ur/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ur/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/ur/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json
index 1ea47ccf15346..7db802d888661 100644
--- a/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "ایجنٹ",
     "HEADER_BTN_TXT": "ایجنٹ شامل کریں",
     "LOADING": "ایجنٹ کی فہرست حاصل کی جا رہی ہے",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "منتظم",
       "AGENT": "ایجنٹ"
diff --git a/app/javascript/dashboard/i18n/locale/ur/auditLogs.json b/app/javascript/dashboard/i18n/locale/ur/auditLogs.json
index 3005577cf6562..8541e87a33777 100644
--- a/app/javascript/dashboard/i18n/locale/ur/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ur/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "اس سوال سے مماثل کوئی آئٹمز نہیں ہیں۔",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ur/automation.json b/app/javascript/dashboard/i18n/locale/ur/automation.json
index 4d5fd94b260c1..58146ca26e6c8 100644
--- a/app/javascript/dashboard/i18n/locale/ur/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ur/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur/bulkActions.json b/app/javascript/dashboard/i18n/locale/ur/bulkActions.json
index e711c435869c4..04776240f3da8 100644
--- a/app/javascript/dashboard/i18n/locale/ur/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ur/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "تلاش کریں۔",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "کوئی نہیں۔",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ur/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ur/cannedMgmt.json
index f67fb32c2a2c1..29d567318c734 100644
--- a/app/javascript/dashboard/i18n/locale/ur/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "محفوظ کردہ جوابات",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "اس اکاؤنٹ میں کوئی محفوظ کردہ جوابات دستیاب نہیں ہیں۔.",
       "TITLE": "محفوظ کردہ جوابات کو نظم کریں",
diff --git a/app/javascript/dashboard/i18n/locale/ur/contact.json b/app/javascript/dashboard/i18n/locale/ur/contact.json
index cd9dff79fa414..40e38334f64b5 100644
--- a/app/javascript/dashboard/i18n/locale/ur/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ur/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "کانٹیکٹ کامیابی سے ضم ہو گیا۔",
       "ERROR_MESSAGE": "کانٹیکٹ کو ضم نہیں کیا جا سکا، دوبارہ کوشش کریں!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur/conversation.json b/app/javascript/dashboard/i18n/locale/ur/conversation.json
index 3431800d45058..0e00b4369c21f 100644
--- a/app/javascript/dashboard/i18n/locale/ur/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ur/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/ur/general.json b/app/javascript/dashboard/i18n/locale/ur/general.json
index 25bb4dfb736d2..795daa26e39e7 100644
--- a/app/javascript/dashboard/i18n/locale/ur/general.json
+++ b/app/javascript/dashboard/i18n/locale/ur/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": "تلاش کریں۔",
+      "EMPTY_STATE": "کوئی نتیجہ نہیں"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur/generalSettings.json b/app/javascript/dashboard/i18n/locale/ur/generalSettings.json
index dcdc78c74bde3..e1e72d35ad0b8 100644
--- a/app/javascript/dashboard/i18n/locale/ur/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ur/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ur/helpCenter.json b/app/javascript/dashboard/i18n/locale/ur/helpCenter.json
index 97c88533f8702..00870f46059bf 100644
--- a/app/javascript/dashboard/i18n/locale/ur/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ur/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/ur/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ur/inboxMgmt.json
index 134aaa0a666cc..3c16926564be0 100644
--- a/app/javascript/dashboard/i18n/locale/ur/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ur/integrations.json b/app/javascript/dashboard/i18n/locale/ur/integrations.json
index 9ce5b264bd857..1968a6aced826 100644
--- a/app/javascript/dashboard/i18n/locale/ur/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ur/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "ٹیم منتخب کریں۔",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "اسٹیٹس",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "منسوخ کریں۔",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "اسٹیٹس",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ur/labelsMgmt.json
index da7332787355f..9bef8708f18b4 100644
--- a/app/javascript/dashboard/i18n/locale/ur/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "اس سوال سے مماثل کوئی آئٹمز نہیں ہیں۔",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/ur/macros.json b/app/javascript/dashboard/i18n/locale/ur/macros.json
index 0170e9a965d5d..d9dea71ddbfcb 100644
--- a/app/javascript/dashboard/i18n/locale/ur/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ur/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur/report.json b/app/javascript/dashboard/i18n/locale/ur/report.json
index 942cc679053cf..005c197dcfe73 100644
--- a/app/javascript/dashboard/i18n/locale/ur/report.json
+++ b/app/javascript/dashboard/i18n/locale/ur/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/ur/search.json b/app/javascript/dashboard/i18n/locale/ur/search.json
index deec7dfd77416..2c46d4f5169f4 100644
--- a/app/javascript/dashboard/i18n/locale/ur/search.json
+++ b/app/javascript/dashboard/i18n/locale/ur/search.json
@@ -11,6 +11,7 @@
       "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/i18n/locale/ur/settings.json b/app/javascript/dashboard/i18n/locale/ur/settings.json
index d8cbf63c556e7..6852efa867056 100644
--- a/app/javascript/dashboard/i18n/locale/ur/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ur/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "کانٹیکٹس",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "ایجنٹ",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ur/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ur/teamsSettings.json
index 34ca8d2a848e4..4e70db7a8af2c 100644
--- a/app/javascript/dashboard/i18n/locale/ur/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ur/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "کوئی نہیں۔"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/advancedFilters.json b/app/javascript/dashboard/i18n/locale/ur_IN/advancedFilters.json
index 170f01d7f339c..564bd161bd6ce 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/ur_IN/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json
index b563de61f228f..442b6becd2ac5 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/auditLogs.json b/app/javascript/dashboard/i18n/locale/ur_IN/auditLogs.json
index bb30079757f72..7f412b4c085ac 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "There are no items matching this query",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/automation.json b/app/javascript/dashboard/i18n/locale/ur_IN/automation.json
index 469df1c24ef40..9c8207fbd1e15 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/bulkActions.json b/app/javascript/dashboard/i18n/locale/ur_IN/bulkActions.json
index fe7c8de4a7870..dbf37defba0f6 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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.",
@@ -33,7 +34,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/ur_IN/cannedMgmt.json
index a23fc14ac8af6..7721cc3e68422 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Canned Responses",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "There are no items matching this query.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "There are no canned responses available in this account.",
       "TITLE": "Manage canned responses",
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/contact.json b/app/javascript/dashboard/i18n/locale/ur_IN/contact.json
index 992f9e1f48a3f..017edbe45731e 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/ur_IN/conversation.json b/app/javascript/dashboard/i18n/locale/ur_IN/conversation.json
index cc3e4569bc729..8eb490a4b5e3f 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/ur_IN/general.json b/app/javascript/dashboard/i18n/locale/ur_IN/general.json
index 25bb4dfb736d2..78e97db906a40 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/general.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/ur_IN/generalSettings.json b/app/javascript/dashboard/i18n/locale/ur_IN/generalSettings.json
index 10b72907b7f5c..bba50316ca736 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Offline"
+      "OFFLINE": "Offline",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/helpCenter.json b/app/javascript/dashboard/i18n/locale/ur_IN/helpCenter.json
index 467b0def962cf..5c74d99289527 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/ur_IN/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ur_IN/inboxMgmt.json
index 0a6361587f740..4c46d78082fc0 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/integrations.json b/app/javascript/dashboard/i18n/locale/ur_IN/integrations.json
index 45587f2dbf1ac..b219617fa33f3 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Integrations",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/ur_IN/labelsMgmt.json
index 09ac38551312e..a24266fb43702 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Labels",
     "HEADER_BTN_TXT": "Add label",
     "LOADING": "Fetching labels",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>Labels</b> <p>Labels help you to categorize conversations and prioritize them. You can assign label to a conversation from the sidepanel. <br /><br />Labels are tied to the account and can be used to create custom workflows in your organization. You can assign custom color to a label, it makes it easier to identify the label. You will be able to display the label on the sidebar to filter the conversations easily.</p>",
     "LIST": {
       "404": "There are no labels available in this account.",
       "TITLE": "Manage labels",
@@ -49,7 +50,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/ur_IN/macros.json b/app/javascript/dashboard/i18n/locale/ur_IN/macros.json
index 3a59d4f269bd2..543b481bd9bbd 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/report.json b/app/javascript/dashboard/i18n/locale/ur_IN/report.json
index c27532783f2cb..b27417c82adb7 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/report.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/ur_IN/search.json b/app/javascript/dashboard/i18n/locale/ur_IN/search.json
index 107e64fd8a614..546982b364f4d 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/search.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/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/i18n/locale/ur_IN/settings.json b/app/javascript/dashboard/i18n/locale/ur_IN/settings.json
index fc8d9982778da..632f45fc12c09 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "CAPTAIN": "Captain",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/teamsSettings.json b/app/javascript/dashboard/i18n/locale/ur_IN/teamsSettings.json
index f9ecaaaae4323..6cbe5503250ff 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "Edit team"
+      "EDIT_TEAM": "Edit team",
+      "NONE": "None"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
diff --git a/app/javascript/dashboard/i18n/locale/vi/advancedFilters.json b/app/javascript/dashboard/i18n/locale/vi/advancedFilters.json
index f70a883fe102b..7ef8cddc39286 100644
--- a/app/javascript/dashboard/i18n/locale/vi/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/vi/advancedFilters.json
@@ -1,23 +1,24 @@
 {
   "FILTER": {
     "TITLE": "Lọc cuộc hội thoại",
-    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
-    "EDIT_CUSTOM_FILTER": "Edit Folder",
-    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
-    "ADD_NEW_FILTER": "Add filter",
-    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
+    "SUBTITLE": "Thêm các bộ lọc của bạn bên dưới và nhấn \"Áp dụng bộ lọc\", để loại bỏ các cuộc trò chuyện lộn xộn.",
+    "EDIT_CUSTOM_FILTER": "Sửa Thư Mục",
+    "CUSTOM_VIEWS_SUBTITLE": "Thêm hoặc xóa bộ lọc và cập nhật thư mục của bạn.",
+    "ADD_NEW_FILTER": "Thêm bộ lọc",
+    "FILTER_DELETE_ERROR": "Rât tiếc, dường như chưa có sự thay đổi nào! Hãy thêm ít nhất một bộ lọc để lưu nó.",
     "SUBMIT_BUTTON_LABEL": "Áp dụng bộ lọc",
-    "UPDATE_BUTTON_LABEL": "Update folder",
+    "UPDATE_BUTTON_LABEL": "Cập nhật thư mục",
     "CANCEL_BUTTON_LABEL": "Huỷ",
-    "CLEAR_BUTTON_LABEL": "Clear filters",
-    "FOLDER_LABEL": "Folder Name",
-    "FOLDER_QUERY_LABEL": "Folder Query",
+    "CLEAR_BUTTON_LABEL": "Xóa các bộ lọc",
+    "FOLDER_LABEL": "Tên Thư Mục",
+    "FOLDER_QUERY_LABEL": "Truy vấn Thư mục",
     "EMPTY_VALUE_ERROR": "Giá trị bắt buộc có.",
     "TOOLTIP_LABEL": "Lọc cuộc hội thoại",
     "QUERY_DROPDOWN_LABELS": {
       "AND": "VÀ",
       "OR": "HOẶC"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Bằng",
       "not_equal_to": "Không bằng",
@@ -28,7 +29,7 @@
       "is_greater_than": "Lớn hơn",
       "is_less_than": "Nhỏ hơn",
       "days_before": "Khoảng x ngày trước",
-      "starts_with": "Starts with"
+      "starts_with": "Bắt đầu với"
     },
     "ATTRIBUTE_LABELS": {
       "TRUE": "Đúng",
@@ -36,15 +37,15 @@
     },
     "ATTRIBUTES": {
       "STATUS": "Trạng thái",
-      "ASSIGNEE_NAME": "Assignee name",
+      "ASSIGNEE_NAME": "Tên người được phân công",
       "INBOX_NAME": "Tên kênh",
       "TEAM_NAME": "Tên nhóm",
-      "CONVERSATION_IDENTIFIER": "Conversation identifier",
-      "CAMPAIGN_NAME": "Campaign name",
+      "CONVERSATION_IDENTIFIER": "Định danh cuộc hội thoại",
+      "CAMPAIGN_NAME": "Tên chiến dịch",
       "LABELS": "Nhãn",
-      "BROWSER_LANGUAGE": "Browser language",
-      "PRIORITY": "Priority",
-      "COUNTRY_NAME": "Country name",
+      "BROWSER_LANGUAGE": "Ngôn ngữ của trình duyệt",
+      "PRIORITY": "Mức độ ưu tiên",
+      "COUNTRY_NAME": "Tên quốc gia",
       "REFERER_LINK": "Liên kết người giới thiệu",
       "CUSTOM_ATTRIBUTE_LIST": "Danh sách",
       "CUSTOM_ATTRIBUTE_TEXT": "Văn bản",
@@ -52,18 +53,18 @@
       "CUSTOM_ATTRIBUTE_LINK": "Liên kết",
       "CUSTOM_ATTRIBUTE_CHECKBOX": "Hộp kiểm",
       "CREATED_AT": "Tạo vào lúc",
-      "LAST_ACTIVITY": "Last activity"
+      "LAST_ACTIVITY": "Hành động cuối cùng"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Standard filters",
-      "ADDITIONAL_FILTERS": "Additional filters",
-      "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "STANDARD_FILTERS": "Bộ lọc tiêu chuẩn",
+      "ADDITIONAL_FILTERS": "Bộ lọc bổ sung",
+      "CUSTOM_ATTRIBUTES": "Thuộc tính tùy chỉnh"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
         "TITLE": "Bạn có muốn lưu bộ lọc này không?",
         "LABEL": "Đặt tên bộ lọc này",
-        "PLACEHOLDER": "Name your filter to refer it later.",
+        "PLACEHOLDER": "Đặt tên cho bộ lọc của bạn để tham khảo sau.",
         "ERROR_MESSAGE": "Cần phải có tên.",
         "SAVE_BUTTON": "Lưu bộ lọc",
         "CANCEL_BUTTON": "Huỷ",
@@ -77,7 +78,7 @@
         }
       },
       "EDIT": {
-        "EDIT_BUTTON": "Edit folder"
+        "EDIT_BUTTON": "Sửa thư mục"
       },
       "DELETE": {
         "DELETE_BUTTON": "Xoá bộ lọc",
@@ -85,7 +86,7 @@
           "CONFIRM": {
             "TITLE": "Xác nhận xoá",
             "MESSAGE": "Bạn có chắc chắn muốn xoá bộ lọc ",
-            "YES": "Yes, delete",
+            "YES": "Có, xoá",
             "NO": "Không, giữ nó"
           }
         },
diff --git a/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json b/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json
index b231bec68018a..f154533be02d7 100644
--- a/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Nhà cung cấp",
     "HEADER_BTN_TXT": "Thêm nhà cung cấp / đại lý",
     "LOADING": "Tải danh sách nhà cung cấp",
-    "SIDEBAR_TXT": "<p><b>Nhà cung cấp</b></p> <p> Một <b>nhà cung cấp</b> là thành viên của nhóm Hỗ trợ khách hàng của bạn. </p><p> Nhà cung cấp sẽ có thể xem và trả lời tin nhắn từ người dùng của bạn. Danh sách hiển thị tất cả các đại lý hiện có trong tài khoản của bạn. </p><p> Click vào <b>Thêm nhà cung cấp</b> để thêm mới nhà cung cấp. Nhà cung cấp mà bạn thêm sẽ nhận được email với liên kết xác nhận để kích hoạt tài khoản của họ, sau đó họ có thể truy cập Chatwoot và trả lời tin nhắn. </p><p> Quyền truy cập vào các tính năng của Chatwoot dựa trên các vai trò sau. </p><p> <b>Nhà cung cấp</b> - Nhà cung cấp có vai trò này chỉ có thể truy cập hộp thư đến, báo cáo và cuộc hội thoại. Họ có thể chỉ định các cuộc trò chuyện cho các đại lý khác hoặc chính họ và giải quyết các cuộc trò chuyện.</p><p> <b>Administrator</b> - Quản trị viên sẽ có quyền truy cập vào tất cả các tính năng Chatwoot được kích hoạt cho tài khoản của bạn, bao gồm cài đặt, cùng với tất cả các đặc quyền của một đại lý bình thường.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Quản trị viên",
       "AGENT": "Nhà cung cấp"
diff --git a/app/javascript/dashboard/i18n/locale/vi/auditLogs.json b/app/javascript/dashboard/i18n/locale/vi/auditLogs.json
index 9e56b522748d7..f192819a0e752 100644
--- a/app/javascript/dashboard/i18n/locale/vi/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/vi/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "Không có kết quả nào được tìm thấy",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/vi/automation.json b/app/javascript/dashboard/i18n/locale/vi/automation.json
index 13aaa07144c1d..82bec198302a7 100644
--- a/app/javascript/dashboard/i18n/locale/vi/automation.json
+++ b/app/javascript/dashboard/i18n/locale/vi/automation.json
@@ -93,7 +93,9 @@
     "ACTION": {
       "DELETE_MESSAGE": "Bạn cần có ít nhất một hành động để lưu",
       "TEAM_MESSAGE_INPUT_PLACEHOLDER": "Viết tin nhắn ở đây",
-      "TEAM_DROPDOWN_PLACEHOLDER": "Chọn nhóm"
+      "TEAM_DROPDOWN_PLACEHOLDER": "Chọn nhóm",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
       "ACTIVATION_TITLE": "Kích hoạt Luật Tự động hoá",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "Đang tải lên...",
       "LABEL_UPLOADED": "Đã tải lên thành công",
       "LABEL_UPLOAD_FAILED": "Không tải lên được"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Giá trị bắt buộc có",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/vi/bulkActions.json b/app/javascript/dashboard/i18n/locale/vi/bulkActions.json
index e119116bb9567..3e880cbd7e505 100644
--- a/app/javascript/dashboard/i18n/locale/vi/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/vi/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Trở về",
     "ASSIGN_LABEL": "Gán",
     "YES": "Có",
+    "SEARCH_INPUT_PLACEHOLDER": "Tìm kiếm",
     "ASSIGN_AGENT_TOOLTIP": "Gán tổng đài viên",
     "ASSIGN_TEAM_TOOLTIP": "Gán nhóm",
     "ASSIGN_SUCCESFUL": "Cuộc hội thoại đã được phân công thành công.",
@@ -33,7 +34,7 @@
       "NONE": "Không có",
       "NO_TEAMS_AVAILABLE": "Chưa có nhóm nào được thêm vào tài khoản này.",
       "ASSIGN_SELECTED_TEAMS": "Chỉ định nhóm đã chọn.",
-      "ASSIGN_SUCCESFUL": "Các nhóm được chỉ định thành công.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/vi/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/vi/cannedMgmt.json
index 233937dd9189d..5a5df4aa10638 100644
--- a/app/javascript/dashboard/i18n/locale/vi/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/vi/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "Thư mẫu phẩn hồi",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "Không có kết quả nào phù hợp.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "Không có câu trả lời soạn trước nào có sẵn trong tài khoản này.",
       "TITLE": "Quản lý thư mẫu phẩn hồi",
diff --git a/app/javascript/dashboard/i18n/locale/vi/contact.json b/app/javascript/dashboard/i18n/locale/vi/contact.json
index b026f298046f6..b910b8bbb51fa 100644
--- a/app/javascript/dashboard/i18n/locale/vi/contact.json
+++ b/app/javascript/dashboard/i18n/locale/vi/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Liên hệ được gộp thành công",
       "ERROR_MESSAGE": "Không thể hợp nhất liên lạc, thử lại!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/vi/conversation.json b/app/javascript/dashboard/i18n/locale/vi/conversation.json
index 1465db5c8c013..bfc115317071c 100644
--- a/app/javascript/dashboard/i18n/locale/vi/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/vi/conversation.json
@@ -89,7 +89,7 @@
       "CANCEL": "Huỷ"
     },
     "PRIORITY": {
-      "TITLE": "Priority",
+      "TITLE": "Mức độ ưu tiên",
       "OPTIONS": {
         "NONE": "Không có",
         "URGENT": "Urgent",
@@ -142,7 +142,8 @@
       "MSG_INPUT": "Shift + enter cho dòng mới. Bắt đầu với '/' để chọn Câu trả lời soạn trước.",
       "PRIVATE_MSG_INPUT": "Shift + enter cho dòng mới. Điều này sẽ chỉ hiển thị cho Đại lý",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "Chứ ký cuối tin nhắn chưa được cài đặt, xin hãy cài đặt một chữ ký trong phần cài đặt hồ sơ.",
-      "CLICK_HERE": "Bấm vào đây để cập nhật"
+      "CLICK_HERE": "Bấm vào đây để cập nhật",
+      "WHATSAPP_TEMPLATES": "Mẫu Whatsapp"
     },
     "REPLYBOX": {
       "REPLY": "Trả lời",
diff --git a/app/javascript/dashboard/i18n/locale/vi/general.json b/app/javascript/dashboard/i18n/locale/vi/general.json
index 25bb4dfb736d2..fa77eaf0f1452 100644
--- a/app/javascript/dashboard/i18n/locale/vi/general.json
+++ b/app/javascript/dashboard/i18n/locale/vi/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": "Tìm kiếm",
+      "EMPTY_STATE": "Không tìm thấy kết quả"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/vi/generalSettings.json b/app/javascript/dashboard/i18n/locale/vi/generalSettings.json
index 37da63b42ae79..afbe74507f1f8 100644
--- a/app/javascript/dashboard/i18n/locale/vi/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/vi/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "Không Trực Tuyến"
+      "OFFLINE": "Không Trực Tuyến",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Làm mới"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Cho đến ngày mai",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/vi/helpCenter.json b/app/javascript/dashboard/i18n/locale/vi/helpCenter.json
index 90c51fe5fbdff..dd2f34b153f02 100644
--- a/app/javascript/dashboard/i18n/locale/vi/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/vi/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/vi/inbox.json b/app/javascript/dashboard/i18n/locale/vi/inbox.json
index a497d7c2ce17e..bc081baa910a6 100644
--- a/app/javascript/dashboard/i18n/locale/vi/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/vi/inbox.json
@@ -42,7 +42,7 @@
       "SORT_OPTIONS": {
         "NEWEST": "Newest",
         "OLDEST": "Oldest",
-        "PRIORITY": "Priority"
+        "PRIORITY": "Mức độ ưu tiên"
       },
       "DISPLAY_OPTIONS": {
         "SNOOZED": "Tạm dừng",
diff --git a/app/javascript/dashboard/i18n/locale/vi/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/vi/inboxMgmt.json
index 27ece386e27b9..ac1783ed23a41 100644
--- a/app/javascript/dashboard/i18n/locale/vi/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/vi/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Hộp thư đến",
     "SIDEBAR_TXT": "<p><b>Hộp thư đến</b></p> <p> Khi bạn kết nối một trang web hoặc một Trang facebook với Chatwoot, nó được gọi là <b>Hộp thư đến</b>. Bạn có thể có hộp thư đến không giới hạn trong tài khoản Chatwoot của mình. </p><p> Click vào <b>Thêm hộp thư đến</b> để kết nối một trang web hoặc một Trang Facebook. </p><p> Trong Trang tổng quan, bạn có thể xem tất cả các cuộc hội thoại từ tất cả các hộp thư đến của mình ở một nơi duy nhất và trả lời chúng trong tab `Cuộc trò chuyện`. </p><p> Bạn cũng có thể xem các cuộc hội thoại dành riêng cho một hộp thư đến bằng cách nhấp vào tên hộp thư đến trên ngăn bên trái của trang tổng quan. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "Không có hộp thư đến nào được đính kèm với tài khoản này."
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/vi/integrations.json b/app/javascript/dashboard/i18n/locale/vi/integrations.json
index f81049d574e4b..a8305a9765d2b 100644
--- a/app/javascript/dashboard/i18n/locale/vi/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/vi/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "Tích hợp",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Những sự kiện được theo dõi",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Thêm mới một Ứng dụng bảng điều khiển",
       "SIDEBAR_TXT": "<p> <b> Ứng dụng trên bảng điều khiển</b> </p> <p>Ứng dụng bảng điều khiển cho phép nhúng ứng dụng vào trang bảng điều khiển để cung cấp ngữ cảnh cho các tổng đài viên hỗ trợ khách hàng. Tính năng này cho phép bạn tạo ứng dụng một cách độc lập và nhúng ứng dụng đó vào bên trong trang điều khiển để cung cấp thông tin người dùng, đơn đặt hàng hoặc lịch sử thanh toán trước đó của họ. </p> <p> Khi bạn nhúng ứng dụng của mình bằng điều khiển, ứng dụng của bạn sẽ lấy bối cảnh của cuộc trò chuyện và liên hệ dưới dạng sự kiện cửa sổ. Triển khai trình nghe cho sự kiện thông báo trên trang của bạn để nhận ngữ cảnh. </p> <p> Để thêm ứng dụng trang điều khiển mới, hãy nhấp vào nút 'Thêm ứng dụng bảng điều khiển mới'. </p>",
       "DESCRIPTION": "Ứng dụng bảng điều khiển cho phép các tổ chức nhúng một ứng dụng bên trong trang điều khiển để cung cấp ngữ cảnh cho các tổng đài viên hỗ trợ khách hàng. Tính năng này cho phép bạn tạo ứng dụng một cách độc lập và nhúng ứng dụng đó để cung cấp thông tin người dùng, đơn đặt hàng hoặc lịch sử thanh toán trước đó của họ.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "Chưa có ứng dụng trang \u001dđiều khiển nào được định cấu hình trên tài khoản này",
         "LOADING": "Đang tìm nạp ứng dụng bảng điều khiển...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Đã xóa ứng dụng trang điều khiển thành công",
         "API_ERROR": "Chúng tôi không thể xóa ứng dụng. Vui lòng thử lại sau"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Tạo",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Liên kết",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Tiêu đề",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Tiêu đề bắt buộc có"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Mô tả",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Nhóm",
+            "PLACEHOLDER": "Chọn nhóm",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Mức độ ưu tiên",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Nhãn",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Trạng thái",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Tạo",
+        "CANCEL": "Huỷ",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Trạng thái",
+        "PRIORITY": "Mức độ ưu tiên",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Nhãn",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/vi/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/vi/labelsMgmt.json
index 3cb779c2e033b..7abebd2b49818 100644
--- a/app/javascript/dashboard/i18n/locale/vi/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/vi/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "Nhãn",
     "HEADER_BTN_TXT": "Thêm nhãn",
     "LOADING": "Tải về các nhãn",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "Không có kết quả nào phù hợp",
-    "SIDEBAR_TXT": "<p><b>Nhãn</b> <p>Nhãn giúp bạn phân loại các cuộc hội thoại và ưu tiên chúng. Bạn có thể gán nhãn cho một cuộc hội thoại từ bảng phụ. <br /><br />Nhãn được liên kết với tài khoản và có thể được sử dụng để tạo quy trình công việc tùy chỉnh trong tổ chức của bạn. Bạn có thể gán màu tùy chỉnh cho nhãn, điều này giúp bạn nhận dạng nhãn dễ dàng hơn. Bạn sẽ có thể hiển thị nhãn trên thanh bên để lọc các cuộc hội thoại một cách dễ dàng.</p>",
     "LIST": {
       "404": "Không có nhãn nào có sẵn trong tài khoản này.",
       "TITLE": "Quản lý nhãn",
@@ -49,7 +50,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": "Thêm nhãn",
diff --git a/app/javascript/dashboard/i18n/locale/vi/macros.json b/app/javascript/dashboard/i18n/locale/vi/macros.json
index ce53e9fbaf921..5a92bd627f873 100644
--- a/app/javascript/dashboard/i18n/locale/vi/macros.json
+++ b/app/javascript/dashboard/i18n/locale/vi/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Thực thi",
       "PREVIEW": "Xem trước Macro",
       "EXECUTED_SUCCESSFULLY": "Macro được thực thi thành công"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Giá trị bắt buộc có",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/vi/report.json b/app/javascript/dashboard/i18n/locale/vi/report.json
index 6af0daa26fe18..8a7a5ae3ea7a6 100644
--- a/app/javascript/dashboard/i18n/locale/vi/report.json
+++ b/app/javascript/dashboard/i18n/locale/vi/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": "Cuộc hội thoại của các tổng đài viên",
@@ -517,7 +518,7 @@
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "DROPDOWN": {
-      "ADD_FIlTER": "Add filter",
+      "ADD_FIlTER": "Thêm bộ lọc",
       "CLEAR_ALL": "Clear all",
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "Không tìm thấy kết quả",
@@ -536,6 +537,7 @@
       "LABELS": "Nhãn",
       "TEAMS": "Nhóm"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/vi/search.json b/app/javascript/dashboard/i18n/locale/vi/search.json
index 7cb7aef7162fa..902f01524a114 100644
--- a/app/javascript/dashboard/i18n/locale/vi/search.json
+++ b/app/javascript/dashboard/i18n/locale/vi/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Các cuộc hội thoại",
       "MESSAGES": "Tin nhắn"
     },
+    "SEARCHING_DATA": "Đang tìm kiếm",
     "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/i18n/locale/vi/settings.json b/app/javascript/dashboard/i18n/locale/vi/settings.json
index 8e81c6e03ffac..72cd1b97f1f27 100644
--- a/app/javascript/dashboard/i18n/locale/vi/settings.json
+++ b/app/javascript/dashboard/i18n/locale/vi/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "Báo cáo",
     "SETTINGS": "Cài Đặt",
     "CONTACTS": "Liên hệ",
+    "CAPTAIN": "Captain",
     "HOME": "Trang Chủ",
     "AGENTS": "Đại lý",
     "AGENT_BOTS": "Bots",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Tổng quan",
-    "FACEBOOK_REAUTHORIZE": "Kết nối Facebook của bạn đã hết hạn, vui lòng kết nối lại trang Facebook của bạn để tiếp tục dịch vụ",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "Tất cả các bài",
diff --git a/app/javascript/dashboard/i18n/locale/vi/teamsSettings.json b/app/javascript/dashboard/i18n/locale/vi/teamsSettings.json
index c5d2df289dd8e..e94fa17bea0e1 100644
--- a/app/javascript/dashboard/i18n/locale/vi/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/vi/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Tạo nhóm mới",
     "HEADER": "Nhóm",
-    "SIDEBAR_TXT": "<p><b>Nhóm</b></p> <p>Nhóm cho phép bạn tổ chức các tổng đài viên của mình thành các nhóm dựa trên trách nhiệm của họ. <br /> Một tổng đài viên có thể là một phần của nhiều nhóm. Bạn có thể gán các cuộc trò chuyện cho một nhóm khi bạn đang cộng tác. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "Không có nhóm nào được tạo đối với tài khoản này.",
-      "EDIT_TEAM": "Sửa nhóm"
+      "EDIT_TEAM": "Sửa nhóm",
+      "NONE": "Không có"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "Không thể xoá nhóm. Thử lại."
       },
       "CONFIRM": {
-        "TITLE": "Bạn có chắc muốn xoá - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Vui lòng điền {teamName} để xác nhận",
         "MESSAGE": "Xóa nhóm sẽ xóa phân công nhóm khỏi các cuộc trò chuyện được phân công cho nhóm này.",
         "YES": "Xoá ",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/advancedFilters.json b/app/javascript/dashboard/i18n/locale/zh_CN/advancedFilters.json
index 1b102afaf85f1..d7bc82dde4550 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "和",
       "OR": "或"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "等于",
       "not_equal_to": "不等于",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/agentBots.json b/app/javascript/dashboard/i18n/locale/zh_CN/agentBots.json
index 56345c6af23b9..f4c2e84328f83 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/agentBots.json
@@ -1,73 +1,73 @@
 {
   "AGENT_BOTS": {
     "HEADER": "机器人",
-    "LOADING_EDITOR": "Loading editor...",
-    "HEADER_BTN_TXT": "Add bot configuration",
+    "LOADING_EDITOR": "正在加载编辑器...",
+    "HEADER_BTN_TXT": "添加机器人配置",
     "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
     "CSML_BOT_EDITOR": {
       "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
-        "ERROR": "Bot name is required."
+        "LABEL": "机器人名称",
+        "PLACEHOLDER": "为您的机器人命名。",
+        "ERROR": "机器人名称是必填的。"
       },
       "DESCRIPTION": {
-        "LABEL": "Bot description",
+        "LABEL": "机器人描述",
         "PLACEHOLDER": "这个机器人的用途是？"
       },
       "BOT_CONFIG": {
-        "ERROR": "Please enter your CSML bot configuration above.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+        "ERROR": "请在上方输入您的 CSML 机器人配置。",
+        "API_ERROR": "您的 CSML 配置无效。请修复后再试。"
       },
-      "SUBMIT": "Validate and save"
+      "SUBMIT": "验证并保存"
     },
     "BOT_CONFIGURATION": {
       "TITLE": "选择一个代理机器人",
-      "DESC": "Assign an Agent Bot to your inbox. They can handle initial conversations and transfer them to a live agent when necessary.",
+      "DESC": "将代理机器人分配到您的收件箱。他们可以处理初始对话，并在必要时将其转移给真人客服。",
       "SUBMIT": "更新",
-      "DISCONNECT": "Disconnect bot",
-      "SUCCESS_MESSAGE": "Successfully updated the agent bot.",
-      "DISCONNECTED_SUCCESS_MESSAGE": "Successfully disconnected the agent bot.",
-      "ERROR_MESSAGE": "Could not update the agent bot. Please try again.",
-      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot. Please try again.",
-      "SELECT_PLACEHOLDER": "Select bot"
+      "DISCONNECT": "断开机器人",
+      "SUCCESS_MESSAGE": "成功更新代理机器人。",
+      "DISCONNECTED_SUCCESS_MESSAGE": "成功断开代理机器人。",
+      "ERROR_MESSAGE": "无法更新代理机器人。请再试一次。",
+      "DISCONNECTED_ERROR_MESSAGE": "无法断开代理机器人。请再试一次。",
+      "SELECT_PLACEHOLDER": "选择机器人"
     },
     "ADD": {
-      "TITLE": "Configure new bot",
+      "TITLE": "配置新机器人",
       "CANCEL_BUTTON_TEXT": "取消",
       "API": {
         "SUCCESS_MESSAGE": "机器人添加成功.",
-        "ERROR_MESSAGE": "Could not add bot. Please try again later."
+        "ERROR_MESSAGE": "无法添加机器人。请稍后再试。"
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
-      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "404": "未找到机器人。您可以通过点击“配置新机器人”按钮 ↗ 来创建一个机器人",
+      "LOADING": "正在获取机器人...",
+      "TYPE": "机器人类型"
     },
     "DELETE": {
       "BUTTON_TEXT": "删除",
-      "TITLE": "Delete bot",
+      "TITLE": "删除机器人",
       "SUBMIT": "删除",
       "CANCEL_BUTTON_TEXT": "取消",
-      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "DESCRIPTION": "您确定要删除此机器人吗？此操作不可撤销。",
       "API": {
         "SUCCESS_MESSAGE": "成功删除机器人.",
-        "ERROR_MESSAGE": "Could not delete bot. Please try again."
+        "ERROR_MESSAGE": "无法删除机器人。请再试一次。"
       }
     },
     "EDIT": {
       "BUTTON_TEXT": "编辑",
-      "LOADING": "Fetching bots...",
-      "TITLE": "Edit bot",
+      "LOADING": "正在获取机器人...",
+      "TITLE": "编辑机器人",
       "CANCEL_BUTTON_TEXT": "取消",
       "API": {
         "SUCCESS_MESSAGE": "机器人更新成功.",
-        "ERROR_MESSAGE": "Could not update bot. Please try again."
+        "ERROR_MESSAGE": "无法更新机器人。请再试一次。"
       }
     },
     "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "Webhook 机器人",
+      "CSML": "CSML 机器人"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json b/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json
index d528b1d055e82..fd7e7142ae46e 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "客服",
     "HEADER_BTN_TXT": "添加客服",
     "LOADING": "正在获取客服列表",
-    "SIDEBAR_TXT": "<p><b>客服</b></p> <p> 客服 <b></b> 是您的客户支持团队成员。 </p><p>客服将能够查看和回复您用户的消息。 列表显示当前帐户中的所有客服代理人。 </p><p> 点击 <b>添加客服</b> 添加新客服。 您添加的客服将收到一封含有确认链接的电子邮件来激活他们的帐户，然后他们可以访问并回复消息。 </p><p> 聊天窗口的功能基于以下角色。 </p><p> <b>客服</b> - 此角色的代理只能访问收件箱、报告和会话。 他们可以将对话分配给其他客服或自己，并解决会话。</p><p> <b>管理员</b> - 管理员将可以访问您账户中所有已启用的聊天功能。 包括设置，以及所有客服的权限。</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "管理员",
       "AGENT": "客服"
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/zh_CN/attributesMgmt.json
index 5d9e71b57ec24..12133b0310b69 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/attributesMgmt.json
@@ -41,20 +41,20 @@
           "IN_VALID": "无效键"
         },
         "REGEX_PATTERN": {
-          "LABEL": "Regex Pattern",
-          "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+          "LABEL": "正则表达式模式",
+          "PLACEHOLDER": "请输入自定义属性的正则表达式模式。（可选）"
         },
         "REGEX_CUE": {
-          "LABEL": "Regex Cue",
-          "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+          "LABEL": "正则表达式提示",
+          "PLACEHOLDER": "请输入正则表达式模式提示。（可选）"
         },
         "ENABLE_REGEX": {
-          "LABEL": "Enable regex validation"
+          "LABEL": "启用正则表达式验证"
         }
       },
       "API": {
         "SUCCESS_MESSAGE": "自定义属性添加成功!",
-        "ERROR_MESSAGE": "Could not create a Custom Attribute. Please try again later."
+        "ERROR_MESSAGE": "无法创建自定义属性，请稍后再试。"
       }
     },
     "DELETE": {
@@ -106,15 +106,15 @@
         "NOT_FOUND": "没有配置自定义属性"
       },
       "REGEX_PATTERN": {
-        "LABEL": "Regex Pattern",
-        "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+        "LABEL": "正则表达式模式",
+        "PLACEHOLDER": "请输入自定义属性的正则表达式模式。（可选）"
       },
       "REGEX_CUE": {
-        "LABEL": "Regex Cue",
-        "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+        "LABEL": "正则表达式提示",
+        "PLACEHOLDER": "请输入正则表达式模式提示。（可选）"
       },
       "ENABLE_REGEX": {
-        "LABEL": "Enable regex validation"
+        "LABEL": "启用正则表达式验证"
       }
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/auditLogs.json b/app/javascript/dashboard/i18n/locale/zh_CN/auditLogs.json
index e3d7f8f5d2e2a..ef1216b43fa94 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/auditLogs.json
@@ -1,14 +1,16 @@
 {
   "AUDIT_LOGS": {
-    "HEADER": "Audit Logs",
-    "HEADER_BTN_TXT": "Add Audit Logs",
-    "LOADING": "Fetching Audit Logs",
+    "HEADER": "审计日志",
+    "HEADER_BTN_TXT": "添加审计日志",
+    "LOADING": "正在获取审计日志",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "没有任何项目符合此查询",
-    "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
+    "SIDEBAR_TXT": "<p><b>审计日志</b></p><p>审计日志是 Chatwoot 系统中事件和操作的痕迹。</p>",
     "LIST": {
-      "404": "There are no Audit Logs available in this account.",
-      "TITLE": "Manage Audit Logs",
-      "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
+      "404": "此账户中没有可用的审计日志。",
+      "TITLE": "管理审计日志",
+      "DESC": "审计日志是 Chatwoot 系统中事件和操作的痕迹。",
       "TABLE_HEADER": [
         "User",
         "Action",
@@ -16,56 +18,57 @@
       ]
     },
     "API": {
-      "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
+      "SUCCESS_MESSAGE": "审计日志获取成功",
       "ERROR_MESSAGE": "无法连接服务器，请稍后再试"
     },
-    "DEFAULT_USER": "System",
+    "DEFAULT_USER": "系统",
     "AUTOMATION_RULE": {
-      "ADD": "%{agentName} created a new automation rule (#%{id})",
-      "EDIT": "%{agentName} updated an automation rule (#%{id})",
-      "DELETE": "%{agentName} deleted an automation rule (#%{id})"
+      "ADD": "%{agentName} 创建了一个新的自动化规则 (#%{id})",
+      "EDIT": "%{agentName} 更新了一个自动化规则 (#%{id})",
+      "DELETE": "%{agentName} 删除了一个自动化规则 (#%{id})"
     },
     "ACCOUNT_USER": {
-      "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
+      "ADD": "%{agentName} 邀请了 %{invitee} 加入账户作为 %{role}",
       "EDIT": {
-        "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "SELF": "%{agentName} 将其 %{attributes} 更改为 %{values}",
+        "OTHER": "%{agentName} 将 %{user} 的 %{attributes} 更改为 %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
-      "ADD": "%{agentName} created a new inbox (#%{id})",
-      "EDIT": "%{agentName} updated an inbox (#%{id})",
-      "DELETE": "%{agentName} deleted an inbox (#%{id})"
+      "ADD": "%{agentName} 创建了一个新的收件箱 (#%{id})",
+      "EDIT": "%{agentName} 更新了一个收件箱 (#%{id})",
+      "DELETE": "%{agentName} 删除了一个收件箱 (#%{id})"
     },
     "WEBHOOK": {
-      "ADD": "%{agentName} created a new webhook (#%{id})",
-      "EDIT": "%{agentName} updated a webhook (#%{id})",
-      "DELETE": "%{agentName} deleted a webhook (#%{id})"
+      "ADD": "%{agentName} 创建了一个新的 webhook (#%{id})",
+      "EDIT": "%{agentName} 更新了一个 webhook (#%{id})",
+      "DELETE": "%{agentName} 删除了一个 webhook (#%{id})"
     },
     "USER_ACTION": {
-      "SIGN_IN": "%{agentName} signed in",
-      "SIGN_OUT": "%{agentName} signed out"
+      "SIGN_IN": "%{agentName} 登录",
+      "SIGN_OUT": "%{agentName} 登出"
     },
     "TEAM": {
-      "ADD": "%{agentName} created a new team (#%{id})",
-      "EDIT": "%{agentName} updated a team (#%{id})",
-      "DELETE": "%{agentName} deleted a team (#%{id})"
+      "ADD": "%{agentName} 创建了一个新的团队 (#%{id})",
+      "EDIT": "%{agentName} 更新了一个团队 (#%{id})",
+      "DELETE": "%{agentName} 删除了一个团队 (#%{id})"
     },
     "MACRO": {
-      "ADD": "%{agentName} created a new macro (#%{id})",
-      "EDIT": "%{agentName} updated a macro (#%{id})",
-      "DELETE": "%{agentName} deleted a macro (#%{id})"
+      "ADD": "%{agentName} 创建了一个新的宏 (#%{id})",
+      "EDIT": "%{agentName} 更新了一个宏 (#%{id})",
+      "DELETE": "%{agentName} 删除了一个宏 (#%{id})"
     },
     "INBOX_MEMBER": {
-      "ADD": "%{agentName} added %{user} to the inbox(#%{inbox_id})",
-      "REMOVE": "%{agentName} removed %{user} from the inbox(#%{inbox_id})"
+      "ADD": "%{agentName} 将 %{user} 添加到收件箱 (#%{inbox_id})",
+      "REMOVE": "%{agentName} 将 %{user} 从收件箱 (#%{inbox_id}) 中移除"
     },
     "TEAM_MEMBER": {
-      "ADD": "%{agentName} added %{user} to the team(#%{team_id})",
-      "REMOVE": "%{agentName} removed %{user} from the team(#%{team_id})"
+      "ADD": "%{agentName} 将 %{user} 添加到团队 (#%{team_id})",
+      "REMOVE": "%{agentName} 将 %{user} 从团队 (#%{team_id}) 中移除"
     },
     "ACCOUNT": {
-      "EDIT": "%{agentName} updated the account configuration (#%{id})"
+      "EDIT": "%{agentName} 更新了账户配置 (#%{id})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/automation.json b/app/javascript/dashboard/i18n/locale/zh_CN/automation.json
index e6f46619c3bb0..82bf986bf42a9 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/automation.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/automation.json
@@ -1,9 +1,9 @@
 {
   "AUTOMATION": {
-    "HEADER": "Automations",
+    "HEADER": "自动化",
     "HEADER_BTN_TXT": "添加自动化规则",
     "LOADING": "正在获取自动化规则",
-    "SIDEBAR_TXT": "<p><b>Automation Rules</b> <p>Automation can replace and automate existing processes that require manual effort. You can do many things with automation, including adding labels and assigning conversation to the best agent. So the team focuses on what they do best and spends more little time on manual tasks.</p>",
+    "SIDEBAR_TXT": "<p><b>自动化规则</b></p><p>自动化可以替代和自动化现有的需要手动完成的流程。您可以使用自动化完成许多事情，包括添加标签和将对话分配给最佳客服代表。这样团队可以专注于他们最擅长的事情，减少在手动任务上花费的时间。</p>",
     "ADD": {
       "TITLE": "添加自动化规则",
       "SUBMIT": "创建",
@@ -35,20 +35,20 @@
       "ACTION_BUTTON_LABEL": "添加操作",
       "API": {
         "SUCCESS_MESSAGE": "自动化规则添加成功",
-        "ERROR_MESSAGE": "Could not able to create a automation rule, Please try again later"
+        "ERROR_MESSAGE": "无法创建自动化规则，请稍后再试"
       }
     },
     "LIST": {
       "TABLE_HEADER": [
         "姓名：",
         "描述信息",
-        "Active",
-        "Created on"
+        "状态",
+        "创建时间"
       ],
-      "404": "No automation rules found"
+      "404": "未找到自动化规则"
     },
     "DELETE": {
-      "TITLE": "Delete Automation Rule",
+      "TITLE": "删除自动化规则",
       "SUBMIT": "删除",
       "CANCEL_BUTTON_TEXT": "取消",
       "CONFIRM": {
@@ -58,24 +58,24 @@
         "NO": "不，保留 "
       },
       "API": {
-        "SUCCESS_MESSAGE": "Automation rule deleted successfully",
-        "ERROR_MESSAGE": "Could not able to delete a automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "自动化规则删除成功",
+        "ERROR_MESSAGE": "无法删除自动化规则，请稍后再试"
       }
     },
     "EDIT": {
-      "TITLE": "Edit Automation Rule",
+      "TITLE": "编辑自动化规则",
       "SUBMIT": "更新",
       "CANCEL_BUTTON_TEXT": "取消",
       "API": {
-        "SUCCESS_MESSAGE": "Automation rule updated successfully",
-        "ERROR_MESSAGE": "Could not update automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "自动化规则更新成功",
+        "ERROR_MESSAGE": "无法更新自动化规则，请稍后再试"
       }
     },
     "CLONE": {
-      "TOOLTIP": "Clone",
+      "TOOLTIP": "克隆",
       "API": {
-        "SUCCESS_MESSAGE": "Automation cloned successfully",
-        "ERROR_MESSAGE": "Could not clone automation rule, Please try again later"
+        "SUCCESS_MESSAGE": "自动化克隆成功",
+        "ERROR_MESSAGE": "无法克隆自动化规则，请稍后再试"
       }
     },
     "FORM": {
@@ -83,27 +83,29 @@
       "CREATE": "创建",
       "DELETE": "删除",
       "CANCEL": "取消",
-      "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
+      "RESET_MESSAGE": "更改事件类型将重置您在下方添加的条件和事件"
     },
     "CONDITION": {
-      "DELETE_MESSAGE": "You need to have atleast one condition to save",
-      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
-      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
+      "DELETE_MESSAGE": "保存时至少需要一个条件",
+      "CONTACT_CUSTOM_ATTR_LABEL": "联系人自定义属性",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "对话自定义属性"
     },
     "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"
+      "DELETE_MESSAGE": "保存时至少需要一个操作",
+      "TEAM_MESSAGE_INPUT_PLACEHOLDER": "在这里输入您的消息",
+      "TEAM_DROPDOWN_PLACEHOLDER": "选择团队",
+      "EMAIL_INPUT_PLACEHOLDER": "Enter email",
+      "URL_INPUT_PLACEHOLDER": "Enter URL"
     },
     "TOGGLE": {
-      "ACTIVATION_TITLE": "Activate Automation Rule",
-      "DEACTIVATION_TITLE": "Deactivate Automation Rule",
-      "ACTIVATION_DESCRIPTION": "This action will activate the automation rule '{automationName}'. Are you sure you want to proceed?",
-      "DEACTIVATION_DESCRIPTION": "This action will deactivate the automation rule '{automationName}'. Are you sure you want to proceed?",
-      "ACTIVATION_SUCCESFUL": "Automation Rule Activated Successfully",
-      "DEACTIVATION_SUCCESFUL": "Automation Rule Deactivated Successfully",
-      "ACTIVATION_ERROR": "Could not Activate Automation, Please try again later",
-      "DEACTIVATION_ERROR": "Could not Deactivate Automation, Please try again later",
+      "ACTIVATION_TITLE": "激活自动化规则",
+      "DEACTIVATION_TITLE": "停用自动化规则",
+      "ACTIVATION_DESCRIPTION": "此操作将激活自动化规则 '{automationName}'。您确定要继续吗？",
+      "DEACTIVATION_DESCRIPTION": "此操作将停用自动化规则 '{automationName}'。您确定要继续吗？",
+      "ACTIVATION_SUCCESFUL": "自动化规则激活成功",
+      "DEACTIVATION_SUCCESFUL": "自动化规则停用成功",
+      "ACTIVATION_ERROR": "无法激活自动化，请稍后再试",
+      "DEACTIVATION_ERROR": "无法停用自动化，请稍后再试",
       "CONFIRMATION_LABEL": "是",
       "CANCEL_LABEL": "否"
     },
@@ -111,8 +113,17 @@
       "UPLOAD_ERROR": "无法上传附件。请重试",
       "LABEL_IDLE": "上传附件",
       "LABEL_UPLOADING": "上传中...",
-      "LABEL_UPLOADED": "Successfully Uploaded",
+      "LABEL_UPLOADED": "上传成功",
       "LABEL_UPLOAD_FAILED": "上传失败"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "必须填写值",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/bulkActions.json b/app/javascript/dashboard/i18n/locale/zh_CN/bulkActions.json
index d6ef31100977d..26888727562b6 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/bulkActions.json
@@ -1,40 +1,41 @@
 {
   "BULK_ACTION": {
-    "CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
+    "CONVERSATIONS_SELECTED": "已选择 %{conversationCount} 个对话",
     "AGENT_SELECT_LABEL": "选择客服代表",
-    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
-    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
+    "ASSIGN_CONFIRMATION_LABEL": "您确定要将 %{conversationCount} 个 %{conversationLabel} 分配给",
+    "UNASSIGN_CONFIRMATION_LABEL": "您确定要取消分配 %{conversationCount} 个 %{conversationLabel} 吗？",
     "GO_BACK_LABEL": "返回",
     "ASSIGN_LABEL": "分配",
     "YES": "是",
+    "SEARCH_INPUT_PLACEHOLDER": "搜索",
     "ASSIGN_AGENT_TOOLTIP": "分配客服代表",
-    "ASSIGN_TEAM_TOOLTIP": "Assign team",
+    "ASSIGN_TEAM_TOOLTIP": "分配一个团队",
     "ASSIGN_SUCCESFUL": "对话分配成功.",
-    "ASSIGN_FAILED": "Failed to assign conversations. Please try again.",
+    "ASSIGN_FAILED": "分配对话失败。请再试一次。",
     "RESOLVE_SUCCESFUL": "成功将对话标记为已解决.",
-    "RESOLVE_FAILED": "Failed to resolve conversations. Please try again.",
-    "ALL_CONVERSATIONS_SELECTED_ALERT": "Conversations visible on this page are only selected.",
+    "RESOLVE_FAILED": "解决对话失败。请再试一次。",
+    "ALL_CONVERSATIONS_SELECTED_ALERT": "仅选择了此页面上可见的对话。",
     "AGENT_LIST_LOADING": "正在加载客服代表",
     "UPDATE": {
       "CHANGE_STATUS": "更改状态",
       "SNOOZE_UNTIL": "推迟",
       "UPDATE_SUCCESFUL": "对话状态更新成功。",
-      "UPDATE_FAILED": "Failed to update conversations. Please try again."
+      "UPDATE_FAILED": "更新对话失败。请再试一次。"
     },
     "LABELS": {
-      "ASSIGN_LABELS": "Assign labels",
+      "ASSIGN_LABELS": "分配标签",
       "NO_LABELS_FOUND": "未找到标签",
       "ASSIGN_SELECTED_LABELS": "分配指定的标签",
       "ASSIGN_SUCCESFUL": "已成功分配标签.",
-      "ASSIGN_FAILED": "Failed to assign labels. Please try again."
+      "ASSIGN_FAILED": "分配标签失败。请再试一次。"
     },
     "TEAMS": {
       "TEAM_SELECT_LABEL": "选择团队",
       "NONE": "啥都没有",
-      "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
-      "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
-      "ASSIGN_FAILED": "Failed to assign team. Please try again."
+      "NO_TEAMS_AVAILABLE": "此帐户尚未添加团队。",
+      "ASSIGN_SELECTED_TEAMS": "分配选定的团队。",
+      "ASSIGN_SUCCESFUL": "团队分配成功。",
+      "ASSIGN_FAILED": "分配团队失败。请再试一次。"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/zh_CN/cannedMgmt.json
index 5a1cb476b4538..456fa72072f02 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "预设回复",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "新增预定义回复",
     "LOADING": "正在检索预定义回复...",
     "SEARCH_404": "没有任何项目符合此查询.",
-    "SIDEBAR_TXT": "<p><b>预定义回复</b></p>\n<p>预定义回复是预先编写的回复模板，帮助您快速回应对话。在聊天过程中插入预定义回复，代理可以输入一个以 '/' 字符开头的短代码。</p>\n<p>您可以从此页面管理预定义回复，或使用\"添加预定义回复\"按钮创建新的回复。</p>\n<p>在<a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">预定义回复手册</a>中查看详细说明。</p>\n<p>此外，请查看全新的<a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">预定义回复库</a>。</p>\n",
     "LIST": {
       "404": "此帐户中没有预设的回复。",
       "TITLE": "管理预设回复",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/contact.json b/app/javascript/dashboard/i18n/locale/zh_CN/contact.json
index 11586e6b31aae..275806627dee5 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/contact.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/contact.json
@@ -84,7 +84,7 @@
     "CONFIRM": {
       "TITLE": "导出联系人",
       "MESSAGE": "您确定要导出所有联系人吗？",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
+      "FILTERED_MESSAGE": "您确定要导出所有指定的联系人吗？",
       "YES": "是的，导出",
       "NO": "否，取消"
     }
@@ -298,8 +298,8 @@
     "BUTTON": "添加自定义属性",
     "NOT_AVAILABLE": "此联系人没有可用的自定义属性。",
     "COPY_SUCCESSFUL": "已成功复制到剪贴板",
-    "SHOW_MORE": "Show all attributes",
-    "SHOW_LESS": "Show less attributes",
+    "SHOW_MORE": "显示全部属性",
+    "SHOW_LESS": "显示较少属性",
     "ACTIONS": {
       "COPY": "复制属性",
       "DELETE": "删除属性",
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "已成功合并联系人",
       "ERROR_MESSAGE": "无法合并联系人，请重试！"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json b/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json
index 2b6e7bf1e4b3d..93d7c740680e5 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json
@@ -49,10 +49,10 @@
     "NO_RESPONSE": "无响应",
     "RATING_TITLE": "评分",
     "FEEDBACK_TITLE": "Feedback",
-    "REPLY_MESSAGE_NOT_FOUND": "Message not available",
+    "REPLY_MESSAGE_NOT_FOUND": "消息不可用",
     "CARD": {
-      "SHOW_LABELS": "Show labels",
-      "HIDE_LABELS": "Hide labels"
+      "SHOW_LABELS": "显示标签",
+      "HIDE_LABELS": "隐藏标签"
     },
     "HEADER": {
       "RESOLVE_ACTION": "已解决",
@@ -61,14 +61,14 @@
       "OPEN": "详细信息",
       "CLOSE": "关闭",
       "DETAILS": "详情",
-      "SNOOZED_UNTIL": "Snoozed until",
+      "SNOOZED_UNTIL": "推迟到",
       "SNOOZED_UNTIL_TOMORROW": "推迟到明天",
       "SNOOZED_UNTIL_NEXT_WEEK": "推迟到下周",
-      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
+      "SNOOZED_UNTIL_NEXT_REPLY": "推迟至下一个回复",
       "SLA_STATUS": {
-        "FRT": "FRT {status}",
-        "NRT": "NRT {status}",
-        "RT": "RT {status}",
+        "FRT": "第一响应时间 {status}",
+        "NRT": "净响应时间 {status}",
+        "RT": "响应时间 {status}",
         "MISSED": "missed",
         "DUE": "due"
       }
@@ -93,33 +93,33 @@
       "OPTIONS": {
         "NONE": "啥都没有",
         "URGENT": "Urgent",
-        "HIGH": "High",
-        "MEDIUM": "Medium",
-        "LOW": "Low"
+        "HIGH": "高",
+        "MEDIUM": "中",
+        "LOW": "低"
       },
       "CHANGE_PRIORITY": {
         "SELECT_PLACEHOLDER": "啥都没有",
-        "INPUT_PLACEHOLDER": "Select priority",
+        "INPUT_PLACEHOLDER": "选择优先级",
         "NO_RESULTS": "没有检索到相关信息",
         "SUCCESSFUL": "Changed priority of conversation id %{conversationId} to %{priority}",
-        "FAILED": "Couldn't change priority. Please try again."
+        "FAILED": "无法更改优先级。请重试。"
       }
     },
     "CARD_CONTEXT_MENU": {
       "PENDING": "标记为待处理",
       "RESOLVED": "标记为已解决",
-      "MARK_AS_UNREAD": "Mark as unread",
+      "MARK_AS_UNREAD": "标记为未读",
       "REOPEN": "重新打开会话",
       "SNOOZE": {
         "TITLE": "推迟",
-        "NEXT_REPLY": "Until next reply",
-        "TOMORROW": "Until tomorrow",
-        "NEXT_WEEK": "Until next week"
+        "NEXT_REPLY": "直到下次回复",
+        "TOMORROW": "直到明天",
+        "NEXT_WEEK": "直到下周"
       },
       "ASSIGN_AGENT": "分配客服代表",
       "ASSIGN_LABEL": "分配标签",
       "AGENTS_LOADING": "正在加载客服代表...",
-      "ASSIGN_TEAM": "Assign team",
+      "ASSIGN_TEAM": "分配一个团队",
       "API": {
         "AGENT_ASSIGNMENT": {
           "SUCCESFUL": "对话 ID %{conversationId} 已分配给 \"%{agentName}\"",
@@ -142,7 +142,8 @@
       "MSG_INPUT": "输入“/”开始选择快捷回复",
       "PRIVATE_MSG_INPUT": "Shift + 输入新行。这只对客服可见",
       "MESSAGE_SIGNATURE_NOT_CONFIGURED": "未设置消息签名，请在个人资料中进行设置。",
-      "CLICK_HERE": "点击此处更新"
+      "CLICK_HERE": "点击此处更新",
+      "WHATSAPP_TEMPLATES": "Whatsapp Templates"
     },
     "REPLYBOX": {
       "REPLY": "回复",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/general.json b/app/javascript/dashboard/i18n/locale/zh_CN/general.json
index 25bb4dfb736d2..3f39e289f558f 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/general.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/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": "搜索",
+      "EMPTY_STATE": "没有检索到相关信息"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json b/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json
index 0127763e945da..1b73aad4e9bf3 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json
@@ -59,7 +59,7 @@
       "ENTER_TO_SELECT": "按回车键选择",
       "ENTER_TO_REMOVE": "按回车键删除",
       "SELECT_ONE": "请选择一个",
-      "SELECT": "Select"
+      "SELECT": "选择"
     }
   },
   "NOTIFICATIONS_PAGE": {
@@ -79,7 +79,7 @@
         "姓名：",
         "电话号码",
         "会话",
-        "Last Contacted"
+        "上次联系"
       ]
     },
     "TYPE_LABEL": {
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "离线的"
+      "OFFLINE": "离线的",
+      "RECONNECTING": "正在重连...",
+      "RECONNECT_SUCCESS": "已重新连接"
     },
     "BUTTON": {
       "REFRESH": "刷新"
@@ -107,17 +109,17 @@
       "GENERAL": "一般",
       "REPORTS": "报告",
       "CONVERSATION": "会话",
-      "BULK_ACTIONS": "Bulk Actions",
+      "BULK_ACTIONS": "批量操作",
       "CHANGE_ASSIGNEE": "更改分配",
-      "CHANGE_PRIORITY": "Change Priority",
+      "CHANGE_PRIORITY": "更改优先级",
       "CHANGE_TEAM": "更改团队",
-      "SNOOZE_CONVERSATION": "Snooze Conversation",
+      "SNOOZE_CONVERSATION": "推迟对话",
       "ADD_LABEL": "为对话添加标签",
       "REMOVE_LABEL": "从对话移除标签",
       "SETTINGS": "设置",
-      "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "Appearance",
-      "SNOOZE_NOTIFICATION": "Snooze Notification"
+      "AI_ASSIST": "AI 助手",
+      "APPEARANCE": "外观",
+      "SNOOZE_NOTIFICATION": "推迟通知"
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "转到对话面板",
@@ -133,14 +135,14 @@
       "GO_TO_SETTINGS_INBOXES": "前往收件箱设置",
       "GO_TO_SETTINGS_LABELS": "前往标签设置",
       "GO_TO_SETTINGS_CANNED_RESPONSES": "Go to Canned Response Settings",
-      "GO_TO_SETTINGS_APPLICATIONS": "Go to Application Settings",
+      "GO_TO_SETTINGS_APPLICATIONS": "转到应用程序设置",
       "GO_TO_SETTINGS_ACCOUNT": "Go to Account Settings",
       "GO_TO_SETTINGS_PROFILE": "Go to Profile Settings",
       "GO_TO_NOTIFICATIONS": "转到通知",
       "ADD_LABELS_TO_CONVERSATION": "为对话添加标签",
       "ASSIGN_AN_AGENT": "分配一位客服代表",
-      "AI_ASSIST": "AI Assist",
-      "ASSIGN_PRIORITY": "Assign priority",
+      "AI_ASSIST": "AI 助手",
+      "ASSIGN_PRIORITY": "分配优先级",
       "ASSIGN_A_TEAM": "分配一个团队",
       "MUTE_CONVERSATION": "静音对话",
       "UNMUTE_CONVERSATION": "取消静音对话",
@@ -154,11 +156,11 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
-      "LIGHT_MODE": "Light",
-      "DARK_MODE": "Dark",
-      "SYSTEM_MODE": "System",
+      "LIGHT_MODE": "浅色",
+      "DARK_MODE": "深色",
+      "SYSTEM_MODE": "系统",
       "SNOOZE_NOTIFICATION": "推迟通知"
     }
   },
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/helpCenter.json b/app/javascript/dashboard/i18n/locale/zh_CN/helpCenter.json
index ee17d3e761f3d..e3f53b8068cef 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/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/zh_CN/inbox.json b/app/javascript/dashboard/i18n/locale/zh_CN/inbox.json
index 7ad71ad640346..b5ef8a01ba1e4 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/inbox.json
@@ -8,7 +8,7 @@
       "NO_NOTIFICATIONS": "No notifications",
       "NOTE": "Notifications from all subscribed inboxes",
       "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
-      "SNOOZED_UNTIL": "Snoozed until",
+      "SNOOZED_UNTIL": "推迟到",
       "SNOOZED_UNTIL_TOMORROW": "推迟到明天",
       "SNOOZED_UNTIL_NEXT_WEEK": "推迟到下周"
     },
@@ -29,7 +29,7 @@
     },
     "MENU_ITEM": {
       "MARK_AS_READ": "Mark as read",
-      "MARK_AS_UNREAD": "Mark as unread",
+      "MARK_AS_UNREAD": "标记为未读",
       "SNOOZE": "推迟",
       "DELETE": "删除",
       "MARK_ALL_READ": "全部标记为已读",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json
index e6913a20f6a4e..00a79996168df 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "收件箱",
     "SIDEBAR_TXT": "<p><b>收件箱</b></p> <p> 当您将网站或Facebook页面连接到Chatwoot 它被称为一个 <b>收件箱</b>。 您可以在Chatwoot 帐户中拥有无限的收件箱。 </p><p> 点击 <b>添加收件箱</b> 连接网站或 Facebook 页面。 </p><p> 在仪表盘中 您可以在一个地方看到所有收件箱中的所有对话，并在“对话”选项卡下回复。 </p><p> 您也可以通过点击仪表板左侧面板上的收件箱名称看到针对收件箱的对话。 </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "此账户没有收件箱。"
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "输入电子邮件地址",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
@@ -436,16 +439,16 @@
         "DISABLED": "已禁用"
       },
       "ENABLE_HMAC": {
-        "LABEL": "Enable"
+        "LABEL": "启用"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "删除",
-      "AVATAR_DELETE_BUTTON_TEXT": "Delete Avatar",
+      "AVATAR_DELETE_BUTTON_TEXT": "删除头像",
       "CONFIRM": {
         "TITLE": "确认删除",
         "MESSAGE": "您确定要删除吗？ ",
-        "PLACE_HOLDER": "Please type {inboxName} to confirm",
+        "PLACE_HOLDER": "请输入 {inboxName} 以确认",
         "YES": "是，删除 ",
         "NO": "不，保留 "
       },
@@ -462,13 +465,13 @@
       "CONFIGURATION": "Configuration",
       "CAMPAIGN": "Campaigns",
       "PRE_CHAT_FORM": "Pre Chat Form",
-      "BUSINESS_HOURS": "Business Hours",
-      "WIDGET_BUILDER": "Widget Builder",
-      "BOT_CONFIGURATION": "Bot Configuration"
+      "BUSINESS_HOURS": "工作时间",
+      "WIDGET_BUILDER": "小部件生成器",
+      "BOT_CONFIGURATION": "机器人配置"
     },
     "SETTINGS": "设置",
     "FEATURES": {
-      "LABEL": "Features",
+      "LABEL": "特性",
       "DISPLAY_FILE_PICKER": "Display file picker on the widget",
       "DISPLAY_EMOJI_PICKER": "Display emoji picker on the widget",
       "ALLOW_END_CONVERSATION": "Allow users to end conversation from the widget",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/integrations.json b/app/javascript/dashboard/i18n/locale/zh_CN/integrations.json
index fee98b36f79b5..4cda86fd998d6 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "集成方式",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "订阅事件",
       "FORM": {
@@ -103,7 +112,7 @@
       "CREATE_ERROR": "There was an error creating a meeting link, please try again"
     },
     "OPEN_AI": {
-      "AI_ASSIST": "AI Assist",
+      "AI_ASSIST": "AI 助手",
       "WITH_AI": " %{option} with AI ",
       "OPTIONS": {
         "REPLY_SUGGESTION": "Reply Suggestion",
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "创建",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "链接",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "标题",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "描述信息",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "选择团队",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "优先级",
+            "PLACEHOLDER": "选择优先级",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "标签",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "状态",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "创建",
+        "CANCEL": "取消",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "状态",
+        "PRIORITY": "优先级",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "标签",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/zh_CN/labelsMgmt.json
index a75e5b36cd3a8..1617e484e393a 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "标签",
     "HEADER_BTN_TXT": "添加标签",
     "LOADING": "正在获取标签",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "没有任何项目符合此查询",
-    "SIDEBAR_TXT": "<p><b>标签</b> <p>可以帮助您对对话进行分类和排序。 您可以从侧面板给对话指定标签。 <br /><br />标签被绑定到帐户，可以用于创建您组织中的自定义工作流。 您可以将自定义颜色分配给标签，使它更容易识别标签。 您将能够在侧边栏上显示标签，方便地过滤对话。</p>",
     "LIST": {
       "404": "此帐户中没有可用的标签。",
       "TITLE": "管理标签",
@@ -49,7 +50,8 @@
       "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": "添加标签",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/macros.json b/app/javascript/dashboard/i18n/locale/zh_CN/macros.json
index 7f8a2e4268eb1..05af999c96ae6 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/macros.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "执行",
       "PREVIEW": "预览宏...",
       "EXECUTED_SUCCESSFULLY": "宏成功执行"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "必须填写值",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/report.json b/app/javascript/dashboard/i18n/locale/zh_CN/report.json
index 512701e51d81f..3bb65ae185fc6 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/report.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/report.json
@@ -138,7 +138,7 @@
         "groupBy": "Month"
       }
     ],
-    "BUSINESS_HOURS": "Business Hours",
+    "BUSINESS_HOURS": "工作时间",
     "FILTER_ACTIONS": {
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "没有检索到相关信息"
@@ -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": "标签",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/search.json b/app/javascript/dashboard/i18n/locale/zh_CN/search.json
index b8bd13bb4b9f6..4e1d959495817 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/search.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "会话",
       "MESSAGES": "消息"
     },
+    "SEARCHING_DATA": "搜索中",
     "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/i18n/locale/zh_CN/settings.json b/app/javascript/dashboard/i18n/locale/zh_CN/settings.json
index b79271b59c0ef..518c0754a8ca8 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/settings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/settings.json
@@ -239,10 +239,11 @@
     "REPORTS": "报告",
     "SETTINGS": "设置",
     "CONTACTS": "联系人",
+    "CAPTAIN": "Captain",
     "HOME": "首页",
     "AGENTS": "客服代理们",
     "AGENT_BOTS": "机器人",
-    "AUDIT_LOGS": "Audit Logs",
+    "AUDIT_LOGS": "审计日志",
     "INBOXES": "收件箱",
     "NOTIFICATIONS": "消息通知",
     "CANNED_RESPONSES": "预设回复",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "您的 Facebook 连接已过期，请重新连接您的 Facebook 页面以继续服务",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "帮助中心",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/sla.json b/app/javascript/dashboard/i18n/locale/zh_CN/sla.json
index 361241aaf5c24..6266b21732246 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/sla.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/sla.json
@@ -64,7 +64,7 @@
         "PLACEHOLDER": "60"
       },
       "BUSINESS_HOURS": {
-        "LABEL": "Business Hours",
+        "LABEL": "工作时间",
         "PLACEHOLDER": "Only during business hours"
       },
       "THRESHOLD_TIME": {
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/teamsSettings.json b/app/javascript/dashboard/i18n/locale/zh_CN/teamsSettings.json
index f3fb00401bd2a..7be2730a68824 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "创建新团队",
     "HEADER": "团队",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "编辑团队"
+      "EDIT_TEAM": "编辑团队",
+      "NONE": "啥都没有"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "无法删除团队，请重试！"
       },
       "CONFIRM": {
-        "TITLE": "您确定要删除 - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "请输入 {teamName} 以确认",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "删除 ",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/advancedFilters.json b/app/javascript/dashboard/i18n/locale/zh_TW/advancedFilters.json
index 31654ecf8cf63..1747775ebac24 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "且",
       "OR": "或"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "等於",
       "not_equal_to": "不等於",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json b/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json
index 0fe30a7a5ceaa..f7da272f36116 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "客服",
     "HEADER_BTN_TXT": "新增客服",
     "LOADING": "正在取得客服列表",
-    "SIDEBAR_TXT": "<p><b>客服</b></p> <p> 客服 <b></b> 是您的客戶支持團隊成員。 </p><p>客服將能夠查看和回覆您使用者的訊息。 列表顯示目前帳戶中的所有客服。 </p><p> 點擊 <b>新增客服</b> 以新增新客服。 您新增的客服將收到一封包含確認連結的電子信箱來啟動他們的帳戶，然後他們可以訪問Chatwoot 並回覆訊息。 </p><p> 聊天視窗的功能基於以下角色。 </p><p> <b>客服</b> - 具有此角色的客服只能訪問收件匣、報表和對話。 他們可以將對話分配給其他客服或自己，並封存會話。</p><p> <b>管理員</b> - 管理員將可以訪問您帳戶中所有已啟用的聊天功能。 包括設定，以及所有正常客服的權限。</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "管理員",
       "AGENT": "客服"
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/auditLogs.json b/app/javascript/dashboard/i18n/locale/zh_TW/auditLogs.json
index a14087e7474d4..c6aebd42195c1 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/auditLogs.json
@@ -3,6 +3,8 @@
     "HEADER": "Audit Logs",
     "HEADER_BTN_TXT": "Add Audit Logs",
     "LOADING": "Fetching Audit Logs",
+    "DESCRIPTION": "Audit Logs maintain a record of activities in your account, allowing you to track and audit your account, team, or services.",
+    "LEARN_MORE": "Learn more about audit logs",
     "SEARCH_404": "沒有任何項目符合此查詢",
     "SIDEBAR_TXT": "<p><b>Audit Logs</b> </p><p> Audit Logs are trails for events and actions in a Chatwoot System. </p>",
     "LIST": {
@@ -29,7 +31,8 @@
       "ADD": "%{agentName} invited %{invitee} to the account as an %{role}",
       "EDIT": {
         "SELF": "%{agentName} changed their %{attributes} to %{values}",
-        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}"
+        "OTHER": "%{agentName} changed %{attributes} of %{user} to %{values}",
+        "DELETED": "%{agentName} changed %{attributes} of a deleted user to %{values}"
       }
     },
     "INBOX": {
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/automation.json b/app/javascript/dashboard/i18n/locale/zh_TW/automation.json
index b6f4ae9a99ac4..e33f83d0d4b20 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/automation.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/automation.json
@@ -93,7 +93,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",
@@ -113,6 +115,15 @@
       "LABEL_UPLOADING": "上傳中",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "此欄位為必填項目",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/bulkActions.json b/app/javascript/dashboard/i18n/locale/zh_TW/bulkActions.json
index 1f80e99f5cb4d..74fb8650ff6bb 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "返回",
     "ASSIGN_LABEL": "指派",
     "YES": "是",
+    "SEARCH_INPUT_PLACEHOLDER": "搜尋",
     "ASSIGN_AGENT_TOOLTIP": "指派客服",
     "ASSIGN_TEAM_TOOLTIP": "指派團隊",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
@@ -33,7 +34,7 @@
       "NONE": "無",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/zh_TW/cannedMgmt.json
index bdf71dec7dfc4..4a1a81d657b95 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/cannedMgmt.json
@@ -1,10 +1,11 @@
 {
   "CANNED_MGMT": {
     "HEADER": "預設回覆",
+    "LEARN_MORE": "Learn more about canned responses",
+    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
     "SEARCH_404": "沒有任何項目符合此查詢.",
-    "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
       "404": "此帳戶中沒有可用的罐頭回覆。",
       "TITLE": "管理預設回覆",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/contact.json b/app/javascript/dashboard/i18n/locale/zh_TW/contact.json
index 6902a3e637254..f84b000059bfa 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/contact.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/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/zh_TW/conversation.json b/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json
index f8546a7444038..bd486075a8751 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json
@@ -142,7 +142,8 @@
       "MSG_INPUT": "輸入“/”開始選擇快捷回覆",
       "PRIVATE_MSG_INPUT": "Shift + 輸入新行。這只對客服可以看見",
       "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": "回覆",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/general.json b/app/javascript/dashboard/i18n/locale/zh_TW/general.json
index 25bb4dfb736d2..cefe266b42afc 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/general.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/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": "搜尋",
+      "EMPTY_STATE": "No results found"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json b/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json
index 49f69de56cca2..0c529fe3a7811 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json
@@ -95,7 +95,9 @@
   },
   "NETWORK": {
     "NOTIFICATION": {
-      "OFFLINE": "離線的"
+      "OFFLINE": "離線的",
+      "RECONNECTING": "Reconnecting...",
+      "RECONNECT_SUCCESS": "Reconnected"
     },
     "BUTTON": {
       "REFRESH": "Refresh"
@@ -154,7 +156,7 @@
       "UNTIL_TOMORROW": "Until tomorrow",
       "UNTIL_NEXT_MONTH": "Until next month",
       "AN_HOUR_FROM_NOW": "Until an hour from now",
-      "CUSTOM": "Custom...",
+      "UNTIL_CUSTOM_TIME": "Custom...",
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/helpCenter.json b/app/javascript/dashboard/i18n/locale/zh_TW/helpCenter.json
index f936beee0d6e8..3e9cbc072de2e 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/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/zh_TW/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/zh_TW/inboxMgmt.json
index bdbc90b71bb7d..7a859f3d12d0e 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/inboxMgmt.json
@@ -2,6 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "收件匣",
     "SIDEBAR_TXT": "<p><b>收件匣</b></p> <p> 當您將網站或 Facebook 頁面連接到 Chatwoot 它被稱為一個 <b>收件匣</b>。 您可以在Chatwoot 帳戶中擁有無限的收件匣。 </p><p> 點擊 <b>建立收件匣</b> 連接網站或 Facebook 頁面。 </p><p> 在儀表板中 您可以在一個地方看到所有收件匣中的所有對話，並在“對話”選項卡下回覆。 </p><p> 您也可以通過點擊儀表板左側面板上的收件匣名稱看到該收件匣的對話。 </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "此帳戶没有收件匣。"
     },
@@ -364,6 +366,7 @@
         "TITLE": "Microsoft Email",
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "輸入電子信箱",
+        "SIGN_IN": "Sign in with Microsoft",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       }
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/integrations.json b/app/javascript/dashboard/i18n/locale/zh_TW/integrations.json
index d9e425735f5f4..67315a24e824e 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/integrations.json
@@ -1,6 +1,15 @@
 {
   "INTEGRATION_SETTINGS": {
     "HEADER": "整合方式",
+    "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
+    "LEARN_MORE": "Learn more about integrations",
+    "LOADING": "Fetching integrations",
+    "CAPTAIN": {
+      "DISABLED": "Captain is not enabled on your account.",
+      "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
+      "LOADING_CONSOLE": "Loading Captain Console...",
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+    },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "FORM": {
@@ -169,6 +178,7 @@
       "HEADER_BTN_TXT": "Add a new dashboard app",
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
+      "LEARN_MORE": "Learn more about Dashboard Apps",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
@@ -209,6 +219,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "建立",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "連結",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "標題",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "標題為必填"
+          },
+          "DESCRIPTION": {
+            "LABEL": "描述資訊",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "選擇團隊",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "優先",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "狀態",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "建立",
+        "CANCEL": "取消",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "狀態",
+        "PRIORITY": "優先",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "標籤",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/zh_TW/labelsMgmt.json
index b946f605f3060..28777c1a82ea6 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/labelsMgmt.json
@@ -3,8 +3,9 @@
     "HEADER": "標籤",
     "HEADER_BTN_TXT": "新增標籤",
     "LOADING": "正在獲取標籤",
+    "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
+    "LEARN_MORE": "Learn more about labels",
     "SEARCH_404": "没有任何項目符合此查詢",
-    "SIDEBAR_TXT": "<p><b>標籤</b> <p>可以幫助您對對話進行分類和排序。 您可以從側面板給對話指定標籤。 <br /><br />標籤被綁定到帳戶，可以用於建立您組織中的自定義工作流。 您可以將自定義顏色分配給標籤，使它更容易識別標籤。 您將能夠在側邊欄上顯示標籤，方便地過濾對話。</p>",
     "LIST": {
       "404": "此帳戶中没有可用的標籤。",
       "TITLE": "管理標籤",
@@ -49,7 +50,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": "新增標籤",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/macros.json b/app/javascript/dashboard/i18n/locale/zh_TW/macros.json
index 1b38b2f67397b..99d08cbe5935b 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/macros.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/macros.json
@@ -73,6 +73,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "此欄位為必填項目",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/report.json b/app/javascript/dashboard/i18n/locale/zh_TW/report.json
index 4213a703ba6fb..2548ec44d4fee 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/report.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/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/zh_TW/search.json b/app/javascript/dashboard/i18n/locale/zh_TW/search.json
index eba9aee8ee282..78cb9ad9217ab 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/search.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "對話",
       "MESSAGES": "訊息"
     },
+    "SEARCHING_DATA": "Searching",
     "EMPTY_STATE": "No %{item} found for query '%{query}'",
     "EMPTY_STATE_FULL": "查無 %{query} 條件的結果",
     "PLACEHOLDER_KEYBINDING": "/ to focus",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/settings.json b/app/javascript/dashboard/i18n/locale/zh_TW/settings.json
index 1e57f93e056d4..7451f90d73e53 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/settings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/settings.json
@@ -239,6 +239,7 @@
     "REPORTS": "報表",
     "SETTINGS": "設定",
     "CONTACTS": "聯絡人",
+    "CAPTAIN": "Captain",
     "HOME": "首頁",
     "AGENTS": "客服",
     "AGENT_BOTS": "機器人",
@@ -278,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "總覽",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/teamsSettings.json b/app/javascript/dashboard/i18n/locale/zh_TW/teamsSettings.json
index 5718a3a0ff869..0fa31f99a7994 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/teamsSettings.json
@@ -2,10 +2,13 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "建立新團隊",
     "HEADER": "團隊",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
-      "EDIT_TEAM": "編輯團隊"
+      "EDIT_TEAM": "編輯團隊",
+      "NONE": "無"
     },
     "CREATE_FLOW": {
       "CREATE": {
@@ -97,7 +100,7 @@
         "ERROR_MESSAGE": "無法刪除團隊，請再試一次"
       },
       "CONFIRM": {
-        "TITLE": "確定要刪除 - %{teamName} ？",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "請輸入 {teamName} 以確認",
         "MESSAGE": "刪除此團隊將會移除已指派給此團隊的對話指派對象",
         "YES": "刪除 ",
diff --git a/app/javascript/dashboard/mixins/account.js b/app/javascript/dashboard/mixins/account.js
deleted file mode 100644
index 9e4a6e605a1d0..0000000000000
--- a/app/javascript/dashboard/mixins/account.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-  },
-  methods: {
-    addAccountScoping(url) {
-      return `/app/accounts/${this.accountId}/${url}`;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/aiMixin.js b/app/javascript/dashboard/mixins/aiMixin.js
index 54bde3ffb6c16..a775b2ecd821f 100644
--- a/app/javascript/dashboard/mixins/aiMixin.js
+++ b/app/javascript/dashboard/mixins/aiMixin.js
@@ -1,10 +1,9 @@
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import { OPEN_AI_EVENTS } from '../helper/AnalyticsHelper/events';
 import OpenAPI from '../api/integrations/openapi';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
-  mixins: [alertMixin],
   mounted() {
     this.fetchIntegrationsIfRequired();
   },
@@ -101,7 +100,7 @@ export default {
         } = result;
         return generatedMessage;
       } catch (error) {
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
+        useAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
         return '';
       }
     },
diff --git a/app/javascript/dashboard/mixins/attributeMixin.js b/app/javascript/dashboard/mixins/attributeMixin.js
deleted file mode 100644
index 5bc05a4ae589d..0000000000000
--- a/app/javascript/dashboard/mixins/attributeMixin.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { mapGetters } from 'vuex';
-import { isValidURL } from '../helper/URLHelper';
-export default {
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      accountId: 'getCurrentAccountId',
-    }),
-    attributes() {
-      return this.$store.getters['attributes/getAttributesByModel'](
-        this.attributeType
-      );
-    },
-    customAttributes() {
-      if (this.attributeType === 'conversation_attribute')
-        return this.currentChat.custom_attributes || {};
-      return this.contact.custom_attributes || {};
-    },
-    contactIdentifier() {
-      return (
-        this.currentChat.meta?.sender?.id ||
-        this.$route.params.contactId ||
-        this.contactId
-      );
-    },
-    contact() {
-      return this.$store.getters['contacts/getContact'](this.contactIdentifier);
-    },
-    conversationId() {
-      return this.currentChat.id;
-    },
-  },
-  methods: {
-    isAttributeNumber(attributeValue) {
-      return (
-        Number.isInteger(Number(attributeValue)) && Number(attributeValue) > 0
-      );
-    },
-    attributeDisplayType(attributeValue) {
-      if (this.isAttributeNumber(attributeValue)) {
-        return 'number';
-      }
-      if (isValidURL(attributeValue)) {
-        return 'link';
-      }
-      return 'text';
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/automations/methodsMixin.js b/app/javascript/dashboard/mixins/automations/methodsMixin.js
index a7e8d81204593..1e9863283e668 100644
--- a/app/javascript/dashboard/mixins/automations/methodsMixin.js
+++ b/app/javascript/dashboard/mixins/automations/methodsMixin.js
@@ -1,5 +1,7 @@
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
+import { validateAutomation } from 'dashboard/helper/validations';
+
 import {
   generateCustomAttributeTypes,
   getActionOptions,
@@ -17,6 +19,7 @@ import {
   generateCustomAttributes,
 } from 'dashboard/helper/automationHelper';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 
 export default {
   computed: {
@@ -138,23 +141,26 @@ export default {
     },
     removeFilter(index) {
       if (this.automation.conditions.length <= 1) {
-        this.showAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
       } else {
         this.automation.conditions.splice(index, 1);
       }
     },
     removeAction(index) {
       if (this.automation.actions.length <= 1) {
-        this.showAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
       } else {
         this.automation.actions.splice(index, 1);
       }
     },
     submitAutomation() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      const automation = generateAutomationPayload(this.automation);
-      this.$emit('saveAutomation', automation, this.mode);
+      // we assign it to this.errors so that it can be accessed in the template
+      // it is supposed to be declared in the data function
+      this.errors = validateAutomation(this.automation);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
     },
     resetFilter(index, currentCondition) {
       this.automation.conditions[index].filter_operator = this.automationTypes[
diff --git a/app/javascript/dashboard/mixins/automations/validationsMixin.js b/app/javascript/dashboard/mixins/automations/validationsMixin.js
deleted file mode 100644
index 68705d2fd5b1d..0000000000000
--- a/app/javascript/dashboard/mixins/automations/validationsMixin.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { required, requiredIf } from 'vuelidate/lib/validators';
-
-export default {
-  validations: {
-    automation: {
-      name: {
-        required,
-      },
-      description: {
-        required,
-      },
-      event_name: {
-        required,
-      },
-      conditions: {
-        required,
-        $each: {
-          values: {
-            required: requiredIf(prop => {
-              return !(
-                prop.filter_operator === 'is_present' ||
-                prop.filter_operator === 'is_not_present'
-              );
-            }),
-          },
-        },
-      },
-      actions: {
-        required,
-        $each: {
-          action_params: {
-            required: requiredIf(prop => {
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation'
-              );
-            }),
-          },
-        },
-      },
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/bulkActionsMixin.js b/app/javascript/dashboard/mixins/bulkActionsMixin.js
deleted file mode 100644
index 129fc79134251..0000000000000
--- a/app/javascript/dashboard/mixins/bulkActionsMixin.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  props: {
-    trianglePosition: {
-      type: String,
-      default: '0',
-    },
-  },
-  computed: {
-    cssVars() {
-      return {
-        '--triangle-position': this.trianglePosition + 'rem',
-      };
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/conversation/labelMixin.js b/app/javascript/dashboard/mixins/conversation/labelMixin.js
deleted file mode 100644
index 6c9e954b6506b..0000000000000
--- a/app/javascript/dashboard/mixins/conversation/labelMixin.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({ accountLabels: 'labels/getLabels' }),
-    savedLabels() {
-      // If conversationLabels is passed as prop, use it
-      if (this.conversationLabels)
-        return this.conversationLabels.split(',').map(item => item.trim());
-      // Otherwise, get labels from store
-      return this.$store.getters['conversationLabels/getConversationLabels'](
-        this.conversationId
-      );
-    },
-    // TODO - Get rid of this from the mixin
-    activeLabels() {
-      return this.accountLabels.filter(({ title }) =>
-        this.savedLabels.includes(title)
-      );
-    },
-    inactiveLabels() {
-      return this.accountLabels.filter(
-        ({ title }) => !this.savedLabels.includes(title)
-      );
-    },
-  },
-  methods: {
-    addLabelToConversation(value) {
-      const result = this.activeLabels.map(item => item.title);
-      result.push(value.title);
-      this.onUpdateLabels(result);
-    },
-    removeLabelFromConversation(value) {
-      const result = this.activeLabels
-        .map(label => label.title)
-        .filter(label => label !== value);
-      this.onUpdateLabels(result);
-    },
-    async onUpdateLabels(selectedLabels) {
-      this.$store.dispatch('conversationLabels/update', {
-        conversationId: this.conversationId,
-        labels: selectedLabels,
-      });
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/conversation/teamMixin.js b/app/javascript/dashboard/mixins/conversation/teamMixin.js
deleted file mode 100644
index 745f91589bf7c..0000000000000
--- a/app/javascript/dashboard/mixins/conversation/teamMixin.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({ teams: 'teams/getTeams' }),
-    hasAnAssignedTeam() {
-      return !!this.currentChat?.meta?.team;
-    },
-    teamsList() {
-      if (this.hasAnAssignedTeam) {
-        return [
-          {
-            id: 0,
-            name: 'None',
-          },
-          ...this.teams,
-        ];
-      }
-      return this.teams;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/conversations.js b/app/javascript/dashboard/mixins/conversations.js
deleted file mode 100644
index d864bc0200124..0000000000000
--- a/app/javascript/dashboard/mixins/conversations.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const getLastNonActivityMessage = (messageInStore, messageFromAPI) => {
-  // If both API value and store value for last non activity message
-  // are available, then return the latest one.
-  if (messageInStore && messageFromAPI) {
-    if (messageInStore.created_at >= messageFromAPI.created_at) {
-      return messageInStore;
-    }
-    return messageFromAPI;
-  }
-
-  // Otherwise, return whichever is available
-  return messageInStore || messageFromAPI;
-};
-
-export const filterDuplicateSourceMessages = (messages = []) => {
-  const messagesWithoutDuplicates = [];
-  // We cannot use Map or any short hand method as it returns the last message with the duplicate ID
-  // We should return the message with smaller id when there is a duplicate
-  messages.forEach(m1 => {
-    if (m1.source_id) {
-      if (
-        messagesWithoutDuplicates.findIndex(
-          m2 => m1.source_id === m2.source_id
-        ) < 0
-      ) {
-        messagesWithoutDuplicates.push(m1);
-      }
-    } else {
-      messagesWithoutDuplicates.push(m1);
-    }
-  });
-  return messagesWithoutDuplicates;
-};
-
-export default {
-  methods: {
-    lastMessage(m) {
-      let lastMessageIncludingActivity = m.messages.last();
-
-      const nonActivityMessages = m.messages.filter(
-        message => message.message_type !== 2
-      );
-      let lastNonActivityMessageInStore = nonActivityMessages.last();
-      let lastNonActivityMessageFromAPI = m.last_non_activity_message;
-
-      // If API value and store value for last non activity message
-      // is empty, then return the last activity message
-      if (!lastNonActivityMessageInStore && !lastNonActivityMessageFromAPI) {
-        return lastMessageIncludingActivity;
-      }
-
-      return getLastNonActivityMessage(
-        lastNonActivityMessageInStore,
-        lastNonActivityMessageFromAPI
-      );
-    },
-    readMessages(messages, agentLastSeenAt) {
-      return messages.filter(
-        message => message.created_at * 1000 <= agentLastSeenAt * 1000
-      );
-    },
-    unReadMessages(messages, agentLastSeenAt) {
-      return messages.filter(
-        message => message.created_at * 1000 > agentLastSeenAt * 1000
-      );
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/customAttributeMixin.js b/app/javascript/dashboard/mixins/customAttributeMixin.js
deleted file mode 100644
index a0617685d15b4..0000000000000
--- a/app/javascript/dashboard/mixins/customAttributeMixin.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  methods: {
-    getRegexp(regexPatternValue) {
-      let lastSlash = regexPatternValue.lastIndexOf('/');
-      return new RegExp(
-        regexPatternValue.slice(1, lastSlash),
-        regexPatternValue.slice(lastSlash + 1)
-      );
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/fileUploadMixin.js b/app/javascript/dashboard/mixins/fileUploadMixin.js
index 0f221c209e456..b5313f27c6203 100644
--- a/app/javascript/dashboard/mixins/fileUploadMixin.js
+++ b/app/javascript/dashboard/mixins/fileUploadMixin.js
@@ -1,3 +1,5 @@
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import {
   MAXIMUM_FILE_UPLOAD_SIZE,
   MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
@@ -6,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) {
@@ -38,13 +45,13 @@ export default {
 
         upload.create((error, blob) => {
           if (error) {
-            this.showAlert(error);
+            useAlert(error);
           } else {
             this.attachFile({ file, blob });
           }
         });
       } else {
-        this.showAlert(
+        useAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
             MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
           })
@@ -61,7 +68,7 @@ export default {
       if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
         this.attachFile({ file });
       } else {
-        this.showAlert(
+        useAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
             MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
           })
diff --git a/app/javascript/dashboard/mixins/isAdmin.js b/app/javascript/dashboard/mixins/isAdmin.js
deleted file mode 100644
index 996631916b3fe..0000000000000
--- a/app/javascript/dashboard/mixins/isAdmin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      currentUserRole: 'getCurrentRole',
-    }),
-    isAdmin() {
-      return this.currentUserRole === 'administrator';
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/macrosMixin.js b/app/javascript/dashboard/mixins/macrosMixin.js
deleted file mode 100644
index fc595d5fea8bb..0000000000000
--- a/app/javascript/dashboard/mixins/macrosMixin.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
-export default {
-  methods: {
-    getDropdownValues(type) {
-      switch (type) {
-        case 'assign_team':
-        case 'send_email_to_team':
-          return this.teams;
-        case 'assign_agent':
-          return [{ id: 'self', name: 'Self' }, ...this.agents];
-        case 'add_label':
-        case 'remove_label':
-          return this.labels.map(i => {
-            return {
-              id: i.title,
-              name: i.title,
-            };
-          });
-        case 'change_priority':
-          return PRIORITY_CONDITION_VALUES;
-        default:
-          return [];
-      }
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/specs/account.spec.js b/app/javascript/dashboard/mixins/specs/account.spec.js
deleted file mode 100644
index c918ae774c396..0000000000000
--- a/app/javascript/dashboard/mixins/specs/account.spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import accountMixin from '../account';
-import Vuex from 'vuex';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('accountMixin', () => {
-  let getters;
-  let store;
-
-  beforeEach(() => {
-    getters = {
-      getCurrentAccountId: () => 1,
-    };
-
-    store = new Vuex.Store({ getters });
-  });
-
-  it('set accountId properly', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [accountMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.accountId).toBe(1);
-  });
-
-  it('returns current url', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [accountMixin],
-    };
-
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.addAccountScoping('settings/inboxes/new')).toBe(
-      '/app/accounts/1/settings/inboxes/new'
-    );
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
deleted file mode 100644
index 2484cad4b8ec4..0000000000000
--- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import attributeMixin from '../attributeMixin';
-import Vuex from 'vuex';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('attributeMixin', () => {
-  let getters;
-  let actions;
-  let store;
-
-  beforeEach(() => {
-    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
-    getters = {
-      getSelectedChat: () => ({
-        id: 7165,
-        custom_attributes: {
-          product_id: 2021,
-        },
-        meta: {
-          sender: {
-            id: 1212,
-          },
-        },
-      }),
-      getCurrentAccountId: () => 1,
-      attributeType: () => 'conversation_attribute',
-    };
-    store = new Vuex.Store({ actions, getters });
-  });
-
-  it('returns currently selected conversation id', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.conversationId).toEqual(7165);
-  });
-
-  it('return display type if attribute passed', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.attributeDisplayType('date')).toBe('text');
-    expect(
-      wrapper.vm.attributeDisplayType('https://www.chatwoot.com/pricing')
-    ).toBe('link');
-    expect(wrapper.vm.attributeDisplayType(9988)).toBe('number');
-  });
-
-  it('return true if number is passed', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.isAttributeNumber(9988)).toBe(true);
-  });
-
-  it('returns currently selected contact', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              product_id: 2021,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.contact).toEqual({
-      id: 7165,
-      custom_attributes: {
-        product_id: 2021,
-      },
-    });
-  });
-
-  it('returns currently selected contact id', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.contactIdentifier).toEqual(1212);
-  });
-
-  it('returns currently selected conversation custom attributes', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              product_id: 2021,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.customAttributes).toEqual({
-      product_id: 2021,
-    });
-  });
-
-  it('returns currently selected contact custom attributes', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              cloudCustomer: true,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.customAttributes).toEqual({
-      cloudCustomer: true,
-    });
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/bulkActions.spec.js b/app/javascript/dashboard/mixins/specs/bulkActions.spec.js
deleted file mode 100644
index c6f096dae0e4b..0000000000000
--- a/app/javascript/dashboard/mixins/specs/bulkActions.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils';
-import bulkActionsMixin from '../bulkActionsMixin';
-describe('bulkActionsMixin', () => {
-  it('returns the prop and computed values for triangle position:', async () => {
-    const Component = {
-      render() {},
-      title: 'MyComponent',
-      mixins: [bulkActionsMixin],
-    };
-    const wrapper = mount(Component);
-    await wrapper.setProps({
-      trianglePosition: '10',
-    });
-    expect(wrapper.props().trianglePosition).toEqual('10');
-    expect(wrapper.vm.cssVars).toEqual({
-      '--triangle-position': '10rem',
-    });
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/conversation.spec.js b/app/javascript/dashboard/mixins/specs/conversation.spec.js
deleted file mode 100644
index 9db7f8c28c013..0000000000000
--- a/app/javascript/dashboard/mixins/specs/conversation.spec.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import conversationMixin, {
-  filterDuplicateSourceMessages,
-} from '../conversations';
-import conversationFixture from './conversationFixtures';
-import commonHelpers from '../../helper/commons';
-commonHelpers();
-
-describe('#filterDuplicateSourceMessages', () => {
-  it('returns messages without duplicate source_id and all messages without source_id', () => {
-    expect(
-      filterDuplicateSourceMessages([
-        { source_id: null, id: 1 },
-        { source_id: '', id: 2 },
-        { id: 3 },
-        { source_id: 'wa_1', id: 4 },
-        { source_id: 'wa_1', id: 5 },
-        { source_id: 'wa_1', id: 6 },
-        { source_id: 'wa_2', id: 7 },
-        { source_id: 'wa_2', id: 8 },
-        { source_id: 'wa_3', id: 9 },
-      ])
-    ).toEqual([
-      { source_id: null, id: 1 },
-      { source_id: '', id: 2 },
-      { id: 3 },
-      { source_id: 'wa_1', id: 4 },
-      { source_id: 'wa_2', id: 7 },
-      { source_id: 'wa_3', id: 9 },
-    ]);
-  });
-});
-
-describe('#conversationMixin', () => {
-  it('should return read messages if conversation is passed', () => {
-    expect(
-      conversationMixin.methods.readMessages(
-        conversationFixture.conversation.messages,
-        conversationFixture.conversation.agent_last_seen_at
-      )
-    ).toEqual(conversationFixture.readMessages);
-  });
-  it('should return read messages if conversation is passed', () => {
-    expect(
-      conversationMixin.methods.unReadMessages(
-        conversationFixture.conversation.messages,
-        conversationFixture.conversation.agent_last_seen_at
-      )
-    ).toEqual(conversationFixture.unReadMessages);
-  });
-
-  describe('#lastMessage', () => {
-    it("should return last activity message if both api and store doesn't have other messages", () => {
-      const conversation = {
-        messages: [
-          { id: 1, created_at: 1654333, message_type: 2, content: 'Hey' },
-        ],
-        last_non_activity_message: null,
-      };
-      const { messages } = conversation;
-      expect(conversationMixin.methods.lastMessage(conversation)).toEqual(
-        messages[messages.length - 1]
-      );
-    });
-
-    it('should return message from store if store has latest message', () => {
-      const conversation = {
-        messages: [],
-        last_non_activity_message: {
-          id: 2,
-          created_at: 1654334,
-          message_type: 2,
-          content: 'Hey',
-        },
-      };
-      expect(conversationMixin.methods.lastMessage(conversation)).toEqual(
-        conversation.last_non_activity_message
-      );
-    });
-
-    it('should return last non activity message from store if api value is empty', () => {
-      const conversation = {
-        messages: [
-          {
-            id: 1,
-            created_at: 1654333,
-            message_type: 1,
-            content: 'Outgoing Message',
-          },
-          { id: 2, created_at: 1654334, message_type: 2, content: 'Hey' },
-        ],
-        last_non_activity_message: null,
-      };
-      expect(conversationMixin.methods.lastMessage(conversation)).toEqual(
-        conversation.messages[0]
-      );
-    });
-
-    it("should return last non activity message from store if store doesn't have any messages", () => {
-      const conversation = {
-        messages: [
-          {
-            id: 1,
-            created_at: 1654333,
-            message_type: 1,
-            content: 'Outgoing Message',
-          },
-          {
-            id: 3,
-            created_at: 1654335,
-            message_type: 0,
-            content: 'Incoming Message',
-          },
-        ],
-        last_non_activity_message: {
-          id: 2,
-          created_at: 1654334,
-          message_type: 2,
-          content: 'Hey',
-        },
-      };
-      expect(conversationMixin.methods.lastMessage(conversation)).toEqual(
-        conversation.messages[1]
-      );
-    });
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/conversationFixtures.js b/app/javascript/dashboard/mixins/specs/conversationFixtures.js
deleted file mode 100644
index 3602ef95d6343..0000000000000
--- a/app/javascript/dashboard/mixins/specs/conversationFixtures.js
+++ /dev/null
@@ -1,185 +0,0 @@
-export default {
-  conversation: {
-    meta: {
-      sender: {
-        additional_attributes: {
-          created_at_ip: '127.0.0.1',
-        },
-        availability_status: 'offline',
-        email: null,
-        id: 5017687,
-        name: 'long-flower-143',
-        phone_number: null,
-        thumbnail: '',
-        custom_attributes: {},
-      },
-      channel: 'Channel::WebWidget',
-      assignee: {
-        account_id: 1,
-        availability_status: 'offline',
-        confirmed: true,
-        email: 'muhsin@chatwoot.com',
-        available_name: 'Muhsin Keloth',
-        id: 21,
-        name: 'Muhsin Keloth',
-        role: 'administrator',
-        thumbnail:
-          'http://0.0.0.0:3000/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBEQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7b95641540fadebc733ec9b42117d00bc09600be/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9MY21WemFYcGxTU0lNTWpVd2VESTFNQVk2QmtWVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--c13bd5229b2a2a692444606e22f76ad61c634661/me.jpg',
-      },
-    },
-    id: 5815,
-    messages: [
-      {
-        id: 438072,
-        content: 'Campaign after 5 seconds',
-        account_id: 1,
-        inbox_id: 37,
-        conversation_id: 5811,
-        message_type: 1,
-        created_at: 1620980262,
-        updated_at: '2021-05-14T08:17:42.041Z',
-        private: false,
-        status: 'sent',
-        source_id: null,
-        content_type: null,
-        content_attributes: {},
-        sender_type: 'User',
-        sender_id: 1,
-        external_source_ids: {},
-      },
-      {
-        id: 4382131101,
-        content: 'Hello',
-        account_id: 1,
-        inbox_id: 37,
-        conversation_id: 5815,
-        message_type: 0,
-        created_at: 1621145476,
-        updated_at: '2021-05-16T05:48:43.910Z',
-        private: false,
-        status: 'sent',
-        source_id: null,
-        content_type: 'text',
-        content_attributes: {},
-        sender_type: null,
-        sender_id: null,
-        external_source_ids: {},
-      },
-      {
-        id: 438100,
-        content: 'Hey',
-        account_id: 1,
-        inbox_id: 37,
-        conversation_id: 5815,
-        message_type: 0,
-        created_at: 1621145476,
-        updated_at: '2021-05-16T05:48:43.910Z',
-        private: false,
-        status: 'sent',
-        source_id: null,
-        content_type: 'text',
-        content_attributes: {},
-        sender_type: null,
-        sender_id: null,
-        external_source_ids: {},
-      },
-    ],
-    inbox_id: 37,
-    status: 'open',
-    muted: false,
-    can_reply: true,
-    timestamp: 1621144123,
-    contact_last_seen_at: 0,
-    agent_last_seen_at: 1621144123,
-    unread_count: 0,
-    additional_attributes: {
-      browser: {
-        device_name: 'Unknown',
-        browser_name: 'Chrome',
-        platform_name: 'macOS',
-        browser_version: '90.0.4430.212',
-        platform_version: '10.15.7',
-      },
-      widget_language: null,
-      browser_language: 'en',
-    },
-    account_id: 1,
-    labels: [],
-  },
-  lastMessage: {
-    id: 438100,
-    content: 'Hey',
-    account_id: 1,
-    inbox_id: 37,
-    conversation_id: 5815,
-    message_type: 0,
-    created_at: 1621145476,
-    updated_at: '2021-05-16T05:48:43.910Z',
-    private: false,
-    status: 'sent',
-    source_id: null,
-    content_type: 'text',
-    content_attributes: {},
-    sender_type: null,
-    sender_id: null,
-    external_source_ids: {},
-  },
-  readMessages: [
-    {
-      id: 438072,
-      content: 'Campaign after 5 seconds',
-      account_id: 1,
-      inbox_id: 37,
-      conversation_id: 5811,
-      message_type: 1,
-      created_at: 1620980262,
-      updated_at: '2021-05-14T08:17:42.041Z',
-      private: false,
-      status: 'sent',
-      source_id: null,
-      content_type: null,
-      content_attributes: {},
-      sender_type: 'User',
-      sender_id: 1,
-      external_source_ids: {},
-    },
-  ],
-  unReadMessages: [
-    {
-      id: 4382131101,
-      content: 'Hello',
-      account_id: 1,
-      inbox_id: 37,
-      conversation_id: 5815,
-      message_type: 0,
-      created_at: 1621145476,
-      updated_at: '2021-05-16T05:48:43.910Z',
-      private: false,
-      status: 'sent',
-      source_id: null,
-      content_type: 'text',
-      content_attributes: {},
-      sender_type: null,
-      sender_id: null,
-      external_source_ids: {},
-    },
-    {
-      id: 438100,
-      content: 'Hey',
-      account_id: 1,
-      inbox_id: 37,
-      conversation_id: 5815,
-      message_type: 0,
-      created_at: 1621145476,
-      updated_at: '2021-05-16T05:48:43.910Z',
-      private: false,
-      status: 'sent',
-      source_id: null,
-      content_type: 'text',
-      content_attributes: {},
-      sender_type: null,
-      sender_id: null,
-      external_source_ids: {},
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js b/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js
index e7aa61eaf32ac..a3bd6c4941ece 100644
--- a/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js
+++ b/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js
@@ -1,5 +1,6 @@
-import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import Vue from 'vue';
+import { useAlert } from 'dashboard/composables';
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 
 vi.mock('shared/helpers/FileHelper', () => ({
   checkFileSizeLimit: vi.fn(),
@@ -11,6 +12,10 @@ vi.mock('activestorage', () => ({
   })),
 }));
 
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(),
+}));
+
 describe('FileUploadMixin', () => {
   let vm;
 
@@ -53,9 +58,8 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = vi.fn();
       vm.onDirectFileUpload(fakeFile);
-      expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
+      expect(useAlert).toHaveBeenCalledWith(expect.any(String));
     });
   });
 
@@ -67,9 +71,8 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = vi.fn();
       vm.onIndirectFileUpload(fakeFile);
-      expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
+      expect(useAlert).toHaveBeenCalledWith(expect.any(String));
     });
   });
 });
diff --git a/app/javascript/dashboard/mixins/specs/isAdmin.spec.js b/app/javascript/dashboard/mixins/specs/isAdmin.spec.js
deleted file mode 100644
index 50fd63d8f3954..0000000000000
--- a/app/javascript/dashboard/mixins/specs/isAdmin.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import isAdminMixin from '../isAdmin';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('isAdminMixin', () => {
-  let getters;
-  let store;
-
-  beforeEach(() => {
-    getters = {
-      getCurrentRole: () => 'administrator',
-    };
-
-    store = new Vuex.Store({ getters });
-  });
-  it('set accountId properly', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [isAdminMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.isAdmin).toBe(true);
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/macros.spec.js b/app/javascript/dashboard/mixins/specs/macros.spec.js
deleted file mode 100644
index a8b3ee2b18635..0000000000000
--- a/app/javascript/dashboard/mixins/specs/macros.spec.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { createWrapper } from '@vue/test-utils';
-import macrosMixin from '../macrosMixin';
-import Vue from 'vue';
-import { teams, labels, agents } from '../../helper/specs/macrosFixtures';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
-describe('webhookMixin', () => {
-  describe('#getEventLabel', () => {
-    it('returns correct i18n translation:', () => {
-      const Component = {
-        render() {},
-        title: 'MyComponent',
-        mixins: [macrosMixin],
-        data: () => {
-          return {
-            teams,
-            labels,
-            agents,
-          };
-        },
-        methods: {
-          $t(text) {
-            return text;
-          },
-        },
-      };
-
-      const resolvedLabels = labels.map(i => {
-        return {
-          id: i.title,
-          name: i.title,
-        };
-      });
-
-      const Constructor = Vue.extend(Component);
-      const vm = new Constructor().$mount();
-      const wrapper = createWrapper(vm);
-      expect(wrapper.vm.getDropdownValues('assign_team')).toEqual(teams);
-      expect(wrapper.vm.getDropdownValues('send_email_to_team')).toEqual(teams);
-      expect(wrapper.vm.getDropdownValues('add_label')).toEqual(resolvedLabels);
-      expect(wrapper.vm.getDropdownValues('assign_agent')).toEqual([
-        { id: 'self', name: 'Self' },
-        ...agents,
-      ]);
-      expect(wrapper.vm.getDropdownValues('change_priority')).toEqual(
-        PRIORITY_CONDITION_VALUES
-      );
-      expect(wrapper.vm.getDropdownValues()).toEqual([]);
-    });
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/time.spec.js b/app/javascript/dashboard/mixins/specs/time.spec.js
deleted file mode 100644
index 4bc970ac908b2..0000000000000
--- a/app/javascript/dashboard/mixins/specs/time.spec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import TimeMixin from '../time';
-
-describe('#messageStamp', () => {
-  it('returns correct value', () => {
-    expect(TimeMixin.methods.messageStamp(1612971343)).toEqual('3:35 PM');
-    expect(TimeMixin.methods.messageStamp(1612971343, 'LLL d, h:mm a')).toEqual(
-      'Feb 10, 3:35 PM'
-    );
-  });
-});
-
-describe('#messageTimestamp', () => {
-  beforeEach(() => {
-    vi.useFakeTimers('modern');
-
-    const mockDate = new Date(2023, 4, 5);
-    vi.setSystemTime(mockDate);
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should return the message date in the specified format if the message was sent in the current year', () => {
-    expect(TimeMixin.methods.messageTimestamp(1680777464)).toEqual(
-      'Apr 6, 2023'
-    );
-  });
-  it('should return the message date and time in a different format if the message was sent in a different year', () => {
-    expect(TimeMixin.methods.messageTimestamp(1612971343)).toEqual(
-      'Feb 10 2021, 3:35 PM'
-    );
-  });
-});
-
-describe('#dynamicTime', () => {
-  it('returns correct value', () => {
-    Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
-    expect(TimeMixin.methods.dynamicTime(1612971343)).toEqual(
-      'about 2 years ago'
-    );
-  });
-});
-
-describe('#dateFormat', () => {
-  it('returns correct value', () => {
-    expect(TimeMixin.methods.dateFormat(1612971343)).toEqual('Feb 10, 2021');
-    expect(TimeMixin.methods.dateFormat(1612971343, 'LLL d, yyyy')).toEqual(
-      'Feb 10, 2021'
-    );
-  });
-});
-
-describe('#shortTimestamp', () => {
-  // Test cases when withAgo is false or not provided
-  it('returns correct value without ago', () => {
-    expect(TimeMixin.methods.shortTimestamp('less than a minute ago')).toEqual(
-      'now'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 minute ago')).toEqual('1m');
-    expect(TimeMixin.methods.shortTimestamp('12 minutes ago')).toEqual('12m');
-    expect(TimeMixin.methods.shortTimestamp('a minute ago')).toEqual('1m');
-    expect(TimeMixin.methods.shortTimestamp('an hour ago')).toEqual('1h');
-    expect(TimeMixin.methods.shortTimestamp('1 hour ago')).toEqual('1h');
-    expect(TimeMixin.methods.shortTimestamp('2 hours ago')).toEqual('2h');
-    expect(TimeMixin.methods.shortTimestamp('1 day ago')).toEqual('1d');
-    expect(TimeMixin.methods.shortTimestamp('a day ago')).toEqual('1d');
-    expect(TimeMixin.methods.shortTimestamp('3 days ago')).toEqual('3d');
-    expect(TimeMixin.methods.shortTimestamp('a month ago')).toEqual('1mo');
-    expect(TimeMixin.methods.shortTimestamp('1 month ago')).toEqual('1mo');
-    expect(TimeMixin.methods.shortTimestamp('2 months ago')).toEqual('2mo');
-    expect(TimeMixin.methods.shortTimestamp('a year ago')).toEqual('1y');
-    expect(TimeMixin.methods.shortTimestamp('1 year ago')).toEqual('1y');
-    expect(TimeMixin.methods.shortTimestamp('4 years ago')).toEqual('4y');
-  });
-
-  // Test cases when withAgo is true
-  it('returns correct value with ago', () => {
-    expect(
-      TimeMixin.methods.shortTimestamp('less than a minute ago', true)
-    ).toEqual('now');
-    expect(TimeMixin.methods.shortTimestamp('1 minute ago', true)).toEqual(
-      '1m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('12 minutes ago', true)).toEqual(
-      '12m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a minute ago', true)).toEqual(
-      '1m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('an hour ago', true)).toEqual(
-      '1h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 hour ago', true)).toEqual(
-      '1h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('2 hours ago', true)).toEqual(
-      '2h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 day ago', true)).toEqual(
-      '1d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a day ago', true)).toEqual(
-      '1d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('3 days ago', true)).toEqual(
-      '3d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a month ago', true)).toEqual(
-      '1mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 month ago', true)).toEqual(
-      '1mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('2 months ago', true)).toEqual(
-      '2mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a year ago', true)).toEqual(
-      '1y ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 year ago', true)).toEqual(
-      '1y ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('4 years ago', true)).toEqual(
-      '4y ago'
-    );
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/uiSettings.spec.js b/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
deleted file mode 100644
index b8da9ca56115b..0000000000000
--- a/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import uiSettingsMixin, {
-  DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-  DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-  isEditorHotKeyEnabled,
-} from '../uiSettings';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('uiSettingsMixin', () => {
-  let getters;
-  let actions;
-  let store;
-
-  beforeEach(() => {
-    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
-    getters = {
-      getUISettings: () => ({
-        enter_to_send_enabled: false,
-        is_ct_labels_open: true,
-        conversation_sidebar_items_order:
-          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-      }),
-    };
-    store = new Vuex.Store({ actions, getters });
-  });
-
-  it('returns uiSettings', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [uiSettingsMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.uiSettings).toEqual({
-      enter_to_send_enabled: false,
-      is_ct_labels_open: true,
-      conversation_sidebar_items_order:
-        DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-      contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-    });
-  });
-
-  describe('#updateUISettings', () => {
-    it('dispatches store actions correctly', () => {
-      const Component = {
-        render() {},
-        title: 'TestComponent',
-        mixins: [uiSettingsMixin],
-      };
-      const wrapper = shallowMount(Component, { store, localVue });
-      wrapper.vm.updateUISettings({ enter_to_send_enabled: true });
-      expect(actions.updateUISettings).toHaveBeenCalledWith(
-        expect.anything(),
-        {
-          uiSettings: {
-            enter_to_send_enabled: true,
-            is_ct_labels_open: true,
-            conversation_sidebar_items_order:
-              DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-            contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-          },
-        },
-        undefined
-      );
-    });
-  });
-
-  describe('#toggleSidebarUIState', () => {
-    it('dispatches store actions correctly', () => {
-      const Component = {
-        render() {},
-        title: 'TestComponent',
-        mixins: [uiSettingsMixin],
-      };
-      const wrapper = shallowMount(Component, { store, localVue });
-      wrapper.vm.toggleSidebarUIState('is_ct_labels_open');
-      expect(actions.updateUISettings).toHaveBeenCalledWith(
-        expect.anything(),
-        {
-          uiSettings: {
-            enter_to_send_enabled: false,
-            is_ct_labels_open: false,
-            conversation_sidebar_items_order:
-              DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-            contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-          },
-        },
-        undefined
-      );
-    });
-  });
-
-  describe('#isContactSidebarItemOpen', () => {
-    it('returns correct values', () => {
-      const Component = {
-        render() {},
-        title: 'TestComponent',
-        mixins: [uiSettingsMixin],
-      };
-      const wrapper = shallowMount(Component, { store, localVue });
-      expect(wrapper.vm.isContactSidebarItemOpen('is_ct_labels_open')).toEqual(
-        true
-      );
-      expect(
-        wrapper.vm.isContactSidebarItemOpen('is_ct_prev_conv_open')
-      ).toEqual(false);
-    });
-  });
-
-  describe('#conversationSidebarItemsOrder', () => {
-    it('returns correct values', () => {
-      const Component = {
-        render() {},
-        title: 'TestComponent',
-        mixins: [uiSettingsMixin],
-      };
-      const wrapper = shallowMount(Component, { store, localVue });
-      expect(wrapper.vm.conversationSidebarItemsOrder).toEqual([
-        { name: 'conversation_actions' },
-        { name: 'macros' },
-        { name: 'conversation_info' },
-        { name: 'contact_attributes' },
-        { name: 'previous_conversation' },
-        { name: 'conversation_participants' },
-      ]);
-    });
-  });
-  describe('#contactSidebarItemsOrder', () => {
-    it('returns correct values', () => {
-      const Component = {
-        render() {},
-        title: 'TestComponent',
-        mixins: [uiSettingsMixin],
-      };
-      const wrapper = shallowMount(Component, { store, localVue });
-      expect(wrapper.vm.contactSidebarItemsOrder).toEqual([
-        { name: 'contact_attributes' },
-        { name: 'contact_labels' },
-        { name: 'previous_conversation' },
-      ]);
-    });
-  });
-});
-
-describe('isEditorHotKeyEnabled', () => {
-  it('returns true if hot key is not configured and enter to send flag is true', () => {
-    expect(
-      isEditorHotKeyEnabled({ enter_to_send_enabled: true }, 'enter')
-    ).toEqual(true);
-    expect(
-      isEditorHotKeyEnabled({ enter_to_send_enabled: true }, 'cmd_enter')
-    ).toEqual(false);
-
-    expect(isEditorHotKeyEnabled({}, 'cmd_enter')).toEqual(true);
-    expect(isEditorHotKeyEnabled({}, 'enter')).toEqual(false);
-  });
-
-  it('returns correct value if hot key is configured', () => {
-    expect(
-      isEditorHotKeyEnabled({ editor_message_key: 'enter' }, 'enter')
-    ).toEqual(true);
-    expect(
-      isEditorHotKeyEnabled({ editor_message_key: 'cmd_enter' }, 'enter')
-    ).toEqual(false);
-  });
-});
diff --git a/app/javascript/dashboard/mixins/time.js b/app/javascript/dashboard/mixins/time.js
deleted file mode 100644
index 35b4b5a375bc0..0000000000000
--- a/app/javascript/dashboard/mixins/time.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  format,
-  isSameYear,
-  fromUnixTime,
-  formatDistanceToNow,
-} from 'date-fns';
-
-export default {
-  methods: {
-    messageStamp(time, dateFormat = 'h:mm a') {
-      const unixTime = fromUnixTime(time);
-      return format(unixTime, dateFormat);
-    },
-    messageTimestamp(time, dateFormat = 'MMM d, yyyy') {
-      const messageTime = fromUnixTime(time);
-      const now = new Date();
-      const messageDate = format(messageTime, dateFormat);
-      if (!isSameYear(messageTime, now)) {
-        return format(messageTime, 'LLL d y, h:mm a');
-      }
-      return messageDate;
-    },
-    dynamicTime(time) {
-      const unixTime = fromUnixTime(time);
-      return formatDistanceToNow(unixTime, { addSuffix: true });
-    },
-    dateFormat(time, dateFormat = 'MMM d, yyyy') {
-      const unixTime = fromUnixTime(time);
-      return format(unixTime, dateFormat);
-    },
-    shortTimestamp(time, withAgo = false) {
-      // This function takes a time string and converts it to a short time string
-      // with the following format: 1m, 1h, 1d, 1mo, 1y
-      // The function also takes an optional boolean parameter withAgo
-      // which will add the word "ago" to the end of the time string
-      const suffix = withAgo ? ' ago' : '';
-      const timeMappings = {
-        'less than a minute ago': 'now',
-        'a minute ago': `1m${suffix}`,
-        'an hour ago': `1h${suffix}`,
-        'a day ago': `1d${suffix}`,
-        'a month ago': `1mo${suffix}`,
-        'a year ago': `1y${suffix}`,
-      };
-      // Check if the time string is one of the specific cases
-      if (timeMappings[time]) {
-        return timeMappings[time];
-      }
-      const convertToShortTime = time
-        .replace(/about|over|almost|/g, '')
-        .replace(' minute ago', `m${suffix}`)
-        .replace(' minutes ago', `m${suffix}`)
-        .replace(' hour ago', `h${suffix}`)
-        .replace(' hours ago', `h${suffix}`)
-        .replace(' day ago', `d${suffix}`)
-        .replace(' days ago', `d${suffix}`)
-        .replace(' month ago', `mo${suffix}`)
-        .replace(' months ago', `mo${suffix}`)
-        .replace(' year ago', `y${suffix}`)
-        .replace(' years ago', `y${suffix}`);
-      return convertToShortTime;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/uiSettings.js b/app/javascript/dashboard/mixins/uiSettings.js
deleted file mode 100644
index f3743c4021cff..0000000000000
--- a/app/javascript/dashboard/mixins/uiSettings.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = [
-  { name: 'conversation_actions' },
-  { name: 'macros' },
-  { name: 'conversation_info' },
-  { name: 'contact_attributes' },
-  { name: 'previous_conversation' },
-  { name: 'conversation_participants' },
-];
-export const DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER = [
-  { name: 'contact_attributes' },
-  { name: 'contact_labels' },
-  { name: 'previous_conversation' },
-];
-
-const slugifyChannel = name =>
-  name?.toLowerCase().replace(' ', '_').replace('-', '_').replace('::', '_');
-
-export const isEditorHotKeyEnabled = (uiSettings, key) => {
-  const {
-    editor_message_key: editorMessageKey,
-    enter_to_send_enabled: enterToSendEnabled,
-  } = uiSettings || {};
-  if (!editorMessageKey) {
-    if (enterToSendEnabled) {
-      return key === 'enter';
-    }
-    return key === 'cmd_enter';
-  }
-  return editorMessageKey === key;
-};
-
-export default {
-  computed: {
-    ...mapGetters({ uiSettings: 'getUISettings' }),
-    conversationSidebarItemsOrder() {
-      const { conversation_sidebar_items_order: itemsOrder } = this.uiSettings;
-      // If the sidebar order is not set, use the default order.
-      if (!itemsOrder) {
-        return DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
-      }
-      // If the sidebar order doesn't have the new elements, then add them to the list.
-      DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER.forEach(item => {
-        if (!itemsOrder.find(i => i.name === item.name)) {
-          itemsOrder.push(item);
-        }
-      });
-      return itemsOrder;
-    },
-    contactSidebarItemsOrder() {
-      const { contact_sidebar_items_order: itemsOrder } = this.uiSettings;
-      return itemsOrder || DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER;
-    },
-  },
-  methods: {
-    updateUISettings(uiSettings = {}) {
-      this.$store.dispatch('updateUISettings', {
-        uiSettings: {
-          ...this.uiSettings,
-          ...uiSettings,
-        },
-      });
-    },
-    isContactSidebarItemOpen(key) {
-      const { [key]: isOpen } = this.uiSettings;
-      return !!isOpen;
-    },
-    toggleSidebarUIState(key) {
-      this.updateUISettings({ [key]: !this.isContactSidebarItemOpen(key) });
-    },
-    setSignatureFlagForInbox(channelType, value) {
-      if (!channelType) return;
-
-      channelType = slugifyChannel(channelType);
-      this.updateUISettings({
-        [`${channelType}_signature_enabled`]: value,
-      });
-    },
-    fetchSignatureFlagFromUiSettings(channelType) {
-      if (!channelType) return false;
-
-      channelType = slugifyChannel(channelType);
-      return this.uiSettings[`${channelType}_signature_enabled`];
-    },
-  },
-};
diff --git a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
index b513cb1fda6ae..64e654b4c0b38 100644
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -1,25 +1,5 @@
-<!-- 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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
 
 import ContactAPI from 'dashboard/api/contacts';
@@ -29,7 +9,6 @@ import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 
 export default {
   components: { MergeContact },
-  mixins: [alertMixin],
   props: {
     primaryContact: {
       type: Object,
@@ -68,7 +47,7 @@ export default {
           contact => contact.id !== this.primaryContact.id
         );
       } catch (error) {
-        this.showAlert(this.$t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
+        useAlert(this.$t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
       } finally {
         this.isSearching = false;
       }
@@ -80,13 +59,32 @@ export default {
           childId: this.primaryContact.id,
           parentId: parentContactId,
         });
-        this.showAlert(this.$t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
+        useAlert(this.$t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        this.showAlert(this.$t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
+        useAlert(this.$t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 7fe4a3321ff1f..21ed33b3db8d8 100644
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -1,51 +1,12 @@
-<!-- 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 justify-end items-center py-2 px-0 gap-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 alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 
 export default {
   components: {
     Modal,
   },
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -56,6 +17,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       attributeValue: '',
@@ -70,7 +34,7 @@ export default {
   },
   computed: {
     attributeNameError() {
-      if (this.$v.attributeName.$error) {
+      if (this.v$.attributeName.$error) {
         return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
       }
       return '';
@@ -96,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 5dcfd568a49dd..52eb6eaa5635f 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 a45c5fe2c3174..ec3865227dcda 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 b600b318559c9..fc0cfef0df687 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 3d1b7222a81db..bae899dab7210 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 f9e7a99b4495f..cb7e6160799e0 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 8f09a47545375..4e5e2104a37dc 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -1,10 +1,77 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
+import ContactDropdownItem from './ContactDropdownItem.vue';
+
+export default {
+  components: { MergeContactSummary, ContactDropdownItem },
+  props: {
+    primaryContact: {
+      type: Object,
+      required: true,
+    },
+    isSearching: {
+      type: Boolean,
+      default: false,
+    },
+    isMerging: {
+      type: Boolean,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    primaryContact: {
+      required,
+    },
+    parentContact: {
+      required,
+    },
+  },
+  data() {
+    return {
+      parentContact: undefined,
+    };
+  },
+
+  computed: {
+    parentContactName() {
+      return this.parentContact ? this.parentContact.name : '';
+    },
+  },
+  methods: {
+    searchChange(query) {
+      this.$emit('search', query);
+    },
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', this.parentContact.id);
+    },
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+
 <template>
   <form @submit.prevent="onSubmit">
     <div>
       <div>
         <div
           class="mt-1 multiselect-wrap--medium"
-          :class="{ error: $v.parentContact.$error }"
+          :class="{ error: v$.parentContact.$error }"
         >
           <label class="multiselect__label">
             {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
@@ -24,14 +91,14 @@
             :clear-on-select="false"
             :show-labels="false"
             :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
-            :allow-empty="true"
+            allow-empty
             :loading="isSearching"
             :max-height="150"
             open-direction="top"
             @search-change="searchChange"
           >
             <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
                 :name="props.option.name"
@@ -40,7 +107,7 @@
               />
             </template>
             <template slot="option" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
                 :name="props.option.name"
@@ -52,12 +119,12 @@
               {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
             </span>
           </multiselect>
-          <span v-if="$v.parentContact.$error" class="message">
+          <span v-if="v$.parentContact.$error" class="message">
             {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
           </span>
         </div>
       </div>
-      <div class="multiselect-wrap--medium flex">
+      <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"
         >
@@ -86,7 +153,7 @@
             track-by="id"
           >
             <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :name="props.option.name"
                 :identifier="props.option.id"
@@ -98,11 +165,11 @@
         </div>
       </div>
     </div>
-    <merge-contact-summary
+    <MergeContactSummary
       :primary-contact-name="primaryContact.name"
       :parent-contact-name="parentContactName"
     />
-    <div class="mt-6 flex gap-2 justify-end">
+    <div class="flex justify-end gap-2 mt-6">
       <woot-button variant="clear" @click.prevent="onCancel">
         {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
       </woot-button>
@@ -113,71 +180,6 @@
   </form>
 </template>
 
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
-
-import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
-import ContactDropdownItem from './ContactDropdownItem.vue';
-
-export default {
-  components: { MergeContactSummary, ContactDropdownItem },
-  mixins: [alertMixin],
-  props: {
-    primaryContact: {
-      type: Object,
-      required: true,
-    },
-    isSearching: {
-      type: Boolean,
-      default: false,
-    },
-    isMerging: {
-      type: Boolean,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  validations: {
-    primaryContact: {
-      required,
-    },
-    parentContact: {
-      required,
-    },
-  },
-  data() {
-    return {
-      parentContact: undefined,
-    };
-  },
-
-  computed: {
-    parentContactName() {
-      return this.parentContact ? this.parentContact.name : '';
-    },
-  },
-  methods: {
-    searchChange(query) {
-      this.$emit('search', query);
-    },
-    onSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-      this.$emit('submit', this.parentContact.id);
-    },
-    onCancel() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 /* TDOD: Clean errors in forms style */
 .error .message {
@@ -198,7 +200,11 @@ export default {
   }
 
   .multiselect__tags {
-    @apply h-[52px];
+    @apply h-auto;
+  }
+
+  .multiselect__select {
+    @apply mt-px mr-1;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
index 83c588da7d063..722d7680a7d89 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 4e45508eea28a..298b439da3c8d 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -1,110 +1,5 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
@@ -123,7 +18,7 @@ export default {
     TranslateModal,
     MenuItem,
   },
-  mixins: [alertMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -183,12 +78,12 @@ export default {
       await copyTextToClipboard(
         `${fullConversationURL}?messageId=${this.messageId}`
       );
-      this.showAlert(this.$t('CONVERSATION.CONTEXT_MENU.LINK_COPIED'));
+      useAlert(this.$t('CONVERSATION.CONTEXT_MENU.LINK_COPIED'));
       this.handleClose();
     },
     async handleCopy() {
       await copyTextToClipboard(this.plainTextContent);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
       this.handleClose();
     },
     showCannedResponseModal() {
@@ -233,10 +128,10 @@ export default {
           conversationId: this.conversationId,
           messageId: this.messageId,
         });
-        this.showAlert(this.$t('CONVERSATION.SUCCESS_DELETE_MESSAGE'));
+        useAlert(this.$t('CONVERSATION.SUCCESS_DELETE_MESSAGE'));
         this.handleClose();
       } catch (error) {
-        this.showAlert(this.$t('CONVERSATION.FAIL_DELETE_MESSSAGE'));
+        useAlert(this.$t('CONVERSATION.FAIL_DELETE_MESSSAGE'));
       }
     },
     closeDeleteModal() {
@@ -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 6690b2d1157d8..caaa9285d4a2b 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 69f999e17993d..f3f82e8a3a6b9 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -1,8 +1,37 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+
+const emit = defineEmits(['add']);
+
+const addNoteRef = ref(null);
+const noteContent = ref('');
+
+const buttonDisabled = computed(() => noteContent.value === '');
+
+const onAdd = () => {
+  if (noteContent.value !== '') {
+    emit('add', noteContent.value);
+  }
+  noteContent.value = '';
+};
+
+const keyboardEvents = {
+  '$mod+Enter': {
+    action: () => onAdd(),
+    allowOnFocusedInput: true,
+  },
+};
+useKeyboardEvents(keyboardEvents, addNoteRef);
+</script>
+
 <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"
+    ref="addNoteRef"
+    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"
   >
-    <woot-message-editor
+    <WootMessageEditor
       v-model="noteContent"
       class="input--note"
       :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
@@ -15,50 +44,12 @@
         :is-disabled="buttonDisabled"
         @click="onAdd"
       >
-        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
+        {{ $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';
-export default {
-  components: {
-    WootMessageEditor,
-  },
-  mixins: [keyboardEventListenerMixins],
-  data() {
-    return {
-      noteContent: '',
-    };
-  },
-
-  computed: {
-    buttonDisabled() {
-      return this.noteContent === '';
-    },
-  },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        '$mod+Enter': {
-          action: () => this.onAdd(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-    onAdd() {
-      if (this.noteContent !== '') {
-        this.$emit('add', this.noteContent);
-      }
-      this.noteContent = '';
-    },
-  },
-};
-</script>
-
 <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 d4d199b94669b..cba9b8cc9b589 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -1,66 +1,14 @@
-<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 note-wrap"
-  >
-    <div class="flex justify-between items-end text-xs gap-1">
-      <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="actions flex invisible">
-        <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="note__content mt-4"
-    />
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
 
-  mixins: [timeMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
 
   props: {
     id: {
@@ -87,7 +35,7 @@ export default {
   },
   computed: {
     readableTime() {
-      return this.dynamicTime(this.createdAt);
+      return dynamicTime(this.createdAt);
     },
     noteAuthor() {
       return this.user || {};
@@ -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 6061fc7696b64..99d15862b4351 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 4c86862f50c97..e75b082aba020 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 f94af7b5fd6d0..06e128ec20df2 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 c828f8b0a35fb..431f39d9f6e6e 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 cfddfcfe66898..f74c4dce85c25 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 1f5266b5db7b2..9c38bca85fa46 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 deaae694c2775..872ef1b2765ec 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 52ef356be4a26..cd4ead3ad9dec 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -1,53 +1,12 @@
-<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="text-sm email text-slate-700 dark:text-slate-200 overflow-hidden 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 timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
 
 export default {
   components: {
     InboxName,
   },
-  mixins: [timeMixin],
   props: {
     id: {
       type: Number,
@@ -90,12 +49,52 @@ export default {
       );
     },
     createdAtTime() {
-      return this.dynamicTime(this.createdAt);
+      return dynamicTime(this.createdAt);
     },
   },
 };
 </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 3c646a85eb96d..c7f369e44548f 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 d2cdf0cb4e173..92e813e9934ef 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 709936122c58b..8a417db90a3ef 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 93a1e59af3d33..b76e2194e73c9 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 c9b122b323ce4..a5472e6e4b661 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 a083cc522a0f1..ce1277c8522d9 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 5ab15d5fdac49..93d63f0ef25f4 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,3 +1,42 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  name: 'WidgetBody',
+  components: {
+    Thumbnail,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    getStatusText() {
+      return this.config.isOnline
+        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+    },
+    getWidgetBodyClass() {
+      return {
+        'with-chat-view': !this.config.isDefaultScreen,
+        'with-heading-or-title':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline),
+        'with-heading-or-title-without-logo':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline) &&
+          !this.config.logo,
+        'without-heading-and-title':
+          this.config.isDefaultScreen &&
+          !this.config.welcomeHeading &&
+          !this.config.welcomeTagline,
+      };
+    },
+  },
+};
+</script>
+
 <template>
   <div class="widget-body-container">
     <div v-if="config.isDefaultScreen" class="availability-content">
@@ -9,7 +48,7 @@
           {{ config.replyTime }}
         </div>
       </div>
-      <thumbnail username="J" size="40px" />
+      <Thumbnail username="J" size="40px" />
     </div>
     <div v-else class="conversation-content">
       <div class="conversation-wrap">
@@ -46,45 +85,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  name: 'WidgetBody',
-  components: {
-    Thumbnail,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    getStatusText() {
-      return this.config.isOnline
-        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
-        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
-    },
-    getWidgetBodyClass() {
-      return {
-        'with-chat-view': !this.config.isDefaultScreen,
-        'with-heading-or-title':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline),
-        'with-heading-or-title-without-logo':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline) &&
-          !this.config.logo,
-        'without-heading-and-title':
-          this.config.isDefaultScreen &&
-          !this.config.welcomeHeading &&
-          !this.config.welcomeTagline,
-      };
-    },
-  },
-};
-</script>
-
 <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 b5d4bbc28b2ef..34e0f58d2e280 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,6 +1,24 @@
+<script>
+import CustomButton from 'dashboard/components/buttons/Button.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
+export default {
+  name: 'WidgetFooter',
+  components: {
+    CustomButton,
+    ResizableTextArea,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
 <template>
   <div class="footer-wrap">
-    <custom-button
+    <CustomButton
       v-if="config.isDefaultScreen"
       class="start-conversation"
       :style="{ background: config.color }"
@@ -8,9 +26,9 @@
       {{
         $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
       }}
-    </custom-button>
+    </CustomButton>
     <div v-else class="chat-message-input is-focused">
-      <resizable-text-area
+      <ResizableTextArea
         id="chat-input"
         :rows="1"
         :placeholder="
@@ -26,24 +44,6 @@
   </div>
 </template>
 
-<script>
-import CustomButton from 'dashboard/components/buttons/Button.vue';
-import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-export default {
-  name: 'WidgetFooter',
-  components: {
-    CustomButton,
-    ResizableTextArea,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-};
-</script>
-
 <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 e59a004883b90..70d343f59c065 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/Captain.vue b/app/javascript/dashboard/routes/dashboard/Captain.vue
new file mode 100644
index 0000000000000..24ba8927287c7
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/Captain.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+import integrations from '../../api/integrations';
+import Spinner from 'shared/components/Spinner.vue';
+
+const isLoading = ref(true);
+const captainURL = ref('');
+const hasError = ref(false);
+
+const loadCaptainFrame = async integration => {
+  if (!integration || !integration.enabled) {
+    return;
+  }
+  try {
+    isLoading.value = true;
+    const { data } = await integrations.fetchCaptainURL();
+    captainURL.value = data.sso_url;
+  } catch (error) {
+    hasError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const getters = useStoreGetters();
+const captainIntegration = computed(() =>
+  getters['integrations/getIntegration'].value('captain', null)
+);
+
+onMounted(() => loadCaptainFrame(captainIntegration.value));
+
+watch(captainIntegration, updatedIntegration =>
+  loadCaptainFrame(updatedIntegration)
+);
+</script>
+
+<template>
+  <div
+    class="flex-1 overflow-auto flex gap-8 flex-col font-inter text-slate-900 dark:text-slate-500"
+  >
+    <div class="flex-1 flex items-center justify-center">
+      <div v-if="!captainIntegration">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
+      </div>
+      <div
+        v-else-if="!captainIntegration.enabled"
+        class="flex-1 flex flex-col gap-2 items-center justify-center"
+      >
+        <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
+        <router-link :to="{ name: 'settings_applications' }">
+          <woot-button class="clear link">
+            {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
+          </woot-button>
+        </router-link>
+      </div>
+      <div
+        v-else-if="isLoading"
+        class="flex-1 flex items-center justify-center"
+      >
+        <Spinner color-scheme="primary" />
+        <span>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.LOADING_CONSOLE') }}</span>
+      </div>
+      <div v-else-if="!isLoading && hasError">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.FAILED_TO_LOAD_CONSOLE') }}
+      </div>
+      <iframe
+        v-else-if="!isLoading && captainURL"
+        :src="captainURL"
+        class="w-full min-h-[800px] h-full"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index f1ad0772d78ec..77f7d879f9145 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,44 +1,3 @@
-<template>
-  <div
-    class="app-wrapper h-full flex-grow-0 min-h-0 w-full max-w-full ml-auto mr-auto flex flex-wrap 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 h-full min-h-0 overflow-hidden flex-1 px-0">
-      <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';
@@ -47,7 +6,7 @@ import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAc
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import wootConstants from 'dashboard/constants/globals';
 const CommandBar = () => import('./commands/commandbar.vue');
 
@@ -61,7 +20,14 @@ export default {
     AddLabelModal,
     NotificationPanel,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showAccountModal: false,
@@ -174,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/CmdBarConversationSnooze.vue b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
new file mode 100644
index 0000000000000..529b624b0b73a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { getUnixTime } from 'date-fns';
+import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
+import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import wootConstants from 'dashboard/constants/globals';
+import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
+
+const store = useStore();
+const getters = useStoreGetters();
+const { t } = useI18n();
+const showCustomSnoozeModal = ref(false);
+
+const selectedChat = computed(() => getters.getSelectedChat.value);
+const contextMenuChatId = computed(() => getters.getContextMenuChatId.value);
+
+const toggleStatus = async (status, snoozedUntil) => {
+  await store.dispatch('toggleStatus', {
+    conversationId: selectedChat.value?.id || contextMenuChatId.value,
+    status,
+    snoozedUntil,
+  });
+  store.dispatch('setContextMenuChatId', null);
+  useAlert(t('CONVERSATION.CHANGE_STATUS'));
+};
+
+const onCmdSnoozeConversation = snoozeType => {
+  if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+    showCustomSnoozeModal.value = true;
+  } else {
+    toggleStatus(
+      wootConstants.STATUS_TYPE.SNOOZED,
+      findSnoozeTime(snoozeType) || null
+    );
+  }
+};
+
+const chooseSnoozeTime = customSnoozeTime => {
+  showCustomSnoozeModal.value = false;
+  if (customSnoozeTime) {
+    toggleStatus(
+      wootConstants.STATUS_TYPE.SNOOZED,
+      getUnixTime(customSnoozeTime)
+    );
+  }
+};
+
+const hideCustomSnoozeModal = () => {
+  // if we select custom snooze and the custom snooze modal is open
+  // Then if the custom snooze modal is closed then set the context menu chat id to null
+  store.dispatch('setContextMenuChatId', null);
+  showCustomSnoozeModal.value = false;
+};
+
+useEmitter(CMD_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
+</script>
+
+<template>
+  <woot-modal
+    :show.sync="showCustomSnoozeModal"
+    :on-close="hideCustomSnoozeModal"
+  >
+    <CustomSnoozeModal
+      @close="hideCustomSnoozeModal"
+      @chooseTime="chooseSnoozeTime"
+    />
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 6174d3569e64c..d639696bae71f 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -1,17 +1,6 @@
-<!-- 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 { useConversationLabels } from 'dashboard/composables/useConversationLabels';
 import wootConstants from 'dashboard/constants/globals';
 import conversationHotKeysMixin from './conversationHotKeys';
 import bulkActionsHotKeysMixin from './bulkActionsHotKeys';
@@ -19,23 +8,33 @@ import inboxHotKeysMixin from './inboxHotKeys';
 import goToCommandHotKeys from './goToCommandHotKeys';
 import appearanceHotKeys from './appearanceHotKeys';
 import agentMixin from 'dashboard/mixins/agentMixin';
-import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
-import conversationTeamMixin from 'dashboard/mixins/conversation/teamMixin';
-import adminMixin from 'dashboard/mixins/isAdmin';
 import { GENERAL_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 export default {
   mixins: [
-    adminMixin,
     agentMixin,
     conversationHotKeysMixin,
     bulkActionsHotKeysMixin,
     inboxHotKeysMixin,
-    conversationLabelMixin,
-    conversationTeamMixin,
     appearanceHotKeys,
     goToCommandHotKeys,
   ],
+  setup() {
+    // used in conversationHotKeysMixin
+    const {
+      activeLabels,
+      inactiveLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+    } = useConversationLabels();
+
+    return {
+      activeLabels,
+      inactiveLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+    };
+  },
   data() {
     return {
       // Added selectedSnoozeType to track the selected snooze type
@@ -110,6 +109,18 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/attribute-hyphenation -->
+<template>
+  <ninja-keys
+    ref="ninjakeys"
+    noAutoLoadMdIcons
+    hideBreadcrumbs
+    :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/commands/conversationHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
index 9c4a638b686d8..c680788fdcdf0 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
@@ -65,6 +65,7 @@ export default {
       currentChat: 'getSelectedChat',
       replyMode: 'draftMessages/getReplyEditorMode',
       contextMenuChatId: 'getContextMenuChatId',
+      teams: 'teams/getTeams',
     }),
     draftMessage() {
       return this.$store.getters['draftMessages/get'](this.draftKey);
@@ -78,7 +79,18 @@ export default {
     conversationId() {
       return this.currentChat?.id;
     },
-
+    hasAnAssignedTeam() {
+      return !!this.currentChat?.meta?.team;
+    },
+    teamsList() {
+      if (this.hasAnAssignedTeam) {
+        return [
+          { id: 0, name: this.$t('TEAMS_SETTINGS.LIST.NONE') },
+          ...this.teams,
+        ];
+      }
+      return this.teams;
+    },
     statusActions() {
       const isOpen =
         this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
diff --git a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
index 03914184f219b..6b16bf93dfd60 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
@@ -17,6 +17,7 @@ import {
 } from './CommandBarIcons';
 import { frontendURL } from '../../../helper/URLHelper';
 import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 
 const GO_TO_COMMANDS = [
@@ -172,6 +173,12 @@ const GO_TO_COMMANDS = [
 ];
 
 export default {
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
diff --git a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
index d83f00f513622..37b1986f0b8fd 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
@@ -53,7 +53,7 @@ const INBOX_SNOOZE_EVENTS = [
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
-    title: 'COMMAND_BAR.COMMANDS.CUSTOM',
+    title: 'COMMAND_BAR.COMMANDS.UNTIL_CUSTOM_TIME',
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
index 54e900c30b6f9..b6ccce531dc30 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 01a790194f89f..0c9a1ec5b10da 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,17 +1,95 @@
+<script>
+import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
+import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
+import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
+import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
+import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
+import draggable from 'vuedraggable';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+export default {
+  components: {
+    AccordionItem,
+    ContactConversations,
+    ContactInfo,
+    ContactLabel,
+    CustomAttributes,
+    Draggable: draggable,
+  },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    showAvatar: {
+      type: Boolean,
+      default: true,
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup() {
+    const {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    } = useUISettings();
+
+    return {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    };
+  },
+  data() {
+    return {
+      dragEnabled: true,
+      contactSidebarItems: [],
+      dragging: false,
+    };
+  },
+  computed: {
+    hasContactAttributes() {
+      const { custom_attributes: customAttributes } = this.contact;
+      return customAttributes && Object.keys(customAttributes).length;
+    },
+  },
+  mounted() {
+    this.contactSidebarItems = this.contactSidebarItemsOrder;
+  },
+  methods: {
+    onDragEnd() {
+      this.dragging = false;
+      this.updateUISettings({
+        contact_sidebar_items_order: this.contactSidebarItems,
+      });
+    },
+  },
+};
+</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'"
   >
-    <contact-info
+    <ContactInfo
       :show-close-button="showCloseButton"
       :show-avatar="showAvatar"
       :contact="contact"
       close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
+      @panelClose="onClose"
+      @togglePanel="onClose"
     />
-    <draggable
+    <Draggable
       :list="contactSidebarItems"
       :disabled="!dragEnabled"
       class="list-group"
@@ -26,7 +104,7 @@
           class="list-group-item"
         >
           <div v-if="element.name === 'contact_attributes'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
               :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
               compact
@@ -34,30 +112,28 @@
                 value => toggleSidebarUIState('is_ct_custom_attr_open', value)
               "
             >
-              <custom-attributes
+              <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"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-if="element.name === 'contact_labels'">
-            <accordion-item
+            <AccordionItem
               :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>
+              <ContactLabel :contact-id="contact.id" class="contact-labels" />
+            </AccordionItem>
           </div>
           <div v-if="element.name === 'previous_conversation'">
-            <accordion-item
+            <AccordionItem
               :title="
                 $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
               "
@@ -66,83 +142,19 @@
                 value => toggleSidebarUIState('is_ct_prev_conv_open', value)
               "
             >
-              <contact-conversations
+              <ContactConversations
                 v-if="contact.id"
                 :contact-id="contact.id"
                 conversation-id=""
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
         </div>
       </transition-group>
-    </draggable>
+    </Draggable>
   </div>
 </template>
 
-<script>
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
-import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
-import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
-import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
-import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import draggable from 'vuedraggable';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-
-export default {
-  components: {
-    AccordionItem,
-    ContactConversations,
-    ContactInfo,
-    ContactLabel,
-    CustomAttributes,
-    draggable,
-  },
-  mixins: [uiSettingsMixin],
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showAvatar: {
-      type: Boolean,
-      default: true,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      dragEnabled: true,
-      contactSidebarItems: [],
-      dragging: false,
-    };
-  },
-  computed: {
-    hasContactAttributes() {
-      const { custom_attributes: customAttributes } = this.contact;
-      return customAttributes && Object.keys(customAttributes).length;
-    },
-  },
-  mounted() {
-    this.contactSidebarItems = this.contactSidebarItemsOrder;
-  },
-  methods: {
-    onDragEnd() {
-      this.dragging = false;
-      this.updateUISettings({
-        contact_sidebar_items_order: this.contactSidebarItems,
-      });
-    },
-  },
-};
-</script>
-
 <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 04c79561f15df..921c86a858c28 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
@@ -1,20 +1,10 @@
-<template>
-  <label-selector
-    :all-labels="allLabels"
-    :saved-labels="savedLabels"
-    @add="addItem"
-    @remove="removeItem"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: { LabelSelector },
-  mixins: [alertMixin],
   props: {
     contactId: {
       type: [String, Number],
@@ -33,7 +23,6 @@ export default {
     },
 
     ...mapGetters({
-      labelUiFlags: 'contactLabels/getUIFlags',
       allLabels: 'labels/getLabels',
     }),
   },
@@ -59,7 +48,7 @@ export default {
           labels: selectedLabels,
         });
       } catch (error) {
-        this.showAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
+        useAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
       }
     },
 
@@ -86,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 6f5e92017d5bf..41c986d03f862 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -1,96 +1,5 @@
-<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="folder-input border-slate-75 dark:border-slate-600 bg-white 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 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
-      >
-        <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)"
-          :v="$v.appliedFilters.$each[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 gap-2 py-2 px-0 w-full">
-          <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 alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { useAlert } from 'dashboard/composables';
 import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
@@ -98,11 +7,13 @@ import { filterAttributeGroups } from '../contactFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
+
 export default {
   components: {
     FilterInputBox,
   },
-  mixins: [alertMixin, filterMixin],
+  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -125,22 +36,6 @@ export default {
       default: '',
     },
   },
-  validations: {
-    appliedFilters: {
-      required,
-      $each: {
-        values: {
-          required,
-          ensureBetween0to999(value, prop) {
-            if (prop.filter_operator === 'days_before') {
-              return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
-            }
-            return true;
-          },
-        },
-      },
-    },
-  },
   data() {
     return {
       show: true,
@@ -152,6 +47,7 @@ export default {
       filterAttributeGroups,
       attributeModel: 'contact_attribute',
       filtersFori18n: 'CONTACTS_FILTER',
+      validationErrors: {},
     };
   },
   computed: {
@@ -308,26 +204,29 @@ export default {
     },
     removeFilter(index) {
       if (this.appliedFilters.length <= 1) {
-        this.showAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
+        useAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
       } else {
         this.appliedFilters.splice(index, 1);
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$store.dispatch(
-        'contacts/setContactFilters',
-        JSON.parse(JSON.stringify(this.appliedFilters))
+      this.validationErrors = validateConversationOrContactFilters(
+        this.appliedFilters
       );
-      this.$emit('applyFilter', this.appliedFilters);
-      this.$track(CONTACTS_EVENTS.APPLY_FILTER, {
-        applied_filters: this.appliedFilters.map(filter => ({
-          key: filter.attribute_key,
-          operator: filter.filter_operator,
-          query_operator: filter.query_operator,
-        })),
-      });
+      if (Object.keys(this.validationErrors).length === 0) {
+        this.$store.dispatch(
+          'contacts/setContactFilters',
+          JSON.parse(JSON.stringify(this.appliedFilters))
+        );
+        this.$emit('applyFilter', this.appliedFilters);
+        this.$track(CONTACTS_EVENTS.APPLY_FILTER, {
+          applied_filters: this.appliedFilters.map(filter => ({
+            key: filter.attribute_key,
+            operator: filter.filter_operator,
+            query_operator: filter.query_operator,
+          })),
+        });
+      }
     },
     updateSegment() {
       this.$emit(
@@ -354,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 2ca3f595fe282..2c5b4b538d5d0 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -1,41 +1,12 @@
-<template>
-  <section
-    class="contacts-table-wrap bg-white dark:bg-slate-900 flex-1 h-full overflow-hidden -mt-1"
-  >
-    <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="items-center flex text-base justify-center">
-      <spinner />
-      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-  </section>
-</template>
-
 <script>
+import { mapGetters } from 'vuex';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
 
 import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import timeMixin from 'dashboard/mixins/time';
-import rtlMixin from 'shared/mixins/rtlMixin';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 export default {
@@ -44,7 +15,6 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [timeMixin, rtlMixin],
   props: {
     contacts: {
       type: Array,
@@ -62,10 +32,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    activeContactId: {
-      type: [String, Number],
-      default: '',
-    },
     sortParam: {
       type: String,
       default: 'last_activity_at',
@@ -80,11 +46,14 @@ export default {
       sortConfig: {},
       sortOption: {
         sortAlways: true,
-        sortChange: params => this.$emit('on-sort-change', params),
+        sortChange: params => this.$emit('onSortChange', params),
       },
     };
   },
   computed: {
+    ...mapGetters({
+      isRTL: 'accounts/isRTL',
+    }),
     tableData() {
       if (this.isLoading) {
         return [];
@@ -105,9 +74,9 @@ export default {
           countryCode: additional.country_code,
           conversationsCount: item.conversations_count || '---',
           last_activity_at: lastActivityAt
-            ? this.dynamicTime(lastActivityAt)
+            ? dynamicTime(lastActivityAt)
             : '---',
-          created_at: createdAt ? this.dynamicTime(createdAt) : '---',
+          created_at: createdAt ? dynamicTime(createdAt) : '---',
         };
       });
     },
@@ -118,7 +87,7 @@ export default {
           key: 'name',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
           fixed: 'left',
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           sortBy: this.sortConfig.name || '',
           width: 300,
           renderBodyCell: ({ row }) => (
@@ -134,7 +103,7 @@ export default {
                   status={row.availability_status}
                 />
                 <div class="user-block">
-                  <h6 class="text-base overflow-hidden whitespace-nowrap text-ellipsis">
+                  <h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
                     <router-link
                       to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
                       class="user-name"
@@ -154,7 +123,7 @@ export default {
           field: 'email',
           key: 'email',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           sortBy: this.sortConfig.email || '',
           width: 240,
           renderBodyCell: ({ row }) => {
@@ -178,27 +147,27 @@ export default {
           key: 'phone_number',
           sortBy: this.sortConfig.phone_number || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'company',
           key: 'company',
           sortBy: this.sortConfig.company_name || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'city',
           key: 'city',
           sortBy: this.sortConfig.city || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'country',
           key: 'country',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           sortBy: this.sortConfig.country || '',
           renderBodyCell: ({ row }) => {
             if (row.country) {
@@ -215,7 +184,7 @@ export default {
           field: 'profiles',
           key: 'profiles',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           renderBodyCell: ({ row }) => {
             const { profiles } = row;
 
@@ -246,14 +215,14 @@ export default {
           key: 'last_activity_at',
           sortBy: this.sortConfig.last_activity_at || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'created_at',
           key: 'created_at',
           sortBy: this.sortConfig.created_at || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
         },
       ];
     },
@@ -277,6 +246,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 1a824f5871727..98037a821e918 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -1,86 +1,6 @@
-<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';
 
 import ContactsHeader from './Header.vue';
 import ContactsTable from './ContactsTable.vue';
@@ -94,7 +14,6 @@ import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import alertMixin from 'shared/mixins/alertMixin';
 import countries from 'shared/constants/countries.js';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
 
@@ -113,7 +32,6 @@ export default {
     AddCustomViews,
     DeleteCustomViews,
   },
-  mixins: [alertMixin],
   props: {
     label: { type: String, default: '' },
     segmentsId: {
@@ -404,11 +322,9 @@ export default {
           ...query,
           label: this.label,
         });
-        this.showAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
+        useAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(
-          error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE')
-        );
+        useAlert(error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE'));
       }
     },
     setParamsForEditSegmentModal() {
@@ -471,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 e165c68d18537..d4b992abd2087 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -1,134 +1,8 @@
-<template>
-  <header
-    class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-  >
-    <div class="flex justify-between w-full px-4 py-2">
-      <div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
-        <woot-sidemenu-icon />
-        <h1
-          class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-        >
-          {{ headerTitle }}
-        </h1>
-      </div>
-      <div class="flex gap-2">
-        <div
-          class="max-w-[400px] min-w-[150px] flex items-center relative mx-2 search-wrap"
-        >
-          <div class="flex items-center absolute h-full left-2.5">
-            <fluent-icon
-              icon="search"
-              class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
-            />
-          </div>
-          <input
-            type="text"
-            :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-            class="contact-search border-slate-100 dark:border-slate-600"
-            :value="searchQuery"
-            @keyup.enter="submitSearch"
-            @input="inputSearch"
-          />
-          <woot-button
-            :is-loading="false"
-            class="clear"
-            :class-names="searchButtonClass"
-            @click="submitSearch"
-          >
-            {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
-          </woot-button>
-        </div>
-        <div v-if="hasActiveSegments" class="flex gap-2">
-          <woot-button
-            class="clear"
-            color-scheme="secondary"
-            icon="edit"
-            @click="onToggleEditSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
-          </woot-button>
-          <woot-button
-            class="clear"
-            color-scheme="alert"
-            icon="delete"
-            @click="onToggleDeleteSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
-          </woot-button>
-        </div>
-        <div v-if="!hasActiveSegments" class="relative">
-          <div
-            v-if="hasAppliedFilters"
-            class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
-          />
-          <woot-button
-            class="clear"
-            color-scheme="secondary"
-            data-testid="create-new-contact"
-            icon="filter"
-            @click="toggleFilter"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
-          </woot-button>
-        </div>
-
-        <woot-button
-          v-if="hasAppliedFilters && !hasActiveSegments"
-          class="clear"
-          color-scheme="alert"
-          variant="clear"
-          icon="save"
-          @click="onToggleSegmentsModal"
-        >
-          {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
-        </woot-button>
-        <woot-button
-          class="clear"
-          color-scheme="success"
-          icon="person-add"
-          data-testid="create-new-contact"
-          @click="toggleCreate"
-        >
-          {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-        </woot-button>
-
-        <woot-button
-          v-if="isAdmin"
-          color-scheme="info"
-          icon="upload"
-          class="clear"
-          @click="toggleImport"
-        >
-          {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
-        </woot-button>
-
-        <woot-button
-          v-if="isAdmin"
-          color-scheme="info"
-          icon="download"
-          class="clear"
-          @click="submitExport"
-        >
-          {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
-        </woot-button>
-      </div>
-    </div>
-    <woot-confirm-modal
-      ref="confirmExportContactsDialog"
-      :title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
-      :description="exportDescription"
-      :confirm-label="$t('EXPORT_CONTACTS.CONFIRM.YES')"
-      :cancel-label="$t('EXPORT_CONTACTS.CONFIRM.NO')"
-    />
-  </header>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import adminMixin from 'dashboard/mixins/isAdmin';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 
 export default {
-  mixins: [adminMixin],
   props: {
     headerTitle: {
       type: String,
@@ -143,6 +17,12 @@ export default {
       default: 0,
     },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   data() {
     return {
       showCreateModal: false,
@@ -151,7 +31,9 @@ export default {
   },
   computed: {
     searchButtonClass() {
-      return this.searchQuery !== '' ? 'show' : '';
+      return this.searchQuery !== ''
+        ? 'opacity-100 translate-x-0 visible'
+        : '-translate-x-px opacity-0 invisible';
     },
     ...mapGetters({
       getAppliedContactFilters: 'contacts/getAppliedContactFilters',
@@ -170,54 +52,168 @@ export default {
   },
   methods: {
     onToggleSegmentsModal() {
-      this.$emit('on-toggle-save-filter');
+      this.$emit('onToggleSaveFilter');
     },
     onToggleEditSegmentsModal() {
-      this.$emit('on-toggle-edit-filter');
+      this.$emit('onToggleEditFilter');
     },
     onToggleDeleteSegmentsModal() {
-      this.$emit('on-toggle-delete-filter');
+      this.$emit('onToggleDeleteFilter');
     },
     toggleCreate() {
-      this.$emit('on-toggle-create');
+      this.$emit('onToggleCreate');
     },
     toggleFilter() {
-      this.$emit('on-toggle-filter');
+      this.$emit('onToggleFilter');
     },
     toggleImport() {
-      this.$emit('on-toggle-import');
+      this.$emit('onToggleImport');
     },
     async submitExport() {
       const ok =
         await this.$refs.confirmExportContactsDialog.showConfirmation();
 
       if (ok) {
-        this.$emit('on-export-submit');
+        this.$emit('onExportSubmit');
       }
     },
     submitSearch() {
-      this.$emit('on-search-submit');
+      this.$emit('onSearchSubmit');
     },
     inputSearch(event) {
-      this.$emit('on-input-search', event);
+      this.$emit('onInputSearch', event);
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.search-wrap {
-  .contact-search {
-    @apply pl-9 pr-[3.75rem] text-sm w-full h-[2.375rem] m-0;
-  }
+<template>
+  <header
+    class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
+  >
+    <div class="flex justify-between w-full px-4 py-2">
+      <div class="flex flex-col items-center w-full gap-2 md:flex-row">
+        <div class="flex justify-between w-full gap-2">
+          <div
+            class="flex items-center justify-center max-w-full min-w-[6.25rem]"
+          >
+            <woot-sidemenu-icon />
+            <h1
+              class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+            >
+              {{ headerTitle }}
+            </h1>
+          </div>
+          <div
+            class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
+          >
+            <div class="flex items-center absolute h-full left-2.5">
+              <fluent-icon
+                icon="search"
+                class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
+              />
+            </div>
+            <input
+              type="text"
+              :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
+              class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
+              :value="searchQuery"
+              @keyup.enter="submitSearch"
+              @input="inputSearch"
+            />
+            <woot-button
+              :is-loading="false"
+              class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
+              :class-names="searchButtonClass"
+              @click="submitSearch"
+            >
+              {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
+            </woot-button>
+          </div>
+        </div>
+        <div class="flex gap-1">
+          <div v-if="hasActiveSegments" class="flex gap-2">
+            <woot-button
+              class="clear [&>span]:hidden xs:[&>span]:block"
+              color-scheme="secondary"
+              icon="edit"
+              @click="onToggleEditSegmentsModal"
+            >
+              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
+            </woot-button>
+            <woot-button
+              class="clear [&>span]:hidden xs:[&>span]:block"
+              color-scheme="alert"
+              icon="delete"
+              @click="onToggleDeleteSegmentsModal"
+            >
+              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
+            </woot-button>
+          </div>
+          <div v-if="!hasActiveSegments" class="relative">
+            <div
+              v-if="hasAppliedFilters"
+              class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
+            />
+            <woot-button
+              class="clear [&>span]:hidden xs:[&>span]:block"
+              color-scheme="secondary"
+              data-testid="create-new-contact"
+              icon="filter"
+              @click="toggleFilter"
+            >
+              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
+            </woot-button>
+          </div>
 
-  .button {
-    transition: transform 100ms linear;
-    @apply ml-2 h-8 right-1 absolute py-0 px-2 opacity-0 -translate-x-px invisible;
-  }
+          <woot-button
+            v-if="hasAppliedFilters && !hasActiveSegments"
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            color-scheme="alert"
+            variant="clear"
+            icon="save"
+            @click="onToggleSegmentsModal"
+          >
+            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
+          </woot-button>
+          <woot-button
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            color-scheme="success"
+            icon="person-add"
+            data-testid="create-new-contact"
+            @click="toggleCreate"
+          >
+            {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
+          </woot-button>
+
+          <woot-button
+            v-if="isAdmin"
+            color-scheme="info"
+            icon="upload"
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            @click="toggleImport"
+          >
+            {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
+          </woot-button>
 
-  .button.show {
-    @apply opacity-100 translate-x-0 visible;
-  }
-}
-</style>
+          <woot-button
+            v-if="isAdmin"
+            color-scheme="info"
+            icon="download"
+            class="clear [&>span]:hidden xs:[&>span]:block"
+            @click="submitExport"
+          >
+            {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+    <woot-confirm-modal
+      ref="confirmExportContactsDialog"
+      :title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
+      :description="exportDescription"
+      :confirm-label="$t('EXPORT_CONTACTS.CONFIRM.YES')"
+      :cancel-label="$t('EXPORT_CONTACTS.CONFIRM.NO')"
+    />
+  </header>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
index def668aca6dc5..6e536b555990d 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
@@ -1,57 +1,13 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="h-auto overflow-auto flex flex-col">
-      <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 gap-2 py-2 px-0 w-full">
-          <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 Modal from '../../../../components/Modal.vue';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import Modal from '../../../../components/Modal.vue';
 
 export default {
   components: {
     Modal,
   },
-  mixins: [alertMixin],
   props: {
     onClose: {
       type: Function,
@@ -81,12 +37,10 @@ export default {
         if (!this.file) return;
         await this.$store.dispatch('contacts/import', this.file);
         this.onClose();
-        this.showAlert(this.$t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
+        useAlert(this.$t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
         this.$track(CONTACTS_EVENTS.IMPORT_SUCCESS);
       } catch (error) {
-        this.showAlert(
-          error.message || this.$t('IMPORT_CONTACTS.ERROR_MESSAGE')
-        );
+        useAlert(error.message || this.$t('IMPORT_CONTACTS.ERROR_MESSAGE'));
         this.$track(CONTACTS_EVENTS.IMPORT_FAILURE);
       }
     },
@@ -96,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 531e9141e5570..8909a03766678 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 a9e6c8cdb75bb..6940b9122e686 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 37876a62c0530..8eb1fc8e7717e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
@@ -1,37 +1,7 @@
-<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 timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 export default {
-  mixins: [timeMixin],
-
   props: {
     eventType: {
       type: String,
@@ -53,7 +23,7 @@ export default {
 
   computed: {
     readableTime() {
-      return this.dynamicTime(this.timeStamp);
+      return dynamicTime(this.timeStamp);
     },
   },
 
@@ -65,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 a6f44ac6b4e93..8f6658392d3ba 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 f7820207504c5..1070566b01f70 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 bf3ee81403392..0a409e65d53ab 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 bfb868892a3a8..1bba005682cee 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 731ac26e4d951..8d82e546594d0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,139 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
@@ -143,7 +10,6 @@ import ContactInfo from './contact/ContactInfo.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import draggable from 'vuedraggable';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
 export default {
   components: {
@@ -154,10 +20,9 @@ export default {
     CustomAttributes,
     ConversationAction,
     ConversationParticipant,
-    draggable,
+    Draggable: draggable,
     MacrosList,
   },
-  mixins: [alertMixin, uiSettingsMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -172,6 +37,21 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      conversationSidebarItemsOrder,
+      toggleSidebarUIState,
+    } = useUISettings();
+
+    return {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      conversationSidebarItemsOrder,
+      toggleSidebarUIState,
+    };
+  },
   data() {
     return {
       dragEnabled: true,
@@ -182,8 +62,6 @@ export default {
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
-      currentUser: 'getCurrentUser',
-      uiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     conversationAdditionalAttributes() {
       return this.currentConversationMetaData.additional_attributes || {};
@@ -253,6 +131,137 @@ 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-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 ec309f7bd49c5..d718d35988ca8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -1,93 +1,11 @@
 <!-- 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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import ConversationLabels from './labels/LabelBox.vue';
 import agentMixin from 'dashboard/mixins/agentMixin';
-import teamMixin from 'dashboard/mixins/conversation/teamMixin';
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
@@ -97,12 +15,15 @@ export default {
     MultiselectDropdown,
     ConversationLabels,
   },
-  mixins: [agentMixin, alertMixin, teamMixin],
+  mixins: [agentMixin],
   props: {
     conversationId: {
       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,
@@ -143,7 +64,20 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
       currentUser: 'getCurrentUser',
+      teams: 'teams/getTeams',
     }),
+    hasAnAssignedTeam() {
+      return !!this.currentChat?.meta?.team;
+    },
+    teamsList() {
+      if (this.hasAnAssignedTeam) {
+        return [
+          { id: 0, name: this.$t('TEAMS_SETTINGS.LIST.NONE') },
+          ...this.teams,
+        ];
+      }
+      return this.teams;
+    },
     assignedAgent: {
       get() {
         return this.currentChat.meta.assignee;
@@ -157,7 +91,7 @@ export default {
             agentId,
           })
           .then(() => {
-            this.showAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+            useAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
           });
       },
     },
@@ -172,7 +106,7 @@ export default {
         this.$store
           .dispatch('assignTeam', { conversationId, teamId })
           .then(() => {
-            this.showAlert(this.$t('CONVERSATION.CHANGE_TEAM'));
+            useAlert(this.$t('CONVERSATION.CHANGE_TEAM'));
           });
       },
     },
@@ -201,7 +135,7 @@ export default {
               newValue: priority,
               from: 'Conversation Sidebar',
             });
-            this.showAlert(
+            useAlert(
               this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
                 priority: priorityItem.name,
                 conversationId,
@@ -270,3 +204,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 2a095c063769d..987f42d182ca8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -70,40 +70,39 @@ const staticElements = computed(() =>
     },
   ].filter(attribute => !!attribute.content.value)
 );
+
+const evenClass = [
+  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
+  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+];
 </script>
 
 <template>
   <div class="conversation--details">
-    <ContactDetailsItem
-      v-for="element in staticElements"
-      :key="element.title"
-      :title="$t(element.title)"
-      :value="element.content.value"
-      class="conversation--attribute"
-    >
-      <a
-        v-if="element.type === 'link'"
-        :href="referer"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-        class="text-woot-400 dark:text-woot-600"
+    <div :class="evenClass">
+      <ContactDetailsItem
+        v-for="element in staticElements"
+        :key="element.title"
+        :title="$t(element.title)"
+        :value="element.content.value"
+        class="border-b border-solid border-slate-50 dark:border-slate-700/50"
       >
-        {{ referer }}
-      </a>
-    </ContactDetailsItem>
+        <a
+          v-if="element.type === 'link'"
+          :href="referer"
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+          class="text-woot-400 dark:text-woot-600"
+        >
+          {{ referer }}
+        </a>
+      </ContactDetailsItem>
+    </div>
     <CustomAttributes
-      :class="staticElements.length % 2 === 0 ? 'even' : 'odd'"
+      :start-at="staticElements.length % 2 === 0 ? 'even' : 'odd'"
       attribute-class="conversation--attribute"
       attribute-from="conversation_panel"
       attribute-type="conversation_attribute"
     />
   </div>
 </template>
-<style scoped lang="scss">
-.conversation--attribute {
-  @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
-  &:nth-child(2n) {
-    @apply bg-slate-25 dark:bg-slate-800/50;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index 820295b57ca5a..f59f69b87fe52 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -1,85 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
 import agentMixin from 'dashboard/mixins/agentMixin';
 import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup.vue';
@@ -91,12 +12,15 @@ export default {
     ThumbnailGroup,
     MultiselectDropdownItems,
   },
-  mixins: [alertMixin, agentMixin],
+  mixins: [agentMixin],
   props: {
     conversationId: {
       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,
@@ -197,7 +121,7 @@ export default {
           error?.message ||
           this.$t('CONVERSATION_PARTICIPANTS.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(alertMessage);
+        useAlert(alertMessage);
       }
       this.fetchParticipants();
     },
@@ -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 cd3cdfb80fac9..48b7ec89fe798 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,61 +1,20 @@
-<template>
-  <section class="conversation-page bg-white 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 { getUnixTime } from 'date-fns';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import alertMixin from 'shared/mixins/alertMixin';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
+import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 
 export default {
   components: {
     ChatList,
     ConversationBox,
     PopOverSearch,
-    CustomSnoozeModal,
+    CmdBarConversationSnooze,
   },
-  mixins: [uiSettingsMixin, alertMixin],
   props: {
     inboxId: {
       type: [String, Number],
@@ -82,17 +41,23 @@ export default {
       default: 0,
     },
   },
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showSearchModal: false,
-      showCustomSnoozeModal: false,
     };
   },
   computed: {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
-      contextMenuChatId: 'getContextMenuChatId',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -129,10 +94,6 @@ export default {
     this.$watch('chatList.length', () => {
       this.setActiveChat();
     });
-    this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-  },
-  beforeDestroy() {
-    this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
   },
 
   methods: {
@@ -207,46 +168,38 @@ export default {
     closeSearch() {
       this.showSearchModal = false;
     },
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomSnoozeModal = true;
-      } else {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          findSnoozeTime(snoozeType) || null
-        );
-      }
-    },
-    chooseSnoozeTime(customSnoozeTime) {
-      this.showCustomSnoozeModal = false;
-      if (customSnoozeTime) {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          getUnixTime(customSnoozeTime)
-        );
-      }
-    },
-    toggleStatus(status, snoozedUntil) {
-      this.$store
-        .dispatch('toggleStatus', {
-          conversationId: this.currentChat?.id || this.contextMenuChatId,
-          status,
-          snoozedUntil,
-        })
-        .then(() => {
-          this.$store.dispatch('setContextMenuChatId', null);
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
-        });
-    },
-    hideCustomSnoozeModal() {
-      // if we select custom snooze and the custom snooze modal is open
-      // Then if the custom snooze modal is closed then set the context menu chat id to null
-      this.$store.dispatch('setContextMenuChatId', null);
-      this.showCustomSnoozeModal = false;
-    },
   },
 };
 </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"
+    />
+    <CmdBarConversationSnooze />
+  </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 a2bade368f292..6cda0ff7f029c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -1,13 +1,47 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAccount } from 'dashboard/composables/useAccount';
+import MacroItem from './MacroItem.vue';
+
+export default {
+  components: {
+    MacroItem,
+  },
+  props: {
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  setup() {
+    const { accountScopedUrl } = useAccount();
+
+    return {
+      accountScopedUrl,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      macros: ['macros/getMacros'],
+      uiFlags: 'macros/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('macros/get');
+  },
+};
+</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">
+      <p class="flex flex-col items-center justify-center h-full">
         {{ $t('MACROS.LIST.404') }}
       </p>
-      <router-link :to="addAccountScoping('settings/macros')">
+      <router-link :to="accountScopedUrl('settings/macros')">
         <woot-button
           variant="smooth"
           icon="add"
@@ -23,7 +57,7 @@
       :message="$t('MACROS.LOADING')"
     />
     <div v-if="!uiFlags.isFetching && macros.length" class="macros-list">
-      <macro-item
+      <MacroItem
         v-for="macro in macros"
         :key="macro.id"
         :macro="macro"
@@ -32,33 +66,7 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import MacroItem from './MacroItem.vue';
-import accountMixin from 'dashboard/mixins/account.js';
 
-export default {
-  components: {
-    MacroItem,
-  },
-  mixins: [accountMixin],
-  props: {
-    conversationId: {
-      type: [Number, String],
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      macros: ['macros/getMacros'],
-      uiFlags: 'macros/getUIFlags',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('macros/get');
-  },
-};
-</script>
 <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 38650bee06a2f..8f2881f0bab79 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -1,39 +1,5 @@
-<template>
-  <div class="macro button secondary clear">
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
-      macro.name
-    }}</span>
-    <div class="macros-actions flex items-center gap-1">
-      <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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import MacroPreview from './MacroPreview.vue';
 import { CONVERSATION_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -41,7 +7,6 @@ export default {
   components: {
     MacroPreview,
   },
-  mixins: [alertMixin],
   props: {
     macro: {
       type: Object,
@@ -67,9 +32,9 @@ export default {
           conversationIds: [this.conversationId],
         });
         this.$track(CONVERSATION_EVENTS.EXECUTED_A_MACRO);
-        this.showAlert(this.$t('MACROS.EXECUTE.EXECUTED_SUCCESSFULLY'));
+        useAlert(this.$t('MACROS.EXECUTE.EXECUTED_SUCCESSFULLY'));
       } catch (error) {
-        this.showAlert(this.$t('MACROS.ERROR'));
+        useAlert(this.$t('MACROS.ERROR'));
       } finally {
         this.isExecuting = false;
       }
@@ -84,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 e81d048d1720a..5b0a33c3a8a3a 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 cf40289766ec5..5281ed890e04b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -1,167 +1,16 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
-import { required, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
 import countries from 'shared/constants/countries.js';
 import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
 
 export default {
-  mixins: [alertMixin],
   props: {
     contact: {
       type: Object,
@@ -176,6 +25,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       countries: countries,
@@ -368,27 +220,25 @@ export default {
       }
     },
     async handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid || this.isPhoneNumberNotValid) {
+      this.v$.$touch();
+      if (this.v$.$invalid || this.isPhoneNumberNotValid) {
         return;
       }
       try {
         await this.onSubmit(this.getContactObject());
         this.onSuccess();
-        this.showAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
+        useAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
       } catch (error) {
         if (error instanceof DuplicateContactException) {
           if (error.data.includes('email')) {
-            this.showAlert(
-              this.$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.DUPLICATE')
-            );
+            useAlert(this.$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.DUPLICATE'));
           } else if (error.data.includes('phone_number')) {
-            this.showAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+            useAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
           }
         } else if (error instanceof ExceptionWithMessage) {
-          this.showAlert(error.data);
+          useAlert(error.data);
         } else {
-          this.showAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
+          useAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
         }
       }
     },
@@ -400,15 +250,13 @@ export default {
       try {
         if (this.contact && this.contact.id) {
           await this.$store.dispatch('contacts/deleteAvatar', this.contact.id);
-          this.showAlert(
-            this.$t('CONTACT_FORM.DELETE_AVATAR.API.SUCCESS_MESSAGE')
-          );
+          useAlert(this.$t('CONTACT_FORM.DELETE_AVATAR.API.SUCCESS_MESSAGE'));
         }
         this.avatarFile = null;
         this.avatarUrl = '';
         this.activeDialCode = '';
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message
             ? error.message
             : this.$t('CONTACT_FORM.DELETE_AVATAR.API.ERROR_MESSAGE')
@@ -419,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 f8862dceaf38b..696d758481f31 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -1,182 +1,14 @@
-<template>
-  <div class="relative items-center p-4 bg-white dark:bg-slate-900 w-full">
-    <div class="text-left rtl:text-right flex flex-col gap-2 w-full">
-      <div class="flex justify-between flex-row">
-        <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 gap-2 min-w-0 w-full">
-          <h3
-            class="flex-shrink min-w-0 text-base text-slate-800 dark:text-slate-100 capitalize my-0 max-w-full break-words"
-          >
-            {{ 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 gap-2 items-start w-full">
-          <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 timeMixin from 'dashboard/mixins/time';
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons.vue';
-
 import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import adminMixin from '../../../../mixins/isAdmin';
-import { mapGetters } from 'vuex';
 import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -194,16 +26,11 @@ export default {
     NewConversation,
     ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin, timeMixin],
   props: {
     contact: {
       type: Object,
       default: () => ({}),
     },
-    channelType: {
-      type: String,
-      default: '',
-    },
     showAvatar: {
       type: Boolean,
       default: true,
@@ -217,6 +44,12 @@ export default {
       default: 'chevron-right',
     },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   data() {
     return {
       showEditModal: false,
@@ -260,6 +93,7 @@ export default {
     },
   },
   methods: {
+    dynamicTime,
     toggleMergeModal() {
       this.showMergeModal = !this.showMergeModal;
     },
@@ -267,7 +101,7 @@ export default {
       this.showEditModal = !this.showEditModal;
     },
     onPanelToggle() {
-      this.$emit('toggle-panel');
+      this.$emit('togglePanel');
     },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
@@ -299,8 +133,8 @@ export default {
     async deleteContact({ id }) {
       try {
         await this.$store.dispatch('contacts/delete', id);
-        this.$emit('panel-close');
-        this.showAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
+        this.$emit('panelClose');
+        useAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
 
         if (isAConversationRoute(this.$route.name)) {
           this.$router.push({
@@ -316,7 +150,7 @@ export default {
           });
         }
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message
             ? error.message
             : this.$t('DELETE_CONTACT.API.ERROR_MESSAGE')
@@ -329,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 02bfeff09f1d2..3924ec22d003a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,24 +1,65 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    href: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    emoji: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    showCopy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+    },
+  },
+};
+</script>
+
 <template>
-  <div class="ltr:-ml-1 rtl:-mr-1 h-5 w-full">
+  <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
+      <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
-        class="ltr:ml-1 rtl:mr-1 flex-shrink-0"
+        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
       />
       <span
         v-if="value"
-        class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
         :title="value"
       >
         {{ value }}
       </span>
-      <span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
+      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
 
@@ -38,62 +79,21 @@
       v-else
       class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
     >
-      <emoji-or-icon
+      <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
-        class="ltr:ml-1 rtl:mr-1 flex-shrink-0"
+        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
       />
       <span
         v-if="value"
-        class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
       >
         {{ value }}
       </span>
-      <span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
+      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
     </div>
   </div>
 </template>
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  mixins: [alertMixin],
-  props: {
-    href: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    emoji: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-    showCopy: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.value);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 075fff1d0794c..21ed74e6ac791 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -1,244 +1,7 @@
-<template>
-  <form class="conversation--form w-full" @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="gap-2 flex flex-row">
-        <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-slate-700 dark:text-slate-100 text-sm"
-              >
-                {{ 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="mb-3 mt-px">
-                    <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-slate-500 ltr:ml-1 rtl:mr-1 font-medium text-xs 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 gap-2 py-2 px-0 w-full"
-    >
-      <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="flex top-0 bottom-0 z-30 gap-2 right-0 left-0 items-center justify-center flex-col absolute w-full h-full 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';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead.vue';
@@ -246,11 +9,11 @@ import CannedResponse from 'dashboard/components/widgets/conversation/CannedResp
 import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert';
 import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
 import WhatsappTemplates from './WhatsappTemplates.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { getInboxSource } from 'dashboard/helper/inbox';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, requiredIf } from '@vuelidate/validators';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FileUpload from 'vue-upload-component';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
@@ -260,7 +23,6 @@ import {
   appendSignature,
   removeSignature,
 } from 'dashboard/helper/editorHelper';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -274,7 +36,7 @@ export default {
     AttachmentPreview,
     MessageSignatureMissingAlert,
   },
-  mixins: [alertMixin, uiSettingsMixin, inboxMixin, fileUploadMixin],
+  mixins: [inboxMixin, fileUploadMixin],
   props: {
     contact: {
       type: Object,
@@ -284,10 +46,13 @@ export default {
       type: Function,
       default: () => {},
     },
-    channelType: {
-      type: String,
-      default: '',
-    },
+  },
+  setup() {
+    const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =
+      useUISettings();
+    const v$ = useVuelidate();
+
+    return { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox, v$ };
   },
   data() {
     return {
@@ -303,16 +68,18 @@ export default {
       attachedFiles: [],
     };
   },
-  validations: {
-    subject: {
-      required: requiredIf('isAnEmailInbox'),
-    },
-    message: {
-      required,
-    },
-    targetInbox: {
-      required,
-    },
+  validations() {
+    return {
+      subject: {
+        required: requiredIf(this.isAnEmailInbox),
+      },
+      message: {
+        required,
+      },
+      targetInbox: {
+        required,
+      },
+    };
   },
   computed: {
     ...mapGetters({
@@ -323,7 +90,7 @@ export default {
       messageSignature: 'getMessageSignature',
     }),
     sendWithSignature() {
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     signatureToApply() {
       return this.messageSignature;
@@ -468,10 +235,8 @@ export default {
         });
       };
     },
-    removeAttachment(itemIndex) {
-      this.attachedFiles = this.attachedFiles.filter(
-        (item, index) => itemIndex !== index
-      );
+    removeAttachment(attachments) {
+      this.attachedFiles = attachments;
     },
     onCancel() {
       this.$emit('cancel');
@@ -497,8 +262,8 @@ export default {
     },
     onFormSubmit() {
       const isFromWhatsApp = false;
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.createConversation({
@@ -515,15 +280,12 @@ export default {
           message: this.$t('NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
         };
         this.onSuccess();
-        this.showAlert(
-          this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'),
-          action
-        );
+        useAlert(this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
       } catch (error) {
         if (error instanceof ExceptionWithMessage) {
-          this.showAlert(error.data);
+          useAlert(error.data);
         } else {
-          this.showAlert(this.$t('NEW_CONVERSATION.FORM.ERROR_MESSAGE'));
+          useAlert(this.$t('NEW_CONVERSATION.FORM.ERROR_MESSAGE'));
         }
       }
     },
@@ -556,6 +318,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;
@@ -574,6 +576,7 @@ export default {
 .file-uploads {
   @apply text-start;
 }
+
 .multiselect-wrap--small.has-multi-select-error {
   ::v-deep {
     .multiselect__tags {
@@ -586,9 +589,11 @@ export default {
   .mention--box {
     @apply left-0 m-auto right-0 top-auto h-fit;
   }
+
   .multiselect .multiselect__content .multiselect__option span {
     @apply inline-flex w-6 text-slate-600 dark:text-slate-400;
   }
+
   .multiselect .multiselect__content .multiselect__option {
     @apply py-0.5 px-1;
   }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
index c33b9031df7c8..b5c3a77a48ee3 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 8099da4164a10..21f1de0e33f28 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 b7527c09647e4..a0a579bbfe067 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 a4152051d5edc..564e8415dda02 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 dae4f926bbb0b..8ba5b21c965e8 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 20bef48f629fb..3c127b857cc90 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -1,6 +1,188 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useRoute } from 'dashboard/composables/route';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
+
+const props = defineProps({
+  attributeType: {
+    type: String,
+    default: 'conversation_attribute',
+  },
+  contactId: { type: Number, default: null },
+  attributeFrom: {
+    type: String,
+    required: true,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: '',
+  },
+  startAt: {
+    type: String,
+    default: 'even',
+    validator: value => value === 'even' || value === 'odd',
+  },
+});
+
+const store = useStore();
+const getters = useStoreGetters();
+const route = useRoute();
+const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const [showAllAttributes, toggleShowAllAttributes] = useToggle(false);
+
+const currentChat = computed(() => getters.getSelectedChat.value);
+const attributes = computed(() =>
+  getters['attributes/getAttributesByModel'].value(props.attributeType)
+);
+
+const contactIdentifier = computed(
+  () =>
+    currentChat.value.meta?.sender?.id ||
+    route.params.contactId ||
+    props.contactId
+);
+
+const contact = computed(() =>
+  getters['contacts/getContact'].value(contactIdentifier.value)
+);
+
+const customAttributes = computed(() => {
+  if (props.attributeType === 'conversation_attribute')
+    return currentChat.value.custom_attributes || {};
+  return contact.value.custom_attributes || {};
+});
+
+const conversationId = computed(() => currentChat.value.id);
+
+const toggleButtonText = computed(() =>
+  !showAllAttributes.value
+    ? t('CUSTOM_ATTRIBUTES.SHOW_MORE')
+    : t('CUSTOM_ATTRIBUTES.SHOW_LESS')
+);
+
+const filteredAttributes = computed(() =>
+  attributes.value.map(attribute => {
+    // Check if the attribute key exists in customAttributes
+    const hasValue = Object.hasOwnProperty.call(
+      customAttributes.value,
+      attribute.attribute_key
+    );
+    const isCheckbox = attribute.attribute_display_type === 'checkbox';
+    const defaultValue = isCheckbox ? false : '';
+
+    return {
+      ...attribute,
+      // Set value from customAttributes if it exists, otherwise use default value
+      value: hasValue
+        ? customAttributes.value[attribute.attribute_key]
+        : defaultValue,
+    };
+  })
+);
+
+const displayedAttributes = computed(() => {
+  // Show only the first 5 attributes or all depending on showAllAttributes
+  if (showAllAttributes.value || filteredAttributes.value.length <= 5) {
+    return filteredAttributes.value;
+  }
+  return filteredAttributes.value.slice(0, 5);
+});
+
+const showMoreUISettingsKey = computed(
+  () => `show_all_attributes_${props.attributeFrom}`
+);
+
+const initializeSettings = () => {
+  showAllAttributes.value =
+    uiSettings.value[showMoreUISettingsKey.value] || false;
+};
+
+const onClickToggle = () => {
+  toggleShowAllAttributes();
+  updateUISettings({
+    [showMoreUISettingsKey.value]: showAllAttributes.value,
+  });
+};
+
+const onUpdate = async (key, value) => {
+  const updatedAttributes = { ...customAttributes.value, [key]: value };
+  try {
+    if (props.attributeType === 'conversation_attribute') {
+      await store.dispatch('updateCustomAttributes', {
+        conversationId: conversationId.value,
+        customAttributes: updatedAttributes,
+      });
+    } else {
+      store.dispatch('contacts/update', {
+        id: props.contactId,
+        custom_attributes: updatedAttributes,
+      });
+    }
+    useAlert(t('CUSTOM_ATTRIBUTES.FORM.UPDATE.SUCCESS'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t('CUSTOM_ATTRIBUTES.FORM.UPDATE.ERROR');
+    useAlert(errorMessage);
+  }
+};
+
+const onDelete = async key => {
+  try {
+    const { [key]: remove, ...updatedAttributes } = customAttributes.value;
+    if (props.attributeType === 'conversation_attribute') {
+      await store.dispatch('updateCustomAttributes', {
+        conversationId: conversationId.value,
+        customAttributes: updatedAttributes,
+      });
+    } else {
+      store.dispatch('contacts/deleteCustomAttributes', {
+        id: props.contactId,
+        customAttributes: [key],
+      });
+    }
+    useAlert(t('CUSTOM_ATTRIBUTES.FORM.DELETE.SUCCESS'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t('CUSTOM_ATTRIBUTES.FORM.DELETE.ERROR');
+    useAlert(errorMessage);
+  }
+};
+
+const onCopy = async attributeValue => {
+  await copyTextToClipboard(attributeValue);
+  useAlert(t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
+};
+
+onMounted(() => {
+  initializeSettings();
+});
+
+const evenClass = [
+  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
+  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+];
+const oddClass = [
+  '[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
+  'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
+];
+
+const wrapperClass = computed(() => {
+  return props.startAt === 'even' ? evenClass : oddClass;
+});
+</script>
+
+<!-- TODO: After migration to Vue 3, remove the top level div -->
 <template>
-  <div class="custom-attributes--panel">
-    <custom-attribute
+  <div :class="wrapperClass">
+    <CustomAttribute
       v-for="attribute in displayedAttributes"
       :key="attribute.id"
       :attribute-key="attribute.attribute_key"
@@ -9,11 +191,11 @@
       :label="attribute.attribute_display_name"
       :description="attribute.attribute_description"
       :value="attribute.value"
-      :show-actions="true"
+      show-actions
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
-      :class="attributeClass"
       :contact-id="contactId"
+      class="border-b border-solid border-slate-50 dark:border-slate-700/50"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"
@@ -39,167 +221,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
-export default {
-  components: {
-    CustomAttribute,
-  },
-  mixins: [alertMixin, attributeMixin, uiSettingsMixin],
-  props: {
-    attributeType: {
-      type: String,
-      default: 'conversation_attribute',
-    },
-    attributeClass: {
-      type: String,
-      default: '',
-    },
-    contactId: { type: Number, default: null },
-    attributeFrom: {
-      type: String,
-      required: true,
-    },
-    emptyStateMessage: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      showAllAttributes: false,
-    };
-  },
-  computed: {
-    toggleButtonText() {
-      return !this.showAllAttributes
-        ? this.$t('CUSTOM_ATTRIBUTES.SHOW_MORE')
-        : this.$t('CUSTOM_ATTRIBUTES.SHOW_LESS');
-    },
-    filteredAttributes() {
-      return this.attributes.map(attribute => {
-        // Check if the attribute key exists in customAttributes
-        const hasValue = Object.hasOwnProperty.call(
-          this.customAttributes,
-          attribute.attribute_key
-        );
-
-        const isCheckbox = attribute.attribute_display_type === 'checkbox';
-        const defaultValue = isCheckbox ? false : '';
-
-        return {
-          ...attribute,
-          // Set value from customAttributes if it exists, otherwise use default value
-          value: hasValue
-            ? this.customAttributes[attribute.attribute_key]
-            : defaultValue,
-        };
-      });
-    },
-    displayedAttributes() {
-      // Show only the first 5 attributes or all depending on showAllAttributes
-      if (this.showAllAttributes || this.filteredAttributes.length <= 5) {
-        return this.filteredAttributes;
-      }
-      return this.filteredAttributes.slice(0, 5);
-    },
-    showMoreUISettingsKey() {
-      return `show_all_attributes_${this.attributeFrom}`;
-    },
-  },
-  mounted() {
-    this.initializeSettings();
-  },
-  methods: {
-    initializeSettings() {
-      this.showAllAttributes =
-        this.uiSettings[this.showMoreUISettingsKey] || false;
-    },
-    onClickToggle() {
-      this.showAllAttributes = !this.showAllAttributes;
-      this.updateUISettings({
-        [this.showMoreUISettingsKey]: this.showAllAttributes,
-      });
-    },
-    async onUpdate(key, value) {
-      const updatedAttributes = { ...this.customAttributes, [key]: value };
-      try {
-        if (this.attributeType === 'conversation_attribute') {
-          await this.$store.dispatch('updateCustomAttributes', {
-            conversationId: this.conversationId,
-            customAttributes: updatedAttributes,
-          });
-        } else {
-          this.$store.dispatch('contacts/update', {
-            id: this.contactId,
-            custom_attributes: updatedAttributes,
-          });
-        }
-        this.showAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.UPDATE.SUCCESS'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('CUSTOM_ATTRIBUTES.FORM.UPDATE.ERROR');
-        this.showAlert(errorMessage);
-      }
-    },
-    async onDelete(key) {
-      try {
-        const { [key]: remove, ...updatedAttributes } = this.customAttributes;
-        if (this.attributeType === 'conversation_attribute') {
-          await this.$store.dispatch('updateCustomAttributes', {
-            conversationId: this.conversationId,
-            customAttributes: updatedAttributes,
-          });
-        } else {
-          this.$store.dispatch('contacts/deleteCustomAttributes', {
-            id: this.contactId,
-            customAttributes: [key],
-          });
-        }
-
-        this.showAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.DELETE.SUCCESS'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('CUSTOM_ATTRIBUTES.FORM.DELETE.ERROR');
-        this.showAlert(errorMessage);
-      }
-    },
-    async onCopy(attributeValue) {
-      await copyTextToClipboard(attributeValue);
-      this.showAlert(this.$t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.custom-attributes--panel {
-  .conversation--attribute {
-    @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
-  }
-
-  &.odd {
-    .conversation--attribute {
-      &:nth-child(2n + 1) {
-        @apply bg-slate-25 dark:bg-slate-800/50;
-      }
-    }
-  }
-
-  &.even {
-    .conversation--attribute {
-      &:nth-child(2n) {
-        @apply bg-slate-25 dark:bg-slate-800/50;
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index df0d6d7ec9186..942ba115cc4a6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -1,5 +1,87 @@
+<script>
+import { ref } from 'vue';
+import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import Spinner from 'shared/components/Spinner.vue';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
+
+export default {
+  components: {
+    Spinner,
+    LabelDropdown,
+    AddLabel,
+  },
+  setup() {
+    const { isAdmin } = useAdmin();
+
+    const {
+      savedLabels,
+      activeLabels,
+      accountLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+    } = useConversationLabels();
+
+    const conversationLabelBoxRef = ref(null);
+    const showSearchDropdownLabel = ref(false);
+
+    const toggleLabels = () => {
+      showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
+    };
+
+    const closeDropdownLabel = () => {
+      showSearchDropdownLabel.value = false;
+    };
+
+    const keyboardEvents = {
+      KeyL: {
+        action: e => {
+          e.preventDefault();
+          toggleLabels();
+        },
+      },
+      Escape: {
+        action: () => {
+          if (showSearchDropdownLabel.value) {
+            toggleLabels();
+          }
+        },
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, conversationLabelBoxRef);
+    return {
+      isAdmin,
+      savedLabels,
+      activeLabels,
+      accountLabels,
+      addLabelToConversation,
+      removeLabelFromConversation,
+      conversationLabelBoxRef,
+      showSearchDropdownLabel,
+      closeDropdownLabel,
+      toggleLabels,
+    };
+  },
+  data() {
+    return {
+      selectedLabels: [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      conversationUiFlags: 'conversationLabels/getUIFlags',
+    }),
+  },
+};
+</script>
+
 <template>
-  <div class="sidebar-labels-wrap">
+  <div ref="conversationLabelBoxRef" class="sidebar-labels-wrap">
     <div
       v-if="!conversationUiFlags.isFetching"
       class="contact-conversation--list"
@@ -9,13 +91,13 @@
         class="label-wrap"
         @keyup.esc="closeDropdownLabel"
       >
-        <add-label @add="toggleLabels" />
+        <AddLabel @add="toggleLabels" />
         <woot-label
           v-for="label in activeLabels"
           :key="label.id"
           :title="label.title"
           :description="label.description"
-          :show-close="true"
+          show-close
           :color="label.color"
           variant="smooth"
           class="max-w-[calc(100%-0.5rem)]"
@@ -27,7 +109,7 @@
             :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
             class="dropdown-pane"
           >
-            <label-dropdown
+            <LabelDropdown
               v-if="showSearchDropdownLabel"
               :account-labels="accountLabels"
               :selected-labels="savedLabels"
@@ -39,76 +121,10 @@
         </div>
       </div>
     </div>
-    <spinner v-else />
+    <Spinner v-else />
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner.vue';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import adminMixin from 'dashboard/mixins/isAdmin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
-
-export default {
-  components: {
-    Spinner,
-    LabelDropdown,
-    AddLabel,
-  },
-
-  mixins: [conversationLabelMixin, adminMixin, keyboardEventListenerMixins],
-  props: {
-    conversationId: {
-      type: Number,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      selectedLabels: [],
-      showSearchDropdownLabel: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      conversationUiFlags: 'conversationLabels/getUIFlags',
-      labelUiFlags: 'conversationLabels/getUIFlags',
-    }),
-  },
-  methods: {
-    toggleLabels() {
-      this.showSearchDropdownLabel = !this.showSearchDropdownLabel;
-    },
-    closeDropdownLabel() {
-      this.showSearchDropdownLabel = false;
-    },
-    getKeyboardEvents() {
-      return {
-        KeyL: {
-          action: e => {
-            e.preventDefault();
-            this.toggleLabels();
-          },
-        },
-        Escape: {
-          action: () => {
-            if (this.showSearchDropdownLabel) {
-              this.toggleLabels();
-            }
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-  },
-};
-</script>
-
 <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 d84158477292e..b7d5e17dd8441 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -1,40 +1,5 @@
-<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="search-link flex-1 items-center gap-1 text-left h-6 rtl:mr-3 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
-      >
-        <div class="flex">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
-            size="16"
-          />
-        </div>
-        <p
-          class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm 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 timeMixin from '../../../../mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
@@ -49,7 +14,7 @@ export default {
       },
     },
   },
-  mixins: [timeMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
@@ -66,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 1988e9974ab90..0a4fe57e6c52c 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 ec49a6d964de6..e9ada22ff7f5d 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@@ -1,40 +1,10 @@
-<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 { required, minLength } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 export default {
-  mixins: [alertMixin],
   props: {
     filterType: {
       type: Number,
@@ -49,7 +19,9 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       show: true,
@@ -59,7 +31,7 @@ export default {
 
   computed: {
     isButtonDisabled() {
-      return this.$v.name.$invalid;
+      return this.v$.name.$invalid;
     },
   },
 
@@ -75,8 +47,8 @@ export default {
       this.$emit('close');
     },
     async saveCustomViews() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {
@@ -101,10 +73,40 @@ export default {
             ? errorMessage
             : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
       this.openLastSavedItem();
     },
   },
 };
 </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 75dae4e7ffe99..843dea5270bc4 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
@@ -1,25 +1,7 @@
-<!-- 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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
 export default {
-  mixins: [alertMixin],
   props: {
     showDeletePopup: {
       type: Boolean,
@@ -79,7 +61,7 @@ export default {
         const filterType = this.activeCustomViews;
         await this.$store.dispatch('customViews/delete', { id, filterType });
         this.closeDeletePopup();
-        this.showAlert(
+        useAlert(
           this.activeFilterType === 0
             ? this.$t('FILTER.CUSTOM_VIEWS.DELETE.API_FOLDERS.SUCCESS_MESSAGE')
             : this.$t('FILTER.CUSTOM_VIEWS.DELETE.API_SEGMENTS.SUCCESS_MESSAGE')
@@ -94,7 +76,7 @@ export default {
             : this.$t(
                 'FILTER.CUSTOM_VIEWS.DELETE.API_SEGMENTS.SUCCESS_MESSAGE'
               );
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
       this.openLastItemAfterDelete();
     },
@@ -104,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/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index b02f29342dad8..0f30f1efc63ac 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -8,6 +8,7 @@ import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
 const AppContainer = () => import('./Dashboard.vue');
+const Captain = () => import('./Captain.vue');
 const Suspended = () => import('./suspended/Index.vue');
 
 export default {
@@ -17,6 +18,14 @@ export default {
       path: frontendURL('accounts/:account_id'),
       component: AppContainer,
       children: [
+        {
+          path: frontendURL('accounts/:accountId/captain'),
+          name: 'captain',
+          component: Captain,
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
+        },
         ...inboxRoutes,
         ...conversation.routes,
         ...settings.routes,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
index 52ddcc921fa61..b1e334b2cc4e3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -1,54 +1,15 @@
-<!-- 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 gap-2 py-2 px-0 w-full">
-            <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 alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
 import allLocales from 'shared/constants/locales.js';
 import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+
 export default {
   components: {
     Modal,
   },
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -59,6 +20,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedLocale: '',
@@ -94,8 +58,8 @@ export default {
   },
   methods: {
     async onCreate() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       const updatedLocales = this.addedLocales;
@@ -120,7 +84,7 @@ export default {
           error?.message ||
           this.$t('HELP_CENTER.PORTAL.ADD_LOCALE.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
         this.isUpdating = false;
       }
     },
@@ -130,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 a1d8f2dd34d2b..2b9a09d6d41df 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 3ebdf011f8878..18281aec371a6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,88 +1,5 @@
-<template>
-  <div
-    class="text-slate-700 dark:text-slate-100 last:border-b-0 bg-white dark:bg-slate-900 my-0 -mx-4 grid grid-cols-1 lg:grid-cols-12 gap-4 border-b border-slate-50 dark:border-slate-800 px-6 py-3"
-  >
-    <span class="items-start flex gap-2 col-span-6 text-left">
-      <fluent-icon
-        v-if="showDragIcon"
-        size="20"
-        class="block cursor-move flex-shrink-0 h-4 mt-1 w-4 text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
-        icon="grab-handle"
-      />
-      <div class="flex flex-col truncate">
-        <router-link :to="articleUrl(id)">
-          <h6
-            :title="title"
-            class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0.5 leading-6 font-medium hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ title }}
-          </h6>
-        </router-link>
-        <div class="flex gap-1 items-center">
-          <Thumbnail
-            v-if="author"
-            :src="author.thumbnail"
-            :username="author.name"
-            size="14px"
-          />
-          <div
-            v-else
-            v-tooltip.right="
-              $t('HELP_CENTER.TABLE.COLUMNS.AUTHOR_NOT_AVAILABLE')
-            "
-            class="flex items-center justify-center rounded w-3.5 h-3.5 bg-woot-100 dark:bg-woot-700"
-          >
-            <fluent-icon
-              icon="person"
-              type="filled"
-              size="10"
-              class="text-woot-300 dark:text-woot-300"
-            />
-          </div>
-          <span class="font-normal text-slate-700 dark:text-slate-200 text-sm">
-            {{ articleAuthorName }}
-          </span>
-        </div>
-      </div>
-    </span>
-    <span class="flex items-center col-span-2">
-      <router-link
-        class="text-sm hover:underline p-0.5 truncate hover:bg-slate-25 hover:rounded-md"
-        :to="getCategoryRoute(category.slug)"
-      >
-        <span :title="category.name">
-          {{ category.name }}
-        </span>
-      </router-link>
-    </span>
-    <span
-      class="flex items-center text-xs lg:text-sm"
-      :title="formattedViewCount"
-    >
-      {{ readableViewCount }}
-      <span class="lg:hidden ml-1">
-        {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
-      </span>
-    </span>
-    <span class="flex items-center capitalize">
-      <woot-label
-        class="!mb-0"
-        :title="status"
-        size="small"
-        variant="smooth"
-        :color-scheme="labelColor"
-      />
-    </span>
-    <span
-      class="flex items-center justify-end col-span-2 first-letter:uppercase text-slate-700 dark:text-slate-100 text-xs"
-    >
-      {{ lastUpdatedAt }}
-    </span>
-  </div>
-</template>
-
 <script>
-import timeMixin from 'dashboard/mixins/time';
+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';
@@ -91,7 +8,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [timeMixin, portalMixin],
+  mixins: [portalMixin],
   props: {
     showDragIcon: {
       type: Boolean,
@@ -103,7 +20,6 @@ export default {
     },
     title: {
       type: String,
-      default: '',
       required: true,
     },
     author: {
@@ -131,7 +47,7 @@ export default {
 
   computed: {
     lastUpdatedAt() {
-      return this.dynamicTime(this.updatedAt);
+      return dynamicTime(this.updatedAt);
     },
     formattedViewCount() {
       return Number(this.views || 0).toLocaleString('en');
@@ -166,3 +82,86 @@ export default {
   },
 };
 </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"
+  >
+    <span class="flex items-start col-span-6 gap-2 text-left">
+      <fluent-icon
+        v-if="showDragIcon"
+        size="20"
+        class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
+        icon="grab-handle"
+      />
+      <div class="flex flex-col truncate">
+        <router-link :to="articleUrl(id)">
+          <h6
+            :title="title"
+            class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0.5 leading-6 font-medium hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ title }}
+          </h6>
+        </router-link>
+        <div class="flex items-center gap-1">
+          <Thumbnail
+            v-if="author"
+            :src="author.thumbnail"
+            :username="author.name"
+            size="14px"
+          />
+          <div
+            v-else
+            v-tooltip.right="
+              $t('HELP_CENTER.TABLE.COLUMNS.AUTHOR_NOT_AVAILABLE')
+            "
+            class="flex items-center justify-center rounded w-3.5 h-3.5 bg-woot-100 dark:bg-woot-700"
+          >
+            <fluent-icon
+              icon="person"
+              type="filled"
+              size="10"
+              class="text-woot-300 dark:text-woot-300"
+            />
+          </div>
+          <span class="text-sm font-normal text-slate-700 dark:text-slate-200">
+            {{ articleAuthorName }}
+          </span>
+        </div>
+      </div>
+    </span>
+    <span class="flex items-center col-span-2">
+      <router-link
+        class="text-sm hover:underline p-0.5 truncate hover:bg-slate-25 hover:rounded-md"
+        :to="getCategoryRoute(category.slug)"
+      >
+        <span :title="category.name">
+          {{ category.name }}
+        </span>
+      </router-link>
+    </span>
+    <span
+      class="flex items-center text-xs lg:text-sm"
+      :title="formattedViewCount"
+    >
+      {{ readableViewCount }}
+      <span class="ml-1 lg:hidden">
+        {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
+      </span>
+    </span>
+    <span class="flex items-center capitalize">
+      <woot-label
+        class="!mb-0"
+        :title="status"
+        size="small"
+        variant="smooth"
+        :color-scheme="labelColor"
+      />
+    </span>
+    <span
+      class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
+    >
+      {{ lastUpdatedAt }}
+    </span>
+  </div>
+</template>
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 836f7725021a3..79c578c48d4d6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -1,53 +1,9 @@
-<template>
-  <button
-    class="flex flex-col gap-1 bg-white dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 rounded-md py-1 px-2 w-full group border border-transparent border-solid focus:outline-none focus:bg-slate-25 focus:border-slate-500 dark:focus:border-slate-400 dark:focus:bg-slate-800 cursor-pointer"
-    @click="handlePreview"
-  >
-    <h4
-      class="text-sm ltr:text-left rtl:text-right w-full mb-0 text-slate-900 dark:text-slate-25 -mx-1 rounded-sm hover:underline group-hover:underline"
-    >
-      {{ title }}
-    </h4>
-
-    <div class="flex content-between items-center gap-0.5 w-full">
-      <p
-        class="text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300 mb-0 w-full"
-      >
-        {{ locale }}
-        {{ ` / ` }}
-        {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
-      </p>
-      <div class="flex gap-0.5">
-        <woot-button
-          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
-          variant="hollow"
-          color-scheme="secondary"
-          size="tiny"
-          icon="copy"
-          class="invisible group-hover:visible"
-          @click="handleCopy"
-        />
-        <woot-button
-          class="insert-button"
-          variant="smooth"
-          color-scheme="secondary"
-          size="tiny"
-          @click="handleInsert"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
-        </woot-button>
-      </div>
-    </div>
-  </button>
-</template>
-
 <script>
+import { useAlert } from 'dashboard/composables';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   name: 'ArticleSearchResultItem',
-  mixins: [alertMixin],
   props: {
     id: {
       type: Number,
@@ -57,10 +13,6 @@ export default {
       type: String,
       default: 'Untitled',
     },
-    body: {
-      type: String,
-      default: '',
-    },
     url: {
       type: String,
       default: '',
@@ -86,8 +38,51 @@ export default {
     async handleCopy(e) {
       e.stopPropagation();
       await copyTextToClipboard(this.url);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+      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"
+    @click="handlePreview"
+  >
+    <h4
+      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-slate-900 dark:text-slate-25 hover:underline group-hover:underline"
+    >
+      {{ title }}
+    </h4>
+
+    <div class="flex content-between items-center gap-0.5 w-full">
+      <p
+        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300"
+      >
+        {{ locale }}
+        {{ ` / ` }}
+        {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
+      </p>
+      <div class="flex gap-0.5">
+        <woot-button
+          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
+          variant="hollow"
+          color-scheme="secondary"
+          size="tiny"
+          icon="copy"
+          class="invisible group-hover:visible"
+          @click="handleCopy"
+        />
+        <woot-button
+          class="insert-button"
+          variant="smooth"
+          color-scheme="secondary"
+          size="tiny"
+          @click="handleInsert"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
+        </woot-button>
+      </div>
+    </div>
+  </button>
+</template>
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 168ac792c3238..704ee64c63cb9 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -1,3 +1,30 @@
+<script>
+import IframeLoader from 'shared/components/IframeLoader.vue';
+
+export default {
+  name: 'ArticleView',
+  components: {
+    IframeLoader,
+  },
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onBack(e) {
+      e.stopPropagation();
+      this.$emit('back');
+    },
+    onInsert(e) {
+      e.stopPropagation();
+      this.$emit('insert');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
     <div class="py-1">
@@ -12,7 +39,7 @@
     </div>
     <div class="-ml-4 h-full overflow-y-auto">
       <div class="w-full h-full min-h-0">
-        <iframe-loader :url="url" />
+        <IframeLoader :url="url" />
       </div>
     </div>
 
@@ -38,30 +65,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import IframeLoader from 'shared/components/IframeLoader.vue';
-
-export default {
-  name: 'ArticleView',
-  components: {
-    IframeLoader,
-  },
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    onBack(e) {
-      e.stopPropagation();
-      this.$emit('back');
-    },
-    onInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert');
-    },
-  },
-};
-</script>
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 6614733165cf8..da139ddb51fc2 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -1,5 +1,51 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+defineProps({
+  title: {
+    type: String,
+    default: 'Chatwoot',
+  },
+});
+
+const emit = defineEmits(['search', 'close']);
+
+const articleSearchHeaderRef = ref(null);
+const searchInputRef = ref(null);
+const searchQuery = ref('');
+
+onMounted(() => {
+  searchInputRef.value.focus();
+});
+
+const onInput = e => {
+  emit('search', e.target.value);
+};
+
+const onClose = () => {
+  emit('close');
+};
+
+const keyboardEvents = {
+  Slash: {
+    action: e => {
+      e.preventDefault();
+      searchInputRef.value.focus();
+    },
+  },
+  Escape: {
+    action: () => {
+      onClose();
+    },
+    allowOnFocusedInput: true,
+  },
+};
+useKeyboardEvents(keyboardEvents, articleSearchHeaderRef);
+</script>
+
 <template>
-  <div class="flex flex-col py-1">
+  <div ref="articleSearchHeaderRef" 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 }}
@@ -20,63 +66,13 @@
         <fluent-icon icon="search" class="" size="18" />
       </div>
       <input
-        ref="searchInput"
+        ref="searchInputRef"
         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';
-
-export default {
-  name: 'ChatwootSearch',
-  mixins: [keyboardEventListenerMixins],
-  props: {
-    title: {
-      type: String,
-      default: 'Chatwoot',
-    },
-  },
-  data() {
-    return {
-      searchQuery: '',
-      isInputFocused: false,
-    };
-  },
-  mounted() {
-    this.$refs.searchInput.focus();
-  },
-  methods: {
-    onInput(e) {
-      this.$emit('search', e.target.value);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-    onFocus() {
-      this.isInputFocused = true;
-    },
-    onBlur() {
-      this.isInputFocused = false;
-    },
-    getKeyboardEvents() {
-      return {
-        Slash: {
-          action: e => {
-            e.preventDefault();
-            this.$refs.searchInput.focus();
-          },
-        },
-      };
-    },
-  },
-};
-</script>
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 b7370939f3e08..8e9b16ac48451 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,40 +1,6 @@
-<template>
-  <div
-    class="fixed flex items-center justify-center w-screen h-screen bg-modal-backdrop-light dark:bg-modal-backdrop-dark top-0 left-0 z-50"
-  >
-    <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 keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import { useAlert } from 'dashboard/composables';
 
 import SearchHeader from './Header.vue';
 import SearchResults from './SearchResults.vue';
@@ -42,7 +8,6 @@ import ArticleView from './ArticleView.vue';
 import ArticlesAPI from 'dashboard/api/helpCenter/articles';
 import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
 import portalMixin from '../../mixins/portalMixin';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   name: 'ArticleSearchPopover',
@@ -51,7 +16,7 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [portalMixin, alertMixin, keyboardEventListenerMixins],
+  mixins: [portalMixin],
   props: {
     selectedPortalSlug: {
       type: String,
@@ -145,21 +110,43 @@ export default {
       const article = this.activeArticle(id || this.activeId);
 
       this.$emit('insert', article);
-      this.showAlert(
-        this.$t('HELP_CENTER.ARTICLE_SEARCH.SUCCESS_ARTICLE_INSERTED')
-      );
+      useAlert(this.$t('HELP_CENTER.ARTICLE_SEARCH.SUCCESS_ARTICLE_INSERTED'));
       this.onClose();
     },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => {
-            this.onClose();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
   },
 };
 </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 4a6eb5b8b6b28..ca50c11e0ecae 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 1e8c2e92c0e76..cb0adbdbcd463 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 d946b1b1187ec..7e8c2d4284cdc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -1,11 +1,99 @@
+<script>
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+export default {
+  components: {
+    FluentIcon,
+    WootDropdownItem,
+    WootDropdownMenu,
+    MultiselectDropdownItems,
+  },
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    selectedValue: {
+      type: String,
+      default: '',
+    },
+    selectedLocale: {
+      type: String,
+      default: '',
+    },
+    shouldShowSettings: {
+      type: Boolean,
+      default: false,
+    },
+    allLocales: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showSortByDropdown: false,
+      showLocaleDropdown: false,
+    };
+  },
+  computed: {
+    shouldShowLocaleDropdown() {
+      return this.allLocales.length > 1;
+    },
+    switchableLocales() {
+      return this.allLocales.filter(
+        locale => locale.name !== this.selectedLocale
+      );
+    },
+  },
+  methods: {
+    openFilterModal() {
+      this.$emit('openModal');
+    },
+    openDropdown() {
+      this.$emit('open');
+      this.showSortByDropdown = true;
+    },
+    closeDropdown() {
+      this.$emit('close');
+      this.showSortByDropdown = false;
+    },
+    openLocaleDropdown() {
+      this.showLocaleDropdown = true;
+    },
+    closeLocaleDropdown() {
+      this.showLocaleDropdown = false;
+    },
+    onClickNewArticlePage() {
+      this.$emit('newArticlePage');
+    },
+    onClickSelectItem(value) {
+      const { name, code } = value;
+      this.closeLocaleDropdown();
+      if (!name || name === this.selectedLocale) {
+        return;
+      }
+      this.$emit('changeLocale', code);
+    },
+  },
+};
+</script>
+
 <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"
+    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 my-0 mx-2">
-        <h3 class="text-xl text-slate-800 dark:text-slate-100 font-medium mb-0">
+      <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">{{
@@ -34,10 +122,10 @@
       >
         {{ $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"
+          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
         >
           {{ selectedValue }}
-          <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
+          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
         </span>
       </woot-button>
       <div
@@ -45,8 +133,8 @@
         v-on-clickaway="closeDropdown"
         class="dropdown-pane dropdown-pane--open"
       >
-        <woot-dropdown-menu>
-          <woot-dropdown-item>
+        <WootDropdownMenu>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -55,8 +143,8 @@
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
             </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
+          </WootDropdownItem>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -65,8 +153,8 @@
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
             </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
+          </WootDropdownItem>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -75,8 +163,8 @@
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
             </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
+          </WootDropdownItem>
+        </WootDropdownMenu>
       </div>
       <woot-button
         v-if="shouldShowSettings"
@@ -95,12 +183,12 @@
           variant="hollow"
           @click="openLocaleDropdown"
         >
-          <div class="flex justify-between w-full min-w-0 items-center">
+          <div class="flex items-center justify-between w-full min-w-0">
             <span
-              class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
             >
               {{ selectedLocale }}
-              <Fluent-icon
+              <FluentIcon
                 class="dropdown-arrow"
                 icon="chevron-down"
                 size="14"
@@ -113,7 +201,7 @@
           v-on-clickaway="closeLocaleDropdown"
           class="dropdown-pane dropdown-pane--open"
         >
-          <multiselect-dropdown-items
+          <MultiselectDropdownItems
             :options="switchableLocales"
             :has-thumbnail="false"
             :selected-items="[selectedLocale]"
@@ -137,94 +225,6 @@
   </div>
 </template>
 
-<script>
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-export default {
-  components: {
-    FluentIcon,
-    WootDropdownItem,
-    WootDropdownMenu,
-    MultiselectDropdownItems,
-  },
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    selectedValue: {
-      type: String,
-      default: '',
-    },
-    selectedLocale: {
-      type: String,
-      default: '',
-    },
-    shouldShowSettings: {
-      type: Boolean,
-      default: false,
-    },
-    allLocales: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      showSortByDropdown: false,
-      showLocaleDropdown: false,
-    };
-  },
-  computed: {
-    shouldShowLocaleDropdown() {
-      return this.allLocales.length > 1;
-    },
-    switchableLocales() {
-      return this.allLocales.filter(
-        locale => locale.name !== this.selectedLocale
-      );
-    },
-  },
-  methods: {
-    openFilterModal() {
-      this.$emit('openModal');
-    },
-    openDropdown() {
-      this.$emit('open');
-      this.showSortByDropdown = true;
-    },
-    closeDropdown() {
-      this.$emit('close');
-      this.showSortByDropdown = false;
-    },
-    openLocaleDropdown() {
-      this.showLocaleDropdown = true;
-    },
-    closeLocaleDropdown() {
-      this.showLocaleDropdown = false;
-    },
-    onClickNewArticlePage() {
-      this.$emit('new-article-page');
-    },
-    onClickSelectItem(value) {
-      const { name, code } = value;
-      this.closeLocaleDropdown();
-      if (!name || name === this.selectedLocale) {
-        return;
-      }
-      this.$emit('change-locale', code);
-    },
-  },
-};
-</script>
-
 <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 67b9ccc6142bb..4555f8f14c2e6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -1,121 +1,11 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import wootConstants from 'dashboard/constants/globals';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 export default {
-  mixins: [alertMixin],
   props: {
     isSidebarOpen: {
       type: Boolean,
@@ -137,10 +27,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    shouldShowAddLocaleButton: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -188,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) {
@@ -200,7 +86,7 @@ export default {
         this.alertMessage =
           error?.message || this.statusUpdateErrorMessage(status);
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     statusUpdateSuccessMessage(status) {
@@ -233,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 bff12f5e7a1ca..5c204fe4c4332 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="app-wrapper flex h-full flex-grow-0 min-h-0 w-full">
-    <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 h-full min-h-0 overflow-hidden flex-1 px-0 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';
@@ -68,7 +9,7 @@ import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import portalMixin from '../mixins/portalMixin';
 import AddCategory from '../pages/categories/AddCategory.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -87,7 +28,15 @@ export default {
     UpgradePage,
     WootKeyShortcutModal,
   },
-  mixins: [portalMixin, uiSettingsMixin],
+  mixins: [portalMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       isOnDesktop: true,
@@ -106,7 +55,6 @@ export default {
       portals: 'portals/allPortals',
       categories: 'categories/allCategories',
       meta: 'portals/getMeta',
-      isFetching: 'portals/isFetchingPortals',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
 
@@ -334,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 c25717a0c5820..9a0ffb8a78cb6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -1,10 +1,197 @@
+<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="bg-white dark:bg-slate-900 rounded-md relative flex mb-3 p-4 border border-solid border-slate-100 dark:border-slate-600"
+      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" />
-      <div class="ml-2 rtl:ml-0 rtl:mr-2 flex-grow">
+      <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>
             <div class="flex items-center">
@@ -16,10 +203,10 @@
                 :color-scheme="labelColor"
                 size="small"
                 variant="smooth"
-                class="my-0 mx-2"
+                class="mx-2 my-0"
               />
             </div>
-            <p class="text-sm mb-0 text-slate-700 dark:text-slate-200">
+            <p class="mb-0 text-sm text-slate-700 dark:text-slate-200">
               {{ articleCount }}
               {{
                 $t(
@@ -75,7 +262,7 @@
         </header>
         <div class="mb-12">
           <h2
-            class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
+            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
           >
             {{
               $t(
@@ -87,7 +274,7 @@
             class="flex justify-between mr-[6.25rem] rtl:mr-0 rtl:ml-[6.25rem] max-w-[80vw]"
           >
             <div class="flex flex-col">
-              <div class="flex items-start flex-col mb-4">
+              <div class="flex flex-col items-start mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
@@ -97,7 +284,7 @@
                   {{ portal.name }}
                 </span>
               </div>
-              <div class="flex items-start flex-col mb-4">
+              <div class="flex flex-col items-start mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
@@ -109,7 +296,7 @@
               </div>
             </div>
             <div class="flex flex-col">
-              <div class="flex items-start flex-col mb-4">
+              <div class="flex flex-col items-start mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
@@ -119,7 +306,7 @@
                   {{ portal.slug }}
                 </span>
               </div>
-              <div class="flex items-start flex-col mb-4">
+              <div class="flex flex-col items-start mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
@@ -131,7 +318,7 @@
               </div>
             </div>
             <div class="flex flex-col">
-              <div class="flex items-start flex-col mb-4">
+              <div class="flex flex-col items-start mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
@@ -139,12 +326,12 @@
                 }}</label>
                 <div class="flex items-center">
                   <div
-                    class="w-4 h-4 rounded-md mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-25 dark:border-slate-800"
+                    class="w-4 h-4 mr-1 border border-solid rounded-md rtl:mr-0 rtl:ml-1 border-slate-25 dark:border-slate-800"
                     :style="{ background: portal.color }"
                   />
                 </div>
               </div>
-              <div class="flex items-start flex-col mb-4">
+              <div class="flex flex-col items-start mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
@@ -159,7 +346,7 @@
         </div>
         <div class="mb-12">
           <h2
-            class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
+            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
           >
             {{
               $t(
@@ -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,184 +375,3 @@
     />
   </div>
 </template>
-
-<script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import LocaleItemTable from './PortalListItemTable.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import alertMixin from 'shared/mixins/alertMixin';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    thumbnail,
-    LocaleItemTable,
-  },
-  mixins: [alertMixin, uiSettingsMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    status: {
-      type: String,
-      default: '',
-      values: ['archived', 'draft', 'published'],
-    },
-  },
-  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 {
-        this.showAlert(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 {
-        this.showAlert(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 d07e14271aa7b..bf3e08c6fb8c4 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -1,5 +1,31 @@
+<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>
+  <table class="woot-table">
     <thead>
       <tr>
         <th scope="col">
@@ -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 3de2a6f52bc93..a34bfb4fc3516 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 4417fdf57cb87..fb62b3c94f30a 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 7572f5b802c55..4049633df0016 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 1a6ab873ab723..886c06200dfbd 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -1,13 +1,84 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import portalMixin from '../mixins/portalMixin';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  mixins: [portalMixin],
+  props: {
+    portal: {
+      type: Object,
+      default: () => ({}),
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    activePortalSlug: {
+      type: String,
+      default: '',
+    },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      selectedLocale: null,
+    };
+  },
+  computed: {
+    locales() {
+      return this.portal?.config?.allowed_locales;
+    },
+    articlesCount() {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.reduce((acc, locale) => {
+        return acc + locale.articles_count;
+      }, 0);
+    },
+  },
+  mounted() {
+    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
+  },
+  methods: {
+    onClick(event, code, portal) {
+      event.preventDefault();
+      this.$router.push({
+        name: 'list_all_locale_articles',
+        params: {
+          portalSlug: portal.slug,
+          locale: code,
+        },
+      });
+      this.$emit('fetchPortal');
+      this.$emit('openPortalPage');
+    },
+    isLocaleActive(code, slug) {
+      const isPortalActive = this.portal.slug === slug;
+      const isLocaleActive = this.activeLocale === code;
+      return isPortalActive && isLocaleActive;
+    },
+    isLocaleDefault(code) {
+      return this.portal?.meta?.default_locale === code;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="portal" :class="{ active }">
-    <thumbnail :username="portal.name" variant="square" />
+    <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">
+          <p class="mb-0 text-xs text-slate-600 dark:text-slate-200">
             {{ articlesCount }}
             {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
           </p>
@@ -51,7 +122,7 @@
                   </h6>
 
                   <span
-                    class="flex text-slate-600 dark:text-slate-200 text-sm text-left leading-4 w-full"
+                    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') }} -
@@ -70,77 +141,6 @@
   </div>
 </template>
 
-<script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import portalMixin from '../mixins/portalMixin';
-
-export default {
-  components: {
-    thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      selectedLocale: null,
-    };
-  },
-  computed: {
-    locales() {
-      return this.portal?.config?.allowed_locales;
-    },
-    articlesCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  mounted() {
-    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
-  },
-  methods: {
-    onClick(event, code, portal) {
-      event.preventDefault();
-      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: portal.slug,
-          locale: code,
-        },
-      });
-      this.$emit('fetch-portal');
-      this.$emit('open-portal-page');
-    },
-    isLocaleActive(code, slug) {
-      const isPortalActive = this.portal.slug === slug;
-      const isLocaleActive = this.activeLocale === code;
-      return isPortalActive && isLocaleActive;
-    },
-    isLocaleDefault(code) {
-      return this.portal?.meta?.default_locale === code;
-    },
-  },
-};
-</script>
-
 <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 f6aceedf5538f..f0803ac6ec546 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 e3fe22b195c3e..aa72a2bdf60b5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -1,21 +1,56 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    thumbnailSrc: {
+      type: String,
+      default: '',
+    },
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    portalLink: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    popoutHelpCenter() {
+      window.open(this.portalLink, '_blank');
+    },
+    openPortalPopover() {
+      this.$emit('openPopover');
+    },
+  },
+};
+</script>
+
 <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"
+    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
+      <Thumbnail
         size="32px"
         :src="thumbnailSrc"
         :username="headerTitle"
         variant="square"
       />
-      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
+      <div class="flex flex-col items-start 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"
+          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 leading-4 text-slate-600 dark:text-slate-200 text-xs">
+        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
           {{ subTitle }}
         </span>
       </div>
@@ -38,38 +73,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    thumbnailSrc: {
-      type: String,
-      default: '',
-    },
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    portalLink: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    popoutHelpCenter() {
-      window.open(this.portalLink, '_blank');
-    },
-    openPortalPopover() {
-      this.$emit('open-popover');
-    },
-  },
-};
-</script>
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 8af29af17d214..72e21bada7d30 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 d16eb87e35f9e..ef4dd2b27b26d 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 34df7812ffbd5..27cea581c429a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -1,3 +1,124 @@
+<script>
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import { mapGetters } from 'vuex';
+import { debounce } from '@chatwoot/utils';
+import { isEmptyObject } from 'dashboard/helper/commons.js';
+export default {
+  components: {
+    MultiselectDropdown,
+  },
+  props: {
+    article: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      metaTitle: '',
+      metaDescription: '',
+      metaTags: [],
+      metaOptions: [],
+      tagInputValue: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      categories: 'categories/allCategories',
+      agents: 'agents/getAgents',
+    }),
+    assignedAuthor() {
+      return this.article?.author;
+    },
+    selectedCategory() {
+      return this.article?.category;
+    },
+    allTags() {
+      return this.metaTags.map(item => item.name);
+    },
+  },
+  watch: {
+    article: {
+      handler() {
+        if (!isEmptyObject(this.article.meta || {})) {
+          const {
+            meta: { title = '', description = '', tags = [] },
+          } = this.article;
+          this.metaTitle = title;
+          this.metaDescription = description;
+          this.metaTags = this.formattedTags({ tags });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.saveArticle = debounce(
+      () => {
+        this.$emit('saveArticle', {
+          meta: {
+            title: this.metaTitle,
+            description: this.metaDescription,
+            tags: this.allTags,
+          },
+        });
+      },
+      1000,
+      false
+    );
+  },
+  methods: {
+    formattedTags({ tags }) {
+      return tags.map(tag => ({
+        name: tag,
+      }));
+    },
+    addTagValue(tagValue) {
+      const tags = tagValue
+        .split(',')
+        .map(tag => tag.trim())
+        .filter(tag => tag && !this.allTags.includes(tag));
+
+      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
+      this.saveArticle();
+    },
+    removeTag() {
+      this.saveArticle();
+    },
+    handleSearchChange(value) {
+      this.tagInputValue = value;
+    },
+    onBlur() {
+      if (this.tagInputValue) {
+        this.addTagValue(this.tagInputValue);
+      }
+    },
+    onClickSelectCategory({ id }) {
+      this.$emit('saveArticle', { category_id: id });
+    },
+    onClickAssignAuthor({ id }) {
+      this.$emit('saveArticle', { author_id: id });
+      this.updateMeta();
+    },
+    onChangeMetaInput() {
+      this.saveArticle();
+    },
+    onClickArchiveArticle() {
+      this.$emit('archiveArticle');
+      this.updateMeta();
+    },
+    onClickDeleteArticle() {
+      this.$emit('deleteArticle');
+      this.updateMeta();
+    },
+    updateMeta() {
+      this.$emit('updateMeta');
+    },
+  },
+};
+</script>
+
 <template>
   <transition name="popover-animation">
     <div
@@ -9,7 +130,7 @@
       <div class="mt-4 mb-6">
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <multiselect-dropdown
+          <MultiselectDropdown
             :options="categories"
             :selected-item="selectedCategory"
             :has-thumbnail="false"
@@ -32,7 +153,7 @@
         </label>
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <multiselect-dropdown
+          <MultiselectDropdown
             :options="agents"
             :selected-item="assignedAuthor"
             :multiselector-title="
@@ -80,7 +201,6 @@
         <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')
@@ -88,8 +208,8 @@
             label="name"
             :options="metaOptions"
             track-by="name"
-            :multiple="true"
-            :taggable="true"
+            multiple
+            taggable
             :close-on-select="false"
             @search-change="handleSearchChange"
             @close="onBlur"
@@ -122,127 +242,6 @@
   </transition>
 </template>
 
-<script>
-import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
-import { mapGetters } from 'vuex';
-import { debounce } from '@chatwoot/utils';
-import { isEmptyObject } from 'dashboard/helper/commons.js';
-export default {
-  components: {
-    MultiselectDropdown,
-  },
-  props: {
-    article: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      metaTitle: '',
-      metaDescription: '',
-      metaTags: [],
-      metaOptions: [],
-      tagInputValue: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      categories: 'categories/allCategories',
-      agents: 'agents/getAgents',
-    }),
-    assignedAuthor() {
-      return this.article?.author;
-    },
-    selectedCategory() {
-      return this.article?.category;
-    },
-    allTags() {
-      return this.metaTags.map(item => item.name);
-    },
-  },
-  watch: {
-    article: {
-      handler() {
-        if (!isEmptyObject(this.article.meta || {})) {
-          const {
-            meta: { title = '', description = '', tags = [] },
-          } = this.article;
-          this.metaTitle = title;
-          this.metaDescription = description;
-          this.metaTags = this.formattedTags({ tags });
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.saveArticle = debounce(
-      () => {
-        this.$emit('save-article', {
-          meta: {
-            title: this.metaTitle,
-            description: this.metaDescription,
-            tags: this.allTags,
-          },
-        });
-      },
-      1000,
-      false
-    );
-  },
-  methods: {
-    formattedTags({ tags }) {
-      return tags.map(tag => ({
-        name: tag,
-      }));
-    },
-    addTagValue(tagValue) {
-      const tags = tagValue
-        .split(',')
-        .map(tag => tag.trim())
-        .filter(tag => tag && !this.allTags.includes(tag));
-
-      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
-      this.saveArticle();
-    },
-    removeTag() {
-      this.saveArticle();
-    },
-    handleSearchChange(value) {
-      this.tagInputValue = value;
-    },
-    onBlur() {
-      if (this.tagInputValue) {
-        this.addTagValue(this.tagInputValue);
-      }
-    },
-    onClickSelectCategory({ id }) {
-      this.$emit('save-article', { category_id: id });
-    },
-    onClickAssignAuthor({ id }) {
-      this.$emit('save-article', { author_id: id });
-      this.updateMeta();
-    },
-    onChangeMetaInput() {
-      this.saveArticle();
-    },
-    onClickArchiveArticle() {
-      this.$emit('archive-article');
-      this.updateMeta();
-    },
-    onClickDeleteArticle() {
-      this.$emit('delete-article');
-      this.updateMeta();
-    },
-    updateMeta() {
-      this.$emit('update-meta');
-    },
-  },
-};
-</script>
-
 <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 0f1711ac1e446..df95c34eedf40 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
@@ -1,17 +1,15 @@
-<template>
-  <div
-    class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
-  >
-    Loading...
-  </div>
-</template>
-
 <script>
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { mapGetters } from 'vuex';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings } = useUISettings();
+
+    return {
+      uiSettings,
+    };
+  },
   computed: {
     ...mapGetters({ portals: 'portals/allPortals' }),
   },
@@ -60,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 7268d0ed187b0..5fe13feb5415a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -1,59 +1,11 @@
-<template>
-  <div class="article-container flex w-full overflow-auto">
-    <div
-      class="flex-1 flex-shrink-0 overflow-auto px-6"
-      :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="text-center p-4 text-base h-full">
-        <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';
 import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
 import ArticleEditor from '../../components/ArticleEditor.vue';
 import ArticleSettings from './ArticleSettings.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import portalMixin from '../../mixins/portalMixin';
-import alertMixin from 'shared/mixins/alertMixin';
 import wootConstants from 'dashboard/constants/globals';
 import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
@@ -66,7 +18,7 @@ export default {
     Spinner,
     ArticleSettings,
   },
-  mixins: [portalMixin, alertMixin],
+  mixins: [portalMixin],
   data() {
     return {
       isUpdating: false,
@@ -79,7 +31,6 @@ export default {
   computed: {
     ...mapGetters({
       isFetching: 'articles/isFetching',
-      articles: 'articles/articles',
     }),
     article() {
       return this.$store.getters['articles/articleById'](this.articleId);
@@ -144,7 +95,7 @@ export default {
       } catch (error) {
         this.alertMessage =
           error?.message || this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR');
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       } finally {
         setTimeout(() => {
           this.isUpdating = false;
@@ -174,7 +125,7 @@ export default {
           error?.message ||
           this.$t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     async archiveArticle() {
@@ -190,7 +141,7 @@ export default {
         this.alertMessage =
           error?.message || this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.ERROR');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     updateMeta() {
@@ -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 ff610e44e0d9f..8284e1a8022a2 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 be0673c7e597c..c636f6101a7ac 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 7115b1d82d8c4..f2e3924a581f9 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -1,34 +1,9 @@
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <div
-      class="flex-1 overflow-y-auto flex-shrink-0 px-6"
-      :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';
 import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue';
 import ArticleEditor from '../../components/ArticleEditor.vue';
 import portalMixin from '../../mixins/portalMixin';
-import alertMixin from 'shared/mixins/alertMixin.js';
 import ArticleSettings from './ArticleSettings.vue';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 export default {
@@ -37,7 +12,7 @@ export default {
     ArticleEditor,
     ArticleSettings,
   },
-  mixins: [portalMixin, alertMixin],
+  mixins: [portalMixin],
   data() {
     return {
       articleTitle: '',
@@ -50,7 +25,6 @@ export default {
   computed: {
     ...mapGetters({
       currentUserID: 'getCurrentUserID',
-      articles: 'articles/articles',
       categories: 'categories/allCategories',
     }),
     articleId() {
@@ -100,7 +74,7 @@ export default {
           this.alertMessage =
             error?.message ||
             this.$t('HELP_CENTER.CREATE_ARTICLE.API.ERROR_MESSAGE');
-          this.showAlert(this.alertMessage);
+          useAlert(this.alertMessage);
         }
       }
     },
@@ -112,8 +86,33 @@ export default {
     },
     saveArticle() {
       this.alertMessage = this.$t('HELP_CENTER.CREATE_ARTICLE.ERROR_MESSAGE');
-      this.showAlert(this.alertMessage);
+      useAlert(this.alertMessage);
     },
   },
 };
 </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 1a332510a478a..14aa4e1ca2b7d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -1,81 +1,13 @@
-<!-- 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 mt-0 mx-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 gap-2 py-2 px-0 w-full">
-            <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 alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength } from '@vuelidate/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import CategoryNameIconInput from './NameEmojiInput.vue';
 
 export default {
   components: { CategoryNameIconInput },
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -94,6 +26,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -118,7 +53,7 @@ export default {
         : this.portalSlug;
     },
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
@@ -148,8 +83,8 @@ export default {
         description,
         locale,
       };
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {
@@ -169,12 +104,81 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('HELP_CENTER.CATEGORY.ADD.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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 1e98865102df4..92fccdb494e57 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -1,6 +1,26 @@
+<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>
+    <table class="woot-table">
       <thead>
         <tr>
           <th scope="col">
@@ -66,33 +86,13 @@
     </table>
     <p
       v-if="categories.length === 0"
-      class="flex justify-center text-slate-500 dark:text-slate-300 text-base mt-8"
+      class="flex justify-center mt-8 text-base text-slate-500 dark:text-slate-300"
     >
       {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
     </p>
   </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 56887f20608e3..204e9af073379 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,83 +1,13 @@
-<!-- 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 mt-0 mx-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 gap-2 py-2 px-0 w-full">
-            <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 alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength } from '@vuelidate/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import CategoryNameIconInput from './NameEmojiInput.vue';
 
 export default {
   components: { CategoryNameIconInput },
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -100,6 +30,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       id: this.category.id,
@@ -120,7 +53,7 @@ export default {
   },
   computed: {
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
@@ -159,8 +92,8 @@ export default {
         slug,
         description,
       };
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {
@@ -180,12 +113,83 @@ export default {
           errorMessage ||
           this.$t('HELP_CENTER.CATEGORY.EDIT.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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 2152fc1470a5b..6d3c40e1cbe9a 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 2bbfaf3911d22..947ae2e8c7500 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 722b868a7f134..6832de1bae5d7 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 bf5385b3411b0..2fec281a70404 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 cbbb4cb15ccfe..231569ab36578 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 aac8125e56075..4b2c6ebfe0b09 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 902dc3ca61dca..190d6edae4f67 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 de1fd7e65a9f1..f8792cb2f0aaa 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 35452417fd6b7..9f040f908723a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,60 +1,5 @@
-<template>
-  <div class="py-2 px-4 w-full max-w-full">
-    <div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
-      <div class="flex items-center">
-        <woot-sidemenu-icon />
-        <h1
-          class="my-0 mx-2 text-2xl text-slate-800 dark:text-slate-100 font-medium"
-        >
-          {{ $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="items-center flex text-base justify-center p-40"
-      >
-        <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 alertMixin from 'shared/mixins/alertMixin';
 import PortalListItem from '../../components/PortalListItem.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -68,7 +13,6 @@ export default {
     Spinner,
     AddLocale,
   },
-  mixins: [alertMixin],
   data() {
     return {
       isAddLocaleModalOpen: false,
@@ -78,7 +22,6 @@ export default {
   computed: {
     ...mapGetters({
       portals: 'portals/allPortals',
-      meta: 'portals/getMeta',
       isFetching: 'portals/isFetchingPortals',
     }),
     portalStatus() {
@@ -106,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 0222044bc7b3d..b656dabb18592 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 60420be90d6d0..74046cd9bb7ef 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 2857867bb38f3..cf210a50ab395 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
@@ -1,18 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
@@ -21,7 +9,6 @@ export default {
   components: {
     PortalSettingsBasicForm,
   },
-  mixins: [alertMixin],
   data() {
     return {
       name: '',
@@ -63,9 +50,21 @@ export default {
           error?.message ||
           this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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 3a3e77142d9d5..bc8fb85a6f8f0 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 fd8c021766749..bdbf7ccd8bb5c 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 49ab0a709e1b1..a325ebbe1df33 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 f120bbea5333c..2093d6b053fa2 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -1,67 +1,29 @@
-<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="spinner mt-4 mb-4" />
-        </div>
-        <p
-          v-if="showEmptyState"
-          class="text-center text-slate-400 text-sm dark:text-slate-400 p-4 font-medium"
-        >
-          {{ $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';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import wootConstants from 'dashboard/constants/globals';
 
 import InboxCard from './components/InboxCard.vue';
 import InboxListHeader from './components/InboxListHeader.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 
 export default {
   components: {
     InboxCard,
     InboxListHeader,
     IntersectionObserver,
+    CmdBarConversationSnooze,
+  },
+  setup() {
+    const { uiSettings } = useUISettings();
+
+    return {
+      uiSettings,
+    };
   },
-  mixins: [alertMixin, uiSettingsMixin],
   data() {
     return {
       infiniteLoaderOptions: {
@@ -78,7 +40,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       meta: 'notifications/getMeta',
       uiFlags: 'notifications/getUIFlags',
       notification: 'notifications/getFilteredNotifications',
@@ -151,7 +112,7 @@ export default {
           unreadCount: this.meta.unreadCount,
         })
         .then(() => {
-          this.showAlert(this.$t('INBOX.ALERTS.MARK_AS_READ'));
+          useAlert(this.$t('INBOX.ALERTS.MARK_AS_READ'));
         });
     },
     markNotificationAsUnRead(notification) {
@@ -163,7 +124,7 @@ export default {
           id,
         })
         .then(() => {
-          this.showAlert(this.$t('INBOX.ALERTS.MARK_AS_UNREAD'));
+          useAlert(this.$t('INBOX.ALERTS.MARK_AS_UNREAD'));
         });
     },
     deleteNotification(notification) {
@@ -176,7 +137,7 @@ export default {
           count: this.meta.count,
         })
         .then(() => {
-          this.showAlert(this.$t('INBOX.ALERTS.DELETE'));
+          useAlert(this.$t('INBOX.ALERTS.DELETE'));
         });
     },
     onFilterChange(option) {
@@ -206,3 +167,50 @@ 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 />
+    <CmdBarConversationSnooze />
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index f7d41e2236add..2173ec113e0e7 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -1,44 +1,9 @@
-<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 h-full w-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="spinner my-4" />
-      </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';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
 import InboxEmptyState from './InboxEmptyState.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
@@ -48,7 +13,14 @@ export default {
     InboxEmptyState,
     ConversationBox,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       isConversationLoading: false,
@@ -56,7 +28,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      currentAccountId: 'getCurrentAccountId',
       notification: 'notifications/getFilteredNotifications',
       currentChat: 'getSelectedChat',
       activeNotificationById: 'notifications/getNotificationById',
@@ -200,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 cbaacf198c869..ac74b92c3204b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -1,69 +1,10 @@
-<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="flex relative 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 justify-between items-center w-full gap-2">
-      <Thumbnail
-        v-if="assigneeMeta"
-        :src="assigneeMeta.thumbnail"
-        :username="assigneeMeta.name"
-        size="16px"
-      />
-      <span
-        class="flex-1 text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="isUnread ? 'font-medium' : 'font-normal'"
-      >
-        {{ pushTitle }}
-      </span>
-      <span
-        class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
-      >
-        {{ lastActivityAt }}
-      </span>
-    </div>
-    <div v-if="snoozedUntilTime" class="flex items-center">
-      <span class="text-woot-500 dark:text-woot-500 text-xs font-medium">
-        {{ 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';
 import InboxNameAndId from './InboxNameAndId.vue';
 import InboxContextMenu from './InboxContextMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 export default {
@@ -74,7 +15,6 @@ export default {
     InboxNameAndId,
     Thumbnail,
   },
-  mixins: [timeMixin],
   props: {
     notificationItem: {
       type: Object,
@@ -115,10 +55,8 @@ export default {
       );
     },
     lastActivityAt() {
-      const dynamicTime = this.dynamicTime(
-        this.notificationItem?.last_activity_at
-      );
-      return this.shortTimestamp(dynamicTime, true);
+      const time = dynamicTime(this.notificationItem?.last_activity_at);
+      return shortTimestamp(time, true);
     },
     menuItems() {
       const items = [
@@ -188,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();
@@ -198,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:
       }
@@ -218,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 50ebd3a5bedfb..b46bb674cbb65 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 3101bc63c0d8a..4f9b855ca7436 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
@@ -1,107 +1,16 @@
-<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 h-11 p-3 rounded-t-lg">
-      <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="font-medium text-xs 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="font-medium text-xs py-4 px-3 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 uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showSortMenu: false,
@@ -196,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 5a91e476240c9..271c4460aba1e 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -1,61 +1,6 @@
-<template>
-  <div
-    class="flex gap-2 py-2 ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r justify-between items-center w-full border-b 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';
 import { getUnixTime } from 'date-fns';
 import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
 import wootConstants from 'dashboard/constants/globals';
@@ -63,14 +8,12 @@ import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import PaginationButton from './PaginationButton.vue';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     PaginationButton,
     CustomSnoozeModal,
   },
-  mixins: [alertMixin],
   props: {
     totalLength: {
       type: Number,
@@ -112,7 +55,7 @@ export default {
           snoozedUntil,
         });
 
-        this.showAlert(this.$t('INBOX.ALERTS.SNOOZE'));
+        useAlert(this.$t('INBOX.ALERTS.SNOOZE'));
       } catch (error) {
         // Silently fail without any change in the UI
       }
@@ -141,7 +84,7 @@ export default {
           count: this.meta.count,
         })
         .then(() => {
-          this.showAlert(this.$t('INBOX.ALERTS.DELETE'));
+          useAlert(this.$t('INBOX.ALERTS.DELETE'));
         });
       this.$router.replace({ name: 'inbox_view' });
     },
@@ -157,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 556a22de0a9fc..87146a6614119 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -1,73 +1,14 @@
-<template>
-  <div
-    class="flex w-full ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 py-2 h-14 justify-between items-center border-b border-slate-50 dark:border-slate-800/50"
-  >
-    <div class="flex items-center gap-1.5">
-      <h1 class="font-medium text-slate-900 dark:text-slate-25 text-xl">
-        {{ $t('INBOX.LIST.TITLE') }}
-      </h1>
-      <div class="relative">
-        <div
-          role="button"
-          class="flex gap-1 items-center py-1 px-2 border border-slate-100 dark:border-slate-700/50 rounded-md"
-          @click="openInboxDisplayMenu"
-        >
-          <span
-            class="text-slate-600 dark:text-slate-200 text-xs text-center font-medium"
-          >
-            {{ $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="flex relative gap-1 items-center">
-      <!-- <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 InboxOptionMenu from './InboxOptionMenu.vue';
+import { useAlert } from 'dashboard/composables';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import InboxOptionMenu from './InboxOptionMenu.vue';
 import InboxDisplayMenu from './InboxDisplayMenu.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     InboxOptionMenu,
     InboxDisplayMenu,
   },
-  mixins: [alertMixin],
   props: {
     isContextMenuOpen: {
       type: Boolean,
@@ -95,17 +36,17 @@ export default {
     markAllRead() {
       this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
       this.$store.dispatch('notifications/readAll').then(() => {
-        this.showAlert(this.$t('INBOX.ALERTS.MARK_ALL_READ'));
+        useAlert(this.$t('INBOX.ALERTS.MARK_ALL_READ'));
       });
     },
     deleteAll() {
       this.$store.dispatch('notifications/deleteAll').then(() => {
-        this.showAlert(this.$t('INBOX.ALERTS.DELETE_ALL'));
+        useAlert(this.$t('INBOX.ALERTS.DELETE_ALL'));
       });
     },
     deleteAllRead() {
       this.$store.dispatch('notifications/deleteAllRead').then(() => {
-        this.showAlert(this.$t('INBOX.ALERTS.DELETE_ALL_READ'));
+        useAlert(this.$t('INBOX.ALERTS.DELETE_ALL_READ'));
       });
     },
     openInboxDisplayMenu() {
@@ -133,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 0b0ef03ff71a9..3e4a9d8a9bbac 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 f10821677443e..e5ab0818c5c61 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 cddad0d587a53..5019d451de004 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 e361f39dff7d9..ed0db6c1342dd 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 5f6ddc8d24275..8fb66ee1b65ce 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 459f9aaef376c..6848aadb20dc5 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -1,121 +1,5 @@
-<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';
 import NotificationPanelList from './NotificationPanelList.vue';
 
 import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -124,7 +8,6 @@ export default {
   components: {
     NotificationPanelList,
   },
-  mixins: [rtlMixin],
   data() {
     return {
       pageSize: 15,
@@ -132,14 +15,10 @@ export default {
   },
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       meta: 'notifications/getMeta',
       records: 'notifications/getNotifications',
       uiFlags: 'notifications/getUIFlags',
     }),
-    notificationPanelFooterIconClass() {
-      return this.isRTLView ? '-mr-3' : '-ml-3';
-    },
     totalUnreadNotifications() {
       return this.meta.unreadCount;
     },
@@ -246,3 +125,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="rtl:-mr-3 ltr:-ml-3"
+            />
+          </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="rtl:-mr-3 ltr:-ml-3"
+            />
+          </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 28e7c232e60ee..5257c07405cb1 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
@@ -14,12 +52,12 @@
           v-if="!notificationItem.read_at"
           class="w-2 h-2 rounded-full bg-woot-500"
         />
-        <div v-else class="w-2 flex" />
+        <div v-else class="flex w-2" />
         <div
           class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
         >
           <div class="flex justify-between">
-            <div class="items-center flex">
+            <div class="flex items-center">
               <span class="font-bold text-slate-800 dark:text-slate-100">
                 {{
                   `#${
@@ -40,22 +78,22 @@
               </span>
             </div>
             <div v-if="hasNotificationAssignee">
-              <thumbnail
+              <Thumbnail
                 :src="notificationAssigneeThumbnail"
                 size="16px"
                 :username="notificationAssigneeName"
               />
             </div>
           </div>
-          <div class="w-full flex">
+          <div class="flex w-full">
             <span
-              class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+              class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
             >
               {{ notificationItem.push_message_title }}
             </span>
           </div>
           <span
-            class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
+            class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
           >
             {{ dynamicTime(notificationItem.last_activity_at) }}
           </span>
@@ -64,41 +102,3 @@
     </woot-button>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [timeMixin],
-  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: {
-    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 9ae08b144a665..d07b9c0c710ea 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 903d09eac2db9..b378afec254ff 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -1,6 +1,55 @@
+<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="h-full flex-shrink flex-grow overflow-hidden py-8 px-4 bg-white dark:bg-slate-900"
+    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
   >
     <woot-submit-button
       v-if="notificationMetadata.unreadCount"
@@ -22,7 +71,7 @@
         >
           <td>
             <div
-              class="flex-view notification-contant--wrap overflow-hidden whitespace-nowrap text-ellipsis"
+              class="overflow-hidden flex-view notification-contant--wrap whitespace-nowrap text-ellipsis"
             >
               <h5 class="notification--title">
                 {{
@@ -34,7 +83,7 @@
                 }}
               </h5>
               <span
-                class="notification--message-title overflow-hidden whitespace-nowrap text-ellipsis"
+                class="overflow-hidden notification--message-title whitespace-nowrap text-ellipsis"
               >
                 {{ notificationItem.push_message_title }}
               </span>
@@ -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,64 +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 timeMixin from '../../../../mixins/time';
-import { mapGetters } from 'vuex';
-
-export default {
-  components: {
-    Thumbnail,
-    Spinner,
-    EmptyState,
-  },
-  mixins: [timeMixin],
-  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;
-    },
-  },
-};
-</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 b4df7a0e83297..8c14543041761 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 0b415553a0bc3..dfc79f8209543 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,49 +1,11 @@
-<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="text-2xl mb-0 flex items-center text-slate-900 dark:text-slate-100"
-    >
-      <woot-sidemenu-icon v-if="showSidemenuIcon" />
-      <back-button
-        v-if="showBackButton"
-        :button-label="backButtonLabel"
-        :back-url="backUrl"
-      />
-      <fluent-icon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClass"
-        class="mr-2 ml-1 rtl:ml-2 rtl:mr-1 hidden md:block"
-      />
-      <slot />
-      <span class="text-slate-900 font-medium text-2xl 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';
-import adminMixin from '../../../mixins/isAdmin';
 
 export default {
   components: {
     BackButton,
   },
-  mixins: [adminMixin],
   props: {
     headerTitle: {
       default: '',
@@ -76,13 +38,54 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   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 6188053093069..916f821add6eb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -4,20 +4,35 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  noRecordsFound: {
+    type: Boolean,
+    default: false,
+  },
   loadingMessage: {
     type: String,
     default: '',
   },
+  noRecordsMessage: {
+    type: String,
+    default: '',
+  },
 });
 </script>
+
 <template>
   <div class="flex flex-col w-full h-full gap-10 font-inter">
     <slot name="header" />
-    <div>
-      <slot v-if="isLoading" name="loading">
-        <woot-loading-state :message="loadingMessage" />
-      </slot>
-      <slot v-else name="body" />
-    </div>
+    <slot v-if="isLoading" name="loading">
+      <woot-loading-state :message="loadingMessage" />
+    </slot>
+    <p
+      v-else-if="noRecordsFound"
+      class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
+    >
+      {{ noRecordsMessage }}
+    </p>
+    <slot v-else name="body" />
+    <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
+    <slot />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index 8f6f46601c52d..d67d96eb527e4 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/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index 3f5bf16f93522..6eb6c4657a86b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -9,9 +9,9 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col w-full h-full px-5 pt-8 pb-3 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
+    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-white dark:bg-slate-900 font-inter"
   >
-    <div class="flex items-start max-w-[900px] w-full">
+    <div class="flex items-start w-full max-w-6xl mx-auto">
       <keep-alive v-if="keepAlive">
         <router-view />
       </keep-alive>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 2b2604ac86b06..6b191983e6170 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 0f9bbef5a9b27..7344bc81ecccc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -1,146 +1,22 @@
-<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="p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 flex flex-row"
-      >
-        <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="text-sm text-center p-4">
-        <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 { required, minValue, maxValue } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minValue, maxValue } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import configMixin from 'shared/mixins/configMixin';
-import accountMixin from '../../../../mixins/account';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useConfig } from 'dashboard/composables/useConfig';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import semver from 'semver';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
 export default {
-  mixins: [accountMixin, alertMixin, configMixin, uiSettingsMixin],
+  setup() {
+    const { updateUISettings } = useUISettings();
+    const { enabledLanguages } = useConfig();
+    const v$ = useVuelidate();
+
+    return { updateUISettings, v$, enabledLanguages };
+  },
   data() {
     return {
       id: '',
@@ -251,9 +127,9 @@ export default {
     },
 
     async updateAccount() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        this.showAlert(this.$t('GENERAL_SETTINGS.FORM.ERROR'));
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        useAlert(this.$t('GENERAL_SETTINGS.FORM.ERROR'));
         return;
       }
       try {
@@ -267,9 +143,9 @@ export default {
         this.$root.$i18n.locale = this.locale;
         this.getAccount(this.id).locale = this.locale;
         this.updateDirectionView(this.locale);
-        this.showAlert(this.$t('GENERAL_SETTINGS.UPDATE.SUCCESS'));
+        useAlert(this.$t('GENERAL_SETTINGS.UPDATE.SUCCESS'));
       } catch (error) {
-        this.showAlert(this.$t('GENERAL_SETTINGS.UPDATE.ERROR'));
+        useAlert(this.$t('GENERAL_SETTINGS.UPDATE.ERROR'));
       }
     },
 
@@ -282,3 +158,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 b770f49f888ea..886de661e31b4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -1,58 +1,11 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <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 h-full items-center flex-col justify-center">
-          {{ $t('AGENT_BOTS.LIST.404') }}
-        </p>
-      </div>
-
-      <div class="hidden lg:block w-1/3">
-        <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';
 import { frontendURL } from '../../../../helper/URLHelper';
 import AgentBotRow from './components/AgentBotRow.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: { AgentBotRow },
-  mixins: [alertMixin],
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -74,9 +27,9 @@ export default {
       if (ok) {
         try {
           await this.$store.dispatch('agentBots/delete', bot.id);
-          this.showAlert(this.$t('AGENT_BOTS.DELETE.API.SUCCESS_MESSAGE'));
+          useAlert(this.$t('AGENT_BOTS.DELETE.API.SUCCESS_MESSAGE'));
         } catch (error) {
-          this.showAlert(this.$t('AGENT_BOTS.DELETE.API.ERROR_MESSAGE'));
+          useAlert(this.$t('AGENT_BOTS.DELETE.API.ERROR_MESSAGE'));
         }
       }
     },
@@ -90,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 0146e78905b78..98dab9c5d799e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -1,12 +1,37 @@
+<script>
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+import AgentBotType from './AgentBotType.vue';
+
+export default {
+  components: { ShowMore, AgentBotType },
+  props: {
+    agentBot: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    isACSMLTypeBot() {
+      const { bot_type: botType } = this.agentBot;
+      return botType === 'csml';
+    },
+  },
+};
+</script>
+
 <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" />)
+        (<AgentBotType :bot-type="agentBot.bot_type" />)
       </div>
       <div class="agent-bot--description">
-        <show-more :text="agentBot.description" :limit="120" />
+        <ShowMore :text="agentBot.description" :limit="120" />
       </div>
     </td>
     <td class="flex justify-end gap-1">
@@ -30,30 +55,7 @@
     </td>
   </tr>
 </template>
-<script>
-import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-import AgentBotType from './AgentBotType.vue';
 
-export default {
-  components: { ShowMore, AgentBotType },
-  props: {
-    agentBot: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    isACSMLTypeBot() {
-      const { bot_type: botType } = this.agentBot;
-      return botType === 'csml';
-    },
-  },
-};
-</script>
 <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 b379786a374d6..ac3ac90b99f4b 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 fe02d4a2df748..9d71657f56e2f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -1,11 +1,57 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
+
+export default {
+  components: { CsmlMonacoEditor },
+  props: {
+    agentBot: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    bot: {
+      name: { required },
+      csmlContent: { required },
+    },
+  },
+  data() {
+    return {
+      bot: {
+        name: this.agentBot.name || '',
+        description: this.agentBot.description || '',
+        csmlContent: this.agentBot.bot_config.csml_content || '',
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', {
+        id: this.agentBot.id || '',
+        ...this.bot,
+      });
+    },
+  },
+};
+</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">
-          <csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
+          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
           <div
-            v-if="$v.bot.csmlContent.$error"
+            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>
@@ -18,14 +64,14 @@
           @submit.prevent="onSubmit"
         >
           <div>
-            <label :class="{ error: $v.bot.name.$error }">
+            <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">
+              <span v-if="v$.bot.name.$error" class="message">
                 {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
               </span>
             </label>
@@ -48,45 +94,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { required } from 'vuelidate/lib/validators';
-import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
-
-export default {
-  components: { CsmlMonacoEditor },
-  props: {
-    agentBot: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  validations: {
-    bot: {
-      name: { required },
-      csmlContent: { required },
-    },
-  },
-  data() {
-    return {
-      bot: {
-        name: this.agentBot.name || '',
-        description: this.agentBot.description || '',
-        csmlContent: this.agentBot.bot_config.csml_content || '',
-      },
-    };
-  },
-  methods: {
-    onSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-      this.$emit('submit', {
-        id: this.agentBot.id || '',
-        ...this.bot,
-      });
-    },
-  },
-};
-</script>
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 e303606476751..80987beadbb0f 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 cc7d4468fa754..3c909fdba29cd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -1,24 +1,11 @@
-<template>
-  <csml-bot-editor
-    v-if="agentBot.id"
-    :agent-bot="agentBot"
-    @submit="updateBot"
-  />
-  <div v-else class="h-auto overflow-auto flex flex-col 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 alertMixin from 'shared/mixins/alertMixin';
 
-import { mapGetters } from 'vuex';
 export default {
   components: { Spinner, CsmlBotEditor },
-  mixins: [alertMixin],
   computed: {
-    ...mapGetters({ uiFlags: 'agentBots/uiFlags' }),
     agentBot() {
       return this.$store.getters['agentBots/getBot'](this.$route.params.botId);
     },
@@ -36,13 +23,18 @@ export default {
           bot_type: 'csml',
           bot_config: { csml_content: bot.csmlContent },
         });
-        this.showAlert(this.$t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(
-          this.$t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.API_ERROR')
-        );
+        useAlert(this.$t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.API_ERROR'));
       }
     },
   },
 };
 </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 d8139a382ca06..10868e58c68d3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
@@ -1,16 +1,11 @@
-<template>
-  <csml-bot-editor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
-</template>
-
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
-import CsmlBotEditor from '../components/CSMLBotEditor.vue';
-import { frontendURL } from '../../../../../helper/URLHelper';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { frontendURL } from '../../../../../helper/URLHelper';
+import CsmlBotEditor from '../components/CSMLBotEditor.vue';
 
 export default {
   components: { CsmlBotEditor },
-  mixins: [alertMixin],
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -32,11 +27,15 @@ export default {
             )
           );
         }
-        this.showAlert(this.$t('AGENT_BOTS.ADD.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AGENT_BOTS.ADD.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('AGENT_BOTS.ADD.API.ERROR_MESSAGE'));
+        useAlert(this.$t('AGENT_BOTS.ADD.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 9895fe0304e93..74720e28a7b3b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -1,84 +1,19 @@
-<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 { required, minLength, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       agentName: '',
@@ -126,7 +61,7 @@ export default {
           email: this.agentEmail,
           role: this.agentType,
         });
-        this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
         const {
@@ -145,9 +80,77 @@ export default {
         } else {
           errorMessage = this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
         }
-        this.showAlert(errorResponse || attrError || errorMessage);
+        useAlert(errorResponse || attrError || errorMessage);
       }
     },
   },
 };
 </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 406cdd9c2e859..4385723b69d7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -1,89 +1,12 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="h-auto overflow-auto flex flex-col">
-      <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 gap-2 py-2 px-0 w-full">
-          <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 { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import Modal from '../../../../components/Modal.vue';
 import Auth from '../../../../api/auth';
 import wootConstants from 'dashboard/constants/globals';
-import alertMixin from 'shared/mixins/alertMixin';
 
 const { AVAILABILITY_STATUS_KEYS } = wootConstants;
 
@@ -92,7 +15,6 @@ export default {
     WootSubmitButton,
     Modal,
   },
-  mixins: [alertMixin],
   props: {
     id: {
       type: Number,
@@ -119,6 +41,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       roles: [
@@ -179,22 +104,100 @@ export default {
           role: this.agentType,
           availability: this.agentAvailability,
         });
-        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+        useAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
     },
     async resetPassword() {
       try {
         await Auth.resetPassword(this.agentCredentials);
-        this.showAlert(
+        useAlert(
           this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE')
         );
       } catch (error) {
-        this.showAlert(this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
+        useAlert(this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 dd0cbb27bfc4c..cb0402e121767 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -1,107 +1,210 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import { computed, onMounted, ref } from 'vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
+import AddAgent from './AddAgent.vue';
+import EditAgent from './EditAgent.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+
+const loading = ref({});
+const showAddPopup = ref(false);
+const showDeletePopup = ref(false);
+const showEditPopup = ref(false);
+const agentAPI = ref({ message: '' });
+const currentAgent = ref({});
+
+const deleteConfirmText = computed(
+  () => `${t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${currentAgent.value.name}`
+);
+const deleteRejectText = computed(() => {
+  return `${t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${currentAgent.value.name}`;
+});
+const deleteMessage = computed(() => {
+  return ` ${currentAgent.value.name}?`;
+});
+
+const agentList = computed(() => getters['agents/getAgents'].value);
+const uiFlags = computed(() => getters['agents/getUIFlags'].value);
+const currentUserId = computed(() => getters.getCurrentUserID.value);
+
+onMounted(() => {
+  store.dispatch('agents/get');
+});
+
+const verifiedAdministrators = computed(() => {
+  return agentList.value.filter(
+    agent => agent.role === 'administrator' && agent.confirmed
+  );
+});
+
+const showEditAction = agent => {
+  return currentUserId.value !== agent.id;
+};
+
+const showDeleteAction = agent => {
+  if (currentUserId.value === agent.id) {
+    return false;
+  }
+
+  if (!agent.confirmed) {
+    return true;
+  }
+
+  if (agent.role === 'administrator') {
+    return verifiedAdministrators.value.length !== 1;
+  }
+  return true;
+};
+const showAlertMessage = message => {
+  loading.value[currentAgent.value.id] = false;
+  currentAgent.value = {};
+  agentAPI.value.message = message;
+  useAlert(message);
+};
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const openEditPopup = agent => {
+  showEditPopup.value = true;
+  currentAgent.value = agent;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const openDeletePopup = agent => {
+  showDeletePopup.value = true;
+  currentAgent.value = agent;
+};
+const closeDeletePopup = () => {
+  showDeletePopup.value = false;
+};
+
+const deleteAgent = async id => {
+  try {
+    await store.dispatch('agents/delete', id);
+    showAlertMessage(t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    showAlertMessage(t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+  }
+};
+const confirmDeletion = () => {
+  loading.value[currentAgent.value.id] = true;
+  closeDeletePopup();
+  deleteAgent(currentAgent.value.id);
+};
+</script>
+
 <template>
-  <div class="flex-1 overflow-auto p-4">
-    <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">
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('AGENT_MGMT.LOADING')"
+    :no-records-found="!agentList.length"
+    :no-records-message="$t('AGENT_MGMT.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('AGENT_MGMT.HEADER')"
+        :description="$t('AGENT_MGMT.DESCRIPTION')"
+        :link-text="$t('AGENT_MGMT.LEARN_MORE')"
+        feature-name="agents"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table class="divide-y divide-slate-75 dark:divide-slate-700">
+        <tbody
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+        >
+          <tr v-for="(agent, index) in agentList" :key="agent.email">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <div class="flex items-center flex-row gap-4">
+                <Thumbnail
+                  :src="agent.thumbnail"
+                  :username="agent.name"
+                  size="40px"
+                  :status="agent.availability_status"
+                />
+                <div>
+                  <span class="block font-medium capitalize">
                     {{ 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="w-1/3 hidden lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('AGENT_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <!-- Add Agent -->
+                </div>
+              </div>
+            </td>
+
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <span class="block font-medium capitalize">
+                {{ $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`) }}
+              </span>
+            </td>
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <span v-if="agent.confirmed">
+                {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
+              </span>
+              <span v-if="!agent.confirmed">
+                {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
+              </span>
+            </td>
+            <td class="py-4">
+              <div class="flex justify-end gap-1">
+                <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>
+    </template>
+
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-agent :on-close="hideAddPopup" />
+      <AddAgent :on-close="hideAddPopup" />
     </woot-modal>
-    <!-- Edit Agent -->
+
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-agent
+      <EditAgent
         v-if="showEditPopup"
         :id="currentAgent.id"
         :name="currentAgent.name"
@@ -111,7 +214,7 @@
         :on-close="hideEditPopup"
       />
     </woot-modal>
-    <!-- Delete Agent -->
+
     <woot-delete-modal
       :show.sync="showDeletePopup"
       :on-close="closeDeletePopup"
@@ -122,129 +225,5 @@
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
-  </div>
+  </SettingsLayout>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
-import AddAgent from './AddAgent.vue';
-import EditAgent from './EditAgent.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: {
-    AddAgent,
-    EditAgent,
-    Thumbnail,
-  },
-  mixins: [globalConfigMixin, alertMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showDeletePopup: false,
-      showEditPopup: false,
-      agentAPI: {
-        message: '',
-      },
-      currentAgent: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      agentList: 'agents/getAgents',
-      uiFlags: 'agents/getUIFlags',
-      currentUserId: 'getCurrentUserID',
-      globalConfig: 'globalConfig/get',
-    }),
-    deleteConfirmText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
-        this.currentAgent.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
-        this.currentAgent.name
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.currentAgent.name}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    showEditAction(agent) {
-      return this.currentUserId !== agent.id;
-    },
-    showDeleteAction(agent) {
-      if (this.currentUserId === agent.id) {
-        return false;
-      }
-
-      if (!agent.confirmed) {
-        return true;
-      }
-
-      if (agent.role === 'administrator') {
-        return this.verifiedAdministrators().length !== 1;
-      }
-      return true;
-    },
-    verifiedAdministrators() {
-      return this.agentList.filter(
-        agent => agent.role === 'administrator' && agent.confirmed
-      );
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    // Edit Function
-    openEditPopup(agent) {
-      this.showEditPopup = true;
-      this.currentAgent = agent;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    // Delete Function
-    openDeletePopup(agent) {
-      this.showDeletePopup = true;
-      this.currentAgent = agent;
-    },
-    closeDeletePopup() {
-      this.showDeletePopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.currentAgent.id] = true;
-      this.closeDeletePopup();
-      this.deleteAgent(this.currentAgent.id);
-    },
-    async deleteAgent(id) {
-      try {
-        await this.$store.dispatch('agents/delete', id);
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-    // Show SnackBar
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loading[this.currentAgent.id] = false;
-      this.currentAgent = {};
-      // Show message
-      this.agentAPI.message = message;
-      this.showAlert(message);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
index 854450c5de167..d7f8812041d35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
@@ -1,12 +1,12 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const AgentHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/agents'),
-      component: SettingsContent,
+      component: SettingsWrapper,
       props: {
         headerTitle: 'AGENT_MGMT.HEADER',
         icon: 'people',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index e517651d39eda..1ff257b7e20b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -1,146 +1,21 @@
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="h-auto overflow-auto flex flex-col">
-      <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 gap-2 py-2 px-0 w-full">
-            <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 { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import { convertToAttributeSlug } from 'dashboard/helper/commons.js';
 import { ATTRIBUTE_MODELS, ATTRIBUTE_TYPES } from './constants';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
-  mixins: [alertMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       displayName: '',
@@ -175,14 +50,14 @@ export default {
     },
     isButtonDisabled() {
       return (
-        this.$v.displayName.$invalid ||
-        this.$v.description.$invalid ||
+        this.v$.displayName.$invalid ||
+        this.v$.description.$invalid ||
         this.uiFlags.isCreating ||
         this.isTagInputInvalid
       );
     },
     keyErrorMessage() {
-      if (!this.$v.attributeKey.isKey) {
+      if (!this.v$.attributeKey.isKey) {
         return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
       }
       return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
@@ -238,8 +113,8 @@ export default {
       this.regexEnabled = !this.regexEnabled;
     },
     async addAttributes() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       if (!this.regexEnabled) {
@@ -266,12 +141,140 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('ATTRIBUTES_MGMT.ADD.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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 0f540cd6e40a5..5c234ec03e635 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -1,121 +1,12 @@
-<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="mt-12 flex items-center justify-center"
-        >
-          {{ $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 lg:block w-1/3">
-      <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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import EditAttribute from './EditAttribute.vue';
 
 export default {
   components: {
     EditAttribute,
   },
-  mixins: [alertMixin],
   data() {
     return {
       selectedTabIndex: 0,
@@ -182,12 +73,12 @@ export default {
     async deleteAttributes({ id }) {
       try {
         await this.$store.dispatch('attributes/delete', id);
-        this.showAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
       } catch (error) {
         const errorMessage =
           error?.response?.message ||
           this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
     openEditPopup(response) {
@@ -213,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 c5263c272cbf7..03d78e8d19d0b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -1,121 +1,11 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-col w-full" @submit.prevent="editAttributes">
-      <div class="w-full">
-        <woot-input
-          v-model.trim="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')"
-          @blur="$v.displayName.$touch"
-        />
-        <woot-input
-          v-model.trim="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')"
-          readonly
-          @blur="$v.attributeKey.$touch"
-        />
-        <label :class="{ error: $v.description.$error }">
-          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
-          <textarea
-            v-model.trim="description"
-            rows="5"
-            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" disabled>
-            <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.EDIT.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"
-            @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>
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
-          {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength } from '@vuelidate/validators';
+import { getRegexp } from 'shared/helpers/Validators';
 import { ATTRIBUTE_TYPES } from './constants';
-import alertMixin from 'shared/mixins/alertMixin';
-import customAttributeMixin from '../../../../mixins/customAttributeMixin';
 export default {
   components: {},
-  mixins: [alertMixin, customAttributeMixin],
   props: {
     selectedAttribute: {
       type: Object,
@@ -126,6 +16,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       displayName: '',
@@ -161,9 +54,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      uiFlags: 'attributes/getUIFlags',
-    }),
     setAttributeListValue() {
       return this.selectedAttribute.attribute_values.map(values => ({
         name: values,
@@ -173,7 +63,7 @@ export default {
       return this.values.map(item => item.name);
     },
     isButtonDisabled() {
-      return this.$v.description.$invalid || this.isMultiselectInvalid;
+      return this.v$.description.$invalid || this.isMultiselectInvalid;
     },
     isMultiselectInvalid() {
       return (
@@ -194,7 +84,7 @@ export default {
       ).id;
     },
     keyErrorMessage() {
-      if (!this.$v.attributeKey.isKey) {
+      if (!this.v$.attributeKey.isKey) {
         return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
       }
       return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
@@ -214,7 +104,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     addTagValue(tagValue) {
       const tag = {
@@ -225,7 +115,7 @@ export default {
     },
     setFormValues() {
       const regexPattern = this.selectedAttribute.regex_pattern
-        ? this.getRegexp(this.selectedAttribute.regex_pattern).source
+        ? getRegexp(this.selectedAttribute.regex_pattern).source
         : null;
       this.displayName = this.selectedAttribute.attribute_display_name;
       this.description = this.selectedAttribute.attribute_description;
@@ -237,8 +127,8 @@ export default {
       this.values = this.setAttributeListValue;
     },
     async editAttributes() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       if (!this.regexEnabled) {
@@ -263,7 +153,7 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     toggleRegexEnabled() {
@@ -272,6 +162,116 @@ 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="editAttributes">
+      <div class="w-full">
+        <woot-input
+          v-model.trim="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')"
+          @blur="v$.displayName.$touch"
+        />
+        <woot-input
+          v-model.trim="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')"
+          readonly
+          @blur="v$.attributeKey.$touch"
+        />
+        <label :class="{ error: v$.description.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
+          <textarea
+            v-model.trim="description"
+            rows="5"
+            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" disabled>
+            <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.EDIT.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
+            @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>
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
+          {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</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/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 1e6a56bcbbb3f..e7670caefc16d 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 709d70b254efe..baaa90145fbc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -1,43 +1,104 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import {
+  generateTranslationPayload,
+  generateLogActionKey,
+} from 'dashboard/helper/auditlogHelper';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute, useRouter } from 'dashboard/composables/route';
+
+const getters = useStoreGetters();
+const store = useStore();
+const router = useRouter();
+const records = computed(() => getters['auditlogs/getAuditLogs'].value);
+const uiFlags = computed(() => getters['auditlogs/getUIFlags'].value);
+const meta = computed(() => getters['auditlogs/getMeta'].value);
+const agentList = computed(() => getters['agents/getAgents'].value);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routerPage = computed(() => Number(route.query.page ?? 1));
+
+const fetchAuditLogs = page => {
+  try {
+    store.dispatch('auditlogs/fetch', { page });
+  } catch (error) {
+    const errorMessage = error?.message || t('AUDIT_LOGS.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const generateLogText = auditLogItem => {
+  const translationPayload = generateTranslationPayload(
+    auditLogItem,
+    agentList.value
+  );
+  const translationKey = generateLogActionKey(auditLogItem);
+
+  return t(translationKey, translationPayload);
+};
+
+const onPageChange = page => {
+  router.push({ name: 'auditlogs_list', query: { page: page } });
+};
+
+onMounted(() => {
+  store.dispatch('agents/get');
+  fetchAuditLogs(routerPage.value);
+});
+
+watch(routerPage, (newPage, oldPage) => {
+  if (newPage !== oldPage) {
+    fetchAuditLogs(newPage);
+  }
+});
+</script>
+
 <template>
-  <div class="flex-1 overflow-auto p-4 flex justify-between flex-col">
-    <!-- List Audit Logs -->
-    <div>
-      <div>
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex h-full items-center flex-col justify-center"
-        >
-          {{ $t('AUDIT_LOGS.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('AUDIT_LOGS.LOADING')"
-        />
+  <div class="flex-1 overflow-auto">
+    <BaseSettingsHeader
+      :title="$t('AUDIT_LOGS.HEADER')"
+      :description="$t('AUDIT_LOGS.DESCRIPTION')"
+      :link-text="$t('AUDIT_LOGS.LEARN_MORE')"
+      feature-name="audit_logs"
+    />
 
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table w-full"
-        >
-          <colgroup>
-            <col class="w-3/5" />
-            <col />
-            <col />
-          </colgroup>
+    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+      <woot-loading-state
+        v-if="uiFlags.fetchingList"
+        :message="$t('AUDIT_LOGS.LOADING')"
+      />
+      <p
+        v-else-if="!records.length"
+        class="flex flex-col items-center justify-center h-full text-base p-8"
+      >
+        {{ $t('AUDIT_LOGS.LIST.404') }}
+      </p>
+      <div v-else class="min-w-full overflow-x-auto">
+        <table class="divide-y divide-slate-75 dark:divide-slate-700">
           <thead>
-            <!-- Header -->
             <th
               v-for="thHeader in $t('AUDIT_LOGS.LIST.TABLE_HEADER')"
               :key="thHeader"
+              class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
             >
               {{ thHeader }}
             </th>
           </thead>
-          <tbody>
+          <tbody
+            class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+          >
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="whitespace-nowrap break-all">
+              <td class="py-4 pr-4 break-all whitespace-nowrap">
                 {{ generateLogText(auditLogItem) }}
               </td>
-              <td class="whitespace-nowrap break-all">
+              <td class="py-4 pr-4 break-all whitespace-nowrap">
                 {{
                   messageTimestamp(
                     auditLogItem.created_at,
@@ -45,92 +106,20 @@
                   )
                 }}
               </td>
-              <td class="w-[8.75rem]">
+              <td class="py-4 w-[8.75rem]">
                 {{ auditLogItem.remote_address }}
               </td>
             </tr>
           </tbody>
         </table>
+        <TableFooter
+          :current-page="Number(meta.currentPage)"
+          :total-count="meta.totalEntries"
+          :page-size="meta.perPage"
+          class="border-slate-50 dark:border-slate-800 border-t !px-0 py-4"
+          @pageChange="onPageChange"
+        />
       </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 TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import timeMixin from 'dashboard/mixins/time';
-import alertMixin from 'shared/mixins/alertMixin';
-import {
-  generateTranslationPayload,
-  generateLogActionKey,
-} from 'dashboard/helper/auditlogHelper';
-
-export default {
-  components: {
-    TableFooter,
-  },
-  mixins: [alertMixin, timeMixin],
-  beforeRouteEnter(to, from, next) {
-    // Fetch Audit Logs on page load without manual refresh
-    next(vm => {
-      vm.fetchAuditLogs();
-    });
-  },
-  data() {
-    return {
-      loading: {},
-      auditLogsAPI: {
-        message: '',
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'auditlogs/getAuditLogs',
-      uiFlags: 'auditlogs/getUIFlags',
-      meta: 'auditlogs/getMeta',
-      agentList: 'agents/getAgents',
-    }),
-  },
-  mounted() {
-    // Fetch API Call
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    fetchAuditLogs() {
-      const page = this.$route.query.page ?? 1;
-      this.$store.dispatch('auditlogs/fetch', { page }).catch(error => {
-        const errorMessage =
-          error?.message || this.$t('AUDIT_LOGS.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
-      });
-    },
-    generateLogText(auditLogItem) {
-      const translationPayload = generateTranslationPayload(
-        auditLogItem,
-        this.agentList
-      );
-      const translationKey = generateLogActionKey(auditLogItem);
-
-      return this.$t(translationKey, translationPayload);
-    },
-    onPageChange(page) {
-      window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
-      try {
-        this.$store.dispatch('auditlogs/fetch', { page });
-      } catch (error) {
-        const errorMessage =
-          error?.message || this.$t('AUDIT_LOGS.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
index acf061288ef19..51561ca0cd9cd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
@@ -1,18 +1,13 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const AuditLogsHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
-      path: frontendURL('accounts/:accountId/settings/audit-log'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'AUDIT_LOGS.HEADER',
-        icon: 'key',
-        showNewButton: false,
-      },
+      path: frontendURL('accounts/:accountId/settings/audit-logs'),
+      component: SettingsWrapper,
       children: [
         {
           path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 152b55aae854f..8cb143a7e894e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,3 +1,97 @@
+<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 {
+  AUTOMATION_RULE_EVENTS,
+  AUTOMATION_ACTION_TYPES,
+  AUTOMATIONS,
+} from './constants';
+export default {
+  components: {
+    FilterInputBox,
+    AutomationActionInput,
+  },
+  mixins: [automationMethodsMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
+      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
+      automationRuleEvents: AUTOMATION_RULE_EVENTS,
+      automationMutated: false,
+      show: true,
+      automation: {
+        name: null,
+        description: null,
+        event_name: 'conversation_created',
+        conditions: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+            custom_attribute_type: '',
+          },
+        ],
+        actions: [
+          {
+            action_name: 'assign_agent',
+            action_params: [],
+          },
+        ],
+      },
+      showDeleteConfirmationModal: false,
+      allCustomAttributes: [],
+      mode: 'create',
+      errors: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasAutomationMutated() {
+      if (
+        this.automation.conditions[0].values ||
+        this.automation.actions[0].action_params.length
+      )
+        return true;
+      return false;
+    },
+    automationActionTypes() {
+      const isSLAEnabled = this.isFeatureEnabled('sla');
+      return isSLAEnabled
+        ? AUTOMATION_ACTION_TYPES
+        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
+    },
+  },
+  mounted() {
+    this.$store.dispatch('inboxes/get');
+    this.$store.dispatch('agents/get');
+    this.$store.dispatch('contacts/get');
+    this.$store.dispatch('teams/get');
+    this.$store.dispatch('labels/get');
+    this.$store.dispatch('campaigns/get');
+    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
+    this.manifestCustomAttributes();
+  },
+  methods: {
+    isFeatureEnabled(flag) {
+      return this.isFeatureEnabledonAccount(this.accountId, flag);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
@@ -7,32 +101,28 @@
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
           type="text"
-          :class="{ error: $v.automation.name.$error }"
-          :error="
-            $v.automation.name.$error
-              ? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
-              : ''
-          "
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
           :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="$v.automation.name.$touch"
         />
         <woot-input
           v-model="automation.description"
           :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
           type="text"
-          :class="{ error: $v.automation.description.$error }"
+          :class="{ error: errors.description }"
           :error="
-            $v.automation.description.$error
-              ? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
-              : ''
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
           "
           :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-          @blur="$v.automation.description.$touch"
         />
-        <div class="event_wrapper">
-          <label :class="{ error: $v.automation.event_name.$error }">
+        <div class="mb-6">
+          <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
+            <select
+              v-model="automation.event_name"
+              class="m-0"
+              @change="onEventChange()"
+            >
               <option
                 v-for="event in automationRuleEvents"
                 :key="event.key"
@@ -41,11 +131,14 @@
                 {{ event.value }}
               </option>
             </select>
-            <span v-if="$v.automation.event_name.$error" class="message">
+            <span v-if="errors.event_name" class="message">
               {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
             </span>
           </label>
-          <p v-if="hasAutomationMutated" class="info-message">
+          <p
+            v-if="hasAutomationMutated"
+            class="text-xs text-right text-green-500 dark:text-green-500"
+          >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>
         </div>
@@ -55,9 +148,9 @@
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+            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
+            <FilterInputBox
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
@@ -73,7 +166,11 @@
               :custom-attribute-type="
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
-              :v="$v.automation.conditions.$each[i]"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -97,9 +194,9 @@
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+            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
+            <AutomationActionInput
               v-for="(action, i) in automation.actions"
               :key="i"
               v-model="automation.actions[i]"
@@ -110,7 +207,11 @@
               :show-action-input="
                 showActionInput(automation.actions[i].action_name)
               "
-              :v="$v.automation.actions.$each[i]"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
             />
@@ -129,7 +230,7 @@
         </section>
         <!-- // Actions End -->
         <div class="w-full">
-          <div class="flex flex-row justify-end gap-2 py-2 px-0 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>
@@ -142,111 +243,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import automationValidationsMixin from 'dashboard/mixins/automations/validationsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-
-import {
-  AUTOMATION_RULE_EVENTS,
-  AUTOMATION_ACTION_TYPES,
-  AUTOMATIONS,
-} from './constants';
-export default {
-  components: {
-    filterInputBox,
-    automationActionInput,
-  },
-  mixins: [alertMixin, automationMethodsMixin, automationValidationsMixin],
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-
-  data() {
-    return {
-      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
-      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
-      automationRuleEvents: AUTOMATION_RULE_EVENTS,
-      automationMutated: false,
-      show: true,
-      automation: {
-        name: null,
-        description: null,
-        event_name: 'conversation_created',
-        conditions: [
-          {
-            attribute_key: 'status',
-            filter_operator: 'equal_to',
-            values: '',
-            query_operator: 'and',
-            custom_attribute_type: '',
-          },
-        ],
-        actions: [
-          {
-            action_name: 'assign_agent',
-            action_params: [],
-          },
-        ],
-      },
-      showDeleteConfirmationModal: false,
-      allCustomAttributes: [],
-      mode: 'create',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    hasAutomationMutated() {
-      if (
-        this.automation.conditions[0].values ||
-        this.automation.actions[0].action_params.length
-      )
-        return true;
-      return false;
-    },
-    automationActionTypes() {
-      const isSLAEnabled = this.isFeatureEnabled('sla');
-      return isSLAEnabled
-        ? AUTOMATION_ACTION_TYPES
-        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
-    },
-  },
-  mounted() {
-    this.$store.dispatch('inboxes/get');
-    this.$store.dispatch('agents/get');
-    this.$store.dispatch('contacts/get');
-    this.$store.dispatch('teams/get');
-    this.$store.dispatch('labels/get');
-    this.$store.dispatch('campaigns/get');
-    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.manifestCustomAttributes();
-  },
-  methods: {
-    isFeatureEnabled(flag) {
-      return this.isFeatureEnabledonAccount(this.accountId, flag);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.event_wrapper {
-  select {
-    @apply m-0;
-  }
-  .info-message {
-    @apply text-xs text-green-500 dark:text-green-500 text-right;
-  }
-
-  @apply mb-6;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 1b2b5a9fed90e..c11a56fc77213 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,3 +1,78 @@
+<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 {
+  AUTOMATION_RULE_EVENTS,
+  AUTOMATION_ACTION_TYPES,
+  AUTOMATIONS,
+} from './constants';
+
+export default {
+  components: {
+    FilterInputBox,
+    AutomationActionInput,
+  },
+  mixins: [automationMethodsMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    selectedResponse: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
+      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
+      automationRuleEvents: AUTOMATION_RULE_EVENTS,
+      automationMutated: false,
+      show: true,
+      automation: null,
+      showDeleteConfirmationModal: false,
+      allCustomAttributes: [],
+      mode: 'edit',
+      errors: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasAutomationMutated() {
+      if (
+        this.automation.conditions[0].values ||
+        this.automation.actions[0].action_params.length
+      )
+        return true;
+      return false;
+    },
+    automationActionTypes() {
+      const isSLAEnabled = this.isFeatureEnabled('sla');
+      return isSLAEnabled
+        ? AUTOMATION_ACTION_TYPES
+        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
+    },
+  },
+  mounted() {
+    this.manifestCustomAttributes();
+    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
+    this.formatAutomation(this.selectedResponse);
+  },
+  methods: {
+    isFeatureEnabled(flag) {
+      return this.isFeatureEnabledonAccount(this.accountId, flag);
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
@@ -7,30 +82,22 @@
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
           type="text"
-          :class="{ error: $v.automation.name.$error }"
-          :error="
-            $v.automation.name.$error
-              ? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
-              : ''
-          "
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
           :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="$v.automation.name.$touch"
         />
         <woot-input
           v-model="automation.description"
           :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
           type="text"
-          :class="{ error: $v.automation.description.$error }"
+          :class="{ error: errors.description }"
           :error="
-            $v.automation.description.$error
-              ? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
-              : ''
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
           "
           :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-          @blur="$v.automation.description.$touch"
         />
         <div class="event_wrapper">
-          <label :class="{ error: $v.automation.event_name.$error }">
+          <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
             <select v-model="automation.event_name" @change="onEventChange()">
               <option
@@ -41,7 +108,7 @@
                 {{ event.value }}
               </option>
             </select>
-            <span v-if="$v.automation.event_name.$error" class="message">
+            <span v-if="errors.event_name" class="message">
               {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
             </span>
           </label>
@@ -52,9 +119,9 @@
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+            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
+            <FilterInputBox
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
@@ -70,7 +137,11 @@
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
               :show-query-operator="i !== automation.conditions.length - 1"
-              :v="$v.automation.conditions.$each[i]"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -94,16 +165,20 @@
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+            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
+            <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)"
-              :v="$v.automation.actions.$each[i]"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
               :initial-file-name="getFileName(action, automation.files)"
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
@@ -123,7 +198,7 @@
         </section>
         <!-- // Actions End -->
         <div class="w-full">
-          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
             <woot-button
               class="button"
               variant="clear"
@@ -141,81 +216,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import automationValidationsMixin from 'dashboard/mixins/automations/validationsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-
-import {
-  AUTOMATION_RULE_EVENTS,
-  AUTOMATION_ACTION_TYPES,
-  AUTOMATIONS,
-} from './constants';
-
-export default {
-  components: {
-    filterInputBox,
-    automationActionInput,
-  },
-  mixins: [alertMixin, automationMethodsMixin, automationValidationsMixin],
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    selectedResponse: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
-      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
-      automationRuleEvents: AUTOMATION_RULE_EVENTS,
-      automationMutated: false,
-      show: true,
-      automation: null,
-      showDeleteConfirmationModal: false,
-      allCustomAttributes: [],
-      mode: 'edit',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    hasAutomationMutated() {
-      if (
-        this.automation.conditions[0].values ||
-        this.automation.actions[0].action_params.length
-      )
-        return true;
-      return false;
-    },
-    automationActionTypes() {
-      const isSLAEnabled = this.isFeatureEnabled('sla');
-      return isSLAEnabled
-        ? AUTOMATION_ACTION_TYPES
-        : AUTOMATION_ACTION_TYPES.filter(action => action.key !== 'add_sla');
-    },
-  },
-  mounted() {
-    this.manifestCustomAttributes();
-    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.formatAutomation(this.selectedResponse);
-  },
-  methods: {
-    isFeatureEnabled(flag) {
-      return this.isFeatureEnabledonAccount(this.accountId, flag);
-    },
-  },
-};
-</script>
 <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 a780c9832afed..cbd200f091e8f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -1,141 +1,15 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <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 h-full items-center flex-col justify-center"
-        >
-          {{ $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 lg:block w-1/3">
-        <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';
+import { messageStamp } from 'shared/helpers/timeHelper';
 import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import timeMixin from 'dashboard/mixins/time';
 
 export default {
   components: {
     AddAutomationRule,
     EditAutomationRule,
   },
-  mixins: [alertMixin, timeMixin],
   data() {
     return {
       loading: {},
@@ -213,20 +87,20 @@ export default {
     async deleteAutomation(id) {
       try {
         await this.$store.dispatch('automations/delete', id);
-        this.showAlert(this.$t('AUTOMATION.DELETE.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.DELETE.API.SUCCESS_MESSAGE'));
         this.loading[this.selectedResponse.id] = false;
       } catch (error) {
-        this.showAlert(this.$t('AUTOMATION.DELETE.API.ERROR_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.DELETE.API.ERROR_MESSAGE'));
       }
     },
     async cloneAutomation(id) {
       try {
         await this.$store.dispatch('automations/clone', id);
-        this.showAlert(this.$t('AUTOMATION.CLONE.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.CLONE.API.SUCCESS_MESSAGE'));
         this.$store.dispatch('automations/get');
         this.loading[this.selectedResponse.id] = false;
       } catch (error) {
-        this.showAlert(this.$t('AUTOMATION.CLONE.API.ERROR_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.CLONE.API.ERROR_MESSAGE'));
       }
     },
     async submitAutomation(payload, mode) {
@@ -238,7 +112,7 @@ export default {
             ? this.$t('AUTOMATION.EDIT.API.SUCCESS_MESSAGE')
             : this.$t('AUTOMATION.ADD.API.SUCCESS_MESSAGE');
         await this.$store.dispatch(action, payload);
-        this.showAlert(successMessage);
+        useAlert(successMessage);
         this.hideAddPopup();
         this.hideEditPopup();
       } catch (error) {
@@ -246,7 +120,7 @@ export default {
           mode === 'edit'
             ? this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE')
             : this.$t('AUTOMATION.ADD.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
     async toggleAutomation(automation, status) {
@@ -271,15 +145,141 @@ export default {
           const message = status
             ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_SUCCESFUL')
             : this.$t('AUTOMATION.TOGGLE.ACTIVATION_SUCCESFUL');
-          this.showAlert(message);
+          useAlert(message);
         }
       } catch (error) {
-        this.showAlert(this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE'));
       }
     },
     readableTime(date) {
-      return this.messageStamp(new Date(date), 'LLL d, h:mm a');
+      return messageStamp(new Date(date), 'LLL d, h:mm a');
     },
   },
 };
 </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 863e1b5f97c5b..4fdf1ef67b2b3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -1,51 +1,20 @@
-<template>
-  <div class="overflow-auto flex-1 p-6 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';
 
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import accountMixin from '../../../../mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 import BillingItem from './components/BillingItem.vue';
-// sdds
+
 export default {
   components: { BillingItem },
-  mixins: [accountMixin, alertMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
+  setup() {
+    const { accountId } = useAccount();
+
+    return {
+      accountId,
+    };
+  },
   computed: {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
@@ -88,6 +57,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 6f8ade8a07e29..90582afa30d16 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 c27f8139940c4..8c0dc7b5cc37b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -1,183 +1,8 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <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 gap-2 py-2 px-0 w-full">
-        <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 { required } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
@@ -189,8 +14,10 @@ export default {
     WootDateTimePicker,
     WootMessageEditor,
   },
-
-  mixins: [alertMixin, campaignMixin],
+  mixins: [campaignMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       title: '',
@@ -288,7 +115,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onChange(value) {
       this.scheduledAt = value;
@@ -305,7 +132,7 @@ export default {
       } catch (error) {
         const errorMessage =
           error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
     getCampaignDetails() {
@@ -343,8 +170,8 @@ export default {
       return campaignDetails;
     },
     async addCampaign() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {
@@ -356,17 +183,194 @@ export default {
           type: this.campaignType,
         });
 
-        this.showAlert(this.$t('CAMPAIGN.ADD.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('CAMPAIGN.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
         const errorMessage =
           error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
   },
 };
 </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 5f259152c2e53..0e8dea361a349 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -1,33 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import CampaignsTable from './CampaignsTable.vue';
 import EditCampaign from './EditCampaign.vue';
@@ -36,7 +9,7 @@ export default {
     CampaignsTable,
     EditCampaign,
   },
-  mixins: [alertMixin, campaignMixin],
+  mixins: [campaignMixin],
   props: {
     type: {
       type: String,
@@ -53,7 +26,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'campaigns/getUIFlags',
-      labelList: 'labels/getLabels',
     }),
     campaigns() {
       return this.$store.getters['campaigns/getCampaigns'](this.campaignType);
@@ -87,15 +59,43 @@ export default {
     async deleteCampaign(id) {
       try {
         await this.$store.dispatch('campaigns/delete', id);
-        this.showAlert(this.$t('CAMPAIGN.DELETE.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('CAMPAIGN.DELETE.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('CAMPAIGN.DELETE.API.ERROR_MESSAGE'));
+        useAlert(this.$t('CAMPAIGN.DELETE.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 2eb0c30782d3b..2989db04c35ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -1,3 +1,53 @@
+<script>
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import InboxName from 'dashboard/components/widgets/InboxName.vue';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { messageStamp } from 'shared/helpers/timeHelper';
+
+export default {
+  components: {
+    UserAvatarWithName,
+    InboxName,
+  },
+  mixins: [messageFormatterMixin],
+  props: {
+    campaign: {
+      type: Object,
+      required: true,
+    },
+    isOngoingType: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    campaignStatus() {
+      if (this.isOngoingType) {
+        return this.campaign.enabled
+          ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
+          : this.$t('CAMPAIGN.LIST.STATUS.DISABLED');
+      }
+
+      return this.campaign.campaign_status === 'completed'
+        ? this.$t('CAMPAIGN.LIST.STATUS.COMPLETED')
+        : this.$t('CAMPAIGN.LIST.STATUS.ACTIVE');
+    },
+    colorScheme() {
+      if (this.isOngoingType) {
+        return this.campaign.enabled ? 'success' : 'secondary';
+      }
+      return this.campaign.campaign_status === 'completed'
+        ? 'secondary'
+        : 'success';
+    },
+  },
+  methods: {
+    messageStamp,
+  },
+};
+</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"
@@ -44,8 +94,8 @@
         :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
+      <InboxName :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
+      <UserAvatarWithName
         v-if="campaign.sender"
         :user="campaign.sender"
         class="mb-1"
@@ -65,50 +115,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import timeMixin from 'dashboard/mixins/time';
-
-export default {
-  components: {
-    UserAvatarWithName,
-    InboxName,
-  },
-  mixins: [messageFormatterMixin, timeMixin],
-  props: {
-    campaign: {
-      type: Object,
-      required: true,
-    },
-    isOngoingType: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  computed: {
-    campaignStatus() {
-      if (this.isOngoingType) {
-        return this.campaign.enabled
-          ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
-          : this.$t('CAMPAIGN.LIST.STATUS.DISABLED');
-      }
-
-      return this.campaign.campaign_status === 'completed'
-        ? this.$t('CAMPAIGN.LIST.STATUS.COMPLETED')
-        : this.$t('CAMPAIGN.LIST.STATUS.ACTIVE');
-    },
-    colorScheme() {
-      if (this.isOngoingType) {
-        return this.campaign.enabled ? 'success' : 'secondary';
-      }
-      return this.campaign.campaign_status === 'completed'
-        ? 'secondary'
-        : 'success';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index 3c73cbf77aa9e..d1abc6490dd46 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 71d1de41c0a38..7bd4f2a15aafa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -1,121 +1,9 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <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 gap-2 py-2 px-0 w-full">
-        <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 { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import { URLPattern } from 'urlpattern-polyfill';
 
@@ -123,13 +11,16 @@ export default {
   components: {
     WootMessageEditor,
   },
-  mixins: [alertMixin, campaignMixin],
+  mixins: [campaignMixin],
   props: {
     selectedCampaign: {
       type: Object,
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       title: '',
@@ -210,7 +101,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
 
     async loadInboxMembers() {
@@ -225,7 +116,7 @@ export default {
       } catch (error) {
         const errorMessage =
           error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
     onChangeInbox() {
@@ -252,8 +143,8 @@ export default {
       this.loadInboxMembers();
     },
     async editCampaign() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {
@@ -272,15 +163,129 @@ export default {
             time_on_page: this.timeOnPage,
           },
         });
-        this.showAlert(this.$t('CAMPAIGN.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('CAMPAIGN.EDIT.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        this.showAlert(this.$t('CAMPAIGN.EDIT.API.ERROR_MESSAGE'));
+        useAlert(this.$t('CAMPAIGN.EDIT.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 9004ac22dd679..d6f1918cfbae9 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 cafde905f7b32..95f60f5a22399 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -1,65 +1,11 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="h-auto overflow-auto flex flex-col">
-      <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 gap-2 py-2 px-0 w-full">
-          <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 { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import Modal from '../../../../components/Modal.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
@@ -67,7 +13,6 @@ export default {
     Modal,
     WootMessageEditor,
   },
-  mixins: [alertMixin],
   props: {
     responseContent: {
       type: String,
@@ -78,6 +23,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       shortCode: '',
@@ -102,8 +50,8 @@ export default {
     resetForm() {
       this.shortCode = '';
       this.content = '';
-      this.$v.shortCode.$reset();
-      this.$v.content.$reset();
+      this.v$.shortCode.$reset();
+      this.v$.content.$reset();
     },
     addCannedResponse() {
       // Show loading on button
@@ -117,7 +65,7 @@ export default {
         .then(() => {
           // Reset Form, Show success message
           this.addCanned.showLoading = false;
-          this.showAlert(this.$t('CANNED_MGMT.ADD.API.SUCCESS_MESSAGE'));
+          useAlert(this.$t('CANNED_MGMT.ADD.API.SUCCESS_MESSAGE'));
           this.resetForm();
           this.onClose();
         })
@@ -125,13 +73,68 @@ export default {
           this.addCanned.showLoading = false;
           const errorMessage =
             error?.message || this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE');
-          this.showAlert(errorMessage);
+          useAlert(errorMessage);
         });
     },
   },
 };
 </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 16cf0d77a0110..634745b388e73 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -1,61 +1,10 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="h-auto overflow-auto flex flex-col">
-      <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 gap-2 py-2 px-0 w-full">
-          <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 { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import Modal from '../../../../components/Modal.vue';
 
 export default {
@@ -64,13 +13,15 @@ export default {
     Modal,
     WootMessageEditor,
   },
-  mixins: [alertMixin],
   props: {
     id: { type: Number, default: null },
     edcontent: { type: String, default: '' },
     edshortCode: { type: String, default: '' },
     onClose: { type: Function, default: () => {} },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       editCanned: {
@@ -98,14 +49,14 @@ export default {
   },
   methods: {
     setPageName({ name }) {
-      this.$v.content.$touch();
+      this.v$.content.$touch();
       this.content = name;
     },
     resetForm() {
       this.shortCode = '';
       this.content = '';
-      this.$v.shortCode.$reset();
-      this.$v.content.$reset();
+      this.v$.shortCode.$reset();
+      this.v$.content.$reset();
     },
     editCannedResponse() {
       // Show loading on button
@@ -120,7 +71,7 @@ export default {
         .then(() => {
           // Reset Form, Show success message
           this.editCanned.showLoading = false;
-          this.showAlert(this.$t('CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+          useAlert(this.$t('CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'));
           this.resetForm();
           setTimeout(() => {
             this.onClose();
@@ -130,12 +81,65 @@ export default {
           this.editCanned.showLoading = false;
           const errorMessage =
             error?.message || this.$t('CANNED_MGMT.EDIT.API.ERROR_MESSAGE');
-          this.showAlert(errorMessage);
+          useAlert(errorMessage);
         });
     },
   },
 };
 </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 0cc4b5932957a..d3fc545961352 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -1,121 +1,222 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import AddCanned from './AddCanned.vue';
+import EditCanned from './EditCanned.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+
+const showAddPopup = ref(false);
+const loading = ref({});
+const showEditPopup = ref(false);
+const showDeleteConfirmationPopup = ref(false);
+const activeResponse = ref({});
+const cannedResponseAPI = ref({ message: '' });
+
+const sortOrder = ref('asc');
+const records = computed(() =>
+  getters.getSortedCannedResponses.value(sortOrder.value)
+);
+const uiFlags = computed(() => getters.getUIFlags.value);
+
+const deleteConfirmText = computed(
+  () =>
+    `${t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${activeResponse.value.short_code}`
+);
+
+const deleteRejectText = computed(
+  () =>
+    `${t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${activeResponse.value.short_code}`
+);
+
+const deleteMessage = computed(() => {
+  return ` ${activeResponse.value.short_code} ? `;
+});
+
+const toggleSort = () => {
+  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+};
+
+const fetchCannedResponses = async () => {
+  try {
+    await store.dispatch('getCannedResponse');
+  } catch (error) {
+    // Ignore Error
+  }
+};
+
+onMounted(() => {
+  fetchCannedResponses();
+});
+
+const showAlertMessage = message => {
+  loading[activeResponse.value.id] = false;
+  activeResponse.value = {};
+  cannedResponseAPI.value.message = message;
+  useAlert(message);
+};
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const openEditPopup = response => {
+  showEditPopup.value = true;
+  activeResponse.value = response;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const openDeletePopup = response => {
+  showDeleteConfirmationPopup.value = true;
+  activeResponse.value = response;
+};
+
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteCannedResponse = async id => {
+  try {
+    await store.dispatch('deleteCannedResponse', id);
+    showAlertMessage(t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
+    showAlertMessage(errorMessage);
+  }
+};
+
+const confirmDeletion = () => {
+  loading[activeResponse.value.id] = true;
+  closeDeletePopup();
+  deleteCannedResponse(activeResponse.value.id);
+};
+</script>
+
 <template>
   <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
+    <BaseSettingsHeader
+      :title="$t('CANNED_MGMT.HEADER')"
+      :description="$t('CANNED_MGMT.DESCRIPTION')"
+      :link-text="$t('CANNED_MGMT.LEARN_MORE')"
+      feature-name="canned_responses"
     >
-      {{ $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"
+      <template #actions>
+        <woot-button
+          class="button nice rounded-md"
+          icon="add-circle"
+          @click="openAddPopup"
         >
-          {{ $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"
+          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
+        </woot-button>
+      </template>
+    </BaseSettingsHeader>
+
+    <div class="mt-6 flex-1">
+      <woot-loading-state
+        v-if="uiFlags.fetchingList"
+        :message="$t('CANNED_MGMT.LOADING')"
+      />
+      <p
+        v-else-if="!records.length"
+        class="flex flex-col items-center justify-center h-full text-base text-slate-600 dark:text-slate-300 py-8"
+      >
+        {{ $t('CANNED_MGMT.LIST.404') }}
+      </p>
+      <table
+        v-else
+        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <thead>
+          <th
+            v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
+            :key="thHeader"
+            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          >
+            <span v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
+              {{ thHeader }}
+            </span>
+
+            <button
+              v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
+              class="flex items-center p-0 cursor-pointer"
+              @click="toggleSort"
             >
-              <p v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
+              <span class="mb-0">
                 {{ thHeader }}
-              </p>
-
-              <button
-                v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
-                class="cursor-pointer flex items-center p-0"
-                @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"
+              </span>
+              <fluent-icon
+                class="ml-2"
+                :icon="sortOrder === 'desc' ? 'chevron-up' : 'chevron-down'"
+              />
+            </button>
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+        >
+          <tr
+            v-for="(cannedItem, index) in records"
+            :key="cannedItem.short_code"
+          >
+            <td
+              class="py-4 pr-4 truncate max-w-xs font-medium"
+              :title="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>
+              {{ cannedItem.short_code }}
+            </td>
+            <td class="py-4 pr-4 md:break-all whitespace-normal">
+              {{ cannedItem.content }}
+            </td>
+            <td class="py-4 flex justify-end gap-1">
+              <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>
-    <!-- Add Agent -->
+
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-canned :on-close="hideAddPopup" />
+      <AddCanned :on-close="hideAddPopup" />
     </woot-modal>
 
-    <!-- Edit Canned Response -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-canned
+      <EditCanned
         v-if="showEditPopup"
-        :id="selectedResponse.id"
-        :edshort-code="selectedResponse.short_code"
-        :edcontent="selectedResponse.content"
+        :id="activeResponse.id"
+        :edshort-code="activeResponse.short_code"
+        :edcontent="activeResponse.content"
         :on-close="hideEditPopup"
       />
     </woot-modal>
 
-    <!-- Delete Canned Response -->
     <woot-delete-modal
       :show.sync="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
@@ -128,120 +229,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import AddCanned from './AddCanned.vue';
-import EditCanned from './EditCanned.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: {
-    AddCanned,
-    EditCanned,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-      cannedResponseAPI: {
-        message: '',
-      },
-      sortOrder: 'asc',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'getCannedResponses',
-      uiFlags: 'getUIFlags',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedResponse.short_code
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedResponse.short_code
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.selectedResponse.short_code}?`;
-    },
-  },
-  mounted() {
-    // Fetch API Call
-    this.$store.dispatch('getCannedResponse').then(() => {
-      this.toggleSort();
-    });
-  },
-  methods: {
-    toggleSort() {
-      this.records.sort((a, b) => {
-        if (this.sortOrder === 'asc') {
-          return a.short_code.localeCompare(b.short_code);
-        }
-        return b.short_code.localeCompare(a.short_code);
-      });
-      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-    },
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loading[this.selectedResponse.id] = false;
-      this.selectedResponse = {};
-      // Show message
-      this.cannedResponseAPI.message = message;
-      this.showAlert(message);
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    // Edit Modal Functions
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedResponse = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    // Delete Modal Functions
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    // Set loading and call Delete API
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteCannedResponse(this.selectedResponse.id);
-    },
-    deleteCannedResponse(id) {
-      this.$store
-        .dispatch('deleteCannedResponse', id)
-        .then(() => {
-          this.showAlertMessage(
-            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
-          );
-        })
-        .catch(error => {
-          const errorMessage =
-            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
-          this.showAlertMessage(errorMessage);
-        });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 236801c8c042f..9140e2c17c7e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -1,18 +1,13 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const CannedHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/canned-response'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CANNED_MGMT.HEADER',
-        icon: 'chat-multiple',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index e70358cc9ae69..5a2110a8e0928 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -1,5 +1,8 @@
 <script setup>
-defineProps({
+import CustomBrandPolicyWrapper from 'dashboard/components/CustomBrandPolicyWrapper.vue';
+import { getHelpUrlForFeature } from '../../../../helper/featureHelper';
+import BackButton from '../../../../components/widgets/BackButton.vue';
+const props = defineProps({
   title: {
     type: String,
     required: true,
@@ -10,18 +13,24 @@ defineProps({
   },
   iconName: {
     type: String,
-    required: true,
+    default: '',
   },
-  href: {
+  linkText: {
     type: String,
     default: '',
   },
-  linkText: {
+  featureName: {
+    type: String,
+    default: '',
+  },
+  backButtonLabel: {
     type: String,
     default: '',
   },
 });
 
+const helpURL = getHelpUrlForFeature(props.featureName);
+
 const openInNewTab = url => {
   if (!url) return;
   window.open(url, '_blank', 'noopener noreferrer');
@@ -29,12 +38,16 @@ const openInNewTab = url => {
 </script>
 
 <template>
-  <div class="flex flex-col items-start w-full gap-4">
-    <!-- Header section with icon, title and action button -->
+  <div class="flex flex-col items-start w-full gap-2 pt-4">
+    <BackButton
+      v-if="backButtonLabel"
+      compact
+      :button-label="backButtonLabel"
+    />
     <div class="flex items-center justify-between w-full gap-4">
-      <!-- Icon and title container -->
       <div class="flex items-center gap-3">
         <div
+          v-if="iconName"
           class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
         >
           <div
@@ -49,7 +62,7 @@ const openInNewTab = url => {
           </div>
         </div>
         <h1
-          class="text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
+          class="text-2xl font-semibold font-interDisplay tracking-[0.3px] text-slate-900 dark:text-slate-25"
         >
           {{ title }}
         </h1>
@@ -59,44 +72,45 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <!-- Description and optional link -->
-    <div
-      class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 max-w-[721px] w-full"
-    >
+    <div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
       <p
-        class="mb-0 text-sm font-normal tracking-[0.5%] line-clamp-5 sm:line-clamp-none"
+        class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
       >
         <slot name="description">{{ description }}</slot>
       </p>
-      <!-- Conditional link -->
-      <a
-        v-if="href && linkText"
-        :href="href"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="sm:inline-flex hidden tracking-[-0.6%] gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
-      >
-        {{ linkText }}
-        <fluent-icon
-          size="16"
-          icon="chevron-right"
-          type="outline"
-          class="flex-shrink-0 text-woot-500 dark:text-woot-500"
-        />
-      </a>
+      <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
+        <a
+          v-if="helpURL && linkText"
+          :href="helpURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
+        >
+          {{ linkText }}
+          <fluent-icon
+            size="16"
+            icon="chevron-right"
+            type="outline"
+            class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+          />
+        </a>
+      </CustomBrandPolicyWrapper>
     </div>
-    <!-- Mobile view for actions and link -->
-    <div class="flex items-start justify-start w-full gap-3 sm:hidden">
+    <div
+      class="flex items-start justify-start w-full gap-3 sm:hidden flex-wrap"
+    >
       <slot name="actions" />
-      <woot-button
-        v-if="href && linkText"
-        color-scheme="secondary"
-        icon="arrow-outwards"
-        class="flex-row-reverse rounded-xl min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
-        @click="openInNewTab(href)"
-      >
-        {{ linkText }}
-      </woot-button>
+      <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
+        <woot-button
+          v-if="helpURL && linkText"
+          color-scheme="secondary"
+          icon="arrow-outwards"
+          class="flex-row-reverse rounded-md min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+          @click="openInNewTab(helpURL)"
+        >
+          {{ linkText }}
+        </woot-button>
+      </CustomBrandPolicyWrapper>
     </div>
   </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 337c370cdab5c..d98a8e2433c7a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -10,18 +10,18 @@ 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 max-w-[900px] w-full"
+    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"
   >
-    <!-- left side section -->
     <slot name="leftSection">
       <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
         <div
           class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
         >
           <h3
-            class="justify-between text-sm tracking-[-0.6%] font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+            class="justify-between text-sm font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
           >
             <slot name="title">
               {{ title }}
@@ -30,7 +30,7 @@ defineProps({
           <slot name="label" />
         </div>
         <p
-          class="text-sm text-slate-600 tracking-[0.5%] dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
+          class="text-base text-slate-600 dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
         >
           <slot name="description">
             {{ description }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index 61157e486efcc..2985a34a92322 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -1,64 +1,17 @@
-<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="mx-0 flex flex-wrap" @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';
+import { useAlert } from 'dashboard/composables';
 
 import InboxMembersAPI from '../../../../api/inboxMembers';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     PageHeader,
   },
-  mixins: [alertMixin],
-
   validations: {
     selectedAgents: {
       isEmpty() {
@@ -66,24 +19,23 @@ export default {
       },
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedAgents: [],
       isCreating: false,
     };
   },
-
   computed: {
     ...mapGetters({
       agentList: 'agents/getAgents',
     }),
   },
-
   mounted() {
     this.$store.dispatch('agents/get');
   },
-
   methods: {
     async addAgents() {
       this.isCreating = true;
@@ -100,10 +52,56 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(error.message);
+        useAlert(error.message);
       }
       this.isCreating = false;
     },
   },
 };
 </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 93bff206d68de..0cbcc554ba613 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 d9f0008d5d162..c01f9443a6333 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -1,8 +1,78 @@
+<script>
+import EmptyState from '../../../../components/widgets/EmptyState.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+  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')"
@@ -22,11 +92,11 @@
           />
         </div>
         <div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
-          <p class="text-slate-700 dark:text-slate-200 font-medium mt-8">
+          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
           </p>
           <woot-code lang="html" :script="currentInbox.callback_webhook_url" />
-          <p class="text-slate-700 dark:text-slate-200 font-medium mt-8">
+          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
             {{
               $t(
                 'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
@@ -60,7 +130,7 @@
         </div>
         <div class="flex justify-center gap-2 mt-4">
           <router-link
-            class="button hollow primary rounded"
+            class="rounded button hollow primary"
             :to="{
               name: 'settings_inbox_show',
               params: { inboxId: $route.params.inbox_id },
@@ -69,7 +139,7 @@
             {{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
           </router-link>
           <router-link
-            class="button success rounded"
+            class="rounded button success"
             :to="{
               name: 'inbox_dashboard',
               params: { inboxId: $route.params.inbox_id },
@@ -79,78 +149,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 9e7f6dba04b41..9b3a883ba9a9b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -1,93 +1,23 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 
 export default {
   components: {
     SettingsSection,
   },
-  mixins: [alertMixin],
   props: {
     inbox: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isIMAPEnabled: false,
@@ -153,11 +83,84 @@ export default {
         }
 
         await this.$store.dispatch('inboxes/updateInboxIMAP', payload);
-        this.showAlert(this.$t('INBOX_MGMT.IMAP.EDIT.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.IMAP.EDIT.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(error.message);
+        useAlert(error.message);
       }
     },
   },
 };
 </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 ec9dc1ab7c6b5..bab39f6865577 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 f9290786eaf56..c7c7a2a4414a6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -1,15 +1,110 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
+import Settings from './Settings.vue';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  components: {
+    Settings,
+  },
+  mixins: [globalConfigMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+    const { accountScopedUrl } = useAccount();
+    return {
+      isAdmin,
+      accountScopedUrl,
+    };
+  },
+  data() {
+    return {
+      loading: {},
+      showSettings: false,
+      showDeletePopup: false,
+      selectedInbox: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      inboxesList: 'inboxes/getInboxes',
+      globalConfig: 'globalConfig/get',
+    }),
+    // Delete Modal
+    deleteConfirmText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedInbox.name
+      }`;
+    },
+    deleteRejectText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
+        this.selectedInbox.name
+      }`;
+    },
+    confirmDeleteMessage() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+        this.selectedInbox.name
+      }?`;
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        inboxName: this.selectedInbox.name,
+      })}`;
+    },
+  },
+  methods: {
+    twilioChannelName(item) {
+      const { medium = '' } = item;
+      if (medium === 'whatsapp') return 'WhatsApp';
+      return 'Twilio SMS';
+    },
+    openSettings(inbox) {
+      this.showSettings = true;
+      this.selectedInbox = inbox;
+    },
+    closeSettings() {
+      this.showSettings = false;
+      this.selectedInbox = {};
+    },
+    async deleteInbox({ id }) {
+      try {
+        await this.$store.dispatch('inboxes/delete', id);
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+
+    confirmDeletion() {
+      this.deleteInbox(this.selectedInbox);
+      this.closeDelete();
+    },
+    openDelete(inbox) {
+      this.showDeletePopup = true;
+      this.selectedInbox = inbox;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedInbox = {};
+    },
+  },
+};
+</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 h-full items-center flex-col justify-center"
+          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')"
+            :to="accountScopedUrl('settings/inboxes/new')"
           >
             {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
           </router-link>
@@ -36,28 +131,32 @@
               <td>
                 <span class="agent-name">{{ item.name }}</span>
                 <span v-if="item.channel_type === 'Channel::FacebookPage'">
-                  Facebook
+                  {{ 'Facebook' }}
                 </span>
                 <span v-if="item.channel_type === 'Channel::WebWidget'">
-                  Website
+                  {{ 'Website' }}
                 </span>
                 <span v-if="item.channel_type === 'Channel::TwitterProfile'">
-                  Twitter
+                  {{ 'Twitter' }}
                 </span>
                 <span v-if="item.channel_type === 'Channel::TwilioSms'">
                   {{ twilioChannelName(item) }}
                 </span>
                 <span v-if="item.channel_type === 'Channel::Whatsapp'">
-                  Whatsapp
+                  {{ 'Whatsapp' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Sms'">
+                  {{ 'Sms' }}
                 </span>
-                <span v-if="item.channel_type === 'Channel::Sms'"> Sms </span>
                 <span v-if="item.channel_type === 'Channel::Email'">
-                  Email
+                  {{ 'Email' }}
                 </span>
                 <span v-if="item.channel_type === 'Channel::Telegram'">
-                  Telegram
+                  {{ 'Telegram' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Line'">
+                  {{ 'Line' }}
                 </span>
-                <span v-if="item.channel_type === 'Channel::Line'">Line</span>
                 <span v-if="item.channel_type === 'Channel::Api'">
                   {{ globalConfig.apiChannelName || 'API' }}
                 </span>
@@ -67,7 +166,7 @@
               <td>
                 <div class="button-wrapper">
                   <router-link
-                    :to="addAccountScoping(`settings/inboxes/${item.id}`)"
+                    :to="accountScopedUrl(`settings/inboxes/${item.id}`)"
                   >
                     <woot-button
                       v-if="isAdmin"
@@ -98,7 +197,7 @@
         </table>
       </div>
 
-      <div class="w-1/3 hidden lg:block">
+      <div class="hidden w-1/3 lg:block">
         <span
           v-dompurify-html="
             useInstallationName(
@@ -109,7 +208,7 @@
         />
       </div>
     </div>
-    <settings
+    <Settings
       v-if="showSettings"
       :show.sync="showSettings"
       :on-close="closeSettings"
@@ -125,94 +224,8 @@
       :reject-text="deleteRejectText"
       :confirm-value="selectedInbox.name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import Settings from './Settings.vue';
-import adminMixin from '../../../../mixins/isAdmin';
-import accountMixin from '../../../../mixins/account';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: {
-    Settings,
-  },
-  mixins: [adminMixin, accountMixin, globalConfigMixin, alertMixin],
-  data() {
-    return {
-      loading: {},
-      showSettings: false,
-      showDeletePopup: false,
-      selectedInbox: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      inboxesList: 'inboxes/getInboxes',
-      globalConfig: 'globalConfig/get',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedInbox.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedInbox.name
-      }`;
-    },
-    confirmDeleteMessage() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
-        this.selectedInbox.name
-      }?`;
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-        inboxName: this.selectedInbox.name,
-      })}`;
-    },
-  },
-  methods: {
-    twilioChannelName(item) {
-      const { medium = '' } = item;
-      if (medium === 'whatsapp') return 'WhatsApp';
-      return 'Twilio SMS';
-    },
-    openSettings(inbox) {
-      this.showSettings = true;
-      this.selectedInbox = inbox;
-    },
-    closeSettings() {
-      this.showSettings = false;
-      this.selectedInbox = {};
-    },
-    async deleteInbox({ id }) {
-      try {
-        await this.$store.dispatch('inboxes/delete', id);
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-
-    confirmDeletion() {
-      this.deleteInbox(this.selectedInbox);
-      this.closeDelete();
-    },
-    openDelete(inbox) {
-      this.showDeletePopup = true;
-      this.selectedInbox = inbox;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedInbox = {};
-    },
-  },
-};
-</script>
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 ee8e664461c64..5fc73855e5d76 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 48bdb6bb74e76..95708340a4bc5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -1,85 +1,6 @@
-<template>
-  <div class="my-2 mx-8 text-base">
-    <div class="mt-6 mx-0 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 table-striped w-full">
-            <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="my-4 w-auto">
-        <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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import PreChatFields from './PreChatFields.vue';
 import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
@@ -88,7 +9,6 @@ export default {
     PreChatFields,
     WootMessageEditor,
   },
-  mixins: [alertMixin],
   props: {
     inbox: {
       type: Object,
@@ -163,14 +83,95 @@ export default {
           },
         };
         await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       }
     },
   },
 };
 </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 8735c8d880c54..09ae9add9d55e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -1,126 +1,473 @@
-<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" />
+<script>
+import { mapGetters } from 'vuex';
+import { shouldBeUrl } from 'shared/helpers/Validators';
+import { useAlert } from 'dashboard/composables';
+import { useVuelidate } from '@vuelidate/core';
+import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
+import SettingsSection from '../../../../components/SettingsSection.vue';
+import inboxMixin from 'shared/mixins/inboxMixin';
+import FacebookReauthorize from './facebook/Reauthorize.vue';
+import PreChatFormSettings from './PreChatForm/Settings.vue';
+import WeeklyAvailability from './components/WeeklyAvailability.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
+import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
+import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
+import WidgetBuilder from './WidgetBuilder.vue';
+import BotConfiguration from './components/BotConfiguration.vue';
+import { FEATURE_FLAGS } from '../../../../featureFlags';
+import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 
-    <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'
-            )
-          "
-        />
+export default {
+  components: {
+    BotConfiguration,
+    CollaboratorsPage,
+    ConfigurationPage,
+    FacebookReauthorize,
+    GreetingsEditor,
+    PreChatFormSettings,
+    SettingIntroBanner,
+    SettingsSection,
+    WeeklyAvailability,
+    WidgetBuilder,
+    SenderNameExamplePreview,
+    MicrosoftReauthorize,
+  },
+  mixins: [inboxMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      avatarFile: null,
+      avatarUrl: '',
+      greetingEnabled: true,
+      greetingMessage: '',
+      emailCollectEnabled: false,
+      csatSurveyEnabled: false,
+      senderNameType: 'friendly',
+      businessName: '',
+      locktoSingleConversation: false,
+      allowMessagesAfterResolved: true,
+      continuityViaEmail: true,
+      selectedInboxName: '',
+      channelWebsiteUrl: '',
+      webhookUrl: '',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      selectedFeatureFlags: [],
+      replyTime: '',
+      selectedTabIndex: 0,
+      selectedPortalSlug: '',
+      showBusinessNameInput: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      uiFlags: 'inboxes/getUIFlags',
+      portals: 'portals/allPortals',
+    }),
+    selectedTabKey() {
+      return this.tabs[this.selectedTabIndex]?.key;
+    },
+    whatsAppAPIProviderName() {
+      if (this.isAWhatsAppCloudChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
+      }
+      if (this.is360DialogWhatsAppChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG');
+      }
+      if (this.isATwilioWhatsAppChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
+      }
+      return '';
+    },
+    tabs() {
+      let visibleToAllChannelTabs = [
+        {
+          key: 'inbox_settings',
+          name: this.$t('INBOX_MGMT.TABS.SETTINGS'),
+        },
+        {
+          key: 'collaborators',
+          name: this.$t('INBOX_MGMT.TABS.COLLABORATORS'),
+        },
+        {
+          key: 'businesshours',
+          name: this.$t('INBOX_MGMT.TABS.BUSINESS_HOURS'),
+        },
+      ];
 
-        <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'
-            )
-          "
-        />
+      if (this.isAWebWidgetInbox) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'preChatForm',
+            name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
+          },
+          {
+            key: 'widgetBuilder',
+            name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'),
+          },
+        ];
+      }
 
-        <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>
+      if (
+        this.isATwilioChannel ||
+        this.isALineChannel ||
+        this.isAPIInbox ||
+        (this.isAnEmailChannel && !this.inbox.provider) ||
+        this.isAMicrosoftInbox ||
+        this.isAGoogleInbox ||
+        this.isAWhatsAppChannel ||
+        this.isAWebWidgetInbox
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'configuration',
+            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
+          },
+        ];
+      }
 
-        <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>
+      if (
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.AGENT_BOTS
+        ) &&
+        !(this.isAnEmailChannel || this.isATwitterInbox)
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'botConfiguration',
+            name: this.$t('INBOX_MGMT.TABS.BOT_CONFIGURATION'),
+          },
+        ];
+      }
+      return visibleToAllChannelTabs;
+    },
+    currentInboxId() {
+      return this.$route.params.inboxId;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
+    },
 
-        <label class="w-3/4 pb-4">
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
-          }}
-          <select v-model="greetingEnabled">
+    inboxName() {
+      if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
+        return `${this.inbox.name} (${
+          this.inbox.messaging_service_sid || this.inbox.phone_number
+        })`;
+      }
+      if (this.isAWhatsAppChannel) {
+        return `${this.inbox.name} (${this.inbox.phone_number})`;
+      }
+      if (this.isAnEmailChannel) {
+        return `${this.inbox.name} (${this.inbox.email})`;
+      }
+      return this.inbox.name;
+    },
+    canLocktoSingleConversation() {
+      return (
+        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
+      );
+    },
+    inboxNameLabel() {
+      if (this.isAWebWidgetInbox) {
+        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.LABEL');
+      }
+      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.LABEL');
+    },
+    inboxNamePlaceHolder() {
+      if (this.isAWebWidgetInbox) {
+        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.PLACEHOLDER');
+      }
+      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.PLACEHOLDER');
+    },
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
+    microsoftUnauthorized() {
+      return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
+    },
+    facebookUnauthorized() {
+      return this.isAFacebookInbox && this.inbox.reauthorization_required;
+    },
+  },
+  watch: {
+    $route(to) {
+      if (to.name === 'settings_inbox_show') {
+        this.fetchInboxSettings();
+      }
+    },
+  },
+  mounted() {
+    this.fetchInboxSettings();
+    this.fetchPortals();
+  },
+  methods: {
+    fetchPortals() {
+      this.$store.dispatch('portals/index');
+    },
+    handleFeatureFlag(e) {
+      this.selectedFeatureFlags = this.toggleInput(
+        this.selectedFeatureFlags,
+        e.target.value
+      );
+    },
+    toggleInput(selected, current) {
+      if (selected.includes(current)) {
+        const newSelectedFlags = selected.filter(flag => flag !== current);
+        return newSelectedFlags;
+      }
+      return [...selected, current];
+    },
+    onTabChange(selectedTabIndex) {
+      this.selectedTabIndex = selectedTabIndex;
+    },
+    fetchInboxSettings() {
+      this.selectedTabIndex = 0;
+      this.selectedAgents = [];
+      this.$store.dispatch('agents/get');
+      this.$store.dispatch('teams/get');
+      this.$store.dispatch('labels/get');
+      this.$store.dispatch('inboxes/get').then(() => {
+        this.avatarUrl = this.inbox.avatar_url;
+        this.selectedInboxName = this.inbox.name;
+        this.webhookUrl = this.inbox.webhook_url;
+        this.greetingEnabled = this.inbox.greeting_enabled || false;
+        this.greetingMessage = this.inbox.greeting_message || '';
+        this.emailCollectEnabled = this.inbox.enable_email_collect;
+        this.csatSurveyEnabled = this.inbox.csat_survey_enabled;
+        this.senderNameType = this.inbox.sender_name_type;
+        this.businessName = this.inbox.business_name;
+        this.allowMessagesAfterResolved =
+          this.inbox.allow_messages_after_resolved;
+        this.continuityViaEmail = this.inbox.continuity_via_email;
+        this.channelWebsiteUrl = this.inbox.website_url;
+        this.channelWelcomeTitle = this.inbox.welcome_title;
+        this.channelWelcomeTagline = this.inbox.welcome_tagline;
+        this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
+        this.replyTime = this.inbox.reply_time;
+        this.locktoSingleConversation = this.inbox.lock_to_single_conversation;
+        this.selectedPortalSlug = this.inbox.help_center
+          ? this.inbox.help_center.slug
+          : '';
+      });
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.currentInboxId,
+          name: this.selectedInboxName,
+          enable_email_collect: this.emailCollectEnabled,
+          csat_survey_enabled: this.csatSurveyEnabled,
+          allow_messages_after_resolved: this.allowMessagesAfterResolved,
+          greeting_enabled: this.greetingEnabled,
+          greeting_message: this.greetingMessage || '',
+          portal_id: this.selectedPortalSlug
+            ? this.portals.find(
+                portal => portal.slug === this.selectedPortalSlug
+              ).id
+            : null,
+          lock_to_single_conversation: this.locktoSingleConversation,
+          sender_name_type: this.senderNameType,
+          business_name: this.businessName || null,
+          channel: {
+            widget_color: this.inbox.widget_color,
+            website_url: this.channelWebsiteUrl,
+            webhook_url: this.webhookUrl,
+            welcome_title: this.channelWelcomeTitle || '',
+            welcome_tagline: this.channelWelcomeTagline || '',
+            selectedFeatureFlags: this.selectedFeatureFlags,
+            reply_time: this.replyTime || 'in_a_few_minutes',
+            continuity_via_email: this.continuityViaEmail,
+          },
+        };
+        if (this.avatarFile) {
+          payload.avatar = this.avatarFile;
+        }
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    handleImageUpload({ file, url }) {
+      this.avatarFile = file;
+      this.avatarUrl = url;
+    },
+    async handleAvatarDelete() {
+      try {
+        await this.$store.dispatch(
+          'inboxes/deleteInboxAvatar',
+          this.currentInboxId
+        );
+        this.avatarFile = null;
+        this.avatarUrl = '';
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(
+          error.message
+            ? error.message
+            : this.$t('INBOX_MGMT.DELETE.API.AVATAR_ERROR_MESSAGE')
+        );
+      }
+    },
+    toggleSenderNameType(key) {
+      this.senderNameType = key;
+    },
+    onClickShowBusinessNameInput() {
+      this.showBusinessNameInput = !this.showBusinessNameInput;
+      if (this.showBusinessNameInput) {
+        this.$nextTick(() => {
+          this.$refs.businessNameInput.focus();
+        });
+      }
+    },
+  },
+  validations: {
+    webhookUrl: {
+      shouldBeUrl,
+    },
+    selectedInboxName: {},
+  },
+};
+</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(
@@ -145,7 +492,7 @@
           </p>
         </label>
         <div v-if="greetingEnabled" class="pb-4">
-          <greetings-editor
+          <GreetingsEditor
             v-model.trim="greetingMessage"
             :label="
               $t(
@@ -334,440 +681,94 @@
             {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
           </label>
         </div>
-      </settings-section>
-      <settings-section
+      </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">
-          <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';
-import configMixin from 'shared/mixins/configMixin';
-import alertMixin from 'shared/mixins/alertMixin';
-import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
-import SettingsSection from '../../../../components/SettingsSection.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
-import FacebookReauthorize from './facebook/Reauthorize.vue';
-import PreChatFormSettings from './PreChatForm/Settings.vue';
-import WeeklyAvailability from './components/WeeklyAvailability.vue';
-import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
-import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
-import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
-import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
-import WidgetBuilder from './WidgetBuilder.vue';
-import BotConfiguration from './components/BotConfiguration.vue';
-import { FEATURE_FLAGS } from '../../../../featureFlags';
-import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
-
-export default {
-  components: {
-    BotConfiguration,
-    CollaboratorsPage,
-    ConfigurationPage,
-    FacebookReauthorize,
-    GreetingsEditor,
-    PreChatFormSettings,
-    SettingIntroBanner,
-    SettingsSection,
-    WeeklyAvailability,
-    WidgetBuilder,
-    SenderNameExamplePreview,
-    MicrosoftReauthorize,
-  },
-  mixins: [alertMixin, configMixin, inboxMixin],
-  data() {
-    return {
-      avatarFile: null,
-      avatarUrl: '',
-      greetingEnabled: true,
-      greetingMessage: '',
-      emailCollectEnabled: false,
-      csatSurveyEnabled: false,
-      senderNameType: 'friendly',
-      businessName: '',
-      locktoSingleConversation: false,
-      allowMessagesAfterResolved: true,
-      continuityViaEmail: true,
-      selectedInboxName: '',
-      channelWebsiteUrl: '',
-      webhookUrl: '',
-      channelWelcomeTitle: '',
-      channelWelcomeTagline: '',
-      selectedFeatureFlags: [],
-      replyTime: '',
-      selectedTabIndex: 0,
-      selectedPortalSlug: '',
-      showBusinessNameInput: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      uiFlags: 'inboxes/getUIFlags',
-      portals: 'portals/allPortals',
-    }),
-    selectedTabKey() {
-      return this.tabs[this.selectedTabIndex]?.key;
-    },
-    whatsAppAPIProviderName() {
-      if (this.isAWhatsAppCloudChannel) {
-        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
-      }
-      if (this.is360DialogWhatsAppChannel) {
-        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG');
-      }
-      if (this.isATwilioWhatsAppChannel) {
-        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
-      }
-      return '';
-    },
-    tabs() {
-      let visibleToAllChannelTabs = [
-        {
-          key: 'inbox_settings',
-          name: this.$t('INBOX_MGMT.TABS.SETTINGS'),
-        },
-        {
-          key: 'collaborators',
-          name: this.$t('INBOX_MGMT.TABS.COLLABORATORS'),
-        },
-        {
-          key: 'businesshours',
-          name: this.$t('INBOX_MGMT.TABS.BUSINESS_HOURS'),
-        },
-      ];
-
-      if (this.isAWebWidgetInbox) {
-        visibleToAllChannelTabs = [
-          ...visibleToAllChannelTabs,
-          {
-            key: 'preChatForm',
-            name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
-          },
-          {
-            key: 'widgetBuilder',
-            name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'),
-          },
-        ];
-      }
-
-      if (
-        this.isATwilioChannel ||
-        this.isALineChannel ||
-        this.isAPIInbox ||
-        (this.isAnEmailChannel && !this.inbox.provider) ||
-        this.isAMicrosoftInbox ||
-        this.isAGoogleInbox ||
-        this.isAWhatsAppChannel ||
-        this.isAWebWidgetInbox
-      ) {
-        visibleToAllChannelTabs = [
-          ...visibleToAllChannelTabs,
-          {
-            key: 'configuration',
-            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
-          },
-        ];
-      }
-
-      if (
-        this.isFeatureEnabledonAccount(
-          this.accountId,
-          FEATURE_FLAGS.AGENT_BOTS
-        ) &&
-        !(this.isAnEmailChannel || this.isATwitterInbox)
-      ) {
-        visibleToAllChannelTabs = [
-          ...visibleToAllChannelTabs,
-          {
-            key: 'botConfiguration',
-            name: this.$t('INBOX_MGMT.TABS.BOT_CONFIGURATION'),
-          },
-        ];
-      }
-      return visibleToAllChannelTabs;
-    },
-    currentInboxId() {
-      return this.$route.params.inboxId;
-    },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
-    },
+        :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>
 
-    inboxName() {
-      if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
-        return `${this.inbox.name} (${
-          this.inbox.messaging_service_sid || this.inbox.phone_number
-        })`;
-      }
-      if (this.isAWhatsAppChannel) {
-        return `${this.inbox.name} (${this.inbox.phone_number})`;
-      }
-      if (this.isAnEmailChannel) {
-        return `${this.inbox.name} (${this.inbox.email})`;
-      }
-      return this.inbox.name;
-    },
-    canLocktoSingleConversation() {
-      return (
-        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
-      );
-    },
-    inboxNameLabel() {
-      if (this.isAWebWidgetInbox) {
-        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.LABEL');
-      }
-      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.LABEL');
-    },
-    inboxNamePlaceHolder() {
-      if (this.isAWebWidgetInbox) {
-        return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.PLACEHOLDER');
-      }
-      return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.PLACEHOLDER');
-    },
-    textAreaChannels() {
-      if (
-        this.isATwilioChannel ||
-        this.isATwitterInbox ||
-        this.isAFacebookInbox
-      )
-        return true;
-      return false;
-    },
-    microsoftUnauthorized() {
-      return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
-    },
-    facebookUnauthorized() {
-      return this.isAFacebookInbox && this.inbox.reauthorization_required;
-    },
-  },
-  watch: {
-    $route(to) {
-      if (to.name === 'settings_inbox_show') {
-        this.fetchInboxSettings();
-      }
-    },
-  },
-  mounted() {
-    this.fetchInboxSettings();
-    this.fetchPortals();
-  },
-  methods: {
-    fetchPortals() {
-      this.$store.dispatch('portals/index');
-    },
-    handleFeatureFlag(e) {
-      this.selectedFeatureFlags = this.toggleInput(
-        this.selectedFeatureFlags,
-        e.target.value
-      );
-    },
-    toggleInput(selected, current) {
-      if (selected.includes(current)) {
-        const newSelectedFlags = selected.filter(flag => flag !== current);
-        return newSelectedFlags;
-      }
-      return [...selected, current];
-    },
-    onTabChange(selectedTabIndex) {
-      this.selectedTabIndex = selectedTabIndex;
-    },
-    fetchInboxSettings() {
-      this.selectedTabIndex = 0;
-      this.selectedAgents = [];
-      this.$store.dispatch('agents/get');
-      this.$store.dispatch('teams/get');
-      this.$store.dispatch('labels/get');
-      this.$store.dispatch('inboxes/get').then(() => {
-        this.avatarUrl = this.inbox.avatar_url;
-        this.selectedInboxName = this.inbox.name;
-        this.webhookUrl = this.inbox.webhook_url;
-        this.greetingEnabled = this.inbox.greeting_enabled || false;
-        this.greetingMessage = this.inbox.greeting_message || '';
-        this.emailCollectEnabled = this.inbox.enable_email_collect;
-        this.csatSurveyEnabled = this.inbox.csat_survey_enabled;
-        this.senderNameType = this.inbox.sender_name_type;
-        this.businessName = this.inbox.business_name;
-        this.allowMessagesAfterResolved =
-          this.inbox.allow_messages_after_resolved;
-        this.continuityViaEmail = this.inbox.continuity_via_email;
-        this.channelWebsiteUrl = this.inbox.website_url;
-        this.channelWelcomeTitle = this.inbox.welcome_title;
-        this.channelWelcomeTagline = this.inbox.welcome_tagline;
-        this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
-        this.replyTime = this.inbox.reply_time;
-        this.locktoSingleConversation = this.inbox.lock_to_single_conversation;
-        this.selectedPortalSlug = this.inbox.help_center
-          ? this.inbox.help_center.slug
-          : '';
-      });
-    },
-    async updateInbox() {
-      try {
-        const payload = {
-          id: this.currentInboxId,
-          name: this.selectedInboxName,
-          enable_email_collect: this.emailCollectEnabled,
-          csat_survey_enabled: this.csatSurveyEnabled,
-          allow_messages_after_resolved: this.allowMessagesAfterResolved,
-          greeting_enabled: this.greetingEnabled,
-          greeting_message: this.greetingMessage || '',
-          portal_id: this.selectedPortalSlug
-            ? this.portals.find(
-                portal => portal.slug === this.selectedPortalSlug
-              ).id
-            : null,
-          lock_to_single_conversation: this.locktoSingleConversation,
-          sender_name_type: this.senderNameType,
-          business_name: this.businessName || null,
-          channel: {
-            widget_color: this.inbox.widget_color,
-            website_url: this.channelWebsiteUrl,
-            webhook_url: this.webhookUrl,
-            welcome_title: this.channelWelcomeTitle || '',
-            welcome_tagline: this.channelWelcomeTagline || '',
-            selectedFeatureFlags: this.selectedFeatureFlags,
-            reply_time: this.replyTime || 'in_a_few_minutes',
-            continuity_via_email: this.continuityViaEmail,
-          },
-        };
-        if (this.avatarFile) {
-          payload.avatar = this.avatarFile;
-        }
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(
-          error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE')
-        );
-      }
-    },
-    handleImageUpload({ file, url }) {
-      this.avatarFile = file;
-      this.avatarUrl = url;
-    },
-    async handleAvatarDelete() {
-      try {
-        await this.$store.dispatch(
-          'inboxes/deleteInboxAvatar',
-          this.currentInboxId
-        );
-        this.avatarFile = null;
-        this.avatarUrl = '';
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(
-          error.message
-            ? error.message
-            : this.$t('INBOX_MGMT.DELETE.API.AVATAR_ERROR_MESSAGE')
-        );
-      }
-    },
-    toggleSenderNameType(key) {
-      this.senderNameType = key;
-    },
-    onClickShowBusinessNameInput() {
-      this.showBusinessNameInput = !this.showBusinessNameInput;
-      if (this.showBusinessNameInput) {
-        this.$nextTick(() => {
-          this.$refs.businessNameInput.focus();
-        });
-      }
-    },
-  },
-  validations: {
-    webhookUrl: {
-      shouldBeUrl,
-    },
-    selectedInboxName: {},
-  },
-};
-</script>
+    <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 {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 47a70d8b470b0..bab40210cdd3e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -1,97 +1,9 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import InputRadioGroup from './components/InputRadioGroup.vue';
 import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
 
@@ -101,13 +13,15 @@ export default {
     InputRadioGroup,
     SingleSelectDropdown,
   },
-  mixins: [alertMixin],
   props: {
     inbox: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isSMTPEnabled: false,
@@ -229,11 +143,100 @@ export default {
           },
         };
         await this.$store.dispatch('inboxes/updateInboxSMTP', payload);
-        this.showAlert(this.$t('INBOX_MGMT.SMTP.EDIT.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.SMTP.EDIT.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.SMTP.EDIT.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.SMTP.EDIT.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 82dd5966ce103..5a46d1f8502bc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -1,163 +1,10 @@
-<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';
 import Widget from 'dashboard/modules/widget-preview/components/Widget.vue';
 import InputRadioGroup from './components/InputRadioGroup.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
@@ -166,13 +13,15 @@ export default {
     Widget,
     InputRadioGroup,
   },
-  mixins: [alertMixin],
   props: {
     inbox: {
       type: Object,
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isWidgetPreview: true,
@@ -288,7 +137,7 @@ export default {
       ];
     },
     websiteNameValidationErrorMsg() {
-      return this.$v.websiteName.$error
+      return this.v$.websiteName.$error
         ? this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.ERROR')
         : '';
     },
@@ -355,13 +204,13 @@ export default {
         await this.$store.dispatch('inboxes/deleteInboxAvatar', this.inbox.id);
         this.avatarFile = null;
         this.avatarUrl = '';
-        this.showAlert(
+        useAlert(
           this.$t(
             'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.DELETE.API.SUCCESS_MESSAGE'
           )
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message
             ? error.message
             : this.$t(
@@ -394,13 +243,13 @@ export default {
           payload.avatar = this.avatarFile;
         }
         await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(
+        useAlert(
           this.$t(
             'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.API.SUCCESS_MESSAGE'
           )
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message ||
             this.$t(
               'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.API.ERROR_MESSAGE'
@@ -415,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 ebac2a2d179fc..08279c1ccb815 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -1,71 +1,16 @@
-<template>
-  <form class="mx-0 flex flex-wrap" @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 alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+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 {
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       inboxName: '',
@@ -83,8 +28,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -111,7 +56,7 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
         );
       }
@@ -119,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 701a0d5f3cf15..410411b2cc585 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -1,60 +1,8 @@
-<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="mx-0 flex flex-wrap" @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 alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
@@ -65,7 +13,9 @@ export default {
   components: {
     PageHeader,
   },
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       channelName: '',
@@ -83,8 +33,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -105,9 +55,62 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.API_CHANNEL.API.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.ADD.API_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"
+  >
+    <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 aecf5d61a72eb..035f23e912087 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
@@ -1,7 +1,80 @@
+<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="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <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 }">
+      <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
         <input
           v-model.trim="inboxName"
@@ -9,16 +82,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.PLACEHOLDER')
           "
-          @blur="$v.inboxName.$touch"
+          @blur="v$.inboxName.$touch"
         />
-        <span v-if="$v.inboxName.$error" class="message">{{
+        <span v-if="v$.inboxName.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.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 }">
+      <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
         <input
           v-model.trim="phoneNumber"
@@ -26,16 +99,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.PLACEHOLDER')
           "
-          @blur="$v.phoneNumber.$touch"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">{{
+        <span v-if="v$.phoneNumber.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.accountId.$error }">
+      <label :class="{ error: v$.accountId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
         <input
           v-model.trim="accountId"
@@ -43,16 +116,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.PLACEHOLDER')
           "
-          @blur="$v.accountId.$touch"
+          @blur="v$.accountId.$touch"
         />
-        <span v-if="$v.accountId.$error" class="message">{{
+        <span v-if="v$.accountId.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.applicationId.$error }">
+      <label :class="{ error: v$.applicationId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
         <input
           v-model.trim="applicationId"
@@ -60,31 +133,31 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.PLACEHOLDER')
           "
-          @blur="$v.applicationId.$touch"
+          @blur="v$.applicationId.$touch"
         />
-        <span v-if="$v.applicationId.$error" class="message">{{
+        <span v-if="v$.applicationId.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKey.$error }">
+      <label :class="{ error: v$.apiKey.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
         <input
           v-model.trim="apiKey"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKey.$touch"
+          @blur="v$.apiKey.$touch"
         />
-        <span v-if="$v.apiKey.$error" class="message">{{
+        <span v-if="v$.apiKey.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.ERROR')
         }}</span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiSecret.$error }">
+      <label :class="{ error: v$.apiSecret.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
         <input
           v-model.trim="apiSecret"
@@ -92,9 +165,9 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.PLACEHOLDER')
           "
-          @blur="$v.apiSecret.$touch"
+          @blur="v$.apiSecret.$touch"
         />
-        <span v-if="$v.apiSecret.$error" class="message">{{
+        <span v-if="v$.apiSecret.$error" class="message">{{
           $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.ERROR')
         }}</span>
       </label>
@@ -108,74 +181,3 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
-import router from '../../../../index';
-
-const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
-
-export default {
-  mixins: [alertMixin],
-  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) {
-        this.showAlert(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 dd320dd177e5a..88eba6b4e7cc7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -1,37 +1,110 @@
+<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="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <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 }">
+      <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"
+          @blur="v$.inboxName.$touch"
         />
-        <span v-if="$v.inboxName.$error" class="message">
+        <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 }">
+      <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"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">
+        <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.phoneNumberId.$error }">
+      <label :class="{ error: v$.phoneNumberId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
         </span>
@@ -41,16 +114,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.PLACEHOLDER')
           "
-          @blur="$v.phoneNumberId.$touch"
+          @blur="v$.phoneNumberId.$touch"
         />
-        <span v-if="$v.phoneNumberId.$error" class="message">
+        <span v-if="v$.phoneNumberId.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.businessAccountId.$error }">
+      <label :class="{ error: v$.businessAccountId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
         </span>
@@ -60,16 +133,16 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.PLACEHOLDER')
           "
-          @blur="$v.businessAccountId.$touch"
+          @blur="v$.businessAccountId.$touch"
         />
-        <span v-if="$v.businessAccountId.$error" class="message">
+        <span v-if="v$.businessAccountId.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.ERROR') }}
         </span>
       </label>
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKey.$error }">
+      <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
         </span>
@@ -77,9 +150,9 @@
           v-model.trim="apiKey"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKey.$touch"
+          @blur="v$.apiKey.$touch"
         />
-        <span v-if="$v.apiKey.$error" class="message">
+        <span v-if="v$.apiKey.$error" class="message">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
         </span>
       </label>
@@ -93,73 +166,3 @@
     </div>
   </form>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
-import router from '../../../../index';
-import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
-
-export default {
-  mixins: [alertMixin],
-  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) {
-        this.showAlert(
-          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 375e5aefb9e02..0326cd2889fd8 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 374a88854b831..8d34067155ddb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -1,110 +1,33 @@
-<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="login-init h-full">
-      <a href="#" @click="startLogin()">
-        <img
-          src="~dashboard/assets/images/channels/facebook_login.png"
-          alt="Facebook-logo"
-        />
-      </a>
-      <p>
-        {{
-          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="mx-0 flex flex-wrap"
-        @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 */
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { required } from '@vuelidate/validators';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import accountMixin from '../../../../../mixins/account';
+
+import { loadScript } from 'dashboard/helper/DOMHelpers';
+import * as Sentry from '@sentry/browser';
 
 export default {
   components: {
     LoadingState,
     PageHeader,
   },
-  mixins: [globalConfigMixin, accountMixin],
+  mixins: [globalConfigMixin],
+  setup() {
+    const { accountId } = useAccount();
+    return {
+      accountId,
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       isCreating: false,
@@ -142,28 +65,37 @@ export default {
       return this.pageList.filter(item => !item.exists);
     },
     ...mapGetters({
-      currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
     }),
   },
 
-  created() {
-    this.initFB();
-    this.loadFBsdk();
-  },
-
   mounted() {
-    this.initFB();
+    window.fbAsyncInit = this.runFBInit;
   },
 
   methods: {
-    startLogin() {
+    async startLogin() {
       this.hasLoginStarted = true;
-      this.tryFBlogin();
+      try {
+        // this will load the SDK in a promise, and resolve it when the sdk is loaded
+        // in case the SDK is already present, it will resolve immediately
+        await this.loadFBsdk();
+        this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
+        this.tryFBlogin(); // make an attempt to login
+      } catch (error) {
+        if (error.name === 'ScriptLoaderError') {
+          // if the error was related to script loading, we show a toast
+          useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
+        } else {
+          // if the error was anything else, we capture it and show a toast
+          Sentry.captureException(error);
+          useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
+        }
+      }
     },
 
     setPageName({ name }) {
-      this.$v.selectedPage.$touch();
+      this.v$.selectedPage.$touch();
       this.pageName = name;
     },
 
@@ -173,34 +105,21 @@ export default {
       }
     },
 
-    initFB() {
-      if (window.fbSDKLoaded === undefined) {
-        window.fbAsyncInit = () => {
-          FB.init({
-            appId: window.chatwootConfig.fbAppId,
-            xfbml: true,
-            version: window.chatwootConfig.fbApiVersion,
-            status: true,
-          });
-          window.fbSDKLoaded = true;
-          FB.AppEvents.logPageView();
-        };
-      }
+    runFBInit() {
+      FB.init({
+        appId: window.chatwootConfig.fbAppId,
+        xfbml: true,
+        version: window.chatwootConfig.fbApiVersion,
+        status: true,
+      });
+      window.fbSDKLoaded = true;
+      FB.AppEvents.logPageView();
     },
 
-    loadFBsdk() {
-      ((d, s, id) => {
-        let js;
-        // eslint-disable-next-line
-        const fjs = (js = d.getElementsByTagName(s)[0]);
-        if (d.getElementById(id)) {
-          return;
-        }
-        js = d.createElement(s);
-        js.id = id;
-        js.src = '//connect.facebook.net/en_US/sdk.js';
-        fjs.parentNode.insertBefore(js, fjs);
-      })(document, 'script', 'facebook-jssdk');
+    async loadFBsdk() {
+      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+        id: 'facebook-jssdk',
+      });
     },
 
     tryFBlogin() {
@@ -265,8 +184,8 @@ export default {
     },
 
     createChannel() {
-      this.$v.$touch();
-      if (!this.$v.$error) {
+      this.v$.$touch();
+      if (!this.v$.$error) {
         this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
         this.isCreating = true;
         this.$store
@@ -285,16 +204,97 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.login-init {
-  @apply pt-[30%] text-center;
 
-  p {
-    @apply p-6;
-  }
-
-  > a > img {
-    @apply w-60;
-  }
-}
-</style>
+<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 f726b24da6b3c..85faa48dc4a6f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -1,14 +1,84 @@
+<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')"
     />
-    <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+    <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 }">
+        <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
             v-model.trim="channelName"
@@ -16,16 +86,16 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
             "
-            @blur="$v.channelName.$touch"
+            @blur="v$.channelName.$touch"
           />
-          <span v-if="$v.channelName.$error" class="message">{{
+          <span v-if="v$.channelName.$error" class="message">{{
             $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.ERROR')
           }}</span>
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.lineChannelId.$error }">
+        <label :class="{ error: v$.lineChannelId.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
           <input
             v-model.trim="lineChannelId"
@@ -33,13 +103,13 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
             "
-            @blur="$v.lineChannelId.$touch"
+            @blur="v$.lineChannelId.$touch"
           />
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.lineChannelSecret.$error }">
+        <label :class="{ error: v$.lineChannelSecret.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
           <input
             v-model.trim="lineChannelSecret"
@@ -47,13 +117,13 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
             "
-            @blur="$v.lineChannelSecret.$touch"
+            @blur="v$.lineChannelSecret.$touch"
           />
         </label>
       </div>
 
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <label :class="{ error: $v.lineChannelToken.$error }">
+        <label :class="{ error: v$.lineChannelToken.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
           <input
             v-model.trim="lineChannelToken"
@@ -61,7 +131,7 @@
             :placeholder="
               $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
             "
-            @blur="$v.lineChannelToken.$touch"
+            @blur="v$.lineChannelToken.$touch"
           />
         </label>
       </div>
@@ -75,72 +145,3 @@
     </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
-import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader.vue';
-
-export default {
-  components: {
-    PageHeader,
-  },
-  mixins: [alertMixin],
-  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) {
-        this.showAlert(
-          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 81e271cbfdde8..4f9eb4fc6f893 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -1,8 +1,27 @@
+<script>
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import BandwidthSms from './BandwidthSms.vue';
+import Twilio from './Twilio.vue';
+
+export default {
+  components: {
+    PageHeader,
+    Twilio,
+    BandwidthSms,
+  },
+  data() {
+    return {
+      provider: 'twilio',
+    };
+  },
+};
+</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.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
@@ -19,26 +38,7 @@
         </select>
       </label>
     </div>
-    <twilio v-if="provider === 'twilio'" type="sms" />
-    <bandwidth-sms v-else />
+    <Twilio v-if="provider === 'twilio'" type="sms" />
+    <BandwidthSms v-else />
   </div>
 </template>
-
-<script>
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import BandwidthSms from './BandwidthSms.vue';
-import Twilio from './Twilio.vue';
-
-export default {
-  components: {
-    PageHeader,
-    Twilio,
-    BandwidthSms,
-  },
-  data() {
-    return {
-      provider: 'twilio',
-    };
-  },
-};
-</script>
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 c7cbaeb4a9e6e..b92645b586a9b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -1,43 +1,8 @@
-<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="mx-0 flex flex-wrap" @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 alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
@@ -45,7 +10,9 @@ export default {
   components: {
     PageHeader,
   },
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       botToken: '',
@@ -61,8 +28,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -85,7 +52,7 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message ||
             this.$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.API.ERROR_MESSAGE')
         );
@@ -94,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 b3781712959f4..3bce5493cf3a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -1,16 +1,125 @@
 <!-- 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="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+  <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 }">
+      <label :class="{ error: v$.channelName.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
         <input
           v-model.trim="channelName"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
-          @blur="$v.channelName.$touch"
+          @blur="v$.channelName.$touch"
         />
-        <span v-if="$v.channelName.$error" class="message">{{
+        <span v-if="v$.channelName.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
         }}</span>
       </label>
@@ -19,7 +128,7 @@
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label
         v-if="useMessagingService"
-        :class="{ error: $v.messagingServiceSID.$error }"
+        :class="{ error: v$.messagingServiceSID.$error }"
       >
         {{ $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.LABEL') }}
         <input
@@ -28,9 +137,9 @@
           :placeholder="
             $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.PLACEHOLDER')
           "
-          @blur="$v.messagingServiceSID.$touch"
+          @blur="v$.messagingServiceSID.$touch"
         />
-        <span v-if="$v.messagingServiceSID.$error" class="message">{{
+        <span v-if="v$.messagingServiceSID.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.ERROR')
         }}</span>
       </label>
@@ -40,15 +149,15 @@
       v-if="!useMessagingService"
       class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
     >
-      <label :class="{ error: $v.phoneNumber.$error }">
+      <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
         <input
           v-model.trim="phoneNumber"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.PLACEHOLDER')"
-          @blur="$v.phoneNumber.$touch"
+          @blur="v$.phoneNumber.$touch"
         />
-        <span v-if="$v.phoneNumber.$error" class="message">{{
+        <span v-if="v$.phoneNumber.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
         }}</span>
       </label>
@@ -71,15 +180,15 @@
     </div>
 
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.accountSID.$error }">
+      <label :class="{ error: v$.accountSID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
         <input
           v-model.trim="accountSID"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
-          @blur="$v.accountSID.$touch"
+          @blur="v$.accountSID.$touch"
         />
-        <span v-if="$v.accountSID.$error" class="message">{{
+        <span v-if="v$.accountSID.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
         }}</span>
       </label>
@@ -96,21 +205,21 @@
       </label>
     </div>
     <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKeySID.$error }">
+      <label :class="{ error: v$.apiKeySID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
         <input
           v-model.trim="apiKeySID"
           type="text"
           :placeholder="$t('INBOX_MGMT.ADD.TWILIO.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKeySID.$touch"
+          @blur="v$.apiKeySID.$touch"
         />
-        <span v-if="$v.apiKeySID.$error" class="message">{{
+        <span v-if="v$.apiKeySID.$error" class="message">{{
           $t('INBOX_MGMT.ADD.TWILIO.API_KEY.ERROR')
         }}</span>
       </label>
     </div>
     <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.authToken.$error }">
+      <label :class="{ error: v$.authToken.$error }">
         {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
         <input
           v-model.trim="authToken"
@@ -118,9 +227,9 @@
           :placeholder="
             $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.PLACEHOLDER`)
           "
-          @blur="$v.authToken.$touch"
+          @blur="v$.authToken.$touch"
         />
-        <span v-if="$v.authToken.$error" class="message">
+        <span v-if="v$.authToken.$error" class="message">
           {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.ERROR`) }}
         </span>
       </label>
@@ -135,111 +244,6 @@
   </form>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
-import router from '../../../../index';
-import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
-
-export default {
-  mixins: [alertMixin],
-  props: {
-    type: {
-      type: String,
-      required: true,
-    },
-  },
-  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) {
-        this.showAlert(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 08919b9781e07..216c822f03dd8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,26 +1,8 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import twitterClient from '../../../../../api/channel/twitterClient';
 
 export default {
-  mixins: [alertMixin],
   data() {
     return { isRequestingAuthorization: false };
   },
@@ -34,7 +16,7 @@ export default {
         } = response;
         window.location.href = url;
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.TWITTER.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.ADD.TWITTER.ERROR_MESSAGE'));
       } finally {
         this.isRequestingAuthorization = false;
       }
@@ -42,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 dae97dbe24077..2f1b0067e1cff 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')"
     />
@@ -12,7 +85,7 @@
     />
     <form
       v-if="!uiFlags.isCreating"
-      class="mx-0 flex flex-wrap"
+      class="flex flex-wrap mx-0"
       @submit.prevent="createChannel"
     >
       <div class="w-full">
@@ -101,7 +174,7 @@
           }}
         </p>
       </label>
-      <greetings-editor
+      <GreetingsEditor
         v-if="greetingEnabled"
         v-model.trim="greetingMessage"
         class="w-full"
@@ -115,7 +188,7 @@
         "
         :richtext="!textAreaChannels"
       />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <div class="w-full">
           <woot-submit-button
             :loading="uiFlags.isCreating"
@@ -127,77 +200,3 @@
     </form>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: {
-    PageHeader,
-    GreetingsEditor,
-  },
-  mixins: [alertMixin],
-  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) {
-        this.showAlert(
-          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 8206e46514bb8..d361e0f78946e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,8 +1,29 @@
+<script>
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import Twilio from './Twilio.vue';
+import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
+import CloudWhatsapp from './CloudWhatsapp.vue';
+
+export default {
+  components: {
+    PageHeader,
+    Twilio,
+    ThreeSixtyDialogWhatsapp,
+    CloudWhatsapp,
+  },
+  data() {
+    return {
+      provider: 'whatsapp_cloud',
+    };
+  },
+};
+</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.WHATSAPP.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
     />
@@ -20,29 +41,8 @@
       </label>
     </div>
 
-    <twilio v-if="provider === 'twilio'" type="whatsapp" />
-    <three-sixty-dialog-whatsapp v-else-if="provider === '360dialog'" />
-    <cloud-whatsapp v-else />
+    <Twilio v-if="provider === 'twilio'" type="whatsapp" />
+    <ThreeSixtyDialogWhatsapp v-else-if="provider === '360dialog'" />
+    <CloudWhatsapp v-else />
   </div>
 </template>
-
-<script>
-import PageHeader from '../../SettingsSubPageHeader.vue';
-import Twilio from './Twilio.vue';
-import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
-import CloudWhatsapp from './CloudWhatsapp.vue';
-
-export default {
-  components: {
-    PageHeader,
-    Twilio,
-    ThreeSixtyDialogWhatsapp,
-    CloudWhatsapp,
-  },
-  data() {
-    return {
-      provider: 'whatsapp_cloud',
-    };
-  },
-};
-</script>
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 25f59380de297..62d85bd1a791d 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,58 +1,8 @@
-<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="mx-0 flex flex-wrap" @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 alertMixin from 'shared/mixins/alertMixin';
-import { required, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, email } from '@vuelidate/validators';
 import router from '../../../../../index';
 import PageHeader from '../../../SettingsSubPageHeader.vue';
 
@@ -60,7 +10,9 @@ export default {
   components: {
     PageHeader,
   },
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       channelName: '',
@@ -79,8 +31,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -108,9 +60,60 @@ export default {
         this.alertMessage =
           errorMessage ||
           this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.API.ERROR_MESSAGE');
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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 b0588bdd6b8d1..0e8c506dc35db 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 b6ccef365a0e9..fce007ca06704 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 976b655347338..6c8947bfa16f9 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 01b39efe06153..e662d3f72e3ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -1,65 +1,14 @@
-<template>
-  <div class="mx-8">
-    <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
-    <form
-      v-else
-      class="mx-0 flex flex-wrap"
-      @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';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     LoadingState,
     SettingsSection,
   },
-  mixins: [alertMixin],
   props: {
     inbox: {
       type: Object,
@@ -98,9 +47,9 @@ export default {
           // Added this to make sure that empty values are not sent to the API
           botId: this.selectedAgentBotId ? this.selectedAgentBotId : undefined,
         });
-        this.showAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.ERROR_MESSAGE'));
+        useAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.ERROR_MESSAGE'));
       }
     },
     async disconnectBot() {
@@ -108,11 +57,11 @@ export default {
         await this.$store.dispatch('agentBots/disconnectBot', {
           inboxId: this.inbox.id,
         });
-        this.showAlert(
+        useAlert(
           this.$t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECTED_SUCCESS_MESSAGE')
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error?.message ||
             this.$t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECTED_ERROR_MESSAGE')
         );
@@ -122,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 6f6e1bef142a0..34879f9acd7d6 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 fe6a805868ba1..0357e09a4de4f 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 6f08afc3d18f0..ded4fb9d7b2b6 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 126b5719858a6..9f7be45ba5f82 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 850b5a863c8c1..5984ff23873bf 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 12ff70a6218c9..43cc5bedf214d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -1,83 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
@@ -100,7 +23,7 @@ export default {
     BusinessDay,
     WootMessageEditor,
   },
-  mixins: [alertMixin, inboxMixin],
+  mixins: [inboxMixin],
   props: {
     inbox: {
       type: Object,
@@ -186,16 +109,92 @@ export default {
           channel: {},
         };
         await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(
-          error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE')
-        );
+        useAlert(error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </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 d90f88d3ba610..986f072e73854 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -1,17 +1,15 @@
-<template>
-  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="tryFBlogin" />
-</template>
-
 <script>
 /* global FB */
 import InboxReconnectionRequired from '../components/InboxReconnectionRequired';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
+
+import { loadScript } from 'dashboard/helper/DOMHelpers';
+import * as Sentry from '@sentry/browser';
 
 export default {
   components: {
     InboxReconnectionRequired,
   },
-  mixins: [alertMixin],
   props: {
     inbox: {
       type: Object,
@@ -24,38 +22,44 @@ export default {
     },
   },
   mounted() {
-    this.initFB();
-    this.loadFBsdk();
+    window.fbAsyncInit = this.runFBInit;
   },
   methods: {
-    initFB() {
-      if (window.fbSDKLoaded === undefined) {
-        window.fbAsyncInit = () => {
-          FB.init({
-            appId: window.chatwootConfig.fbAppId,
-            xfbml: true,
-            version: window.chatwootConfig.fbApiVersion,
-            status: true,
-          });
-          window.fbSDKLoaded = true;
-          FB.AppEvents.logPageView();
-        };
-      }
+    runFBInit() {
+      FB.init({
+        appId: window.chatwootConfig.fbAppId,
+        xfbml: true,
+        version: window.chatwootConfig.fbApiVersion,
+        status: true,
+      });
+      window.fbSDKLoaded = true;
+      FB.AppEvents.logPageView();
+    },
+
+    async loadFBsdk() {
+      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+        id: 'facebook-jssdk',
+      });
     },
 
-    loadFBsdk() {
-      ((d, s, id) => {
-        let js;
-        // eslint-disable-next-line
-        const fjs = (js = d.getElementsByTagName(s)[0]);
-        if (d.getElementById(id)) {
-          return;
+    async startLogin() {
+      this.hasLoginStarted = true;
+      try {
+        // this will load the SDK in a promise, and resolve it when the sdk is loaded
+        // in case the SDK is already present, it will resolve immediately
+        await this.loadFBsdk();
+        this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
+        this.tryFBlogin(); // make an attempt to login
+      } catch (error) {
+        if (error.name === 'ScriptLoaderError') {
+          // if the error was related to script loading, we show a toast
+          useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
+        } else {
+          // if the error was anything else, we capture it and show a toast
+          Sentry.captureException(error);
+          useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
         }
-        js = d.createElement(s);
-        js.id = id;
-        js.src = 'https://connect.facebook.net/en_US/sdk.js';
-        fjs.parentNode.insertBefore(js, fjs);
-      })(document, 'script', 'facebook-jssdk');
+      }
     },
 
     tryFBlogin() {
@@ -65,11 +69,11 @@ export default {
             this.reauthorizeFBPage(response.authResponse.accessToken);
           } else if (response.status === 'not_authorized') {
             // The person is logged into Facebook, but not your app.
-            this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
+            useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
           } else {
             // The person is not logged into Facebook, so we're not sure if
             // they are logged into this app or not.
-            this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
+            useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
           }
         },
         {
@@ -85,19 +89,19 @@ export default {
           omniauthToken,
           inboxId: this.inboxId,
         });
-        this.showAlert(
-          this.$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.MESSAGE_SUCCESS')
-        );
+        useAlert(this.$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.MESSAGE_SUCCESS'));
       } catch (error) {
-        this.showAlert(
-          this.$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.MESSAGE_ERROR')
-        );
+        useAlert(this.$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.MESSAGE_ERROR'));
       }
     },
   },
 };
 </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 2046847b32ff9..7ef9bc71b19dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -1,99 +1,26 @@
-<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 { minValue } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
-import configMixin from 'shared/mixins/configMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { minValue } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import { useConfig } from 'dashboard/composables/useConfig';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
 
 export default {
   components: {
     SettingsSection,
   },
-  mixins: [alertMixin, configMixin],
   props: {
     inbox: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    const { isEnterprise } = useConfig();
+
+    return { v$: useVuelidate(), isEnterprise };
+  },
   data() {
     return {
       selectedAgents: [],
@@ -107,7 +34,7 @@ export default {
       agentList: 'agents/getAgents',
     }),
     maxAssignmentLimitErrors() {
-      if (this.$v.maxAssignmentLimit.$error) {
+      if (this.v$.maxAssignmentLimit.$error) {
         return this.$t(
           'INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR'
         );
@@ -154,9 +81,9 @@ export default {
           inboxId: this.inbox.id,
           agentList,
         });
-        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+        useAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
       this.isAgentListUpdating = false;
     },
@@ -171,9 +98,9 @@ export default {
           },
         };
         await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       }
     },
   },
@@ -190,6 +117,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 c10e5994e7d6d..170902ec0506d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -1,23 +1,110 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import inboxMixin from 'shared/mixins/inboxMixin';
+import SettingsSection from '../../../../../components/SettingsSection.vue';
+import ImapSettings from '../ImapSettings.vue';
+import SmtpSettings from '../SmtpSettings.vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+export default {
+  components: {
+    SettingsSection,
+    ImapSettings,
+    SmtpSettings,
+  },
+  mixins: [inboxMixin],
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      hmacMandatory: false,
+      whatsAppInboxAPIKey: '',
+    };
+  },
+  validations: {
+    whatsAppInboxAPIKey: { required },
+  },
+  watch: {
+    inbox() {
+      this.setDefaults();
+    },
+  },
+  mounted() {
+    this.setDefaults();
+  },
+  methods: {
+    setDefaults() {
+      this.hmacMandatory = this.inbox.hmac_mandatory || false;
+    },
+    handleHmacFlag() {
+      this.updateInbox();
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            hmac_mandatory: this.hmacMandatory,
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    async updateWhatsAppInboxAPIKey() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {},
+        };
+
+        payload.channel.provider_config = {
+          ...this.inbox.provider_config,
+          api_key: this.whatsAppInboxAPIKey,
+        };
+
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div v-if="isATwilioChannel" class="mx-8">
-    <settings-section
+    <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" />
-    </settings-section>
+    </SettingsSection>
   </div>
   <div v-else-if="isALineChannel" class="mx-8">
-    <settings-section
+    <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" />
-    </settings-section>
+    </SettingsSection>
   </div>
   <div v-else-if="isAWebWidgetInbox">
     <div class="mx-8">
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
       >
@@ -25,11 +112,11 @@
           :script="inbox.web_widget_script"
           lang="html"
           :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
-          :enable-code-pen="true"
+          enable-code-pen
         />
-      </settings-section>
+      </SettingsSection>
 
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
       >
         <woot-code :script="inbox.hmac_token" />
@@ -43,8 +130,8 @@
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
           </a>
         </template>
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
       >
@@ -59,24 +146,24 @@
             {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
           </label>
         </div>
-      </settings-section>
+      </SettingsSection>
     </div>
   </div>
   <div v-else-if="isAPIInbox" class="mx-8">
-    <settings-section
+    <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" />
-    </settings-section>
+    </SettingsSection>
 
-    <settings-section
+    <SettingsSection
       :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
+    </SettingsSection>
+    <SettingsSection
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
     >
@@ -91,35 +178,35 @@
           {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
         </label>
       </div>
-    </settings-section>
+    </SettingsSection>
   </div>
   <div v-else-if="isAnEmailChannel">
     <div class="mx-8">
-      <settings-section
+      <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" />
-      </settings-section>
+      </SettingsSection>
     </div>
-    <imap-settings :inbox="inbox" />
-    <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
+    <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">
-      <settings-section
+      <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" />
-      </settings-section>
-      <settings-section
+      </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" />
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
         :sub-title="
           $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
@@ -139,99 +226,17 @@
             "
           />
           <woot-button
-            :disabled="$v.whatsAppInboxAPIKey.$invalid"
+            :disabled="v$.whatsAppInboxAPIKey.$invalid"
             @click="updateWhatsAppInboxAPIKey"
           >
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
           </woot-button>
         </div>
-      </settings-section>
+      </SettingsSection>
     </div>
   </div>
 </template>
 
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import inboxMixin from 'shared/mixins/inboxMixin';
-import SettingsSection from '../../../../../components/SettingsSection.vue';
-import ImapSettings from '../ImapSettings.vue';
-import SmtpSettings from '../SmtpSettings.vue';
-import { required } from 'vuelidate/lib/validators';
-
-export default {
-  components: {
-    SettingsSection,
-    ImapSettings,
-    SmtpSettings,
-  },
-  mixins: [inboxMixin, alertMixin],
-  props: {
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      hmacMandatory: false,
-      whatsAppInboxAPIKey: '',
-    };
-  },
-  validations: {
-    whatsAppInboxAPIKey: { required },
-  },
-  watch: {
-    inbox() {
-      this.setDefaults();
-    },
-  },
-  mounted() {
-    this.setDefaults();
-  },
-  methods: {
-    setDefaults() {
-      this.hmacMandatory = this.inbox.hmac_mandatory || false;
-    },
-    handleHmacFlag() {
-      this.updateInbox();
-    },
-    async updateInbox() {
-      try {
-        const payload = {
-          id: this.inbox.id,
-          formData: false,
-          channel: {
-            hmac_mandatory: this.hmacMandatory,
-          },
-        };
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-    async updateWhatsAppInboxAPIKey() {
-      try {
-        const payload = {
-          id: this.inbox.id,
-          formData: false,
-          channel: {},
-        };
-
-        payload.channel.provider_config = {
-          ...this.inbox.provider_config,
-          api_key: this.whatsAppInboxAPIKey,
-        };
-
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .whatsapp-settings--content {
   ::v-deep input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue
deleted file mode 100644
index 22ba3710539fc..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="flex-grow flex-shrink p-4 overflow-auto">
-    <div class="flex flex-col">
-      <div v-if="uiFlags.isFetching" class="mx-auto my-0">
-        <woot-loading-state :message="$t('INTEGRATION_APPS.FETCHING')" />
-      </div>
-
-      <div v-else class="w-full">
-        <div>
-          <div
-            v-for="item in enabledIntegrations"
-            :key="item.id"
-            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-item
-              :integration-id="item.id"
-              :integration-logo="item.logo"
-              :integration-name="item.name"
-              :integration-description="item.description"
-              :integration-enabled="item.hooks.length"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { computed, onMounted } from 'vue';
-import IntegrationItem from './IntegrationItem.vue';
-const store = useStore();
-const getters = useStoreGetters();
-
-const uiFlags = getters['integrations/getUIFlags'];
-
-const accountId = getters.getCurrentAccountId;
-
-const integrationList = computed(() => {
-  return getters['integrations/getAppIntegrations'].value;
-});
-
-const isLinearIntegrationEnabled = computed(() => {
-  return getters['accounts/isFeatureEnabledonAccount'].value(
-    accountId.value,
-    'linear_integration'
-  );
-});
-const enabledIntegrations = computed(() => {
-  if (!isLinearIntegrationEnabled.value) {
-    return integrationList.value.filter(
-      integration => integration.id !== 'linear'
-    );
-  }
-  return integrationList.value;
-});
-
-onMounted(() => {
-  store.dispatch('integrations/get');
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
deleted file mode 100644
index 151afd04933c7..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="flex">
-    <div class="flex h-[6.25rem] w-[6.25rem]">
-      <img
-        :src="'/dashboard/images/integrations/' + integrationLogo"
-        class="max-w-full p-6"
-      />
-    </div>
-    <div class="flex flex-col justify-center m-0 mx-4 flex-1">
-      <h3 class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100">
-        {{ integrationName }}
-      </h3>
-      <p class="text-slate-700 dark:text-slate-200">
-        {{
-          useInstallationName(
-            integrationDescription,
-            globalConfig.installationName
-          )
-        }}
-      </p>
-    </div>
-    <div class="flex justify-center items-center mb-0 w-[15%]">
-      <woot-label
-        :title="labelText"
-        :color-scheme="labelColor"
-        class="text-xs rounded-sm"
-      />
-    </div>
-    <div class="flex justify-center items-center mb-0 w-[15%]">
-      <router-link
-        :to="
-          frontendURL(
-            `accounts/${accountId}/settings/applications/` + integrationId
-          )
-        "
-      >
-        <woot-button icon="settings">
-          {{ $t('INTEGRATION_APPS.CONFIGURE') }}
-        </woot-button>
-      </router-link>
-    </div>
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex';
-import { frontendURL } from '../../../../helper/URLHelper';
-import WootLabel from 'dashboard/components/ui/Label.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  components: {
-    WootLabel,
-  },
-  mixins: [globalConfigMixin],
-  props: {
-    integrationId: {
-      type: [String, Number],
-      required: true,
-    },
-    integrationLogo: {
-      type: String,
-      default: '',
-    },
-    integrationName: {
-      type: String,
-      default: '',
-    },
-    integrationDescription: {
-      type: String,
-      default: '',
-    },
-    integrationEnabled: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      globalConfig: 'globalConfig/get',
-    }),
-    labelText() {
-      return this.integrationEnabled
-        ? this.$t('INTEGRATION_APPS.STATUS.ENABLED')
-        : this.$t('INTEGRATION_APPS.STATUS.DISABLED');
-    },
-    labelColor() {
-      return this.integrationEnabled ? 'success' : 'secondary';
-    },
-  },
-  methods: {
-    frontendURL,
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
deleted file mode 100644
index d3074f62dd95a..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const IntegrationHooks = () => import('./IntegrationHooks.vue');
-const Index = () => import('./Index.vue');
-
-export default {
-  routes: [
-    {
-      path: frontendURL('accounts/:accountId/settings/applications'),
-      component: SettingsContent,
-      props: params => {
-        const showBackButton = params.name !== 'settings_applications';
-        const backUrl =
-          params.name === 'settings_applications_integration'
-            ? { name: 'settings_applications' }
-            : '';
-        return {
-          headerTitle: 'INTEGRATION_APPS.HEADER',
-          icon: 'star-emphasis',
-          showBackButton,
-          backUrl,
-        };
-      },
-      children: [
-        {
-          path: '',
-          name: 'settings_applications',
-          component: Index,
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
-        {
-          path: ':integration_id',
-          name: 'settings_applications_integration',
-          component: IntegrationHooks,
-          meta: {
-            permissions: ['administrator'],
-          },
-          props: route => ({
-            integrationId: route.params.integration_id,
-          }),
-        },
-      ],
-    },
-  ],
-};
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 abdd993445bbd..4adc4f7dd9081 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
@@ -1,63 +1,9 @@
-<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 { required, url } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { required, url } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -72,6 +18,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     app: {
       title: { required },
@@ -120,8 +69,8 @@ export default {
     },
     async submit() {
       try {
-        this.$v.$touch();
-        if (this.$v.$invalid) {
+        this.v$.$touch();
+        if (this.v$.$invalid) {
           return;
         }
 
@@ -137,14 +86,14 @@ export default {
 
         this.isLoading = true;
         await this.$store.dispatch(`dashboardApps/${action}`, payload);
-        this.showAlert(
+        useAlert(
           this.$t(
             `INTEGRATION_SETTINGS.DASHBOARD_APPS.${this.mode}.API_SUCCESS`
           )
         );
         this.closeModal();
       } catch (err) {
-        this.showAlert(
+        useAlert(
           this.$t(`INTEGRATION_SETTINGS.DASHBOARD_APPS.${this.mode}.API_ERROR`)
         );
       } finally {
@@ -154,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 35a9907243aea..0d12b7e917923 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -1,12 +1,26 @@
+<script setup>
+defineProps({
+  app: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+defineEmits(['edit', 'delete']);
+</script>
+
 <template>
-  <tr>
-    <td class="w-40 max-w-[10rem] truncate" :title="app.title">
+  <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="max-w-xs 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="flex justify-end gap-1">
+    <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')
@@ -32,30 +46,3 @@
     </td>
   </tr>
 </template>
-
-<script>
-export default {
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  props: {
-    app: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dashboard-app-label-url {
-  @apply relative w-full;
-  &:before {
-    @apply invisible content-['&nbsp'];
-  }
-  span {
-    @apply absolute left-0 right-0;
-  }
-}
-</style>
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 5c94793c08dbc..3c67dfdcf0684 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -1,99 +1,18 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openCreatePopup"
-    >
-      {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.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 h-full items-center flex-col justify-center"
-        >
-          {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t(
-                'INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.TABLE_HEADER'
-              )"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <dashboard-apps-row
-              v-for="(dashboardAppItem, index) in records"
-              :key="dashboardAppItem.id"
-              :index="index"
-              :app="dashboardAppItem"
-              @edit="editApp"
-              @delete="openDeletePopup"
-            />
-          </tbody>
-        </table>
-      </div>
-
-      <div class="w-1/3 hidden lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-
-    <dashboard-app-modal
-      v-if="showDashboardAppPopup"
-      :show="showDashboardAppPopup"
-      :mode="mode"
-      :selected-app-data="selectedApp"
-      @close="toggleDashboardAppPopup"
-    />
-
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"
-      :message="
-        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
-          appName: selectedApp.title,
-        })
-      "
-      :confirm-text="
-        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
-      "
-      :reject-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import DashboardAppModal from './DashboardAppModal.vue';
 import DashboardAppsRow from './DashboardAppsRow.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
 
 export default {
   components: {
+    BaseSettingsHeader,
     DashboardAppModal,
     DashboardAppsRow,
   },
-  mixins: [alertMixin, globalConfigMixin],
+  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -105,7 +24,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      globalConfig: 'globalConfig/get',
       records: 'dashboardApps/getRecords',
       uiFlags: 'dashboardApps/getUIFlags',
     }),
@@ -144,11 +62,11 @@ export default {
     async deleteApp(id) {
       try {
         await this.$store.dispatch('dashboardApps/delete', id);
-        this.showAlert(
+        useAlert(
           this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.API_SUCCESS')
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.API_ERROR')
         );
       }
@@ -156,3 +74,87 @@ export default {
   },
 };
 </script>
+
+<template>
+  <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')"
+      :link-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LEARN_MORE')"
+      feature-name="dashboard_apps"
+      :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+    >
+      <template #actions>
+        <woot-button
+          class="rounded-md button nice"
+          icon="add-circle"
+          @click="openCreatePopup"
+        >
+          {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT') }}
+        </woot-button>
+      </template>
+    </BaseSettingsHeader>
+    <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"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.404') }}
+      </p>
+      <woot-loading-state
+        v-if="uiFlags.isFetching"
+        :message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.LOADING')"
+      />
+      <table
+        v-if="!uiFlags.isFetching && records.length"
+        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <thead>
+          <th
+            v-for="thHeader in $t(
+              'INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.TABLE_HEADER'
+            )"
+            :key="thHeader"
+            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">
+          <DashboardAppsRow
+            v-for="(dashboardAppItem, index) in records"
+            :key="dashboardAppItem.id"
+            :index="index"
+            :app="dashboardAppItem"
+            @edit="editApp"
+            @delete="openDeletePopup"
+          />
+        </tbody>
+      </table>
+    </div>
+
+    <DashboardAppModal
+      v-if="showDashboardAppPopup"
+      :show="showDashboardAppPopup"
+      :mode="mode"
+      :selected-app-data="selectedApp"
+      @close="toggleDashboardAppPopup"
+    />
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"
+      :message="
+        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
+          appName: selectedApp.title,
+        })
+      "
+      :confirm-text="
+        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
+      "
+      :reject-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index 5ab8cd74b331e..6a79ca3252404 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -1,58 +1,51 @@
+<script setup>
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { computed, onMounted } from 'vue';
+import IntegrationItem from './IntegrationItem.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+
+const store = useStore();
+const getters = useStoreGetters();
+
+const uiFlags = getters['integrations/getUIFlags'];
+
+const integrationList = computed(
+  () => getters['integrations/getAppIntegrations'].value
+);
+
+onMounted(() => {
+  store.dispatch('integrations/get');
+});
+</script>
+
 <template>
-  <div class="flex-shrink flex-grow overflow-auto p-4">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div>
-          <div
-            v-for="item in integrationsList"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('INTEGRATION_SETTINGS.LOADING')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INTEGRATION_SETTINGS.HEADER')"
+        :description="$t('INTEGRATION_SETTINGS.DESCRIPTION')"
+        :link-text="$t('INTEGRATION_SETTINGS.LEARN_MORE')"
+        feature-name="integrations"
+      />
+    </template>
+    <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">
+          <IntegrationItem
+            v-for="item in integrationList"
+            :id="item.id"
             :key="item.id"
-            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="item.id"
-              :integration-logo="item.logo"
-              :integration-name="item.name"
-              :integration-description="item.description"
-              :integration-enabled="item.enabled"
-              :integration-action="item.action"
-            />
-          </div>
-          <div
-            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="dashboard-apps"
-              integration-logo="dashboard-apps.svg"
-              :integration-name="
-                $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.TITLE')
-              "
-              :integration-description="
-                $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DESCRIPTION')
-              "
-              integration-enabled
-              integration-action="/dashboard-apps"
-            />
-          </div>
+            :logo="item.logo"
+            :name="item.name"
+            :description="item.description"
+            :enabled="item.enabled"
+          />
         </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import Integration from './Integration.vue';
-
-export default {
-  components: {
-    Integration,
-  },
-  computed: {
-    ...mapGetters({
-      integrationsList: 'integrations/getIntegrations',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('integrations/get');
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index 32e239fea1fc9..6c6f5f5be5d04 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/' + integrationLogo"
-        class="p-2 h-16 w-16 mr-4"
+        :src="`/dashboard/images/integrations/${integrationId}.png`"
+        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,67 +132,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import { frontendURL } from '../../../../helper/URLHelper';
-import alertMixin from 'shared/mixins/alertMixin';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-
-export default {
-  mixins: [alertMixin, 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
-        );
-        this.showAlert(
-          this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE')
-        );
-      } catch (error) {
-        this.showAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
deleted file mode 100644
index 21b13ca588a8f..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
+++ /dev/null
@@ -1 +0,0 @@
-<!-- to be removed non using component -->
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
similarity index 93%
rename from app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
rename to app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index 96819bcab69fa..ad2daa5f32fb3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -1,50 +1,7 @@
-<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';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import hookMixin from './hookMixin';
 import NewHook from './NewHook.vue';
 import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
@@ -56,7 +13,7 @@ export default {
     SingleIntegrationHooks,
     MultipleIntegrationHooks,
   },
-  mixins: [alertMixin, hookMixin],
+  mixins: [hookMixin],
   props: {
     integrationId: {
       type: [String, Number],
@@ -142,9 +99,53 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('INTEGRATION_APPS.DELETE.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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
new file mode 100644
index 0000000000000..7162596a23d3e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { useInstallationName } from 'shared/mixins/globalConfigMixin';
+
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    required: true,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  enabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const getters = useStoreGetters();
+const accountId = getters.getCurrentAccountId;
+const globalConfig = getters['globalConfig/get'];
+
+const { t } = useI18n();
+
+const integrationStatus = computed(() =>
+  props.enabled
+    ? t('INTEGRATION_APPS.STATUS.ENABLED')
+    : t('INTEGRATION_APPS.STATUS.DISABLED')
+);
+
+const integrationStatusColor = computed(() =>
+  props.enabled ? 'bg-green-500' : 'bg-slate-200'
+);
+
+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"
+  >
+    <div class="flex items-start justify-between">
+      <div class="flex h-12 w-12 mb-4">
+        <img
+          :src="`/dashboard/images/integrations/${id}.png`"
+          class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm block dark:hidden bg-white dark:bg-slate-900"
+        />
+        <img
+          :src="`/dashboard/images/integrations/${id}-dark.png`"
+          class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm hidden dark:block bg-white dark:bg-slate-900"
+        />
+      </div>
+      <fluent-icon
+        v-tooltip="integrationStatus"
+        size="20"
+        class="text-white p-0.5 rounded-full"
+        :class="integrationStatusColor"
+        icon="checkmark"
+      />
+    </div>
+    <div class="flex flex-col m-0 flex-1">
+      <div
+        class="font-medium mb-2 text-slate-800 dark:text-slate-100 flex justify-between items-center"
+      >
+        <span class="text-base font-semibold">{{ name }}</span>
+        <router-link :to="actionURL">
+          <woot-button class="clear link">
+            {{ $t('INTEGRATION_APPS.CONFIGURE') }}
+          </woot-button>
+        </router-link>
+      </div>
+      <p class="text-slate-700 dark:text-slate-200">
+        {{ useInstallationName(description, globalConfig.installationName) }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
similarity index 99%
rename from app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
rename to app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index aea851ee7574c..38deab6348881 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/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/integrationapps/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
similarity index 94%
rename from app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue
rename to app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index 454f03dac94f8..afaf059a6a648 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -1,49 +1,11 @@
 <!-- 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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import hookMixin from './hookMixin';
 
 export default {
-  mixins: [alertMixin, hookMixin],
+  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
@@ -60,7 +22,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'integrations/getUIFlags',
-      websiteInboxes: 'inboxes/getWebsiteInboxes',
       dialogFlowEnabledInboxes: 'inboxes/dialogFlowEnabledInboxes',
     }),
     inboxes() {
@@ -131,9 +92,48 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('INTEGRATION_APPS.ADD.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
   },
 };
 </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 d9f5e5d9edc36..6b86dcf822d7f 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/integrationapps/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
similarity index 73%
rename from app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue
rename to app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index 3f8dfccea5f89..45ea831684d77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,14 +1,31 @@
+<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">
       <div
-        class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
+        class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-xl mb-4 p-4"
       >
         <div class="flex">
           <div class="flex h-[6.25rem] w-[6.25rem]">
             <img
-              :src="'/dashboard/images/integrations/' + integration.logo"
-              class="max-w-full p-6"
+              :src="`/dashboard/images/integrations/${integration.id}.png`"
+              class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm block dark:hidden bg-white dark:bg-slate-900"
+            />
+            <img
+              :src="`/dashboard/images/integrations/${integration.id}-dark.png`"
+              class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm hidden dark:block bg-white dark:bg-slate-900"
             />
           </div>
           <div class="flex flex-col justify-center m-0 mx-4 flex-1">
@@ -40,15 +57,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 24dc2993a0b5e..ac090a2d5c7c6 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 6c698898d7b63..00ad15bbfe6a3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,6 +1,60 @@
+<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="rounded-md bg-yellow-50 border border-yellow-200 dark:border-slate-700 dark:bg-slate-800 px-6 py-4 mb-4"
+    class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
   >
     <div class="flex">
       <div class="flex-shrink-0 mt-0.5">
@@ -12,13 +66,13 @@
       </div>
       <div class="ml-3">
         <p
-          class="text-base font-semibold text-yellow-900 dark:text-yellow-500 mb-1"
+          class="mb-1 text-base font-semibold text-yellow-900 dark:text-yellow-500"
         >
           {{
             $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
           }}
         </p>
-        <div class="text-sm text-yellow-800 dark:text-yellow-600 mt-2">
+        <div class="mt-2 text-sm text-yellow-800 dark:text-yellow-600">
           <p
             v-dompurify-html="
               formatMessage(
@@ -33,7 +87,7 @@
         </div>
       </div>
     </div>
-    <div v-if="!hasConnectedAChannel" class="ml-8 mt-2">
+    <div v-if="!hasConnectedAChannel" class="mt-2 ml-8">
       <woot-submit-button
         v-if="!availableChannels.length"
         button-class="smooth small warning"
@@ -47,7 +101,7 @@
       <div v-else class="inline-flex">
         <select
           v-model="selectedChannelId"
-          class="h-8 border-yellow-300 border mr-4 text-xs leading-4 py-1"
+          class="h-8 py-1 mr-4 text-xs leading-4 border border-yellow-300"
         >
           <option value="">
             {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}
@@ -71,58 +125,3 @@
     </div>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  mixins: [alertMixin, 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,
-        });
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
-      } catch (error) {
-        this.showAlert(
-          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 9a0476f130b64..e1db3c30b35ab 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 739ec467cd60b..c9b315443756a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
@@ -1,26 +1,10 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
 import WebhookForm from './WebhookForm.vue';
 
 export default {
   components: { WebhookForm },
-  mixins: [alertMixin],
   props: {
     value: {
       type: Object,
@@ -45,7 +29,7 @@ export default {
           webhook,
           id: this.id,
         });
-        this.showAlert(
+        useAlert(
           this.$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.API.SUCCESS_MESSAGE')
         );
         this.onClose();
@@ -53,9 +37,24 @@ export default {
         const alertMessage =
           error?.response?.data?.message ||
           this.$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.API.ERROR_MESSAGE');
-        this.showAlert(alertMessage);
+        useAlert(alertMessage);
       }
     },
   },
 };
 </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 d1ee7ba9b7522..e9ec855dc4865 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -1,3 +1,79 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import NewWebhook from './NewWebHook.vue';
+import EditWebhook from './EditWebHook.vue';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import WebhookRow from './WebhookRow.vue';
+
+export default {
+  components: {
+    NewWebhook,
+    EditWebhook,
+    WebhookRow,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      loading: {},
+      showAddPopup: false,
+      showEditPopup: false,
+      showDeleteConfirmationPopup: false,
+      selectedWebHook: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: 'webhooks/getWebhooks',
+      uiFlags: 'webhooks/getUIFlags',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('webhooks/get');
+  },
+  methods: {
+    openAddPopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+    },
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedWebHook = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    openEditPopup(webhook) {
+      this.showEditPopup = true;
+      this.selectedWebHook = webhook;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedWebHook.id] = true;
+      this.closeDeletePopup();
+      this.deleteWebhook(this.selectedWebHook.id);
+    },
+    async deleteWebhook(id) {
+      try {
+        await this.$store.dispatch('webhooks/delete', id);
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.SUCCESS_MESSAGE')
+        );
+      } catch (error) {
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex-1 p-4 overflow-auto">
     <woot-button
@@ -38,7 +114,7 @@
             </th>
           </thead>
           <tbody>
-            <webhook-row
+            <WebhookRow
               v-for="(webHookItem, index) in records"
               :key="webHookItem.id"
               :index="index"
@@ -63,11 +139,11 @@
     </div>
 
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <new-webhook v-if="showAddPopup" :on-close="hideAddPopup" />
+      <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
 
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-webhook
+      <EditWebhook
         v-if="showEditPopup"
         :id="selectedWebHook.id"
         :value="selectedWebHook"
@@ -89,78 +165,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import NewWebhook from './NewWebHook.vue';
-import EditWebhook from './EditWebHook.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import WebhookRow from './WebhookRow.vue';
-
-export default {
-  components: {
-    NewWebhook,
-    EditWebhook,
-    WebhookRow,
-  },
-  mixins: [alertMixin, globalConfigMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedWebHook: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'webhooks/getWebhooks',
-      uiFlags: 'webhooks/getUIFlags',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('webhooks/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedWebHook = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    openEditPopup(webhook) {
-      this.showEditPopup = true;
-      this.selectedWebHook = webhook;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.selectedWebHook.id] = true;
-      this.closeDeletePopup();
-      this.deleteWebhook(this.selectedWebHook.id);
-    },
-    async deleteWebhook(id) {
-      try {
-        await this.$store.dispatch('webhooks/delete', id);
-        this.showAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.SUCCESS_MESSAGE')
-        );
-      } catch (error) {
-        this.showAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
-</script>
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 6fd7ec81b8c71..43b1d284319b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,32 +1,12 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { mapGetters } from 'vuex';
 import WebhookForm from './WebhookForm.vue';
 
 export default {
   components: { WebhookForm },
-  mixins: [alertMixin, globalConfigMixin],
+  mixins: [globalConfigMixin],
   props: {
     onClose: {
       type: Function,
@@ -43,7 +23,7 @@ export default {
     async onSubmit(webhook) {
       try {
         await this.$store.dispatch('webhooks/create', { webhook });
-        this.showAlert(
+        useAlert(
           this.$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.API.SUCCESS_MESSAGE')
         );
         this.onClose();
@@ -51,9 +31,29 @@ export default {
         const message =
           error.response.data.message ||
           this.$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.API.ERROR_MESSAGE');
-        this.showAlert(message);
+        useAlert(message);
       }
     },
   },
 };
 </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 a917ddec55c08..d399adbdd6f24 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -1,61 +1,6 @@
-<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 { required, url, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, url, minLength } from '@vuelidate/validators';
 import webhookMixin from './webhookMixin';
 import wootConstants from 'dashboard/constants/globals';
 
@@ -88,6 +33,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     url: {
       required,
@@ -125,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 b27cb6162ac47..20e6d6c1a08f2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -1,3 +1,29 @@
+<script>
+import webhookMixin from './webhookMixin';
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+
+export default {
+  components: { ShowMore },
+  mixins: [webhookMixin],
+  props: {
+    webhook: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    subscribedEvents() {
+      const { subscriptions } = this.webhook;
+      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
+    },
+  },
+};
+</script>
+
 <template>
   <tr class="space-x-2">
     <td class="max-w-2xl">
@@ -8,7 +34,7 @@
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
-        <show-more :text="subscribedEvents" :limit="60" />
+        <ShowMore :text="subscribedEvents" :limit="60" />
       </span>
     </td>
     <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
@@ -31,28 +57,3 @@
     </td>
   </tr>
 </template>
-<script>
-import webhookMixin from './webhookMixin';
-import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-
-export default {
-  components: { ShowMore },
-  mixins: [webhookMixin],
-  props: {
-    webhook: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    subscribedEvents() {
-      const { subscriptions } = this.webhook;
-      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/hookMixin.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/hookMixin.js
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/settings/integrationapps/hookMixin.js
rename to app/javascript/dashboard/routes/dashboard/settings/integrations/hookMixin.js
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index bdebc0329e173..c4d31917352d4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -1,14 +1,37 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
+const IntegrationHooks = () => import('./IntegrationHooks.vue');
+const Index = () => import('./Index.vue');
 const Webhook = () => import('./Webhooks/Index.vue');
 const DashboardApps = () => import('./DashboardApps/Index.vue');
-const ShowIntegration = () => import('./ShowIntegration.vue');
 const Slack = () => import('./Slack.vue');
-const Index = () => import('./Index.vue');
+const SettingsContent = () => import('../Wrapper.vue');
 
 export default {
   routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/integrations'),
+      component: SettingsWrapper,
+      props: {},
+      children: [
+        {
+          path: '',
+          name: 'settings_applications',
+          component: Index,
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
+        {
+          path: 'dashboard_apps',
+          component: DashboardApps,
+          name: 'settings_integrations_dashboard_apps',
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
+      ],
+    },
     {
       path: frontendURL('accounts/:accountId/settings/integrations'),
       component: SettingsContent,
@@ -26,14 +49,6 @@ export default {
         };
       },
       children: [
-        {
-          path: '',
-          name: 'settings_integrations',
-          component: Index,
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
         {
           path: 'webhook',
           component: Webhook,
@@ -42,14 +57,6 @@ export default {
             permissions: ['administrator'],
           },
         },
-        {
-          path: 'dashboard-apps',
-          component: DashboardApps,
-          name: 'settings_integrations_dashboard_apps',
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
         {
           path: 'slack',
           name: 'settings_integrations_slack',
@@ -61,17 +68,14 @@ export default {
         },
         {
           path: ':integration_id',
-          name: 'settings_integrations_integration',
-          component: ShowIntegration,
+          name: 'settings_applications_integration',
+          component: IntegrationHooks,
           meta: {
             permissions: ['administrator'],
           },
-          props: route => {
-            return {
-              integrationId: route.params.integration_id,
-              code: route.query.code,
-            };
-          },
+          props: route => ({
+            integrationId: route.params.integration_id,
+          }),
         },
       ],
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/specs/hookMixin.spec.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/specs/hookMixin.spec.js
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/settings/integrationapps/specs/hookMixin.spec.js
rename to app/javascript/dashboard/routes/dashboard/settings/integrations/specs/hookMixin.spec.js
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index 191b3149c752b..191e00b3ac513 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -1,74 +1,20 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header
-      :header-title="$t('LABEL_MGMT.ADD.TITLE')"
-      :header-content="$t('LABEL_MGMT.ADD.DESC')"
-    />
-    <form class="mx-0 flex flex-wrap" @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="getLabelTitleErrorMessage"
-        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="w-full flex items-center 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 justify-end items-center py-2 px-0 gap-2 w-full">
-        <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 alertMixin from 'shared/mixins/alertMixin';
-import validationMixin from './validationMixin';
 import { mapGetters } from 'vuex';
-import validations from './validations';
+import { useAlert } from 'dashboard/composables';
+import validations, { getLabelTitleErrorMessage } from './validations';
 import { getRandomColor } from 'dashboard/helper/labelColor';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
-  mixins: [alertMixin, validationMixin],
   props: {
     prefillTitle: {
       type: String,
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       color: '#000',
@@ -82,6 +28,10 @@ export default {
     ...mapGetters({
       uiFlags: 'labels/getUIFlags',
     }),
+    labelTitleErrorMessage() {
+      const errorMessage = getLabelTitleErrorMessage(this.v$);
+      return this.$t(errorMessage);
+    },
   },
   mounted() {
     this.color = getRandomColor();
@@ -99,17 +49,74 @@ export default {
           title: this.title.toLowerCase(),
           show_on_sidebar: this.showOnSidebar,
         });
-        this.showAlert(this.$t('LABEL_MGMT.ADD.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('LABEL_MGMT.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
         const errorMessage =
           error.message || this.$t('LABEL_MGMT.ADD.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
   },
 };
 </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 958b05a129e9b..71605db0cdac4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -1,66 +1,19 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="mx-0 flex flex-wrap" @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="getLabelTitleErrorMessage"
-        @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="w-full flex items-center 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 justify-end items-center py-2 px-0 gap-2 w-full">
-        <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 alertMixin from 'shared/mixins/alertMixin';
-import validationMixin from './validationMixin';
-import validations from './validations';
+import { useAlert } from 'dashboard/composables';
+import validations, { getLabelTitleErrorMessage } from './validations';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
-  mixins: [alertMixin, validationMixin],
   props: {
     selectedResponse: {
       type: Object,
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       title: '',
@@ -79,6 +32,10 @@ export default {
         this.selectedResponse.title
       }`;
     },
+    labelTitleErrorMessage() {
+      const errorMessage = getLabelTitleErrorMessage(this.v$);
+      return this.$t(errorMessage);
+    },
   },
   mounted() {
     this.setFormValues();
@@ -103,16 +60,66 @@ export default {
           show_on_sidebar: this.showOnSidebar,
         })
         .then(() => {
-          this.showAlert(this.$t('LABEL_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+          useAlert(this.$t('LABEL_MGMT.EDIT.API.SUCCESS_MESSAGE'));
           setTimeout(() => this.onClose(), 10);
         })
         .catch(() => {
-          this.showAlert(this.$t('LABEL_MGMT.EDIT.API.ERROR_MESSAGE'));
+          useAlert(this.$t('LABEL_MGMT.EDIT.API.ERROR_MESSAGE'));
         });
     },
   },
 };
 </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 dad8af7337904..0fdaf16e829d0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -1,52 +1,137 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
+import AddLabel from './AddLabel.vue';
+import EditLabel from './EditLabel.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+
+const loading = ref({});
+const showAddPopup = ref(false);
+const showEditPopup = ref(false);
+const showDeleteConfirmationPopup = ref(false);
+const selectedLabel = ref({});
+
+const records = computed(() => getters['labels/getLabels'].value);
+const uiFlags = computed(() => getters['labels/getUIFlags'].value);
+
+const deleteMessage = computed(() => ` ${selectedLabel.value.title}?`);
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const openEditPopup = response => {
+  showEditPopup.value = true;
+  selectedLabel.value = response;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const openDeletePopup = response => {
+  showDeleteConfirmationPopup.value = true;
+  selectedLabel.value = response;
+};
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteLabel = async id => {
+  try {
+    await store.dispatch('labels/delete', id);
+    useAlert(t('LABEL_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('LABEL_MGMT.DELETE.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  } finally {
+    loading.value[selectedLabel.value.id] = false;
+  }
+};
+
+const confirmDeletion = () => {
+  loading.value[selectedLabel.value.id] = true;
+  closeDeletePopup();
+  deleteLabel(selectedLabel.value.id);
+};
+
+onBeforeMount(() => {
+  store.dispatch('labels/get');
+});
+</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 h-full items-center flex-col justify-center"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('LABEL_MGMT.LOADING')"
+    :no-records-found="!records.length"
+    :no-records-message="$t('LABEL_MGMT.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('LABEL_MGMT.HEADER')"
+        :description="$t('LABEL_MGMT.DESCRIPTION')"
+        :link-text="$t('LABEL_MGMT.LEARN_MORE')"
+        feature-name="labels"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table
+        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <thead>
+          <th
+            v-for="thHeader in $t('LABEL_MGMT.LIST.TABLE_HEADER')"
+            :key="thHeader"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          >
+            {{ thHeader }}
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
         >
-          {{ $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">
+          <tr v-for="(label, index) in records" :key="label.title">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <span
+                class="font-medium break-words text-slate-700 dark:text-slate-100 mb-1"
+              >
+                {{ label.title }}
+              </span>
+            </td>
+            <td class="py-4 ltr:pr-4 rtl:pl-4">{{ label.description }}</td>
+            <td class="leading-6 py-4 ltr:pr-4 rtl:pl-4">
+              <div class="flex items-center">
+                <span
+                  class="rounded h-4 w-4 mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-50 dark:border-slate-700"
+                  :style="{ backgroundColor: label.color }"
+                />
+                {{ label.color }}
+              </div>
+            </td>
+            <td class="py-4 min-w-xs">
+              <div class="flex gap-1">
                 <woot-button
                   v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
                   variant="smooth"
@@ -67,25 +152,19 @@
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
                 />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
 
-      <div class="w-1/3 hidden 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" />
+      <AddLabel @close="hideAddPopup" />
     </woot-modal>
 
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-label
-        :selected-response="selectedResponse"
-        @close="hideEditPopup"
-      />
+      <EditLabel :selected-response="selectedLabel" @close="hideEditPopup" />
     </woot-modal>
 
     <woot-delete-modal
@@ -95,112 +174,8 @@
       :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
       :message="$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')"
       :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
+      :confirm-text="$t('LABEL_MGMT.DELETE.CONFIRM.YES')"
+      :reject-text="$t('LABEL_MGMT.DELETE.CONFIRM.NO')"
     />
-  </div>
+  </SettingsLayout>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-import AddLabel from './AddLabel.vue';
-import EditLabel from './EditLabel.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: {
-    AddLabel,
-    EditLabel,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'labels/getLabels',
-      uiFlags: 'labels/getUIFlags',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return this.$t('LABEL_MGMT.DELETE.CONFIRM.YES');
-    },
-    deleteRejectText() {
-      return this.$t('LABEL_MGMT.DELETE.CONFIRM.NO');
-    },
-    deleteMessage() {
-      return ` ${this.selectedResponse.title}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('labels/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedResponse = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteLabel(this.selectedResponse.id);
-    },
-    deleteLabel(id) {
-      this.$store
-        .dispatch('labels/delete', id)
-        .then(() => {
-          this.showAlert(this.$t('LABEL_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-        })
-        .catch(() => {
-          this.showAlert(this.$t('LABEL_MGMT.DELETE.API.ERROR_MESSAGE'));
-        })
-        .finally(() => {
-          this.loading[this.selectedResponse.id] = false;
-        });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.label-color--container {
-  @apply flex items-center;
-}
-
-.label-color--display {
-  @apply rounded h-4 w-4 mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-50 dark:border-slate-700;
-}
-
-.label-title {
-  span {
-    @apply w-60 inline-block;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
index 088c565d00403..9f5edc2ddc3ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
@@ -1,18 +1,13 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const Index = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/labels'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'LABEL_MGMT.HEADER',
-        icon: 'tag',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validationMixin.spec.js b/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validationMixin.spec.js
deleted file mode 100644
index 8e1628bdbce4c..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validationMixin.spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
-
-import validationMixin from '../validationMixin';
-import validations from '../validations';
-import i18n from 'dashboard/i18n';
-const localVue = createLocalVue();
-
-localVue.use(VueI18n);
-localVue.use(Vuelidate);
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-const Component = {
-  render() {},
-  title: 'TestComponent',
-  mixins: [validationMixin],
-  validations,
-};
-
-describe('validationMixin', () => {
-  it('it should return empty error message if valid label name passed', async () => {
-    const wrapper = shallowMount(Component, {
-      i18n: i18nConfig,
-      localVue,
-      data() {
-        return { title: 'sales' };
-      },
-    });
-    wrapper.vm.$v.$touch();
-    expect(wrapper.vm.getLabelTitleErrorMessage).toBe('');
-  });
-  it('it should return label required error message if empty name is passed', async () => {
-    const wrapper = shallowMount(Component, {
-      i18n: i18nConfig,
-      localVue,
-      data() {
-        return { title: '' };
-      },
-    });
-    wrapper.vm.$v.$touch();
-    expect(wrapper.vm.getLabelTitleErrorMessage).toBe('Label name is required');
-  });
-  it('it should return label minimum length error message if one charceter label name is passed', async () => {
-    const wrapper = shallowMount(Component, {
-      i18n: i18nConfig,
-      localVue,
-      data() {
-        return { title: 's' };
-      },
-    });
-    wrapper.vm.$v.$touch();
-    expect(wrapper.vm.getLabelTitleErrorMessage).toBe(
-      'Minimum length 2 is required'
-    );
-  });
-  it('it should return invalid character error message if invalid lable name passed', async () => {
-    const wrapper = shallowMount(Component, {
-      i18n: i18nConfig,
-      localVue,
-      data() {
-        return { title: 'sales enquiry' };
-      },
-    });
-    wrapper.vm.$v.$touch();
-    expect(wrapper.vm.getLabelTitleErrorMessage).toBe(
-      'Only Alphabets, Numbers, Hyphen and Underscore are allowed'
-    );
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validations.spec.js b/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validations.spec.js
index 47c8c21dfa4e8..9968ee7498e1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validations.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/specs/validations.spec.js
@@ -1,4 +1,7 @@
-import { validLabelCharacters } from '../validations';
+import {
+  validLabelCharacters,
+  getLabelTitleErrorMessage,
+} from '../validations';
 
 describe('#validLabelCharacters', () => {
   it('validates the label', () => {
@@ -8,3 +11,64 @@ describe('#validLabelCharacters', () => {
     expect(validLabelCharacters('str-str')).toEqual(true);
   });
 });
+
+describe('#getLabelTitleErrorMessage', () => {
+  const createValidation = titleValidation => ({
+    title: {
+      $error: titleValidation.$error,
+      required: titleValidation.required,
+      minLength: titleValidation.minLength,
+      validLabelCharacters: titleValidation.validLabelCharacters,
+    },
+  });
+
+  it('returns an empty string when there are no validation errors', () => {
+    const validation = createValidation({
+      $error: false,
+      required: true,
+      minLength: true,
+      validLabelCharacters: true,
+    });
+
+    expect(getLabelTitleErrorMessage(validation)).toEqual('');
+  });
+
+  it('returns a required error message when the title is required but not provided', () => {
+    const validation = createValidation({
+      $error: true,
+      required: false,
+      minLength: true,
+      validLabelCharacters: true,
+    });
+
+    expect(getLabelTitleErrorMessage(validation)).toEqual(
+      'LABEL_MGMT.FORM.NAME.REQUIRED_ERROR'
+    );
+  });
+
+  it('returns a minimum length error message when the title is too short', () => {
+    const validation = createValidation({
+      $error: true,
+      required: true,
+      minLength: false,
+      validLabelCharacters: true,
+    });
+
+    expect(getLabelTitleErrorMessage(validation)).toEqual(
+      'LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR'
+    );
+  });
+
+  it('returns a valid label characters error message when the title has invalid characters', () => {
+    const validation = createValidation({
+      $error: true,
+      required: true,
+      minLength: true,
+      validLabelCharacters: false,
+    });
+
+    expect(getLabelTitleErrorMessage(validation)).toEqual(
+      'LABEL_MGMT.FORM.NAME.VALID_ERROR'
+    );
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
deleted file mode 100644
index 9f11646a69029..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  computed: {
-    getLabelTitleErrorMessage() {
-      let errorMessage = '';
-      if (!this.$v.title.$error) {
-        errorMessage = '';
-      } else if (!this.$v.title.required) {
-        errorMessage = this.$t('LABEL_MGMT.FORM.NAME.REQUIRED_ERROR');
-      } else if (!this.$v.title.minLength) {
-        errorMessage = this.$t('LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
-      } else if (!this.$v.title.validLabelCharacters) {
-        errorMessage = this.$t('LABEL_MGMT.FORM.NAME.VALID_ERROR');
-      }
-      return errorMessage;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/validations.js b/app/javascript/dashboard/routes/dashboard/settings/labels/validations.js
index 0a2373a06d037..32e3cfadb42b7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/validations.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/validations.js
@@ -1,7 +1,21 @@
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 
 export const validLabelCharacters = (str = '') => !!str && !str.includes(' ');
 
+export const getLabelTitleErrorMessage = validation => {
+  let errorMessage = '';
+  if (!validation.title.$error) {
+    errorMessage = '';
+  } else if (!validation.title.required) {
+    errorMessage = 'LABEL_MGMT.FORM.NAME.REQUIRED_ERROR';
+  } else if (!validation.title.minLength) {
+    errorMessage = 'LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR';
+  } else if (!validation.title.validLabelCharacters) {
+    errorMessage = 'LABEL_MGMT.FORM.NAME.VALID_ERROR';
+  }
+  return errorMessage;
+};
+
 export default {
   title: {
     required,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index f32bb6f1766fd..5217f0199455c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,7 +1,67 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAccount } from 'dashboard/composables/useAccount';
+import MacrosTableRow from './MacrosTableRow.vue';
+export default {
+  components: {
+    MacrosTableRow,
+  },
+  setup() {
+    const { accountScopedUrl } = useAccount();
+    return {
+      accountScopedUrl,
+    };
+  },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+      selectedResponse: {},
+      loading: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: ['macros/getMacros'],
+      uiFlags: 'macros/getUIFlags',
+    }),
+    deleteMessage() {
+      return ` ${this.selectedResponse.name}?`;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('macros/get');
+  },
+  methods: {
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedResponse = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedResponse.id] = true;
+      this.closeDeletePopup();
+      this.deleteMacro(this.selectedResponse.id);
+    },
+    async deleteMacro(id) {
+      try {
+        await this.$store.dispatch('macros/delete', id);
+        useAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
+        this.loading[this.selectedResponse.id] = false;
+      } catch (error) {
+        useAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex-1 overflow-auto">
     <router-link
-      :to="addAccountScoping('settings/macros/new')"
+      :to="accountScopedUrl('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" />
@@ -12,7 +72,7 @@
     <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">
+          <p class="flex flex-col items-center justify-center h-full">
             {{ $t('MACROS.LIST.404') }}
           </p>
         </div>
@@ -30,7 +90,7 @@
             </th>
           </thead>
           <tbody>
-            <macros-table-row
+            <MacrosTableRow
               v-for="(macro, index) in records"
               :key="index"
               :macro="macro"
@@ -39,7 +99,7 @@
           </tbody>
         </table>
       </div>
-      <div class="hidden lg:block w-1/3">
+      <div class="hidden w-1/3 lg:block">
         <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
       </div>
     </div>
@@ -55,58 +115,3 @@
     />
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import accountMixin from 'dashboard/mixins/account.js';
-import MacrosTableRow from './MacrosTableRow.vue';
-export default {
-  components: {
-    MacrosTableRow,
-  },
-  mixins: [alertMixin, accountMixin],
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-      loading: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: ['macros/getMacros'],
-      uiFlags: 'macros/getUIFlags',
-    }),
-    deleteMessage() {
-      return ` ${this.selectedResponse.name}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('macros/get');
-  },
-  methods: {
-    openDeletePopup(response) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedResponse = response;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.selectedResponse.id] = true;
-      this.closeDeletePopup();
-      this.deleteMacro(this.selectedResponse.id);
-    },
-    async deleteMacro(id) {
-      try {
-        await this.$store.dispatch('macros/delete', id);
-        this.showAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
-        this.loading[this.selectedResponse.id] = false;
-      } catch (error) {
-        this.showAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 7c9f476e45b6e..f29d822ff6891 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -1,142 +1,137 @@
-<template>
-  <div class="h-full overflow-auto flex-1 flex flex-col">
-    <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>
+<script setup>
+import { ref, computed, watch, provide } from 'vue';
+import { useRoute, useRouter } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import MacroForm from './MacroForm.vue';
 import { MACRO_ACTION_TYPES } from './constants';
-import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
-import alertMixin from 'shared/mixins/alertMixin';
-import macrosMixin from 'dashboard/mixins/macrosMixin';
+import { useMacros } from 'dashboard/composables/useMacros';
 
-export default {
-  components: {
-    MacroForm,
-  },
-  mixins: [alertMixin, macrosMixin],
-  provide() {
-    return {
-      macroActionTypes: this.macroActionTypes,
-    };
-  },
-  data() {
+const store = useStore();
+const getters = useStoreGetters();
+
+const route = useRoute();
+const router = useRouter();
+
+const { t } = useI18n();
+
+const { getMacroDropdownValues } = useMacros();
+
+const macro = ref(null);
+const mode = ref('CREATE');
+const macroActionTypes = MACRO_ACTION_TYPES;
+
+provide('macroActionTypes', macroActionTypes);
+
+const uiFlags = computed(() => getters['macros/getUIFlags'].value);
+const macroId = computed(() => route.params.macroId);
+
+const fetchDropdownData = () => {
+  store.dispatch('agents/get');
+  store.dispatch('teams/get');
+  store.dispatch('labels/get');
+};
+
+const formatMacro = macroData => {
+  const formattedActions = macroData.actions.map(action => {
+    let actionParams = [];
+    if (action.action_params.length) {
+      const inputType = macroActionTypes.find(
+        item => item.key === action.action_name
+      ).inputType;
+      if (inputType === 'multi_select' || inputType === 'search_select') {
+        actionParams = getMacroDropdownValues(action.action_name).filter(item =>
+          [...action.action_params].includes(item.id)
+        );
+      } else if (inputType === 'team_message') {
+        actionParams = {
+          team_ids: getMacroDropdownValues(action.action_name).filter(item =>
+            [...action.action_params[0].team_ids].includes(item.id)
+          ),
+          message: action.action_params[0].message,
+        };
+      } else actionParams = [...action.action_params];
+    }
     return {
-      macro: null,
-      mode: 'CREATE',
-      macroActionTypes: MACRO_ACTION_TYPES,
+      ...action,
+      action_params: actionParams,
     };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'macros/getUIFlags',
-      labels: 'labels/getLabels',
-      agents: 'agents/getAgents',
-      teams: 'teams/getTeams',
-    }),
-    macroId() {
-      return this.$route.params.macroId;
-    },
-  },
-  watch: {
-    $route: {
-      handler() {
-        this.fetchDropdownData();
-        if (this.$route.params.macroId) {
-          this.fetchMacro();
-        } else {
-          this.initNewMacro();
-        }
+  });
+  return {
+    ...macroData,
+    actions: formattedActions,
+  };
+};
+
+const manifestMacro = async () => {
+  await store.dispatch('macros/getSingleMacro', macroId.value);
+  const singleMacro = store.getters['macros/getMacro'](macroId.value);
+  macro.value = formatMacro(singleMacro);
+};
+
+const fetchMacro = () => {
+  mode.value = 'EDIT';
+  manifestMacro();
+};
+
+const initNewMacro = () => {
+  mode.value = 'CREATE';
+  macro.value = {
+    name: '',
+    actions: [
+      {
+        action_name: 'assign_team',
+        action_params: [],
       },
-      immediate: true,
-    },
-  },
-  methods: {
-    fetchDropdownData() {
-      this.$store.dispatch('agents/get');
-      this.$store.dispatch('teams/get');
-      this.$store.dispatch('labels/get');
-    },
-    fetchMacro() {
-      this.mode = 'EDIT';
-      this.manifestMacro();
-    },
-    async manifestMacro() {
-      await this.$store.dispatch('macros/getSingleMacro', this.macroId);
-      const singleMacro = this.$store.getters['macros/getMacro'](this.macroId);
-      this.macro = this.formatMacro(singleMacro);
-    },
-    formatMacro(macro) {
-      const formattedActions = macro.actions.map(action => {
-        let actionParams = [];
-        if (action.action_params.length) {
-          const inputType = this.macroActionTypes.find(
-            item => item.key === action.action_name
-          ).inputType;
-          if (inputType === 'multi_select' || inputType === 'search_select') {
-            actionParams = [
-              ...this.getDropdownValues(action.action_name, this.$store),
-            ].filter(item => [...action.action_params].includes(item.id));
-          } else if (inputType === 'team_message') {
-            actionParams = {
-              team_ids: [
-                ...this.getDropdownValues(action.action_name, this.$store),
-              ].filter(item =>
-                [...action.action_params[0].team_ids].includes(item.id)
-              ),
-              message: action.action_params[0].message,
-            };
-          } else actionParams = [...action.action_params];
-        }
-        return {
-          ...action,
-          action_params: actionParams,
-        };
-      });
-      return {
-        ...macro,
-        actions: formattedActions,
-      };
-    },
-    initNewMacro() {
-      this.mode = 'CREATE';
-      this.macro = {
-        name: '',
-        actions: [
-          {
-            action_name: 'assign_team',
-            action_params: [],
-          },
-        ],
-        visibility: 'global',
-      };
-    },
-    async saveMacro(macro) {
-      try {
-        const action = this.mode === 'EDIT' ? 'macros/update' : 'macros/create';
-        let successMessage =
-          this.mode === 'EDIT'
-            ? this.$t('MACROS.EDIT.API.SUCCESS_MESSAGE')
-            : this.$t('MACROS.ADD.API.SUCCESS_MESSAGE');
-        let serializedMacro = JSON.parse(JSON.stringify(macro));
-        serializedMacro.actions = actionQueryGenerator(serializedMacro.actions);
-        await this.$store.dispatch(action, serializedMacro);
-        this.showAlert(successMessage);
-        this.$router.push({ name: 'macros_wrapper' });
-      } catch (error) {
-        this.showAlert(this.$t('MACROS.ERROR'));
-      }
-    },
+    ],
+    visibility: 'global',
+  };
+};
+
+watch(
+  () => route,
+  () => {
+    fetchDropdownData();
+    if (route.params.macroId) {
+      fetchMacro();
+    } else {
+      initNewMacro();
+    }
   },
+  { immediate: true, deep: true }
+);
+
+const saveMacro = async macroData => {
+  try {
+    const action = mode.value === 'EDIT' ? 'macros/update' : 'macros/create';
+    const successMessage =
+      mode.value === 'EDIT'
+        ? t('MACROS.EDIT.API.SUCCESS_MESSAGE')
+        : t('MACROS.ADD.API.SUCCESS_MESSAGE');
+    let serializedMacro = JSON.parse(JSON.stringify(macroData));
+    serializedMacro.actions = actionQueryGenerator(serializedMacro.actions);
+    await store.dispatch(action, serializedMacro);
+    useAlert(successMessage);
+    router.push({ name: 'macros_wrapper' });
+  } catch (error) {
+    useAlert(t('MACROS.ERROR'));
+  }
 };
 </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="macro"
+      @update:macro-data="macro = $event"
+      @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 3cebed55049b8..d5dd35d746ff9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -1,52 +1,32 @@
-<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"
-        @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';
 import MacroProperties from './MacroProperties.vue';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { validateActions } from 'dashboard/helper/validations';
 
 export default {
   components: {
     MacroNodes,
     MacroProperties,
   },
-  provide() {
-    return {
-      $v: this.$v,
-    };
-  },
   props: {
     macroData: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    const v$ = useVuelidate();
+    provide('v$', v$);
+
+    return { v$ };
+  },
   data() {
     return {
       macro: this.macroData,
+      errors: {},
     };
   },
   computed: {
@@ -77,25 +57,14 @@ export default {
       visibility: {
         required,
       },
-      actions: {
-        required,
-        $each: {
-          action_params: {
-            required: requiredIf(prop => {
-              if (prop.action_name === 'send_email_to_team') return true;
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation' ||
-                prop.action_name === 'remove_assigned_team'
-              );
-            }),
-          },
-        },
-      },
     },
   },
   methods: {
+    removeObjectProperty(obj, keyToRemove) {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([key]) => key !== keyToRemove)
+      );
+    },
     updateName(value) {
       this.macro.name = value;
     },
@@ -109,24 +78,60 @@ export default {
       });
     },
     deleteNode(index) {
+      // remove that index specifically
+      // so that the next item does not get marked invalid
+      this.errors = this.removeObjectProperty(this.errors, `action_${index}`);
       this.macro.actions.splice(index, 1);
     },
     submit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.errors = validateActions(this.macro.actions);
+      if (Object.keys(this.errors).length !== 0) return;
+
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
+
       this.$emit('submit', this.macro);
     },
     resetNode(index) {
-      this.$v.macro.actions.$each[index].$reset();
+      // remove that index specifically
+      // so that the next item does not get marked invalid
+      this.errors = this.removeObjectProperty(this.errors, `action_${index}`);
       this.macro.actions[index].action_params = [];
     },
     resetValidation() {
-      this.$v.$reset();
+      this.errors = {};
+      this.v$?.$reset?.();
     },
   },
 };
 </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 614257e58d1a3..649f3efbb9386 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -1,27 +1,89 @@
+<script setup>
+import { computed, inject } from 'vue';
+import { useMacros } from 'dashboard/composables/useMacros';
+import { useI18n } from 'dashboard/composables/useI18n';
+import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+
+const props = defineProps({
+  singleNode: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: Object,
+    default: () => ({}),
+  },
+  errorKey: {
+    type: String,
+    default: '',
+  },
+  fileName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['input', 'resetAction', 'deleteNode']);
+
+const { t } = useI18n();
+
+const macroActionTypes = inject('macroActionTypes');
+
+const { getMacroDropdownValues } = useMacros();
+
+const actionData = computed({
+  get: () => props.value,
+  set: value => emit('input', value),
+});
+
+const errorMessage = computed(() => {
+  if (!props.errorKey) return '';
+  return t(`MACROS.ERRORS.${props.errorKey}`);
+});
+
+const showActionInput = computed(() => {
+  if (
+    actionData.value.action_name === 'send_email_to_team' ||
+    actionData.value.action_name === 'send_message'
+  )
+    return false;
+  const type = macroActionTypes.find(
+    action => action.key === actionData.value.action_name
+  ).inputType;
+  return !!type;
+});
+
+const dropdownValues = () => {
+  return getMacroDropdownValues(props.value.action_name);
+};
+</script>
+
 <template>
-  <div class="macro__node-action-container">
+  <div class="relative flex items-center w-full min-w-0 basis-full">
     <woot-button
       v-if="!singleNode"
       size="small"
       variant="clear"
       color-scheme="secondary"
       icon="navigation"
-      class="macros__node-drag-handle"
+      class="absolute cursor-move -left-8 macros__node-drag-handle"
     />
     <div
-      class="macro__node-action-item"
-      :class="{
-        'has-error': hasError($v.macro.actions.$each[index]),
-      }"
+      class="flex-grow p-2 mr-2 rounded-md shadow-sm"
+      :class="
+        errorKey
+          ? 'bg-red-50 animate-shake dark:bg-red-800'
+          : 'bg-white dark:bg-slate-700'
+      "
     >
-      <action-input
+      <ActionInput
         v-model="actionData"
         :action-types="macroActionTypes"
         :dropdown-values="dropdownValues()"
         :show-action-input="showActionInput"
         :show-remove-button="false"
-        :is-macro="true"
-        :v="$v.macro.actions.$each[index]"
+        is-macro
+        :error-message="errorMessage"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
@@ -37,105 +99,3 @@
     />
   </div>
 </template>
-
-<script>
-import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-import macrosMixin from 'dashboard/mixins/macrosMixin';
-import { mapGetters } from 'vuex';
-
-export default {
-  components: {
-    ActionInput,
-  },
-  mixins: [macrosMixin],
-  inject: ['macroActionTypes', '$v'],
-  props: {
-    singleNode: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: Object,
-      default: () => ({}),
-    },
-    index: {
-      type: Number,
-      default: 0,
-    },
-    fileName: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    ...mapGetters({
-      labels: 'labels/getLabels',
-      teams: 'teams/getTeams',
-      agents: 'agents/getAgents',
-    }),
-    actionData: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit('input', value);
-      },
-    },
-    showActionInput() {
-      if (
-        this.actionData.action_name === 'send_email_to_team' ||
-        this.actionData.action_name === 'send_message'
-      )
-        return false;
-      const type = this.macroActionTypes.find(
-        action => action.key === this.actionData.action_name
-      ).inputType;
-      return !!type;
-    },
-  },
-  methods: {
-    dropdownValues() {
-      return this.getDropdownValues(this.value.action_name, this.$store);
-    },
-    hasError(v) {
-      return !!(v.action_params.$dirty && v.action_params.$error);
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.macros__node-drag-handle {
-  @apply cursor-move -left-8 absolute;
-}
-.macro__node-action-container {
-  @apply w-full min-w-0 basis-full items-center flex relative;
-
-  .macro__node-action-item {
-    @apply flex-grow bg-white dark:bg-slate-700 p-2 mr-2 rounded-md shadow-sm;
-
-    &.has-error {
-      animation: shake 0.3s ease-in-out 0s 2;
-      @apply bg-red-50 dark:bg-red-800;
-    }
-  }
-}
-
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(0.234375rem);
-  }
-  50% {
-    transform: translateX(-0.234375rem);
-  }
-  75% {
-    transform: translateX(0.234375rem);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index b67fb021ea8f1..c400ba628a003 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -1,3 +1,45 @@
+<script>
+import Draggable from 'vuedraggable';
+import MacroNode from './MacroNode.vue';
+import { getFileName } from './macroHelper';
+
+export default {
+  components: {
+    Draggable,
+    MacroNode,
+  },
+  props: {
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    files: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    actionData: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+  },
+  methods: {
+    fileName() {
+      return getFileName(...arguments);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="macros__nodes">
     <div class="macro__node">
@@ -8,7 +50,7 @@
         />
       </div>
     </div>
-    <draggable
+    <Draggable
       :list="actionData"
       animation="200"
       ghost-class="ghost"
@@ -17,11 +59,12 @@
       handle=".macros__node-drag-handle"
     >
       <div v-for="(action, i) in actionData" :key="i" class="macro__node">
-        <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],
@@ -34,7 +77,7 @@
           @deleteNode="$emit('deleteNode', i)"
         />
       </div>
-    </draggable>
+    </Draggable>
     <div class="macro__node">
       <div>
         <woot-button
@@ -60,43 +103,6 @@
   </div>
 </template>
 
-<script>
-import Draggable from 'vuedraggable';
-import MacroNode from './MacroNode.vue';
-import { getFileName } from './macroHelper';
-export default {
-  components: {
-    Draggable,
-    MacroNode,
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    files: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    actionData: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit('input', value);
-      },
-    },
-  },
-  methods: {
-    fileName() {
-      return getFileName(...arguments);
-    },
-  },
-};
-</script>
-
 <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 078c4b3694da1..01b3ede4f1d1d 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"
@@ -7,8 +36,8 @@
         :value="macroName"
         :label="$t('MACROS.ADD.FORM.NAME.LABEL')"
         :placeholder="$t('MACROS.ADD.FORM.NAME.PLACEHOLDER')"
-        :error="$v.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
-        :class="{ error: $v.macro.name.$error }"
+        :error="v$.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
+        :class="{ error: v$.macro.name.$error }"
         @input="onUpdateName($event)"
       />
     </div>
@@ -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 c70fbddc112d0..6eee853ead347 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -1,21 +1,59 @@
+<script>
+import { useAccount } from 'dashboard/composables/useAccount';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    macro: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup() {
+    const { accountScopedUrl } = useAccount();
+
+    return {
+      accountScopedUrl,
+    };
+  },
+  computed: {
+    createdByName() {
+      const createdBy = this.macro.created_by;
+      return createdBy.available_name ?? createdBy.email ?? '';
+    },
+    updatedByName() {
+      const updatedBy = this.macro.updated_by;
+      return updatedBy.available_name ?? updatedBy.email ?? '';
+    },
+    visibilityLabel() {
+      return this.macro.visibility === 'global'
+        ? this.$t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL')
+        : this.$t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL');
+    },
+  },
+};
+</script>
+
 <template>
   <tr>
     <td>{{ macro.name }}</td>
     <td>
       <div v-if="macro.created_by" class="avatar-container">
-        <thumbnail :username="createdByName" size="24px" />
+        <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" />
+        <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`)">
+      <router-link :to="accountScopedUrl(`settings/macros/${macro.id}/edit`)">
         <woot-button
           v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
           variant="smooth"
@@ -38,38 +76,6 @@
   </tr>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import accountMixin from 'dashboard/mixins/account.js';
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [accountMixin],
-  props: {
-    macro: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    createdByName() {
-      const createdBy = this.macro.created_by;
-      return createdBy.available_name ?? createdBy.email ?? '';
-    },
-    updatedByName() {
-      const updatedBy = this.macro.updated_by;
-      return updatedBy.available_name ?? updatedBy.email ?? '';
-    },
-    visibilityLabel() {
-      return this.macro.visibility === 'global'
-        ? this.$t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL')
-        : this.$t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL');
-    },
-  },
-};
-</script>
-
 <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 93b6fcb238088..683c848e92d70 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 ead4b77f2dcd4..18ae1c07eb2bc 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 41d25b5224eb3..ddc6545f6cbc8 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 3246e12af6ecb..232a7a74a83c9 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 84f369f5a3ba6..f09432f83e53d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -1,38 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
-import configMixin from 'shared/mixins/configMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import AudioAlertTone from './AudioAlertTone.vue';
 import AudioAlertEvent from './AudioAlertEvent.vue';
 import AudioAlertCondition from './AudioAlertCondition.vue';
@@ -43,7 +11,14 @@ export default {
     AudioAlertTone,
     AudioAlertCondition,
   },
-  mixins: [alertMixin, configMixin, uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       audioAlert: '',
@@ -53,12 +28,6 @@ export default {
       audioAlertConditions: [],
     };
   },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      uiSettings: 'getUISettings',
-    }),
-  },
   watch: {
     uiSettings(value) {
       this.notificationUISettings(value);
@@ -105,7 +74,7 @@ export default {
       this.updateUISettings({
         enable_audio_alerts: this.audioAlert,
       });
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
     handleAudioAlertConditions(id, value) {
       if (id === 'tab_is_inactive') {
@@ -117,12 +86,42 @@ export default {
           alert_if_unread_assigned_conversation_exist: value,
         });
       }
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
     handleAudioToneChange(value) {
       this.updateUISettings({ notification_tone: value });
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
   },
 };
 </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 0c2fa9e7863af..b6c93a12615ea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -1,74 +1,17 @@
-<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 { required, minLength } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import FormButton from 'v3/components/Form/Button.vue';
+
 export default {
   components: {
     FormButton,
   },
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       currentPassword: '',
@@ -106,15 +49,15 @@ export default {
       return (
         !this.currentPassword ||
         !this.passwordConfirmation ||
-        !this.$v.passwordConfirmation.isEqPassword
+        !this.v$.passwordConfirmation.isEqPassword
       );
     },
   },
   methods: {
     async changePassword() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }
       let alertMessage = this.$t('PROFILE_SETTINGS.PASSWORD_UPDATE_SUCCESS');
@@ -129,9 +72,70 @@ export default {
           parseAPIErrorResponse(error) ||
           this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
       } finally {
-        this.showAlert(alertMessage);
+        useAlert(alertMessage);
       }
     },
   },
 };
 </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 35cbbeb7bea4d..540b405d100c0 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 45ec109aaabf6..1f37a1355d829 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -1,95 +1,10 @@
-<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(uiSettings, 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 globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import uiSettingsMixin, {
-  isEditorHotKeyEnabled,
-} from 'dashboard/mixins/uiSettings';
-import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
@@ -112,7 +27,17 @@ export default {
     AudioNotifications,
     AccessToken,
   },
-  mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
+  mixins: [globalConfigMixin],
+  setup() {
+    const { uiSettings, updateUISettings, isEditorHotKeyEnabled } =
+      useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+      isEditorHotKeyEnabled,
+    };
+  },
   data() {
     return {
       avatarFile: '',
@@ -168,7 +93,6 @@ export default {
       this.displayName = this.currentUser.display_name;
       this.messageSignature = this.currentUser.message_signature;
     },
-    isEditorHotKeyEnabled,
     async dispatchUpdate(payload, successMessage, errorMessage) {
       let alertMessage = '';
       try {
@@ -183,7 +107,7 @@ export default {
 
         return false; // return the value so that the status can be known
       } finally {
-        this.showAlert(alertMessage);
+        useAlert(alertMessage);
       }
     },
     async updateProfile(userAttributes) {
@@ -230,9 +154,9 @@ export default {
         await this.$store.dispatch('deleteAvatar');
         this.avatarUrl = '';
         this.avatarFile = '';
-        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_SUCCESS'));
+        useAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_SUCCESS'));
       } catch (error) {
-        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_FAILED'));
+        useAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_FAILED'));
       }
     },
     toggleHotKey(key) {
@@ -240,14 +164,98 @@ export default {
         hotKey.key === key ? { ...hotKey, active: !hotKey.active } : hotKey
       );
       this.updateUISettings({ editor_message_key: key });
-      this.showAlert(
-        this.$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.UPDATE_SUCCESS')
-      );
+      useAlert(this.$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.UPDATE_SUCCESS'));
     },
     async onCopyToken(value) {
       await copyTextToClipboard(value);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
   },
 };
 </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
+      v-if="!globalConfig.disableUserProfileUpdate"
+      :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')"
+    >
+      <ChangePassword />
+    </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 a86b4fa5c2d8f..2d149755ce61c 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 feb180014f169..4cd5120556304 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 986ff9aca21e4..8e49a43660e3e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -1,140 +1,6 @@
-<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 alertMixin from 'shared/mixins/alertMixin';
-import configMixin from 'shared/mixins/configMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useAlert } from 'dashboard/composables';
 import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
 import CheckBox from 'v3/components/Form/CheckBox.vue';
 import {
@@ -152,7 +18,6 @@ export default {
     FormSwitch,
     CheckBox,
   },
-  mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
     return {
       selectedEmailFlags: [],
@@ -167,7 +32,6 @@ export default {
       accountId: 'getCurrentAccountId',
       emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
       pushFlags: 'userNotificationSettings/getSelectedPushFlags',
-      uiSettings: 'getUISettings',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     hasPushAPISupport() {
@@ -237,35 +101,10 @@ export default {
           selectedEmailFlags: this.selectedEmailFlags,
           selectedPushFlags: this.selectedPushFlags,
         });
-        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
       } catch (error) {
-        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
-      }
-    },
-
-    handleAudioInput(e) {
-      this.enableAudioAlerts = e.target.value;
-      this.updateUISettings({
-        enable_audio_alerts: this.enableAudioAlerts,
-      });
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioAlertConditions(e) {
-      let condition = e.target.value;
-      if (condition === 'tab_is_inactive') {
-        this.updateUISettings({
-          always_play_audio_alert: !e.target.checked,
-        });
-      } else if (condition === 'conversations_are_read') {
-        this.updateUISettings({
-          alert_if_unread_assigned_conversation_exist: e.target.checked,
-        });
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
       }
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioToneChange(value) {
-      this.updateUISettings({ notification_tone: value });
-      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
     handleInput(type, id) {
       if (type === 'email') {
@@ -292,3 +131,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 1a0fb2eae7830..4b7580d3e8035 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -1,60 +1,12 @@
-<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';
-import { required, minLength, email } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 export default {
   components: {
     FormButton,
   },
-  mixins: [alertMixin],
   props: {
     name: {
       type: String,
@@ -73,6 +25,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       userName: this.name,
@@ -119,12 +74,12 @@ export default {
   },
   methods: {
     async updateUser() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }
-      this.$emit('update-user', {
+      this.$emit('updateUser', {
         name: this.userName,
         displayName: this.userDisplayName,
         email: this.userEmail,
@@ -133,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 d4ab08bc1c90e..87ac25efa0369 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 f0931afdc5c3f..90c72595248e6 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 68911721b150f..7a7374994ee71 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 a75051aaf4ab0..4927755421bdf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -1,22 +1,5 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <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';
 import { GROUP_BY_FILTER } from './constants';
@@ -45,9 +28,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      accountReport: 'getAccountReports',
-    }),
     requestPayload() {
       return {
         from: this.from,
@@ -64,7 +44,7 @@ export default {
       try {
         this.$store.dispatch('fetchBotSummary', this.getRequestPayload());
       } catch {
-        this.showAlert(this.$t('REPORT.SUMMARY_FETCHING_FAILED'));
+        useAlert(this.$t('REPORT.SUMMARY_FETCHING_FAILED'));
       }
     },
     fetchChartData() {
@@ -75,7 +55,7 @@ export default {
             ...this.getRequestPayload(),
           });
         } catch {
-          this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
+          useAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
         }
       });
     },
@@ -104,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 e16da918239f4..df2ab7d7a912c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -1,34 +1,12 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <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';
 import CsatMetrics from './components/CsatMetrics.vue';
 import CsatTable from './components/CsatTable.vue';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
-import alertMixin from '../../../../../shared/mixins/alertMixin';
 
 export default {
   name: 'CsatResponses',
@@ -37,7 +15,6 @@ export default {
     CsatTable,
     ReportFilterSelector,
   },
-  mixins: [alertMixin],
   data() {
     return {
       pageIndex: 1,
@@ -77,7 +54,7 @@ export default {
         this.$store.dispatch('csat/getMetrics', this.requestPayload);
         this.getResponses();
       } catch {
-        this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
+        useAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
       }
     },
     getResponses() {
@@ -94,7 +71,7 @@ export default {
           ...this.requestPayload,
         });
       } catch (error) {
-        this.showAlert(this.$t('REPORT.CSAT_REPORTS.DOWNLOAD_FAILED'));
+        useAlert(this.$t('REPORT.CSAT_REPORTS.DOWNLOAD_FAILED'));
       }
     },
     onPageNumberChange(pageIndex) {
@@ -129,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 f055a9a4fd2e6..96d573829a2bc 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 528053c575f60..1f96b161ff661 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,30 +1,10 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <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';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import reportMixin from 'dashboard/mixins/reportMixin';
-import alertMixin from 'shared/mixins/alertMixin';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
 
@@ -44,7 +24,7 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
-  mixins: [reportMixin, alertMixin],
+  mixins: [reportMixin],
   data() {
     return {
       from: 0,
@@ -53,12 +33,6 @@ export default {
       businessHours: false,
     };
   },
-  computed: {
-    ...mapGetters({
-      accountSummary: 'getAccountSummary',
-      accountReport: 'getAccountReports',
-    }),
-  },
   methods: {
     fetchAllData() {
       this.fetchAccountSummary();
@@ -68,7 +42,7 @@ export default {
       try {
         this.$store.dispatch('fetchAccountSummary', this.getRequestPayload());
       } catch {
-        this.showAlert(this.$t('REPORT.SUMMARY_FETCHING_FAILED'));
+        useAlert(this.$t('REPORT.SUMMARY_FETCHING_FAILED'));
       }
     },
     fetchChartData() {
@@ -87,7 +61,7 @@ export default {
             ...this.getRequestPayload(),
           });
         } catch {
-          this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
+          useAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
         }
       });
     },
@@ -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 77a010846afb3..d3792bd791ea1 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 ae709db418ef4..8f59f2229b179 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 273f814b702e5..f90c3730ca2d8 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 a9958d9053157..c2065babf0fe7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,36 +1,8 @@
-<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';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
 export default {
@@ -40,7 +12,6 @@ export default {
     SLATable,
     SLAReportFilters,
   },
-  mixins: [alertMixin],
   data() {
     return {
       pageNumber: 1,
@@ -98,9 +69,38 @@ export default {
           ...this.activeFilter,
         });
       } catch (error) {
-        this.showAlert(this.$t('SLA_REPORTS.DOWNLOAD_FAILED'));
+        useAlert(this.$t('SLA_REPORTS.DOWNLOAD_FAILED'));
       }
     },
   },
 };
 </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 d920404c1fc6b..523186b8daafc 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 46227f9459401..fe8e30ba83256 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 4faf4de2be372..26f68ea33fa6c 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 77106e8d50eb6..0f07c773ce1f8 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 1e89f06ef033a..22c570cc0f1a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -1,40 +1,15 @@
-<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';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import { mapGetters } from 'vuex';
-import timeMixin from 'dashboard/mixins/time';
-import rtlMixin from 'shared/mixins/rtlMixin';
+import { messageStamp, dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     VeTable,
     VePagination,
   },
-  mixins: [timeMixin, rtlMixin],
   props: {
     pageIndex: {
       type: Number,
@@ -43,7 +18,7 @@ export default {
   },
   computed: {
     ...mapGetters({
-      uiFlags: 'csat/getUIFlags',
+      isRTL: 'accounts/isRTL',
       csatResponses: 'csat/getCSATResponses',
       metrics: 'csat/getMetrics',
     }),
@@ -53,7 +28,7 @@ export default {
           field: 'contact',
           key: 'contact',
           title: this.$t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 200,
           renderBodyCell: ({ row }) => {
             if (row.contact) {
@@ -72,7 +47,7 @@ export default {
           field: 'assignedAgent',
           key: 'assignedAgent',
           title: this.$t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 200,
           renderBodyCell: ({ row }) => {
             if (row.assignedAgent) {
@@ -102,14 +77,14 @@ export default {
           field: 'feedbackText',
           key: 'feedbackText',
           title: this.$t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 400,
         },
         {
           field: 'conversationId',
           key: 'conversationId',
           title: '',
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 100,
           renderBodyCell: ({ row }) => {
             const routerParams = {
@@ -137,18 +112,43 @@ export default {
         rating: response.rating,
         feedbackText: response.feedback_message || '---',
         conversationId: response.conversation_id,
-        createdAgo: this.dynamicTime(response.created_at),
-        createdAt: this.messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
+        createdAgo: dynamicTime(response.created_at),
+        createdAt: messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
       }));
     },
   },
   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 6312419a08f41..0e7bfd4c3cc01 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 4baecbb48715a..f671ee14cf855 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 a360c5e8d9d15..7dd2119af3735 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 b98283ced9899..4d1cc340f953a 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 652cb06a65667..1119cacd6aadf 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 d3287950774d5..a1f103306abfe 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,3 +1,29 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersLabels',
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'labels/getLabels',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('labels/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('labelsFilterSelection', this.selectedOption);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="multiselect-wrap--small">
     <multiselect
@@ -15,7 +41,7 @@
         <div class="flex items-center gap-2">
           <div
             :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5"
+            class="w-5 h-5 rounded-full"
           />
           <span class="reports-option__desc">
             <span class="my-0 text-slate-800 dark:text-slate-75">
@@ -28,7 +54,7 @@
         <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"
+            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">
@@ -40,28 +66,3 @@
     </multiselect>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  name: 'ReportsFiltersLabels',
-  data() {
-    return {
-      selectedOption: null,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'labels/getLabels',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('labels/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('labels-filter-selection', this.selectedOption);
-    },
-  },
-};
-</script>
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 49d6689ae66e5..dc09b07448cf5 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 f834a9e719cbd..dc1a0ced59369 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 623c1502680a6..bf98c5d440787 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 c35bdb06126fd..e58d90a59b2b5 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 6f28dabb54b67..f31ddcd597526 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 88eae0541bbe9..263390356d95b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -1,11 +1,153 @@
+<script>
+import endOfDay from 'date-fns/endOfDay';
+import getUnixTime from 'date-fns/getUnixTime';
+import startOfDay from 'date-fns/startOfDay';
+import subDays from 'date-fns/subDays';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+
+import { GROUP_BY_FILTER } from '../constants';
+const CUSTOM_DATE_RANGE_ID = 5;
+
+export default {
+  components: {
+    WootDateRangePicker,
+    Thumbnail,
+  },
+  props: {
+    filterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    groupByFilterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: 'agent',
+    },
+    selectedGroupByFilter: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      currentSelectedFilter: null,
+      currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
+      dateRange: this.$t('REPORT.DATE_RANGE'),
+      customDateRange: [new Date(), new Date()],
+      currentSelectedGroupByFilter: null,
+      businessHoursSelected: false,
+    };
+  },
+  computed: {
+    isDateRangeSelected() {
+      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return this.toCustomDate(this.customDateRange[1]);
+      }
+      return this.toCustomDate(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[0]);
+      }
+      const dateRange = {
+        0: 6,
+        1: 29,
+        2: 89,
+        3: 179,
+        4: 364,
+      };
+      const diff = dateRange[this.currentDateRangeSelection.id];
+      const fromDate = subDays(new Date(), diff);
+      return this.fromCustomDate(fromDate);
+    },
+    multiselectLabel() {
+      const typeLabels = {
+        agent: this.$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL'),
+        label: this.$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL'),
+        inbox: this.$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL'),
+        team: this.$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL'),
+      };
+      return typeLabels[this.type] || this.$t('FORMS.MULTISELECT.SELECT_ONE');
+    },
+    groupBy() {
+      if (this.isDateRangeSelected) {
+        return GROUP_BY_FILTER[4].period;
+      }
+      const groupRange = {
+        0: GROUP_BY_FILTER[1].period,
+        1: GROUP_BY_FILTER[2].period,
+        2: GROUP_BY_FILTER[3].period,
+        3: GROUP_BY_FILTER[3].period,
+        4: GROUP_BY_FILTER[4].period,
+      };
+      return groupRange[this.currentDateRangeSelection.id];
+    },
+    notLast7Days() {
+      return this.groupBy !== GROUP_BY_FILTER[1].period;
+    },
+  },
+  watch: {
+    filterItemsList(val) {
+      this.currentSelectedFilter = val[0];
+      this.changeFilterSelection();
+    },
+    groupByFilterItemsList() {
+      this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
+    },
+    businessHoursSelected() {
+      this.$emit('businessHoursToggle', this.businessHoursSelected);
+    },
+  },
+  mounted() {
+    this.onDateRangeChange();
+  },
+  methods: {
+    onDateRangeChange() {
+      this.$emit('dateRangeChange', {
+        from: this.from,
+        to: this.to,
+        groupBy: this.groupBy,
+      });
+    },
+    fromCustomDate(date) {
+      return getUnixTime(startOfDay(date));
+    },
+    toCustomDate(date) {
+      return getUnixTime(endOfDay(date));
+    },
+    changeDateSelection(selectedRange) {
+      this.currentDateRangeSelection = selectedRange;
+      this.onDateRangeChange();
+    },
+    changeFilterSelection() {
+      this.$emit('filterChange', this.currentSelectedFilter);
+    },
+    onChange(value) {
+      this.customDateRange = value;
+      this.onDateRangeChange();
+    },
+    changeGroupByFilterSelection() {
+      this.$emit('groupByFilterChange', this.currentSelectedGroupByFilter);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col md:flex-row">
-    <div class="flex items-center w-full 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="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
         </p>
         <multiselect
@@ -20,7 +162,7 @@
         >
           <template slot="singleLabel" slot-scope="props">
             <div class="flex items-center gap-2">
-              <thumbnail
+              <Thumbnail
                 :src="props.option.thumbnail"
                 :status="props.option.availability_status"
                 :username="props.option.name"
@@ -35,7 +177,7 @@
           </template>
           <template slot="option" slot-scope="props">
             <div class="flex items-center gap-2">
-              <thumbnail
+              <Thumbnail
                 :src="props.option.thumbnail"
                 :status="props.option.availability_status"
                 :username="props.option.name"
@@ -52,7 +194,7 @@
         v-else-if="type === 'label'"
         class="md:w-[240px] w-full multiselect-wrap--small"
       >
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
         </p>
         <multiselect
@@ -66,10 +208,10 @@
           @input="changeFilterSelection"
         >
           <template slot="singleLabel" slot-scope="props">
-            <div class="flex gap-2 items-center">
+            <div class="flex items-center gap-2">
               <div
                 :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5"
+                class="w-5 h-5 rounded-full"
               />
               <span class="reports-option__desc">
                 <span class="my-0 text-slate-800 dark:text-slate-75">
@@ -82,7 +224,7 @@
             <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"
+                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">
@@ -94,7 +236,7 @@
         </multiselect>
       </div>
       <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           <template v-if="type === 'inbox'">
             {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
           </template>
@@ -121,7 +263,7 @@
         />
       </div>
       <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('REPORT.DURATION_FILTER_LABEL') }}
         </p>
         <multiselect
@@ -139,10 +281,10 @@
         />
       </div>
       <div v-if="isDateRangeSelected" class="">
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
         </p>
-        <woot-date-range-picker
+        <WootDateRangePicker
           show-range
           :value="customDateRange"
           :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
@@ -154,7 +296,7 @@
         v-if="notLast7Days"
         class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
       >
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
         </p>
         <multiselect
@@ -170,7 +312,7 @@
       </div>
     </div>
     <div class="flex items-center my-2">
-      <span class="text-sm mx-2 whitespace-nowrap">
+      <span class="mx-2 text-sm whitespace-nowrap">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
@@ -179,144 +321,3 @@
     </div>
   </div>
 </template>
-<script>
-import endOfDay from 'date-fns/endOfDay';
-import getUnixTime from 'date-fns/getUnixTime';
-import startOfDay from 'date-fns/startOfDay';
-import subDays from 'date-fns/subDays';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-
-import { GROUP_BY_FILTER } from '../constants';
-const CUSTOM_DATE_RANGE_ID = 5;
-
-export default {
-  components: {
-    WootDateRangePicker,
-    Thumbnail,
-  },
-  props: {
-    filterItemsList: {
-      type: Array,
-      default: () => [],
-    },
-    groupByFilterItemsList: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: 'agent',
-    },
-    selectedGroupByFilter: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      currentSelectedFilter: null,
-      currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
-      dateRange: this.$t('REPORT.DATE_RANGE'),
-      customDateRange: [new Date(), new Date()],
-      currentSelectedGroupByFilter: null,
-      businessHoursSelected: false,
-    };
-  },
-  computed: {
-    isDateRangeSelected() {
-      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
-    },
-    to() {
-      if (this.isDateRangeSelected) {
-        return this.toCustomDate(this.customDateRange[1]);
-      }
-      return this.toCustomDate(new Date());
-    },
-    from() {
-      if (this.isDateRangeSelected) {
-        return this.fromCustomDate(this.customDateRange[0]);
-      }
-      const dateRange = {
-        0: 6,
-        1: 29,
-        2: 89,
-        3: 179,
-        4: 364,
-      };
-      const diff = dateRange[this.currentDateRangeSelection.id];
-      const fromDate = subDays(new Date(), diff);
-      return this.fromCustomDate(fromDate);
-    },
-    multiselectLabel() {
-      const typeLabels = {
-        agent: this.$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL'),
-        label: this.$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL'),
-        inbox: this.$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL'),
-        team: this.$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL'),
-      };
-      return typeLabels[this.type] || this.$t('FORMS.MULTISELECT.SELECT_ONE');
-    },
-    groupBy() {
-      if (this.isDateRangeSelected) {
-        return GROUP_BY_FILTER[4].period;
-      }
-      const groupRange = {
-        0: GROUP_BY_FILTER[1].period,
-        1: GROUP_BY_FILTER[2].period,
-        2: GROUP_BY_FILTER[3].period,
-        3: GROUP_BY_FILTER[3].period,
-        4: GROUP_BY_FILTER[4].period,
-      };
-      return groupRange[this.currentDateRangeSelection.id];
-    },
-    notLast7Days() {
-      return this.groupBy !== GROUP_BY_FILTER[1].period;
-    },
-  },
-  watch: {
-    filterItemsList(val) {
-      this.currentSelectedFilter = val[0];
-      this.changeFilterSelection();
-    },
-    groupByFilterItemsList() {
-      this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
-    },
-    businessHoursSelected() {
-      this.$emit('business-hours-toggle', this.businessHoursSelected);
-    },
-  },
-  mounted() {
-    this.onDateRangeChange();
-  },
-  methods: {
-    onDateRangeChange() {
-      this.$emit('date-range-change', {
-        from: this.from,
-        to: this.to,
-        groupBy: this.groupBy,
-      });
-    },
-    fromCustomDate(date) {
-      return getUnixTime(startOfDay(date));
-    },
-    toCustomDate(date) {
-      return getUnixTime(endOfDay(date));
-    },
-    changeDateSelection(selectedRange) {
-      this.currentDateRangeSelection = selectedRange;
-      this.onDateRangeChange();
-    },
-    changeFilterSelection() {
-      this.$emit('filter-change', this.currentSelectedFilter);
-    },
-    onChange(value) {
-      this.customDateRange = value;
-      this.onDateRangeChange();
-    },
-    changeGroupByFilterSelection() {
-      this.$emit('group-by-filter-change', this.currentSelectedGroupByFilter);
-    },
-  },
-};
-</script>
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 2369e3330aabf..44f512d067d27 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 4bb34f92506e6..ad37910cb4756 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 6343253933075..6a4bafc2ec547 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 5c598b4032da5..9f638f3ac8bb2 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 16fbbcf40df11..b9a14962419d5 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 129265cdf5b30..a85dcffbf6ba5 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
@@ -1,8 +1,9 @@
 <script setup>
+import { computed } from 'vue';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
 import SLAViewDetails from './SLAViewDetails.vue';
-defineProps({
+const props = defineProps({
   slaName: {
     type: String,
     required: true,
@@ -20,11 +21,17 @@ defineProps({
     default: () => [],
   },
 });
+
+const conversationLabels = computed(() => {
+  return props.conversation.labels
+    ? props.conversation.labels.split(',').map(item => item.trim())
+    : [];
+});
 </script>
 
 <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,14 +39,16 @@ 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"
+        :conversation-labels="conversationLabels"
       />
     </div>
     <div
@@ -47,8 +56,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 61ac3056f8c59..542ba78e6e905 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 be40349fe3809..ff84c2f1cea8b 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 c62857872786a..2d5e52462a5fa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,29 +1,5 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <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';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
@@ -121,7 +97,7 @@ export default {
             businessHours,
           });
         } catch {
-          this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
+          useAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
         }
       });
     },
@@ -203,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 4fc7fdbf654b2..ce20c45824d13 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,38 +1,8 @@
-<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 { mapGetters } from 'vuex';
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import rtlMixin from 'shared/mixins/rtlMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
@@ -43,7 +13,6 @@ export default {
     VeTable,
     VePagination,
   },
-  mixins: [rtlMixin],
   props: {
     agents: {
       type: Array,
@@ -63,6 +32,9 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      isRTL: 'accounts/isRTL',
+    }),
     tableData() {
       return this.agentMetrics
         .filter(agentMetric => this.getAgentInformation(agentMetric.id))
@@ -87,7 +59,7 @@ export default {
             'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.AGENT'
           ),
           fixed: 'left',
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 25,
           renderBodyCell: ({ row }) => (
             <div class="row-user-block">
@@ -98,7 +70,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>
@@ -112,7 +84,7 @@ export default {
           title: this.$t(
             'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.OPEN'
           ),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 10,
         },
         {
@@ -121,7 +93,7 @@ export default {
           title: this.$t(
             'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.UNATTENDED'
           ),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
           width: 10,
         },
       ];
@@ -129,7 +101,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 +110,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 d40555c9d30d4..50f9cd0bad799 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 2964bf24d797b..56b4fe186a17c 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 bbe93beb79185..f25f57742dfb4 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 83e4b222cee6f..50a87e979a99c 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 03fadac5f43f4..cf5fe6ebdad39 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 5b650cd995f22..870aa5a5054a1 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 ecfec4e1ef451..aa1aba6371673 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 16a4f49b6a363..4a4ac00c31a92 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/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index 2829ed1d9469a..229fe7e3a8391 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -9,7 +9,6 @@ import billing from './billing/billing.routes';
 import campaigns from './campaigns/campaigns.routes';
 import canned from './canned/canned.routes';
 import inbox from './inbox/inbox.routes';
-import integrationapps from './integrationapps/integrations.routes';
 import integrations from './integrations/integrations.routes';
 import labels from './labels/labels.routes';
 import macros from './macros/macros.routes';
@@ -44,7 +43,6 @@ export default {
     ...campaigns.routes,
     ...canned.routes,
     ...inbox.routes,
-    ...integrationapps.routes,
     ...integrations.routes,
     ...labels.routes,
     ...macros.routes,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index 772ec4bcd342a..5b0158af20cbd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -1,35 +1,11 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <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 alertMixin from 'shared/mixins/alertMixin';
-import validationMixin from './validationMixin';
-import { mapGetters } from 'vuex';
-import validations from './validations';
+import { useAlert } from 'dashboard/composables';
 import SlaForm from './SlaForm.vue';
 
 export default {
   components: {
     SlaForm,
   },
-  mixins: [alertMixin, validationMixin],
-  validations,
-  computed: {
-    ...mapGetters({
-      uiFlags: 'sla/getUIFlags',
-    }),
-  },
   methods: {
     onClose() {
       this.$emit('close');
@@ -37,14 +13,28 @@ export default {
     async addSLA(payload) {
       try {
         await this.$store.dispatch('sla/create', payload);
-        this.showAlert(this.$t('SLA.ADD.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('SLA.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
         const errorMessage =
           error.message || this.$t('SLA.ADD.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       }
     },
   },
 };
 </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 21d2f5257e87f..4785ddb3b7c14 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';
@@ -63,8 +9,7 @@ import SLAPaywallEnterprise from './components/SLAPaywallEnterprise.vue';
 
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
-import alertMixin from 'shared/mixins/alertMixin';
-import configMixin from 'shared/mixins/configMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
   components: {
@@ -76,7 +21,6 @@ export default {
     SLAListItemLoading,
     SLAPaywallEnterprise,
   },
-  mixins: [alertMixin, configMixin],
   data() {
     return {
       loading: {},
@@ -87,7 +31,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      globalConfig: 'globalConfig/get',
       isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       records: 'sla/getSLA',
@@ -140,10 +83,10 @@ export default {
       this.$store
         .dispatch('sla/delete', id)
         .then(() => {
-          this.showAlert(this.$t('SLA.DELETE.API.SUCCESS_MESSAGE'));
+          useAlert(this.$t('SLA.DELETE.API.SUCCESS_MESSAGE'));
         })
         .catch(() => {
-          this.showAlert(this.$t('SLA.DELETE.API.ERROR_MESSAGE'));
+          useAlert(this.$t('SLA.DELETE.API.ERROR_MESSAGE'));
         })
         .finally(() => {
           this.loading[this.selectedResponse.id] = false;
@@ -167,3 +110,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 bbe0ac7fe6a46..e559e96cc8a7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -1,84 +1,14 @@
-<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="getSlaNameErrorMessage"
-        @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';
-import validationMixin from './validationMixin';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     SlaTimeInput,
   },
-  mixins: [validationMixin],
   props: {
     selectedResponse: {
       type: Object,
@@ -89,6 +19,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -125,11 +58,22 @@ export default {
     }),
     isSubmitDisabled() {
       return (
-        this.$v.name.$invalid ||
+        this.v$.name.$invalid ||
         this.isSlaTimeInputsInvalid ||
         this.uiFlags.isUpdating
       );
     },
+    slaNameErrorMessage() {
+      let errorMessage = '';
+      if (this.v$.name.$error) {
+        if (!this.v$.name.required) {
+          errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
+        } else if (!this.v$.name.minLength) {
+          errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
+        }
+      }
+      return errorMessage;
+    },
   },
   mounted() {
     if (this.selectedResponse) this.setFormValues();
@@ -207,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 d8c7594c2eae0..b1fc7a342fe6f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -1,44 +1,8 @@
-<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="getThresholdTimeErrorMessage"
-      @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 validationMixin from './validationMixin';
 import validations from './validations';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
-  mixins: [validationMixin],
   props: {
     threshold: {
       type: Number,
@@ -57,6 +21,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       thresholdTime: this.threshold || '',
@@ -69,6 +36,19 @@ export default {
     };
   },
   validations,
+  computed: {
+    thresholdTimeErrorMessage() {
+      let errorMessage = '';
+      if (this.v$.thresholdTime.$error) {
+        if (!this.v$.thresholdTime.numeric || !this.v$.thresholdTime.minValue) {
+          errorMessage = this.$t(
+            'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
+          );
+        }
+      }
+      return errorMessage;
+    },
+  },
   watch: {
     threshold: {
       immediate: true,
@@ -90,11 +70,46 @@ export default {
       this.$emit('unit', this.thresholdUnitValue);
     },
     onThresholdTimeChange() {
-      this.$v.thresholdTime.$touch();
-      const isInvalid = this.$v.thresholdTime.$invalid;
+      this.v$.thresholdTime.$touch();
+      const isInvalid = this.v$.thresholdTime.$invalid;
       this.$emit('isInValid', isInvalid);
       this.$emit('input', Number(this.thresholdTime));
     },
   },
 };
 </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 eb8bfd65a07a7..2711658ade28c 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 8790fe2a87f33..3f8cad8376a6a 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 cfb40dbdc7f7b..b969a8c37aa47 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 498b5c8560fd9..36d954df1663a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
@@ -7,14 +7,16 @@ defineProps({
     default: true,
   },
 });
+
+defineEmits(['click']);
 </script>
+
 <template>
-  <base-settings-header
+  <BaseSettingsHeader
     :title="$t('SLA.HEADER')"
     :description="$t('SLA.DESCRIPTION')"
     :link-text="$t('SLA.LEARN_MORE')"
-    href="/"
-    icon-name="document-list-clock"
+    feature-name="sla"
   >
     <template v-if="showActions" #actions>
       <woot-button
@@ -26,5 +28,5 @@ defineProps({
         {{ $t('SLA.ADD_ACTION') }}
       </woot-button>
     </template>
-  </base-settings-header>
+  </BaseSettingsHeader>
 </template>
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 08e66dbfec406..b318478fde40a 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 9041d6a2dcaf6..860ded9758030 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 6c69baa4c990f..6c3ac5368a3ef 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 a2caaa4e5d4fa..e7e986e7b9674 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/sla/specs/validationMixin.spec.js b/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js
deleted file mode 100644
index 2266bdccdf3d4..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
-
-import validationMixin from '../validationMixin';
-import validations from '../validations';
-import i18n from 'dashboard/i18n';
-
-const localVue = createLocalVue();
-localVue.use(VueI18n);
-localVue.use(Vuelidate);
-
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-
-const TestComponent = {
-  render() {},
-  mixins: [validationMixin],
-  validations,
-};
-
-describe('validationMixin', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallowMount(TestComponent, {
-      localVue,
-      i18n: i18nConfig,
-      data() {
-        return {
-          name: '',
-          thresholdTime: '',
-        };
-      },
-    });
-  });
-
-  it('should not return required error message if name is empty but not touched', () => {
-    wrapper.setData({ name: '' });
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe('');
-  });
-
-  it('should return empty error message if name is valid', () => {
-    wrapper.setData({ name: 'ValidName' });
-    wrapper.vm.$v.name.$touch();
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe('');
-  });
-
-  it('should return required error message if name is empty', () => {
-    wrapper.setData({ name: '' });
-    wrapper.vm.$v.name.$touch();
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.NAME.REQUIRED_ERROR')
-    );
-  });
-
-  it('should return minimum length error message if name is too short', () => {
-    wrapper.setData({ name: 'a' });
-    wrapper.vm.$v.name.$touch();
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR')
-    );
-  });
-
-  it('should accept valid threshold values', () => {
-    wrapper.setData({ thresholdTime: 10 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(wrapper.vm.$t(''));
-
-    wrapper.setData({ thresholdTime: 10.5 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(wrapper.vm.$t(''));
-  });
-
-  it('should not return invalid format error message if thresholdTime is empty but not touched', () => {
-    wrapper.setData({ thresholdTime: '' });
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe('');
-  });
-
-  it('should return invalid format error message if thresholdTime has an invalid format', () => {
-    wrapper.setData({ thresholdTime: 'fsdfsdfsdfsd' });
-    wrapper.vm.$v.thresholdTime.$touch();
-
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
-    );
-  });
-
-  it('should reject invalid threshold values', () => {
-    wrapper.setData({ thresholdTime: 0 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
-    );
-  });
-
-  it('should reject invalid threshold values', () => {
-    wrapper.setData({ thresholdTime: -1 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
-    );
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
deleted file mode 100644
index d086c6072b167..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default {
-  computed: {
-    getSlaNameErrorMessage() {
-      let errorMessage = '';
-      if (this.$v.name.$error) {
-        if (!this.$v.name.required) {
-          errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
-        } else if (!this.$v.name.minLength) {
-          errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
-        }
-      }
-      return errorMessage;
-    },
-    getThresholdTimeErrorMessage() {
-      let errorMessage = '';
-      if (this.$v.thresholdTime.$error) {
-        if (!this.$v.thresholdTime.numeric || !this.$v.thresholdTime.minValue) {
-          errorMessage = this.$t(
-            'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
-          );
-        }
-      }
-      return errorMessage;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js
index 024aa6636d3e6..d530615ea1ef9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js
@@ -1,9 +1,4 @@
-import {
-  required,
-  minLength,
-  minValue,
-  decimal,
-} from 'vuelidate/lib/validators';
+import { required, minLength, minValue, decimal } from '@vuelidate/validators';
 
 export default {
   name: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index c3dbdfd421752..a53479dc901b4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -1,3 +1,73 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    agentList: {
+      type: Array,
+      default: () => [],
+    },
+    selectedAgents: {
+      type: Array,
+      default: () => [],
+    },
+    updateSelectedAgents: {
+      type: Function,
+      default: () => {},
+    },
+    isWorking: {
+      type: Boolean,
+      default: false,
+    },
+    submitButtonText: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    selectedAgentCount() {
+      return this.selectedAgents.length;
+    },
+    allAgentsSelected() {
+      return this.selectedAgents.length === this.agentList.length;
+    },
+    disableSubmitButton() {
+      return this.selectedAgentCount === 0;
+    },
+  },
+  methods: {
+    isAgentSelected(agentId) {
+      return this.selectedAgents.includes(agentId);
+    },
+    handleSelectAgent(agentId) {
+      const shouldRemove = this.isAgentSelected(agentId);
+
+      let result = [];
+      if (shouldRemove) {
+        result = this.selectedAgents.filter(item => item !== agentId);
+      } else {
+        result = [...this.selectedAgents, agentId];
+      }
+
+      this.updateSelectedAgents(result);
+    },
+    selectAllAgents() {
+      const result = this.agentList.map(item => item.id);
+      this.updateSelectedAgents(result);
+    },
+    agentRowClass(agentId) {
+      return { 'is-active': this.isAgentSelected(agentId) };
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <div class="add-agents__header" />
@@ -40,7 +110,7 @@
           </td>
           <td>
             <div class="flex items-center gap-2">
-              <thumbnail
+              <Thumbnail
                 :src="agent.thumbnail"
                 size="24px"
                 :username="agent.name"
@@ -75,76 +145,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    agentList: {
-      type: Array,
-      default: () => [],
-    },
-    selectedAgents: {
-      type: Array,
-      default: () => [],
-    },
-    updateSelectedAgents: {
-      type: Function,
-      default: () => {},
-    },
-    isWorking: {
-      type: Boolean,
-      default: false,
-    },
-    submitButtonText: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    selectedAgentCount() {
-      return this.selectedAgents.length;
-    },
-    allAgentsSelected() {
-      return this.selectedAgents.length === this.agentList.length;
-    },
-    disableSubmitButton() {
-      return this.selectedAgentCount === 0;
-    },
-  },
-  methods: {
-    isAgentSelected(agentId) {
-      return this.selectedAgents.includes(agentId);
-    },
-    handleSelectAgent(agentId) {
-      const shouldRemove = this.isAgentSelected(agentId);
-
-      let result = [];
-      if (shouldRemove) {
-        result = this.selectedAgents.filter(item => item !== agentId);
-      } else {
-        result = [...this.selectedAgents, agentId];
-      }
-
-      this.updateSelectedAgents(result);
-    },
-    selectAllAgents() {
-      const result = this.agentList.map(item => item.id);
-      this.updateSelectedAgents(result);
-    },
-    agentRowClass(agentId) {
-      return { 'is-active': this.isAgentSelected(agentId) };
-    },
-  },
-};
-</script>
-
 <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 6493f20f5c405..5fe7ae53112f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -1,56 +1,17 @@
-<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="mx-0 flex flex-wrap 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';
 
-import alertMixin from 'shared/mixins/alertMixin';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     PageHeader,
     AgentSelector,
   },
-  mixins: [alertMixin],
-  props: {
-    team: {
-      type: Object,
-      default: () => {},
-    },
-  },
   validations: {
     selectedAgents: {
       isEmpty() {
@@ -59,6 +20,10 @@ export default {
     },
   },
 
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
   data() {
     return {
       selectedAgents: [],
@@ -90,7 +55,7 @@ export default {
 
   methods: {
     updateSelectedAgents(newAgentList) {
-      this.$v.selectedAgents.$touch();
+      this.v$.selectedAgents.$touch();
       this.selectedAgents = [...newAgentList];
     },
     selectAllAgents() {
@@ -114,10 +79,43 @@ export default {
         });
         this.$store.dispatch('teams/get');
       } catch (error) {
-        this.showAlert(error.message);
+        useAlert(error.message);
       }
       this.isCreating = false;
     },
   },
 };
 </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 38fcf57775076..52e235c4804ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -1,33 +1,14 @@
-<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';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     TeamForm,
     PageHeader,
   },
-  mixins: [alertMixin],
   data() {
     return {
       enabledFeatures: {},
@@ -48,9 +29,27 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('TEAMS_SETTINGS.TEAM_FORM.ERROR_MESSAGE'));
+        useAlert(this.$t('TEAMS_SETTINGS.TEAM_FORM.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"
+  >
+    <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 232c20527390d..ff05352ef855d 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 0b3587bf8fb5a..c22ab0ed49457 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -1,46 +1,10 @@
-<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="mx-0 flex flex-wrap 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 Spinner from 'shared/components/Spinner.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-
 import router from '../../../../index';
+import { useAlert } from 'dashboard/composables';
+import { useVuelidate } from '@vuelidate/core';
+
+import Spinner from 'shared/components/Spinner.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
 
@@ -50,14 +14,6 @@ export default {
     PageHeader,
     AgentSelector,
   },
-  mixins: [alertMixin],
-
-  props: {
-    team: {
-      type: Object,
-      default: () => {},
-    },
-  },
   validations: {
     selectedAgents: {
       isEmpty() {
@@ -65,7 +21,9 @@ export default {
       },
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedAgents: [],
@@ -115,7 +73,7 @@ export default {
 
   methods: {
     updateSelectedAgents(newAgentList) {
-      this.$v.selectedAgents.$touch();
+      this.v$.selectedAgents.$touch();
       this.selectedAgents = [...newAgentList];
     },
     async addAgents() {
@@ -136,10 +94,47 @@ export default {
         });
         this.$store.dispatch('teams/get');
       } catch (error) {
-        this.showAlert(error.message);
+        useAlert(error.message);
       }
       this.isCreating = false;
     },
   },
 };
 </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 1330340ad5174..ebe1e9c969db4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -1,31 +1,10 @@
-<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';
+
 import TeamForm from '../TeamForm.vue';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-
-import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 
 export default {
@@ -34,7 +13,6 @@ export default {
     PageHeader,
     Spinner,
   },
-  mixins: [alertMixin],
   data() {
     return {
       enabledFeatures: {},
@@ -71,9 +49,30 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('TEAMS_SETTINGS.TEAM_FORM.ERROR_MESSAGE'));
+        useAlert(this.$t('TEAMS_SETTINGS.TEAM_FORM.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"
+  >
+    <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 9a4e768b7382d..9364d4b4767e2 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 2fa452935f4fb..b68652314cda9 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 896c7f304a63f..2e2c80b13e38e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -1,70 +1,146 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import { computed, ref } from 'vue';
+
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+const store = useStore();
+const { t } = useI18n();
+const getters = useStoreGetters();
+const teamsList = computed(() => getters['teams/getTeams'].value);
+const uiFlags = computed(() => getters['teams/getUIFlags'].value);
+const { isAdmin } = useAdmin();
+
+const loading = ref({});
+
+const deleteTeam = async ({ id }) => {
+  try {
+    loading.value[id] = true;
+    await store.dispatch('teams/delete', id);
+    useAlert(t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
+  } finally {
+    loading.value[id] = false;
+  }
+};
+
+const showDeletePopup = ref(false);
+const selectedTeam = ref({});
+
+const openDelete = team => {
+  showDeletePopup.value = true;
+  selectedTeam.value = team;
+};
+
+const closeDelete = () => {
+  showDeletePopup.value = false;
+  selectedTeam.value = {};
+};
+
+const confirmDeletion = () => {
+  deleteTeam(selectedTeam.value);
+  closeDelete();
+};
+
+const deleteConfirmText = computed(
+  () => `${t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${selectedTeam.value.name}`
+);
+
+const deleteRejectText = computed(() => t('TEAMS_SETTINGS.DELETE.CONFIRM.NO'));
+
+const confirmDeleteTitle = computed(() =>
+  t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
+    teamName: selectedTeam.value.name,
+  })
+);
+
+const confirmPlaceHolderText = computed(() =>
+  t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
+    teamName: selectedTeam.value.name,
+  })
+);
+</script>
+
 <template>
   <div class="flex-1 overflow-auto">
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full md:w-3/5">
-        <p
-          v-if="!teamsList.length"
-          class="flex h-full items-center flex-col justify-center"
+    <BaseSettingsHeader
+      :title="$t('TEAMS_SETTINGS.HEADER')"
+      :description="$t('TEAMS_SETTINGS.DESCRIPTION')"
+      :link-text="$t('TEAMS_SETTINGS.LEARN_MORE')"
+      feature-name="team_management"
+    >
+      <template #actions>
+        <router-link
+          v-if="isAdmin"
+          :to="{ name: 'settings_teams_new' }"
+          class="button rounded-md primary"
         >
-          {{ $t('TEAMS_SETTINGS.LIST.404') }}
-          <router-link
-            v-if="isAdmin"
-            :to="addAccountScoping('settings/teams/new')"
-          >
+          <fluent-icon icon="add-circle" />
+          <span class="button__content">
             {{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
-          </router-link>
-        </p>
+          </span>
+        </router-link>
+      </template>
+    </BaseSettingsHeader>
+    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+      <woot-loading-state
+        v-if="uiFlags.isFetching"
+        :message="$t('TEAMS_SETTINGS.LOADING')"
+      />
+      <p
+        v-else-if="!teamsList.length"
+        class="flex flex-col items-center justify-center h-full text-base p-8"
+      >
+        {{ $t('TEAMS_SETTINGS.LIST.404') }}
+      </p>
 
-        <table v-if="teamsList.length" class="woot-table">
-          <tbody>
-            <tr v-for="item in teamsList" :key="item.id">
-              <td>
-                <span class="agent-name">{{ item.name }}</span>
-                <p>{{ item.description }}</p>
-              </td>
+      <table
+        v-else
+        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+          <tr v-for="team in teamsList" :key="team.id">
+            <td class="py-4 pr-4">
+              <span class="block font-medium capitalize">{{ team.name }}</span>
+              <p class="mb-0">{{ team.description }}</p>
+            </td>
 
-              <td>
-                <div class="button-wrapper">
-                  <router-link
-                    :to="addAccountScoping(`settings/teams/${item.id}/edit`)"
-                  >
-                    <woot-button
-                      v-if="isAdmin"
-                      v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
-                      variant="smooth"
-                      size="tiny"
-                      color-scheme="secondary"
-                      class-names="grey-btn"
-                      icon="settings"
-                    />
-                  </router-link>
-                  <woot-button
-                    v-if="isAdmin"
-                    v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
-                    variant="smooth"
-                    color-scheme="alert"
-                    size="tiny"
-                    icon="dismiss-circle"
-                    class-names="grey-btn"
-                    :is-loading="loading[item.id]"
-                    @click="openDelete(item)"
-                  />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden md:block w-1/3">
-        <span
-          v-dompurify-html="
-            $t('TEAMS_SETTINGS.SIDEBAR_TXT', {
-              installationName: globalConfig.installationName,
-            })
-          "
-        />
-      </div>
+            <td class="py-4 flex justify-end gap-1">
+              <router-link
+                :to="{
+                  name: 'settings_teams_edit',
+                  params: { teamId: team.id },
+                }"
+              >
+                <woot-button
+                  v-if="isAdmin"
+                  v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  icon="settings"
+                />
+              </router-link>
+              <woot-button
+                v-if="isAdmin"
+                v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
+                variant="smooth"
+                color-scheme="alert"
+                size="tiny"
+                icon="dismiss-circle"
+                class-names="grey-btn"
+                :is-loading="loading[team.id]"
+                @click="openDelete(team)"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
@@ -75,81 +151,8 @@
       :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 adminMixin from '../../../../mixins/isAdmin';
-import accountMixin from '../../../../mixins/account';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: {},
-  mixins: [adminMixin, accountMixin, alertMixin],
-  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);
-        this.showAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(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;
-  justify-content: flex-end;
-  padding-right: var(--space-large);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index 1f1f7ceb39891..66c445fbe844f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -1,48 +1,7 @@
-<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';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -67,6 +26,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     const formData = this.formData || {};
     const {
@@ -84,8 +46,8 @@ export default {
   validations,
   methods: {
     handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.onSubmit({
@@ -97,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/settings/teams/helpers/validations.js b/app/javascript/dashboard/routes/dashboard/settings/teams/helpers/validations.js
index 3f063a0c42de8..dcb6ca648a05a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/helpers/validations.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/helpers/validations.js
@@ -1,4 +1,4 @@
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 
 export default {
   title: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index c968351f49d31..cb0e9678525d6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -1,6 +1,6 @@
-/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../../helper/URLHelper';
 
+const TeamsIndex = () => import('./Index.vue');
 const CreateStepWrap = () => import('./Create/Index.vue');
 const EditStepWrap = () => import('./Edit/Index.vue');
 const CreateTeam = () => import('./Create/CreateTeam.vue');
@@ -9,23 +9,13 @@ const AddAgents = () => import('./Create/AddAgents.vue');
 const EditAgents = () => import('./Edit/EditAgents.vue');
 const FinishSetup = () => import('./FinishSetup.vue');
 const SettingsContent = () => import('../Wrapper.vue');
-const TeamsHome = () => import('./Index.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/teams'),
-      component: SettingsContent,
-      props: params => {
-        const showBackButton = params.name !== 'settings_teams_list';
-        return {
-          headerTitle: 'TEAMS_SETTINGS.HEADER',
-          headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
-          icon: 'people-team',
-          newButtonRoutes: ['settings_teams_new'],
-          showBackButton,
-        };
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
@@ -34,11 +24,26 @@ export default {
         {
           path: 'list',
           name: 'settings_teams_list',
-          component: TeamsHome,
+          component: TeamsIndex,
           meta: {
             permissions: ['administrator'],
           },
         },
+      ],
+    },
+    {
+      path: frontendURL('accounts/:accountId/settings/teams'),
+      component: SettingsContent,
+      props: () => {
+        return {
+          headerTitle: 'TEAMS_SETTINGS.HEADER',
+          headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
+          icon: 'people-team',
+          newButtonRoutes: ['settings_teams_new'],
+          showBackButton: true,
+        };
+      },
+      children: [
         {
           path: 'new',
           component: CreateStepWrap,
diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
index 550a02a23b1fc..c52a32a1f6828 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/dashboard/store/modules/accounts.js b/app/javascript/dashboard/store/modules/accounts.js
index c757b7fcb1fe7..fb2c8b89f0847 100644
--- a/app/javascript/dashboard/store/modules/accounts.js
+++ b/app/javascript/dashboard/store/modules/accounts.js
@@ -4,6 +4,7 @@ import AccountAPI from '../../api/account';
 import { differenceInDays } from 'date-fns';
 import EnterpriseAccountAPI from '../../api/enterprise/account';
 import { throwErrorMessage } from '../utils/api';
+import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
 const findRecordById = ($state, id) =>
   $state.records.find(record => record.id === Number(id)) || {};
@@ -27,6 +28,13 @@ export const getters = {
   getUIFlags($state) {
     return $state.uiFlags;
   },
+  isRTL: ($state, _, rootState) => {
+    const accountId = rootState.route?.params?.accountId;
+    if (!accountId) return false;
+
+    const { locale } = findRecordById($state, Number(accountId));
+    return locale ? getLanguageDirection(locale) : false;
+  },
   isTrialAccount: $state => id => {
     const account = findRecordById($state, id);
     const createdAt = new Date(account.created_at);
diff --git a/app/javascript/dashboard/store/modules/cannedResponse.js b/app/javascript/dashboard/store/modules/cannedResponse.js
index 7b24d11714944..568150392f58f 100644
--- a/app/javascript/dashboard/store/modules/cannedResponse.js
+++ b/app/javascript/dashboard/store/modules/cannedResponse.js
@@ -18,6 +18,15 @@ const getters = {
   getCannedResponses(_state) {
     return _state.records;
   },
+  getSortedCannedResponses(_state) {
+    return sortOrder =>
+      [..._state.records].sort((a, b) => {
+        if (sortOrder === 'asc') {
+          return a.short_code.localeCompare(b.short_code);
+        }
+        return b.short_code.localeCompare(a.short_code);
+      });
+  },
   getUIFlags(_state) {
     return _state.uiFlags;
   },
diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js
index 6a8b94e1e657a..eaf3853725180 100644
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -12,6 +12,7 @@ import {
 } from './helpers/actionHelpers';
 import messageReadActions from './actions/messageReadActions';
 import messageTranslateActions from './actions/messageTranslateActions';
+import * as Sentry from '@sentry/browser';
 
 export const hasMessageFailedWithExternalError = pendingMessage => {
   // This helper is used to check if the message has failed with an external error.
@@ -100,14 +101,24 @@ const actions = {
   },
 
   fetchAllAttachments: async ({ commit }, conversationId) => {
+    let attachments = null;
+
     try {
       const { data } = await ConversationApi.getAllAttachments(conversationId);
+      attachments = data.payload;
+    } catch (error) {
+      // in case of error, log the error and continue
+      Sentry.setContext('Conversation', {
+        id: conversationId,
+      });
+      Sentry.captureException(error);
+    } finally {
+      // we run the commit even if the request fails
+      // this ensures that the `attachment` variable is always present on chat
       commit(types.SET_ALL_ATTACHMENTS, {
         id: conversationId,
-        data: data.payload,
+        data: attachments,
       });
-    } catch (error) {
-      // Handle error
     }
   },
 
diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index 8c20709636eff..1a905c3c51b6c 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -18,9 +18,8 @@ const getters = {
     );
     return selectedChat || {};
   },
-  getSelectedChatAttachments: (_state, _getters) => {
-    const selectedChat = _getters.getSelectedChat;
-    return selectedChat.attachments || [];
+  getSelectedChatAttachments: ({ selectedChatId, attachments }) => {
+    return attachments[selectedChatId] || [];
   },
   getChatListFilters: ({ conversationFilters }) => conversationFilters,
   getLastEmailInSelectedChat: (stage, _getters) => {
diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index 769354ed2e462..b3e39d397ffe4 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -10,6 +10,7 @@ import { emitter } from 'shared/helpers/mitt';
 
 const state = {
   allConversations: [],
+  attachments: {},
   listLoadingStatus: true,
   chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
   chatSortFilter: wootConstants.SORT_BY_TYPE.LATEST,
@@ -48,7 +49,6 @@ export const mutations = {
           allMessagesLoaded: existingConversation.allMessagesLoaded,
           messages: existingConversation.messages,
           dataFetched: existingConversation.dataFetched,
-          attachments: existingConversation.attachments,
         };
       }
     });
@@ -78,10 +78,10 @@ export const mutations = {
     }
   },
   [types.SET_ALL_ATTACHMENTS](_state, { id, data }) {
-    const [chat] = _state.allConversations.filter(c => c.id === id);
-    if (!chat) return;
-    Vue.set(chat, 'attachments', []);
-    chat.attachments.push(...data);
+    const attachments = _state.attachments[id] || [];
+
+    attachments.push(...data);
+    _state.attachments[id] = [...attachments];
   },
   [types.SET_MISSING_MESSAGES](_state, { id, data }) {
     const [chat] = _state.allConversations.filter(c => c.id === id);
@@ -144,42 +144,40 @@ export const mutations = {
     Vue.set(chat, 'muted', false);
   },
 
-  [types.ADD_CONVERSATION_ATTACHMENTS]({ allConversations }, message) {
-    const { conversation_id: conversationId } = message;
-    const [chat] = getSelectedChatConversation({
-      allConversations,
-      selectedChatId: conversationId,
-    });
+  [types.ADD_CONVERSATION_ATTACHMENTS](_state, message) {
+    // early return if the message has not been sent, or has no attachments
+    if (
+      message.status !== MESSAGE_STATUS.SENT ||
+      !message.attachments?.length
+    ) {
+      return;
+    }
 
-    if (!chat) return;
+    const id = message.conversation_id;
+    const existingAttachments = _state.attachments[id] || [];
 
-    const isMessageSent =
-      message.status === MESSAGE_STATUS.SENT && message.attachments;
-    if (isMessageSent) {
-      message.attachments.forEach(attachment => {
-        if (!chat.attachments.some(a => a.id === attachment.id)) {
-          chat.attachments.push(attachment);
-        }
-      });
-    }
+    const attachmentsToAdd = message.attachments.filter(attachment => {
+      // if the attachment is not already in the store, add it
+      // this is to prevent duplicates
+      return !existingAttachments.some(
+        existingAttachment => existingAttachment.id === attachment.id
+      );
+    });
+
+    // replace the attachments in the store
+    _state.attachments[id] = [...existingAttachments, ...attachmentsToAdd];
   },
 
-  [types.DELETE_CONVERSATION_ATTACHMENTS]({ allConversations }, message) {
-    const { conversation_id: conversationId } = message;
-    const [chat] = getSelectedChatConversation({
-      allConversations,
-      selectedChatId: conversationId,
-    });
+  [types.DELETE_CONVERSATION_ATTACHMENTS](_state, message) {
+    if (message.status !== MESSAGE_STATUS.SENT) return;
 
-    if (!chat) return;
+    const { conversation_id: id } = message;
+    const existingAttachments = _state.attachments[id] || [];
+    if (!existingAttachments.length) return;
 
-    const isMessageSent = message.status === MESSAGE_STATUS.SENT;
-    if (isMessageSent) {
-      const attachmentIndex = chat.attachments.findIndex(
-        a => a.message_id === message.id
-      );
-      if (attachmentIndex !== -1) chat.attachments.splice(attachmentIndex, 1);
-    }
+    _state.attachments[id] = existingAttachments.filter(attachment => {
+      return attachment.message_id !== message.id;
+    });
   },
 
   [types.ADD_MESSAGE]({ allConversations, selectedChatId }, message) {
diff --git a/app/javascript/dashboard/store/modules/integrations.js b/app/javascript/dashboard/store/modules/integrations.js
index 3183afbe38494..add8f022f111d 100644
--- a/app/javascript/dashboard/store/modules/integrations.js
+++ b/app/javascript/dashboard/store/modules/integrations.js
@@ -20,28 +20,18 @@ const state = {
   },
 };
 
-const isAValidAppIntegration = integration => {
-  return [
-    'dialogflow',
-    'dyte',
-    'google_translate',
-    'openai',
-    'linear',
-  ].includes(integration.id);
-};
 export const getters = {
-  getIntegrations($state) {
-    return $state.records.filter(item => !isAValidAppIntegration(item));
-  },
   getAppIntegrations($state) {
-    return $state.records.filter(item => isAValidAppIntegration(item));
-  },
-  getIntegration: $state => integrationId => {
-    const [integration] = $state.records.filter(
-      record => record.id === integrationId
-    );
-    return integration || {};
-  },
+    return $state.records;
+  },
+  getIntegration:
+    $state =>
+    (integrationId, defaultValue = {}) => {
+      const [integration] = $state.records.filter(
+        record => record.id === integrationId
+      );
+      return integration || defaultValue;
+    },
   getUIFlags($state) {
     return $state.uiFlags;
   },
diff --git a/app/javascript/dashboard/store/modules/specs/account/getters.spec.js b/app/javascript/dashboard/store/modules/specs/account/getters.spec.js
index 676720c29211a..77cc9b357c18b 100644
--- a/app/javascript/dashboard/store/modules/specs/account/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/account/getters.spec.js
@@ -1,4 +1,5 @@
 import { getters } from '../../accounts';
+import * as languageHelpers from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
 const accountData = {
   id: 1,
@@ -46,4 +47,37 @@ describe('#getters', () => {
       )(1, 'auto_resolve_conversations')
     ).toEqual(true);
   });
+
+  describe('isRTL', () => {
+    it('returns false when accountId is not present', () => {
+      const rootState = { route: { params: {} } };
+      expect(getters.isRTL({}, null, rootState)).toBe(false);
+    });
+
+    it('returns true for RTL language', () => {
+      const state = {
+        records: [{ id: 1, locale: 'ar' }],
+      };
+      const rootState = { route: { params: { accountId: '1' } } };
+      vi.spyOn(languageHelpers, 'getLanguageDirection').mockReturnValue(true);
+      expect(getters.isRTL(state, null, rootState)).toBe(true);
+    });
+
+    it('returns false for LTR language', () => {
+      const state = {
+        records: [{ id: 1, locale: 'en' }],
+      };
+      const rootState = { route: { params: { accountId: '1' } } };
+      vi.spyOn(languageHelpers, 'getLanguageDirection').mockReturnValue(false);
+      expect(getters.isRTL(state, null, rootState)).toBe(false);
+    });
+
+    it('returns false when account is not found', () => {
+      const state = {
+        records: [],
+      };
+      const rootState = { route: { params: { accountId: '1' } } };
+      expect(getters.isRTL(state, null, rootState)).toBe(false);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/cannedResponses/getters.spec.js b/app/javascript/dashboard/store/modules/specs/cannedResponses/getters.spec.js
new file mode 100644
index 0000000000000..7a80aed8c5424
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/cannedResponses/getters.spec.js
@@ -0,0 +1,43 @@
+import CannedResponses from '../../cannedResponse';
+
+const CANNED_RESPONSES = [
+  { short_code: 'hello', content: 'Hi ' },
+  { short_code: 'ask', content: 'Ask questions' },
+  { short_code: 'greet', content: 'Good morning' },
+];
+
+const getters = CannedResponses.getters;
+
+describe('#getCannedResponses', () => {
+  it('returns canned responses', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getCannedResponses(state)).toEqual(CANNED_RESPONSES);
+  });
+});
+
+describe('#getSortedCannedResponses', () => {
+  it('returns sort canned responses in ascending order', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getSortedCannedResponses(state)('asc')).toEqual([
+      CANNED_RESPONSES[1],
+      CANNED_RESPONSES[2],
+      CANNED_RESPONSES[0],
+    ]);
+  });
+
+  it('returns sort canned responses in descending order', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getSortedCannedResponses(state)('desc')).toEqual([
+      CANNED_RESPONSES[0],
+      CANNED_RESPONSES[2],
+      CANNED_RESPONSES[1],
+    ]);
+  });
+});
+
+describe('#getUIFlags', () => {
+  it('returns uiFlags', () => {
+    const state = { uiFlags: { isFetching: true } };
+    expect(getters.getUIFlags(state)).toEqual({ isFetching: true });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
index 3c3bf79de5679..cded293298d97 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
@@ -245,30 +245,18 @@ describe('#getters', () => {
 
   describe('#getSelectedChatAttachments', () => {
     it('Returns attachments in selected chat', () => {
-      const state = {};
-      const getSelectedChat = {
-        attachments: [
-          {
-            id: 1,
-            file_name: 'test1',
-          },
-          {
-            id: 2,
-            file_name: 'test2',
-          },
+      const attachments = {
+        1: [
+          { id: 1, file_name: 'test1' },
+          { id: 2, file_name: 'test2' },
         ],
       };
+      const selectedChatId = 1;
       expect(
-        getters.getSelectedChatAttachments(state, { getSelectedChat })
+        getters.getSelectedChatAttachments({ selectedChatId, attachments })
       ).toEqual([
-        {
-          id: 1,
-          file_name: 'test1',
-        },
-        {
-          id: 2,
-          file_name: 'test2',
-        },
+        { id: 1, file_name: 'test1' },
+        { id: 2, file_name: 'test2' },
       ]);
     });
   });
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
index de596534cdef3..6340e4de9b31d 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
@@ -313,7 +313,6 @@ describe('#mutations', () => {
           {
             id: 1,
             messages: [{ id: 1, content: 'test' }],
-            attachments: [{ id: 1, name: 'test1.png' }],
             dataFetched: true,
             allMessagesLoaded: true,
           },
@@ -325,7 +324,6 @@ describe('#mutations', () => {
           id: 1,
           name: 'test',
           messages: [{ id: 1, content: 'updated message' }],
-          attachments: [{ id: 1, name: 'test.png' }],
           dataFetched: true,
           allMessagesLoaded: true,
         },
@@ -335,7 +333,6 @@ describe('#mutations', () => {
           id: 1,
           name: 'test',
           messages: [{ id: 1, content: 'test' }],
-          attachments: [{ id: 1, name: 'test1.png' }],
           dataFetched: true,
           allMessagesLoaded: true,
         },
@@ -371,25 +368,28 @@ describe('#mutations', () => {
     it('set all attachments', () => {
       const state = {
         allConversations: [{ id: 1 }],
+        attachments: {},
       };
       const data = [{ id: 1, name: 'test' }];
       mutations[types.SET_ALL_ATTACHMENTS](state, { id: 1, data });
-      expect(state.allConversations[0].attachments).toEqual(data);
+      expect(state.attachments[1]).toEqual(data);
     });
     it('set attachments key even if the attachments are empty', () => {
       const state = {
         allConversations: [{ id: 1 }],
+        attachments: {},
       };
       const data = [];
       mutations[types.SET_ALL_ATTACHMENTS](state, { id: 1, data });
-      expect(state.allConversations[0].attachments).toEqual([]);
+      expect(state.attachments[1]).toEqual([]);
     });
   });
 
   describe('#ADD_CONVERSATION_ATTACHMENTS', () => {
     it('add conversation attachments', () => {
       const state = {
-        allConversations: [{ id: 1, attachments: [] }],
+        allConversations: [{ id: 1 }],
+        attachments: {},
       };
       const message = {
         conversation_id: 1,
@@ -398,19 +398,13 @@ describe('#mutations', () => {
       };
 
       mutations[types.ADD_CONVERSATION_ATTACHMENTS](state, message);
-      expect(state.allConversations[0].attachments).toEqual(
-        message.attachments
-      );
+      expect(state.attachments[1]).toEqual(message.attachments);
     });
 
     it('should not add duplicate attachments', () => {
       const state = {
-        allConversations: [
-          {
-            id: 1,
-            attachments: [{ id: 1, name: 'existing' }],
-          },
-        ],
+        allConversations: [{ id: 1 }],
+        attachments: { 1: [{ id: 1, name: 'existing' }] },
       };
       const message = {
         conversation_id: 1,
@@ -422,12 +416,12 @@ describe('#mutations', () => {
       };
 
       mutations[types.ADD_CONVERSATION_ATTACHMENTS](state, message);
-      expect(state.allConversations[0].attachments).toHaveLength(2);
-      expect(state.allConversations[0].attachments).toContainEqual({
+      expect(state.attachments[1]).toHaveLength(2);
+      expect(state.attachments[1]).toContainEqual({
         id: 1,
         name: 'existing',
       });
-      expect(state.allConversations[0].attachments).toContainEqual({
+      expect(state.attachments[1]).toContainEqual({
         id: 2,
         name: 'new',
       });
@@ -436,6 +430,9 @@ describe('#mutations', () => {
     it('should not add attachments if chat not found', () => {
       const state = {
         allConversations: [{ id: 1, attachments: [] }],
+        attachments: {
+          1: [],
+        },
       };
       const message = {
         conversation_id: 2,
@@ -444,14 +441,17 @@ describe('#mutations', () => {
       };
 
       mutations[types.ADD_CONVERSATION_ATTACHMENTS](state, message);
-      expect(state.allConversations[0].attachments).toHaveLength(0);
+      expect(state.attachments[1]).toHaveLength(0);
     });
   });
 
   describe('#DELETE_CONVERSATION_ATTACHMENTS', () => {
     it('delete conversation attachments', () => {
       const state = {
-        allConversations: [{ id: 1, attachments: [{ id: 1, message_id: 1 }] }],
+        allConversations: [{ id: 1 }],
+        attachments: {
+          1: [{ id: 1, message_id: 1 }],
+        },
       };
       const message = {
         conversation_id: 1,
@@ -460,12 +460,15 @@ describe('#mutations', () => {
       };
 
       mutations[types.DELETE_CONVERSATION_ATTACHMENTS](state, message);
-      expect(state.allConversations[0].attachments).toHaveLength(0);
+      expect(state.attachments[1]).toHaveLength(0);
     });
 
     it('should not delete attachments for non-matching message id', () => {
       const state = {
-        allConversations: [{ id: 1, attachments: [{ id: 1, message_id: 1 }] }],
+        allConversations: [{ id: 1 }],
+        attachments: {
+          1: [{ id: 1, message_id: 1 }],
+        },
       };
       const message = {
         conversation_id: 1,
@@ -474,12 +477,13 @@ describe('#mutations', () => {
       };
 
       mutations[types.DELETE_CONVERSATION_ATTACHMENTS](state, message);
-      expect(state.allConversations[0].attachments).toHaveLength(1);
+      expect(state.attachments[1]).toHaveLength(1);
     });
 
     it('should not delete attachments if chat not found', () => {
       const state = {
-        allConversations: [{ id: 1, attachments: [{ id: 1, message_id: 1 }] }],
+        allConversations: [{ id: 1 }],
+        attachments: { 1: [{ id: 1, message_id: 1 }] },
       };
       const message = {
         conversation_id: 2,
@@ -488,7 +492,7 @@ describe('#mutations', () => {
       };
 
       mutations[types.DELETE_CONVERSATION_ATTACHMENTS](state, message);
-      expect(state.allConversations[0].attachments).toHaveLength(1);
+      expect(state.attachments[1]).toHaveLength(1);
     });
   });
 
diff --git a/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
index 43080a7d807d6..feb358684a407 100644
--- a/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
@@ -1,60 +1,9 @@
 import { getters } from '../../integrations';
 
 describe('#getters', () => {
-  it('getIntegrations', () => {
-    const state = {
-      records: [
-        {
-          id: 'test1',
-          name: 'test1',
-          logo: 'test',
-          enabled: true,
-        },
-        {
-          id: 'test2',
-          name: 'test2',
-          logo: 'test',
-          enabled: true,
-        },
-        {
-          id: 'dyte',
-          name: 'dyte',
-          logo: 'test',
-          enabled: true,
-        },
-        {
-          id: 'dialogflow',
-          name: 'dialogflow',
-          logo: 'test',
-          enabled: true,
-        },
-      ],
-    };
-    expect(getters.getIntegrations(state)).toEqual([
-      {
-        id: 'test1',
-        name: 'test1',
-        logo: 'test',
-        enabled: true,
-      },
-      {
-        id: 'test2',
-        name: 'test2',
-        logo: 'test',
-        enabled: true,
-      },
-    ]);
-  });
-
   it('getAppIntegrations', () => {
     const state = {
       records: [
-        {
-          id: 'test1',
-          name: 'test1',
-          logo: 'test',
-          enabled: true,
-        },
         {
           id: 'dyte',
           name: 'dyte',
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index bbf36fa9a9ced..81e62b9507deb 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -9,7 +9,6 @@ import VueFormulate from '@braid/vue-formulate';
 import WootSwitch from 'components/ui/Switch';
 import WootWizard from 'components/ui/Wizard';
 import { sync } from 'vuex-router-sync';
-import Vuelidate from 'vuelidate';
 import VTooltip from 'v-tooltip';
 import WootUiKit from '../dashboard/components';
 import App from '../dashboard/App';
@@ -65,7 +64,6 @@ Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
 Vue.use(WootUiKit);
-Vue.use(Vuelidate);
 Vue.use(VueFormulate, {
   rules: {
     JSON: ({ value }) => isJSONValid(value),
diff --git a/app/javascript/packs/survey.js b/app/javascript/packs/survey.js
index 031767052db02..fdcaec1064778 100644
--- a/app/javascript/packs/survey.js
+++ b/app/javascript/packs/survey.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
 import App from '../survey/App.vue';
 import i18n from '../survey/i18n';
@@ -7,7 +6,6 @@ import store from '../survey/store';
 import { emitter } from 'shared/helpers/mitt';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
diff --git a/app/javascript/packs/v3app.js b/app/javascript/packs/v3app.js
index 5807ff60f7178..d5180675ccc77 100644
--- a/app/javascript/packs/v3app.js
+++ b/app/javascript/packs/v3app.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
-import Vuelidate from 'vuelidate';
 import i18n from 'dashboard/i18n';
 import * as Sentry from '@sentry/vue';
 import { Integrations } from '@sentry/tracing';
@@ -44,7 +43,7 @@ if (window.errorLoggingConfig) {
 
 Vue.use(VueRouter);
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
+
 Vue.use(AnalyticsPlugin);
 Vue.prototype.$emitter = emitter;
 Vue.component('fluent-icon', FluentIcon);
diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js
index ea3bb820076f9..a6c873c55c058 100644
--- a/app/javascript/packs/widget.js
+++ b/app/javascript/packs/widget.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import VueFormulate from '@braid/vue-formulate';
@@ -18,7 +17,7 @@ import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 const PhoneInput = () => import('../widget/components/Form/PhoneInput');
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
+
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.directive('on-clickaway', onClickaway);
 
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index 1174c636ca77d..3e4be5ba95b5c 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 ffa0f99a74266..08dd5e1cf0f0d 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 2c9697e144f38..68abe44f56ca9 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -1,60 +1,10 @@
-<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 { ref, computed, nextTick } from 'vue';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
-  mixins: [mentionSelectionKeyboardMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
   props: {
     items: {
       type: Array,
@@ -68,26 +18,42 @@ export default {
       type: String,
       default: '',
     },
-    searchPlaceholder: {
-      type: String,
-      default: '',
-    },
     loadingPlaceholder: {
       type: String,
       default: '',
     },
-    resultsTitle: {
-      type: String,
-      default: '',
-    },
     searchTerm: {
       type: String,
       default: '',
     },
   },
-  data() {
+  setup(props) {
+    const selectedIndex = ref(-1);
+    const portalSearchSuggestionsRef = ref(null);
+
+    const adjustScroll = () => {
+      nextTick(() => {
+        portalSearchSuggestionsRef.value.scrollTop = 102 * selectedIndex.value;
+      });
+    };
+
+    const isSearchItemActive = index => {
+      return index === selectedIndex.value
+        ? 'bg-slate-25 dark:bg-slate-800'
+        : 'bg-white dark:bg-slate-900';
+    };
+
+    useKeyboardNavigableList({
+      elementRef: portalSearchSuggestionsRef,
+      items: computed(() => props.items),
+      adjustScroll,
+      selectedIndex,
+    });
+
     return {
-      selectedIndex: -1,
+      selectedIndex,
+      portalSearchSuggestionsRef,
+      isSearchItemActive,
     };
   },
 
@@ -101,19 +67,9 @@ export default {
   },
 
   methods: {
-    isSearchItemActive(index) {
-      return index === this.selectedIndex
-        ? 'bg-slate-25 dark:bg-slate-800'
-        : 'bg-white dark:bg-slate-900';
-    },
     generateArticleUrl(article) {
       return `/hc/${article.portal.slug}/articles/${article.slug}`;
     },
-    adjustScroll() {
-      this.$nextTick(() => {
-        this.$el.scrollTop = 102 * this.selectedIndex;
-      });
-    },
     prepareContent(content) {
       return this.highlightContent(
         content,
@@ -124,3 +80,55 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    ref="portalSearchSuggestionsRef"
+    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 d7b3bb021d1ed..d907bc49eb631 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 3e9690b2084ef..dfe2951f0cd94 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 bbeb578e9eb3a..8034e35068a33 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 ed28a8e5a29f0..cd041361fb3ea 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 9eb443568f0e0..c8a44a660f47f 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 f777d6b3dc8c1..14683784f29a9 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 bf3d830ebee9f..f246f94a799d7 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 7532e14d327db..de6d27a18c47e 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 2cb8b8c973d98..a6c7442347980 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 471562d0241f4..332892cd3e201 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 32ae6e10c048e..a06badcc6da89 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 2a93dc06fbbcc..3a2c128543714 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 05369ed1ee0d4..0b93b95d44e9c 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 da01f33979bc2..f09e4d3f4d55e 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 d63a0c56bf11f..f692bdbc9463e 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/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 561129c00bd5d..04255c560b779 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -271,13 +271,24 @@
     "M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
     "M19.5001 19.5001L15.9167 15.9167"
   ],
-  "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
+  "chevrons-left-outline": [
+    "m11 17-5-5 5-5",
+    "m18 17-5-5 5-5"
+  ],
   "chevron-left-single-outline": "m15 18-6-6 6-6",
-  "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
+  "chevrons-right-outline": [
+    "m6 17 5-5-5-5",
+    "m13 17 5-5-5-5"
+  ],
   "chevron-right-single-outline": "m9 18 6-6-6-6",
   "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
   "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75",
   "linear-outline": "M1.17156 10.4618C1.14041 10.329 1.2986 10.2454 1.39505 10.3418L6.50679 15.4536C6.60323 15.55 6.5196 15.7082 6.38681 15.6771C3.80721 15.0719 1.77669 13.0414 1.17156 10.4618ZM1.00026 8.4131C0.997795 8.45277 1.01271 8.49149 1.0408 8.51959L8.32904 15.8078C8.35714 15.8359 8.39586 15.8509 8.43553 15.8484C8.76721 15.8277 9.09266 15.784 9.41026 15.7187C9.51729 15.6968 9.55447 15.5653 9.47721 15.488L1.36063 7.37142C1.28337 7.29416 1.15187 7.33134 1.12989 7.43837C1.06466 7.75597 1.02092 8.08142 1.00026 8.4131ZM1.58953 6.00739C1.56622 6.05972 1.57809 6.12087 1.6186 6.16139L10.6872 15.23C10.7278 15.2705 10.7889 15.2824 10.8412 15.2591C11.0913 15.1477 11.3336 15.0221 11.5672 14.8833C11.6445 14.8374 11.6564 14.7312 11.5929 14.6676L2.18099 5.25577C2.11742 5.1922 2.01121 5.20412 1.96529 5.28142C1.8265 5.51499 1.70091 5.75733 1.58953 6.00739ZM2.77222 4.37899C2.7204 4.32718 2.7172 4.24407 2.76602 4.18942C4.04913 2.75294 5.9156 1.84863 7.99327 1.84863C11.863 1.84863 15 4.98565 15 8.85536C15 10.933 14.0957 12.7995 12.6592 14.0826C12.6046 14.1314 12.5215 14.1282 12.4696 14.0764L2.77222 4.37899Z",
   "status-outline": "m8.462 6.81l3.284 13.616c.178.737 1.211.775 1.443.054l3.257-10.122l.586 2.095a.75.75 0 0 0 .722.548h3.494a.75.75 0 0 0 0-1.5h-2.925l-1.105-3.95c-.2-.717-1.208-.736-1.436-.028l-3.203 9.957L9.224 3.574c-.182-.757-1.255-.769-1.454-.016l-2.1 7.943H2.75a.75.75 0 0 0 0 1.5h3.496a.75.75 0 0 0 .725-.558z",
-  "unlink-outline": "m18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07a5.006 5.006 0 0 0-6.95 0l-1.72 1.71m-6.58 6.57l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07a5.006 5.006 0 0 0 6.95 0l1.71-1.71M8 2v3M2 8h3m11 11v3m3-6h3"
+  "unlink-outline": "m18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07a5.006 5.006 0 0 0-6.95 0l-1.72 1.71m-6.58 6.57l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07a5.006 5.006 0 0 0 6.95 0l1.71-1.71M8 2v3M2 8h3m11 11v3m3-6h3",
+  "captain-outline": [
+    "M6.49573 9.20645C6.49573 8.67008 6.93058 8.23523 7.46695 8.23523C8.00337 8.23523 8.43817 8.67008 8.43817 9.20645V11.4511C8.43817 11.9875 8.00337 12.4223 7.46695 12.4223C6.93058 12.4223 6.49573 11.9875 6.49573 11.4511V9.20645Z",
+    "M9.60364 9.20645C9.60364 8.67008 10.0385 8.23523 10.5749 8.23523C11.1113 8.23523 11.5461 8.67008 11.5461 9.20645V11.4511C11.5461 11.9875 11.1113 12.4223 10.5749 12.4223C10.0385 12.4223 9.60364 11.9875 9.60364 11.4511V9.20645Z",
+    "M17.1442 5.57049C13.5275 5.06019 10.5793 5.04007 6.88135 5.56825C5.9466 5.70176 5.32812 5.79197 4.85654 5.92976C4.41928 6.05757 4.17061 6.20994 3.96492 6.43984C3.539 6.91583 3.48286 7.45419 3.4248 9.33184C3.36775 11.1772 3.48076 12.831 3.69481 14.6918C3.80887 15.6834 3.88736 16.3526 4.01268 16.8613C4.13155 17.3439 4.27532 17.6034 4.47513 17.802C4.67654 18.0023 4.93467 18.1435 5.40841 18.2581C5.90952 18.3793 6.56702 18.4526 7.5442 18.5592C10.7045 18.904 13.0702 18.9022 16.2423 18.561C17.2313 18.4546 17.8995 18.3813 18.4081 18.2609C18.8913 18.1465 19.1511 18.0063 19.3497 17.8118C19.5442 17.6213 19.6928 17.3587 19.8217 16.852C19.9561 16.3234 20.0476 15.624 20.18 14.5966C20.4162 12.7633 20.5863 11.1533 20.5929 9.3896C20.5999 7.50391 20.5613 6.96737 20.1306 6.46971C19.9226 6.22932 19.6696 6.0713 19.2224 5.93968C18.7395 5.79754 18.1042 5.70594 17.1442 5.57049ZM6.65555 3.98715C10.5078 3.43695 13.6072 3.45849 17.3674 3.98902L17.4224 3.99678C18.3127 4.12235 19.0648 4.22844 19.6733 4.40753C20.33 4.60078 20.8792 4.89417 21.3382 5.4245C22.2041 6.42482 22.1984 7.6117 22.1909 9.18858C22.1905 9.25686 22.1902 9.32584 22.19 9.3956C22.183 11.2604 22.0026 12.949 21.764 14.8006L21.7577 14.8496C21.6332 15.8159 21.5307 16.6121 21.3695 17.2458C21.2 17.9121 20.9467 18.4833 20.4672 18.9529C19.9919 19.4183 19.4302 19.6602 18.776 19.8151C18.1582 19.9613 17.3895 20.044 16.4629 20.1436L16.4131 20.149C13.1283 20.5023 10.6472 20.5043 7.37097 20.1469L7.32043 20.1414C6.40679 20.0417 5.64604 19.9587 5.03292 19.8104C4.38112 19.6527 3.82317 19.406 3.34911 18.9347C2.87346 18.4618 2.62363 17.8999 2.46191 17.2433C2.30938 16.6241 2.22071 15.8531 2.11393 14.9246L2.10815 14.8743C1.88863 12.9659 1.76823 11.23 1.82845 9.28246C1.83063 9.2118 1.83272 9.14191 1.83479 9.07281C1.8816 7.50776 1.91671 6.33374 2.7747 5.37486C3.22992 4.86612 3.76798 4.58399 4.40853 4.39678C5.00257 4.22316 5.73505 4.11858 6.60207 3.99479C6.61981 3.99225 6.63764 3.9897 6.65555 3.98715Z"
+  ]
 }
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index d67d9c1b35047..7388a2886acdd 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 16fc3b91e63e6..27d6a44c039b6 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 ddda315854248..9849c163e08de 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,
@@ -42,7 +29,7 @@ export default {
       type: Number,
       default: 2,
     },
-    // add this as a prop, so that we won't have to include uiSettingsMixin
+    // add this as a prop, so that we won't have to add useUISettings
     sendWithSignature: {
       type: Boolean,
       default: false,
@@ -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 f4bdf0bc2aaf1..59c798378c286 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 1b6bc2f058011..194fe891f352c 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 cea163dc30f52..4928c05f0b980 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -1,3 +1,88 @@
+<script>
+import emojis from './emojisGroup.json';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+const SEARCH_KEY = 'Search';
+
+export default {
+  components: { FluentIcon },
+  props: {
+    onClick: {
+      type: Function,
+      default: () => {},
+    },
+    showRemoveButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectedKey: 'Search',
+      emojis,
+      search: '',
+    };
+  },
+  computed: {
+    categories() {
+      return [...this.emojis];
+    },
+    filterEmojisByCategory() {
+      const selectedCategoryName = this.emojis.find(category =>
+        category.name === this.selectedKey ? category.name : null
+      );
+      return selectedCategoryName?.emojis;
+    },
+    filterAllEmojisBySearch() {
+      return this.emojis.map(category => {
+        const allEmojis = category.emojis.filter(emoji =>
+          emoji.slug.replaceAll('_', ' ').includes(this.search.toLowerCase())
+        );
+        return allEmojis.length > 0
+          ? { ...category, emojis: allEmojis }
+          : { ...category, emojis: [] };
+      });
+    },
+    hasNoSearch() {
+      return this.selectedKey !== SEARCH_KEY && this.search === '';
+    },
+    hasEmptySearchResult() {
+      return this.filterAllEmojisBySearch.every(
+        category => category.emojis.length === 0
+      );
+    },
+  },
+  watch: {
+    search() {
+      this.selectedKey = 'Search';
+    },
+    selectedKey() {
+      return this.selectedKey === 'Search' ? this.focusSearchInput() : null;
+    },
+  },
+  mounted() {
+    this.focusSearchInput();
+  },
+  methods: {
+    changeCategory(category) {
+      this.search = '';
+      this.$refs.emojiItem.scrollTo({ top: 0 });
+      this.selectedKey = category;
+    },
+    getFirstEmojiByCategoryName(categoryName) {
+      const categoryItem = this.emojis.find(category =>
+        category.name === categoryName ? category : null
+      );
+      return categoryItem ? categoryItem.emojis[0].emoji : '';
+    },
+    focusSearchInput() {
+      this.$nextTick(() => {
+        this.$refs.searchbar.focus();
+      });
+    },
+  },
+};
+</script>
+
 <template>
   <div
     role="dialog"
@@ -9,7 +94,7 @@
           ref="searchbar"
           v-model="search"
           type="text"
-          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0"
+          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
@@ -56,7 +141,7 @@
         </div>
         <div v-if="hasEmptySearchResult" class="empty-message">
           <div class="emoji-icon">
-            <fluent-icon icon="emoji" size="48" />
+            <FluentIcon icon="emoji" size="48" />
           </div>
           <span class="empty-message--text">
             {{ $t('EMOJI.NOT_FOUND') }}
@@ -72,7 +157,7 @@
               :class="{ active: selectedKey === 'Search' }"
               @click="changeCategory('Search')"
             >
-              <fluent-icon
+              <FluentIcon
                 icon="search"
                 size="16"
                 class="text-slate-700 dark:text-slate-100"
@@ -97,90 +182,6 @@
   </div>
 </template>
 
-<script>
-import emojis from './emojisGroup.json';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-const SEARCH_KEY = 'Search';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    onClick: {
-      type: Function,
-      default: () => {},
-    },
-    showRemoveButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selectedKey: 'Search',
-      emojis,
-      search: '',
-    };
-  },
-  computed: {
-    categories() {
-      return [...this.emojis];
-    },
-    filterEmojisByCategory() {
-      const selectedCategoryName = this.emojis.find(category =>
-        category.name === this.selectedKey ? category.name : null
-      );
-      return selectedCategoryName?.emojis;
-    },
-    filterAllEmojisBySearch() {
-      return this.emojis.map(category => {
-        const allEmojis = category.emojis.filter(emoji =>
-          emoji.slug.replaceAll('_', ' ').includes(this.search.toLowerCase())
-        );
-        return allEmojis.length > 0
-          ? { ...category, emojis: allEmojis }
-          : { ...category, emojis: [] };
-      });
-    },
-    hasNoSearch() {
-      return this.selectedKey !== SEARCH_KEY && this.search === '';
-    },
-    hasEmptySearchResult() {
-      return this.filterAllEmojisBySearch.every(
-        category => category.emojis.length === 0
-      );
-    },
-  },
-  watch: {
-    search() {
-      this.selectedKey = 'Search';
-    },
-    selectedKey() {
-      return this.selectedKey === 'Search' ? this.focusSearchInput() : null;
-    },
-  },
-  mounted() {
-    this.focusSearchInput();
-  },
-  methods: {
-    changeCategory(category) {
-      this.search = '';
-      this.$refs.emojiItem.scrollTo({ top: 0 });
-      this.selectedKey = category;
-    },
-    getFirstEmojiByCategoryName(categoryName) {
-      const categoryItem = this.emojis.find(category =>
-        category.name === categoryName ? category : null
-      );
-      return categoryItem ? categoryItem.emojis[0].emoji : '';
-    },
-    focusSearchInput() {
-      this.$nextTick(() => {
-        this.$refs.searchbar.focus();
-      });
-    },
-  },
-};
-</script>
 <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 fe6a4f2f84d91..e3485617ca4c0 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -1,3 +1,71 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+export default {
+  components: {
+    Thumbnail,
+    MultiselectDropdownItems,
+  },
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selectedItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    hasThumbnail: {
+      type: Boolean,
+      default: true,
+    },
+    multiselectorTitle: {
+      type: String,
+      default: '',
+    },
+    multiselectorPlaceholder: {
+      type: String,
+      default: 'None',
+    },
+    noSearchResult: {
+      type: String,
+      default: 'No results found',
+    },
+    inputPlaceholder: {
+      type: String,
+      default: 'Search',
+    },
+  },
+  data() {
+    return {
+      showSearchDropdown: false,
+    };
+  },
+  computed: {
+    hasValue() {
+      if (this.selectedItem && this.selectedItem.id) {
+        return true;
+      }
+      return false;
+    },
+  },
+  methods: {
+    toggleDropdown() {
+      this.showSearchDropdown = !this.showSearchDropdown;
+    },
+
+    onCloseDropdown() {
+      this.showSearchDropdown = false;
+    },
+
+    onClickSelectItem(value) {
+      this.$emit('click', value);
+      this.onCloseDropdown();
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-on-clickaway="onCloseDropdown"
@@ -58,7 +126,7 @@
           @click="onCloseDropdown"
         />
       </div>
-      <multiselect-dropdown-items
+      <MultiselectDropdownItems
         v-if="showSearchDropdown"
         :options="options"
         :selected-items="[selectedItem]"
@@ -71,74 +139,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-export default {
-  components: {
-    Thumbnail,
-    MultiselectDropdownItems,
-  },
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    selectedItem: {
-      type: Object,
-      default: () => ({}),
-    },
-    hasThumbnail: {
-      type: Boolean,
-      default: true,
-    },
-    multiselectorTitle: {
-      type: String,
-      default: '',
-    },
-    multiselectorPlaceholder: {
-      type: String,
-      default: 'None',
-    },
-    noSearchResult: {
-      type: String,
-      default: 'No results found',
-    },
-    inputPlaceholder: {
-      type: String,
-      default: 'Search',
-    },
-  },
-  data() {
-    return {
-      showSearchDropdown: false,
-    };
-  },
-  computed: {
-    hasValue() {
-      if (this.selectedItem && this.selectedItem.id) {
-        return true;
-      }
-      return false;
-    },
-  },
-  methods: {
-    toggleDropdown() {
-      this.showSearchDropdown = !this.showSearchDropdown;
-    },
-
-    onCloseDropdown() {
-      this.showSearchDropdown = false;
-    },
-
-    onClickSelectItem(value) {
-      this.$emit('click', value);
-      this.onCloseDropdown();
-    },
-  },
-};
-</script>
-
 <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 4c38eb9a66042..b853e4a0ca8cf 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 75928799465c3..6694ddd7827ca 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 38cfa089907c2..fbe7f6e32722f 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 8b36bb1c5016c..65afa3123cf53 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 3ec24196804b5..ad2783f3a9857 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 a876de4018a2b..d7f81cf5cc398 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -1,61 +1,66 @@
+<script setup>
+import { ref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+defineProps({
+  placement: {
+    type: String,
+    default: 'top',
+  },
+});
+
+const dropdownMenuRef = ref(null);
+
+const dropdownMenuButtons = () => {
+  return dropdownMenuRef.value.querySelectorAll(
+    'ul.dropdown li.dropdown-menu__item .button'
+  );
+};
+
+const getActiveButtonIndex = menuButtons => {
+  const focusedButton = dropdownMenuRef.value.querySelector(
+    'ul.dropdown li.dropdown-menu__item .button:focus'
+  );
+  return Array.from(menuButtons).indexOf(focusedButton);
+};
+
+const focusButton = (menuButtons, newIndex) => {
+  if (menuButtons.length === 0) return;
+  menuButtons[newIndex].focus();
+};
+
+const focusPreviousButton = menuButtons => {
+  const activeIndex = getActiveButtonIndex(menuButtons);
+  const newIndex = activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
+  focusButton(menuButtons, newIndex);
+};
+
+const focusNextButton = menuButtons => {
+  const activeIndex = getActiveButtonIndex(menuButtons);
+  const newIndex = activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
+  focusButton(menuButtons, newIndex);
+};
+
+const keyboardEvents = {
+  ArrowUp: {
+    action: () => focusPreviousButton(dropdownMenuButtons()),
+    allowOnFocusedInput: true,
+  },
+  ArrowDown: {
+    action: () => focusNextButton(dropdownMenuButtons()),
+    allowOnFocusedInput: true,
+  },
+};
+
+useKeyboardEvents(keyboardEvents, dropdownMenuRef);
+</script>
+
 <template>
   <ul
-    ref="dropdownMenu"
+    ref="dropdownMenuRef"
     class="dropdown menu vertical"
     :class="[placement && `dropdown--${placement}`]"
   >
     <slot />
   </ul>
 </template>
-<script>
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-export default {
-  name: 'WootDropdownMenu',
-  componentName: 'WootDropdownMenu',
-
-  mixins: [keyboardEventListenerMixins],
-
-  props: {
-    placement: {
-      type: String,
-      default: 'top',
-    },
-  },
-  methods: {
-    dropdownMenuButtons() {
-      return this.$refs.dropdownMenu.querySelectorAll(
-        'ul.dropdown li.dropdown-menu__item .button'
-      );
-    },
-    getActiveButtonIndex(menuButtons) {
-      const focusedButton = this.$refs.dropdownMenu.querySelector(
-        'ul.dropdown li.dropdown-menu__item .button:focus'
-      );
-      return Array.from(menuButtons).indexOf(focusedButton);
-    },
-    getKeyboardEvents() {
-      const menuButtons = this.dropdownMenuButtons();
-      return {
-        ArrowUp: () => this.focusPreviousButton(menuButtons),
-        ArrowDown: () => this.focusNextButton(menuButtons),
-      };
-    },
-    focusPreviousButton(menuButtons) {
-      const activeIndex = this.getActiveButtonIndex(menuButtons);
-      const newIndex =
-        activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
-      this.focusButton(menuButtons, newIndex);
-    },
-    focusNextButton(menuButtons) {
-      const activeIndex = this.getActiveButtonIndex(menuButtons);
-      const newIndex =
-        activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
-      this.focusButton(menuButtons, newIndex);
-    },
-    focusButton(menuButtons, newIndex) {
-      if (menuButtons.length === 0) return;
-      menuButtons[newIndex].focus();
-    },
-  },
-};
-</script>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
index 4e5ee129648cc..95f98f01b944d 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 30f36a7bbc2b9..b3b224b58d6a5 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 6319b7420566a..0cb1e6b461f8b 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/helpers/KeyboardHelpers.js b/app/javascript/shared/helpers/KeyboardHelpers.js
index 8a64c8cb58687..fdd64a083690d 100644
--- a/app/javascript/shared/helpers/KeyboardHelpers.js
+++ b/app/javascript/shared/helpers/KeyboardHelpers.js
@@ -22,6 +22,14 @@ export const hasPressedCommandAndEnter = e => {
   return hasPressedCommand(e) && isEnter(e);
 };
 
+// If layout is QWERTZ then we add the Shift+keysToModify to fix an known issue
+// https://github.com/chatwoot/chatwoot/issues/9492
+export const keysToModifyInQWERTZ = new Set(['Alt+KeyP', 'Alt+KeyL']);
+
+export const LAYOUT_QWERTY = 'QWERTY';
+export const LAYOUT_QWERTZ = 'QWERTZ';
+export const LAYOUT_AZERTY = 'AZERTY';
+
 /**
  * Determines whether the active element is typeable.
  *
diff --git a/app/javascript/shared/helpers/Validators.js b/app/javascript/shared/helpers/Validators.js
index d8cf0b3528a57..6502fef39c756 100644
--- a/app/javascript/shared/helpers/Validators.js
+++ b/app/javascript/shared/helpers/Validators.js
@@ -1,22 +1,58 @@
+/**
+ * Checks if a string is a valid E.164 phone number format.
+ * @param {string} value - The phone number to validate.
+ * @returns {boolean} True if the number is in E.164 format, false otherwise.
+ */
 export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
 
+/**
+ * Validates a phone number after removing the dial code.
+ * @param {string} value - The full phone number including dial code.
+ * @param {string} dialCode - The dial code to remove before validation.
+ * @returns {boolean} True if the number (without dial code) is valid, false otherwise.
+ */
 export const isPhoneNumberValid = (value, dialCode) => {
   const number = value.replace(dialCode, '');
   return !!number.match(/^[0-9]{1,14}$/);
 };
 
+/**
+ * Checks if a string is either a valid E.164 phone number or empty.
+ * @param {string} value - The phone number to validate.
+ * @returns {boolean} True if the number is in E.164 format or empty, false otherwise.
+ */
 export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';
 
+/**
+ * Validates a phone number with dial code, requiring at least 5 digits.
+ * @param {string} value - The full phone number including dial code.
+ * @returns {boolean} True if the number is valid, false otherwise.
+ */
 export const isPhoneNumberValidWithDialCode = value => {
   const number = value.replace(/^\+/, ''); // Remove the '+' sign
   return !!number.match(/^[1-9]\d{4,}$/); // Validate the phone number with minimum 5 digits
 };
 
+/**
+ * Checks if a string starts with a plus sign.
+ * @param {string} value - The string to check.
+ * @returns {boolean} True if the string starts with '+', false otherwise.
+ */
 export const startsWithPlus = value => value.startsWith('+');
 
+/**
+ * Checks if a string is a valid URL (starts with 'http') or is empty.
+ * @param {string} [value=''] - The string to check.
+ * @returns {boolean} True if the string is a valid URL or empty, false otherwise.
+ */
 export const shouldBeUrl = (value = '') =>
   value ? value.startsWith('http') : true;
 
+/**
+ * Validates a password for complexity requirements.
+ * @param {string} value - The password to validate.
+ * @returns {boolean} True if the password meets all requirements, false otherwise.
+ */
 export const isValidPassword = value => {
   const containsUppercase = /[A-Z]/.test(value);
   const containsLowercase = /[a-z]/.test(value);
@@ -32,8 +68,18 @@ export const isValidPassword = value => {
   );
 };
 
+/**
+ * Checks if a string consists only of digits.
+ * @param {string} value - The string to check.
+ * @returns {boolean} True if the string contains only digits, false otherwise.
+ */
 export const isNumber = value => /^\d+$/.test(value);
 
+/**
+ * Validates a domain name.
+ * @param {string} value - The domain name to validate.
+ * @returns {boolean} True if the domain is valid or empty, false otherwise.
+ */
 export const isDomain = value => {
   if (value !== '') {
     const domainRegex = /^([\p{L}0-9]+(-[\p{L}0-9]+)*\.)+[a-z]{2,}$/gmu;
@@ -41,3 +87,16 @@ export const isDomain = value => {
   }
   return true;
 };
+
+/**
+ * Creates a RegExp object from a string representation of a regular expression.
+ * @param {string} regexPatternValue - The string representation of the regex (e.g., '/pattern/flags').
+ * @returns {RegExp} A RegExp object created from the input string.
+ */
+export const getRegexp = regexPatternValue => {
+  let lastSlash = regexPatternValue.lastIndexOf('/');
+  return new RegExp(
+    regexPatternValue.slice(1, lastSlash),
+    regexPatternValue.slice(lastSlash + 1)
+  );
+};
diff --git a/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js b/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js
index 6d65cb36ecb6d..fc15b772cd2fa 100644
--- a/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js
+++ b/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js
@@ -8,6 +8,7 @@ import {
   isPhoneNumberValid,
   isNumber,
   isDomain,
+  getRegexp,
 } from '../Validators';
 
 describe('#shouldBeUrl', () => {
@@ -115,3 +116,40 @@ describe('#startsWithPlus', () => {
     expect(startsWithPlus('123456789')).toEqual(false);
   });
 });
+
+describe('#getRegexp', () => {
+  it('should create a correct RegExp object', () => {
+    const regexPattern = '/^[a-z]+$/i';
+    const regex = getRegexp(regexPattern);
+
+    expect(regex).toBeInstanceOf(RegExp);
+    expect(regex.toString()).toBe(regexPattern);
+
+    expect(regex.test('abc')).toBe(true);
+    expect(regex.test('ABC')).toBe(true);
+    expect(regex.test('123')).toBe(false);
+  });
+
+  it('should handle regex with flags', () => {
+    const regexPattern = '/hello/gi';
+    const regex = getRegexp(regexPattern);
+
+    expect(regex).toBeInstanceOf(RegExp);
+    expect(regex.toString()).toBe(regexPattern);
+
+    expect(regex.test('hello')).toBe(true);
+    expect(regex.test('HELLO')).toBe(false);
+    expect(regex.test('Hello World')).toBe(true);
+  });
+
+  it('should handle regex with special characters', () => {
+    const regexPattern = '/\\d{3}-\\d{2}-\\d{4}/';
+    const regex = getRegexp(regexPattern);
+
+    expect(regex).toBeInstanceOf(RegExp);
+    expect(regex.toString()).toBe(regexPattern);
+
+    expect(regex.test('123-45-6789')).toBe(true);
+    expect(regex.test('12-34-5678')).toBe(false);
+  });
+});
diff --git a/app/javascript/shared/helpers/specs/timeHelper.spec.js b/app/javascript/shared/helpers/specs/timeHelper.spec.js
new file mode 100644
index 0000000000000..13d04568fd0b4
--- /dev/null
+++ b/app/javascript/shared/helpers/specs/timeHelper.spec.js
@@ -0,0 +1,92 @@
+import {
+  messageStamp,
+  messageTimestamp,
+  dynamicTime,
+  dateFormat,
+  shortTimestamp,
+} from 'shared/helpers/timeHelper';
+
+beforeEach(() => {
+  process.env.TZ = 'UTC';
+  vi.useFakeTimers('modern');
+  const mockDate = new Date(Date.UTC(2023, 4, 5));
+  vi.setSystemTime(mockDate);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('#messageStamp', () => {
+  it('returns correct value', () => {
+    expect(messageStamp(1612971343)).toEqual('3:35 PM');
+    expect(messageStamp(1612971343, 'LLL d, h:mm a')).toEqual(
+      'Feb 10, 3:35 PM'
+    );
+  });
+});
+
+describe('#messageTimestamp', () => {
+  it('should return the message date in the specified format if the message was sent in the current year', () => {
+    expect(messageTimestamp(1680777464)).toEqual('Apr 6, 2023');
+  });
+  it('should return the message date and time in a different format if the message was sent in a different year', () => {
+    expect(messageTimestamp(1612971343)).toEqual('Feb 10 2021, 3:35 PM');
+  });
+});
+
+describe('#dynamicTime', () => {
+  it('returns correct value', () => {
+    Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
+    expect(dynamicTime(1612971343)).toEqual('about 2 years ago');
+  });
+});
+
+describe('#dateFormat', () => {
+  it('returns correct value', () => {
+    expect(dateFormat(1612971343)).toEqual('Feb 10, 2021');
+    expect(dateFormat(1612971343, 'LLL d, yyyy')).toEqual('Feb 10, 2021');
+  });
+});
+
+describe('#shortTimestamp', () => {
+  // Test cases when withAgo is false or not provided
+  it('returns correct value without ago', () => {
+    expect(shortTimestamp('less than a minute ago')).toEqual('now');
+    expect(shortTimestamp('1 minute ago')).toEqual('1m');
+    expect(shortTimestamp('12 minutes ago')).toEqual('12m');
+    expect(shortTimestamp('a minute ago')).toEqual('1m');
+    expect(shortTimestamp('an hour ago')).toEqual('1h');
+    expect(shortTimestamp('1 hour ago')).toEqual('1h');
+    expect(shortTimestamp('2 hours ago')).toEqual('2h');
+    expect(shortTimestamp('1 day ago')).toEqual('1d');
+    expect(shortTimestamp('a day ago')).toEqual('1d');
+    expect(shortTimestamp('3 days ago')).toEqual('3d');
+    expect(shortTimestamp('a month ago')).toEqual('1mo');
+    expect(shortTimestamp('1 month ago')).toEqual('1mo');
+    expect(shortTimestamp('2 months ago')).toEqual('2mo');
+    expect(shortTimestamp('a year ago')).toEqual('1y');
+    expect(shortTimestamp('1 year ago')).toEqual('1y');
+    expect(shortTimestamp('4 years ago')).toEqual('4y');
+  });
+
+  // Test cases when withAgo is true
+  it('returns correct value with ago', () => {
+    expect(shortTimestamp('less than a minute ago', true)).toEqual('now');
+    expect(shortTimestamp('1 minute ago', true)).toEqual('1m ago');
+    expect(shortTimestamp('12 minutes ago', true)).toEqual('12m ago');
+    expect(shortTimestamp('a minute ago', true)).toEqual('1m ago');
+    expect(shortTimestamp('an hour ago', true)).toEqual('1h ago');
+    expect(shortTimestamp('1 hour ago', true)).toEqual('1h ago');
+    expect(shortTimestamp('2 hours ago', true)).toEqual('2h ago');
+    expect(shortTimestamp('1 day ago', true)).toEqual('1d ago');
+    expect(shortTimestamp('a day ago', true)).toEqual('1d ago');
+    expect(shortTimestamp('3 days ago', true)).toEqual('3d ago');
+    expect(shortTimestamp('a month ago', true)).toEqual('1mo ago');
+    expect(shortTimestamp('1 month ago', true)).toEqual('1mo ago');
+    expect(shortTimestamp('2 months ago', true)).toEqual('2mo ago');
+    expect(shortTimestamp('a year ago', true)).toEqual('1y ago');
+    expect(shortTimestamp('1 year ago', true)).toEqual('1y ago');
+    expect(shortTimestamp('4 years ago', true)).toEqual('4y ago');
+  });
+});
diff --git a/app/javascript/shared/helpers/timeHelper.js b/app/javascript/shared/helpers/timeHelper.js
new file mode 100644
index 0000000000000..6e041c7ec99b9
--- /dev/null
+++ b/app/javascript/shared/helpers/timeHelper.js
@@ -0,0 +1,93 @@
+import {
+  format,
+  isSameYear,
+  fromUnixTime,
+  formatDistanceToNow,
+} from 'date-fns';
+
+/**
+ * Formats a Unix timestamp into a human-readable time format.
+ * @param {number} time - Unix timestamp.
+ * @param {string} [dateFormat='h:mm a'] - Desired format of the time.
+ * @returns {string} Formatted time string.
+ */
+export const messageStamp = (time, dateFormat = 'h:mm a') => {
+  const unixTime = fromUnixTime(time);
+  return format(unixTime, dateFormat);
+};
+
+/**
+ * Provides a formatted timestamp, adjusting the format based on the current year.
+ * @param {number} time - Unix timestamp.
+ * @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
+ * @returns {string} Formatted date string.
+ */
+export const messageTimestamp = (time, dateFormat = 'MMM d, yyyy') => {
+  const messageTime = fromUnixTime(time);
+  const now = new Date();
+  const messageDate = format(messageTime, dateFormat);
+  if (!isSameYear(messageTime, now)) {
+    return format(messageTime, 'LLL d y, h:mm a');
+  }
+  return messageDate;
+};
+
+/**
+ * Converts a Unix timestamp to a relative time string (e.g., 3 hours ago).
+ * @param {number} time - Unix timestamp.
+ * @returns {string} Relative time string.
+ */
+export const dynamicTime = time => {
+  const unixTime = fromUnixTime(time);
+  return formatDistanceToNow(unixTime, { addSuffix: true });
+};
+
+/**
+ * Formats a Unix timestamp into a specified date format.
+ * @param {number} time - Unix timestamp.
+ * @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
+ * @returns {string} Formatted date string.
+ */
+export const dateFormat = (time, df = 'MMM d, yyyy') => {
+  const unixTime = fromUnixTime(time);
+  return format(unixTime, df);
+};
+
+/**
+ * Converts a detailed time description into a shorter format, optionally appending 'ago'.
+ * @param {string} time - Detailed time description (e.g., 'a minute ago').
+ * @param {boolean} [withAgo=false] - Whether to append 'ago' to the result.
+ * @returns {string} Shortened time description.
+ */
+export const shortTimestamp = (time, withAgo = false) => {
+  // This function takes a time string and converts it to a short time string
+  // with the following format: 1m, 1h, 1d, 1mo, 1y
+  // The function also takes an optional boolean parameter withAgo
+  // which will add the word "ago" to the end of the time string
+  const suffix = withAgo ? ' ago' : '';
+  const timeMappings = {
+    'less than a minute ago': 'now',
+    'a minute ago': `1m${suffix}`,
+    'an hour ago': `1h${suffix}`,
+    'a day ago': `1d${suffix}`,
+    'a month ago': `1mo${suffix}`,
+    'a year ago': `1y${suffix}`,
+  };
+  // Check if the time string is one of the specific cases
+  if (timeMappings[time]) {
+    return timeMappings[time];
+  }
+  const convertToShortTime = time
+    .replace(/about|over|almost|/g, '')
+    .replace(' minute ago', `m${suffix}`)
+    .replace(' minutes ago', `m${suffix}`)
+    .replace(' hour ago', `h${suffix}`)
+    .replace(' hours ago', `h${suffix}`)
+    .replace(' day ago', `d${suffix}`)
+    .replace(' days ago', `d${suffix}`)
+    .replace(' month ago', `mo${suffix}`)
+    .replace(' months ago', `mo${suffix}`)
+    .replace(' year ago', `y${suffix}`)
+    .replace(' years ago', `y${suffix}`);
+  return convertToShortTime;
+};
diff --git a/app/javascript/shared/mixins/alertMixin.js b/app/javascript/shared/mixins/alertMixin.js
deleted file mode 100644
index 376d53beea0e2..0000000000000
--- a/app/javascript/shared/mixins/alertMixin.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { emitter } from 'shared/helpers/mitt';
-
-export default {
-  methods: {
-    showAlert(message, action) {
-      emitter.emit('newToastMessage', message, action);
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/configMixin.js b/app/javascript/shared/mixins/configMixin.js
deleted file mode 100644
index 6973b7e7027c6..0000000000000
--- a/app/javascript/shared/mixins/configMixin.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-  computed: {
-    hostURL() {
-      return window.chatwootConfig.hostURL;
-    },
-    vapidPublicKey() {
-      return window.chatwootConfig.vapidPublicKey;
-    },
-    enabledLanguages() {
-      return window.chatwootConfig.enabledLanguages;
-    },
-    isEnterprise() {
-      return window.chatwootConfig.isEnterprise === 'true';
-    },
-    enterprisePlanName() {
-      // returns "community" or "enterprise"
-      return window.chatwootConfig?.enterprisePlanName;
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/contentTypeMixin.js b/app/javascript/shared/mixins/contentTypeMixin.js
deleted file mode 100644
index 149d7b7b77b0f..0000000000000
--- a/app/javascript/shared/mixins/contentTypeMixin.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { CONTENT_TYPES } from '../constants/contentType';
-
-export default {
-  computed: {
-    isEmailContentType() {
-      return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/globalConfigMixin.js b/app/javascript/shared/mixins/globalConfigMixin.js
index bb5a894684058..3f0796b590325 100644
--- a/app/javascript/shared/mixins/globalConfigMixin.js
+++ b/app/javascript/shared/mixins/globalConfigMixin.js
@@ -1,8 +1,12 @@
+export const useInstallationName = (str, installationName) => {
+  if (str && installationName) {
+    return str.replace(/Chatwoot/g, installationName);
+  }
+  return str;
+};
+
 export default {
   methods: {
-    // eslint-disable-next-line default-param-last
-    useInstallationName(str = '', installationName) {
-      return str.replace(/Chatwoot/g, installationName);
-    },
+    useInstallationName,
   },
 };
diff --git a/app/javascript/shared/mixins/rtlMixin.js b/app/javascript/shared/mixins/rtlMixin.js
deleted file mode 100644
index 6ea906d63ec62..0000000000000
--- a/app/javascript/shared/mixins/rtlMixin.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
-
-export default {
-  mixins: [uiSettingsMixin],
-  computed: {
-    isRTLView() {
-      const { rtl_view: isRTLView } = this.uiSettings;
-      return isRTLView;
-    },
-  },
-  methods: {
-    updateRTLDirectionView(locale) {
-      const isRTLSupported = getLanguageDirection(locale);
-      this.updateUISettings({
-        rtl_view: isRTLSupported,
-      });
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/specs/MockComponent.vue b/app/javascript/shared/mixins/specs/MockComponent.vue
index 050205f70cd98..55cd226144abe 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/shared/mixins/specs/automationMixin.spec.js b/app/javascript/shared/mixins/specs/automationMixin.spec.js
index 465e6e9b4c9c2..336e35294aeee 100644
--- a/app/javascript/shared/mixins/specs/automationMixin.spec.js
+++ b/app/javascript/shared/mixins/specs/automationMixin.spec.js
@@ -1,5 +1,4 @@
 import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin';
-import validationsMixin from '../../../dashboard/mixins/automations/validationsMixin';
 import {
   automation,
   customAttributes,
@@ -30,8 +29,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 // Vuelidate required to test submit method
-import Vuelidate from 'vuelidate';
-Vue.use(Vuelidate);
 
 const createComponent = (
   mixins,
@@ -451,13 +448,3 @@ describe('automationMethodsMixin', () => {
     );
   });
 });
-
-describe('automationValidationsMixin', () => {
-  it('automationValidationsMixin is present', () => {
-    const data = () => {
-      return {};
-    };
-    const wrapper = createComponent([validationsMixin], data, {}, {});
-    expect(typeof wrapper.vm.$options.validations).toBe('object');
-  });
-});
diff --git a/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js b/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js
deleted file mode 100644
index a523c05137741..0000000000000
--- a/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import contentTypeMixin from '../contentTypeMixin';
-
-describe('contentTypeMixin', () => {
-  it('returns true if contentType is incoming_email', () => {
-    const Component = {
-      render() {},
-      mixins: [contentTypeMixin],
-      computed: {
-        contentType() {
-          return 'incoming_email';
-        },
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isEmailContentType).toBe(true);
-  });
-
-  it('returns false if contentType is not incoming_email', () => {
-    const Component = {
-      render() {},
-      mixins: [contentTypeMixin],
-      computed: {
-        contentType() {
-          return 'input_select';
-        },
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isEmailContentType).toBe(false);
-  });
-});
diff --git a/app/javascript/shared/mixins/specs/rtlMixin.spec.js b/app/javascript/shared/mixins/specs/rtlMixin.spec.js
deleted file mode 100644
index 3669dcd707fd2..0000000000000
--- a/app/javascript/shared/mixins/specs/rtlMixin.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import rtlMixin from 'shared/mixins/rtlMixin';
-
-describe('rtlMixin', () => {
-  const createComponent = rtl_view => {
-    return shallowMount({
-      render() {},
-      mixins: [rtlMixin],
-      computed: {
-        uiSettings() {
-          return { rtl_view };
-        },
-      },
-    });
-  };
-
-  it('returns is direction right-to-left view', () => {
-    const wrapper = createComponent(true);
-    expect(wrapper.vm.isRTLView).toBe(true);
-  });
-
-  it('returns is direction left-to-right view', () => {
-    const wrapper = createComponent(false);
-    expect(wrapper.vm.isRTLView).toBe(false);
-  });
-});
diff --git a/app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js b/app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js
index 29b652bc5a7fc..a461df430d6a3 100644
--- a/app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js
+++ b/app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js
@@ -3,11 +3,10 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { templates } from './fixtures';
 const localVue = createLocalVue();
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import i18n from 'dashboard/i18n';
+import { nextTick } from 'vue';
 
 localVue.use(VueI18n);
-localVue.use(Vuelidate);
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 const config = {
@@ -20,30 +19,32 @@ const config = {
 };
 
 describe('#WhatsAppTemplates', () => {
-  it('returns all variables from a template string', () => {
+  it('returns all variables from a template string', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[0] },
     });
+    await nextTick();
     expect(wrapper.vm.variables).toEqual(['{{1}}', '{{2}}', '{{3}}']);
   });
 
-  it('returns no variables from a template string if it does not contain variables', () => {
+  it('returns no variables from a template string if it does not contain variables', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[12] },
     });
+    await nextTick();
     expect(wrapper.vm.variables).toBeNull();
   });
 
-  it('returns the body of a template', () => {
+  it('returns the body of a template', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[1] },
     });
-    const expectedOutput = templates[1].components.find(
-      i => i.type === 'BODY'
-    ).text;
+    await nextTick();
+    const expectedOutput =
+      templates[1].components.find(i => i.type === 'BODY')?.text || '';
     expect(wrapper.vm.templateString).toEqual(expectedOutput);
   });
 
@@ -51,14 +52,12 @@ describe('#WhatsAppTemplates', () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[0] },
-      data: () => {
-        return { processedParams: {} };
-      },
     });
+    await nextTick();
     await wrapper.setData({
       processedParams: { 1: 'abc', 2: 'xyz', 3: 'qwerty' },
     });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     const expectedOutput =
       'Esta é a sua confirmação de voo para abc-xyz em qwerty.';
     expect(wrapper.vm.processedString).toEqual(expectedOutput);
diff --git a/app/javascript/superadmin_pages/components/playground/Header.vue b/app/javascript/superadmin_pages/components/playground/Header.vue
index e17dad4155f2a..23c6061d79721 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 f1fb4752a3f59..eda4941cce1b4 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -1,53 +1,18 @@
-<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,
   },
-  mixins: [messageFormatterMixin, keyboardEventListenerMixins],
+  mixins: [messageFormatterMixin],
   props: {
     componentData: {
       type: Object,
@@ -69,16 +34,6 @@ export default {
     this.focusInput();
   },
   methods: {
-    getKeyboardEvents() {
-      return {
-        '$mod+Enter': {
-          action: () => {
-            this.onMessageSend();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
     focusInput() {
       this.$refs.messageInput.focus();
     },
@@ -137,3 +92,39 @@ 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"
+        @keydown.meta.enter="onMessageSend"
+        @keydown.ctrl.enter="onMessageSend"
+      />
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/survey/App.vue b/app/javascript/survey/App.vue
index 076ca9fe7b326..32ebf29705cbf 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 b178b6797ba32..f2a907bf6f1de 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 2b870cc477560..fcae0cb31c497 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 530bc6c215539..8d1e84bcf825f 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/i18n/locale/ca.json b/app/javascript/survey/i18n/locale/ca.json
index 72b5d72e92a2e..d74c7f84d1da5 100644
--- a/app/javascript/survey/i18n/locale/ca.json
+++ b/app/javascript/survey/i18n/locale/ca.json
@@ -1,17 +1,17 @@
 {
   "SURVEY": {
-    "DESCRIPTION": "Dear customer 👋, please take a few moments to share feedback about the conversation you had with %{inboxName}.",
+    "DESCRIPTION": "Benvolgut client 👋, preneu-vos un moment per compartir uns comentaris sobre la conversa que heu tingut amb %{inboxName}.",
     "RATING": {
-      "LABEL": "Rate your conversation",
-      "SUCCESS_MESSAGE": "Thank you for submitting the rating"
+      "LABEL": "Valora la teva conversa",
+      "SUCCESS_MESSAGE": "Gràcies per enviar la qualificació"
     },
     "FEEDBACK": {
-      "LABEL": "Do you have any thoughts you'd like to share?",
-      "PLACEHOLDER": "Your feedback (optional)",
-      "BUTTON_TEXT": "Submit feedback"
+      "LABEL": "Tens alguna reflexió que t'agradaria compartir?",
+      "PLACEHOLDER": "Els teus comentaris (opcional)",
+      "BUTTON_TEXT": "Envieu comentaris"
     },
     "API": {
-      "SUCCESS_MESSAGE": "Survey updated successfully",
+      "SUCCESS_MESSAGE": "Enquesta actualitzada correctament",
       "ERROR_MESSAGE": "No s'ha pogut connectar amb el servidor Woot. Torna-ho a provar més endavant"
     }
   },
diff --git a/app/javascript/survey/i18n/locale/pt_BR.json b/app/javascript/survey/i18n/locale/pt_BR.json
index 26047db1cccb4..98739cdb789f0 100644
--- a/app/javascript/survey/i18n/locale/pt_BR.json
+++ b/app/javascript/survey/i18n/locale/pt_BR.json
@@ -6,9 +6,9 @@
       "SUCCESS_MESSAGE": "Obrigado por enviar a classificação"
     },
     "FEEDBACK": {
-      "LABEL": "Você tem alguma ideia que gostaria de compartilhar?",
-      "PLACEHOLDER": "Seu feedback (opcional)",
-      "BUTTON_TEXT": "Enviar feedback"
+      "LABEL": "Você tem alguma opinião que gostaria de compartilhar?",
+      "PLACEHOLDER": "Sua avaliação (opcional)",
+      "BUTTON_TEXT": "Enviar avaliação"
     },
     "API": {
       "SUCCESS_MESSAGE": "Pesquisa atualizada com sucesso",
diff --git a/app/javascript/survey/i18n/locale/tl.json b/app/javascript/survey/i18n/locale/tl.json
new file mode 100644
index 0000000000000..2473f114e8dc3
--- /dev/null
+++ b/app/javascript/survey/i18n/locale/tl.json
@@ -0,0 +1,19 @@
+{
+  "SURVEY": {
+    "DESCRIPTION": "Dear customer 👋, please take a few moments to share feedback about the conversation you had with %{inboxName}.",
+    "RATING": {
+      "LABEL": "Rate your conversation",
+      "SUCCESS_MESSAGE": "Thank you for submitting the rating"
+    },
+    "FEEDBACK": {
+      "LABEL": "Do you have any thoughts you'd like to share?",
+      "PLACEHOLDER": "Your feedback (optional)",
+      "BUTTON_TEXT": "Submit feedback"
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Survey updated successfully",
+      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+    }
+  },
+  "POWERED_BY": "Powered by Chatwoot"
+}
diff --git a/app/javascript/survey/views/Response.vue b/app/javascript/survey/views/Response.vue
index 7619a5f8a72f6..f3cc6d4881a56 100644
--- a/app/javascript/survey/views/Response.vue
+++ b/app/javascript/survey/views/Response.vue
@@ -1,65 +1,11 @@
-<template>
-  <div
-    v-if="isLoading"
-    class="flex flex-1 items-center h-full bg-black-25 justify-center"
-  >
-    <spinner size="" />
-  </div>
-  <div
-    v-else
-    class="w-full h-full flex overflow-auto bg-slate-50 items-center justify-center"
-  >
-    <div
-      class="flex bg-white shadow-lg rounded-lg flex-col w-full lg:w-2/5 h-full lg:h-auto"
-    >
-      <div class="w-full my-0 m-auto px-12 pt-12 pb-6">
-        <img v-if="logo" :src="logo" alt="Chatwoot logo" class="logo mb-6" />
-        <p
-          v-if="!isRatingSubmitted"
-          class="text-black-700 text-lg leading-relaxed mb-8"
-        >
-          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
-        </p>
-        <banner
-          v-if="shouldShowBanner"
-          :show-success="shouldShowSuccessMesage"
-          :show-error="shouldShowErrorMesage"
-          :message="message"
-        />
-        <label
-          v-if="!isRatingSubmitted"
-          class="text-base font-medium text-black-800 mb-4"
-        >
-          {{ $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';
 import Spinner from 'shared/components/Spinner.vue';
 import Rating from 'survey/components/Rating.vue';
 import Feedback from 'survey/components/Feedback.vue';
 import Banner from 'survey/components/Banner.vue';
-import configMixin from 'shared/mixins/configMixin';
 import { getSurveyDetails, updateSurvey } from 'survey/api/survey';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   name: 'Response',
@@ -70,14 +16,6 @@ export default {
     Banner,
     Feedback,
   },
-  mixins: [alertMixin, configMixin],
-  props: {
-    showHomePage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
   data() {
     return {
       surveyDetails: null,
@@ -176,6 +114,7 @@ export default {
       } catch (error) {
         const errorMessage = error?.response?.data?.error;
         this.errorMessage = errorMessage || this.$t('SURVEY.API.ERROR_MESSAGE');
+        useAlert(this.errorMessage);
       } finally {
         this.isUpdating = false;
       }
@@ -187,6 +126,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 c645ce5a4a72e..6bfa4fafa247f 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 a291b642e00b0..474dde8c28765 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 e54af17477905..9413aeacc4500 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 16d4273078ddb..74d8ada4fa2fc 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 c70a122e6798c..fe5baf41d2c34 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 2a489ee766fd7..ad427acaf55a0 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 63064b6545b38..0d5dcdc02fce6 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 fb802d35dea95..32eff693af179 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
-    <img
-      v-if="shouldShowImage"
-      class="rounded-xl h-[72px] w-[72px]"
-      :alt="name"
-      :src="src"
-      draggable="false"
-      @load="onImageLoad"
-      @error="onImageLoadError"
-    />
-    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onImageUpload"
-    />
-    <div class="hidden group-hover:block">
-      <button
-        v-if="src"
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
-        @click="onAvatarDelete"
-      >
-        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
-      </button>
-      <button
-        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-        @click="openFileInput"
-      >
-        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-      </button>
-    </div>
-  </div>
-</template>
 <script setup>
 import { computed, ref } from 'vue';
 import InitialsAvatar from './InitialsAvatar.vue';
@@ -49,7 +12,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['change', 'delete']);
+const emit = defineEmits(['change', 'delete']);
 
 const hasImageLoaded = ref(false);
 const imageLoadedError = ref(false);
@@ -72,13 +35,51 @@ const openFileInput = () => {
 
 const onImageUpload = event => {
   const [file] = event.target.files;
-  emits('change', {
+  emit('change', {
     file,
     url: file ? URL.createObjectURL(file) : null,
   });
 };
 
 const onAvatarDelete = () => {
-  emits('delete');
+  emit('delete');
 };
 </script>
+
+<template>
+  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
+    <img
+      v-if="shouldShowImage"
+      class="rounded-xl h-[72px] w-[72px]"
+      :alt="name"
+      :src="src"
+      draggable="false"
+      @load="onImageLoad"
+      @error="onImageLoadError"
+    />
+    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      hidden
+      @change="onImageUpload"
+    />
+    <div class="hidden group-hover:block">
+      <button
+        v-if="src"
+        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
+        @click="onAvatarDelete"
+      >
+        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
+      </button>
+      <button
+        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+        @click="openFileInput"
+      >
+        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/components/Form/RadioTags.vue b/app/javascript/v3/components/Form/RadioTags.vue
index 7cb221132081e..8d2e49fb28c51 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 67a311b04caa8..00334f24b9805 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 cb9751d62beca..62bcb6e2d9193 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 736d4f72b5f7b..8c533387c5dc6 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 be7fefffdd99b..68840604b4aa1 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 0d4d2a866b981..eb502e1aae0bc 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 683480af6be66..07b27ef462145 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';
@@ -39,7 +24,7 @@ export default {
     this.$emitter.off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage(message, action) {
+    onNewToastMessage({ message, action }) {
       this.snackbarAlertMessages.push({
         key: new Date().getTime(),
         message,
@@ -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 b87845ad6c23c..25c719c76f0ac 100644
--- a/app/javascript/v3/components/SnackBar/Item.vue
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -1,19 +1,3 @@
-<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"
-    :class="isActionPresent ? 'justify-between' : 'justify-center'"
-  >
-    <div class="text-sm font-medium text-white">
-      {{ message }}
-    </div>
-    <div v-if="isActionPresent" class="ml-4">
-      <router-link v-if="action.type == 'link'" :to="action.to" class="">
-        {{ action.message }}
-      </router-link>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -22,11 +6,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    showButton: Boolean,
-    duration: {
-      type: [String, Number],
-      default: 3000,
-    },
   },
   computed: {
     isActionPresent() {
@@ -35,3 +14,19 @@ export default {
   },
 };
 </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"
+    :class="isActionPresent ? 'justify-between' : 'justify-center'"
+  >
+    <div class="text-sm font-medium text-white">
+      {{ message }}
+    </div>
+    <div v-if="isActionPresent" class="ml-4">
+      <router-link v-if="action.type == 'link'" :to="action.to" class="">
+        {{ action.message }}
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 51fa95f7cf25e..906009883d42c 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 c5f2ba7fea994..bbe0e01eca885 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -1,70 +1,22 @@
-<template>
-  <div
-    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
-  >
-    <form
-      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
-      @submit.prevent="submitForm"
-    >
-      <h1
-        class="mb-1 text-left text-2xl font-medium tracking-tight 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 { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import FormInput from '../../../components/Form/Input.vue';
 import SubmitButton from '../../../components/Button/SubmitButton.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     FormInput,
     SubmitButton,
   },
-  mixins: [alertMixin],
   props: {
     resetPasswordToken: { type: String, default: '' },
-    redirectUrl: { type: String, default: '' },
-    config: { type: String, default: '' },
+  },
+  setup() {
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -110,7 +62,7 @@ export default {
     showAlertMessage(message) {
       // Reset loading, current selected agent
       this.newPasswordAPI.showLoading = false;
-      this.showAlert(message);
+      useAlert(message);
     },
     submitForm() {
       this.newPasswordAPI.showLoading = true;
@@ -132,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 44be9fd0c33c2..c703f3f5833ab 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -1,63 +1,19 @@
-<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 { required, minLength, email } from 'vuelidate/lib/validators';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useVuelidate } from '@vuelidate/core';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength, email } from '@vuelidate/validators';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
 import SubmitButton from '../../../../components/Button/SubmitButton.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: { FormInput, SubmitButton },
-  mixins: [globalConfigMixin, alertMixin],
+  mixins: [globalConfigMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       credentials: { email: '' },
@@ -84,7 +40,7 @@ export default {
     showAlertMessage(message) {
       // Reset loading, current selected agent
       this.resetPassword.showLoading = false;
-      this.showAlert(message);
+      useAlert(message);
     },
     submit() {
       this.resetPassword.showLoading = true;
@@ -107,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 e1621db183b80..75ae10e9a6293 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,5 +1,39 @@
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SignupForm from './components/Signup/Form.vue';
+import Testimonials from './components/Testimonials/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    SignupForm,
+    Spinner,
+    Testimonials,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return { isLoading: false };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    isAChatwootInstance() {
+      return this.globalConfig.installationName === 'Chatwoot';
+    },
+  },
+  beforeMount() {
+    this.isLoading = this.isAChatwootInstance;
+  },
+  methods: {
+    resizeContainers() {
+      this.isLoading = false;
+    },
+  },
+};
+</script>
+
 <template>
-  <div class="h-full w-full dark:bg-slate-900">
+  <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"
@@ -9,22 +43,22 @@
             <img
               :src="globalConfig.logo"
               :alt="globalConfig.installationName"
-              class="h-8 w-auto block dark:hidden"
+              class="block w-auto h-8 dark:hidden"
             />
             <img
               v-if="globalConfig.logoDark"
               :src="globalConfig.logoDark"
               :alt="globalConfig.installationName"
-              class="h-8 w-auto hidden dark:block"
+              class="hidden w-auto h-8 dark:block"
             />
             <h2
-              class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
+              class="mt-6 text-3xl font-medium text-left mb-7 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">
+          <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">
               {{
@@ -37,51 +71,17 @@
           </div>
         </div>
       </div>
-      <testimonials
+      <Testimonials
         v-if="isAChatwootInstance"
         class="flex-1"
-        @resize-containers="resizeContainers"
+        @resizeContainers="resizeContainers"
       />
     </div>
     <div
       v-show="isLoading"
-      class="flex items-center justify-center h-full w-full"
+      class="flex items-center justify-center w-full h-full"
     >
-      <spinner color-scheme="primary" size="" />
+      <Spinner color-scheme="primary" size="" />
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SignupForm from './components/Signup/Form.vue';
-import Testimonials from './components/Testimonials/Index.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    SignupForm,
-    Spinner,
-    Testimonials,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return { isLoading: false };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    isAChatwootInstance() {
-      return this.globalConfig.installationName === 'Chatwoot';
-    },
-  },
-  beforeMount() {
-    this.isLoading = this.isAChatwootInstance;
-  },
-  methods: {
-    resizeContainers() {
-      this.isLoading = false;
-    },
-  },
-};
-</script>
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 898e26ddd6abd..e2a30aa2fcebe 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -1,88 +1,9 @@
-<template>
-  <div class="flex-1 overflow-auto px-1">
-    <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 { required, minLength, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import alertMixin from 'shared/mixins/alertMixin';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
@@ -99,7 +20,10 @@ export default {
     SubmitButton,
     VueHcaptcha,
   },
-  mixins: [globalConfigMixin, alertMixin],
+  mixins: [globalConfigMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       credentials: {
@@ -155,7 +79,7 @@ export default {
       return true;
     },
     passwordErrorText() {
-      const { password } = this.$v.credentials;
+      const { password } = this.v$.credentials;
       if (!password.$error) {
         return '';
       }
@@ -173,8 +97,8 @@ export default {
   },
   methods: {
     async submit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         this.resetCaptcha();
         return;
       }
@@ -186,7 +110,7 @@ export default {
         let errorMessage =
           error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
         this.resetCaptcha();
-        this.showAlert(errorMessage);
+        useAlert(errorMessage);
       } finally {
         this.isSignupInProgress = false;
       }
@@ -206,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 be15a85752e87..718efc7ef28b8 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -1,23 +1,49 @@
+<script>
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from '../../../../../api/testimonials';
+export default {
+  components: { TestimonialCard },
+  data() {
+    return { testimonials: [] };
+  },
+  beforeMount() {
+    this.fetchTestimonials();
+  },
+  methods: {
+    async fetchTestimonials() {
+      try {
+        const { data } = await getTestimonialContent();
+        this.testimonials = data;
+      } catch (error) {
+        // Ignoring the error as the UI wouldn't break
+      } finally {
+        this.$emit('resizeContainers', !!this.testimonials.length);
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="testimonials.length"
-    class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
+    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="left-0 absolute h-40 w-40 top-0"
+      class="absolute top-0 left-0 w-40 h-40"
     />
     <img
       src="/assets/images/auth/bottom-right.svg"
-      class="right-0 absolute h-40 w-40 bottom-0"
+      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="flex items-center justify-center flex-col h-full w-full z-50">
+    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
       <div class="flex items-start justify-center p-6">
-        <testimonial-card
+        <TestimonialCard
           v-for="(testimonial, index) in testimonials"
           :key="testimonial.id"
           :review-content="testimonial.authorReview"
@@ -31,32 +57,6 @@
   </div>
 </template>
 
-<script>
-import TestimonialCard from './TestimonialCard.vue';
-import { getTestimonialContent } from '../../../../../api/testimonials';
-export default {
-  components: { TestimonialCard },
-  data() {
-    return { testimonials: [] };
-  },
-  beforeMount() {
-    this.fetchTestimonials();
-  },
-  methods: {
-    async fetchTestimonials() {
-      try {
-        const { data } = await getTestimonialContent();
-        this.testimonials = data;
-      } catch (error) {
-        // Ignoring the error as the UI wouldn't break
-      } finally {
-        this.$emit('resize-containers', !!this.testimonials.length);
-      }
-    },
-  },
-};
-</script>
-
 <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 af83413794034..c68ce53f56bde 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 5a481dd5a0f9c..677b6b87f40ff 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -1,97 +1,7 @@
-<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="submitLogin">
-          <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 { required, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import SubmitButton from '../../components/Button/SubmitButton.vue';
 import { mapGetters } from 'vuex';
@@ -104,7 +14,6 @@ const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
   'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
 };
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
@@ -113,15 +22,17 @@ export default {
     Spinner,
     SubmitButton,
   },
-  mixins: [globalConfigMixin, alertMixin],
+  mixins: [globalConfigMixin],
   props: {
     ssoAuthToken: { type: String, default: '' },
     ssoAccountId: { type: String, default: '' },
     ssoConversationId: { type: String, default: '' },
-    config: { type: String, default: '' },
     email: { type: String, default: '' },
     authError: { type: String, default: '' },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       // We need to initialize the component with any
@@ -164,7 +75,7 @@ export default {
     }
     if (this.authError) {
       const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
-      this.showAlert(this.$t(message));
+      useAlert(this.$t(message));
       // wait for idle state
       this.requestIdleCallbackPolyfill(() => {
         // Remove the error query param from the url
@@ -191,14 +102,9 @@ export default {
       // Reset loading, current selected agent
       this.loginApi.showLoading = false;
       this.loginApi.message = message;
-      this.showAlert(this.loginApi.message);
+      useAlert(this.loginApi.message);
     },
     submitLogin() {
-      if (this.$v.credentials.email.$invalid && !this.email) {
-        this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
-        return;
-      }
-
       this.loginApi.hasErrored = false;
       this.loginApi.showLoading = true;
 
@@ -227,6 +133,106 @@ export default {
           );
         });
     },
+    submitFormLogin() {
+      if (this.v$.credentials.email.$invalid && !this.email) {
+        this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
+        return;
+      }
+
+      this.submitLogin();
+    },
   },
 };
 </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 2ef6da67dbd0d..fbd3d17d4ac52 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 072323d53a587..6645465c596d0 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 c38726031fe64..e7d592abdbf30 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -1,103 +1,15 @@
-<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="chat-bubble has-attachment space-y-2 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';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { messageStamp } from 'shared/helpers/timeHelper';
 import ImageBubble from 'widget/components/ImageBubble.vue';
 import VideoBubble from 'widget/components/VideoBubble.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
-import messageMixin from '../mixins/messageMixin';
+import { useMessage } from '../composables/useMessage';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
@@ -116,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [timeMixin, configMixin, messageMixin, darkModeMixin],
+  mixins: [configMixin, darkModeMixin],
   props: {
     message: {
       type: Object,
@@ -127,6 +39,15 @@ export default {
       default: () => {},
     },
   },
+  setup(props) {
+    const { messageContentAttributes, hasAttachments } = useMessage(
+      props.message
+    );
+    return {
+      messageContentAttributes,
+      hasAttachments,
+    };
+  },
   data() {
     return {
       hasImageError: false,
@@ -146,7 +67,7 @@ export default {
     },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;
-      return this.messageStamp(createdAt, 'LLL d yyyy, h:mm a');
+      return messageStamp(createdAt, 'LLL d yyyy, h:mm a');
     },
     messageType() {
       const { message_type: type = 1 } = this.message;
@@ -246,3 +167,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 f5bad52fceaf3..c1c0cc8d054f2 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 e8f8e7b09ba1b..a84d8fc7b38c4 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 1b01930439fca..45d898bf99e8f 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 3d29ca6112c02..1a98e7aa4d36e 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 4043bf0603b6f..5aef7e265e4b1 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 f16afa5e11e48..a7e8286499fa4 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 8ce66332138a5..275d44ec1000b 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 7e51b887b2873..10ecd7afbefd3 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 173dfabb2e97e..bdd11a5b7b309 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 5d038a66bfc07..0779a675f3c50 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 7d755ef68bc61..ab6b396e89b00 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 079f337aacaaa..5083f6ef5a87e 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 144c907006443..864985fdef0fd 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 f285a64d53ba0..c68ec3fdfac12 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 c3a586f23f109..2b1d9d6ecd67d 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 8a8819962febe..c6db0fcf577a4 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 144bcc37f26eb..509d2c16852ed 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 c0fa424ba090e..4213a0a578358 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 873622a7ceac9..85b8573d1f05a 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 44879ad064b26..faba119f05793 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 e0124196d37a1..f16870cdad46b 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 ffa9edef2e6be..3c1c7a81c5cc3 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 c7fafa916c7f4..68ea3f8cb2f6b 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 0b9255e75aaed..3532b09f03adf 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 0841214d6c4aa..bb6906e680ca9 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -1,3 +1,18 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  name: 'GroupedAvatars',
+  components: { Thumbnail },
+  props: {
+    users: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex">
     <span
@@ -7,7 +22,7 @@
         index ? '-ml-4' : ''
       } inline-block rounded-full text-white shadow-solid`"
     >
-      <thumbnail
+      <Thumbnail
         size="36px"
         :username="user.name"
         :src="user.avatar"
@@ -16,18 +31,3 @@
     </span>
   </div>
 </template>
-
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  name: 'GroupedAvatars',
-  components: { Thumbnail },
-  props: {
-    users: {
-      type: Array,
-      default: () => [],
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 1fa4d9f399254..df8b5fdbf6835 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 8bf0784000860..08bca34648e51 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 4f8bf4a25874c..16520f1e8a93f 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 3ff597c67563c..596ba16d9a7b3 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -1,90 +1,21 @@
-<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';
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { isEmptyObject } from 'widget/helpers/utils';
+import { getRegexp } from 'shared/helpers/Validators';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import routerMixin from 'widget/mixins/routerMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 import configMixin from 'widget/mixins/configMixin';
-import customAttributeMixin from '../../../dashboard/mixins/customAttributeMixin';
 
 export default {
   components: {
     CustomButton,
     Spinner,
   },
-  mixins: [
-    routerMixin,
-    darkModeMixin,
-    messageFormatterMixin,
-    configMixin,
-    customAttributeMixin,
-  ],
+  mixins: [routerMixin, darkModeMixin, messageFormatterMixin, configMixin],
   props: {
     options: {
       type: Object,
@@ -247,7 +178,7 @@ export default {
       return this.formValues[name] || null;
     },
     getValidation({ type, name, field_type, regex_pattern }) {
-      let regex = regex_pattern ? this.getRegexp(regex_pattern) : null;
+      let regex = regex_pattern ? getRegexp(regex_pattern) : null;
       const validations = {
         emailAddress: 'email',
         phoneNumber: ['startsWithPlus', 'isValidPhoneNumber'],
@@ -316,6 +247,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 919f1bcfe8ca6..ac2d255b12e12 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 df38af763cef7..0f8c2c28b6a5a 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 984dfbe3f3bff..18aaaccacae53 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 cefd0cc99db54..b90ad9011000c 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 875457c42bcb6..54c3f475373d7 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 c6120b3ce31a9..f8a713723c7f3 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 5a97422dbff97..7c7d844e9dc37 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';
@@ -83,8 +5,8 @@ import ImageBubble from 'widget/components/ImageBubble.vue';
 import VideoBubble from 'widget/components/VideoBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
-import timeMixin from 'dashboard/mixins/time';
-import messageMixin from '../mixins/messageMixin';
+import { messageStamp } from 'shared/helpers/timeHelper';
+import { useMessage } from '../composables/useMessage';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import DragWrapper from 'widget/components/DragWrapper.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -103,7 +25,6 @@ export default {
     ReplyToChip,
     DragWrapper,
   },
-  mixins: [timeMixin, messageMixin],
   props: {
     message: {
       type: Object,
@@ -114,6 +35,12 @@ export default {
       default: () => {},
     },
   },
+  setup(props) {
+    const { hasAttachments } = useMessage(props.message);
+    return {
+      hasAttachments,
+    };
+  },
   data() {
     return {
       hasImageError: false,
@@ -135,7 +62,7 @@ export default {
     },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;
-      return this.messageStamp(createdAt);
+      return messageStamp(createdAt);
     },
     isFailed() {
       const { status = '' } = this.message;
@@ -180,3 +107,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 eed90865f1df4..0887c07304ed8 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 0ba72d3638cf2..3196c6ff2d480 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 85db8ad21ce23..a8a34ec9a3e64 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 5665b3ea82859..ae185331704b6 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 dad629a16825f..338344154ce76 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 f022215bd8ee6..65d8209ba6aed 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -1,3 +1,22 @@
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  mixins: [messageFormatterMixin, darkModeMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="!!items.length"
@@ -7,7 +26,7 @@
     <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
+          <FluentIcon
             icon="link"
             class="mr-1"
             :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -27,25 +46,6 @@
   </div>
 </template>
 
-<script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
-
-export default {
-  components: {
-    FluentIcon,
-  },
-  mixins: [messageFormatterMixin, darkModeMixin],
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-  },
-};
-</script>
-
 <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 be7176076c9be..2d95569eb092e 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -1,37 +1,7 @@
-<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 { required, email } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -54,6 +24,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -79,7 +52,7 @@ export default {
         ${this.$dm('border-black-200', 'dark:border-black-500')}`;
     },
     inputHasError() {
-      return this.$v.email.$error
+      return this.v$.email.$error
         ? `${this.inputColor} error`
         : `${this.inputColor}`;
     },
@@ -92,7 +65,7 @@ export default {
   },
   methods: {
     async onSubmit() {
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.isUpdating = true;
@@ -111,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 6ce22d26ba1e9..e96c81648b7ee 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/composables/specs/useMessage.spec.js b/app/javascript/widget/composables/specs/useMessage.spec.js
new file mode 100644
index 0000000000000..1498c87af62d4
--- /dev/null
+++ b/app/javascript/widget/composables/specs/useMessage.spec.js
@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { reactive, nextTick } from 'vue';
+import { useMessage } from '../useMessage';
+
+describe('useMessage', () => {
+  it('should handle deleted messages', () => {
+    const message = reactive({
+      content_attributes: { deleted: true },
+      attachments: [],
+    });
+
+    const { messageContentAttributes, hasAttachments } = useMessage(message);
+
+    expect(messageContentAttributes.value).toEqual({ deleted: true });
+    expect(hasAttachments.value).toBe(false);
+  });
+
+  it('should handle non-deleted messages with attachments', () => {
+    const message = reactive({
+      content_attributes: {},
+      attachments: ['attachment1', 'attachment2'],
+    });
+
+    const { messageContentAttributes, hasAttachments } = useMessage(message);
+
+    expect(messageContentAttributes.value).toEqual({});
+    expect(hasAttachments.value).toBe(true);
+  });
+
+  it('should handle messages without content_attributes', () => {
+    const message = reactive({
+      attachments: [],
+    });
+
+    const { messageContentAttributes, hasAttachments } = useMessage(message);
+
+    expect(messageContentAttributes.value).toEqual({});
+    expect(hasAttachments.value).toBe(false);
+  });
+
+  it('should handle messages with empty attachments array', () => {
+    const message = reactive({
+      content_attributes: { someAttribute: 'value' },
+      attachments: [],
+    });
+
+    const { messageContentAttributes, hasAttachments } = useMessage(message);
+
+    expect(messageContentAttributes.value).toEqual({ someAttribute: 'value' });
+    expect(hasAttachments.value).toBe(false);
+  });
+
+  it('should update reactive properties when message changes', async () => {
+    const message = reactive({
+      content_attributes: {},
+      attachments: [],
+    });
+
+    const { messageContentAttributes, hasAttachments } = useMessage(message);
+
+    expect(messageContentAttributes.value).toEqual({});
+    expect(hasAttachments.value).toBe(false);
+
+    message.content_attributes = { updated: true };
+    message.attachments.push('newAttachment');
+    await nextTick();
+
+    expect(messageContentAttributes.value).toEqual({ updated: true });
+    expect(hasAttachments.value).toBe(true);
+  });
+});
diff --git a/app/javascript/widget/composables/useMessage.js b/app/javascript/widget/composables/useMessage.js
new file mode 100644
index 0000000000000..97b7a7800bf9c
--- /dev/null
+++ b/app/javascript/widget/composables/useMessage.js
@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+
+/**
+ * Composable for handling message-related computations.
+ * @param {Object} message - The message object to be processed.
+ * @returns {Object} An object containing computed properties for message content and attachments.
+ */
+export function useMessage(message) {
+  const messageContentAttributes = computed(() => {
+    const { content_attributes: attribute = {} } = message;
+    return attribute;
+  });
+
+  const hasAttachments = computed(() => {
+    return !!(message.attachments && message.attachments.length > 0);
+  });
+
+  return {
+    messageContentAttributes,
+    hasAttachments,
+  };
+}
diff --git a/app/javascript/widget/i18n/locale/ar.json b/app/javascript/widget/i18n/locale/ar.json
index 2e76a6b0512c9..5a5454c4489dd 100644
--- a/app/javascript/widget/i18n/locale/ar.json
+++ b/app/javascript/widget/i18n/locale/ar.json
@@ -20,7 +20,7 @@
     "IN_A_FEW_MINUTES": "عادة نقوم بالرد خلال بضع دقائق",
     "IN_A_FEW_HOURS": "عادة نقوم بالرد خلال بضع ساعات",
     "IN_A_DAY": "عادة نقوم بالرد خلال يوم واحد",
-    "BACK_IN": "We will be back online"
+    "BACK_IN": "سوف نعود إلى الإنترنت"
   },
   "DAY_NAMES": [
     "الأحد",
@@ -68,8 +68,8 @@
         "LABEL": "رقم الهاتف",
         "PLACEHOLDER": "الرجاء إدخال رقم الهاتف الخاص بك",
         "REQUIRED_ERROR": "رقم الهاتف مطلوب",
-        "DIAL_CODE_VALID_ERROR": "الرجاء اختيار رمز البلد",
-        "VALID_ERROR": "Please enter a valid phone number",
+        "DIAL_CODE_VALID_ERROR": "الرجاء اختيار رمز الدولة",
+        "VALID_ERROR": "يرجى إدخال رقم هاتف صحيح",
         "DROPDOWN_EMPTY": "لم يتم العثور على النتائج"
       },
       "MESSAGE": {
@@ -81,7 +81,7 @@
     "CAMPAIGN_HEADER": "الرجاء تقديم اسمك و بريدك الإلكتروني قبل بدء المحادثة",
     "IS_REQUIRED": "مطلوب",
     "REQUIRED": "مطلوب",
-    "REGEX_ERROR": "Please provide a valid input"
+    "REGEX_ERROR": "الرجاء تقديم مدخل صحيح"
   },
   "FILE_SIZE_LIMIT": "حجم الملف يتجاوز حد الاقصى وهو {MAXIMUM_FILE_UPLOAD_SIZE}",
   "CHAT_FORM": {
@@ -105,14 +105,14 @@
   },
   "INTEGRATIONS": {
     "DYTE": {
-      "CLICK_HERE_TO_JOIN": "Click here to join",
-      "LEAVE_THE_ROOM": "Leave the call"
+      "CLICK_HERE_TO_JOIN": "انقر هنا للانضمام",
+      "LEAVE_THE_ROOM": "ترك المكالمة"
     }
   },
   "PORTAL": {
-    "POPULAR_ARTICLES": "Popular Articles",
-    "VIEW_ALL_ARTICLES": "View all articles",
-    "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
+    "POPULAR_ARTICLES": "المقالات الشائعة",
+    "VIEW_ALL_ARTICLES": "عرض جميع المقالات",
+    "IFRAME_LOAD_ERROR": "حدث خطأ أثناء جلب المقال، الرجاء تحديث الصفحة والمحاولة مرة أخرى."
   },
   "ATTACHMENTS": {
     "image": {
diff --git a/app/javascript/widget/i18n/locale/ca.json b/app/javascript/widget/i18n/locale/ca.json
index 13cd889c8ae53..a7c676c133e7e 100644
--- a/app/javascript/widget/i18n/locale/ca.json
+++ b/app/javascript/widget/i18n/locale/ca.json
@@ -8,8 +8,8 @@
       "SUBMIT": "Envia"
     },
     "MESSAGE_BUBBLE": {
-      "RETRY": "Send message again",
-      "ERROR_MESSAGE": "Couldn't send, try again"
+      "RETRY": "Torna a enviar el missatge",
+      "ERROR_MESSAGE": "No s'ha pogut enviar, torna-ho a provar"
     }
   },
   "TEAM_AVAILABILITY": {
@@ -20,27 +20,27 @@
     "IN_A_FEW_MINUTES": "Normalment responem en pocs minuts",
     "IN_A_FEW_HOURS": "Normalment responem en poques hores",
     "IN_A_DAY": "Normalment respon en un dia",
-    "BACK_IN": "We will be back online"
+    "BACK_IN": "Tornarem a estar en línia"
   },
   "DAY_NAMES": [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday"
+    "Diumenge",
+    "Dilluns",
+    "Dimarts",
+    "Dimecres",
+    "Dijous",
+    "Divendres",
+    "Dissabte"
   ],
   "START_CONVERSATION": "Inicia la conversa",
-  "END_CONVERSATION": "End Conversation",
-  "CONTINUE_CONVERSATION": "Continue conversation",
-  "YOU": "You",
-  "START_NEW_CONVERSATION": "Start a new conversation",
-  "VIEW_UNREAD_MESSAGES": "You have unread messages",
+  "END_CONVERSATION": "Finalitzar la conversa",
+  "CONTINUE_CONVERSATION": "Continua la conversa",
+  "YOU": "Tu",
+  "START_NEW_CONVERSATION": "Inicia una nova conversa",
+  "VIEW_UNREAD_MESSAGES": "Tens missatges no llegits",
   "UNREAD_VIEW": {
     "VIEW_MESSAGES_BUTTON": "Veure missatges nous",
     "CLOSE_MESSAGES_BUTTON": "Tanca",
-    "COMPANY_FROM": "from",
+    "COMPANY_FROM": "des de",
     "BOT": "Bot"
   },
   "BUBBLE": {
@@ -61,15 +61,15 @@
       "EMAIL_ADDRESS": {
         "LABEL": "Adreça de correu electrònic",
         "PLACEHOLDER": "Si us plau, introdueix la teva adreça email",
-        "REQUIRED_ERROR": "Email Address is required",
+        "REQUIRED_ERROR": "L'adreça de correu electrònic és necessària",
         "VALID_ERROR": "Introduïu una adreça de correu electrònic vàlida"
       },
       "PHONE_NUMBER": {
         "LABEL": "Número de telèfon",
-        "PLACEHOLDER": "Please enter your phone number",
-        "REQUIRED_ERROR": "Phone Number is required",
-        "DIAL_CODE_VALID_ERROR": "Please select a country code",
-        "VALID_ERROR": "Please enter a valid phone number",
+        "PLACEHOLDER": "Introdueix el vostre número de telèfon",
+        "REQUIRED_ERROR": "El número de telèfon és obligatori",
+        "DIAL_CODE_VALID_ERROR": "Selecciona un codi de país",
+        "VALID_ERROR": "Introdueix un número de telèfon vàlid",
         "DROPDOWN_EMPTY": "No s'ha trobat agents"
       },
       "MESSAGE": {
@@ -78,15 +78,15 @@
         "ERROR": "Missatge massa curt"
       }
     },
-    "CAMPAIGN_HEADER": "Please provide your name and email before starting the conversation",
-    "IS_REQUIRED": "is required",
-    "REQUIRED": "Required",
-    "REGEX_ERROR": "Please provide a valid input"
+    "CAMPAIGN_HEADER": "Proporciona el vostre nom i correu electrònic abans d'iniciar la conversa",
+    "IS_REQUIRED": "és necessari",
+    "REQUIRED": "Necessari",
+    "REGEX_ERROR": "Proporciona una entrada vàlida"
   },
-  "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
+  "FILE_SIZE_LIMIT": "El fitxer supera el límit de {MAXIMUM_FILE_UPLOAD_SIZE} fitxers adjunts",
   "CHAT_FORM": {
     "INVALID": {
-      "FIELD": "Invalid field"
+      "FIELD": "Camp no vàlid"
     }
   },
   "EMOJI": {
@@ -94,25 +94,25 @@
     "NOT_FOUND": "Cap emoji coincideix amb la teva cerca"
   },
   "CSAT": {
-    "TITLE": "Rate your conversation",
-    "SUBMITTED_TITLE": "Thank you for submitting the rating",
-    "PLACEHOLDER": "Tell us more..."
+    "TITLE": "Valora la teva conversa",
+    "SUBMITTED_TITLE": "Gràcies per enviar la qualificació",
+    "PLACEHOLDER": "Explica'ns més..."
   },
   "EMAIL_TRANSCRIPT": {
-    "BUTTON_TEXT": "Request a conversation transcript",
+    "BUTTON_TEXT": "Envia la transcripció de la conversa",
     "SEND_EMAIL_SUCCESS": "La transcripció del xat s'ha enviat correctament",
     "SEND_EMAIL_ERROR": "S'ha produït un error; tornau-ho a provar"
   },
   "INTEGRATIONS": {
     "DYTE": {
-      "CLICK_HERE_TO_JOIN": "Click here to join",
-      "LEAVE_THE_ROOM": "Leave the call"
+      "CLICK_HERE_TO_JOIN": "Fes clic aquí per unir-te",
+      "LEAVE_THE_ROOM": "Deixa la trucada"
     }
   },
   "PORTAL": {
-    "POPULAR_ARTICLES": "Popular Articles",
-    "VIEW_ALL_ARTICLES": "View all articles",
-    "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
+    "POPULAR_ARTICLES": "Articles populars",
+    "VIEW_ALL_ARTICLES": "Veure tots els articles",
+    "IFRAME_LOAD_ERROR": "S'ha produït un error en carregar l'article, actualitza la pàgina i torna-ho a provar."
   },
   "ATTACHMENTS": {
     "image": {
diff --git a/app/javascript/widget/i18n/locale/de.json b/app/javascript/widget/i18n/locale/de.json
index 36a5202bdfac1..ff2c0c5a7a5ff 100644
--- a/app/javascript/widget/i18n/locale/de.json
+++ b/app/javascript/widget/i18n/locale/de.json
@@ -34,7 +34,7 @@
   "START_CONVERSATION": "Unterhaltung beginnen",
   "END_CONVERSATION": "Konversation beenden",
   "CONTINUE_CONVERSATION": "Konversation fortsetzen",
-  "YOU": "You",
+  "YOU": "Sie",
   "START_NEW_CONVERSATION": "Neue Unterhaltung starten",
   "VIEW_UNREAD_MESSAGES": "Sie haben ungelesene Nachrichten",
   "UNREAD_VIEW": {
diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json
index 83b442e5139c3..33399e09be4a3 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/i18n/locale/hr.json b/app/javascript/widget/i18n/locale/hr.json
index 23d3383d5b027..e817ba1650f17 100644
--- a/app/javascript/widget/i18n/locale/hr.json
+++ b/app/javascript/widget/i18n/locale/hr.json
@@ -17,38 +17,38 @@
     "OFFLINE": "Trenutačno nismo online"
   },
   "REPLY_TIME": {
-    "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
-    "IN_A_FEW_HOURS": "Typically replies in a few hours",
-    "IN_A_DAY": "Typically replies in a day",
-    "BACK_IN": "We will be back online"
+    "IN_A_FEW_MINUTES": "Obično odgovara za nekoliko minuta",
+    "IN_A_FEW_HOURS": "Obično odgovara za nekoliko sati",
+    "IN_A_DAY": "Obično odgovara u roku jednog dana",
+    "BACK_IN": "Bit ćemo ponovno online"
   },
   "DAY_NAMES": [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday"
+    "Nedjelja",
+    "Ponedjeljak",
+    "Utorak",
+    "Srijeda",
+    "Četvrtak",
+    "Petak",
+    "Subota"
   ],
-  "START_CONVERSATION": "Start Conversation",
-  "END_CONVERSATION": "End Conversation",
-  "CONTINUE_CONVERSATION": "Continue conversation",
-  "YOU": "You",
-  "START_NEW_CONVERSATION": "Start a new conversation",
-  "VIEW_UNREAD_MESSAGES": "You have unread messages",
+  "START_CONVERSATION": "Započnite razgovor",
+  "END_CONVERSATION": "Završite razgovor",
+  "CONTINUE_CONVERSATION": "Nastavite razgovor",
+  "YOU": "Vi",
+  "START_NEW_CONVERSATION": "Započnite novi razgovor",
+  "VIEW_UNREAD_MESSAGES": "Imate nepročitane poruke",
   "UNREAD_VIEW": {
-    "VIEW_MESSAGES_BUTTON": "See new messages",
-    "CLOSE_MESSAGES_BUTTON": "Close",
-    "COMPANY_FROM": "from",
+    "VIEW_MESSAGES_BUTTON": "Pogledajte nove poruke",
+    "CLOSE_MESSAGES_BUTTON": "Zatvori",
+    "COMPANY_FROM": "od",
     "BOT": "Bot"
   },
   "BUBBLE": {
-    "LABEL": "Chat with us"
+    "LABEL": "Čavrljajte s nama"
   },
-  "POWERED_BY": "Powered by Chatwoot",
-  "EMAIL_PLACEHOLDER": "Please enter your email",
-  "CHAT_PLACEHOLDER": "Type your message",
+  "POWERED_BY": "Pokreće Chatwoot",
+  "EMAIL_PLACEHOLDER": "Unesite svoju e-mail adresu",
+  "CHAT_PLACEHOLDER": "Unesite svoju poruku",
   "TODAY": "Danas",
   "YESTERDAY": "Jučer",
   "PRE_CHAT_FORM": {
@@ -78,60 +78,60 @@
         "ERROR": "Poruka je prekratka"
       }
     },
-    "CAMPAIGN_HEADER": "Please provide your name and email before starting the conversation",
-    "IS_REQUIRED": "is required",
-    "REQUIRED": "Required",
-    "REGEX_ERROR": "Please provide a valid input"
+    "CAMPAIGN_HEADER": "Molimo unesite svoje ime i e-mail prije početka razgovora",
+    "IS_REQUIRED": "je obavezno",
+    "REQUIRED": "Obavezno",
+    "REGEX_ERROR": "Molimo unesite važeći unos"
   },
-  "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
+  "FILE_SIZE_LIMIT": "Datoteka prelazi ograničenje priloga za {MAXIMUM_FILE_UPLOAD_SIZE}",
   "CHAT_FORM": {
     "INVALID": {
-      "FIELD": "Invalid field"
+      "FIELD": "Nevažeće polje"
     }
   },
   "EMOJI": {
-    "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "PLACEHOLDER": "Pretraži emojije",
+    "NOT_FOUND": "Nema emojija koji odgovaraju vašoj pretrazi"
   },
   "CSAT": {
-    "TITLE": "Rate your conversation",
-    "SUBMITTED_TITLE": "Thank you for submitting the rating",
-    "PLACEHOLDER": "Tell us more..."
+    "TITLE": "Ocijenite vaš razgovor",
+    "SUBMITTED_TITLE": "Hvala vam na ocjeni",
+    "PLACEHOLDER": "Recite nam više..."
   },
   "EMAIL_TRANSCRIPT": {
-    "BUTTON_TEXT": "Request a conversation transcript",
-    "SEND_EMAIL_SUCCESS": "The chat transcript was sent successfully",
-    "SEND_EMAIL_ERROR": "There was an error, please try again"
+    "BUTTON_TEXT": "Zatražite transkript razgovora",
+    "SEND_EMAIL_SUCCESS": "Transkript razgovora je uspješno poslan",
+    "SEND_EMAIL_ERROR": "Došlo je do pogreške, molimo pokušajte ponovo"
   },
   "INTEGRATIONS": {
     "DYTE": {
-      "CLICK_HERE_TO_JOIN": "Click here to join",
-      "LEAVE_THE_ROOM": "Leave the call"
+      "CLICK_HERE_TO_JOIN": "Kliknite ovdje za pridruživanje",
+      "LEAVE_THE_ROOM": "Napustite poziv"
     }
   },
   "PORTAL": {
-    "POPULAR_ARTICLES": "Popular Articles",
-    "VIEW_ALL_ARTICLES": "View all articles",
-    "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
+    "POPULAR_ARTICLES": "Popularni članci",
+    "VIEW_ALL_ARTICLES": "Pogledajte sve članke",
+    "IFRAME_LOAD_ERROR": "Došlo je do pogreške pri učitavanju članka, molimo osvježite stranicu i pokušajte ponovo"
   },
   "ATTACHMENTS": {
     "image": {
-      "CONTENT": "Picture message"
+      "CONTENT": "Poruka sa slikom"
     },
     "audio": {
-      "CONTENT": "Audio message"
+      "CONTENT": "Poruka sa zvukom"
     },
     "video": {
-      "CONTENT": "Video message"
+      "CONTENT": "Video poruka"
     },
     "file": {
-      "CONTENT": "File Attachment"
+      "CONTENT": "Privitak datoteke"
     },
     "location": {
-      "CONTENT": "Location"
+      "CONTENT": "Lokacija"
     },
     "fallback": {
-      "CONTENT": "has shared a url"
+      "CONTENT": "je podijelio/la url"
     }
   }
 }
diff --git a/app/javascript/widget/i18n/locale/id.json b/app/javascript/widget/i18n/locale/id.json
index 6daedd2bb6214..e16ae309796ad 100644
--- a/app/javascript/widget/i18n/locale/id.json
+++ b/app/javascript/widget/i18n/locale/id.json
@@ -34,9 +34,9 @@
   "START_CONVERSATION": "Mulai Percakapan",
   "END_CONVERSATION": "Akhiri Percakapan",
   "CONTINUE_CONVERSATION": "Lanjutkan Percakapan",
-  "YOU": "You",
+  "YOU": "Anda",
   "START_NEW_CONVERSATION": "Mulai Percakapan",
-  "VIEW_UNREAD_MESSAGES": "You have unread messages",
+  "VIEW_UNREAD_MESSAGES": "Anda memiliki pesan yang belum dibaca",
   "UNREAD_VIEW": {
     "VIEW_MESSAGES_BUTTON": "Lihat pesan baru",
     "CLOSE_MESSAGES_BUTTON": "Tutup",
@@ -81,7 +81,7 @@
     "CAMPAIGN_HEADER": "Silahkan input nama dan email anda sebelum memulai percakapan",
     "IS_REQUIRED": "dibutuhkan",
     "REQUIRED": "Diperlukan",
-    "REGEX_ERROR": "Please provide a valid input"
+    "REGEX_ERROR": "Tolong berikan masukan yang tepat"
   },
   "FILE_SIZE_LIMIT": "File melebihi batas {MAXIMUM_FILE_UPLOAD_SIZE} lampiran",
   "CHAT_FORM": {
@@ -110,9 +110,9 @@
     }
   },
   "PORTAL": {
-    "POPULAR_ARTICLES": "Popular Articles",
+    "POPULAR_ARTICLES": "Artikel Populer",
     "VIEW_ALL_ARTICLES": "Lihat semua artikel",
-    "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
+    "IFRAME_LOAD_ERROR": "Terjadi kesalahan saat memuat artikel, harap muat ulang halaman dan coba lagi."
   },
   "ATTACHMENTS": {
     "image": {
diff --git a/app/javascript/widget/i18n/locale/pt.json b/app/javascript/widget/i18n/locale/pt.json
index 8adadabfdedcf..5f4cf1db18a91 100644
--- a/app/javascript/widget/i18n/locale/pt.json
+++ b/app/javascript/widget/i18n/locale/pt.json
@@ -95,7 +95,7 @@
   },
   "CSAT": {
     "TITLE": "Avalie a sua conversa",
-    "SUBMITTED_TITLE": "Obrigado pela sua Avaliação",
+    "SUBMITTED_TITLE": "Obrigado pela sua avaliação",
     "PLACEHOLDER": "Conte-nos mais..."
   },
   "EMAIL_TRANSCRIPT": {
diff --git a/app/javascript/widget/i18n/locale/sk.json b/app/javascript/widget/i18n/locale/sk.json
index 0e2cf74ee4ecf..158305259fc50 100644
--- a/app/javascript/widget/i18n/locale/sk.json
+++ b/app/javascript/widget/i18n/locale/sk.json
@@ -8,7 +8,7 @@
       "SUBMIT": "Odoslať"
     },
     "MESSAGE_BUBBLE": {
-      "RETRY": "Send message again",
+      "RETRY": "Znova odoslať správu",
       "ERROR_MESSAGE": "Couldn't send, try again"
     }
   },
@@ -23,18 +23,18 @@
     "BACK_IN": "We will be back online"
   },
   "DAY_NAMES": [
-    "Sunday",
-    "Monday",
+    "Nedeľa",
+    "Pondelok",
     "Tuesday",
-    "Wednesday",
+    "Streda",
     "Thursday",
-    "Friday",
+    "Piatok",
     "Saturday"
   ],
   "START_CONVERSATION": "Začať konverzáciu",
-  "END_CONVERSATION": "End Conversation",
-  "CONTINUE_CONVERSATION": "Continue conversation",
-  "YOU": "You",
+  "END_CONVERSATION": "Ukončiť konverzáciu",
+  "CONTINUE_CONVERSATION": "Pokračovať v konverzácii",
+  "YOU": "Vy",
   "START_NEW_CONVERSATION": "Začať novú konverzáciu",
   "VIEW_UNREAD_MESSAGES": "You have unread messages",
   "UNREAD_VIEW": {
@@ -61,25 +61,25 @@
       "EMAIL_ADDRESS": {
         "LABEL": "E-mailová adresa",
         "PLACEHOLDER": "Zadajte svoj e-mail",
-        "REQUIRED_ERROR": "Email Address is required",
+        "REQUIRED_ERROR": "E-mailová adresa je povinná",
         "VALID_ERROR": "Prosím zadajte platnú e-mailovú adresu"
       },
       "PHONE_NUMBER": {
         "LABEL": "Telefónne číslo",
-        "PLACEHOLDER": "Please enter your phone number",
-        "REQUIRED_ERROR": "Phone Number is required",
-        "DIAL_CODE_VALID_ERROR": "Please select a country code",
+        "PLACEHOLDER": "Zadajte svoje telefónne číslo",
+        "REQUIRED_ERROR": "Telefónne číslo je povinné",
+        "DIAL_CODE_VALID_ERROR": "Vyberte kód krajiny",
         "VALID_ERROR": "Please enter a valid phone number",
         "DROPDOWN_EMPTY": "Žiadne výsledky neboli nájdené"
       },
       "MESSAGE": {
         "LABEL": "Správa",
         "PLACEHOLDER": "Zadajte svoju správu",
-        "ERROR": "Message too short"
+        "ERROR": "Správa je príliš krátka"
       }
     },
     "CAMPAIGN_HEADER": "Please provide your name and email before starting the conversation",
-    "IS_REQUIRED": "is required",
+    "IS_REQUIRED": "je povinné",
     "REQUIRED": "Povinné",
     "REGEX_ERROR": "Please provide a valid input"
   },
@@ -106,12 +106,12 @@
   "INTEGRATIONS": {
     "DYTE": {
       "CLICK_HERE_TO_JOIN": "Click here to join",
-      "LEAVE_THE_ROOM": "Leave the call"
+      "LEAVE_THE_ROOM": "Opustiť hovor"
     }
   },
   "PORTAL": {
     "POPULAR_ARTICLES": "Popular Articles",
-    "VIEW_ALL_ARTICLES": "View all articles",
+    "VIEW_ALL_ARTICLES": "Zobraziť všetky články",
     "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
   },
   "ATTACHMENTS": {
diff --git a/app/javascript/widget/i18n/locale/tl.json b/app/javascript/widget/i18n/locale/tl.json
new file mode 100644
index 0000000000000..83b442e5139c3
--- /dev/null
+++ b/app/javascript/widget/i18n/locale/tl.json
@@ -0,0 +1,137 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Download",
+      "UPLOADING": "Uploading..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Submit"
+    },
+    "MESSAGE_BUBBLE": {
+      "RETRY": "Send message again",
+      "ERROR_MESSAGE": "Couldn't send, try again"
+    }
+  },
+  "TEAM_AVAILABILITY": {
+    "ONLINE": "We are online",
+    "OFFLINE": "We are away at the moment"
+  },
+  "REPLY_TIME": {
+    "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
+    "IN_A_FEW_HOURS": "Typically replies in a few hours",
+    "IN_A_DAY": "Typically replies in a day",
+    "BACK_IN": "We will be back online"
+  },
+  "DAY_NAMES": [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ],
+  "START_CONVERSATION": "Start Conversation",
+  "END_CONVERSATION": "End Conversation",
+  "CONTINUE_CONVERSATION": "Continue conversation",
+  "YOU": "You",
+  "START_NEW_CONVERSATION": "Start a new conversation",
+  "VIEW_UNREAD_MESSAGES": "You have unread messages",
+  "UNREAD_VIEW": {
+    "VIEW_MESSAGES_BUTTON": "See new messages",
+    "CLOSE_MESSAGES_BUTTON": "Close",
+    "COMPANY_FROM": "from",
+    "BOT": "Bot"
+  },
+  "BUBBLE": {
+    "LABEL": "Chat with us"
+  },
+  "POWERED_BY": "Powered by Chatwoot",
+  "EMAIL_PLACEHOLDER": "Please enter your email",
+  "CHAT_PLACEHOLDER": "Type your message",
+  "TODAY": "Today",
+  "YESTERDAY": "Yesterday",
+  "PRE_CHAT_FORM": {
+    "FIELDS": {
+      "FULL_NAME": {
+        "LABEL": "Full Name",
+        "PLACEHOLDER": "Please enter your full name",
+        "REQUIRED_ERROR": "Full Name is required"
+      },
+      "EMAIL_ADDRESS": {
+        "LABEL": "Email Address",
+        "PLACEHOLDER": "Please enter your email address",
+        "REQUIRED_ERROR": "Email Address is required",
+        "VALID_ERROR": "Please enter a valid email address"
+      },
+      "PHONE_NUMBER": {
+        "LABEL": "Phone Number",
+        "PLACEHOLDER": "Please enter your phone number",
+        "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"
+      },
+      "MESSAGE": {
+        "LABEL": "Message",
+        "PLACEHOLDER": "Please enter your message",
+        "ERROR": "Message too short"
+      }
+    },
+    "CAMPAIGN_HEADER": "Please provide your name and email before starting the conversation",
+    "IS_REQUIRED": "is required",
+    "REQUIRED": "Required",
+    "REGEX_ERROR": "Please provide a valid input"
+  },
+  "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
+  "CHAT_FORM": {
+    "INVALID": {
+      "FIELD": "Invalid field"
+    }
+  },
+  "EMOJI": {
+    "PLACEHOLDER": "Search emojis",
+    "NOT_FOUND": "No emoji match your search"
+  },
+  "CSAT": {
+    "TITLE": "Rate your conversation",
+    "SUBMITTED_TITLE": "Thank you for submitting the rating",
+    "PLACEHOLDER": "Tell us more..."
+  },
+  "EMAIL_TRANSCRIPT": {
+    "BUTTON_TEXT": "Request a conversation transcript",
+    "SEND_EMAIL_SUCCESS": "The chat transcript was sent successfully",
+    "SEND_EMAIL_ERROR": "There was an error, please try again"
+  },
+  "INTEGRATIONS": {
+    "DYTE": {
+      "CLICK_HERE_TO_JOIN": "Click here to join",
+      "LEAVE_THE_ROOM": "Leave the call"
+    }
+  },
+  "PORTAL": {
+    "POPULAR_ARTICLES": "Popular Articles",
+    "VIEW_ALL_ARTICLES": "View all articles",
+    "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
+  },
+  "ATTACHMENTS": {
+    "image": {
+      "CONTENT": "Picture message"
+    },
+    "audio": {
+      "CONTENT": "Audio message"
+    },
+    "video": {
+      "CONTENT": "Video message"
+    },
+    "file": {
+      "CONTENT": "File Attachment"
+    },
+    "location": {
+      "CONTENT": "Location"
+    },
+    "fallback": {
+      "CONTENT": "has shared a url"
+    }
+  }
+}
diff --git a/app/javascript/widget/mixins/messageMixin.js b/app/javascript/widget/mixins/messageMixin.js
deleted file mode 100644
index dfa1e0e6a5202..0000000000000
--- a/app/javascript/widget/mixins/messageMixin.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  computed: {
-    messageContentAttributes() {
-      const { content_attributes: attribute = {} } = this.message;
-      return attribute;
-    },
-    hasAttachments() {
-      return !!(
-        this.message.attachments && this.message.attachments.length > 0
-      );
-    },
-  },
-};
diff --git a/app/javascript/widget/mixins/specs/messageMixin.spec.js b/app/javascript/widget/mixins/specs/messageMixin.spec.js
deleted file mode 100644
index a6443ccd63ae9..0000000000000
--- a/app/javascript/widget/mixins/specs/messageMixin.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import messageMixin from '../messageMixin';
-import messages from './messageFixture';
-
-describe('messageMixin', () => {
-  let Component = {
-    render() {},
-    title: 'TestComponent',
-    mixins: [messageMixin],
-  };
-
-  it('deleted messages', async () => {
-    const wrapper = shallowMount(Component, {
-      data() {
-        return {
-          message: messages.deletedMessage,
-        };
-      },
-    });
-    expect(wrapper.vm.messageContentAttributes).toEqual({
-      deleted: true,
-    });
-    expect(wrapper.vm.hasAttachments).toBe(false);
-  });
-  it('non-deleted messages', async () => {
-    const wrapper = shallowMount(Component, {
-      data() {
-        return {
-          message: messages.nonDeletedMessage,
-        };
-      },
-    });
-    expect(wrapper.vm.deletedMessage).toBe(undefined);
-    expect(wrapper.vm.messageContentAttributes).toEqual({});
-    expect(wrapper.vm.hasAttachments).toBe(true);
-  });
-});
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
index 4a5d587ba5b8d..c9525a7061e27 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 d28d0e4f486d3..42c639f951312 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 35b4ab8997372..5695f9e65de97 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 ce473b521fe1f..bbfb24129857a 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 254782db73753..cb122a2f3cf52 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 c37b0763c18c3..fbf7fd48c4269 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>
diff --git a/app/jobs/hook_job.rb b/app/jobs/hook_job.rb
index 29c6dccfefb5f..1912fac019ca1 100644
--- a/app/jobs/hook_job.rb
+++ b/app/jobs/hook_job.rb
@@ -9,6 +9,8 @@ def perform(hook, event_name, event_data = {})
       process_slack_integration(hook, event_name, event_data)
     when 'dialogflow'
       process_dialogflow_integration(hook, event_name, event_data)
+    when 'captain'
+      process_captain_integration(hook, event_name, event_data)
     when 'google_translate'
       google_translate_integration(hook, event_name, event_data)
     end
@@ -35,6 +37,12 @@ def process_dialogflow_integration(hook, event_name, event_data)
     Integrations::Dialogflow::ProcessorService.new(event_name: event_name, hook: hook, event_data: event_data).perform
   end
 
+  def process_captain_integration(hook, event_name, event_data)
+    return unless ['message.created'].include?(event_name)
+
+    Integrations::Captain::ProcessorService.new(event_name: event_data, hook: hook, event_data: event_data).perform
+  end
+
   def google_translate_integration(hook, event_name, event_data)
     return unless ['message.created'].include?(event_name)
 
diff --git a/app/models/attachment.rb b/app/models/attachment.rb
index 1fb93c51af064..b9ed804d3beee 100644
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -39,7 +39,7 @@ class Attachment < ApplicationRecord
   validate :acceptable_file
   validates :external_url, length: { maximum: Limits::URL_LENGTH_LIMIT }
   enum file_type: { :image => 0, :audio => 1, :video => 2, :file => 3, :location => 4, :fallback => 5, :share => 6, :story_mention => 7,
-                    :contact => 8 }
+                    :contact => 8, :ig_reel => 9 }
 
   def push_event_data
     return unless file_type
@@ -81,7 +81,7 @@ def file_metadata
       height: file.metadata[:height]
     }
 
-    metadata[:data_url] = metadata[:thumb_url] = external_url if message.inbox.instagram?
+    metadata[:data_url] = metadata[:thumb_url] = external_url if message.inbox.instagram? && message.incoming?
     metadata
   end
 
diff --git a/app/models/inbox.rb b/app/models/inbox.rb
index 17f4fc045c544..8158ab733e9f8 100644
--- a/app/models/inbox.rb
+++ b/app/models/inbox.rb
@@ -129,7 +129,16 @@ def assignable_agents
   end
 
   def active_bot?
-    agent_bot_inbox&.active? || hooks.where(app_id: 'dialogflow', status: 'enabled').count.positive?
+    agent_bot_inbox&.active? || hooks.where(app_id: %w[dialogflow],
+                                            status: 'enabled').count.positive? || captain_enabled?
+  end
+
+  def captain_enabled?
+    captain_hook = account.hooks.where(
+      app_id: %w[captain], status: 'enabled'
+    ).first
+
+    captain_hook.present? && captain_hook.settings['inbox_ids'].split(',').include?(id.to_s)
   end
 
   def inbox_type
diff --git a/app/models/integrations/app.rb b/app/models/integrations/app.rb
index b746bd92b4cc0..9629bdd84374d 100644
--- a/app/models/integrations/app.rb
+++ b/app/models/integrations/app.rb
@@ -34,10 +34,14 @@ def action
     end
   end
 
-  def active?
+  def active?(account)
     case params[:id]
     when 'slack'
       ENV['SLACK_CLIENT_SECRET'].present?
+    when 'linear'
+      account.feature_enabled?('linear_integration')
+    when 'captain'
+      account.feature_enabled?('captain_integration') && ENV['CAPTAIN_API_URL'].present?
     else
       true
     end
@@ -45,10 +49,12 @@ def active?
 
   def enabled?(account)
     case params[:id]
-    when 'slack'
-      account.hooks.exists?(app_id: id)
+    when 'webhook'
+      account.webhooks.exists?
+    when 'dashboard_apps'
+      account.dashboard_apps.exists?
     else
-      true
+      account.hooks.exists?(app_id: id)
     end
   end
 
diff --git a/config/app.yml b/config/app.yml
index 7a5e893262d5b..cb0dd3109e367 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '3.11.1'
+  version: '3.12.0'
 
 development:
   <<: *shared
diff --git a/config/features.yml b/config/features.yml
index 98c4f608d8011..42cf3460d6e59 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -44,6 +44,7 @@
   help_url: https://chwt.app/hc/canned
 - name: integrations
   enabled: true
+  help_url: https://chwt.app/hc/integrations
 - name: voice_recorder
   enabled: true
 - name: mobile_v2
@@ -80,8 +81,11 @@
 - name: sla
   enabled: false
   premium: true
+  help_url: https://chwt.app/hc/sla
 - name: help_center_embedding_search
   enabled: false
   premium: true
 - name: linear_integration
   enabled: false
+- name: captain_integration
+  enabled: false
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 5784c3b6e4336..95d9cc6a5d7d5 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -217,3 +217,14 @@
   locked: false
   description: 'Contents on your firebase credentials json file'
 ## ------ End of Configs added for FCM v1 notifications ------ ##
+
+## ----- Captain Configs ----- ##
+- name: CAPTAIN_API_URL
+  value: 
+  display_title: 'Captain API URL'
+  description: 'The API URL for Captain'
+- name: CAPTAIN_APP_URL
+  value: 
+  display_title: 'Captain App URL'
+  description: 'The App URL for Captain'
+## ----- End of Captain Configs ----- ##
diff --git a/config/integration/apps.yml b/config/integration/apps.yml
index 538f7ee810843..24c19595c12de 100644
--- a/config/integration/apps.yml
+++ b/config/integration/apps.yml
@@ -8,24 +8,136 @@
 # settings_json_schema: the json schema used to validate the settings hash (https://json-schema.org/)
 # settings_form_schema: the formulate schema used in frontend to render settings form (https://vueformulate.com/)
 ########################################################
-
-slack:
-  id: slack
-  logo: slack.png
-  i18n_key: slack
-  action: https://slack.com/oauth/v2/authorize?scope=commands,chat:write,channels:read,channels:manage,channels:join,groups:read,groups:write,im:write,mpim:write,users:read,users:read.email,chat:write.customize,channels:history,groups:history,mpim:history,im:history,files:read,files:write
+captain:
+  id: captain
+  logo: captain.png
+  i18n_key: captain
+  action: /captain
   hook_type: account
   allow_multiple_hooks: false
+  settings_json_schema: {
+    "type": "object",
+    "properties": {
+        "access_token": { "type": "string" },
+        "account_id": { "type": "string" },
+        "account_email": { "type": "string" },
+        "assistant_id": { "type": "string" },
+        "inbox_ids": { "type": "strings" },
+      },
+    "required": ["access_token", "account_id", "account_email", "assistant_id"],
+    "additionalProperties": false,
+  }
+  settings_form_schema: [
+    {
+      "label": "Access Token",
+      "type": "text",
+      "name": "access_token",
+      "validation": "required",
+    },
+    {
+      "label": "Account ID",
+      "type": "text",
+      "name": "account_id",
+      "validation": "required",
+    },
+    {
+      "label": "Account Email",
+      "type": "text",
+      "name": "account_email",
+      "validation": "required",
+    },
+    {
+      "label": "Assistant Id",
+      "type": "text",
+      "name": "assistant_id",
+      "validation": "required",
+    },
+    {
+      "label": "Inbox Ids",
+      "type": "text",
+      "name": "inbox_ids",
+      "validation": "",
+    },
+  ]
+  visible_properties: []
 webhooks:
   id: webhook
-  logo: cable.svg
+  logo: webhooks.png
   i18n_key: webhooks
   action: /webhook
   hook_type: account
   allow_multiple_hooks: true
+dashboard_apps:
+  id: dashboard_apps
+  logo: dashboard_apps.png
+  i18n_key: dashboard_apps
+  hook_type: account
+  allow_multiple_hooks: true
+openai:
+  id: openai
+  logo: openai.png
+  i18n_key: openai
+  action: /openai
+  hook_type: account
+  allow_multiple_hooks: false
+  settings_json_schema: {
+    "type": "object",
+    "properties": {
+        "api_key": { "type": "string" },
+        "label_suggestion": { "type": "boolean" },
+      },
+    "required": ["api_key"],
+    "additionalProperties": false,
+  }
+  settings_form_schema: [
+    {
+      "label": "API Key",
+      "type": "text",
+      "name": "api_key",
+      "validation": "required",
+    },
+    {
+      "label": "Show label suggestions",
+      "type": "checkbox",
+      "name": "label_suggestion",
+      "validation": "",
+    },
+  ]
+  visible_properties: ['api_key', 'label_suggestion']
+linear:
+  id: linear
+  logo: linear.png
+  i18n_key: linear
+  action: /linear
+  hook_type: account
+  allow_multiple_hooks: false
+  settings_json_schema: {
+    "type": "object",
+    "properties": {
+        "api_key": { "type": "string" },
+      },
+    "required": ["api_key"],
+    "additionalProperties": false,
+  }
+  settings_form_schema: [
+    {
+      "label": "API Key",
+      "type": "text",
+      "name": "api_key",
+      "validation": "required",
+    },
+  ]
+  visible_properties: []
+slack:
+  id: slack
+  logo: slack.png
+  i18n_key: slack
+  action: https://slack.com/oauth/v2/authorize?scope=commands,chat:write,channels:read,channels:manage,channels:join,groups:read,groups:write,im:write,mpim:write,users:read,users:read.email,chat:write.customize,channels:history,groups:history,mpim:history,im:history,files:read,files:write
+  hook_type: account
+  allow_multiple_hooks: false
 dialogflow:
   id: dialogflow
-  logo: dialogflow.svg
+  logo: dialogflow.png
   i18n_key: dialogflow
   action: /dialogflow
   hook_type: inbox
@@ -60,40 +172,9 @@ dialogflow:
     }
   ]
   visible_properties: ['project_id']
-dyte:
-  id: dyte
-  logo: dyte.png
-  i18n_key: dyte
-  action: /dyte
-  hook_type: account
-  allow_multiple_hooks: false
-  settings_json_schema: {
-    "type": "object",
-    "properties": {
-        "api_key": { "type": "string" },
-        "organization_id": { "type": "string" },
-      },
-    "required": ["api_key", "organization_id"],
-    "additionalProperties": false,
-  }
-  settings_form_schema: [
-    {
-      "label": "Organization ID",
-      "type": "text",
-      "name": "organization_id",
-      "validation": "required",
-    },
-    {
-      "label": "API Key",
-      "type": "text",
-      "name": "api_key",
-      "validation": "required",
-    },
-  ]
-  visible_properties: ["organization_id"]
 google_translate:
   id: google_translate
-  logo: googletranslate.png
+  logo: google-translate.png
   i18n_key: google_translate
   action: /google_translate
   hook_type: account
@@ -128,53 +209,29 @@ google_translate:
     },
   ]
   visible_properties: ['project_id']
-openai:
-  id: openai
-  logo: openai.png
-  i18n_key: openai
-  action: /openai
+dyte:
+  id: dyte
+  logo: dyte.png
+  i18n_key: dyte
+  action: /dyte
   hook_type: account
   allow_multiple_hooks: false
   settings_json_schema: {
     "type": "object",
     "properties": {
         "api_key": { "type": "string" },
-        "label_suggestion": { "type": "boolean" },
+        "organization_id": { "type": "string" },
       },
-    "required": ["api_key"],
+    "required": ["api_key", "organization_id"],
     "additionalProperties": false,
   }
   settings_form_schema: [
     {
-      "label": "API Key",
+      "label": "Organization ID",
       "type": "text",
-      "name": "api_key",
+      "name": "organization_id",
       "validation": "required",
     },
-    {
-      "label": "Show label suggestions",
-      "type": "checkbox",
-      "name": "label_suggestion",
-      "validation": "",
-    },
-  ]
-  visible_properties: ['api_key', 'label_suggestion']
-linear:
-  id: linear
-  logo: linear.png
-  i18n_key: linear
-  action: /linear
-  hook_type: account
-  allow_multiple_hooks: false
-  settings_json_schema: {
-    "type": "object",
-    "properties": {
-        "api_key": { "type": "string" },
-      },
-    "required": ["api_key"],
-    "additionalProperties": false,
-  }
-  settings_form_schema: [
     {
       "label": "API Key",
       "type": "text",
@@ -182,4 +239,4 @@ linear:
       "validation": "required",
     },
   ]
-  visible_properties: []
+  visible_properties: ["organization_id"]
diff --git a/config/locales/am.yml b/config/locales/am.yml
index fb5adb95943e8..e2510eec45d0a 100644
--- a/config/locales/am.yml
+++ b/config/locales/am.yml
@@ -187,28 +187,34 @@ am:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ar.yml b/config/locales/ar.yml
index 77dc32cd10806..4237f345b4e30 100644
--- a/config/locales/ar.yml
+++ b/config/locales/ar.yml
@@ -20,8 +20,8 @@ ar:
   hello: "مرحباً بالعالم"
   messages:
     reset_password_success: تم إرسال طلب إعادة تعيين كلمة المرور. يرجى مراجعة بريدك الإلكتروني للحصول على التعليمات.
-    reset_password_failure: أوه! لم نتمكن من العثور على أي مستخدم بعنوان البريد الإلكتروني المحدد.
-    inbox_deletetion_response: Your inbox deletion request will be processed in some time.
+    reset_password_failure: المعذرة! لم نتمكن من العثور على أي مستخدم بعنوان البريد الإلكتروني المحدد.
+    inbox_deletetion_response: سيتم معالجة طلب حذف صندوق الوارد الخاص بك في بعض الوقت.
   errors:
     validations:
       presence: يجب ألا يكون فارغاً
@@ -31,7 +31,7 @@ ar:
       disposable_email: نحن لا نسمح باسخدام عناوين البريد الإلكتروني المؤقتة
       invalid_email: لقد قمت بإدخال عنوان بريد إلكتروني غير صالح
       email_already_exists: "لقد قمت بالفعل بتسجيل حساب سابقاً بالعنوان %{email}"
-      invalid_params: 'Invalid, please check the signup paramters and try again'
+      invalid_params: 'غير صالح، الرجاء التحقق من خانات التسجيل وحاول مرة أخرى'
       failed: فشلت عملية التسجيل
     data_import:
       data_type:
@@ -40,7 +40,7 @@ ar:
       import:
         failed: الملف فارغ
       export:
-        success: We will notify you once contacts export file is ready to view.
+        success: سنقوم بإعلامك بمجرد أن يكون ملف تصدير جهات الاتصال جاهزاً للعرض.
       email:
         invalid: إيميل غير صالح
       phone_number:
@@ -49,62 +49,62 @@ ar:
       locale:
         unique: يجب أن تكون فريدة من نوعها في الفئة والبوابة
     dyte:
-      invalid_message_type: "Invalid message type. Action not permitted"
+      invalid_message_type: "نوع الرسالة غير صالح. الإجراء غير مسموح به"
     slack:
       invalid_channel_id: "قناة Slack غير صحيحة. الرجاء المحاولة مرة أخرى"
     inboxes:
       imap:
-        socket_error: الرجاء التحقق من اتصال الشبكة، عنوان IMAP وحاول مرة أخرى.
-        no_response_error: الرجاء التحقق من بيانات اعتماد IMAP وحاول مرة أخرى.
-        host_unreachable_error: المضيف لا يمكن الوصول إليه، الرجاء التحقق من عنوان IMAP، منفذ IMAP وحاول مرة أخرى.
+        socket_error: الرجاء التحقق من اتصال الشبكة وعنوان IMAP ثم حاول مرة أخرى.
+        no_response_error: الرجاء التحقق من بيانات اعتماد IMAP ثم حاول مرة أخرى.
+        host_unreachable_error: المضيف لا يمكن الوصول إليه، الرجاء التحقق من عنوان IMAP ومنفذ IMAP ثم حاول مرة أخرى.
         connection_timed_out_error: انتهت مهلة الاتصال لـ %{address}:%{port}
         connection_closed_error: تم إغلاق الاتصال.
       validations:
         name: لا ينبغي أن تبدأ أو تنتهي بالرموز، ولا ينبغي أن يكون أقل من > / \ أحرف @ .
     custom_filters:
-      number_of_records: Limit reached. The maximum number of allowed custom filters for a user per account is 50.
-      invalid_attribute: Invalid attribute key - [%{key}]. The key should be one of [%{allowed_keys}] or a custom attribute defined in the account.
-      invalid_operator: Invalid operator. The allowed operators for %{attribute_name} are [%{allowed_keys}].
-      invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
+      number_of_records: تم الوصول إلى الحد الأقصى. الحد الأقصى لعدد عوامل التصفية المخصصة المسموح به للمستخدم لكل حساب هو 50.
+      invalid_attribute: مفتاح السمة غير صالح - [%{key}]. يجب أن يكون المفتاح واحد من [%{allowed_keys}] أو سمة مخصصة محددة في الحساب.
+      invalid_operator: مشغل غير صالح. المشغل المسموح به لـ %{attribute_name} هو [%{allowed_keys}].
+      invalid_value: قيمة غير صالحة. القيم المقدمة ل %{attribute_name} غير صالحة
   reports:
     period: فترة التبليغ %{since} إلى %{until}
-    utc_warning: The report generated is in UTC timezone
+    utc_warning: التقرير الذي تم إنشاؤه في التوقيت العالمي الموحّد
     agent_csv:
-      agent_name: اسم الموظف
-      conversations_count: Assigned conversations
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      agent_name: اسم الوكيل
+      conversations_count: المحادثات المعينة
+      avg_first_response_time: متوسط وقت الاستجابة الأولى
+      avg_resolution_time: متوسط وقت الحل
       resolution_count: عدد مرات الإغلاق
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: متوسط وقت انتظار العميل
     inbox_csv:
       inbox_name: اسم صندوق الوارد
       inbox_type: نوع صندوق البريد
       conversations_count: عدد المحادثات
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      avg_first_response_time: متوسط وقت الرد الأول
+      avg_resolution_time: متوسط وقت الحل
     label_csv:
       label_title: الوسم
       conversations_count: عدد المحادثات
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      avg_first_response_time: متوسط وقت الرد الأول
+      avg_resolution_time: متوسط وقت الحل
     team_csv:
       team_name: اسم الفريق
       conversations_count: عدد المحادثات
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      avg_first_response_time: متوسط وقت الرد الأول
+      avg_resolution_time: متوسط وقت الحل
       resolution_count: عدد مرات الإغلاق
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: متوسط وقت انتظار العميل
     conversation_traffic_csv:
-      timezone: Timezone
+      timezone: منطقة زمنية
     sla_csv:
-      conversation_id: Conversation ID
-      sla_policy_breached: SLA Policy
-      assignee: Assignee
+      conversation_id: معرف المحادثة
+      sla_policy_breached: سياسة مستوى الخدمة
+      assignee: المكلَّف
       team: الفريق
       inbox: صندوق الوارد
       labels: الوسوم
-      conversation_link: Link to the Conversation
-      breached_events: Breached Events
+      conversation_link: رابط للمحادثة
+      breached_events: أحداث الخرق
     default_group_by: اليوم
     csat:
       headers:
@@ -112,28 +112,28 @@ ar:
         contact_email_address: عنوان البريد الإلكتروني الخاص بجهة الاتصال
         contact_phone_number: رقم هاتف جهة الاتصال
         link_to_the_conversation: رابط إلى المحادثة
-        agent_name: اسم الموظف
+        agent_name: اسم الوكيل
         rating: التقييم
         feedback: التعليق على الملاحظات
         recorded_at: تاريخ التسجيل
   notifications:
     notification_title:
-      conversation_creation: "A conversation (#%{display_id}) has been created in %{inbox_name}"
-      conversation_assignment: "A conversation (#%{display_id}) has been assigned to you"
-      assigned_conversation_new_message: "A new message is created in conversation (#%{display_id})"
-      conversation_mention: "You have been mentioned in conversation (#%{display_id})"
-      sla_missed_first_response: "SLA target first response missed for conversation (#%{display_id})"
-      sla_missed_next_response: "SLA target next response missed for conversation (#%{display_id})"
-      sla_missed_resolution: "SLA target resolution missed for conversation (#%{display_id})"
-    attachment: "Attachment"
-    no_content: "No content"
+      conversation_creation: "تم إنشاء محادثة (#%{display_id}) في %{inbox_name}"
+      conversation_assignment: "تم تعيين محادثة (#%{display_id}) لك"
+      assigned_conversation_new_message: "تم إنشاء رسالة جديدة في المحادثة (#%{display_id})"
+      conversation_mention: "تمت الإشارة إليك في المحادثة من قبل (#%{display_id})"
+      sla_missed_first_response: "هدف سياسة خدمة أول رد مفقود للمحادثة (#%{display_id})"
+      sla_missed_next_response: "هدف سياسة خدمة الرد القادم مفقود للمحادثة (#%{display_id})"
+      sla_missed_resolution: "هدف سياسة خدمة أول حل مفقود للمحادثة (#%{display_id})"
+    attachment: "المرفقات"
+    no_content: "لا يوجد محتوى"
   conversations:
     messages:
       instagram_story_content: "أشار %{story_sender} إليك في القصة: "
       instagram_deleted_story_content: هذه القصة لم تعد متاحة.
       deleted: تم حذف هذه الرسالة
       delivery_status:
-        error_code: "Error code: %{error_code}"
+        error_code: "رمز الخطأ: %{error_code}"
     activity:
       status:
         resolved: "تم تحديث حالة المحادثة لـ\"مغلقة\" بواسطة %{user_name}"
@@ -141,12 +141,12 @@ ar:
         open: "تم إعادة فتح المحادثة بواسطة %{user_name}"
         pending: "تم تحديث حالة المحادثة لـ\"معلقة\" بواسطة %{user_name}"
         snoozed: "تم تأجيل المحادثة بواسطة %{user_name}"
-        auto_resolved: "تم وضع علامة على المحادثة كمحلولة من قبل بالنظام بسبب %{duration} أيام من عدم النشاط"
-        system_auto_open: System reopened the conversation due to a new incoming message.
+        auto_resolved: "تم وضع علامة على المحادثة كمحلولة من قبل النظام بسبب %{duration} أيام من عدم النشاط"
+        system_auto_open: أعاد النظام فتح المحادثة بسبب رسالة واردة جديدة.
       priority:
-        added: '%{user_name} set the priority to %{new_priority}'
-        updated: '%{user_name} changed the priority from %{old_priority} to %{new_priority}'
-        removed: '%{user_name} removed the priority'
+        added: '%{user_name} حدد الأولوية إلى %{new_priority}'
+        updated: '%{user_name} غيّر الأولوية من %{old_priority} إلى %{new_priority}'
+        removed: '%{user_name} أزال الأولوية'
       assignee:
         self_assigned: "%{user_name} تم تعيينه تلقائياً لهذه المحادثة"
         assigned: "تم إسنادها إلى %{assignee_name} بواسطة %{user_name}"
@@ -159,8 +159,8 @@ ar:
         added: "%{user_name} أضاف %{labels}"
         removed: "%{user_name} أزال %{labels}"
       sla:
-        added: "%{user_name} added SLA policy %{sla_name}"
-        removed: "%{user_name} removed SLA policy %{sla_name}"
+        added: "%{user_name} أضاف سياسة مستوى الخدمة %{sla_name}"
+        removed: "%{user_name} أزال سياسة مستوى الخدمة %{sla_name}"
       muted: "%{user_name} كتم صوت المحادثة"
       unmuted: "%{user_name} قام بإلغاء كتم المحادثة"
     templates:
@@ -187,59 +187,65 @@ ar:
     online:
       delete: "%{contact_name} متصل، يرجى المحاولة مرة أخرى لاحقاً"
   integration_apps:
+    dashboard_apps:
+      name: "تطبيقات لوحة التحكم"
+      description: "تسمح لك تطبيقات لوحة التحكم بإنشاء وتضمين التطبيقات التي تعرض معلومات المستخدم أو الطلبات أو سجل الدفع، مما يوفر المزيد من السياق لوكلاء دعم العملاء الخاص بك."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
-      meeting_name: "%{agent_name} has started a meeting"
+      description: "Dyte هو منتج يدمج وظائف الصوت والفيديو في تطبيقك. مع هذا الدمج، يمكن لوكلائك بدء مكالمات الفيديو/الصوت مع عملائك مباشرة من Chatwoot."
+      meeting_name: "بدأ %{agent_name} اجتماعاً"
     slack:
       name: "Slack"
-      description: "Slack هي أداة دردشة تجمع كل اتصالاتك معا في مكان واحد. من خلال دمج Slack، يمكنك الحصول على إشعار بجميع المحادثات الجديدة في حسابك مباشرة داخل Slack."
+      description: "دمج Chatwoot مع Slack للحفاظ على مزامنة فريقك. هذا التكامل يسمح لك باستلام إشعارات للمحادثات الجديدة والرد عليها مباشرة داخل واجهة Slacks."
     webhooks:
       name: "Webhook"
-      description: "أحداث Webhook توفر لك معلومات في الوقت الحقيقي حول ما يحدث في حساب Chatwoot الخاص بك. يمكنك استخدام خاصية الـ Webhook لإيصال الأحداث إلى تطبيقاتك المفضلة مثل Slack أو Github. انقر على \"تهيئة\" لإعداد الـ Webhooks الخاصة بك."
+      description: "أحداث Webhook توفر تحديثات في الوقت الحقيقي حول الأنشطة في حساب Chatwoot الخاص بك. يمكنك الاشتراك في الأحداث المفضلة الخاصة بك، وسترسل Chatwoot لك اتصالات HTTP مع التحديثات."
     dialogflow:
       name: "Dialogflow"
-      description: "قم ببناء روبوتات الدردشة باستخدام تدفق الاتصال وتوصيلها بالبريد الوارد الخاص بك بسرعة. دع البوتات تتعامل مع الاستفسارات قبل تسليمها إلى وكيل خدمة العملاء."
-    fullcontact:
-      name: "الاتصال الكامل"
-      description: "التكامل الكامل يساعد على إثراء ملفات تعريف الزوار. تحديد المستخدمين بمجرد مشاركتهم عنوان البريد الإلكتروني الخاص بهم وتقديم خدمة العملاء الخاصة بهم. قم بتوصيل اتصالك الكامل بحسابك عن طريق مشاركة مفتاح API للاتصال الكامل."
+      description: "بناء روبوتات الدردشة مع حركة الاتصال ودمجها بسهولة في صندوق الوارد الخاص بك. يمكن لهذه الروبوتات التعامل مع الاستفسارات الأولية قبل نقلها إلى وكيل خدمة العملاء."
     google_translate:
       name: "ترجمة Google"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "دمج ترجمة جوجل لمساعدة الوكلاء على ترجمة رسائل العملاء بسهولة. هذا الدمج يكشف تلقائياً اللغة ويحولها إلى اللغة المفضلة لدى الوكيل أو المدير."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "الاستفادة من قوة نماذج اللغات الكبيرة من OpenAI مع ميزات مثل اقتراحات الرد، التلخيص، إعادة صياغة الرسائل، التحقق الإملائي، تصنيف البطاقات."
+    linear:
+      name: "Linear"
+      description: "إنشاء مشكلات في Linear مباشرة من نافذة المحادثة الخاصة بك. بدلاً من ذلك، قم بربط مشكلات Linear القائمة من أجل عملية تتبع أكثر تبسيطاً وكفاءة."
+    captain:
+      name: "قائد"
+      description: "الكابتن هو مساعد AI أصلي تم بناؤه لمنتجك وتم تدريبه على قاعدة معارف شركتك. يستجيب كإنسان ويحل استفسارات العميل بشكل فعال. قم بتكوينه بسهولة إلى صناديق الوارد الخاصة بك."
   public_portal:
     search:
-      search_placeholder: Search for article by title or body...
+      search_placeholder: البحث عن مقالة حسب العنوان أو الجسم...
       empty_placeholder: لم يتم العثور على النتائج.
-      loading_placeholder: يبحث...
+      loading_placeholder: جاري البحث...
       results_title: نتائج البحث
-    toc_header: 'On this page'
+    toc_header: 'في هذه الصفحة'
     hero:
-      sub_title: Search for the articles here or browse the categories below.
+      sub_title: ابحث عن المقالات هنا أو تصفح الفئات أدناه.
     common:
       home: الرئيسية
-      last_updated_on: Last updated on %{last_updated_on}
+      last_updated_on: آخر تحديث في %{last_updated_on}
       view_all_articles: عرض الكل
       article: مقال
       articles: المقالات
       author: المؤلف
       authors: المؤلفون
-      other: other
-      others: others
+      other: آخر
+      others: الآخرين
       by: بواسطة
       no_articles: لا توجد مقالات
     footer:
-      made_with: Made with
+      made_with: صنع بـ
     header:
-      go_to_homepage: Website
+      go_to_homepage: الموقع الإلكتروني
       appearance:
         system: النظام
-        light: Light
+        light: فاتح
         dark: مظلم
-      featured_articles: Featured Articles
-      uncategorized: Uncategorized
+      featured_articles: المقالات المميزة
+      uncategorized: غير مصنف
     404:
       title: لم يتم العثور على الصفحة
       description: لم نتمكن من العثور على الصفحة التي تبحث عنها.
@@ -249,36 +255,36 @@ ar:
       name: الاسم
       email: البريد الإلكتروني
       phone_number: هاتف
-      company_name: الشركة
+      company_name: المنشأة
       inbox_name: صندوق الوارد
-      inbox_type: Inbox Type
+      inbox_type: نوع صندوق الوارد
     button: فتح المحادثة
   time_units:
     days:
-      zero: "%{count} days"
-      one: "%{count} day"
-      two: "%{count} days"
-      few: "%{count} days"
-      many: "%{count} days"
-      other: "%{count} days"
+      zero: "%{count} يوم"
+      one: "%{count} يوم"
+      two: "%{count} يوم"
+      few: "%{count} أيام"
+      many: "%{count} أيام"
+      other: "%{count} يوم"
     hours:
-      zero: "%{count} hours"
-      one: "%{count} hour"
-      two: "%{count} hours"
-      few: "%{count} hours"
-      many: "%{count} hours"
-      other: "%{count} hours"
+      zero: "%{count} ساعة"
+      one: "%{count} ساعة"
+      two: "%{count} ساعات"
+      few: "%{count} ساعات"
+      many: "%{count} ساعة"
+      other: "%{count} ساعة"
     minutes:
-      zero: "%{count} minutes"
-      one: "%{count} minute"
-      two: "%{count} minutes"
-      few: "%{count} minutes"
-      many: "%{count} minutes"
-      other: "%{count} minutes"
+      zero: "%{count} دقيقة"
+      one: "%{count} دقيقة"
+      two: "%{count} دقائق"
+      few: "%{count} دقائق"
+      many: "%{count} دقيقة"
+      other: "%{count} دقيقة"
     seconds:
-      zero: "%{count} seconds"
-      one: "%{count} second"
-      two: "%{count} seconds"
-      few: "%{count} seconds"
-      many: "%{count} seconds"
-      other: "%{count} seconds"
+      zero: "%{count} ثانية"
+      one: "%{count} ثانية"
+      two: "%{count} ثواني"
+      few: "%{count} ثواني"
+      many: "%{count} ثانية"
+      other: "%{count} ثانية"
diff --git a/config/locales/bg.yml b/config/locales/bg.yml
index 595d67e53a7c6..2176ee1545a11 100644
--- a/config/locales/bg.yml
+++ b/config/locales/bg.yml
@@ -187,28 +187,34 @@ bg:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ca.yml b/config/locales/ca.yml
index d694a616c5291..759484724e6a3 100644
--- a/config/locales/ca.yml
+++ b/config/locales/ca.yml
@@ -21,248 +21,254 @@ ca:
   messages:
     reset_password_success: Woot! S'ha restablert la contrasenya amb èxit. Revisa el correu per més instruccions.
     reset_password_failure: Uh ho! No s'ha trobat cap compte amb aquest correu electrònic.
-    inbox_deletetion_response: Your inbox deletion request will be processed in some time.
+    inbox_deletetion_response: La teva sol·licitud d'eliminació de la safata d'entrada es processarà d'aquí a un temps.
   errors:
     validations:
-      presence: must not be blank
+      presence: no ha de quedar en blanc
     webhook:
-      invalid: Invalid events
+      invalid: Esdeveniments no vàlids
     signup:
       disposable_email: Els correus d'un sol ús no s'accepten
       invalid_email: Heu introduït un correu electrònic no vàlid
       email_already_exists: "Ja us heu registrat amb el compte %{email}"
-      invalid_params: 'Invalid, please check the signup paramters and try again'
+      invalid_params: 'No és vàlid, comprova els paràmetres de registre i torna-ho a provar'
       failed: El registre ha fallat
     data_import:
       data_type:
-        invalid: Invalid data type
+        invalid: Tipus de dades no vàlid
     contacts:
       import:
-        failed: File is blank
+        failed: El fitxer està en blanc
       export:
-        success: We will notify you once contacts export file is ready to view.
+        success: Us notificarem quan el fitxer d'exportació de contactes estigui llest per veure'l.
       email:
-        invalid: Invalid email
+        invalid: Correu electrònic invàlid
       phone_number:
-        invalid: should be in e164 format
+        invalid: hauria d'estar en format e164
     categories:
       locale:
-        unique: should be unique in the category and portal
+        unique: hauria de ser únic a la categoria i al portal
     dyte:
-      invalid_message_type: "Invalid message type. Action not permitted"
+      invalid_message_type: "Tipus de missatge no vàlid. Acció no permesa"
     slack:
-      invalid_channel_id: "Invalid slack channel. Please try again"
+      invalid_channel_id: "Canal slack no vàlid. Torna-ho a provar"
     inboxes:
       imap:
-        socket_error: Please check the network connection, IMAP address and try again.
-        no_response_error: Please check the IMAP credentials and try again.
-        host_unreachable_error: Host unreachable, Please check the IMAP address, IMAP port and try again.
-        connection_timed_out_error: Connection timed out for %{address}:%{port}
-        connection_closed_error: Connection closed.
+        socket_error: Comprova la connexió de xarxa, l'adreça IMAP i torna-ho a provar.
+        no_response_error: Comprova les credencials IMAP i torna-ho a provar.
+        host_unreachable_error: Amfitrió inaccessible. Comprova l'adreça IMAP, el port IMAP i torna-ho a provar.
+        connection_timed_out_error: S'ha esgotat el temps d'espera de la connexió per a %{address}:%{port}
+        connection_closed_error: Connexió tancada.
       validations:
-        name: should not start or end with symbols, and it should not have < > / \ @ characters.
+        name: no hauria de començar ni acabar amb símbols, i no hauria de tenir caràcters < > / \ @.
     custom_filters:
-      number_of_records: Limit reached. The maximum number of allowed custom filters for a user per account is 50.
+      number_of_records: S'ha arribat al límit. El nombre màxim de filtres personalitzats permesos per a un usuari per compte és de 50.
       invalid_attribute: 'Clau d''atribut no vàlida: [%{key}]. La clau hauria de ser una de [%{allowed_keys}] o un atribut personalitzat definit al compte.'
       invalid_operator: Operador no vàlid. Els operadors permesos per a %{attribute_name} son [%{allowed_keys}].
       invalid_value: Valor no vàlid. Els valors proporcionats per a %{attribute_name} no són vàlids
   reports:
     period: Període d'informes %{since} a %{until}
-    utc_warning: The report generated is in UTC timezone
+    utc_warning: L'informe generat es troba a la zona horària UTC
     agent_csv:
-      agent_name: Agent name
-      conversations_count: Assigned conversations
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      agent_name: Nom de l'Agent
+      conversations_count: Converses assignades
+      avg_first_response_time: Temps mitjà de primera resposta
+      avg_resolution_time: Temps mitjà de resolució
       resolution_count: Total de resolucions
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Temps mitjà d'espera dels clients
     inbox_csv:
-      inbox_name: Inbox name
-      inbox_type: Inbox type
-      conversations_count: No. of conversations
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      inbox_name: Nom de la safata d'entrada
+      inbox_type: Tipus de safata d'entrada
+      conversations_count: Nre. de converses
+      avg_first_response_time: Temps mitjà de primera resposta
+      avg_resolution_time: Temps mitjà de resolució
     label_csv:
-      label_title: Label
-      conversations_count: No. of conversations
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      label_title: Etiqueta
+      conversations_count: Nre. de converses
+      avg_first_response_time: Temps mitjà de primera resposta
+      avg_resolution_time: Temps mitjà de resolució
     team_csv:
-      team_name: Team name
-      conversations_count: Conversations count
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      team_name: Nom de l'equip
+      conversations_count: Recompte de converses
+      avg_first_response_time: Temps mitjà de primera resposta
+      avg_resolution_time: Temps mitjà de resolució
       resolution_count: Total de resolucions
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Temps mitjà d'espera dels clients
     conversation_traffic_csv:
-      timezone: Timezone
+      timezone: Fus horari
     sla_csv:
-      conversation_id: Conversation ID
-      sla_policy_breached: SLA Policy
-      assignee: Assignee
-      team: Team
-      inbox: Inbox
+      conversation_id: ID de la conversa
+      sla_policy_breached: Política SLA
+      assignee: Cessionari
+      team: Equip
+      inbox: Safata d'entrada
       labels: Etiquetes
-      conversation_link: Link to the Conversation
-      breached_events: Breached Events
-    default_group_by: day
+      conversation_link: Enllaç a la conversa
+      breached_events: Cas d'incompliment
+    default_group_by: dia
     csat:
       headers:
-        contact_name: Contact Name
-        contact_email_address: Contact Email Address
-        contact_phone_number: Contact Phone Number
-        link_to_the_conversation: Link to the conversation
+        contact_name: Nom de contacte
+        contact_email_address: Correu electrònic de contacte
+        contact_phone_number: Telèfon de contacte
+        link_to_the_conversation: Enllaç a la conversa
         agent_name: Nom de l'Agent
-        rating: Rating
-        feedback: Feedback Comment
-        recorded_at: Recorded date
+        rating: Valoració
+        feedback: Comentaris
+        recorded_at: Data gravada
   notifications:
     notification_title:
-      conversation_creation: "A conversation (#%{display_id}) has been created in %{inbox_name}"
-      conversation_assignment: "A conversation (#%{display_id}) has been assigned to you"
-      assigned_conversation_new_message: "A new message is created in conversation (#%{display_id})"
-      conversation_mention: "You have been mentioned in conversation (#%{display_id})"
-      sla_missed_first_response: "SLA target first response missed for conversation (#%{display_id})"
-      sla_missed_next_response: "SLA target next response missed for conversation (#%{display_id})"
-      sla_missed_resolution: "SLA target resolution missed for conversation (#%{display_id})"
-    attachment: "Attachment"
-    no_content: "No content"
+      conversation_creation: "Una conversa (#%{display_id}) ha estat creada a %{inbox_name}"
+      conversation_assignment: "Una conversa (#%{display_id}) ha estat assignada a tu"
+      assigned_conversation_new_message: "Es crea un missatge nou a la conversa (#%{display_id})"
+      conversation_mention: "T'han mencionat a la conversa (#%{display_id})"
+      sla_missed_first_response: "S'ha perdut la primera resposta de l'objectiu de SLA per a la conversa (#%{display_id})"
+      sla_missed_next_response: "S'ha perdut la següent resposta de l'objectiu de SLA per a la conversa (#%{display_id})"
+      sla_missed_resolution: "S'ha perdut la resolució de l'objectiu de SLA per a la conversa (#%{display_id})"
+    attachment: "Adjunt"
+    no_content: "Sense contingut"
   conversations:
     messages:
-      instagram_story_content: "%{story_sender} mentioned you in the story: "
-      instagram_deleted_story_content: This story is no longer available.
+      instagram_story_content: "%{story_sender} t'ha mencionat a la història: "
+      instagram_deleted_story_content: Aquesta història ja no està disponible.
       deleted: Aquest missatge a sigut eliminat
       delivery_status:
-        error_code: "Error code: %{error_code}"
+        error_code: "Codi d'error: %{error_code}"
     activity:
       status:
         resolved: "La conversa va ser marcada com resolta per %{user_name}"
-        contact_resolved: "Conversation was resolved by %{contact_name}"
+        contact_resolved: "La conversa va ser resolta per %{contact_name}"
         open: "La conversa es va reobrir per %{user_name}"
-        pending: "Conversation was marked as pending by %{user_name}"
-        snoozed: "Conversation was snoozed by %{user_name}"
+        pending: "La conversa va ser marcada com pendent per %{user_name}"
+        snoozed: "%{user_name} ha posposat la conversa"
         auto_resolved: "El sistema ha marcat que la conversa s'ha resolt a causa de %{duration} dies d'inactivitat"
-        system_auto_open: System reopened the conversation due to a new incoming message.
+        system_auto_open: El sistema ha reobert la conversa a causa d'un nou missatge entrant.
       priority:
-        added: '%{user_name} set the priority to %{new_priority}'
-        updated: '%{user_name} changed the priority from %{old_priority} to %{new_priority}'
-        removed: '%{user_name} removed the priority'
+        added: '%{user_name} ha establert la prioritat a %{new_priority}'
+        updated: '%{user_name} ha canviat la prioritat de %{old_priority} a %{new_priority}'
+        removed: '%{user_name} ha eliminat la prioritat'
       assignee:
         self_assigned: "%{user_name} s'ha auto assignat aquesta conversa"
         assigned: "Assignada a %{assignee_name} per %{user_name}"
         removed: "%{user_name} ha tret l'assignació de la conversa"
       team:
         assigned: "Assignada a %{team_name} per %{user_name}"
-        assigned_with_assignee: "Assigned to %{assignee_name} via %{team_name} by %{user_name}"
-        removed: "Unassigned from %{team_name} by %{user_name}"
+        assigned_with_assignee: "Assignat a %{assignee_name} mitjançant %{team_name} per %{user_name}"
+        removed: "Sense assignar des de %{team_name} per %{user_name}"
       labels:
         added: "%{user_name} ha afegit %{labels}"
         removed: "%{user_name} ha eliminat %{labels}"
       sla:
-        added: "%{user_name} added SLA policy %{sla_name}"
-        removed: "%{user_name} removed SLA policy %{sla_name}"
+        added: "%{user_name} ha afegit la política de SLA %{sla_name}"
+        removed: "%{user_name} ha eliminat la política de SLA %{sla_name}"
       muted: "%{user_name} ha silenciat la conversa"
       unmuted: "%{user_name} ha desactivat el silenci de la conversa"
     templates:
       greeting_message_body: "%{account_name} normalment respon a les poques hores."
       ways_to_reach_you_message_body: "Fes saber a l'equip la forma de posar-nos en contacte amb tu."
       email_input_box_message_body: "Rep les notificacions per correu electrònic"
-      csat_input_message_body: "Please rate the conversation"
+      csat_input_message_body: "Si us plau, valoreu la conversa"
     reply:
       email:
         header:
-          from_with_name: "%{assignee_name} from %{inbox_name} <%{from_email}>"
-          reply_with_name: "%{assignee_name} from %{inbox_name} <reply+%{reply_email}>"
-          friendly_name: "%{sender_name} from %{business_name} <%{from_email}>"
+          from_with_name: "%{assignee_name} des de %{inbox_name} <%{from_email}>"
+          reply_with_name: "%{assignee_name} des de %{inbox_name} <reply+%{reply_email}>"
+          friendly_name: "%{sender_name} des de %{business_name} <%{from_email}>"
           professional_name: "%{business_name} <%{from_email}>"
       channel_email:
         header:
-          reply_with_name: "%{assignee_name} from %{inbox_name} <%{from_email}>"
+          reply_with_name: "%{assignee_name} des de %{inbox_name} <%{from_email}>"
           reply_with_inbox_name: "%{inbox_name} <%{from_email}>"
       email_subject: "Missatges nous en aquesta conversa"
       transcript_subject: "Transcripció de conversa"
     survey:
-      response: "Please rate this conversation, %{link}"
+      response: "Si us plau, valoreu la conversa, %{link}"
   contacts:
     online:
-      delete: "%{contact_name} is Online, please try again later"
+      delete: "%{contact_name} està en línia, si us plau, torna-ho a provar més tard"
   integration_apps:
+    dashboard_apps:
+      name: "Aplicacions del tauler de control"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
-      meeting_name: "%{agent_name} has started a meeting"
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
+      meeting_name: "%{agent_name} ha iniciat una reunió"
     slack:
       name: "Slack"
-      description: "Slack és una eina de xat que uneix tota la teva comunicació en un sol lloc. Integrant Slack, podràs rebre notificacions de totes les noves conversacions a la teva compte directament a dins l'Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Els esdeveniments de Webhook us proporcionen informació en temps real sobre el que passa al vostre compte de Chatwoot. Podeu utilitzar els webhooks per comunicar els esdeveniments a les vostres aplicacions preferides com Slack o Github. Feu clic a Configura per configurar els enllaços web."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
-      search_placeholder: Search for article by title or body...
+      search_placeholder: Cerca l'article per títol o cos...
       empty_placeholder: No s'ha trobat agents.
-      loading_placeholder: Searching...
-      results_title: Search results
-    toc_header: 'On this page'
+      loading_placeholder: S'està cercant...
+      results_title: Resultats de la cerca
+    toc_header: 'En aquesta pàgina'
     hero:
-      sub_title: Search for the articles here or browse the categories below.
+      sub_title: Cerca els articles aquí o navega per les categories següents.
     common:
       home: Inici
-      last_updated_on: Last updated on %{last_updated_on}
-      view_all_articles: View all
+      last_updated_on: Última actualització el %{last_updated_on}
+      view_all_articles: Veure tot
       article: article
       articles: articles
-      author: author
-      authors: authors
-      other: other
-      others: others
-      by: By
-      no_articles: There are no articles here
+      author: autor
+      authors: autors
+      other: altre
+      others: altres
+      by: Per
+      no_articles: No hi ha articles aquí
     footer:
-      made_with: Made with
+      made_with: Fet amb
     header:
-      go_to_homepage: Website
+      go_to_homepage: Lloc web
       appearance:
-        system: System
-        light: Light
-        dark: Dark
-      featured_articles: Featured Articles
-      uncategorized: Uncategorized
+        system: Sistema
+        light: Clar
+        dark: Fosc
+      featured_articles: Articles destacats
+      uncategorized: Sense categoria
     404:
-      title: Page not found
-      description: We couldn't find the page you were looking for.
-      back_to_home: Go to home page
+      title: Pàgina no trobada
+      description: No hem pogut trobar la pàgina que estaves buscant.
+      back_to_home: Ves a la pàgina d'inici
   slack_unfurl:
     fields:
       name: Nom
       email: Correu electrònic
-      phone_number: Phone
+      phone_number: Telèfon
       company_name: Companyia
-      inbox_name: Inbox
-      inbox_type: Inbox Type
-    button: Open conversation
+      inbox_name: Safata d'entrada
+      inbox_type: Tipus de safata d'entrada
+    button: Obrir conversa
   time_units:
     days:
-      one: "%{count} day"
-      other: "%{count} days"
+      one: "%{count} dia"
+      other: "%{count} dies"
     hours:
-      one: "%{count} hour"
-      other: "%{count} hours"
+      one: "%{count} hora"
+      other: "%{count} hores"
     minutes:
-      one: "%{count} minute"
-      other: "%{count} minutes"
+      one: "%{count} minut"
+      other: "%{count} minuts "
     seconds:
-      one: "%{count} second"
-      other: "%{count} seconds"
+      one: "%{count} segon"
+      other: "%{count} segons"
diff --git a/config/locales/cs.yml b/config/locales/cs.yml
index beb6c8e8d67fd..54e26d88647d0 100644
--- a/config/locales/cs.yml
+++ b/config/locales/cs.yml
@@ -187,28 +187,34 @@ cs:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooky"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/da.yml b/config/locales/da.yml
index b2437c67f88ad..d7c1ff0b7ddcc 100644
--- a/config/locales/da.yml
+++ b/config/locales/da.yml
@@ -187,28 +187,34 @@ da:
     online:
       delete: "%{contact_name} er online, prøv igen senere"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack er et chatværktøj, der bringer al din kommunikation sammen på ét sted. Ved at integrere Slack, kan du få besked om alle de nye samtaler på din konto lige inde i din Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook begivenheder giver dig realtime oplysninger om, hvad der sker på din konto. Du kan gøre brug af webhooks til at kommunikere begivenhederne til dine foretrukne apps som Slack eller Github. Klik på Konfigurer for at opsætte dine webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Byg chatbots ved hjælp af Dialogflow og tilslut dem hurtigt til din indbakke. Lad robotterne håndtere forespørgslerne, før de afleverer dem til en kundeservice agent."
-    fullcontact:
-      name: "Fuldkontakt"
-      description: "FullContact integration hjælper med at berige besøgende profiler. Identificere brugerne, så snart de deler deres e-mail-adresse og tilbyde dem skræddersyet kundeservice. Tilslut din FullContact til din konto ved at dele FullContact API-nøglen."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 76246d5c10861..65e553b90f6a2 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -21,7 +21,7 @@ de:
   messages:
     reset_password_success: Woot! Die Anforderung zum Zurücksetzen des Passworts ist erfolgreich. Überprüfen Sie Ihre E-Mails auf Anweisungen.
     reset_password_failure: Uh ho! Wir konnten keinen Benutzer mit der angegebenen E-Mail-Adresse finden.
-    inbox_deletetion_response: Die Löschanfrage Ihres Posteingangs wird in Kürze verarbeitet.
+    inbox_deletetion_response: Die Löschanfrage Ihres Posteingangs wird in Kürze bearbeitet.
   errors:
     validations:
       presence: darf nicht leer sein
@@ -31,7 +31,7 @@ de:
       disposable_email: Wir erlauben keine Einweg-E-Mails
       invalid_email: Sie haben eine ungültige E-Mail-Adresse eingegeben
       email_already_exists: "Sie haben sich bereits für ein Konto bei %{email} angemeldet."
-      invalid_params: 'Invalid, please check the signup paramters and try again'
+      invalid_params: 'Ungültig, bitte überprüfen Sie die Anmeldeparameter und versuchen Sie es erneut'
       failed: Anmeldung gescheitert
     data_import:
       data_type:
@@ -51,7 +51,7 @@ de:
     dyte:
       invalid_message_type: "Ungültiger Nachrichtentyp. Aktion nicht erlaubt"
     slack:
-      invalid_channel_id: "Invalid slack channel. Please try again"
+      invalid_channel_id: "Ungültiger Slack Channel. Bitte erneut versuchen"
     inboxes:
       imap:
         socket_error: Bitte überprüfen Sie die Netzwerkverbindung, die IMAP-Adresse und versuchen Sie es erneut.
@@ -63,48 +63,48 @@ de:
         name: Sollte nicht mit Symbolen beginnen oder enden, und es sollte keine < > / \ @ Zeichen enthalten.
     custom_filters:
       number_of_records: Limit erreicht. Die maximale Anzahl an benutzerdefinierten Filtern pro Benutzerkonto beträgt 50.
-      invalid_attribute: Invalid attribute key - [%{key}]. The key should be one of [%{allowed_keys}] or a custom attribute defined in the account.
-      invalid_operator: Invalid operator. The allowed operators for %{attribute_name} are [%{allowed_keys}].
-      invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
+      invalid_attribute: Ungültiger Attribut schlüssel - [%{key}]. Der Schlüssel sollte einer von [%{allowed_keys}] oder ein benutzerdefiniertes Attribut sein, das im Konto definiert ist.
+      invalid_operator: Ungültiger Operator. Die erlaubten Operatoren für %{attribute_name} sind [%{allowed_keys}].
+      invalid_value: Ungültiger Wert. Die Werte für %{attribute_name} sind ungültig
   reports:
     period: Berichtszeitraum von %{since} bis %{until}
     utc_warning: Der generierte Bericht ist in UTC-Zeitzone
     agent_csv:
       agent_name: Agentenname
-      conversations_count: Assigned conversations
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      conversations_count: Zugewiesene Unterhaltungen
+      avg_first_response_time: Durchschnittliche Zeit bis zur ersten Antwort
+      avg_resolution_time: Durchschnittliche Auflösung
       resolution_count: Auflösungsanzahl
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Durchschnittliche Kundenwartezeit
     inbox_csv:
       inbox_name: Posteingangsname
       inbox_type: Posteingangstyp
       conversations_count: Anzahl der Konversationen
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      avg_first_response_time: Durchschnittliche Zeit bis zur ersten Antwort
+      avg_resolution_time: Durchschnittliche Auflösung
     label_csv:
       label_title: Label
       conversations_count: Anzahl der Konversationen
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      avg_first_response_time: Durchschnittliche Zeit bis zur ersten Antwort
+      avg_resolution_time: Durchschnittliche Auflösung
     team_csv:
       team_name: Teamname
       conversations_count: Anzahl Gespräche
-      avg_first_response_time: Avg first response time
-      avg_resolution_time: Avg resolution time
+      avg_first_response_time: Durchschnittliche Zeit bis zur ersten Antwort
+      avg_resolution_time: Durchschnittliche Auflösung
       resolution_count: Auflösungsanzahl
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Durchschnittliche Kundenwartezeit
     conversation_traffic_csv:
       timezone: Zeitzone
     sla_csv:
-      conversation_id: Conversation ID
-      sla_policy_breached: SLA Policy
-      assignee: Assignee
+      conversation_id: Konversation-ID
+      sla_policy_breached: SLA-Richtlinie
+      assignee: Zugewiesener
       team: Team
       inbox: Posteingang
       labels: Labels
-      conversation_link: Link to the Conversation
-      breached_events: Breached Events
+      conversation_link: Link zur Konversation
+      breached_events: Gesperrte Ereignisse
     default_group_by: Tag
     csat:
       headers:
@@ -118,22 +118,22 @@ de:
         recorded_at: Aufnahmedatum
   notifications:
     notification_title:
-      conversation_creation: "A conversation (#%{display_id}) has been created in %{inbox_name}"
-      conversation_assignment: "A conversation (#%{display_id}) has been assigned to you"
-      assigned_conversation_new_message: "A new message is created in conversation (#%{display_id})"
-      conversation_mention: "You have been mentioned in conversation (#%{display_id})"
-      sla_missed_first_response: "SLA target first response missed for conversation (#%{display_id})"
-      sla_missed_next_response: "SLA target next response missed for conversation (#%{display_id})"
-      sla_missed_resolution: "SLA target resolution missed for conversation (#%{display_id})"
-    attachment: "Attachment"
-    no_content: "No content"
+      conversation_creation: "Neues Gespräch - #%{display_id} wurde in %{inbox_name} erstellt"
+      conversation_assignment: "Eine Unterhaltung (#%{display_id}) wurde Ihnen zugewiesen"
+      assigned_conversation_new_message: "Eine neue Nachricht wurde in der Unterhaltung erstellt (#%{display_id})"
+      conversation_mention: "Du wurdest in der Unterhaltung erwähnt (#%{display_id})"
+      sla_missed_first_response: "SLA Ziel erste Antwort für die Unterhaltung verpasst (#%{display_id})"
+      sla_missed_next_response: "SLA Ziel nächste Antwort für die Unterhaltung verpasst (#%{display_id})"
+      sla_missed_resolution: "SLA Ziel Auflösung für die Unterhaltung verpasst (#%{display_id})"
+    attachment: "Anhang"
+    no_content: "Kein Inhalt"
   conversations:
     messages:
       instagram_story_content: "%{story_sender} erwähnte sie in der Geschichte: "
       instagram_deleted_story_content: Diese Geschichte ist nicht mehr verfügbar.
       deleted: Diese Nachricht wurde gelöscht
       delivery_status:
-        error_code: "Error code: %{error_code}"
+        error_code: "Fehlercode: %{error_code}"
     activity:
       status:
         resolved: "Das Gespräch wurde von %{user_name} gelöst"
@@ -159,8 +159,8 @@ de:
         added: "%{user_name} hat %{labels} hinzugefügt"
         removed: "%{user_name} hat %{labels} entfernt"
       sla:
-        added: "%{user_name} added SLA policy %{sla_name}"
-        removed: "%{user_name} removed SLA policy %{sla_name}"
+        added: "%{user_name} hat SLA-Richtlinie %{sla_name} hinzugefügt"
+        removed: "%{user_name} hat SLA-Richtlinie %{sla_name} entfernt"
       muted: "%{user_name} hat das Gespräch stumm geschaltet"
       unmuted: "%{user_name} hat das Gespräch laut gestellt"
     templates:
@@ -187,28 +187,34 @@ de:
     online:
       delete: "%{contact_name} ist online, bitte versuchen Sie es später erneut"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard-Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte ist ein Tool, mit dem Sie Live-Audio & Video zu Ihrer Anwendung mit nur wenigen Zeilen Code hinzufügen können. Mit dieser Integration können Sie Ihren Agenten die Möglichkeit geben, einen Video- oder Sprachanruf mit Ihren Kunden zu führen, ohne Chatwoot zu verlassen."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} hat ein Meeting begonnen"
     slack:
       name: "Slack"
-      description: "Slack ist ein Chat-Tool, das all deine Kommunikation an einem Ort zusammenbringt. Durch die Integration von Slack kannst du über alle neuen Unterhaltungen in deinem Account direkt in deinem Slack benachrichtigt werden."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook-Ereignisse bieten Ihnen Echtzeitinformationen darüber, was in Ihrem Chatwoot-Konto passiert. Sie können die Webhooks verwenden, um die Ereignisse an Ihre Lieblings-Apps wie Slack oder Github zu kommunizieren. Klicken Sie auf Konfigurieren, um Ihre Webhooks einzurichten."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Erstellen Sie Chatbots mit Dialogflow und verbinden Sie diesen mit Ihrem Posteingang. Lassen Sie die Bots Anfragen bearbeiten, bevor Sie an einen Kundendienst-Agent weitergeben werden."
-    fullcontact:
-      name: "Vollständiger Kontakt"
-      description: "Die vollständige Kontakt-Integration hilft die Besucherprofile zu erweitern. Identifizieren Sie die Benutzer, sobald diese ihre E-Mail-Adresse speichern um Ihnen maßgeschneiderten Kundenservice anbieten. Verbinden Sie einen Kontakt mit Ihrem Konto, indem Sie den Kontakt-API-Schlüssel freigeben."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Übersetzer"
-      description: "Machen Sie es Agenten einfacher Nachrichten zu übersetzen, indem Sie eine Google Übersetzer Integration hinzufügen. Google Übersetzer hilft die Sprache automatisch zu identifizieren und in die Sprache umzuwandeln, die vom Agenten/Account-Administrator gewählt wurde."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrieren Sie leistungsstarke KI-Funktionen in Chatwoot, indem Sie die GPT-Modelle von OpenAI nutzen."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Artikel nach Titel oder Text suchen...
@@ -221,48 +227,48 @@ de:
     common:
       home: Startseite
       last_updated_on: Zuletzt aktualisiert am %{last_updated_on}
-      view_all_articles: View all
+      view_all_articles: Alle anzeigen
       article: Artikel
       articles: Artikel
       author: autor
-      authors: authors
-      other: other
-      others: others
-      by: By
+      authors: Autoren
+      other: anders
+      others: andere
+      by: Von
       no_articles: Keine Artikel vorhanden
     footer:
       made_with: Erstellt mit
     header:
-      go_to_homepage: Website
+      go_to_homepage: Webseite
       appearance:
         system: System
-        light: Light
-        dark: Dark
-      featured_articles: Featured Articles
-      uncategorized: Uncategorized
+        light: Hell
+        dark: Dunkel
+      featured_articles: Empfohlene Artikel
+      uncategorized: Unkategorisiert
     404:
-      title: Page not found
-      description: We couldn't find the page you were looking for.
-      back_to_home: Go to home page
+      title: Seite nicht gefunden
+      description: Wir konnten die von Ihnen gesuchte Seite nicht finden.
+      back_to_home: Zur Startseite wechseln
   slack_unfurl:
     fields:
       name: Name
       email: E-Mail
-      phone_number: Phone
+      phone_number: Telefon
       company_name: Firma
       inbox_name: Posteingang
-      inbox_type: Inbox Type
+      inbox_type: Posteingangstyp
     button: Unterhaltung öffnen
   time_units:
     days:
-      one: "%{count} day"
-      other: "%{count} days"
+      one: "%{count} Tag"
+      other: "%{count} Tage"
     hours:
-      one: "%{count} hour"
-      other: "%{count} hours"
+      one: "%{count} Stunde"
+      other: "%{count} Stunden"
     minutes:
-      one: "%{count} minute"
-      other: "%{count} minutes"
+      one: "%{count} Minute"
+      other: "%{count} Minuten"
     seconds:
-      one: "%{count} second"
-      other: "%{count} seconds"
+      one: "%{count} Sekunde"
+      other: "%{count} Sekunden"
diff --git a/config/locales/devise.ar.yml b/config/locales/devise.ar.yml
index 270577fa9eb65..aaa87fdcfe2fe 100644
--- a/config/locales/devise.ar.yml
+++ b/config/locales/devise.ar.yml
@@ -6,11 +6,11 @@ ar:
       send_instructions: "سوف تتلقى رسالة بريد إلكتروني تحتوي على تعليمات لكيفية تأكيد عنوان البريد الإلكتروني الخاص بك خلال بضع دقائق."
       send_paranoid_instructions: "إذا كان عنوان بريدك الإلكتروني موجود في قاعدة بياناتنا، سوف تتلقى رسالة بريد إلكتروني مع إرشادات لكيفية تأكيد عنوان البريد الإلكتروني الخاص بك خلال بضع دقائق."
     failure:
-      already_authenticated: "لقد قمت بتسجيل الدخول."
+      already_authenticated: "أنت مسجل الدخول مسبقاً."
       inactive: "لم يتم تفعيل حسابك بعد."
       invalid: "لم يتم التحقق من %{authentication_keys}/كلمة المرور أو أن الحساب غير مُفعّل بعد."
       locked: "حسابك مقفل."
-      last_attempt: "لديك محاولة أخرى قبل أن يتم غلق حسابك."
+      last_attempt: "لديك محاولة أخرى قبل أن يتم إقفال حسابك."
       not_found_in_database: "%{authentication_keys} أو كلمة المرور غير صحيحة."
       timeout: "انتهت صلاحية جلستك. الرجاء تسجيل الدخول مرة أخرى للمتابعة."
       unauthenticated: "يجب عليك تسجيل الدخول أو التسجيل قبل المتابعة."
@@ -28,7 +28,7 @@ ar:
       failure: "تعذر المصادقة من %{kind} لأن \"%{reason}\"."
       success: "تمت المصادقة بنجاح من حساب %{kind}."
     passwords:
-      no_token: "لا يمكنك الوصول لهذه الصفحة دون أن تأتي من البريد الإلكتروني لإعادة تعيين كلمة المرور. إذا كنت وصلت إلى هنا عبر البريد إلكتروني لإعادة تعيين كلمة المرور، الرجاء التأكد من أنك استخدمت عنوان URL بأكمله."
+      no_token: "لا يمكنك الوصول لهذه الصفحة دون أن تأتي من البريد الإلكتروني لإعادة تعيين كلمة المرور. إذا كنت وصلت إلى هنا عبر البريد إلكتروني لإعادة تعيين كلمة المرور، الرجاء التأكد من أنك استخدمت عنوان الرابط بأكمله."
       send_instructions: "سوف تتلقى رسالة بريد إلكتروني تحتوي على تعليمات إعادة ضبط كلمة المرور خلال بضع دقائق."
       send_paranoid_instructions: "إذا كان عنوان بريدك الإلكتروني موجود في قاعدة بياناتنا، سوف تتلقى رسالة بريد إلكتروني مع إرشادات إعادة ضبط كلمة المرور خلال بضع دقائق."
       updated: "تم تغيير كلمة المرور الخاصة بك بنجاح وتم تسجيل دخولك الآن."
@@ -46,20 +46,20 @@ ar:
       signed_out: "تم تسجيل الخروج بنجاح."
       already_signed_out: "تم تسجيل الخروج بنجاح."
     unlocks:
-      send_instructions: "سوف تتلقى رسالة بريد إلكتروني تحتوي على تعليمات لكيفية فتح حسابك في بضع دقائق."
+      send_instructions: "سوف تتلقى رسالة بريد إلكتروني تحتوي على تعليمات لكيفية فتح قفل حسابك في بضع دقائق."
       send_paranoid_instructions: "إذا كان حسابك موجودا، سوف تتلقى رسالة بريد إلكتروني تحتوي على إرشادات لكيفية فتحه في بضع دقائق."
       unlocked: "تم إلغاء قفل حسابك بنجاح. الرجاء تسجيل الدخول للمتابعة."
   errors:
     messages:
       already_confirmed: "تم تأكيده مسبقا، الرجاء محاولة تسجيل الدخول"
-      confirmation_period_expired: "يحتاج إلى تأكيد في غضون %{period}، الرجاء طلب واحد جديد"
-      expired: "انتهت صلاحيته، الرجاء طلب جديد"
+      confirmation_period_expired: "يحتاج إلى تأكيد في غضون %{period}، الرجاء طلب التأكيد مره أخرى"
+      expired: "انتهت صلاحيته، الرجاء إجراء طلب جديد"
       not_found: "غير موجود"
       not_locked: "لم يكن مقفلاً"
       not_saved:
         zero: "%{count} خطأ حظر هذا %{resource} من الحفظ:"
         one: "خطأ واحد حظر هذا %{resource} من الحفظ:"
         two: "%{count} أخطاء تمنع هذا %{resource} من الحفظ:"
-        few: "%{count} أخطاء تمنع هذا %{resource} من الحفظ:"
+        few: "%{count} خطأ تمنع هذا %{resource} من الحفظ:"
         many: "%{count} أخطاء تمنع هذا %{resource} من الحفظ:"
         other: "%{count} أخطاء تمنع هذا %{resource} من الحفظ:"
diff --git a/config/locales/devise.hr.yml b/config/locales/devise.hr.yml
index 570b466f8ebca..eca2baa397505 100644
--- a/config/locales/devise.hr.yml
+++ b/config/locales/devise.hr.yml
@@ -6,7 +6,7 @@ hr:
       send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
       send_paranoid_instructions: "If your email address exists in our database, you will receive an email with instructions for how to confirm your email address in a few minutes."
     failure:
-      already_authenticated: "You are already signed in."
+      already_authenticated: "Već ste prijavljeni."
       inactive: "Your account is not activated yet."
       invalid: "Invalid %{authentication_keys}/password or account is not verified yet."
       locked: "Your account is locked."
@@ -23,7 +23,7 @@ hr:
       unlock_instructions:
         subject: "Unlock instructions"
       password_change:
-        subject: "Password Changed"
+        subject: "Lozinka promijenjena"
     omniauth_callbacks:
       failure: "Could not authenticate you from %{kind} because \"%{reason}\"."
       success: "Successfully authenticated from %{kind} account."
diff --git a/config/locales/devise.tl.yml b/config/locales/devise.tl.yml
new file mode 100644
index 0000000000000..5890063ca022a
--- /dev/null
+++ b/config/locales/devise.tl.yml
@@ -0,0 +1,61 @@
+#Additional translations at https://github.com/plataformatec/devise/wiki/I18n
+tl:
+  devise:
+    confirmations:
+      confirmed: "Your email address has been successfully confirmed."
+      send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
+      send_paranoid_instructions: "If your email address exists in our database, you will receive an email with instructions for how to confirm your email address in a few minutes."
+    failure:
+      already_authenticated: "You are already signed in."
+      inactive: "Your account is not activated yet."
+      invalid: "Invalid %{authentication_keys}/password or account is not verified yet."
+      locked: "Your account is locked."
+      last_attempt: "You have one more attempt before your account is locked."
+      not_found_in_database: "Invalid %{authentication_keys} or password."
+      timeout: "Your session expired. Please sign in again to continue."
+      unauthenticated: "You need to sign in or sign up before continuing."
+      unconfirmed: "You have to confirm your email address before continuing."
+    mailer:
+      confirmation_instructions:
+        subject: "Confirmation Instructions"
+      reset_password_instructions:
+        subject: "Reset password instructions"
+      unlock_instructions:
+        subject: "Unlock instructions"
+      password_change:
+        subject: "Password Changed"
+    omniauth_callbacks:
+      failure: "Could not authenticate you from %{kind} because \"%{reason}\"."
+      success: "Successfully authenticated from %{kind} account."
+    passwords:
+      no_token: "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided."
+      send_instructions: "You will receive an email with instructions on how to reset your password in a few minutes."
+      send_paranoid_instructions: "If your email address exists in our database, you will receive a password recovery link at your email address in a few minutes."
+      updated: "Your password has been changed successfully. You are now signed in."
+      updated_not_active: "Your password has been changed successfully."
+    registrations:
+      destroyed: "Bye! Your account has been successfully cancelled. We hope to see you again soon."
+      signed_up: "Welcome! You have signed up successfully."
+      signed_up_but_inactive: "You have signed up successfully. However, we could not sign you in because your account is not yet activated."
+      signed_up_but_locked: "You have signed up successfully. However, we could not sign you in because your account is locked."
+      signed_up_but_unconfirmed: "A message with a confirmation link has been sent to your email address. Please follow the link to activate your account."
+      update_needs_confirmation: "You updated your account successfully, but we need to verify your new email address. Please check your email and follow the confirm link to confirm your new email address."
+      updated: "Your account has been updated successfully."
+    sessions:
+      signed_in: "Signed in successfully."
+      signed_out: "Signed out successfully."
+      already_signed_out: "Signed out successfully."
+    unlocks:
+      send_instructions: "You will receive an email with instructions for how to unlock your account in a few minutes."
+      send_paranoid_instructions: "If your account exists, you will receive an email with instructions for how to unlock it in a few minutes."
+      unlocked: "Your account has been unlocked successfully. Please sign in to continue."
+  errors:
+    messages:
+      already_confirmed: "was already confirmed, please try signing in"
+      confirmation_period_expired: "needs to be confirmed within %{period}, please request a new one"
+      expired: "has expired, please request a new one"
+      not_found: "not found"
+      not_locked: "was not locked"
+      not_saved:
+        one: "1 error prohibited this %{resource} from being saved:"
+        other: "%{count} errors prohibited this %{resource} from being saved:"
diff --git a/config/locales/el.yml b/config/locales/el.yml
index 21f49c7170fa2..eaf88e828adfc 100644
--- a/config/locales/el.yml
+++ b/config/locales/el.yml
@@ -187,28 +187,34 @@ el:
     online:
       delete: "%{contact_name} είναι Online, παρακαλώ προσπαθήστε ξανά αργότερα"
   integration_apps:
+    dashboard_apps:
+      name: "Εφαρμογές Dashboard"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Το Dyte είναι εργαλείο που σας βοηθά να προσθέσετε ζωντανό ήχο & βίντεο στην εφαρμογή σας με λίγες μόνο γραμμές κώδικα. Αυτή η ενσωμάτωση σας επιτρέπει να δώσετε μια επιλογή στους πράκτορές σας να έχουν ένα βίντεο ή μια φωνητική κλήση με τους πελάτες σας χωρίς να φύγετε από το Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "Ό πράκτορας %{agent_name} ξεκίνησε μια συνάντηση"
     slack:
       name: "Slack"
-      description: "Το Slack είναι ένα εργαλείο συνομιλιών (chat) το οποίο ενώνει σε ένα σημείο όλες τις επικοινωνίες. Ενοποιώντας με το Slack, μπορείτε να λαμβάνετε ειδοποιήσεις για όλες τις συνομιλίες στον λογαριασμό σας από το Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Τα συμβάντα Webhook μας εφοδιάζουν με πληροφορίες πραγματικού χρόνου σχετικά με το τι συμβαίνει στο λογαριασμό σας. Μπορείτε να χρησιμοποιήσετε τα webhooks για να μεταφέρετε τα συμβάντα σε άλλες εφαρμογές ή υπηρεσίες όπως το Slack ή Github. Πατήστε στην Διαμόρφωση για να ενημερώστε τα δικά σας webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Συνδέστε το Dialogflow bot στα εισερχόμενά σας. Αφήστε τα bots να χειριστούν τα ερωτήματα πριν τα παραδώσουν στον πράκτορα εξυπηρέτησης πελατών."
-    fullcontact:
-      name: "Πλήρης Επαφή"
-      description: "Το FullContact Indegration βοηθά στον εμπλουτισμό προφίλ επισκεπτών. Προσδιορίστε τους χρήστες μόλις μοιραστούν τη διεύθυνση ηλεκτρονικού ταχυδρομείου τους και να τους προσφέρουν προσαρμοσμένη εξυπηρέτηση πελατών. Συνδέστε το FullContact με το λογαριασμό σας, κοινοποιώντας το κλειδί API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Αναζήτηση άρθρου με τίτλο ή περιεχόμενο...
diff --git a/config/locales/en.yml b/config/locales/en.yml
index dae3b36e0e66b..63593ef04550d 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -202,31 +202,34 @@ en:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
     linear:
       name: "Linear"
-      description: "Create Linear issues from conversations, or link existing ones for seamless tracking."
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/es.yml b/config/locales/es.yml
index 8c5dab736f1da..9571404dce02b 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -75,7 +75,7 @@ es:
       avg_first_response_time: Promedio de tiempo de la primera respuesta
       avg_resolution_time: Tiempo promedio de resolución
       resolution_count: Número de resoluciones
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Tiempo promedio de espera del cliente
     inbox_csv:
       inbox_name: Nombre de la bandeja de entrada
       inbox_type: Tipo de bandeja de entrada
@@ -93,7 +93,7 @@ es:
       avg_first_response_time: Promedio de tiempo de la primera respuesta
       avg_resolution_time: Tiempo promedio de resolución
       resolution_count: Número de resoluciones
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Tiempo promedio de espera del cliente
     conversation_traffic_csv:
       timezone: Timezone
     sla_csv:
@@ -187,28 +187,34 @@ es:
     online:
       delete: "%{contact_name} está conectado, por favor inténtalo más tarde"
   integration_apps:
+    dashboard_apps:
+      name: "Panel de aplicaciones"
+      description: "Las aplicaciones de panel te permiten crear e incrustar aplicaciones que muestran información de usuario, pedidos o historial de pagos, proporcionando más contexto a tus agentes de soporte al cliente."
     dyte:
       name: "Dyte"
-      description: "Dyte es una herramienta que te ayuda a agregar audio y vídeo en vivo a tu aplicación con unas pocas líneas de código. Esta integración le permite dar una opción a sus agentes para tener una videollamada o llamada de voz con sus clientes sin salir de Chatwoot."
+      description: "Dyte es un producto que integra funcionalidades de audio y video en tu aplicación. Con esta integración, tus agentes pueden iniciar llamadas de video/voz con tus clientes directamente desde Chatwoot."
       meeting_name: "%{agent_name} ha iniciado una reunión"
     slack:
       name: "Slack"
-      description: "Slack es una herramienta de chat que reúne toda su comunicación en un solo lugar. Al integrar Slack, puede ser notificado de todas las nuevas conversaciones en su cuenta directamente dentro de su Slack."
+      description: "Integra Chatwoot con Slack para mantener a tu equipo sincronizado. Esta integración te permite recibir notificaciones de nuevas conversaciones y responder directamente desde la interfaz de Slack."
     webhooks:
       name: "Webhook"
-      description: "Los eventos Webhook le proporcionan información en tiempo real sobre lo que está sucediendo en su cuenta de Chatwoot. Puede hacer uso de los webhooks para comunicar los eventos a sus aplicaciones favoritas como Slack o Github. Haga clic en Configurar para configurar sus webhooks."
+      description: "Los eventos de webhook proporcionan actualizaciones en tiempo real sobre las actividades en tu cuenta de Chatwoot. Puedes suscribirte a los eventos que prefieras y Chatwoot te enviará llamadas HTTP con las actualizaciones."
     dialogflow:
       name: "Dialogflow"
-      description: "Construya chatboots usando Dialogflow y conéctelos rápidamente a su bandeja de entrada. Permita que los bots gestionen las preguntas and de que pasen a los agentes de servicio al cliente."
-    fullcontact:
-      name: "Nombre completo"
-      description: "La integración con FullContact enriquece los perfiles de los visitantes. Identifique a los usuarios tan pronto compartan la dirección de correo electrónico y ofrezca un servicio al cliente personalizado. Conecte su cuenta de FullContact usando al clave de la API."
+      description: "Construye chatbots con Dialogflow e intégralos fácilmente en tu bandeja de entrada. Estos bots pueden manejar consultas iniciales antes de transferirlas a un agente de servicio al cliente."
     google_translate:
       name: "Traductor de Google"
-      description: "Facilita a los agentes la traducción de mensajes añadiendo una integración de traducción de Google. Google Translate ayuda a identificar el idioma automáticamente y convertirlo al idioma elegido por el agente o administrador de la cuenta."
+      description: "Integra Google Translate para ayudar a los agentes a traducir fácilmente los mensajes de los clientes. Esta integración detecta automáticamente el idioma y lo convierte al idioma preferido del agente o del administrador."
     openai:
       name: "OpenAI"
-      description: "Integra poderosas características de IA en Chatwoot aprovechando los modelos GPT de OpenAI."
+      description: "Aprovecha el poder de los grandes modelos de lenguaje de OpenAI con funciones como sugerencias de respuestas, resúmenes, reformulación de mensajes, corrección ortográfica y clasificación de etiquetas."
+    linear:
+      name: "Lineal"
+      description: "Crea problemas en Linear directamente desde tu ventana de conversación. Alternativamente, enlaza problemas existentes en Linear para un proceso de seguimiento de problemas más eficiente y ágil."
+    captain:
+      name: "Capitán"
+      description: "Captain es un asistente nativo de inteligencia artificial diseñado para tu producto y entrenado en la base de conocimientos de tu empresa. Responde como un humano y resuelve eficazmente las consultas de los clientes. Configúralo fácilmente para tus buzones de entrada."
   public_portal:
     search:
       search_placeholder: Buscar artículo por título o cuerpo...
diff --git a/config/locales/fa.yml b/config/locales/fa.yml
index 0c303071d5797..329ad69c861e9 100644
--- a/config/locales/fa.yml
+++ b/config/locales/fa.yml
@@ -187,28 +187,34 @@ fa:
     online:
       delete: "%{contact_name} آنلاین است ، لطفاً بعداً دوباره امتحان کنید"
   integration_apps:
+    dashboard_apps:
+      name: "برنامه‌های پیشخوان"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte ابزاری است که به شما کمک می کند تا صدا و تصویر زنده را تنها با چند خط کد به برنامه خود اضافه کنید. این ادغام به شما امکان می دهد تا گزینه ای را به نمایندگان خود بدهید تا بدون ترک چت با مشتریان خود تماس ویدیویی یا صوتی داشته باشند."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} جلسه ای را آغاز کرده است"
     slack:
       name: "Slack"
-      description: "Slack ابزاری برای گفتگو است که تمام ارتباطات شما را در یک مکان جمع می کند. با ادغام Slack ، می توانید از تمام مکالمات جدید در حساب خود در داخل Slack مطلع شوید."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "وب هوک"
-      description: "رویدادهای Webhook اطلاعات واقعی در مورد آنچه در حساب شما اتفاق می افتد را به شما ارائه می دهند. برای برقراری ارتباط رویدادها با برنامه های مورد علاقه خود مانند Slack یا Github می توانید از وب بوک ها استفاده کنید. برای تنظیم webhooks خود روی تنظیمات کلیک کنید."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "با استفاده از Dialogflow ربات های چت بسازید و آنها را به سرعت به صندوق ورودی خود متصل کنید. شما به ربات ها اجازه میدهید قبل از اتصال به اپراتور ، ربات با مشتری صحبت کند."
-    fullcontact:
-      name: "تماس کامل"
-      description: "ادغام FullContact به غنی سازی پروفایل بازدیدکنندگان کمک می کند. به محض به اشتراک گذاشتن آدرس ایمیل کاربران ، آنها را شناسایی کرده و به آنها خدمات مشتری مناسب ارائه دهید. با به اشتراک گذاشتن کلید APC FullContact ، حساب FullContact خود را به حساب خود وصل کنید."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "مترجم گوگل"
-      description: "با افزودن Google Translate یکپارچه سازی، ترجمه پیام ها را برای اپراتور آسان تر کنید. Google translate به شناسایی خودکار زبان و تبدیل آن به زبان انتخاب شده توسط اپراتور/مدیر حساب کمک می کند."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "با استفاده از مدل‌های GPT از OpenAI، ویژگی‌های قدرتمند هوش مصنوعی را در Chatwoot اضافه کنید."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: جستجوی مقاله براساس عنوان یا متن...
diff --git a/config/locales/fi.yml b/config/locales/fi.yml
index cd75e3f588006..31d8b67201f01 100644
--- a/config/locales/fi.yml
+++ b/config/locales/fi.yml
@@ -187,28 +187,34 @@ fi:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack on chat-työkalu, joka tuo kaiken viestintäsi yhteen paikkaan. Integroimalla Slackin voit saada ilmoituksen kaikista uusista keskusteluista Slackin sisällä."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhookit"
-      description: "Webhook-tapahtumat antavat sinulle reaaliaikaista tietoa siitä, mitä Chatwoot-tililläsi tapahtuu. Voit käyttää webhookeja ja välittää tapahtumat suosikkiohjelmillesi, kuten Slackiin tai Githubiiin. Klikkaa \"Määrittele\" määrittääksesi webhookisi."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 461a7d00143ce..e2bb718a0d74a 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -187,28 +187,34 @@ fr:
     online:
       delete: "%{contact_name} est en ligne, veuillez réessayer plus tard"
   integration_apps:
+    dashboard_apps:
+      name: "Applications du tableau de bord"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte est un outil qui vous aide à ajouter de l'audio et de la vidéo en direct à votre application avec seulement quelques lignes de code. Cette intégration vous permet de donner une option à vos agents de passer un appel vidéo ou vocal avec vos clients sans quitter Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} a démarré une réunion"
     slack:
       name: "Slack"
-      description: "Slack est un outil de chat qui regroupe toutes vos communications en un seul endroit. En intégrant Slack, vous pouvez être notifié de toutes les nouvelles conversations de votre compte directement dans votre Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Les événements Webhook vous fournissent des informations en temps réel sur ce qui se passe dans votre compte. Vous pouvez utiliser les webhooks pour communiquer les événements à vos applications préférées comme Slack ou Github. Cliquez sur Configurer pour configurer vos webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Construisez des chatbots en utilisant Dialogflow et connectez-les à votre boîte de réception rapidement. Laissez les bots s'occuper des requêtes avant de les transmettre à un agent de service à la clientèle."
-    fullcontact:
-      name: "Fullcontact"
-      description: "L'intégration FullContact permet d'enrichir les profils de visiteurs. Identifiez les utilisateurs dès qu'ils partagent leur adresse de courriel et offrez-leur un service client sur mesure. Connectez FullContact à votre compte en partageant la clé API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Facilitez la traduction des messages par les agents en ajoutant une intégration de Google Translate. Google Translate permet d'identifier automatiquement la langue et de la convertir dans la langue choisie par l'agent/administrateur du compte."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Intégrez de puissantes fonctions d'IA dans Chatwoot en exploitant les modèles GPT d'OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Rechercher un article par titre ou contenu...
diff --git a/config/locales/he.yml b/config/locales/he.yml
index 01b2fc03c4401..21bf88ca1f27f 100644
--- a/config/locales/he.yml
+++ b/config/locales/he.yml
@@ -187,28 +187,34 @@ he:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "אפליקציות לוח מחוונים"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "דיטה"
-      description: "Dyte הוא כלי שעוזר לך להוסיף אודיו ווידאו חי ליישום שלך עם מספר שורות קוד בלבד. אינטגרציה זו מאפשרת לך לתת אפשרות לסוכנים שלך לנהל שיחת וידאו או קול עם הלקוחות שלך מבלי לעזוב את Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "רָפוּי"
-      description: "Slack הוא כלי צ'אט שמפגיש את כל התקשורת שלך במקום אחד. על ידי שילוב Slack, אתה יכול לקבל הודעה על כל השיחות החדשות בחשבון שלך ישירות בתוך ה-Slack שלך."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "אירועי Webhook מספקים לך מידע בזמן אמת על מה שקורה בחשבונך. אתה יכול להשתמש ב-webhooks כדי להעביר את האירועים לאפליקציות המועדפות עליך כמו Slack או Github. לחץ על הגדר כדי להגדיר את ה-webhooks שלך."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "זרימת דיאלוג"
-      description: "בנה צ'אטבוטים באמצעות Dialogflow וחבר אותם לתיבת הדואר הנכנס שלך במהירות. תן לבוטים לטפל בשאילתות לפני שיעבירו אותן לסוכן שירות לקוחות."
-    fullcontact:
-      name: "מגע מלא"
-      description: "אינטגרציה של FullContact עוזרת להעשיר את פרופילי המבקרים. זהה את המשתמשים ברגע שהם משתפים את כתובת הדוא\"ל שלהם והציע להם שירות לקוחות מותאם. חבר את FullContact לחשבון שלך על ידי שיתוף מפתח ה-API של FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "גוגל תרגום"
-      description: "הקל על סוכנים לתרגם הודעות על ידי הוספת שילוב של Google Translate. Google translate עוזר לזהות את השפה באופן אוטומטי ולהמיר אותה לשפה שנבחרה על ידי הסוכן/מנהל החשבון."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/hi.yml b/config/locales/hi.yml
index a03642b4eb434..92bea7185d6d0 100644
--- a/config/locales/hi.yml
+++ b/config/locales/hi.yml
@@ -187,28 +187,34 @@ hi:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/hr.yml b/config/locales/hr.yml
index a0380712f60a7..6f33c401585e7 100644
--- a/config/locales/hr.yml
+++ b/config/locales/hr.yml
@@ -17,7 +17,7 @@
 #To learn more, please read the Rails Internationalization guide
 #available at https://guides.rubyonrails.org/i18n.html.
 hr:
-  hello: "Hello world"
+  hello: "Pozdrav svijet!"
   messages:
     reset_password_success: Woot! Request for password reset is successful. Check your mail for instructions.
     reset_password_failure: Uh ho! We could not find any user with the specified email.
@@ -100,7 +100,7 @@ hr:
       conversation_id: Conversation ID
       sla_policy_breached: SLA Policy
       assignee: Assignee
-      team: Team
+      team: Tim
       inbox: Inbox
       labels: Labels
       conversation_link: Link to the Conversation
@@ -112,7 +112,7 @@ hr:
         contact_email_address: Contact Email Address
         contact_phone_number: Contact Phone Number
         link_to_the_conversation: Link to the conversation
-        agent_name: Agent Name
+        agent_name: Ime agenta
         rating: Rating
         feedback: Feedback Comment
         recorded_at: Recorded date
@@ -187,28 +187,34 @@ hr:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integiraj napredne AI funkcionalnosti u Chatwoot koristeći GPT modele od OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
@@ -246,13 +252,13 @@ hr:
       back_to_home: Go to home page
   slack_unfurl:
     fields:
-      name: Name
+      name: Ime
       email: Email
       phone_number: Phone
       company_name: Company
       inbox_name: Inbox
       inbox_type: Inbox Type
-    button: Open conversation
+    button: Otvori razgovor
   time_units:
     days:
       one: "%{count} day"
diff --git a/config/locales/hu.yml b/config/locales/hu.yml
index eba418ab7ab5b..a415936b4a93f 100644
--- a/config/locales/hu.yml
+++ b/config/locales/hu.yml
@@ -187,28 +187,34 @@ hu:
     online:
       delete: "%{contact_name} elérhető, kérjük, próbálja meg később újra"
   integration_apps:
+    dashboard_apps:
+      name: "Kezdőlap applikációi"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "A Dyte egy olyan eszköz, amely segítségével élő hangot és videót adhat hozzá alkalmazásához mindössze néhány sornyi kóddal. Ez az integráció lehetővé teszi, hogy lehetőséget adjon ügynökeinek, hogy video- vagy hanghívást kezdeményezzenek ügyfeleivel a felület elhagyása nélkül."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} megbeszélést kezdett"
     slack:
       name: "Slack"
-      description: "A Slack egy chat eszköz mely minden kommunikációdat összehozza. A Slack integrálásával értesítést kaphasz új beszélgetésekről a Slack fiókodban."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhook"
-      description: "A Webhook események valós idejű információt adnak arról, hogy mi történik a fiókodban. Webhookokat használhatsz arra, hogy az eseményeket a kedvenc appjaidban, pl. a Slackben vagy a Githubban használd. Kattints hogy beállíthast a Webhookjaidat."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Építsen chatbotokat a Dialogflow segítségével, és kapcsolja őket gyorsan a postaládájához. Hagyja, hogy a botok kezeljék a kérdéseket, mielőtt átadná őket egy ügyfélszolgálati ügynöknek."
-    fullcontact:
-      name: "FullContact"
-      description: "A FullContact integráció segít a látogatói profilok egységesítésében. Azonosítsa a felhasználókat, amint megosztják e-mail címüket, és kínáljon nekik személyre szabott ügyfélszolgálatot. Csatlakoztassa a FullContactot fiókjához a FullContact API-kulcs megosztásával."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Fordító"
-      description: "A Google Fordító-integráció hozzáadásával megkönnyítheti az ügynökök számára az üzenetek fordítását. A Google fordító segít a nyelv automatikus azonosításában és az ügyintéző/fiókadminisztrátor által választott nyelvre való konvertálásában."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Használj OpenAI GPT modelleket mesterséges intelligencia alapú megoldások integrálására."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Keress a bejegyzések címében és tartalmában...
diff --git a/config/locales/hy.yml b/config/locales/hy.yml
index 3f566ce16459a..18d4594bf51c4 100644
--- a/config/locales/hy.yml
+++ b/config/locales/hy.yml
@@ -187,28 +187,34 @@ hy:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/id.yml b/config/locales/id.yml
index 5d8c62fb36fcc..f815c8b6ffc24 100644
--- a/config/locales/id.yml
+++ b/config/locales/id.yml
@@ -187,28 +187,34 @@ id:
     online:
       delete: "%{contact_name} sedang Online, silakan coba lagi nanti"
   integration_apps:
+    dashboard_apps:
+      name: "Aplikasi Dasbor"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte adalah alat yang membantu Anda menambahkan audio & video langsung ke aplikasi Anda hanya dengan beberapa baris kode. Integrasi ini memungkinkan Anda memberikan opsi kepada agen Anda untuk melakukan panggilan video atau suara dengan pelanggan Anda tanpa meninggalkan Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} memulai percakapan"
     slack:
       name: "Slack"
-      description: "Slack adalah alat obrolan yang menyatukan semua komunikasi Anda di satu tempat. Dengan mengintegrasikan Slack, Anda bisa mendapatkan pemberitahuan tentang semua percakapan baru di akun Anda tepat di dalam Slack Anda."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook event memberi Anda informasi realtime tentang apa yang terjadi di akun Anda. Anda dapat menggunakan webhook untuk mengkomunikasikan acara ke aplikasi favorit Anda seperti Slack atau GitHub. Klik Konfigurasi untuk mengatur webhook Anda."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Pembuatan chatbot menggunakan Dialogflow dan menghubungkannya ke kotak masuk Anda secepatnya. Biarkan bot menangani semua permintaan sebelum menyerahkannya pada agen layanan pelanggan."
-    fullcontact:
-      name: "Fullcontact"
-      description: "Integrasi FullContact membantu memperkaya profil pengunjung. Identifikasi pengguna segera setelah mereka membagikan alamat email mereka dan tawarkan layanan pelanggan yang disesuaikan. Hubungkan FullContact Anda ke akun Anda dengan membagikan Kunci API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Terjemahan"
-      description: "Permudah agen untuk menerjemahkan pesan dengan menambahkan Integrasi Google Terjemahan. Google translate membantu mengidentifikasi bahasa secara otomatis dan mengonversinya ke bahasa yang dipilih oleh agen/admin akun."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrasikan fitur AI yang kuat ke dalam Chatwoot dengan memanfaatkan model GPT dari OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Telusuri artikel menurut judul atau isi...
diff --git a/config/locales/is.yml b/config/locales/is.yml
index 62010c6cb60b5..592d92962f47a 100644
--- a/config/locales/is.yml
+++ b/config/locales/is.yml
@@ -187,28 +187,34 @@ is:
     online:
       delete: "%{contact_name} er á tengdur, vinsamlegast reyndu aftur síðar"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack er spjallforrit sem sameinar öll samskipti þín á einum stað. Með því að samþætta Slack geturðu fengið tilkynningu um öll nýju samtölin á reikningnum þínum beint inni í Slackinu þínu."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook viðburðir veita þér rauntíma upplýsingar um hvað er að gerast á reikningnum þínum. Þú getur notað webhook til að miðla atburðunum til uppáhaldsforritanna þinna eins og Slack eða Github. Smelltu á Stilla til að setja upp webhook."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Búðu til spjallmenni með Dialogflow og tengdu þá fljótlega við innhólfið þitt. Láttu spjallmennin sjá um fyrirspurnirnar áður en þú sendir þær til þjónustufulltrúa."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact samþætting hjálpar til við að auðga gestaprófíla. Þekkja notendur um leið og þeir deila netfangi sínu og bjóða þeim sérsniðna þjónustu. Tengdu FullContact við reikninginn þinn með því að deila FullContact API lykilnum."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/it.yml b/config/locales/it.yml
index 983e981c8782b..22433946857c0 100644
--- a/config/locales/it.yml
+++ b/config/locales/it.yml
@@ -187,28 +187,34 @@ it:
     online:
       delete: "%{contact_name} è online, riprova più tardi"
   integration_apps:
+    dashboard_apps:
+      name: "App dashboard"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack è uno strumento di chat che porta tutta la vostra comunicazione insieme in un unico posto. Integrando Slack, puoi ricevere una notifica di tutte le nuove conversazioni nel tuo account direttamente all'interno di Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhook"
-      description: "Gli eventi Webhook ti forniscono le informazioni in tempo reale su ciò che sta accadendo nel tuo account. Puoi utilizzare i webhooks per comunicare gli eventi alle tue app preferite, come Slack o Github. Clicca su Configura per configurare i tuoi webhook."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Costruisci chatbot usando Dialogflow e collegali rapidamente alla tua casella. Lascia che i bot gestiscano le domande prima di consegnarle ad un agente del servizio clienti."
-    fullcontact:
-      name: "Fullcontact"
-      description: "L'integrazione di FullContact aiuta ad arricchire i profili dei visitatori. Identifica gli utenti non appena condividono il loro indirizzo email e offri loro un servizio clienti personalizzato. Collega FullContact al tuo account condividendo la chiave API di FullContent."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index f883e47b2f107..7d1091b3fda08 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -187,28 +187,34 @@ ja:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ka.yml b/config/locales/ka.yml
index a59d1416c2669..c5137bce30364 100644
--- a/config/locales/ka.yml
+++ b/config/locales/ka.yml
@@ -187,28 +187,34 @@ ka:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ko.yml b/config/locales/ko.yml
index e23fb7d065aa9..b4af2ebd86d28 100644
--- a/config/locales/ko.yml
+++ b/config/locales/ko.yml
@@ -187,28 +187,34 @@ ko:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/lt.yml b/config/locales/lt.yml
index 7b0c6e0b1cb7b..54977773e81b7 100644
--- a/config/locales/lt.yml
+++ b/config/locales/lt.yml
@@ -187,28 +187,34 @@ lt:
     online:
       delete: "%{contact_name} yra prisijungęs, pabandykite dar kartą vėliau"
   integration_apps:
+    dashboard_apps:
+      name: "Informacinio skydelio programos"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte yra įrankis, padedantis pridėti tiesioginį garso ir vaizdo įrašą prie programos naudojant tik kelias kodo eilutes. Ši integracija leidžia agentams suteikti galimybę užmegzti vaizdo arba balso skambutį su klientais nepaliekant Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} pradėjo susitikimą"
     slack:
       name: "Slack"
-      description: "Slack yra pokalbių įrankis, kuris visą jūsų bendravimą sujungia į vieną vietą. Integravę Slack, galite gauti pranešimus apie visus naujus savo paskyros pokalbius tiesiai Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhook"
-      description: "Webhook įvykiai suteikia jums realaus laiko informaciją apie tai, kas vyksta jūsų paskyroje. Galite naudoti Webhook, kad praneštumėte apie įvykius mėgstamoms programoms, pvz., Slack ar Github. Spustelėkite Konfigūruoti, kad nustatytumėte Webhook."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Kurkite pokalbių robotus naudodami „Dialogflow“ ir greitai prijunkite juos prie savo gautų pranešimų aplanko. Leiskite robotams tvarkyti užklausas prieš perduodant jas klientų aptarnavimo agentui."
-    fullcontact:
-      name: "FullContact"
-      description: "FullContact integracija padeda praturtinti lankytojų profilius. Identifikuokite vartotojus, kai tik jie pasidalins savo el. pašto adresu, ir pasiūlykite jiems pritaikytą klientų aptarnavimą. Prijunkite FullContact prie paskyros bendrindami FullContact API raktą."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Padėkite agentams lengviau išversti pranešimus pridėdami Google Translate integravimą. Google Translate padeda automatiškai identifikuoti kalbą ir konvertuoti ją į agento/paskyros administratoriaus pasirinktą kalbą."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integruokite galingas AI funkcijas į Chatwoot, naudodamiesi OpenAI GPT modeliais."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Ieškokite straipsnio pagal pavadinimą arba turinį...
diff --git a/config/locales/lv.yml b/config/locales/lv.yml
index 72d0a228dc8a5..e43e1a0ce1bdd 100644
--- a/config/locales/lv.yml
+++ b/config/locales/lv.yml
@@ -187,28 +187,34 @@ lv:
     online:
       delete: "%{contact_name} ir Tiešsaistē, lūdzu, vēlāk mēģiniet vēlreiz"
   integration_apps:
+    dashboard_apps:
+      name: "Informācijas paneļa Lietotnes"
+      description: "Informācijas paneļa Lietotnes ļauj izveidot un iegult lietojumprogrammas, kurās tiek parādīta lietotāja informācija, pasūtījumu vai maksājumu vēsture, nodrošinot plašāku kontekstu jūsu klientu atbalsta aģentiem."
     dyte:
       name: "Dyte"
-      description: "Dyte ir rīks, kas lietojumprogrammai palīdz pievienot audio un video tiešraidi, izmantojot tikai dažas koda rindiņas. Šī integrācija ļauj piedāvāt iespēju Jūsu aģentiem veikt video vai balss zvanu ar klientiem, neizejot no Chatwoot."
+      description: "Dyte ir produkts, kas integrē audio un video funkcijas jūsu lietojumprogrammā. Izmantojot šo integrāciju, jūsu aģenti var sākt video/balss zvanus ar klientiem tieši no Chatwoot."
       meeting_name: "%{agent_name} ir sācis sapulci"
     slack:
       name: "Slack"
-      description: "Slack ir tērzēšanas rīks, kas apvieno visu Jūsu saziņu vienuviet. Integrējot Slack, Jūs varat saņemt paziņojumus par visām jaunajām sarunām savā kontā tieši savā Slack."
+      description: "Integrējiet Chatwoot ar Slack, lai sinhronizētu savu komandu. Šī integrācija ļauj saņemt paziņojumus par jaunām sarunām un atbildēt uz tām tieši Slack saskarnē."
     webhooks:
       name: "Webhooks"
-      description: "WebHook notikumi sniedz Jums reāllaika informāciju par to, kas notiek Jūsu kontā. Jūs varat izmantot webhook, lai paziņotu notikumus savām iecienītākajām lietotnēm, piemēram, Slack vai Github. Noklikšķiniet uz Konfigurēt, lai iestatītu savus webhook."
+      description: "Webhook notikumi nodrošina reāllaika atjauninājumus par darbībām jūsu Chatwoot kontā. Varat abonēt vēlamos notikumus, un Chatwoot nosūtīs jums HTTP atzvanīšanas ziņojumus ar atjauninājumiem."
     dialogflow:
       name: "Dialogflow"
-      description: "Veidojiet tērzēšanas robotus, izmantojot Dialogflow, un ātri savienojiet tos ar iesūtni. Ļaujiet botiem apstrādāt vaicājumus, pirms tos nododat klientu apkalpošanas aģentam."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integrācija palīdz bagātināt apmeklētāju profilus. Identificējiet lietotājus, tiklīdz viņi kopīgo savu e-pasta adresi, un piedāvājiet viņiem pielāgotu klientu apkalpošanu. Savienojiet FullContact ar savu kontu, kopīgojot FullContact API atslēgu."
+      description: "Veidojiet tērzēšanas robotus, izmantojot Dialogflow, un viegli integrējiet tos savā iesūtnē. Šīs robotprogrammatūras var apstrādāt sākotnējos vaicājumus pirms to nodošanas klientu apkalpošanas aģentam."
     google_translate:
       name: "Google Tulkotājs"
-      description: "Atvieglojiet aģentiem ziņojumu tulkošanu, pievienojot Google tulkotāja integrāciju. Google tulkotājs palīdz automātiski identificēt valodu un pārvērst to aģenta/konta administratora izvēlētajā valodā."
+      description: "Integrējiet Google tulkotāju, lai palīdzētu aģentiem viegli tulkot klientu ziņojumus. Šī integrācija automātiski nosaka valodu un pārslēdz to uz aģenta vai administratora vēlamo valodu."
     openai:
       name: "OpenAI"
-      description: "Integrēt jaudīgas AI funkcijas programmā Chatwoot, izmantojot OpenAI GPT modeļus."
+      description: "Izmantojiet OpenAI lielo valodu modeļu iespējas, tādas kā atbilžu ieteikumus, kopsavilkumus, ziņojumu pārfrāzēšanu, pareizrakstības pārbaudi un etiķešu klasifikāciju."
+    linear:
+      name: "Lineārs"
+      description: "Izveidojiet problēmu pieteikumus programmā Linear, tieši no sarunas loga. Varat arī sasaistīt esošos Linear problēmu pieteikumus, lai nodrošinātu racionālāku un efektīvāku problēmu izsekošanas procesu."
+    captain:
+      name: "Captain"
+      description: "Captain ir vietējais AI palīgs, kas ir izveidots jūsu produktam un ir apmācīts, izmantojot jūsu uzņēmuma zināšanu bāzi. Tas reaģē kā cilvēks un efektīvi atrisina klientu jautājumus. Viegli konfigurējams jūsu iesūtnēs."
   public_portal:
     search:
       search_placeholder: Meklēt rakstu pēc nosaukuma vai pamatteksta...
diff --git a/config/locales/ml.yml b/config/locales/ml.yml
index 0c1e742c9f6bd..ddc2d64320b4d 100644
--- a/config/locales/ml.yml
+++ b/config/locales/ml.yml
@@ -187,28 +187,34 @@ ml:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ms.yml b/config/locales/ms.yml
index 86b4900194377..aa7fc8889b16d 100644
--- a/config/locales/ms.yml
+++ b/config/locales/ms.yml
@@ -187,28 +187,34 @@ ms:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ne.yml b/config/locales/ne.yml
index 5fc0661bcdc36..fbaa00bf5630c 100644
--- a/config/locales/ne.yml
+++ b/config/locales/ne.yml
@@ -187,28 +187,34 @@ ne:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/nl.yml b/config/locales/nl.yml
index 7cf5bb26f5cb3..e0e9fc5359cf7 100644
--- a/config/locales/nl.yml
+++ b/config/locales/nl.yml
@@ -187,28 +187,34 @@ nl:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/no.yml b/config/locales/no.yml
index 80d07a92c97d1..78aed1d6b7581 100644
--- a/config/locales/no.yml
+++ b/config/locales/no.yml
@@ -187,28 +187,34 @@
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack er et chat-verktøy som bringer all kommunikasjon sammen på ett sted. Ved å integrere Slack, kan du få beskjed om alle nye samtaler i kontoen din."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook-hendelser gir deg sanntidsinformasjon om hva som skjer med kontoen din. Du kan bruke webhooks for å sende hendelsene til favorittappene dine, som Slack eller Github. Klikk på Konfigurer for å sette opp webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/pl.yml b/config/locales/pl.yml
index 2701450982839..f36fb34ffd513 100644
--- a/config/locales/pl.yml
+++ b/config/locales/pl.yml
@@ -187,28 +187,34 @@ pl:
     online:
       delete: "%{contact_name} jest online, spróbuj ponownie później"
   integration_apps:
+    dashboard_apps:
+      name: "Aplikacje na pulpicie"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte to narzędzie, które pomaga dodać dźwięk i wideo na żywo do aplikacji za pomocą zaledwie kilku linijek kodu. Ta integracja pozwala dać agentom możliwość prowadzenia rozmów wideo lub głosowych z klientami bez opuszczania Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} rozpoczął spotkanie"
     slack:
       name: "Slack"
-      description: "Slack to narzędzie czatu, które łączy całą Twoją komunikację w jednym miejscu. Integrując Slack, możesz otrzymywać powiadomienia o wszystkich nowych rozmowach na swoim koncie bezpośrednio wewnątrz Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooki"
-      description: "Webhooki dostarczają informacji o tym, co dzieje się na Twoim koncie do usług zewnętrznych. Możesz wykorzystać webhooki do przekazywania wydarzeń do ulubionych aplikacji, takich jak Slack lub Github. Kliknij na Konfiguruj, aby skonfigurować webhooki."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Twórz czatboty za pomocą Dialogflow i szybko łącz je ze swoją skrzynką odbiorczą. Pozwól botom obsługiwać zapytania, zanim przekażesz je agentowi obsługi klienta."
-    fullcontact:
-      name: "Pełny kontakt"
-      description: "Integracja FullContact pomaga wzbogacić profile odwiedzających. Zidentyfikuj użytkowników, gdy tylko udostępnią swój adres e-mail i zaoferuj im dostosowaną obsługę klienta. Połącz FullContact ze swoim kontem, udostępniając klucz API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Tłumacz Google"
-      description: "Ułatw agentom tłumaczenie wiadomości, dodając integrację z Tłumaczem Google. Tłumacz Google pomaga automatycznie zidentyfikować język i przekonwertować go na język wybrany przez agenta / administratora konta."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Zintegruj potężne funkcje AI z Chatwoot, wykorzystując modele GPT od OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Wyszukaj artykuł według tytułu lub treści...
diff --git a/config/locales/pt.yml b/config/locales/pt.yml
index 3f3b0adc108b5..e3f6c7a359d8a 100644
--- a/config/locales/pt.yml
+++ b/config/locales/pt.yml
@@ -75,7 +75,7 @@ pt:
       avg_first_response_time: Média de tempo da primeira resposta
       avg_resolution_time: Média de tempo de resolução
       resolution_count: Contagem de resolução
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Tempo médio de espera cliente
     inbox_csv:
       inbox_name: Nome da caixa de entrada
       inbox_type: Tipo de caixa de entrada
@@ -93,7 +93,7 @@ pt:
       avg_first_response_time: Média de tempo da primeira resposta
       avg_resolution_time: Média de tempo de resolução
       resolution_count: Contagem de resolução
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Tempo médio de espera cliente
     conversation_traffic_csv:
       timezone: Fuso Horário
     sla_csv:
@@ -187,28 +187,34 @@ pt:
     online:
       delete: "%{contact_name} está Online, por favor, tente novamente mais tarde"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte é uma ferramenta que ajuda a adicionar áudio e vídeo ao vivo à sua aplicação com apenas algumas linhas de código. Essa integração permite fornecer uma opção aos agentes para ter chamadas de vídeo ou voz com os seus clientes sem sair do Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} iniciou uma reunião"
     slack:
       name: "Slack"
-      description: "Slack é uma ferramenta de chat que junta num só lugar todas as suas comunicações. Ao integrar o Slack com a sua conta, pode ser notificado de todas as novas conversas diretamente no seu Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Os eventos Webhook fornecem informações em tempo real sobre o que está a acontecer na sua conta Chatwoot. Pode utilizar os Webhooks para comunicar eventos com as suas aplicações favoritas como o Slack ou o Github. Clique em Configurar para configurar os seus Webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Construa chatbots utilizando o Dialogflow e ligue-os rapidamente à sua caixa de entrada. Deixe os robost \"bots\" tratarem das consultas dos seus contatos antes de as entregar aos seus agentes de atendimento."
-    fullcontact:
-      name: "Fullcontact"
-      description: "A integração com o FullContact ajuda a enriquecer os perfis dos seus visitantes. Identifica os utilizadores assim que eles partilham o seu endereço de e-mail e ofereça um atendimento ao cliente mais personalizado. Ligue a sua conta ao FullContact utilizando apenas a sua chave API."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Tradutor"
-      description: "Torne a tradução de mensagens mais fácil paraos agentes adicionando uma integração do Google Tradutor. O Google Tradutor ajuda a identificar automaticamente o idioma e a convertê-lo para o idioma escolhido pelo agente/administrador de conte."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integre os poderosos recursos de IA com o Chatwoot utilizando os modelos GPT do OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Pesquisar artigo por título ou corpo...
diff --git a/config/locales/pt_BR.yml b/config/locales/pt_BR.yml
index 5579e3787d701..5935eaaf1dc84 100644
--- a/config/locales/pt_BR.yml
+++ b/config/locales/pt_BR.yml
@@ -75,7 +75,7 @@ pt_BR:
       avg_first_response_time: Tempo médio de primeira resposta
       avg_resolution_time: Tempo médio de resolução
       resolution_count: Contagem de Resolução
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Tempo médio de espera do cliente
     inbox_csv:
       inbox_name: Nome da Caixa de Entrada
       inbox_type: Tipo da Caixa de Entrada
@@ -93,7 +93,7 @@ pt_BR:
       avg_first_response_time: Tempo médio de primeira resposta
       avg_resolution_time: Tempo médio de resolução
       resolution_count: Contagem de Resolução
-      avg_customer_waiting_time: Avg customer waiting time
+      avg_customer_waiting_time: Tempo médio de espera do cliente
     conversation_traffic_csv:
       timezone: Fuso horário
     sla_csv:
@@ -187,28 +187,34 @@ pt_BR:
     online:
       delete: "%{contact_name} está Online, por favor, tente novamente mais tarde"
   integration_apps:
+    dashboard_apps:
+      name: "Apps da Dashboard"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte é uma ferramenta que ajuda você a adicionar áudio e vídeo ao vivo em sua aplicação com apenas algumas linhas de código. Essa integração permite dar uma opção aos seus agentes para ter uma chamada de vídeo ou voz com os seus clientes sem sair do Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} começou a reunião"
     slack:
       name: "Slack"
-      description: "Slack é uma ferramenta que reúne todas as suas comunicações em um só lugar. Ao integrar o Slack, você pode ser notificado de todas as novas conversas da sua conta diretamente no seu Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhooks fornecem informações em tempo real sobre o que está acontecendo em sua conta. Você pode usar os webhooks para comunicar eventos com seus aplicativos favoritos como Slack ou Github. Clique em Configurar para configurar seus webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Fluxo de diálogo"
-      description: "Construa chatbots usando Dialogflow e conecte-os à sua caixa de entrada rapidamente. Deixe os bots lidarem com as consultas antes de entregá-los a um agente de atendimento ao cliente."
-    fullcontact:
-      name: "Contato completo"
-      description: "A integração de contatos completos ajuda a enriquecer perfis de visitantes. Identifique os usuários assim que eles compartilham seu endereço de e-mail e ofereça um atendimento ao cliente personalizado. Conecte seu FullContact à sua conta compartilhando a chave de API de Contato Fullcot."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Tradutor do Google"
-      description: "Torne isso mais fácil para agentes traduzirem mensagens adicionando uma integração com o Tradutor do Google. O Tradutor do Google ajuda a identificar automaticamente o idioma e convertê-lo para o idioma escolhido pelo administrador de conta/agente."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integre os poderosos recursos de IA ao Chatwoot aproveitando os modelos GPT da OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Pesquisar por artigo por título ou corpo...
diff --git a/config/locales/ro.yml b/config/locales/ro.yml
index e6497dbef953a..9631ee2076d9a 100644
--- a/config/locales/ro.yml
+++ b/config/locales/ro.yml
@@ -187,28 +187,34 @@ ro:
     online:
       delete: "%{contact_name} este online, încercați din nou mai târziu"
   integration_apps:
+    dashboard_apps:
+      name: "Aplicații tablou de bord"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte este un instrument care vă ajută să adăugați audio și video live la aplicația dvs., cu doar câteva linii de cod. Această integrare vă permite să oferiți o opțiune agenților dumneavoastră de a efectua un apel video sau vocal cu clienții dvs., fără a părăsi Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} a început o întâlnire"
     slack:
       name: "Slack"
-      description: "Slack este un instrument de chat care vă reunește toate comunicările într-un singur loc. Prin integrarea Slack, puteți fi notificat cu privire la toate conversațiile noi din cont chiar în interiorul Slack-ului."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhook-uri"
-      description: "Evenimentele Webhook vă oferă informații în timp real despre ceea ce se întâmplă în contul dvs. Puteți utiliza webhook-urile pentru a comunica evenimentele aplicațiilor preferate, cum ar fi Slack sau Github. Faceți clic pe Configurare pentru a configura webhooks dumneavoastră."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Flux de dialog"
-      description: "Construiți chatboți folosind Dialogflow și conectați-i rapid la inbox. Lăsați roboții să se ocupe de interogări înainte de a le preda unui agent de servicii pentru clienți."
-    fullcontact:
-      name: "Fullcontact"
-      description: "Integrarea FullContact ajută la îmbogățirea profilurilor vizitatorilor. Identificați utilizatorii imediat ce își partajează adresa de e-mail și oferiți-le servicii personalizate pentru clienți. Conectați FullContact la contul dvs., partajând cheia API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Simplificați traducerea mesajelor de către agenți prin adăugarea unei integrări Google Translate. Google translate ajută la identificarea automată a limbii și la conversia acesteia în limba aleasă de agent/administratorul contului."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrați funcții AI puternice în Chatwoot folosind modelele GPT de la OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Căutați articol după titlu sau corp...
diff --git a/config/locales/ru.yml b/config/locales/ru.yml
index 0e384bee421ee..b67e866c59e79 100644
--- a/config/locales/ru.yml
+++ b/config/locales/ru.yml
@@ -187,28 +187,34 @@ ru:
     online:
       delete: "%{contact_name} в сети, повторите попытку позже"
   integration_apps:
+    dashboard_apps:
+      name: "Панель приложений"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte это инструмент, который поможет вам добавить живое аудио и видео в ваше приложение всего несколько строк кода. Эта интеграция позволяет вашим агентам совершать видеосвязь или голосовой звонок со своими клиентами не выходя из Чатвута."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} приступил к встрече"
     slack:
       name: "Slack"
-      description: "Slack это сервис, который позволяет объединить рабочие коммуникации в одном месте. При интеграции с Slack вы будете получать уведомления обо всех новых разговорах прямо в Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "События webhook позволяют получать информацию о происходящем в вашем аккаунте в реальном времени. Вы можете использовать webhook в связке с вашими приложениями, такими как Slack или Github. Нажмите на Настроить для настройки webhook."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Диалог"
-      description: "Создавайте чатботы используя Dialogflow и быстро подключайте их к входящим каналам. Пусть боты обрабатывают запросы, прежде чем передать их агенту по обслуживанию клиентов."
-    fullcontact:
-      name: "Полная карточка контакта"
-      description: "Интеграция с FullContact помогает получить всю информацию о профиле посетителей. Определяйте пользователей как только они поделится своим электронным адресом и предложите им индивидуальное обслуживание клиентов. Подключите ваш FullContact к своей учетной записи, поделившись API ключом FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Перевод"
-      description: "Чтобы агентам было легче переводить сообщения, добавляя интеграцию с переводом Google Translate Integration. Перевод Google помогает идентифицировать язык автоматически и конвертировать его на язык, выбранный администратором/сотрудником."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Интеграция мощных функций AI в Chatwoot путем использования моделей GPT из OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Поиск статьи по названию или содержанию...
diff --git a/config/locales/sh.yml b/config/locales/sh.yml
index 0b938831dec42..ce978e48686d8 100644
--- a/config/locales/sh.yml
+++ b/config/locales/sh.yml
@@ -187,28 +187,34 @@ sh:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/sk.yml b/config/locales/sk.yml
index c37e472a0d3df..4ba198d13e1ef 100644
--- a/config/locales/sk.yml
+++ b/config/locales/sk.yml
@@ -187,28 +187,34 @@ sk:
     online:
       delete: "%{contact_name} je online, skúste to prosím neskôr"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack je chatovací nástroj, ktorý spája všetku vašu komunikáciu na jednom mieste. Integráciou služby Slack môžete dostávať upozornenia na všetky nové konverzácie vo vašom účte priamo v službe Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Udalosti Webhook vám poskytujú informácie v reálnom čase o tom, čo sa deje vo vašom účte. Webhook môžete využiť na oznamovanie udalostí svojim obľúbeným aplikáciám, ako je Slack alebo Github. Kliknutím na tlačidlo Konfigurovať nastavte svoje webhooky."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Vytvorte chatboty pomocou aplikácie Dialogflow a rýchlo ich pripojte k doručenej pošte. Nechajte botov spracovať otázky predtým, ako ich odovzdáte agentovi zákazníckeho servisu."
-    fullcontact:
-      name: "Fullcontact"
-      description: "Integrácia so službou FullContact pomáha obohatiť profily návštevníkov. Identifikujte používateľov hneď, ako zdieľajú svoju e-mailovú adresu, a ponúknite im zákaznícky servis šitý na mieru. Pripojte aplikáciu FullContact k svojmu účtu zdieľaním kľúča API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/sl.yml b/config/locales/sl.yml
index d3f31c33f8896..52d1947b0f6a3 100644
--- a/config/locales/sl.yml
+++ b/config/locales/sl.yml
@@ -187,28 +187,34 @@ sl:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/sq.yml b/config/locales/sq.yml
index 6b84c4c243ee1..42d1efdcf9aa2 100644
--- a/config/locales/sq.yml
+++ b/config/locales/sq.yml
@@ -187,28 +187,34 @@ sq:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/sr.yml b/config/locales/sr.yml
index 3f34d8cefd0e4..37fe4092cf4f6 100644
--- a/config/locales/sr.yml
+++ b/config/locales/sr.yml
@@ -187,28 +187,34 @@ sr-Latn:
     online:
       delete: "%{contact_name} je dostupan, molim vas pokušajte ponovo"
   integration_apps:
+    dashboard_apps:
+      name: "Aplikacije radne table"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack je alat za ćaskanje koji objedinjuje sve vaše komunikacije na jedno mesto. Integracijom Slack-a, možete biti obavešteni o svim novim razgovorima na vašem nalogu direktno u Slack-u."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Veb zakačke"
-      description: "Veb zakačke vam donose informacije u realnom vremenu o tome šta se dešava u vašem nalogu. Možete iskoristiti veb zakačke da prosledite događaje do vaših omiljenih aplikacija kao što su Slack ili Github. Kliknite na Konfiguriši da podesite vaše veb zakačke."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Izgradite botove ćaskanja koristeći Dialogflow i povežite ih sa vašim prijemnim sandučetom. Neka botovi rešavaju upite pre prosleđivanja do agenta korisničke podrške."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integracija pomaže vam da obogatite profile posetilaca. Identifikujte korisnike čim podele njihovu adresu e-pošte i ponudite im prilagođenu korisničku podršku. Povežite vaš FullContact sa vašim nalogom deljenjem FullContact API ključa."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/sv.yml b/config/locales/sv.yml
index d714a8e3dee4a..92ae69dba68a8 100644
--- a/config/locales/sv.yml
+++ b/config/locales/sv.yml
@@ -187,28 +187,34 @@ sv:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack är ett chattverktyg som samlar all din kommunikation på ett ställe. Genom att integrera Slack kan du få meddelanden om alla nya konversationer på ditt konto direkt i din Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhookar"
-      description: "Webhook-händelser ger dig realtidsinformation om vad som händer i ditt konto. Du kan använda webhooks för att kommunicera händelser till dina favoritappar som Slack eller Github. Klicka på Konfigurera för att konfigurera dina webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Sök efter artikel baserat på rubrik eller brödtext...
diff --git a/config/locales/ta.yml b/config/locales/ta.yml
index ce5ed0773a00a..610b17dafdb8a 100644
--- a/config/locales/ta.yml
+++ b/config/locales/ta.yml
@@ -187,28 +187,34 @@ ta:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/th.yml b/config/locales/th.yml
index 2eaa9068dae8f..fa2b942f89006 100644
--- a/config/locales/th.yml
+++ b/config/locales/th.yml
@@ -187,28 +187,34 @@ th:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/tl.yml b/config/locales/tl.yml
new file mode 100644
index 0000000000000..559aedea8e9aa
--- /dev/null
+++ b/config/locales/tl.yml
@@ -0,0 +1,274 @@
+#Files in the config/locales directory are used for internationalization
+#and are automatically loaded by Rails. If you want to use locales other
+#than English, add the necessary files in this directory.
+#To use the locales, use `I18n.t`:
+#I18n.t 'hello'
+#In views, this is aliased to just `t`:
+#<%= t('hello') %>
+#To use a different locale, set it with `I18n.locale`:
+#I18n.locale = :es
+#This would use the information in config/locales/es.yml.
+#The following keys must be escaped otherwise they will not be retrieved by
+#the default I18n backend:
+#true, false, on, off, yes, no
+#Instead, surround them with single quotes.
+#en:
+#'true': 'foo'
+#To learn more, please read the Rails Internationalization guide
+#available at https://guides.rubyonrails.org/i18n.html.
+tl:
+  hello: "Hello world"
+  messages:
+    reset_password_success: Woot! Request for password reset is successful. Check your mail for instructions.
+    reset_password_failure: Uh ho! We could not find any user with the specified email.
+    inbox_deletetion_response: Your inbox deletion request will be processed in some time.
+  errors:
+    validations:
+      presence: must not be blank
+    webhook:
+      invalid: Invalid events
+    signup:
+      disposable_email: We do not allow disposable emails
+      invalid_email: You have entered an invalid email
+      email_already_exists: "You have already signed up for an account with %{email}"
+      invalid_params: 'Invalid, please check the signup paramters and try again'
+      failed: Signup failed
+    data_import:
+      data_type:
+        invalid: Invalid data type
+    contacts:
+      import:
+        failed: File is blank
+      export:
+        success: We will notify you once contacts export file is ready to view.
+      email:
+        invalid: Invalid email
+      phone_number:
+        invalid: should be in e164 format
+    categories:
+      locale:
+        unique: should be unique in the category and portal
+    dyte:
+      invalid_message_type: "Invalid message type. Action not permitted"
+    slack:
+      invalid_channel_id: "Invalid slack channel. Please try again"
+    inboxes:
+      imap:
+        socket_error: Please check the network connection, IMAP address and try again.
+        no_response_error: Please check the IMAP credentials and try again.
+        host_unreachable_error: Host unreachable, Please check the IMAP address, IMAP port and try again.
+        connection_timed_out_error: Connection timed out for %{address}:%{port}
+        connection_closed_error: Connection closed.
+      validations:
+        name: should not start or end with symbols, and it should not have < > / \ @ characters.
+    custom_filters:
+      number_of_records: Limit reached. The maximum number of allowed custom filters for a user per account is 50.
+      invalid_attribute: Invalid attribute key - [%{key}]. The key should be one of [%{allowed_keys}] or a custom attribute defined in the account.
+      invalid_operator: Invalid operator. The allowed operators for %{attribute_name} are [%{allowed_keys}].
+      invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
+  reports:
+    period: Reporting period %{since} to %{until}
+    utc_warning: The report generated is in UTC timezone
+    agent_csv:
+      agent_name: Agent name
+      conversations_count: Assigned conversations
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
+      resolution_count: Resolution Count
+      avg_customer_waiting_time: Avg customer waiting time
+    inbox_csv:
+      inbox_name: Inbox name
+      inbox_type: Inbox type
+      conversations_count: No. of conversations
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
+    label_csv:
+      label_title: Label
+      conversations_count: No. of conversations
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
+    team_csv:
+      team_name: Team name
+      conversations_count: Conversations count
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
+      resolution_count: Resolution Count
+      avg_customer_waiting_time: Avg customer waiting time
+    conversation_traffic_csv:
+      timezone: Timezone
+    sla_csv:
+      conversation_id: Conversation ID
+      sla_policy_breached: SLA Policy
+      assignee: Assignee
+      team: Team
+      inbox: Inbox
+      labels: Labels
+      conversation_link: Link to the Conversation
+      breached_events: Breached Events
+    default_group_by: day
+    csat:
+      headers:
+        contact_name: Contact Name
+        contact_email_address: Contact Email Address
+        contact_phone_number: Contact Phone Number
+        link_to_the_conversation: Link to the conversation
+        agent_name: Agent Name
+        rating: Rating
+        feedback: Feedback Comment
+        recorded_at: Recorded date
+  notifications:
+    notification_title:
+      conversation_creation: "A conversation (#%{display_id}) has been created in %{inbox_name}"
+      conversation_assignment: "A conversation (#%{display_id}) has been assigned to you"
+      assigned_conversation_new_message: "A new message is created in conversation (#%{display_id})"
+      conversation_mention: "You have been mentioned in conversation (#%{display_id})"
+      sla_missed_first_response: "SLA target first response missed for conversation (#%{display_id})"
+      sla_missed_next_response: "SLA target next response missed for conversation (#%{display_id})"
+      sla_missed_resolution: "SLA target resolution missed for conversation (#%{display_id})"
+    attachment: "Attachment"
+    no_content: "No content"
+  conversations:
+    messages:
+      instagram_story_content: "%{story_sender} mentioned you in the story: "
+      instagram_deleted_story_content: This story is no longer available.
+      deleted: This message was deleted
+      delivery_status:
+        error_code: "Error code: %{error_code}"
+    activity:
+      status:
+        resolved: "Conversation was marked resolved by %{user_name}"
+        contact_resolved: "Conversation was resolved by %{contact_name}"
+        open: "Conversation was reopened by %{user_name}"
+        pending: "Conversation was marked as pending by %{user_name}"
+        snoozed: "Conversation was snoozed by %{user_name}"
+        auto_resolved: "Conversation was marked resolved by system due to %{duration} days of inactivity"
+        system_auto_open: System reopened the conversation due to a new incoming message.
+      priority:
+        added: '%{user_name} set the priority to %{new_priority}'
+        updated: '%{user_name} changed the priority from %{old_priority} to %{new_priority}'
+        removed: '%{user_name} removed the priority'
+      assignee:
+        self_assigned: "%{user_name} self-assigned this conversation"
+        assigned: "Assigned to %{assignee_name} by %{user_name}"
+        removed: "Conversation unassigned by %{user_name}"
+      team:
+        assigned: "Assigned to %{team_name} by %{user_name}"
+        assigned_with_assignee: "Assigned to %{assignee_name} via %{team_name} by %{user_name}"
+        removed: "Unassigned from %{team_name} by %{user_name}"
+      labels:
+        added: "%{user_name} added %{labels}"
+        removed: "%{user_name} removed %{labels}"
+      sla:
+        added: "%{user_name} added SLA policy %{sla_name}"
+        removed: "%{user_name} removed SLA policy %{sla_name}"
+      muted: "%{user_name} has muted the conversation"
+      unmuted: "%{user_name} has unmuted the conversation"
+    templates:
+      greeting_message_body: "%{account_name} typically replies in a few hours."
+      ways_to_reach_you_message_body: "Give the team a way to reach you."
+      email_input_box_message_body: "Get notified by email"
+      csat_input_message_body: "Please rate the conversation"
+    reply:
+      email:
+        header:
+          from_with_name: "%{assignee_name} from %{inbox_name} <%{from_email}>"
+          reply_with_name: "%{assignee_name} from %{inbox_name} <reply+%{reply_email}>"
+          friendly_name: "%{sender_name} from %{business_name} <%{from_email}>"
+          professional_name: "%{business_name} <%{from_email}>"
+      channel_email:
+        header:
+          reply_with_name: "%{assignee_name} from %{inbox_name} <%{from_email}>"
+          reply_with_inbox_name: "%{inbox_name} <%{from_email}>"
+      email_subject: "New messages on this conversation"
+      transcript_subject: "Conversation Transcript"
+    survey:
+      response: "Please rate this conversation, %{link}"
+  contacts:
+    online:
+      delete: "%{contact_name} is Online, please try again later"
+  integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
+    dyte:
+      name: "Dyte"
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
+      meeting_name: "%{agent_name} has started a meeting"
+    slack:
+      name: "Slack"
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
+    webhooks:
+      name: "Webhooks"
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
+    dialogflow:
+      name: "Dialogflow"
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
+    google_translate:
+      name: "Google Translate"
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
+    openai:
+      name: "OpenAI"
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
+  public_portal:
+    search:
+      search_placeholder: Search for article by title or body...
+      empty_placeholder: No results found.
+      loading_placeholder: Searching...
+      results_title: Search results
+    toc_header: 'On this page'
+    hero:
+      sub_title: Search for the articles here or browse the categories below.
+    common:
+      home: Home
+      last_updated_on: Last updated on %{last_updated_on}
+      view_all_articles: View all
+      article: article
+      articles: articles
+      author: author
+      authors: authors
+      other: other
+      others: others
+      by: By
+      no_articles: There are no articles here
+    footer:
+      made_with: Made with
+    header:
+      go_to_homepage: Website
+      appearance:
+        system: System
+        light: Light
+        dark: Dark
+      featured_articles: Featured Articles
+      uncategorized: Uncategorized
+    404:
+      title: Page not found
+      description: We couldn't find the page you were looking for.
+      back_to_home: Go to home page
+  slack_unfurl:
+    fields:
+      name: Name
+      email: Email
+      phone_number: Phone
+      company_name: Company
+      inbox_name: Inbox
+      inbox_type: Inbox Type
+    button: Open conversation
+  time_units:
+    days:
+      one: "%{count} day"
+      other: "%{count} days"
+    hours:
+      one: "%{count} hour"
+      other: "%{count} hours"
+    minutes:
+      one: "%{count} minute"
+      other: "%{count} minutes"
+    seconds:
+      one: "%{count} second"
+      other: "%{count} seconds"
diff --git a/config/locales/tr.yml b/config/locales/tr.yml
index 30f3798a7debc..8be6f30b3b85c 100644
--- a/config/locales/tr.yml
+++ b/config/locales/tr.yml
@@ -187,28 +187,34 @@ tr:
     online:
       delete: "%{contact_name} çevrimiçi, lütfen daha sonra tekrar deneyin"
   integration_apps:
+    dashboard_apps:
+      name: "Panel Uygulamaları"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte, uygulamanıza sadece birkaç satır kod ekleyerek canlı ses ve video eklemenize yardımcı olan bir araçtır. Bu entegrasyon, temsilcilerinize müşterilerinizle video veya sesli görüşme yapma seçeneği sunmanıza olanak tanır."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} bir toplantı başlattı"
     slack:
       name: "Slack"
-      description: "Slack, tüm iletişiminizi tek bir yerde bir araya getiren bir sohbet aracıdır. Slack'i entegre ederek, hesabınızdaki tüm yeni konuşmalardan Slack'inizin içinde bildirim alabilirsiniz."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook olayları size hesabınızda gerçekleşen gerçek zamanlı bilgileri getirmenizi sağlar. Bu webhookları kullanarak olayları favori uygulamalarınıza (örneğin Slack, Github) haberleştirebilirsiniz. Webhooklarınızı yapılandırarak ayarlayabilirsiniz."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow botu"
-      description: "Dialogflow kullanarak sohbet botları oluşturun ve bunları hızlı bir şekilde gelen kutunuza bağlayın. Botlara sorguları işlemelerini ve ardından bir müşteri hizmeti temsilcisine devretmelerini sağlayın."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact entegrasyonu, ziyaretçi profillerini zenginleştirmenize yardımcı olur. Kullanıcıları e-posta adreslerini paylaştıkları anda tanıyın ve onlara özel müşteri hizmeti sunun. FullContact API Anahtarını paylaşarak FullContact'ı hesabınıza bağlayın."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Çeviri"
-      description: "Google Çeviri Entegrasyonu ekleyerek ajanların mesajları çevirmesini kolaylaştırın. Google Çeviri, dilini otomatik olarak belirlemeye ve ajan/hesap yöneticisi tarafından seçilen dile çevirmeye yardımcı olur."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "OpenAI'nin GPT modellerini kullanarak Chatwoot'a güçlü yapay zeka özellikleri entegre edin."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Başlık veya içerikle makale arayın...
diff --git a/config/locales/uk.yml b/config/locales/uk.yml
index b8d87a79b6ccb..9c1ba95fe2d40 100644
--- a/config/locales/uk.yml
+++ b/config/locales/uk.yml
@@ -187,28 +187,34 @@ uk:
     online:
       delete: "%{contact_name} в онлайні, будь ласка, спробуйте ще раз пізніше"
   integration_apps:
+    dashboard_apps:
+      name: "Додатки для головного екрану"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Сервіс Dyte - це сервіс, що допомагає додавати аудіо та відео в додаток за допомогою кількох рядків коду. Ця інтеграція дозволяє надавати можливість Вашим агентам створювати відео чи голосові дзвінки з клієнтами, не виходячи з Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} розпочав зустріч"
     slack:
       name: "Slack"
-      description: "Slack - це інструмент чату, який об'єднує ваші комунікації разом в одному місці. Інтегруючи Slack, ви можете отримати повідомлення про всі нові діалоги у вашому обліковому записі прямо в Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Веб-хуки"
-      description: "Веб-хуки автоматично повідомляють про те, що відбувається у вашому обліковому записі Chatwoot. Ви можете скористатись веб-хуками для обміну подіями з вашими улюбленими додатками, такими як Slack чи Github. Натисніть на Налаштування, щоб налаштувати веб-хуки."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Створюйте чати з допомогою Dialogflow та швидко під'єднайте їх до вхідних каналів. Дозвольте ботам обробляти запити перед передачею їх агенту."
-    fullcontact:
-      name: "Fullcontact"
-      description: "Інтеграція FullContact допомагає збагачувати профілі відвідувачів. Визначайте користувачів, як тільки вони поділяться адресою електронної пошти та пропонуйте їм адаптовану службу клієнтів. Під'єднайте ваш FullContact до вашого акаунту, поділившись ключем FullContact API."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Зробіть простішим життя агентів перекладаючи повідомлення за допомогою Google Translate. Google Translate сам ідентифікує та перекладає на обрану адміністратором чи агентом мову."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Інтегруйте потужні AI функції в Chatwoot, використовуючи моделі GPT з OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Пошук статті за заголовком або змістом...
diff --git a/config/locales/ur.yml b/config/locales/ur.yml
index 634b1c93a6caf..7682c1d86e57c 100644
--- a/config/locales/ur.yml
+++ b/config/locales/ur.yml
@@ -187,28 +187,34 @@ ur:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/ur_IN.yml b/config/locales/ur_IN.yml
index 15cf19ff4890d..fa5d1df7fed77 100644
--- a/config/locales/ur_IN.yml
+++ b/config/locales/ur_IN.yml
@@ -187,28 +187,34 @@ ur:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/locales/vi.yml b/config/locales/vi.yml
index 8fb3e45077228..904491cdc32b2 100644
--- a/config/locales/vi.yml
+++ b/config/locales/vi.yml
@@ -31,7 +31,7 @@ vi:
       disposable_email: Chúng tôi không cho phép các email dùng một lần
       invalid_email: Bạn đã nhập một email không hợp lệ
       email_already_exists: "Bạn đã đăng ký một tài khoản với %{email}"
-      invalid_params: 'Không hợp lệ, vui lòng kiểm tra thông số đăng ký và thử lại'
+      invalid_params: 'Invalid, please check the signup paramters and try again'
       failed: Đăng ký thât bại
     data_import:
       data_type:
@@ -51,7 +51,7 @@ vi:
     dyte:
       invalid_message_type: "Loại tin nhắn không hợp lệ. Hành động không được phép"
     slack:
-      invalid_channel_id: "Kênh chùng không hợp lệ. Vui lòng thử lại"
+      invalid_channel_id: "Invalid slack channel. Please try again"
     inboxes:
       imap:
         socket_error: Vui lòng kiểm tra kết nối mạng, địa chỉ IMAP và thử lại.
@@ -63,43 +63,43 @@ vi:
         name: không nên bắt đầu hoặc kết thúc bằng các ký hiệu và không nên có kí tự < > / \ @.
     custom_filters:
       number_of_records: Đã đạt giới hạn. Số lượng tuỳ chọn lọc tối đa cho mỗi mỗi người dùng mỗi tài khoản là 50.
-      invalid_attribute: Khóa thuộc tính không hợp lệ - [%{key}]. Chìa khóa phải là một trong [%{allowed_keys}] hoặc thuộc tính tùy chỉnh được xác định trong tài khoản.
-      invalid_operator: Toán tử không hợp lệ. Các toán tử được phép cho %{attribute_name} là [%{allowed_keys}].
-      invalid_value: Giá trị không hợp lệ. Các giá trị được cung cấp cho %{attribute_name} không hợp lệ
+      invalid_attribute: Invalid attribute key - [%{key}]. The key should be one of [%{allowed_keys}] or a custom attribute defined in the account.
+      invalid_operator: Invalid operator. The allowed operators for %{attribute_name} are [%{allowed_keys}].
+      invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
   reports:
     period: Thời gian báo cáo từ %{since} đến %{until}
     utc_warning: Báo cáo đã được tạo với múi giờ UTC
     agent_csv:
       agent_name: Tên tổng đài viên
-      conversations_count: Cuộc trò chuyện được chỉ định
-      avg_first_response_time: Thời gian phản hồi đầu tiên trung bình
+      conversations_count: Assigned conversations
+      avg_first_response_time: Avg first response time
       avg_resolution_time: Avg resolution time
       resolution_count: Số lượng giải quyết
-      avg_customer_waiting_time: Thời gian chờ đợi trung bình của khách hàng
+      avg_customer_waiting_time: Avg customer waiting time
     inbox_csv:
       inbox_name: Tên kênh
       inbox_type: Kiểu kênh
       conversations_count: Số hội thoại
-      avg_first_response_time: Thời gian phản hồi đầu tiên trung bình
-      avg_resolution_time: Thời gian giải quyết trung bình
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
     label_csv:
       label_title: Nhãn
       conversations_count: Số hội thoại
-      avg_first_response_time: Thời gian phản hồi đầu tiên trung bình
-      avg_resolution_time: Thời gian giải quyết trung bình
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
     team_csv:
       team_name: Tên nhóm
       conversations_count: Số hội thoại
-      avg_first_response_time: Thời gian phản hồi đầu tiên trung bình
-      avg_resolution_time: Thời gian giải quyết trung bình
+      avg_first_response_time: Avg first response time
+      avg_resolution_time: Avg resolution time
       resolution_count: Số lượng giải quyết
-      avg_customer_waiting_time: Thời gian chờ đợi trung bình của khách hàng
+      avg_customer_waiting_time: Avg customer waiting time
     conversation_traffic_csv:
       timezone: Múi giờ
     sla_csv:
-      conversation_id: ID hội thoại
+      conversation_id: Conversation ID
       sla_policy_breached: SLA Policy
-      assignee: Đại lý được chỉ định
+      assignee: Assignee
       team: Nhóm
       inbox: Hộp thư đến
       labels: Nhãn
@@ -118,22 +118,22 @@ vi:
         recorded_at: Ngày nghi
   notifications:
     notification_title:
-      conversation_creation: "Một cuộc trò chuyện (#%{display_id}) đã được tạo trong %{inbox_name}"
-      conversation_assignment: "Một cuộc trò chuyện (#%{display_id}) đã được chỉ định cho bạn"
-      assigned_conversation_new_message: "Một tin nhắn mới được tạo trong cuộc trò chuyện (#%{display_id})"
-      conversation_mention: "Bạn đã được nhắc đến trong cuộc trò chuyện (#%{display_id})"
-      sla_missed_first_response: "Mục tiêu SLA phản hồi đầu tiên bị bỏ lỡ cho cuộc trò chuyện (#%{display_id})"
-      sla_missed_next_response: "Mục tiêu SLA phản hồi tiếp theo bị bỏ lỡ cho cuộc trò chuyện (#%{display_id})"
-      sla_missed_resolution: "Độ phân giải mục tiêu SLA bị bỏ lỡ cho cuộc trò chuyện (#%{display_id})"
-    attachment: "Tập tin đính kèm"
-    no_content: "Không có nội dung"
+      conversation_creation: "A conversation (#%{display_id}) has been created in %{inbox_name}"
+      conversation_assignment: "A conversation (#%{display_id}) has been assigned to you"
+      assigned_conversation_new_message: "A new message is created in conversation (#%{display_id})"
+      conversation_mention: "You have been mentioned in conversation (#%{display_id})"
+      sla_missed_first_response: "SLA target first response missed for conversation (#%{display_id})"
+      sla_missed_next_response: "SLA target next response missed for conversation (#%{display_id})"
+      sla_missed_resolution: "SLA target resolution missed for conversation (#%{display_id})"
+    attachment: "Attachment"
+    no_content: "No content"
   conversations:
     messages:
       instagram_story_content: "%{story_sender} đã đề cập đến bạn trong hội thoại: "
       instagram_deleted_story_content: Hội thoại này không còn nữa.
       deleted: Tin nhắn đã bị xoá
       delivery_status:
-        error_code: "Mã lỗi: %{error_code}"
+        error_code: "Error code: %{error_code}"
     activity:
       status:
         resolved: "Cuộc trò chuyện được đánh dấu là đã giải quyết bởi %{user_name}"
@@ -187,28 +187,34 @@ vi:
     online:
       delete: "%{contact_name} đang trực tiếng, vui lòng thử lại sau"
   integration_apps:
+    dashboard_apps:
+      name: "Ứng dụng bảng điều khiển"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte là công cụ giúp bạn thêm âm thanh và video trực tiếp vào ứng dụng của mình chỉ bằng một vài dòng mã. Sự tích hợp này cho phép bạn cung cấp tùy chọn cho các đại lý của mình để thực hiện cuộc gọi thoại hoặc video với khách hàng mà không cần rời khỏi Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} đã bắt đầu một cuộc họp"
     slack:
       name: "Slack"
-      description: "Slack là một công cụ trò chuyện giúp mang tất cả các cuộc giao tiếp của bạn lại với nhau ở một nơi. Bằng cách tích hợp Slack, bạn có thể nhận được thông báo về tất cả các cuộc trò chuyện mới trong tài khoản của mình ngay bên trong Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Sự kiện webhook cung cấp cho bạn thông tin thời gian thực về những gì đang xảy ra trong tài khoản của bạn. Bạn có thể sử dụng webhook để truyền tải các sự kiện tới các ứng dụng yêu thích của mình như Slack hoặc Github. Nhấp vào Cấu hình để thiết lập webhook của bạn."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Xây dựng chatbot bằng Dialogflow và kết nối chúng với hộp thư đến của bạn một cách nhanh chóng. Hãy để các bot xử lý các truy vấn trước khi giao chúng cho đại lý dịch vụ khách hàng."
-    fullcontact:
-      name: "Fullcontact"
-      description: "Tích hợp FullContact giúp làm phong phú hồ sơ khách truy cập. Xác định người dùng ngay khi họ chia sẻ địa chỉ email và cung cấp cho họ dịch vụ khách hàng phù hợp. Kết nối FullContact với tài khoản của bạn bằng cách chia sẻ Khóa API FullContact."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Giúp các đại lý dịch tin nhắn dễ dàng hơn bằng cách thêm Tích hợp Google Dịch. Google dịch giúp tự động xác định ngôn ngữ và chuyển đổi ngôn ngữ đó sang ngôn ngữ do quản trị viên đại lý/tài khoản chọn."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Tích hợp các tính năng AI mạnh mẽ vào Chatwoot bằng cách tận dụng các mô hình GPT từ OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Tìm bài viết theo tiêu đề hoặc nội dung...
@@ -221,7 +227,7 @@ vi:
     common:
       home: Trang Chủ
       last_updated_on: 'Cập nhật lần cuối: %{last_updated_on}'
-      view_all_articles: Xem tất cả
+      view_all_articles: View all
       article: bài viết
       articles: bài viết
       author: tác giả
@@ -233,17 +239,17 @@ vi:
     footer:
       made_with: Tạo bởi
     header:
-      go_to_homepage: Trang web
+      go_to_homepage: Website
       appearance:
-        system: Hệ thống
-        light: Sáng
-        dark: Tối
-      featured_articles: Bài viết nổi bật
+        system: System
+        light: Light
+        dark: Dark
+      featured_articles: Featured Articles
       uncategorized: Chưa được phân loại
     404:
-      title: Không tìm thấy trang
-      description: Chúng tôi không thể tìm thấy trang bạn đang tìm kiếm.
-      back_to_home: Tới trang chủ
+      title: Page not found
+      description: We couldn't find the page you were looking for.
+      back_to_home: Go to home page
   slack_unfurl:
     fields:
       name: Tên
@@ -255,10 +261,10 @@ vi:
     button: Mở cuộc trò chuyện
   time_units:
     days:
-      other: "%{count} ngày"
+      other: "%{count} days"
     hours:
-      other: "%{count} giờ"
+      other: "%{count} hours"
     minutes:
-      other: "%{count} phút"
+      other: "%{count} minutes"
     seconds:
-      other: "%{count} giây"
+      other: "%{count} seconds"
diff --git a/config/locales/zh_CN.yml b/config/locales/zh_CN.yml
index f576e6d50c2f3..d9aa83d51c92a 100644
--- a/config/locales/zh_CN.yml
+++ b/config/locales/zh_CN.yml
@@ -187,28 +187,34 @@ zh_CN:
     online:
       delete: "%{contact_name} 在线, 请重试"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte 是帮助您通过几行代码将直播音频和视频添加到应用程序的工具。 这种集成使您能够让代理人在不离开Chatwoot 的情况下与客户进行视频或语音通话。"
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} 已开始会议"
     slack:
       name: "Slack"
-      description: "Slack是一个将您的所有通信集中在一个地方的聊天工具。 通过整合Slack，您可以在您的Slack内部获得您帐户中所有新对话的通知。"
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: ""
-      description: ""
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "使用 Dialogflow 构建聊天机器人并将其连接到您的收件箱。 让机器人处理查询，然后将它们交给收件箱对应团队的客服处理。"
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact 集成有助于丰富访客配置文件。一旦用户分享他们的电子邮件地址并为他们提供有针对性的客户服务。 通过分享FullContact API 密钥将您的完全联系人连接到您的帐户。"
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google 翻译"
-      description: "添加一个 Google 翻译集成，使客服更容易翻译消息。 Google 翻译有助于自动识别语言并将其转换为客服/帐户管理员选择的语言。"
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "通过从 OpenAI 使用 GPT 模型将强大的 AI 功能整合到Chatwoot 中。"
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: 搜索文章的标题或正文...
diff --git a/config/locales/zh_TW.yml b/config/locales/zh_TW.yml
index c876d110be51d..d29add8aeb669 100644
--- a/config/locales/zh_TW.yml
+++ b/config/locales/zh_TW.yml
@@ -187,28 +187,34 @@ zh_TW:
     online:
       delete: "%{contact_name} is Online, please try again later"
   integration_apps:
+    dashboard_apps:
+      name: "Dashboard Apps"
+      description: "Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents."
     dyte:
       name: "Dyte"
-      description: "Dyte is tool that helps you to add live audio & video to your application with just a few lines of code. This integration allows you to give an option to your agents to have a video or voice call with your customers from without leaving Chatwoot."
+      description: "Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot."
       meeting_name: "%{agent_name} has started a meeting"
     slack:
       name: "Slack"
-      description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+      description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: "Webhooks"
-      description: "Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks."
+      description: "Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates."
     dialogflow:
       name: "Dialogflow"
-      description: "Build chatbots using Dialogflow and connect them to your inbox quickly. Let the bots handle the queries before handing them off to a customer service agent."
-    fullcontact:
-      name: "Fullcontact"
-      description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+      description: "Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent."
     google_translate:
       name: "Google Translate"
-      description: "Make it easier for agents to translate messages by adding a Google Translate Integration. Google translate helps to identify the language automatically and convert it to the language chosen by the agent/account admin."
+      description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: "OpenAI"
-      description: "Integrate powerful AI features into Chatwoot by leveraging the GPT models from OpenAI."
+      description: "Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification."
+    linear:
+      name: "Linear"
+      description: "Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process."
+    captain:
+      name: "Captain"
+      description: "Captain is a native AI assistant built for your product and trained on your company's knowledge base. It responds like a human and resolves customer queries effectively. Configure it to your inboxes easily."
   public_portal:
     search:
       search_placeholder: Search for article by title or body...
diff --git a/config/routes.rb b/config/routes.rb
index 4ffd066455119..f23def55716ce 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -216,6 +216,11 @@
           resources :webhooks, only: [:index, :create, :update, :destroy]
           namespace :integrations do
             resources :apps, only: [:index, :show]
+            resource :captain, controller: 'captain', only: [] do
+              collection do
+                get :sso_url
+              end
+            end
             resources :hooks, only: [:show, :create, :update, :destroy] do
               member do
                 post :process_event
diff --git a/docker-compose.production.yaml b/docker-compose.production.yaml
index d2f5b435c5cd3..c1406b02b01ac 100644
--- a/docker-compose.production.yaml
+++ b/docker-compose.production.yaml
@@ -20,6 +20,7 @@ services:
       - INSTALLATION_ENV=docker
     entrypoint: docker/entrypoints/rails.sh
     command: ['bundle', 'exec', 'rails', 's', '-p', '3000', '-b', '0.0.0.0']
+    restart: always
 
   sidekiq:
     <<: *base
@@ -31,6 +32,7 @@ services:
       - RAILS_ENV=production
       - INSTALLATION_ENV=docker
     command: ['bundle', 'exec', 'sidekiq', '-C', 'config/sidekiq.yml']
+    restart: always
 
   postgres:
     image: postgres:12
diff --git a/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb b/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
index 39a131ba2d159..126ed292e2046 100644
--- a/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
+++ b/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
@@ -9,6 +9,8 @@ def allowed_configs
       @allowed_configs = custom_branding_options
     when 'internal'
       @allowed_configs = internal_config_options
+    when 'captain'
+      @allowed_configs = %w[CAPTAIN_API_URL CAPTAIN_APP_URL]
     else
       super
     end
diff --git a/enterprise/app/jobs/response_bot/inbox_pending_conversations_resolution_job.rb b/enterprise/app/jobs/captain/inbox_pending_conversations_resolution_job.rb
similarity index 90%
rename from enterprise/app/jobs/response_bot/inbox_pending_conversations_resolution_job.rb
rename to enterprise/app/jobs/captain/inbox_pending_conversations_resolution_job.rb
index f6333d4461e28..39c08af64dc3e 100644
--- a/enterprise/app/jobs/response_bot/inbox_pending_conversations_resolution_job.rb
+++ b/enterprise/app/jobs/captain/inbox_pending_conversations_resolution_job.rb
@@ -1,4 +1,4 @@
-class ResponseBot::InboxPendingConversationsResolutionJob < ApplicationJob
+class Captain::InboxPendingConversationsResolutionJob < ApplicationJob
   queue_as :low
 
   def perform(inbox)
diff --git a/enterprise/app/jobs/enterprise/account/conversations_resolution_scheduler_job.rb b/enterprise/app/jobs/enterprise/account/conversations_resolution_scheduler_job.rb
index 4f80424f8b2d2..ae3eb3ba09730 100644
--- a/enterprise/app/jobs/enterprise/account/conversations_resolution_scheduler_job.rb
+++ b/enterprise/app/jobs/enterprise/account/conversations_resolution_scheduler_job.rb
@@ -1,9 +1,32 @@
 module Enterprise::Account::ConversationsResolutionSchedulerJob
   def perform
     super
+
+    # TODO: remove this when response bot is remove in favor of captain
+    resolve_response_bot_conversations
+
+    # This is responsible for resolving captain conversations
+    resolve_captain_conversations
+  end
+
+  private
+
+  def resolve_response_bot_conversations
+    # This is responsible for resolving response bot conversations
     Account.feature_response_bot.all.find_each(batch_size: 100) do |account|
       account.inboxes.each do |inbox|
-        ResponseBot::InboxPendingConversationsResolutionJob.perform_later(inbox) if inbox.response_bot_enabled?
+        Captain::InboxPendingConversationsResolutionJob.perform_later(inbox) if inbox.response_bot_enabled?
+      end
+    end
+  end
+
+  def resolve_captain_conversations
+    Integrations::Hook.where(app_id: 'captain').all.find_each(batch_size: 100) do |hook|
+      next unless hook.enabled?
+
+      inboxes = Inbox.where(id: hook.settings['inbox_ids'].split(','))
+      inboxes.each do |inbox|
+        Captain::InboxPendingConversationsResolutionJob.perform_later(inbox)
       end
     end
   end
diff --git a/lib/integrations/captain/processor_service.rb b/lib/integrations/captain/processor_service.rb
new file mode 100644
index 0000000000000..85428fd081f77
--- /dev/null
+++ b/lib/integrations/captain/processor_service.rb
@@ -0,0 +1,66 @@
+class Integrations::Captain::ProcessorService < Integrations::BotProcessorService
+  pattr_initialize [:event_name!, :hook!, :event_data!]
+
+  private
+
+  def get_response(_session_id, message_content)
+    call_captain(message_content)
+  end
+
+  def process_response(message, response)
+    if response == 'conversation_handoff'
+      message.conversation.bot_handoff!
+    else
+      create_conversation(message, { content: response })
+    end
+  end
+
+  def create_conversation(message, content_params)
+    return if content_params.blank?
+
+    conversation = message.conversation
+    conversation.messages.create!(
+      content_params.merge(
+        {
+          message_type: :outgoing,
+          account_id: conversation.account_id,
+          inbox_id: conversation.inbox_id
+        }
+      )
+    )
+  end
+
+  def call_captain(message_content)
+    url = "#{GlobalConfigService.load('CAPTAIN_API_URL',
+                                      '')}/accounts/#{hook.settings['account_id']}/assistants/#{hook.settings['assistant_id']}/chat"
+
+    headers = {
+      'X-USER-EMAIL' => hook.settings['account_email'],
+      'X-USER-TOKEN' => hook.settings['access_token'],
+      'Content-Type' => 'application/json'
+    }
+
+    body = {
+      message: message_content,
+      previous_messages: previous_messages
+    }
+
+    response = HTTParty.post(url, headers: headers, body: body.to_json)
+    response.parsed_response['message']
+  end
+
+  def previous_messages
+    previous_messages = []
+    conversation.messages.where(message_type: [:outgoing, :incoming]).where(private: false).offset(1).find_each do |message|
+      next if message.content_type != 'text'
+
+      role = determine_role(message)
+      previous_messages << { message: message.content, type: role }
+    end
+    previous_messages
+  end
+
+  def determine_role(message)
+    message.message_type == 'incoming' ? 'User' : 'Bot'
+  end
+end
diff --git a/lib/integrations/dialogflow/processor_service.rb b/lib/integrations/dialogflow/processor_service.rb
index 103ef05c55316..f3962a66ca42d 100644
--- a/lib/integrations/dialogflow/processor_service.rb
+++ b/lib/integrations/dialogflow/processor_service.rb
@@ -14,13 +14,13 @@ def message_content(message)
     message.content
   end
 
-  def get_response(session_id, message)
+  def get_response(session_id, message_content)
     if hook.settings['credentials'].blank?
       Rails.logger.warn "Account: #{hook.try(:account_id)} Hook: #{hook.id} credentials are not present." && return
     end
 
     configure_dialogflow_client_defaults
-    detect_intent(session_id, message)
+    detect_intent(session_id, message_content)
   rescue Google::Cloud::PermissionDeniedError => e
     Rails.logger.warn "DialogFlow Error: (account-#{hook.try(:account_id)}, hook-#{hook.id}) #{e.message}"
     hook.prompt_reauthorization!
diff --git a/lib/linear/queries.rb b/lib/linear/queries.rb
index 78b2108f95b1b..54daaf30c034b 100644
--- a/lib/linear/queries.rb
+++ b/lib/linear/queries.rb
@@ -54,6 +54,10 @@ def self.search_issue(term)
             title
             description
             identifier
+            state {
+              name
+              color
+            }
           }
         }
       }
diff --git a/package.json b/package.json
index 0e31bb65b763f..b63b51905742a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "3.11.1",
+  "version": "3.12.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",
@@ -96,7 +96,6 @@
     "vue-virtual-scroll-list": "^2.3.5",
     "vue2-datepicker": "^3.9.1",
     "vuedraggable": "^2.24.3",
-    "vuelidate": "0.7.7",
     "vuex": "~2.1.1",
     "vuex-router-sync": "~4.1.2",
     "wavesurfer.js": "^6.0.4",
@@ -136,7 +135,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-storybook": "^0.6.14",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.27.0",
     "fake-indexeddb": "^6.0.0",
     "husky": "^7.0.0",
     "jsdom": "^24.1.0",
diff --git a/public/dashboard/images/integrations/cable.svg b/public/dashboard/images/integrations/cable.svg
deleted file mode 100644
index b39742a29a2a3..0000000000000
--- a/public/dashboard/images/integrations/cable.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<svg width="1142" height="970" viewBox="0 0 1142 970" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1141.84 613.27H1124.39V596H1109.44V613.27H1092V628.566H1109.44V645.836H1124.39V628.566H1141.84V613.27Z" fill="#1F93FF"/>
-<path d="M263.905 82.1199H238.534V57H216.787V82.1199H191.416V104.369H216.787V129.489H238.534V104.369H263.905V82.1199Z" fill="#1F93FF"/>
-<path d="M41.9077 453.222H27.24V438.7H14.6677V453.222H0V466.085H14.6677V480.607H27.24V466.085H41.9077V453.222Z" fill="#1F93FF"/>
-<path d="M1011.02 237.048C1025.95 237.048 1038.05 224.949 1038.05 210.024C1038.05 195.099 1025.95 183 1011.02 183C996.099 183 984 195.099 984 210.024C984 224.949 996.099 237.048 1011.02 237.048Z" fill="#EAEEF9"/>
-<path d="M834.455 74.9107C844.648 74.9107 852.911 66.6479 852.911 56.4553C852.911 46.2627 844.648 38 834.455 38C824.263 38 816 46.2627 816 56.4553C816 66.6479 824.263 74.9107 834.455 74.9107Z" fill="#EAEEF9"/>
-<path d="M99.4124 277.995C109.605 277.995 117.868 269.732 117.868 259.54C117.868 249.347 109.605 241.084 99.4124 241.084C89.2198 241.084 80.957 249.347 80.957 259.54C80.957 269.732 89.2198 277.995 99.4124 277.995Z" fill="#EAEEF9"/>
-<path d="M225.274 932.548C244.203 932.548 259.548 917.203 259.548 898.274C259.548 879.345 244.203 864 225.274 864C206.345 864 191 879.345 191 898.274C191 917.203 206.345 932.548 225.274 932.548Z" fill="#EAEEF9"/>
-<path d="M1038 508.5C1038 637.502 985.262 753.785 900.7 837.364C817.957 920.035 703.389 970 577 970C451.521 970 336.953 919.126 253.3 837.364C168.738 753.785 116 637.502 116 508.5C116 253.221 322.404 47 577 47C831.596 47 1038 254.13 1038 508.5Z" fill="#EAEEF9"/>
-<mask id="mask0_422_14" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="0" width="960" height="962">
-<path d="M1057 480.947C1057 615.385 1002.09 736.568 914.041 823.669C827.888 909.823 708.598 961.894 577 961.894C446.349 961.894 327.059 908.876 239.959 823.669C151.911 736.568 97 615.385 97 480.947C97 214.911 311.911 0 577 0C842.089 0 1057 215.858 1057 480.947Z" fill="#EAEEF9"/>
-</mask>
-<g mask="url(#mask0_422_14)">
-<g filter="url(#filter0_d_422_14)">
-<path d="M884.279 404.235L891.357 973.972C891.357 993.435 875.432 1008.48 855.969 1008.48H300.387C280.924 1008.48 265 992.551 265 973.972V241.453C265 221.99 280.924 206.951 300.387 206.951H702.919L884.279 404.235Z" fill="url(#paint0_linear_422_14)"/>
-</g>
-<path d="M702.837 206.844V364.318C702.837 386.435 722.3 404.129 744.418 404.129H884.198" fill="#D5DDEA"/>
-<path d="M340 752.964C340 709.203 363.75 670.912 398.9 650.221C414.813 640.946 435 652.124 435 670.675C435 679.237 430.488 686.847 423.125 691.128C401.75 703.495 387.5 726.565 387.5 752.964C387.5 796.963 427.4 831.687 473 822.887C506.725 816.228 530 784.596 530 750.11C530 738.457 539.263 729.181 550.9 729.181H669.65C676.063 721.808 685.563 717.29 696.25 717.29C715.963 717.29 731.875 733.224 731.875 752.964C731.875 772.704 715.963 788.639 696.25 788.639C685.8 788.639 676.3 784.12 669.65 776.748H575.125C569.265 805.648 552.89 831.336 529.18 848.827C505.47 866.317 476.116 874.361 446.816 871.398C417.516 868.434 390.361 854.674 370.623 832.789C350.884 810.903 339.97 782.454 340 752.964V752.964ZM681.288 538.916C696.725 538.916 708.363 524.17 704.325 509.187C697.782 483.646 682.93 461.014 662.115 444.864C641.3 428.714 615.707 419.966 589.375 420C565.653 420.019 542.479 427.15 522.839 440.474C503.199 453.798 487.993 472.705 479.178 494.759C470.363 516.814 468.344 541.007 473.381 564.221C478.417 587.435 490.279 608.607 507.438 625.011L451.625 717.765C435.475 721.095 423.125 735.603 423.125 752.964C423.125 772.704 439.038 788.639 458.75 788.639C464.345 788.646 469.863 787.331 474.856 784.802C479.848 782.272 484.174 778.599 487.483 774.081C490.792 769.562 492.99 764.326 493.898 758.798C494.807 753.269 494.401 747.604 492.713 742.262L560.638 629.292C566.575 619.541 563.725 606.698 553.988 600.99C532.613 588.385 518.125 565.315 518.125 538.916C518.125 499.674 550.188 467.566 589.375 467.566C622.15 467.566 649.7 489.685 658.013 519.889C661.1 530.83 670.125 538.916 681.288 538.916V538.916ZM696.25 681.615C687.225 681.615 678.438 683.28 670.363 686.372C660.863 690.177 649.938 685.42 644.713 676.62L582.963 573.877C566.338 571.023 553.75 556.515 553.75 538.916C553.75 519.176 569.663 503.241 589.375 503.241C609.088 503.241 625 519.176 625 538.916C625 542.483 624.525 545.813 623.575 549.143L675.588 635.951C682.238 634.762 689.125 634.049 696.25 634.049C761.8 634.049 815 687.323 815 752.964C815 818.606 761.8 871.88 696.25 871.88C675.825 871.88 656.35 866.648 639.488 857.372C617.638 845.481 625.713 812.422 650.65 812.422C654.688 812.422 658.725 813.611 662.288 815.752C672.263 821.222 683.9 824.314 696.25 824.314C735.438 824.314 767.5 792.207 767.5 752.964C767.5 713.722 735.438 681.615 696.25 681.615V681.615Z" fill="url(#paint1_linear_422_14)"/>
-</g>
-<defs>
-<filter id="filter0_d_422_14" x="243" y="195.951" width="670.356" height="845.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="11"/>
-<feGaussianBlur stdDeviation="11"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_422_14"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_422_14" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_422_14" x1="577.974" y1="188.411" x2="577.974" y2="1017.12" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FDFEFF"/>
-<stop offset="0.9964" stop-color="#ECF0F5"/>
-</linearGradient>
-<linearGradient id="paint1_linear_422_14" x1="577.5" y1="420" x2="577.5" y2="872" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2094FF"/>
-<stop offset="1" stop-color="#53B6FD"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/dashboard/images/integrations/captain-dark.png b/public/dashboard/images/integrations/captain-dark.png
new file mode 100644
index 0000000000000..edf8029d94d0a
Binary files /dev/null and b/public/dashboard/images/integrations/captain-dark.png differ
diff --git a/public/dashboard/images/integrations/captain.png b/public/dashboard/images/integrations/captain.png
new file mode 100644
index 0000000000000..3141160f43417
Binary files /dev/null and b/public/dashboard/images/integrations/captain.png differ
diff --git a/public/dashboard/images/integrations/dashboard-apps.svg b/public/dashboard/images/integrations/dashboard-apps.svg
deleted file mode 100644
index 76e165588b327..0000000000000
--- a/public/dashboard/images/integrations/dashboard-apps.svg
+++ /dev/null
@@ -1,75 +0,0 @@
-<svg width="748" height="744" viewBox="0 0 748 744" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M326.92 744.001C507.474 744.001 653.841 597.135 653.841 415.967C653.841 234.799 507.474 87.9326 326.92 87.9326C146.367 87.9326 0 234.799 0 415.967C0 597.135 146.367 744.001 326.92 744.001Z" fill="#EAEEF9"/>
-<path d="M699.264 140.632C703.555 136.698 703.855 130.018 699.934 125.713C696.013 121.407 689.355 121.106 685.065 125.041C680.774 128.975 680.474 135.655 684.395 139.961C688.316 144.266 694.974 144.567 699.264 140.632Z" fill="#EAEEF9"/>
-<path opacity="0.3" d="M524.644 264.296C536.27 264.296 545.694 254.839 545.694 243.175C545.694 231.51 536.27 222.054 524.644 222.054C513.019 222.054 503.595 231.51 503.595 243.175C503.595 254.839 513.019 264.296 524.644 264.296Z" fill="#AAB2C5"/>
-<g filter="url(#filter0_d_415_54)">
-<path d="M382.773 292.041C380.146 306.049 368.765 319.182 353.881 322.685C342.499 325.311 331.117 322.685 323.237 316.556V418.118H228.679C232.181 411.113 233.057 404.109 232.181 396.229C230.43 378.719 215.546 364.71 198.911 362.959C176.147 360.333 156.01 377.843 156.01 400.607C156.01 406.736 156.886 412.864 159.512 417.242H52.6973V221.998C52.6973 181.724 85.092 149.329 126.242 149.329H322.361V250.891C329.366 246.513 336.37 243.887 344.25 243.887C367.889 247.389 387.151 267.526 382.773 292.041Z" fill="url(#paint0_linear_415_54)"/>
-</g>
-<g filter="url(#filter1_d_415_54)">
-<path d="M259.323 545.944C255.821 569.583 274.207 589.72 297.847 589.72C307.478 589.72 316.233 586.218 323.237 580.965V686.029H127.118C86.8435 686.029 53.5732 652.759 53.5732 613.36V417.241H159.513C156.886 411.987 156.011 406.734 156.011 399.73C156.886 381.344 170.895 365.584 188.405 362.958C212.045 360.331 232.182 377.842 232.182 400.605C232.182 406.734 231.306 411.987 228.68 417.241H321.486V522.304C313.606 515.3 303.1 511.798 291.718 513.549C275.083 515.3 261.95 529.309 259.323 545.944Z" fill="url(#paint1_linear_415_54)"/>
-</g>
-<g filter="url(#filter2_d_415_54)">
-<path d="M592.9 417.24V611.609C592.9 651.883 559.63 684.278 519.356 684.278H323.236V579.214C316.232 585.343 307.477 587.969 297.846 587.969C275.082 587.969 257.571 567.832 259.322 544.193C261.949 526.682 275.958 513.549 291.717 510.922C303.099 510.047 314.481 513.549 321.485 519.678V414.614H434.429C430.927 419.867 430.051 425.996 430.051 432.124C430.051 454.013 449.313 472.399 472.952 469.772C490.463 468.021 505.347 453.137 507.098 436.502C507.974 428.622 506.223 421.618 503.596 414.614L592.9 417.24Z" fill="url(#paint2_linear_415_54)"/>
-</g>
-<g filter="url(#filter3_d_415_54)">
-<path d="M675.2 337.567L588.522 322.683C590.273 329.688 591.149 336.692 588.522 343.696C583.269 360.331 567.509 371.713 549.999 370.838C527.235 369.087 510.6 348.949 514.102 327.061C514.978 320.932 517.604 315.679 521.106 311.301L409.038 291.164L426.549 190.478C433.553 197.482 444.059 201.86 456.317 201.86C472.076 200.984 485.209 191.353 489.587 177.345C498.342 154.581 483.458 130.066 459.819 126.564C451.939 124.813 444.059 126.564 437.055 129.191L454.566 28.5044L647.183 61.7746C687.457 68.7789 713.723 106.427 706.719 145.826L675.2 337.567Z" fill="url(#paint3_linear_415_54)"/>
-</g>
-<path d="M717.255 411.396L746.365 402.622C748.473 402.01 748.473 398.95 746.365 398.338L717.255 389.564C716.507 389.36 715.963 388.816 715.759 388.068L706.986 359.027C706.374 356.918 703.313 356.918 702.701 359.027L693.927 388.068C693.723 388.816 693.179 389.36 692.431 389.564L663.39 398.338C661.281 398.95 661.281 402.01 663.39 402.622L692.499 411.396C693.247 411.6 693.791 412.144 693.995 412.892L702.769 442.001C703.381 444.11 706.442 444.11 707.054 442.001L715.827 412.892C715.963 412.144 716.507 411.6 717.255 411.396Z" fill="#1F93FF"/>
-<path d="M652.853 156.709L689.058 145.797C691.681 145.036 691.681 141.229 689.058 140.468L652.853 129.555C651.923 129.302 651.246 128.625 650.992 127.694L640.08 91.5737C639.318 88.9513 635.512 88.9513 634.75 91.5737L623.838 127.694C623.584 128.625 622.908 129.302 621.977 129.555L585.856 140.468C583.234 141.229 583.234 145.036 585.856 145.797L622.062 156.709C622.992 156.963 623.669 157.64 623.923 158.57L634.835 194.776C635.596 197.398 639.403 197.398 640.164 194.776L651.077 158.57C651.246 157.64 651.923 156.963 652.853 156.709Z" fill="white"/>
-<path d="M389.665 33.7165L407.858 28.2334C409.176 27.8509 409.176 25.9382 407.858 25.5557L389.665 20.0726C389.197 19.9451 388.857 19.6051 388.73 19.1375L383.246 0.988223C382.864 -0.329408 380.951 -0.329408 380.568 0.988223L375.085 19.1375C374.957 19.6051 374.617 19.9451 374.15 20.0726L355.999 25.5557C354.681 25.9382 354.681 27.8509 355.999 28.2334L374.192 33.7165C374.66 33.844 375 34.184 375.127 34.6516L380.611 52.8433C380.993 54.161 382.906 54.161 383.289 52.8433L388.772 34.6516C388.857 34.184 389.197 33.844 389.665 33.7165Z" fill="#3099F0"/>
-<defs>
-<filter id="filter0_d_415_54" x="30.6973" y="138.329" width="374.7" height="312.789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="11"/>
-<feGaussianBlur stdDeviation="11"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_415_54"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_415_54" result="shape"/>
-</filter>
-<filter id="filter1_d_415_54" x="31.5732" y="351.696" width="313.664" height="367.333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="11"/>
-<feGaussianBlur stdDeviation="11"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_415_54"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_415_54" result="shape"/>
-</filter>
-<filter id="filter2_d_415_54" x="237.202" y="403.614" width="377.699" height="313.664" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="11"/>
-<feGaussianBlur stdDeviation="11"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_415_54"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_415_54" result="shape"/>
-</filter>
-<filter id="filter3_d_415_54" x="387.038" y="17.5044" width="342.811" height="386.38" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="11"/>
-<feGaussianBlur stdDeviation="11"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.478431 0 0 0 0 0.576471 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_415_54"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_415_54" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_415_54" x1="217.94" y1="143.112" x2="217.94" y2="421.015" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.9964" stop-color="#ECF0F5"/>
-</linearGradient>
-<linearGradient id="paint1_linear_415_54" x1="188.317" y1="355.217" x2="188.317" y2="689.515" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.9964" stop-color="#ECF0F5"/>
-</linearGradient>
-<linearGradient id="paint2_linear_415_54" x1="425.942" y1="408.376" x2="425.942" y2="687.185" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.9964" stop-color="#ECF0F5"/>
-</linearGradient>
-<linearGradient id="paint3_linear_415_54" x1="408.901" y1="199.732" x2="707.903" y2="199.732" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1F93FF"/>
-<stop offset="1" stop-color="#56B7FC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/dashboard/images/integrations/dashboard_apps-dark.png b/public/dashboard/images/integrations/dashboard_apps-dark.png
new file mode 100644
index 0000000000000..a5b9a4b1778e0
Binary files /dev/null and b/public/dashboard/images/integrations/dashboard_apps-dark.png differ
diff --git a/public/dashboard/images/integrations/dashboard_apps.png b/public/dashboard/images/integrations/dashboard_apps.png
new file mode 100644
index 0000000000000..a5b9a4b1778e0
Binary files /dev/null and b/public/dashboard/images/integrations/dashboard_apps.png differ
diff --git a/public/dashboard/images/integrations/dialogflow-dark.png b/public/dashboard/images/integrations/dialogflow-dark.png
new file mode 100644
index 0000000000000..a21fa0a19e56c
Binary files /dev/null and b/public/dashboard/images/integrations/dialogflow-dark.png differ
diff --git a/public/dashboard/images/integrations/dialogflow.png b/public/dashboard/images/integrations/dialogflow.png
new file mode 100644
index 0000000000000..a21fa0a19e56c
Binary files /dev/null and b/public/dashboard/images/integrations/dialogflow.png differ
diff --git a/public/dashboard/images/integrations/dialogflow.svg b/public/dashboard/images/integrations/dialogflow.svg
deleted file mode 100644
index 32c657f3b26e7..0000000000000
--- a/public/dashboard/images/integrations/dialogflow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="256px" height="326px" viewBox="0 0 256 326" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
-    <defs>
-        <path d="M244.828364,64.4290247 L139.050994,3.38839172 C132.188872,-0.58635615 123.724702,-0.58635615 116.86258,3.38839172 L11.0672138,64.4290247 C4.21670092,68.4140969 5.68434189e-14,75.7408852 5.68434189e-14,83.6661817 L5.68434189e-14,205.837425 C0.00604377806,213.747388 4.22254667,221.055993 11.0672138,225.020596 L63.99189,255.612894 L63.99189,317.985192 C64.0010519,320.359385 65.2737404,322.549075 67.3321592,323.732202 C69.390578,324.915329 71.9232588,324.91287 73.9793756,323.725747 L244.936337,225.074582 C251.789146,221.118113 256.008624,213.804351 256.003556,205.891411 L256.003556,83.6481863 C255.962209,75.7100959 251.7068,68.3916143 244.828364,64.4290247 L244.828364,64.4290247 Z" id="path-1"></path>
-    </defs>
-    <g>
-        <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-        <polygon fill="#EF6C00" mask="url(#mask-2)" points="255.895578 70.8714028 127.98378 144.742806 0 70.8714028 0 218.614208 63.99189 255.522917 63.99189 329.412315 255.895578 218.614208"></polygon>
-        <polygon fill="#FF9800" mask="url(#mask-2)" points="127.98378 144.742806 2.84217094e-14 70.8714028 127.98378 -3 255.895578 70.8714028"></polygon>
-        <polygon fill="#FF9800" mask="url(#mask-2)" points="125.716351 142.493372 0.809796133 70.3855251 2.84217094e-14 70.8714028 127.98378 144.742806 255.895578 70.8714028 252.890335 69.0898513"></polygon>
-        <polygon fill="#FF9800" mask="url(#mask-2)" points="127.98378 145.660575 127.98378 144.742806 0.809796133 71.3032941 2.84217094e-14 71.7891718"></polygon>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/dashboard/images/integrations/dyte-dark.png b/public/dashboard/images/integrations/dyte-dark.png
new file mode 100644
index 0000000000000..42162b58a0d94
Binary files /dev/null and b/public/dashboard/images/integrations/dyte-dark.png differ
diff --git a/public/dashboard/images/integrations/dyte.png b/public/dashboard/images/integrations/dyte.png
index 8a4efab2b48ae..42162b58a0d94 100644
Binary files a/public/dashboard/images/integrations/dyte.png and b/public/dashboard/images/integrations/dyte.png differ
diff --git a/public/dashboard/images/integrations/fullcontact.png b/public/dashboard/images/integrations/fullcontact.png
deleted file mode 100644
index 1e5d9b7f9e5c2..0000000000000
Binary files a/public/dashboard/images/integrations/fullcontact.png and /dev/null differ
diff --git a/public/dashboard/images/integrations/google_translate-dark.png b/public/dashboard/images/integrations/google_translate-dark.png
new file mode 100644
index 0000000000000..1b99e803e643d
Binary files /dev/null and b/public/dashboard/images/integrations/google_translate-dark.png differ
diff --git a/public/dashboard/images/integrations/google_translate.png b/public/dashboard/images/integrations/google_translate.png
new file mode 100644
index 0000000000000..1b99e803e643d
Binary files /dev/null and b/public/dashboard/images/integrations/google_translate.png differ
diff --git a/public/dashboard/images/integrations/googletranslate.png b/public/dashboard/images/integrations/googletranslate.png
deleted file mode 100644
index d502ea051c47d..0000000000000
Binary files a/public/dashboard/images/integrations/googletranslate.png and /dev/null differ
diff --git a/public/dashboard/images/integrations/linear-dark.png b/public/dashboard/images/integrations/linear-dark.png
new file mode 100644
index 0000000000000..38c87ee46d9ec
Binary files /dev/null and b/public/dashboard/images/integrations/linear-dark.png differ
diff --git a/public/dashboard/images/integrations/linear.png b/public/dashboard/images/integrations/linear.png
index 1921f4c3f3987..f2f5555d26d4a 100644
Binary files a/public/dashboard/images/integrations/linear.png and b/public/dashboard/images/integrations/linear.png differ
diff --git a/public/dashboard/images/integrations/openai-dark.png b/public/dashboard/images/integrations/openai-dark.png
new file mode 100644
index 0000000000000..3af9768a17e34
Binary files /dev/null and b/public/dashboard/images/integrations/openai-dark.png differ
diff --git a/public/dashboard/images/integrations/openai.png b/public/dashboard/images/integrations/openai.png
index 847b476b0c909..0a0200d331848 100644
Binary files a/public/dashboard/images/integrations/openai.png and b/public/dashboard/images/integrations/openai.png differ
diff --git a/public/dashboard/images/integrations/slack-dark.png b/public/dashboard/images/integrations/slack-dark.png
new file mode 100644
index 0000000000000..00085044ff363
Binary files /dev/null and b/public/dashboard/images/integrations/slack-dark.png differ
diff --git a/public/dashboard/images/integrations/slack.png b/public/dashboard/images/integrations/slack.png
index 41fc5e45c6a3e..00085044ff363 100644
Binary files a/public/dashboard/images/integrations/slack.png and b/public/dashboard/images/integrations/slack.png differ
diff --git a/public/dashboard/images/integrations/webhook-dark.png b/public/dashboard/images/integrations/webhook-dark.png
new file mode 100644
index 0000000000000..3a7e67c9303e5
Binary files /dev/null and b/public/dashboard/images/integrations/webhook-dark.png differ
diff --git a/public/dashboard/images/integrations/webhook.png b/public/dashboard/images/integrations/webhook.png
new file mode 100644
index 0000000000000..ebd44922160e8
Binary files /dev/null and b/public/dashboard/images/integrations/webhook.png differ
diff --git a/public/dashboard/images/onboarding/canned-responses.png b/public/dashboard/images/onboarding/canned-responses.png
new file mode 100644
index 0000000000000..b549d2b15c5b1
Binary files /dev/null and b/public/dashboard/images/onboarding/canned-responses.png differ
diff --git a/public/dashboard/images/onboarding/labels.png b/public/dashboard/images/onboarding/labels.png
new file mode 100644
index 0000000000000..5eeec8164a7f9
Binary files /dev/null and b/public/dashboard/images/onboarding/labels.png differ
diff --git a/public/dashboard/images/onboarding/omnichannel-inbox.png b/public/dashboard/images/onboarding/omnichannel-inbox.png
new file mode 100644
index 0000000000000..5f6b0ecaa4b72
Binary files /dev/null and b/public/dashboard/images/onboarding/omnichannel-inbox.png differ
diff --git a/public/dashboard/images/onboarding/teams.png b/public/dashboard/images/onboarding/teams.png
new file mode 100644
index 0000000000000..87d955504e3e3
Binary files /dev/null and b/public/dashboard/images/onboarding/teams.png differ
diff --git a/spec/builders/messages/instagram/message_builder_spec.rb b/spec/builders/messages/instagram/message_builder_spec.rb
index 3db393dab5ac3..19631765a422d 100644
--- a/spec/builders/messages/instagram/message_builder_spec.rb
+++ b/spec/builders/messages/instagram/message_builder_spec.rb
@@ -13,6 +13,7 @@
   let!(:instagram_inbox) { create(:inbox, channel: instagram_channel, account: account, greeting_enabled: false) }
   let!(:dm_params) { build(:instagram_message_create_event).with_indifferent_access }
   let!(:story_mention_params) { build(:instagram_story_mention_event).with_indifferent_access }
+  let!(:shared_reel_params) { build(:instagram_shared_reel_event).with_indifferent_access }
   let!(:instagram_story_reply_event) { build(:instagram_story_reply_event).with_indifferent_access }
   let!(:instagram_message_reply_event) { build(:instagram_message_reply_event).with_indifferent_access }
   let(:fb_object) { double }
@@ -79,6 +80,27 @@
       expect(instagram_inbox.messages.count).to be 1
     end
 
+    it 'creates message for shared reel' do
+      allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
+      allow(fb_object).to receive(:get_object).and_return(
+        {
+          name: 'Jane',
+          id: 'Sender-id-1',
+          account_id: instagram_inbox.account_id,
+          profile_pic: 'https://chatwoot-assets.local/sample.png'
+        }.with_indifferent_access
+      )
+      messaging = shared_reel_params[:entry][0]['messaging'][0]
+      contact_inbox
+      described_class.new(messaging, instagram_inbox).perform
+
+      message = instagram_channel.inbox.messages.first
+      expect(message.attachments.first.file_type).to eq('ig_reel')
+      expect(message.attachments.first.external_url).to eq(
+        shared_reel_params[:entry][0]['messaging'][0]['message']['attachments'][0]['payload']['url']
+      )
+    end
+
     it 'creates message with for reply with story id' do
       allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
       allow(fb_object).to receive(:get_object).and_return(
diff --git a/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb
index 43735046e6211..8662a5006b8f8 100644
--- a/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb
@@ -16,7 +16,7 @@
       let(:admin) { create(:user, account: account, role: :administrator) }
 
       it 'returns all active apps without sensitive information if the user is an agent' do
-        first_app = Integrations::App.all.find(&:active?)
+        first_app = Integrations::App.all.find { |app| app.active?(account) }
         get api_v1_account_integrations_apps_url(account),
             headers: agent.create_new_auth_token,
             as: :json
@@ -41,7 +41,7 @@
       end
 
       it 'returns all active apps with sensitive information if user is an admin' do
-        first_app = Integrations::App.all.find(&:active?)
+        first_app = Integrations::App.all.find { |app| app.active?(account) }
         get api_v1_account_integrations_apps_url(account),
             headers: admin.create_new_auth_token,
             as: :json
diff --git a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
new file mode 100644
index 0000000000000..ce4976d96b951
--- /dev/null
+++ b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
@@ -0,0 +1,66 @@
+require 'rails_helper'
+
+RSpec.describe 'Captain Integrations API', type: :request do
+  let(:account) { create(:account) }
+  let(:admin) { create(:user, account: account, role: :administrator) }
+  let(:agent) { create(:user, account: account, role: :agent) }
+  let(:inbox) { create(:inbox, account: account) }
+
+  describe 'GET /api/v1/accounts/{account.id}/integrations/captain/sso_url' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
+            params: {},
+            as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'return unauthorized if agent' do
+        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
+            params: {},
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+
+      it 'returns 404 if hook is not available' do
+        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
+            params: {},
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:not_found)
+      end
+
+      it 'returns sso url if hook is available' do
+        InstallationConfig.where(name: 'CAPTAIN_APP_URL').first_or_create(value: 'https://app.chatwoot.com')
+
+        hook = create(:integrations_hook, account: account, app_id: 'captain', settings: {
+                        access_token: SecureRandom.hex,
+                        account_email: Faker::Internet.email,
+                        account_id: '1',
+                        assistant_id: '1',
+                        inbox_ids: '1'
+                      })
+
+        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
+            params: {},
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        data = response.parsed_body
+        params_string = "token=#{URI.encode_www_form_component(hook['settings']['access_token'])}" \
+                        "&email=#{URI.encode_www_form_component(hook['settings']['account_email'])}" \
+                        "&account_id=#{URI.encode_www_form_component(hook['settings']['account_id'])}"
+
+        sso_url = "https://app.chatwoot.com/sso?#{params_string}"
+        expect(data['sso_url']).to eq(sso_url)
+      end
+    end
+  end
+end
diff --git a/spec/enterprise/jobs/response_bot/inbox_pending_conversations_resolution_job_spec.rb b/spec/enterprise/jobs/captain/inbox_pending_conversations_resolution_job_spec.rb
similarity index 95%
rename from spec/enterprise/jobs/response_bot/inbox_pending_conversations_resolution_job_spec.rb
rename to spec/enterprise/jobs/captain/inbox_pending_conversations_resolution_job_spec.rb
index 268d758cd8c21..90e9360d31b33 100644
--- a/spec/enterprise/jobs/response_bot/inbox_pending_conversations_resolution_job_spec.rb
+++ b/spec/enterprise/jobs/captain/inbox_pending_conversations_resolution_job_spec.rb
@@ -1,6 +1,6 @@
 require 'rails_helper'
 
-RSpec.describe ResponseBot::InboxPendingConversationsResolutionJob, type: :job do
+RSpec.describe Captain::InboxPendingConversationsResolutionJob, type: :job do
   include ActiveJob::TestHelper
 
   let!(:inbox) { create(:inbox) }
diff --git a/spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb b/spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb
index 642752c5b8f39..187649591588a 100644
--- a/spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb
+++ b/spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb
@@ -7,23 +7,47 @@
   let!(:inbox_without_bot) { create(:inbox, account: account_without_bot) }
   let(:response_source) { create(:response_source, account: account_with_bot) }
 
-  before do
-    skip_unless_response_bot_enabled_test_environment
-    account_with_bot.enable_features!(:response_bot)
-    create(:inbox_response_source, inbox: inbox_with_bot, response_source: response_source)
-  end
+  describe '#perform - response bot resolutions' do
+    before do
+      skip_unless_response_bot_enabled_test_environment
+      account_with_bot.enable_features!(:response_bot)
+      create(:inbox_response_source, inbox: inbox_with_bot, response_source: response_source)
+    end
 
-  describe '#perform' do
     it 'enqueues resolution jobs only for inboxes with response bot enabled' do
       expect do
         described_class.perform_now
-      end.to have_enqueued_job(ResponseBot::InboxPendingConversationsResolutionJob).with(inbox_with_bot).and have_enqueued_job.exactly(:once)
+      end.to have_enqueued_job(Captain::InboxPendingConversationsResolutionJob).with(inbox_with_bot).and have_enqueued_job.exactly(:once)
     end
 
     it 'does not enqueue resolution jobs for inboxes without response bot enabled' do
       expect do
         described_class.perform_now
-      end.not_to have_enqueued_job(ResponseBot::InboxPendingConversationsResolutionJob).with(inbox_without_bot)
+      end.not_to have_enqueued_job(Captain::InboxPendingConversationsResolutionJob).with(inbox_without_bot)
+    end
+  end
+
+  describe '#perform - captain resolutions' do
+    before do
+      create(:integrations_hook, app_id: 'captain', account: account_with_bot, settings: {
+               inbox_ids: inbox_with_bot.id.to_s,
+               access_token: SecureRandom.hex,
+               account_id: Faker::Alphanumeric.alpha(number: 10),
+               account_email: Faker::Internet.email,
+               assistant_id: Faker::Alphanumeric.alpha(number: 10)
+             })
+    end
+
+    it 'enqueues resolution jobs only for inboxes with captain enabled' do
+      expect do
+        described_class.perform_now
+      end.to have_enqueued_job(Captain::InboxPendingConversationsResolutionJob).with(inbox_with_bot).and have_enqueued_job.exactly(:once)
+    end
+
+    it 'does not enqueue resolution jobs for inboxes without captain enabled' do
+      expect do
+        described_class.perform_now
+      end.not_to have_enqueued_job(Captain::InboxPendingConversationsResolutionJob).with(inbox_without_bot)
     end
   end
 end
diff --git a/spec/factories/instagram/instagram_message_create_event.rb b/spec/factories/instagram/instagram_message_create_event.rb
index 00ca91e237db3..76ecb37dc931a 100644
--- a/spec/factories/instagram/instagram_message_create_event.rb
+++ b/spec/factories/instagram/instagram_message_create_event.rb
@@ -204,6 +204,42 @@
     initialize_with { attributes }
   end
 
+  factory :instagram_shared_reel_event, class: Hash do
+    entry do
+      [
+        {
+          'id': 'instagram-message-id-1234',
+          'time': '2021-09-08T06:34:04+0000',
+          'messaging': [
+            {
+              'sender': {
+                'id': 'Sender-id-1'
+              },
+              'recipient': {
+                'id': 'chatwoot-app-user-id-1'
+              },
+              'timestamp': '2021-09-08T06:34:04+0000',
+              'message': {
+                'mid': 'message-id-1',
+                'attachments': [
+                  {
+                    'type': 'ig_reel',
+                    'payload': {
+                      'reel_video_id': '1234',
+                      'title': 'Reel title',
+                      'url': 'https://www.example.com/test.jpeg'
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    end
+    initialize_with { attributes }
+  end
+
   factory :instagram_story_mention_event, class: Hash do
     entry do
       [
diff --git a/spec/models/attachment_spec.rb b/spec/models/attachment_spec.rb
index 64a506a928771..6b05d26fb8167 100644
--- a/spec/models/attachment_spec.rb
+++ b/spec/models/attachment_spec.rb
@@ -44,9 +44,14 @@
       }.to_json, headers: {})
     end
 
-    it 'returns external url as data and thumb urls' do
+    it 'returns external url as data and thumb urls when message is incoming' do
       external_url = instagram_message.attachments.first.external_url
       expect(instagram_message.attachments.first.push_event_data[:data_url]).to eq external_url
     end
+
+    it 'returns original attachment url as data url if the message is outgoing' do
+      message = create(:message, :instagram_story_mention, message_type: :outgoing)
+      expect(message.attachments.first.push_event_data[:data_url]).not_to eq message.attachments.first.external_url
+    end
   end
 end
diff --git a/spec/models/integrations/app_spec.rb b/spec/models/integrations/app_spec.rb
new file mode 100644
index 0000000000000..b9652ff89cbb3
--- /dev/null
+++ b/spec/models/integrations/app_spec.rb
@@ -0,0 +1,105 @@
+require 'rails_helper'
+
+RSpec.describe Integrations::App do
+  let(:apps) { described_class }
+  let(:app) { apps.find(id: app_name) }
+  let(:account) { create(:account) }
+
+  describe '#name' do
+    let(:app_name) { 'slack' }
+
+    it 'returns the name' do
+      expect(app.name).to eq('Slack')
+    end
+  end
+
+  describe '#logo' do
+    let(:app_name) { 'slack' }
+
+    it 'returns the logo' do
+      expect(app.logo).to eq('slack.png')
+    end
+  end
+
+  describe '#action' do
+    let(:app_name) { 'slack' }
+
+    before do
+      allow(Current).to receive(:account).and_return(account)
+    end
+
+    context 'when the app is slack' do
+      it 'returns the action URL with client_id and redirect_uri' do
+        with_modified_env SLACK_CLIENT_ID: 'dummy_client_id' do
+          expect(app.action).to include('client_id=dummy_client_id')
+          expect(app.action).to include(
+            "/app/accounts/#{account.id}/settings/integrations/slack"
+          )
+        end
+      end
+    end
+  end
+
+  describe '#active?' do
+    let(:app_name) { 'slack' }
+
+    context 'when the app is slack' do
+      it 'returns true if SLACK_CLIENT_SECRET is present' do
+        with_modified_env SLACK_CLIENT_SECRET: 'random_secret' do
+          expect(app.active?(account)).to be true
+        end
+      end
+    end
+
+    context 'when the app is linear' do
+      let(:app_name) { 'linear' }
+
+      it 'returns true if the linear integration feature is disabled' do
+        expect(app.active?(account)).to be false
+      end
+
+      it 'returns false if the linear integration feature is enabled' do
+        account.enable_features('linear_integration')
+        account.save!
+
+        expect(app.active?(account)).to be true
+      end
+    end
+
+    context 'when other apps are queried' do
+      let(:app_name) { 'webhook' }
+
+      it 'returns true' do
+        expect(app.active?(account)).to be true
+      end
+    end
+  end
+
+  describe '#enabled?' do
+    context 'when the app is webhook' do
+      let(:app_name) { 'webhook' }
+
+      it 'returns false if the account does not have any webhooks' do
+        expect(app.enabled?(account)).to be false
+      end
+
+      it 'returns true if the account has webhooks' do
+        create(:webhook, account: account)
+        expect(app.enabled?(account)).to be true
+      end
+    end
+
+    context 'when the app is anything other than webhook' do
+      let(:app_name) { 'openai' }
+
+      it 'returns false if the account does not have any hooks for the app' do
+        expect(app.enabled?(account)).to be false
+      end
+
+      it 'returns true if the account has hooks for the app' do
+        create(:integrations_hook, :openai, account: account)
+        expect(app.enabled?(account)).to be true
+      end
+    end
+  end
+end
diff --git a/tailwind.config.js b/tailwind.config.js
index 9e551985b38f9..93fa296e5aceb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,8 +17,17 @@ module.exports = {
     extend: {
       fontFamily: {
         inter: ['Inter', ...defaultTheme.fontFamily.sans],
+        interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
       },
     },
+    screens: {
+      xs: '480px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
     fontSize: {
       ...defaultTheme.fontSize,
       xxs: '0.625rem',
@@ -57,12 +66,19 @@ module.exports = {
           transform: 'translateX(1px)',
         },
       },
+      shake: {
+        '0%, 100%': { transform: 'translateX(0)' },
+        '25%': { transform: 'translateX(0.234375rem)' },
+        '50%': { transform: 'translateX(-0.234375rem)' },
+        '75%': { transform: 'translateX(0.234375rem)' },
+      },
     },
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
       'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       'card-select': 'card-select 0.25s ease-in-out',
+      shake: 'shake 0.3s ease-in-out 0s 2',
     },
   },
   plugins: [
diff --git a/yarn.lock b/yarn.lock
index 266537dae7900..6bb82aa1503f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8287,9 +8287,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001214, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001503, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
-  version "1.0.30001624"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001624.tgz"
-  integrity sha512-0dWnQG87UevOCPYaOR49CBcLBwoZLpws+k6W37nLjWUhumP1Isusj0p2u+3KhjNloRWK9OKMgjBBzPujQHw4nA==
+  version "1.0.30001651"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz"
+  integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -10418,17 +10418,18 @@ eslint-plugin-storybook@^0.6.14:
     requireindex "^1.1.0"
     ts-dedent "^2.2.0"
 
-eslint-plugin-vue@^9.17.0:
-  version "9.17.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.17.0.tgz#4501547373f246547083482838b4c8f4b28e5932"
-  integrity sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==
+eslint-plugin-vue@^9.27.0:
+  version "9.27.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
+  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
+    globals "^13.24.0"
     natural-compare "^1.4.0"
     nth-check "^2.1.1"
-    postcss-selector-parser "^6.0.13"
-    semver "^7.5.4"
-    vue-eslint-parser "^9.3.1"
+    postcss-selector-parser "^6.0.15"
+    semver "^7.6.0"
+    vue-eslint-parser "^9.4.3"
     xml-name-validator "^4.0.0"
 
 eslint-rule-composer@^0.3.0:
@@ -11561,6 +11562,13 @@ globals@^13.20.0:
   dependencies:
     type-fest "^0.20.2"
 
+globals@^13.24.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
 globalthis@^1.0.0, globalthis@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
@@ -16223,7 +16231,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13, postcss-selector-parser@^6.0.4:
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.4:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
   integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
@@ -16231,6 +16239,14 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-select
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.15:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
+  integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
@@ -17830,13 +17846,18 @@ semver@^7.3.2, semver@^7.3.4, semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.3.6, semver@^7.5.3, semver@^7.5.4:
+semver@^7.3.6, semver@^7.5.3:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.0:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -18392,16 +18413,7 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -18553,7 +18565,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -18581,13 +18593,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -19976,10 +19981,10 @@ vue-easytable@2.5.5:
     vue "^2.6.12"
     vue-template-compiler "^2.6.11"
 
-vue-eslint-parser@^9.3.1:
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz#429955e041ae5371df5f9e37ebc29ba046496182"
-  integrity sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
   dependencies:
     debug "^4.3.4"
     eslint-scope "^7.1.1"
@@ -20105,11 +20110,6 @@ vuedraggable@^2.24.3:
   dependencies:
     sortablejs "1.10.2"
 
-vuelidate@0.7.7:
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.7.tgz#5df3930a63ddecf56fde7bdacea9dbaf0c9bf899"
-  integrity sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==
-
 vuex-router-sync@~4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-4.1.3.tgz#f209ec3174de04179bfadd7994437e4c5a81c975"
@@ -20526,7 +20526,7 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -20553,15 +20553,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"