diff --git a/.env.example b/.env.example
index befcde463..b7ba0920d 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 18162ee76..f3d050ab3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,6 +27,160 @@ module.exports = {
     'import/no-unresolved': 'off',
     'vue/html-indent': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/next-tick-style': ['error', 'callback'],
+    'vue/block-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+      },
+    ],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/define-emits-declaration': ['error'],
+    'vue/define-macros-order': [
+      'error',
+      {
+        order: ['defineProps', 'defineEmits'],
+        defineExposeLast: false,
+      },
+    ],
+    'vue/define-props-declaration': ['error', 'runtime'],
+    'vue/match-component-import-name': ['error'],
+    'vue/no-bare-strings-in-template': [
+      'error',
+      {
+        allowlist: [
+          '(',
+          ')',
+          ',',
+          '.',
+          '&',
+          '+',
+          '-',
+          '=',
+          '*',
+          '/',
+          '#',
+          '%',
+          '!',
+          '?',
+          ':',
+          '[',
+          ']',
+          '{',
+          '}',
+          '<',
+          '>',
+          '⌘',
+          '📄',
+          '🎉',
+          '💬',
+          '👥',
+          '📥',
+          '🔖',
+          '❌',
+          '✅',
+          '\u00b7',
+          '\u2022',
+          '\u2010',
+          '\u2013',
+          '\u2014',
+          '\u2212',
+          '|',
+        ],
+        attributes: {
+          '/.+/': [
+            'title',
+            'aria-label',
+            'aria-placeholder',
+            'aria-roledescription',
+            'aria-valuetext',
+          ],
+          input: ['placeholder'],
+        },
+        directives: ['v-text'],
+      },
+    ],
+    'vue/no-empty-component-block': 'error',
+    'vue/no-multiple-objects-in-class': 'error',
+    'vue/no-root-v-if': 'warn',
+    'vue/no-static-inline-styles': [
+      'error',
+      {
+        allowBinding: false,
+      },
+    ],
+    'vue/no-template-target-blank': [
+      'error',
+      {
+        allowReferrer: false,
+        enforceDynamicLinks: 'always',
+      },
+    ],
+    'vue/no-required-prop-with-default': [
+      'error',
+      {
+        autofix: false,
+      },
+    ],
+    'vue/no-this-in-before-route-enter': 'error',
+    'vue/no-undef-components': [
+      'error',
+      {
+        ignorePatterns: [
+          '^woot-',
+          '^fluent-',
+          '^multiselect',
+          '^router-link',
+          '^router-view',
+          '^ninja-keys',
+          '^FormulateForm',
+          '^FormulateInput',
+          '^highlightjs',
+        ],
+      },
+    ],
+    'vue/no-unused-emit-declarations': 'error',
+    'vue/no-unused-refs': 'error',
+    'vue/no-use-v-else-with-v-for': 'error',
+    'vue/prefer-true-attribute-shorthand': 'error',
+    'vue/no-useless-v-bind': [
+      'error',
+      {
+        ignoreIncludesComment: false,
+        ignoreStringEscape: false,
+      },
+    ],
+    'vue/no-v-text': 'error',
+    'vue/padding-line-between-blocks': ['error', 'always'],
+    'vue/prefer-separate-static-class': 'error',
+    'vue/require-explicit-slots': 'error',
+    'vue/require-macro-variable-name': [
+      'error',
+      {
+        defineProps: 'props',
+        defineEmits: 'emit',
+        defineSlots: 'slots',
+        useSlots: 'slots',
+        useAttrs: 'attrs',
+      },
+    ],
+    'vue/no-unused-properties': [
+      'error',
+      {
+        groups: ['props'],
+        deepData: false,
+        ignorePublicMembers: false,
+        unreferencedOptions: [],
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 3f98c2cd8..7c046d51a 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 f690e6876..e377866f7 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 91d3b3d8b..19f6e76c3 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 0739829aa..f01a236c9 100644
--- a/app/builders/messages/messenger/message_builder.rb
+++ b/app/builders/messages/messenger/message_builder.rb
@@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder
     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 358a15d87..c2284bc2e 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 @@ class Api::V1::Accounts::Integrations::AppsController < Api::V1::Accounts::BaseC
   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 000000000..7df0e61df
--- /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 c343fbe4f..da169d61f 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 2b816e603..975857ce1 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 4b33d5b10..1db97a306 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 97535bf0d..b5182bf87 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 87370185d..6fc0ee0d9 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,35 +1,3 @@
-<template>
-  <div class="-mt-px text-sm">
-    <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
-      @click="$emit('click')"
-    >
-      <div class="flex justify-between mb-0.5">
-        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
-          {{ title }}
-        </h5>
-      </div>
-      <div class="flex flex-row">
-        <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
-          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
-          <fluent-icon v-else size="24" icon="add" type="solid" />
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 
@@ -61,3 +29,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="-mt-px text-sm">
+    <button
+      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      @click="$emit('click')"
+    >
+      <div class="flex justify-between mb-0.5">
+        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <h5
+          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
+        >
+          {{ title }}
+        </h5>
+      </div>
+      <div class="flex flex-row">
+        <slot name="button" />
+        <div class="flex justify-end w-3 text-woot-500">
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isOpen"
+      class="bg-white dark:bg-slate-900"
+      :class="compact ? 'p-0' : 'p-4'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index 6cff70bd3..2322edbfb 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -1,17 +1,3 @@
-<template>
-  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
-    @click="$emit('click')"
-  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
-      {{ title }}
-    </h3>
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <button
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
+  >
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
 <style scoped lang="scss">
 .inactive {
   img {
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index ee5354027..fa95c5024 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 d2df2bea3..cd7cf0ff1 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -21,16 +21,16 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits([
-  'add-folders',
-  'delete-folders',
-  'reset-filters',
-  'basic-filter-change',
-  'filters-modal',
+const emit = defineEmits([
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
 ]);
 
 const onBasicFilterChange = (value, type) => {
-  emits('basic-filter-change', value, type);
+  emit('basicFilterChange', value, type);
 };
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="save"
-          @click="emits('add-folders')"
+          @click="emit('addFolders')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="dismiss-circle"
-          @click="emits('reset-filters')"
+          @click="emit('resetFilters')"
         />
       </div>
       <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="edit"
-          @click="emits('filters-modal')"
+          @click="emit('filtersModal')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="delete"
-          @click="emits('delete-folders')"
+          @click="emit('deleteFolders')"
         />
       </div>
       <woot-button
@@ -104,9 +104,9 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         color-scheme="secondary"
         icon="filter"
         size="tiny"
-        @click="emits('filters-modal')"
+        @click="emit('filtersModal')"
       />
-      <conversation-basic-filter
+      <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @changeFilter="onBasicFilterChange"
       />
diff --git a/app/javascript/dashboard/components/Code.vue b/app/javascript/dashboard/components/Code.vue
index d8f609e29..d8656da75 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 b013b0171..55721ac21 100644
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -1,26 +1,3 @@
-<template>
-  <conversation-card
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    :enable-context-menu="true"
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
-  />
-</template>
-
 <script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
 export default {
@@ -70,3 +47,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ConversationCard
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    enable-context-menu
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index e7de811d6..4bf97320b 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 000000000..b07b24657
--- /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 65f943d41..4b5a41951 100644
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="modal-content" @submit.prevent="chooseTime">
-      <date-picker
-        v-model="snoozeTime"
-        type="datetime"
-        inline
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-        :popup-style="{ width: '100%' }"
-      />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 
@@ -47,7 +22,7 @@ export default {
       this.$emit('close');
     },
     chooseTime() {
-      this.$emit('choose-time', this.snoozeTime);
+      this.$emit('chooseTime', this.snoozeTime);
     },
     disabledDate(date) {
       // Disable all the previous dates
@@ -64,6 +39,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form class="modal-content" @submit.prevent="chooseTime">
+      <DatePicker
+        v-model="snoozeTime"
+        type="datetime"
+        inline
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-5 pb-6;
diff --git a/app/javascript/dashboard/components/FormSection.vue b/app/javascript/dashboard/components/FormSection.vue
index 8a22d5e8a..481006adb 100644
--- a/app/javascript/dashboard/components/FormSection.vue
+++ b/app/javascript/dashboard/components/FormSection.vue
@@ -1,3 +1,16 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div class="flex flex-col items-start w-full gap-6">
     <div class="flex flex-col w-full gap-4">
@@ -16,16 +29,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/components/IntersectionObserver.vue b/app/javascript/dashboard/components/IntersectionObserver.vue
index 215c054ff..2268e0ccd 100644
--- a/app/javascript/dashboard/components/IntersectionObserver.vue
+++ b/app/javascript/dashboard/components/IntersectionObserver.vue
@@ -1,7 +1,3 @@
-<template>
-  <div ref="observedElement" class="h-6 w-full" />
-</template>
-
 <script>
 export default {
   props: {
@@ -32,3 +28,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>
diff --git a/app/javascript/dashboard/components/MaskedText.vue b/app/javascript/dashboard/components/MaskedText.vue
index 5492882ce..e981986c0 100644
--- a/app/javascript/dashboard/components/MaskedText.vue
+++ b/app/javascript/dashboard/components/MaskedText.vue
@@ -1,3 +1,33 @@
+<script>
+import 'highlight.js/styles/default.css';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      masked: true,
+    };
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+    },
+    toggleMasked() {
+      this.masked = !this.masked;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="text--container">
     <woot-button size="small" class="button--text" @click="onCopy">
@@ -15,37 +45,6 @@
   </div>
 </template>
 
-<script>
-import 'highlight.js/styles/default.css';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  mixins: [alertMixin],
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      masked: true,
-    };
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.value);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-    toggleMasked() {
-      this.masked = !this.masked;
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .text--container {
   position: relative;
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index bfe7dc30b..ae126aa11 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -1,36 +1,3 @@
-<template>
-  <transition name="modal-fade">
-    <div
-      v-if="show"
-      :class="modalClassName"
-      transition="modal"
-      @mousedown="handleMouseDown"
-    >
-      <div
-        :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
-          'rounded-xl w-[37.5rem]': !fullWidth,
-          'items-center rounded-none flex h-full justify-center w-full':
-            fullWidth,
-          [size]: true,
-        }"
-        @mouse.stop
-        @mousedown="event => event.stopPropagation()"
-      >
-        <woot-button
-          v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
-          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
-          @click="close"
-        />
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
 <script>
 export default {
   props: {
@@ -108,6 +75,39 @@ export default {
 };
 </script>
 
+<template>
+  <transition name="modal-fade">
+    <div
+      v-if="show"
+      :class="modalClassName"
+      transition="modal"
+      @mousedown="handleMouseDown"
+    >
+      <div
+        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        :class="{
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
+        <woot-button
+          v-if="showCloseButton"
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          @click="close"
+        />
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style lang="scss">
 .modal-mask {
   @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 332ca069f..63d361278 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,3 +1,28 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
@@ -23,26 +48,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-    headerContentValue: {
-      type: String,
-      default: '',
-    },
-    headerImage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index d59a9dc01..ee3509d64 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      default: true,
+    },
+    note: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
@@ -30,26 +53,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    showBorder: {
-      type: Boolean,
-      default: true,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index 6106b9ad0..74739a8b1 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,14 +1,3 @@
-<template>
-  <woot-button
-    :size="size"
-    variant="clear"
-    color-scheme="secondary"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
-    @click="onMenuItemClick"
-  />
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -26,3 +15,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-button
+    :size="size"
+    variant="clear"
+    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
+    icon="list"
+    @click="onMenuItemClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue
index 213284484..3a23a15ef 100644
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/app/javascript/dashboard/components/Snackbar.vue
@@ -1,24 +1,3 @@
-<template>
-  <div>
-    <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
-    >
-      <div class="text-white dark:text-white text-sm font-medium">
-        {{ message }}
-      </div>
-      <div v-if="action">
-        <router-link
-          v-if="action.type == 'link'"
-          :to="action.to"
-          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
-        >
-          {{ action.message }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,11 +6,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    showButton: Boolean,
-    duration: {
-      type: [String, Number],
-      default: 3000,
-    },
   },
   data() {
     return {
@@ -42,3 +16,24 @@ export default {
   methods: {},
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-sm font-medium text-white dark:text-white">
+        {{ message }}
+      </div>
+      <div v-if="action">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
+        >
+          {{ action.message }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 4785e4d4b..26bb040be 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 a3eece8d5..1d89ebfde 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 c9dc51754..544e78709 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 74ee0691a..382b3c3f8 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 825f17807..e220d2284 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 ca45559f3..a02839111 100644
--- a/app/javascript/dashboard/components/base/Hotkey.vue
+++ b/app/javascript/dashboard/components/base/Hotkey.vue
@@ -1,8 +1,3 @@
-<template>
-  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
-    <slot />
-  </kbd>
-</template>
 <script>
 export default {
   props: {
@@ -14,6 +9,12 @@ export default {
 };
 </script>
 
+<template>
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+    <slot />
+  </kbd>
+</template>
+
 <style lang="scss">
 kbd.hotkey {
   @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
index 733b84639..32c2e923a 100644
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -1,18 +1,10 @@
-<template>
-  <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <fluent-icon
-      v-if="!isLoading && icon"
-      class="icon"
-      :class="buttonIconClass"
-      :icon="icon"
-    />
-    <spinner v-if="isLoading" />
-    <slot />
-  </button>
-</template>
-
 <script>
+import Spinner from 'shared/components/Spinner.vue';
+
 export default {
+  components: {
+    Spinner,
+  },
   props: {
     isLoading: {
       type: Boolean,
@@ -42,3 +34,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <fluent-icon
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass"
+      :icon="icon"
+    />
+    <Spinner v-if="isLoading" />
+    <slot />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index 7dcc15488..b29b6b538 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <span>{{ buttonText }}</span>
-    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,6 +47,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <span>{{ buttonText }}</span>
+    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+  </button>
+</template>
+
 <style lang="scss" scoped>
 button:disabled {
   @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 64c13c6e9..7c4c4daaa 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 63f216058..c4bb78ebe 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 4ccaa97df..1e1dfac25 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 92b8765c6..f019933e0 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 f7d63f6a1..e30c3bcb1 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 ec0d986c2..4a000a447 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,35 +1,3 @@
-<template>
-  <div
-    v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
-    @mouseover="setShowSwitch"
-    @mouseleave="resetShowSwitch"
-  >
-    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p
-      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
-    >
-      {{ account.name }}
-    </p>
-    <transition name="fade">
-      <div
-        v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
-      >
-        <div class="my-0 mx-2">
-          <woot-button
-            variant="clear"
-            size="tiny"
-            icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
-          >
-            {{ $t('SIDEBAR.SWITCH') }}
-          </woot-button>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -56,6 +24,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="showShowCurrentAccountContext"
+    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
+    @mouseover="setShowSwitch"
+    @mouseleave="resetShowSwitch"
+  >
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p
+      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
+    >
+      {{ account.name }}
+    </p>
+    <transition name="fade">
+      <div
+        v-if="showSwitchButton"
+        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
+      >
+        <div class="mx-2 my-0">
+          <woot-button
+            variant="clear"
+            size="tiny"
+            icon="arrow-swap"
+            @click="$emit('toggleAccounts')"
+          >
+            {{ $t('SIDEBAR.SWITCH') }}
+          </woot-button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 3e8f1e6ab..73f727a0e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -1,62 +1,3 @@
-<template>
-  <woot-modal
-    :show="showAccountModal"
-    :on-close="() => $emit('close-account-modal')"
-  >
-    <woot-modal-header
-      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
-      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
-    />
-    <div class="px-8 py-4">
-      <div
-        v-for="account in currentUser.accounts"
-        :id="`account-${account.id}`"
-        :key="account.id"
-        class="pt-0 pb-0"
-      >
-        <button
-          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
-          @click="onChangeAccount(account.id)"
-        >
-          <span class="w-full">
-            <label :for="account.name" class="text-left rtl:text-right">
-              <div
-                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
-              >
-                {{ account.name }}
-              </div>
-              <div
-                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
-              >
-                {{ account.role }}
-              </div>
-            </label>
-          </span>
-          <fluent-icon
-            v-show="account.id === accountId"
-            class="text-slate-800 dark:text-slate-100"
-            icon="checkmark-circle"
-            type="solid"
-            size="24"
-          />
-        </button>
-      </div>
-    </div>
-
-    <div
-      v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
-    >
-      <button
-        class="button success large expanded nice w-full"
-        @click="$emit('show-create-account-modal')"
-      >
-        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-      </button>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -82,3 +23,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal
+    :show="showAccountModal"
+    :on-close="() => $emit('closeAccountModal')"
+  >
+    <woot-modal-header
+      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
+      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
+    />
+    <div class="px-8 py-4">
+      <div
+        v-for="account in currentUser.accounts"
+        :id="`account-${account.id}`"
+        :key="account.id"
+        class="pt-0 pb-0"
+      >
+        <button
+          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
+          @click="onChangeAccount(account.id)"
+        >
+          <span class="w-full">
+            <label :for="account.name" class="text-left rtl:text-right">
+              <div
+                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
+              >
+                {{ account.name }}
+              </div>
+              <div
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
+              >
+                {{ account.role }}
+              </div>
+            </label>
+          </span>
+          <fluent-icon
+            v-show="account.id === accountId"
+            class="text-slate-800 dark:text-slate-100"
+            icon="checkmark-circle"
+            type="solid"
+            size="24"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="globalConfig.createNewAccountFromDashboard"
+      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
+    >
+      <button
+        class="w-full button success large expanded nice"
+        @click="$emit('showCreateAccountModal')"
+      >
+        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+      </button>
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index efbb81228..c36a108ab 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 7683a40b2..ff526533f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -1,19 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    variant="link"
-    class="items-center flex rounded-full"
-    @click="handleClick"
-  >
-    <thumbnail
-      :src="currentUser.avatar_url"
-      :username="currentUser.name"
-      :status="statusOfAgent"
-      should-show-status-always
-      size="32px"
-    />
-  </woot-button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../../widgets/Thumbnail.vue';
@@ -33,8 +17,25 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('toggle-menu');
+      this.$emit('toggleMenu');
     },
   },
 };
 </script>
+
+<template>
+  <woot-button
+    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
+    variant="link"
+    class="flex items-center rounded-full"
+    @click="handleClick"
+  >
+    <Thumbnail
+      :src="currentUser.avatar_url"
+      :username="currentUser.name"
+      :status="statusOfAgent"
+      should-show-status-always
+      size="32px"
+    />
+  </woot-button>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
index f470bc5b6..38615fff0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="w-8 h-8">
-    <router-link :to="dashboardPath" replace>
-      <img :src="source" :alt="name" />
-    </router-link>
-  </div>
-</template>
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
@@ -30,3 +23,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-8 h-8">
+    <router-link :to="dashboardPath" replace>
+      <img :src="source" :alt="name" />
+    </router-link>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index f3a394f4b..48e5aef7f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,7 +1,38 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    unreadCount() {
+      if (!this.notificationMetadata.unreadCount) {
+        return '';
+      }
+
+      return this.notificationMetadata.unreadCount < 100
+        ? `${this.notificationMetadata.unreadCount}`
+        : '99+';
+    },
+    isNotificationPanelActive() {
+      return this.$route.name === 'notifications_index';
+    },
+  },
+  methods: {
+    openNotificationPanel() {
+      if (this.$route.name !== 'notifications_index') {
+        this.$emit('openNotificationPanel');
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isNotificationPanelActive,
@@ -23,34 +54,3 @@
     </button>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    unreadCount() {
-      if (!this.notificationMetadata.unreadCount) {
-        return '';
-      }
-
-      return this.notificationMetadata.unreadCount < 100
-        ? `${this.notificationMetadata.unreadCount}`
-        : '99+';
-    },
-    isNotificationPanelActive() {
-      return this.$route.name === 'notifications_index';
-    },
-  },
-  methods: {
-    openNotificationPanel() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$emit('open-notification-panel');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 01dce6bf1..707639b57 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -1,110 +1,3 @@
-<template>
-  <transition name="menu-slide">
-    <div
-      v-if="show"
-      v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
-      :class="{ 'block visible': show }"
-    >
-      <availability-status />
-      <woot-dropdown-menu>
-        <woot-dropdown-item v-if="showChangeAccountOption">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="chat-help"
-            @click="$emit('show-support-chat-window')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="keyboard"
-            @click="handleKeyboardHelpClick"
-          >
-            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <router-link
-            v-slot="{ href, isActive, navigate }"
-            :to="`/app/accounts/${accountId}/profile/settings`"
-            custom
-          >
-            <a
-              :href="href"
-              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
-              :class="{ 'is-active': isActive }"
-              @click="e => handleProfileSettingClick(e, navigate)"
-            >
-              <fluent-icon icon="person" size="14" class="icon icon--font" />
-              <span class="button__content">
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-              </span>
-            </a>
-          </router-link>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="appearance"
-            @click="openAppearanceOptions"
-          >
-            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
-          <a
-            href="/super_admin"
-            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-            @click="$emit('close')"
-          >
-            <fluent-icon
-              icon="content-settings"
-              size="14"
-              class="icon icon--font"
-            />
-            <span class="button__content">
-              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-            </span>
-          </a>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="power"
-            @click="logout"
-          >
-            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-          </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
-    </div>
-  </transition>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
@@ -145,7 +38,7 @@ export default {
       navigate(e);
     },
     handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
       this.$emit('close');
     },
     logout() {
@@ -161,3 +54,110 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition name="menu-slide">
+    <div
+      v-if="show"
+      v-on-clickaway="onClickAway"
+      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
+      :class="{ 'block visible': show }"
+    >
+      <AvailabilityStatus />
+      <WootDropdownMenu>
+        <WootDropdownItem v-if="showChangeAccountOption">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="arrow-swap"
+            @click="$emit('toggleAccounts')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="chat-help"
+            @click="$emit('showSupportChatWindow')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="keyboard"
+            @click="handleKeyboardHelpClick"
+          >
+            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <router-link
+            v-slot="{ href, isActive, navigate }"
+            :to="`/app/accounts/${accountId}/profile/settings`"
+            custom
+          >
+            <a
+              :href="href"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
+              :class="{ 'is-active': isActive }"
+              @click="e => handleProfileSettingClick(e, navigate)"
+            >
+              <fluent-icon icon="person" size="14" class="icon icon--font" />
+              <span class="button__content">
+                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+              </span>
+            </a>
+          </router-link>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
+            @click="openAppearanceOptions"
+          >
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
+          <a
+            href="/super_admin"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            @click="$emit('close')"
+          >
+            <fluent-icon
+              icon="content-settings"
+              size="14"
+              class="icon icon--font"
+            />
+            <span class="button__content">
+              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            </span>
+          </a>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="power"
+            @click="logout"
+          >
+            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+          </woot-button>
+        </WootDropdownItem>
+      </WootDropdownMenu>
+    </div>
+  </transition>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index c42d23448..12edff7c0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -1,43 +1,3 @@
-<template>
-  <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
-  >
-    <div class="flex flex-col items-center">
-      <logo
-        :source="logoSource"
-        :name="installationName"
-        :account-id="accountId"
-        class="m-4 mb-10"
-      />
-      <primary-nav-item
-        v-for="menuItem in menuItems"
-        :key="menuItem.toState"
-        :icon="menuItem.icon"
-        :name="menuItem.label"
-        :to="menuItem.toState"
-        :is-child-menu-active="menuItem.key === activeMenuItem"
-      />
-    </div>
-    <div class="flex flex-col items-center justify-end pb-6">
-      <primary-nav-item
-        v-if="!isACustomBrandedInstance"
-        icon="book-open-globe"
-        name="DOCS"
-        :open-in-new-page="true"
-        :to="helpDocsURL"
-      />
-      <notification-bell @open-notification-panel="openNotificationPanel" />
-      <agent-details @toggle-menu="toggleOptions" />
-      <options-menu
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="$emit('key-shortcut-modal')"
-        @close="toggleOptions"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import Logo from './Logo.vue';
 import PrimaryNavItem from './PrimaryNavItem.vue';
@@ -94,15 +54,56 @@ export default {
       this.showOptionsMenu = !this.showOptionsMenu;
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
     openNotificationPanel() {
       this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
+  >
+    <div class="flex flex-col items-center">
+      <Logo
+        :source="logoSource"
+        :name="installationName"
+        :account-id="accountId"
+        class="m-4 mb-10"
+      />
+      <PrimaryNavItem
+        v-for="menuItem in menuItems"
+        :key="menuItem.toState"
+        :icon="menuItem.icon"
+        :name="menuItem.label"
+        :to="menuItem.toState"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
+      />
+    </div>
+    <div class="flex flex-col items-center justify-end pb-6">
+      <PrimaryNavItem
+        v-if="!isACustomBrandedInstance"
+        icon="book-open-globe"
+        name="DOCS"
+        open-in-new-page
+        :to="helpDocsURL"
+      />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
+      <OptionsMenu
+        :show="showOptionsMenu"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @close="toggleOptions"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index f23d62347..8951f946c 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -1,33 +1,3 @@
-<template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
-    <a
-      v-tooltip.right="$t(`SIDEBAR.${name}`)"
-      :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isActive || isChildMenuActive,
-      }"
-      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
-      :target="openInNewPage ? '_blank' : undefined"
-      @click="navigate"
-    >
-      <fluent-icon
-        :icon="icon"
-        :class="{
-          'text-woot-500': isActive || isChildMenuActive,
-        }"
-      />
-      <span class="sr-only">{{ name }}</span>
-      <span
-        v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
-      >
-        {{ count }}
-      </span>
-    </a>
-  </router-link>
-</template>
 <script>
 export default {
   props: {
@@ -58,3 +28,34 @@ export default {
   },
 };
 </script>
+
+<template>
+  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+    <a
+      v-tooltip.right="$t(`SIDEBAR.${name}`)"
+      :href="href"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isActive || isChildMenuActive,
+      }"
+      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
+      :target="openInNewPage ? '_blank' : undefined"
+      @click="navigate"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isActive || isChildMenuActive,
+        }"
+      />
+      <span class="sr-only">{{ name }}</span>
+      <span
+        v-if="count"
+        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+      >
+        {{ count }}
+      </span>
+    </a>
+  </router-link>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index b4cd3ca90..6de03af53 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
-  >
-    <account-context @toggle-accounts="toggleAccountModal" />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="pt-2 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
-      />
-    </transition-group>
-  </div>
-</template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
@@ -248,10 +223,10 @@ export default {
   },
   methods: {
     showAddLabelPopup() {
-      this.$emit('add-label');
+      this.$emit('addLabel');
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     showNewLink(featureFlag) {
       return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
@@ -259,3 +234,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="hasSecondaryMenu"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
+  >
+    <AccountContext @toggleAccounts="toggleAccountModal" />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 mb-0 ml-0 list-none"
+    >
+      <SecondaryNavItem
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <SecondaryNavItem
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @addLabel="showAddLabelPopup"
+      />
+    </transition-group>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 24ad62353..f8f75ffe7 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -1,3 +1,55 @@
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelColor: {
+      type: String,
+      default: '',
+    },
+    shouldTruncate: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
+    showChildCount: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    showIcon() {
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
+    },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
+    menuTitle() {
+      return this.shouldTruncate ? this.label : '';
+    },
+  },
+};
+</script>
+
 <template>
   <router-link
     v-slot="{ href, isActive, navigate }"
@@ -78,54 +130,3 @@
     </li>
   </router-link>
 </template>
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelColor: {
-      type: String,
-      default: '',
-    },
-    shouldTruncate: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    warningIcon: {
-      type: String,
-      default: '',
-    },
-    showChildCount: {
-      type: Boolean,
-      default: false,
-    },
-    childItemCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    showIcon() {
-      return {
-        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
-      };
-    },
-    isCountZero() {
-      return this.childItemCount === 0;
-    },
-    menuTitle() {
-      return this.shouldTruncate ? this.label : '';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index bc3b03646..be013c069 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 b2ed04c5d..5d49bc786 100644
--- a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
+++ b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="announcement-popup">
-    <span v-if="popupMessage" class="popup-content">
-      {{ popupMessage }}
-      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
-        {{ routeText }}
-      </span>
-    </span>
-    <div v-if="hasCloseButton" class="popup-close">
-      <woot-button
-        v-if="hasCloseButton"
-        color-scheme="primary"
-        variant="link"
-        size="small"
-        @click="onClickClose"
-      >
-        {{ closeButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -50,6 +29,28 @@ export default {
 };
 </script>
 
+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 .announcement-popup {
   max-width: 15rem;
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 3473111ae..a4372149d 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -1,45 +1,3 @@
-<template>
-  <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
-    :class="bannerClasses"
-  >
-    <span class="banner-message">
-      {{ bannerMessage }}
-      <a
-        v-if="hrefLink"
-        :href="hrefLink"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        {{ hrefLinkText }}
-      </a>
-    </span>
-    <div class="actions">
-      <woot-button
-        v-if="hasActionButton"
-        size="tiny"
-        :icon="actionButtonIcon"
-        :variant="actionButtonVariant"
-        color-scheme="primary"
-        class-names="banner-action__button"
-        @click="onClick"
-      >
-        {{ actionButtonLabel }}
-      </woot-button>
-      <woot-button
-        v-if="hasCloseButton"
-        size="tiny"
-        :color-scheme="colorScheme"
-        icon="dismiss-circle"
-        class-names="banner-action__button"
-        @click="onClickClose"
-      >
-        {{ $t('GENERAL_SETTINGS.DISMISS') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -101,6 +59,48 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
+    :class="bannerClasses"
+  >
+    <span class="banner-message">
+      {{ bannerMessage }}
+      <a
+        v-if="hrefLink"
+        :href="hrefLink"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        {{ hrefLinkText }}
+      </a>
+    </span>
+    <div class="actions">
+      <woot-button
+        v-if="hasActionButton"
+        size="tiny"
+        :icon="actionButtonIcon"
+        :variant="actionButtonVariant"
+        color-scheme="primary"
+        class-names="banner-action__button"
+        @click="onClick"
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
+        v-if="hasCloseButton"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
+        @click="onClickClose"
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .banner {
   &.primary {
diff --git a/app/javascript/dashboard/components/ui/ContextMenu.vue b/app/javascript/dashboard/components/ui/ContextMenu.vue
index 72722c0c4..acf9ab23b 100644
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -40,3 +30,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="fixed outline-none z-[9999] cursor-pointer"
+    :style="style"
+    tabindex="0"
+    @blur="$emit('close')"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
index 9b84d6548..20d78db3b 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -31,6 +31,7 @@ import CalendarMonth from './components/CalendarMonth.vue';
 import CalendarWeek from './components/CalendarWeek.vue';
 import CalendarFooter from './components/CalendarFooter.vue';
 
+const emit = defineEmits(['dateRangeChanged']);
 const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
 const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
 const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
@@ -54,8 +55,6 @@ const hoveredEndDate = ref(null);
 const manualStartDate = ref(selectedStartDate.value);
 const manualEndDate = ref(selectedEndDate.value);
 
-const emit = defineEmits(['change']);
-
 // Watcher will set the start and end dates based on the selected range
 watch(selectedRange, newRange => {
   if (newRange !== CUSTOM_RANGE) {
@@ -223,7 +222,7 @@ const emitDateRange = () => {
     >
       <CalendarDateRange
         :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="setDateRange"
       />
       <div
         class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -265,15 +264,15 @@ const emitDateRange = () => {
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                 />
                 <CalendarMonth
                   v-else-if="calendarViews[calendar] === MONTH"
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev', YEAR)"
                   @next="moveCalendar(calendar, 'next', YEAR)"
                 />
@@ -287,9 +286,9 @@ const emitDateRange = () => {
                   :selected-end-date="selectedEndDate"
                   :selecting-end-date="selectingEndDate"
                   :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
index 447a83bf3..3efce5541 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
@@ -19,7 +19,7 @@ defineProps({
     default: '',
   },
 });
-const emit = defineEmits(['prev', 'next', 'set-view']);
+const emit = defineEmits(['prev', 'next', 'setView']);
 
 const { YEAR } = CALENDAR_PERIODS;
 
@@ -32,7 +32,7 @@ const onClickNext = type => {
 };
 
 const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
index 38d4dd76f..b23f95d79 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -8,10 +8,10 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['set-range']);
+const emit = defineEmits(['setRange']);
 
 const setDateRange = range => {
-  emit('set-range', range);
+  emit('setRange', range);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
index 828044e1c..199affe45 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'apply']);
+const emit = defineEmits(['clear', 'clear']);
 
 const onClickClear = () => {
   emit('clear');
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
index ee68e7341..8347b7006 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -18,6 +18,7 @@ const props = defineProps({
   endCurrentDate: Date,
 });
 
+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH, YEAR } = CALENDAR_PERIODS;
 
@@ -33,10 +34,8 @@ const activeMonthIndex = computed(() => {
   return getMonth(date);
 });
 
-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
-
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const onClickPrev = () => {
@@ -48,7 +47,7 @@ const onClickNext = () => {
 };
 
 const selectMonth = index => {
-  emit('select-month', index);
+  emit('selectMonth', index);
 };
 </script>
 
@@ -63,7 +62,7 @@ const selectMonth = index => {
           MONTH
         )
       "
-      @set-view="setViewMode"
+      @setView="setViewMode"
       @prev="onClickPrev"
       @next="onClickNext"
     />
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
index c448e3eb1..d4962d21a 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -31,22 +31,22 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
+  'updateHoveredEndDate',
+  'selectDate',
   'prev',
   'next',
-  'set-view',
+  'setView',
 ]);
 
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH } = CALENDAR_PERIODS;
 
 const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
+  emit('updateHoveredEndDate', day);
 };
 
 const emitSelectDate = day => {
-  emit('select-date', day);
+  emit('selectDate', day);
 };
 const onClickPrev = () => {
   emit('prev');
@@ -57,7 +57,7 @@ const onClickNext = () => {
 };
 
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const weeks = calendarType => {
@@ -139,7 +139,7 @@ const dayClasses = day => ({
       "
       @prev="onClickPrev"
       @next="onClickNext"
-      @set-view="setViewMode"
+      @setView="setViewMode"
     />
     <CalendarWeekLabel />
     <div
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
index 1f5e7224f..725925f07 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -14,6 +14,8 @@ const props = defineProps({
   endCurrentDate: Date,
 });
 
+const emit = defineEmits(['selectYear']);
+
 const { START_CALENDAR } = CALENDAR_TYPES;
 
 const calculateStartYear = date => {
@@ -52,10 +54,8 @@ const onClickNext = () => {
   startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };
 
-const emit = defineEmits(['select-year']);
-
 const selectYear = year => {
-  emit('select-year', year);
+  emit('selectYear', year);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
index c5ae54b6f..9a1561eb5 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -12,6 +12,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['open']);
+
 const formatDateRange = computed(() => {
   const startDate = props.selectedStartDate;
   const endDate = props.selectedEndDate;
@@ -39,8 +41,6 @@ const activeDateRange = computed(
   () => dateRanges.find(range => range.value === props.selectedRange).label
 );
 
-const emit = defineEmits(['open']);
-
 const openDatePicker = () => {
   emit('open');
 };
diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index 08ce0e0c1..7787ab83d 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      :range="true"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 export default {
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      range
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DateTimePicker.vue b/app/javascript/dashboard/components/ui/DateTimePicker.vue
index 979136695..439bc873e 100644
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="date-picker">
-    <date-picker
-      type="datetime"
-      :confirm="true"
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      :disabled-date="disableBeforeToday"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
 <script>
 import addDays from 'date-fns/addDays';
 import DatePicker from 'vue2-datepicker';
@@ -45,3 +29,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      type="datetime"
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
index 3bbfb415c..fecfd5b6f 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
@@ -14,6 +14,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <button
     class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
index ccf9b2b1e..9c8e7155a 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index 0c6942e1b..ce6f8868c 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 f9a90297d..af7a197a3 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 ccf9b2b1e..9c8e7155a 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
index c153a82a7..53611208c 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
@@ -14,6 +14,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
diff --git a/app/javascript/dashboard/components/ui/HelperTextPopup.vue b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
index fb14692f6..eed0e2755 100644
--- a/app/javascript/dashboard/components/ui/HelperTextPopup.vue
+++ b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div class="relative group w-[inherit] whitespace-normal z-20">
     <fluent-icon
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index e2d1322ef..4bdac728d 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,32 +1,3 @@
-<template>
-  <div
-    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
-    :class="labelClass"
-    :style="labelStyle"
-    :title="description"
-  >
-    <span v-if="icon" class="label-action--button">
-      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
-    </span>
-    <span
-      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
-      :style="{ background: color }"
-      class="label-color-dot flex-shrink-0"
-    />
-    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
-      {{ title }}
-    </span>
-    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <button
-      v-if="showClose"
-      class="label-close--button p-0"
-      :style="{ color: textColor }"
-      @click="onClick"
-    >
-      <fluent-icon icon="dismiss" size="12" class="close--icon" />
-    </button>
-  </div>
-</template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';
 
@@ -109,6 +80,36 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
+    :class="labelClass"
+    :style="labelStyle"
+    :title="description"
+  >
+    <span v-if="icon" class="label-action--button">
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
+    </span>
+    <span
+      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
+      :style="{ background: color }"
+      class="label-color-dot flex-shrink-0"
+    />
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <button
+      v-if="showClose"
+      class="label-close--button p-0"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .label {
   @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index ec0dd5539..069ea37a9 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
@@ -13,7 +36,7 @@
           active,
       }"
     >
-      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
       <fluent-icon
         v-if="active"
         icon="checkmark-circle"
@@ -41,30 +64,3 @@
     <slot v-else />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    heading: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: 'Active',
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index 3aa8f15a5..c86582fc6 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,16 +1,3 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button p-0"
-    :class="{ active: value, small: size === 'small' }"
-    role="switch"
-    :aria-checked="value.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active: value }" />
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -24,6 +11,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    type="button"
+    class="toggle-button p-0"
+    :class="{ active: value, small: size === 'small' }"
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span aria-hidden="true" :class="{ active: value }" />
+  </button>
+</template>
+
 <style lang="scss" scoped>
 .toggle-button {
   @apply bg-slate-200 dark:bg-slate-600;
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 340aa4f90..d6356aa9f 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,20 +1,3 @@
-<template>
-  <li
-    :class="{
-      'tabs-title': true,
-      'is-active': active,
-    }"
-  >
-    <a @click="onTabClick">
-      {{ name }}
-      <div v-if="showBadge" class="badge min-w-[20px]">
-        <span>
-          {{ getItemCount }}
-        </span>
-      </div>
-    </a>
-  </li>
-</template>
 <script>
 export default {
   name: 'WootTabsItem',
@@ -61,3 +44,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li
+    class="tabs-title"
+    :class="{
+      'is-active': active,
+    }"
+  >
+    <a @click="onTabClick">
+      {{ name }}
+      <div v-if="showBadge" class="badge min-w-[20px]">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 787c53e1e..671f5ed09 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 9c887c853..4b45b6ef5 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -1,39 +1,3 @@
-<template>
-  <transition-group
-    name="wizard-items"
-    tag="div"
-    class="wizard-box"
-    :class="classObject"
-  >
-    <div
-      v-for="item in items"
-      :key="item.route"
-      class="item"
-      :class="{ active: isActive(item), over: isOver(item) }"
-    >
-      <div class="flex items-center">
-        <h3
-          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
-        >
-          {{ item.title }}
-        </h3>
-        <span
-          v-if="isOver(item)"
-          class="text-green-500 dark:text-green-500 ml-1"
-        >
-          <fluent-icon icon="checkmark" />
-        </span>
-      </div>
-      <span class="step">
-        {{ items.indexOf(item) + 1 }}
-      </span>
-      <p class="text-slate-600 dark:text-slate-300 text-sm m-0 pl-6">
-        {{ item.body }}
-      </p>
-    </div>
-  </transition-group>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -41,7 +5,6 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 export default {
   mixins: [globalConfigMixin],
   props: {
-    isFullwidth: Boolean,
     items: {
       type: Array,
       default: () => [],
@@ -65,6 +28,43 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box"
+    :class="classObject"
+  >
+    <div
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
+    >
+      <div class="flex items-center">
+        <h3
+          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
+        >
+          {{ item.title }}
+        </h3>
+        <span
+          v-if="isOver(item)"
+          class="ml-1 text-green-500 dark:text-green-500"
+        >
+          <fluent-icon icon="checkmark" />
+        </span>
+      </div>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
+        {{ item.body }}
+      </p>
+    </div>
+  </transition-group>
+</template>
+
 <style lang="scss" scoped>
 .wizard-box {
   .item {
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index 462a6fd3c..8b3c789e7 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -1,32 +1,3 @@
-<template>
-  <button
-    class="button"
-    :type="type"
-    :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
-    @click="handleClick"
-  >
-    <spinner
-      v-if="isLoading"
-      size="small"
-      :color-scheme="showDarkSpinner ? 'dark' : ''"
-    />
-    <emoji-or-icon
-      v-else-if="icon || emoji"
-      class="icon"
-      :emoji="emoji"
-      :icon="icon"
-      :icon-size="iconSize"
-    />
-    <span
-      v-if="$slots.default"
-      class="button__content"
-      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
-    >
-      <slot />
-    </span>
-  </button>
-</template>
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
@@ -132,3 +103,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    class="button"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <Spinner
+      v-if="isLoading"
+      size="small"
+      :color-scheme="showDarkSpinner ? 'dark' : ''"
+    />
+    <EmojiOrIcon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+      :icon-size="iconSize"
+    />
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index 34f95a330..6ec852b58 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 155311246..fb57232ad 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="relative">
     <woot-button
@@ -19,15 +29,7 @@
     />
   </div>
 </template>
-<script>
-export default {
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index df30d461d..5435407f0 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -1,44 +1,4 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="headerTitle" />
-    <form
-      class="modal-content flex flex-col w-full"
-      @submit.prevent="applyText"
-    >
-      <div v-if="draftMessage" class="w-full">
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
-          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
-        </h4>
-        <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
-          }}
-        </h4>
-      </div>
-      <div>
-        <AILoader v-if="isGenerating" />
-        <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
-      </div>
-
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
-          }}
-        </woot-button>
-        <woot-button :disabled="!generatedContent">
-          {{
-            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
-          }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AILoader from './AILoader.vue';
 import aiMixin from 'dashboard/mixins/aiMixin';
@@ -62,9 +22,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
     headerTitle() {
       const translationKey = this.aiOption?.toUpperCase();
       return translationKey
@@ -92,13 +49,52 @@ export default {
     },
     applyText() {
       this.recordAnalytics(this.aiOption);
-      this.$emit('apply-text', this.generatedContent);
+      this.$emit('applyText', this.generatedContent);
       this.onClose();
     },
   },
 };
 </script>
 
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="headerTitle" />
+    <form
+      class="flex flex-col w-full modal-content"
+      @submit.prevent="applyText"
+    >
+      <div v-if="draftMessage" class="w-full">
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
+        </h4>
+        <p v-dompurify-html="formatMessage(draftMessage, false)" />
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
+          }}
+        </h4>
+      </div>
+      <div>
+        <AILoader v-if="isGenerating" />
+        <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
+      </div>
+
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
+          }}
+        </woot-button>
+        <woot-button :disabled="!generatedContent">
+          {{
+            $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
+          }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-8 pb-8;
diff --git a/app/javascript/dashboard/components/widgets/AICTAModal.vue b/app/javascript/dashboard/components/widgets/AICTAModal.vue
index b094c42c8..b68da39d8 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 cc2879473..ad6735251 100644
--- a/app/javascript/dashboard/components/widgets/AILoader.vue
+++ b/app/javascript/dashboard/components/widgets/AILoader.vue
@@ -12,8 +12,6 @@
   </div>
 </template>
 
-<script></script>
-
 <style lang="scss" scoped>
 .animation-container {
   position: relative;
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 32af9e499..69d559509 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -1,3 +1,48 @@
+<script setup>
+import { computed } from 'vue';
+import { formatBytes } from 'shared/helpers/FileHelper';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['removeAttachment']);
+
+const nonRecordedAudioAttachments = computed(() => {
+  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
+});
+
+const recordedAudioAttachments = computed(() =>
+  props.attachments.filter(attachment => attachment.isRecordedAudio)
+);
+
+const onRemoveAttachment = itemIndex => {
+  emit(
+    'removeAttachment',
+    nonRecordedAudioAttachments.value
+      .filter((_, index) => index !== itemIndex)
+      .concat(recordedAudioAttachments.value)
+  );
+};
+
+const formatFileSize = file => {
+  const size = file.byte_size || file.size;
+  return formatBytes(size, 0);
+};
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const fileName = file => {
+  return file.filename || file.name;
+};
+</script>
+
 <template>
   <div class="flex overflow-auto max-h-[12.5rem]">
     <div
@@ -37,48 +82,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-import { formatBytes } from 'shared/helpers/FileHelper';
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emits = defineEmits(['remove-attachment']);
-
-const nonRecordedAudioAttachments = computed(() => {
-  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
-});
-
-const recordedAudioAttachments = computed(() =>
-  props.attachments.filter(attachment => attachment.isRecordedAudio)
-);
-
-const onRemoveAttachment = itemIndex => {
-  emits(
-    'remove-attachment',
-    nonRecordedAudioAttachments.value
-      .filter((_, index) => index !== itemIndex)
-      .concat(recordedAudioAttachments.value)
-  );
-};
-
-const formatFileSize = file => {
-  const size = file.byte_size || file.size;
-  return formatBytes(size, 0);
-};
-
-const isTypeImage = file => {
-  const type = file.content_type || file.type;
-  return type.includes('image');
-};
-
-const fileName = file => {
-  return file.filename || file.name;
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index a94667fcd..28810fd4e 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 61eb74f22..1188ad281 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -1,30 +1,3 @@
-<template>
-  <div>
-    <div class="multiselect-wrap--small">
-      <multiselect
-        v-model="selectedTeams"
-        track-by="id"
-        label="name"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        :multiple="true"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        deselect-label=""
-        :max-height="160"
-        :options="teams"
-        :allow-empty="false"
-        @input="updateValue"
-      />
-      <textarea
-        v-model="message"
-        rows="4"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-        @input="updateValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   // The value types are dynamic, hence prop validation removed to work with our action schema
@@ -52,6 +25,33 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="multiselect-wrap--small">
+      <multiselect
+        v-model="selectedTeams"
+        track-by="id"
+        label="name"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
+        multiple
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :max-height="160"
+        :options="teams"
+        :allow-empty="false"
+        @input="updateValue"
+      />
+      <textarea
+        v-model="message"
+        rows="4"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        @input="updateValue"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .multiselect {
   margin: var(--space-smaller) var(--space-zero);
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index e25245dca..8cd1c6b00 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 1fad70eef..2c7ad01c0 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="avatar-container" :style="style" aria-hidden="true">
-    <slot>{{ userInitial }}</slot>
-  </div>
-</template>
-
 <script>
 export default {
   name: 'Avatar',
@@ -38,6 +32,12 @@ export default {
 };
 </script>
 
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 2528aada7..5051b2599 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 fe47f3b96..95bd7d0e1 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -1,11 +1,3 @@
-<template>
-  <channel-selector
-    :class="{ inactive: !isActive }"
-    :title="channel.name"
-    :src="getChannelThumbnail()"
-    @click="onItemClick"
-  />
-</template>
 <script>
 import ChannelSelector from '../ChannelSelector.vue';
 export default {
@@ -59,9 +51,18 @@ export default {
     },
     onItemClick() {
       if (this.isActive) {
-        this.$emit('channel-item-click', this.channel.key);
+        this.$emit('channelItemClick', this.channel.key);
       }
     },
   },
 };
 </script>
+
+<template>
+  <ChannelSelector
+    :class="{ inactive: !isActive }"
+    :title="channel.name"
+    :src="getChannelThumbnail()"
+    @click="onItemClick"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 86e80748d..afcf1e839 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 12b9124cf..732de3ced 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="colorpicker">
-    <div
-      class="colorpicker--selected"
-      :style="`background-color: ${value}`"
-      @click.prevent="toggleColorPicker"
-    />
-    <chrome
-      v-if="isPickerOpen"
-      v-on-clickaway="closeTogglePicker"
-      :disable-alpha="true"
-      :value="value"
-      class="colorpicker--chrome"
-      @input="updateColor"
-    />
-  </div>
-</template>
-
 <script>
 import { Chrome } from 'vue-color';
 
@@ -50,6 +32,24 @@ export default {
 };
 </script>
 
+<template>
+  <div class="colorpicker">
+    <div
+      class="colorpicker--selected"
+      :style="`background-color: ${value}`"
+      @click.prevent="toggleColorPicker"
+    />
+    <Chrome
+      v-if="isPickerOpen"
+      v-on-clickaway="closeTogglePicker"
+      disable-alpha
+      :value="value"
+      class="colorpicker--chrome"
+      @input="updateColor"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables';
 @import '~dashboard/assets/scss/mixins';
diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index a13c3510a..824ff58ca 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -1,25 +1,3 @@
-<template>
-  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
-    <div
-      v-for="(configItem, index) in config"
-      :key="index"
-      class="dashboard-app--list"
-    >
-      <loading-state
-        v-if="iframeLoading"
-        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
-        class="dashboard-app_loading-container"
-      />
-      <iframe
-        v-if="configItem.type === 'frame' && configItem.url"
-        :id="getFrameId(index)"
-        :src="configItem.url"
-        @load="() => onIframeLoad(index)"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 export default {
@@ -102,6 +80,28 @@ export default {
 };
 </script>
 
+<template>
+  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+    <div
+      v-for="(configItem, index) in config"
+      :key="index"
+      class="dashboard-app--list"
+    >
+      <LoadingState
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
+      <iframe
+        v-if="configItem.type === 'frame' && configItem.url"
+        :id="getFrameId(index)"
+        :src="configItem.url"
+        @load="() => onIframeLoad(index)"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .dashboard-app--container,
 .dashboard-app--list,
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index fe7b03942..6e2101917 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  props: {
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="empty-state py-16 px-1 ml-0 mr-0">
     <h3
@@ -15,12 +24,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/FeatureToggle.vue b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
index ec7759a9c..114922042 100644
--- a/app/javascript/dashboard/components/widgets/FeatureToggle.vue
+++ b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
@@ -1,8 +1,3 @@
-<template>
-  <div v-if="isFeatureEnabled">
-    <slot />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -23,3 +18,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="isFeatureEnabled">
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index bbccf77bd..c0369f5eb 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -1,147 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <div
-      class="rounded-md p-2 border border-solid"
-      :class="getInputErrorClass(v.values.$dirty, v.values.$error)"
-    >
-      <div class="flex">
-        <select
-          v-if="groupedFilters"
-          v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-          @change="resetFilter()"
-        >
-          <optgroup
-            v-for="(group, i) in filterGroups"
-            :key="i"
-            :label="group.name"
-          >
-            <option
-              v-for="attribute in group.attributes"
-              :key="attribute.key"
-              :value="attribute.key"
-            >
-              {{ attribute.name }}
-            </option>
-          </optgroup>
-        </select>
-        <select
-          v-else
-          v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-          @change="resetFilter()"
-        >
-          <option
-            v-for="attribute in filterAttributes"
-            :key="attribute.key"
-            :value="attribute.key"
-            :disabled="attribute.disabled"
-          >
-            {{ attribute.name }}
-          </option>
-        </select>
-
-        <select
-          v-model="filterOperator"
-          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-        >
-          <option
-            v-for="(operator, o) in operators"
-            :key="o"
-            :value="operator.value"
-          >
-            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-          </option>
-        </select>
-
-        <div v-if="showUserInput" class="filter__answer--wrap mr-1 flex-grow">
-          <div
-            v-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="'Select'"
-              :multiple="true"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-            />
-          </div>
-          <div
-            v-else-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="'Select'"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            />
-          </div>
-          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
-            <input
-              v-model="values"
-              type="date"
-              :editable="false"
-              class="mb-0 datepicker"
-            />
-          </div>
-          <input
-            v-else
-            v-model="values"
-            type="text"
-            class="mb-0"
-            placeholder="Enter value"
-          />
-        </div>
-        <woot-button
-          icon="dismiss"
-          variant="clear"
-          color-scheme="secondary"
-          @click="removeFilter"
-        />
-      </div>
-      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
-        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-      </p>
-    </div>
-
-    <div
-      v-if="showQueryOperator"
-      class="flex items-center justify-center relative my-2.5 mx-0"
-    >
-      <hr
-        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
-      />
-      <select
-        v-model="query_operator"
-        class="bg-white dark:bg-slate-900 mb-0 w-auto relative text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-      >
-        <option value="and">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-        </option>
-        <option value="or">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -157,10 +13,6 @@ export default {
       type: String,
       default: 'plain_text',
     },
-    dataType: {
-      type: String,
-      default: 'plain_text',
-    },
     operators: {
       type: Array,
       default: () => [],
@@ -173,10 +25,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    v: {
-      type: Object,
-      default: () => null,
-    },
     showUserInput: {
       type: Boolean,
       default: true,
@@ -193,6 +41,10 @@ export default {
       type: String,
       default: '',
     },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     attributeKey: {
@@ -271,14 +123,159 @@ export default {
     resetFilter() {
       this.$emit('resetFilter');
     },
-    getInputErrorClass(isDirty, hasError) {
-      return isDirty && hasError
+    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="p-2 border border-solid rounded-md"
+      :class="getInputErrorClass(errorMessage)"
+    >
+      <div class="flex">
+        <select
+          v-if="groupedFilters"
+          v-model="attributeKey"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          @change="resetFilter()"
+        >
+          <optgroup
+            v-for="(group, i) in filterGroups"
+            :key="i"
+            :label="group.name"
+          >
+            <option
+              v-for="attribute in group.attributes"
+              :key="attribute.key"
+              :value="attribute.key"
+            >
+              {{ attribute.name }}
+            </option>
+          </optgroup>
+        </select>
+        <select
+          v-else
+          v-model="attributeKey"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          @change="resetFilter()"
+        >
+          <option
+            v-for="attribute in filterAttributes"
+            :key="attribute.key"
+            :value="attribute.key"
+            :disabled="attribute.disabled"
+          >
+            {{ attribute.name }}
+          </option>
+        </select>
+
+        <select
+          v-model="filterOperator"
+          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+        >
+          <option
+            v-for="(operator, o) in operators"
+            :key="o"
+            :value="operator.value"
+          >
+            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
+          </option>
+        </select>
+
+        <div v-if="showUserInput" class="flex-grow mr-1 filter__answer--wrap">
+          <div
+            v-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              placeholder="Select"
+              multiple
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'search_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              placeholder="Select"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
+            <input
+              v-model="values"
+              type="date"
+              :editable="false"
+              class="mb-0 datepicker"
+            />
+          </div>
+          <input
+            v-else
+            v-model="values"
+            type="text"
+            class="mb-0"
+            :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
+          />
+        </div>
+        <woot-button
+          icon="dismiss"
+          variant="clear"
+          color-scheme="secondary"
+          @click="removeFilter"
+        />
+      </div>
+      <p v-if="errorMessage" class="filter-error">
+        {{ errorMessage }}
+      </p>
+    </div>
+
+    <div
+      v-if="showQueryOperator"
+      class="flex items-center justify-center relative my-2.5 mx-0"
+    >
+      <hr
+        class="absolute w-full border-b border-solid border-slate-75 dark:border-slate-800"
+      />
+      <select
+        v-model="query_operator"
+        class="relative w-auto mb-0 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+      >
+        <option value="and">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
+        </option>
+        <option value="or">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .filter__answer--wrap {
   input {
diff --git a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
index 6d5efdf90..e2a9a9d46 100644
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
+++ b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
-    <span
-      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
-    >
-      <fluent-icon
-        :icon="computedInboxIcon"
-        size="14"
-        class="text-slate-800 dark:text-slate-200"
-      />
-    </span>
-    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
-      <h5 class="option__title">
-        {{ name }}
-      </h5>
-      <p
-        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
-        :title="inboxIdentifier"
-      >
-        {{ inboxIdentifier || computedInboxType }}
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   getInboxClassByType,
@@ -66,6 +41,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
+    <span
+      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
+    >
+      <fluent-icon
+        :icon="computedInboxIcon"
+        size="14"
+        class="text-slate-800 dark:text-slate-200"
+      />
+    </span>
+    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
+      <h5 class="option__title">
+        {{ name }}
+      </h5>
+      <p
+        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
+        :title="inboxIdentifier"
+      >
+        {{ inboxIdentifier || computedInboxType }}
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option__body {
   @apply inline-block text-slate-600 dark:text-slate-200 leading-[1.3] min-w-0 m-0;
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index 8b604b323..9a43d5f45 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
-  >
-    <fluent-icon
-      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
-      :icon="computedInboxClass"
-      size="12"
-    />
-    {{ inbox.name }}
-  </div>
-</template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
 
@@ -29,3 +17,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
+    />
+    {{ inbox.name }}
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 97da49ac7..032401561 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 76aaef3eb..dfba6b43e 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,3 +1,11 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="flex items-center justify-center p-8">
     <h6
@@ -10,10 +18,3 @@
     </h6>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    message: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 9f99d5ba2..c2e6c48c3 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
@@ -14,18 +29,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/ShowMore.vue b/app/javascript/dashboard/components/widgets/ShowMore.vue
index 980889122..c17c32e2a 100644
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -1,15 +1,3 @@
-<template>
-  <span>
-    {{ textToBeDisplayed }}
-    <button
-      v-if="text.length > limit"
-      class="show-more--button"
-      @click="toggleShowMore"
-    >
-      {{ buttonLabel }}
-    </button>
-  </span>
-</template>
 <script>
 export default {
   props: {
@@ -47,6 +35,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span>
+    {{ textToBeDisplayed }}
+    <button
+      v-if="text.length > limit"
+      class="show-more--button"
+      @click="toggleShowMore"
+    >
+      {{ buttonLabel }}
+    </button>
+  </span>
+</template>
+
 <style scoped>
 .show-more--button {
   color: var(--w-500);
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index b3a671771..7809cfdb2 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -1,24 +1,3 @@
-<template>
-  <footer
-    v-if="isFooterVisible"
-    class="h-12 flex items-center justify-between px-6"
-  >
-    <table-footer-results
-      :first-index="firstIndex"
-      :last-index="lastIndex"
-      :total-count="totalCount"
-    />
-    <table-footer-pagination
-      v-if="totalCount"
-      :current-page="currentPage"
-      :total-pages="totalPages"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      @page-change="$emit('page-change', $event)"
-    />
-  </footer>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import TableFooterResults from './TableFooterResults.vue';
@@ -46,3 +25,24 @@ const isFooterVisible = computed(
   () => props.totalCount && !(firstIndex.value > props.totalCount)
 );
 </script>
+
+<template>
+  <footer
+    v-if="isFooterVisible"
+    class="flex items-center justify-between h-12 px-6"
+  >
+    <TableFooterResults
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <TableFooterPagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @pageChange="$emit('pageChange', $event)"
+    />
+  </footer>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
index 38ebdc69c..6c9a38995 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -1,5 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['pageChange']);
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
+function onPageChange(newPage) {
+  emit('pageChange', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
+
 <template>
-  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+  <div class="flex items-center h-8 rounded-lg bg-slate-50 dark:bg-slate-800">
     <woot-button
       size="small"
       variant="smooth"
@@ -16,7 +72,7 @@
         :class="hasFirstPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
@@ -35,7 +91,7 @@
     </woot-button>
 
     <div
-      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+      class="flex items-center gap-3 px-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
     >
       <span class="text-sm text-slate-800 dark:text-slate-75">
         {{ currentPage }}
@@ -61,7 +117,7 @@
         :class="hasNextPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
@@ -80,64 +136,3 @@
     </woot-button>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-
-// Props
-const props = defineProps({
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalCount: {
-    type: Number,
-    default: 0,
-  },
-  totalPages: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const hasLastPage = computed(
-  () => props.currentPage === props.totalPages || props.totalPages === 1
-);
-const hasFirstPage = computed(() => props.currentPage === 1);
-const hasNextPage = computed(() => props.currentPage === props.totalPages);
-const hasPrevPage = computed(() => props.currentPage === 1);
-
-const emit = defineEmits(['page-change']);
-
-function buttonClass(hasPage) {
-  if (hasPage) {
-    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
-  }
-  return 'dark:hover:!bg-slate-700/50';
-}
-
-function onPageChange(newPage) {
-  emit('page-change', newPage);
-}
-
-const onNextPage = () => {
-  if (!onNextPage.value) {
-    onPageChange(props.currentPage + 1);
-  }
-};
-const onPrevPage = () => {
-  if (!hasPrevPage.value) {
-    onPageChange(props.currentPage - 1);
-  }
-};
-const onFirstPage = () => {
-  if (!hasFirstPage.value) {
-    onPageChange(1);
-  }
-};
-const onLastPage = () => {
-  if (!hasLastPage.value) {
-    onPageChange(props.totalPages);
-  }
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterResults.vue b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
index 305933059..23a3c3a0d 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterResults.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
@@ -1,15 +1,3 @@
-<template>
-  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
-    {{
-      $t('GENERAL.SHOWING_RESULTS', {
-        firstIndex,
-        lastIndex,
-        totalCount,
-      })
-    }}
-  </span>
-</template>
-
 <script setup>
 defineProps({
   firstIndex: {
@@ -26,3 +14,15 @@ defineProps({
   },
 });
 </script>
+
+<template>
+  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
index 8e2cd6326..ce3cb21ac 100644
--- a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -8,7 +8,6 @@ const props = defineProps({
   label: {
     type: String,
     required: true,
-    default: '',
   },
 });
 
@@ -27,6 +26,7 @@ const spanClass = computed(() => {
   return 'col-span-1';
 });
 </script>
+
 <template>
   <div
     class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 6c864e95b..7b222aa7e 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -1,40 +1,3 @@
-<template>
-  <div
-    :class="thumbnailBoxClass"
-    :style="{ height: size, width: size }"
-    :title="title"
-  >
-    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
-    <slot>
-      <img
-        v-show="shouldShowImage"
-        :src="src"
-        draggable="false"
-        :class="thumbnailClass"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <Avatar
-        v-show="!shouldShowImage"
-        :username="userNameWithoutEmoji"
-        :class="thumbnailClass"
-        :size="avatarSize"
-      />
-    </slot>
-    <img
-      v-if="badgeSrc"
-      class="source-badge"
-      :style="badgeStyle"
-      :src="`/integrations/channels/badges/${badgeSrc}.png`"
-      alt="Badge"
-    />
-    <div
-      v-if="showStatusIndicator"
-      :class="`source-badge user-online-status user-online-status--${status}`"
-      :style="statusStyle"
-    />
-  </div>
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -168,6 +131,44 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
+    <slot>
+      <img
+        v-show="shouldShowImage"
+        :src="src"
+        draggable="false"
+        :class="thumbnailClass"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <Avatar
+        v-show="!shouldShowImage"
+        :username="userNameWithoutEmoji"
+        :class="thumbnailClass"
+        :size="avatarSize"
+      />
+    </slot>
+    <img
+      v-if="badgeSrc"
+      class="source-badge"
+      :style="badgeStyle"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
+    />
+    <div
+      v-if="showStatusIndicator"
+      :class="`source-badge user-online-status user-online-status--${status}`"
+      :style="statusStyle"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .user-thumbnail-box {
   flex: 0 0 auto;
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index a9c521bbb..5f35f62fa 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="overlapping-thumbnails">
-    <thumbnail
-      v-for="user in usersList"
-      :key="user.id"
-      v-tooltip="user.name"
-      :title="user.name"
-      :src="user.thumbnail"
-      :username="user.name"
-      :has-border="true"
-      :size="size"
-      :class="`overlapping-thumbnail gap-${gap}`"
-    />
-    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
-      {{ moreThumbnailsText }}
-    </span>
-  </div>
-</template>
 <script>
 import Thumbnail from './Thumbnail.vue';
 
@@ -52,6 +34,25 @@ export default {
 };
 </script>
 
+<template>
+  <div class="overlapping-thumbnails">
+    <Thumbnail
+      v-for="user in usersList"
+      :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
+      :src="user.thumbnail"
+      :username="user.name"
+      has-border
+      :size="size"
+      :class="`overlapping-thumbnail gap-${gap}`"
+    />
+    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
+      {{ moreThumbnailsText }}
+    </span>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .overlapping-thumbnails {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 07e3e5ed6..d54e7ea4f 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="flex items-center gap-1.5 text-left">
-    <thumbnail
-      :src="user.thumbnail"
-      :size="size"
-      :username="user.name"
-      :status="user.availability_status"
-    />
-    <h6
-      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
-      :class="textClass"
-    >
-      {{ user.name }}
-    </h6>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -37,3 +21,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center gap-1.5 text-left">
+    <Thumbnail
+      :src="user.thumbnail"
+      :size="size"
+      :username="user.name"
+      :status="user.availability_status"
+    />
+    <h6
+      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+      :class="textClass"
+    >
+      {{ user.name }}
+    </h6>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/VideoCallButton.vue b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
index 12050c811..4f6ebf81d 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 aa566fd4d..0e04c3c5d 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="audio-wave-wrapper">
-    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
-  </div>
-</template>
-
 <script>
 import getUuid from 'widget/helpers/uuid';
 import 'video.js/dist/video-js.css';
@@ -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 52b73c405..8fe929354 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -1,49 +1,3 @@
-<template>
-  <div ref="editorRoot" class="relative editor-root">
-    <tag-agents
-      v-if="showUserMentions && isPrivate"
-      :search-key="mentionSearchKey"
-      @click="insertMentionNode"
-    />
-    <canned-response
-      v-if="shouldShowCannedResponses"
-      :search-key="cannedSearchTerm"
-      @click="insertCannedResponse"
-    />
-    <variable-list
-      v-if="shouldShowVariables"
-      :search-key="variableSearchTerm"
-      @click="insertVariable"
-    />
-    <input
-      ref="imageUpload"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onFileChange"
-    />
-    <div ref="editor" />
-    <div
-      v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
-      :style="{
-        top: toolbarPosition.top,
-        left: toolbarPosition.left,
-      }"
-    >
-      <button
-        v-for="size in sizes"
-        :key="size.name"
-        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
-        @click="setURLWithQueryAndImageSize(size)"
-      >
-        {{ size.name }}
-      </button>
-    </div>
-    <slot name="footer" />
-  </div>
-</template>
-
 <script>
 import {
   messageSchema,
@@ -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 df676e35c..ab4be9342 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -1,18 +1,3 @@
-<template>
-  <div>
-    <div class="editor-root editor--article">
-      <input
-        ref="imageUploadInput"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        hidden
-        @change="onFileChange"
-      />
-      <div ref="editor" />
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   fullSchema,
@@ -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 d0b31ec8b..e4ab0b41d 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 d916116ac..280b3ca42 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 e6d826d48..97461667a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -1,8 +1,3 @@
-<template>
-  <div
-    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
-  />
-</template>
 <script>
 export default {
   props: {
@@ -10,6 +5,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
+  />
+</template>
+
 <style lang="scss" scoped>
 .status-badge {
   &__online {
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
index c744eaa06..1600a9cff 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -1,15 +1,3 @@
-<template>
-  <mention-box
-    v-if="items.length"
-    :items="items"
-    @mention-select="handleMentionClick"
-  >
-    <template slot-scope="{ item }">
-      <strong>{{ item.label }}</strong> - {{ item.description }}
-    </template>
-  </mention-box>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import MentionBox from '../mentions/MentionBox.vue';
@@ -52,3 +40,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <MentionBox
+    v-if="items.length"
+    :items="items"
+    @mentionSelect="handleMentionClick"
+  >
+    <template slot-scope="{ item }">
+      <strong>{{ item.label }}</strong> - {{ item.description }}
+    </template>
+  </MentionBox>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index c0752a478..b0be89160 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 fbf99a631..9a822ccff 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 2ad77452d..9f0b6d1d7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,67 +1,3 @@
-<template>
-  <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
-  >
-    <conversation-header
-      v-if="currentChat.id"
-      :chat="currentChat"
-      :is-inbox-view="isInboxView"
-      :is-contact-panel-open="isContactPanelOpen"
-      :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
-    <woot-tabs
-      v-if="dashboardApps.length && currentChat.id"
-      :index="activeIndex"
-      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
-      @change="onDashboardAppTabChange"
-    >
-      <woot-tabs-item
-        v-for="tab in dashboardAppTabs"
-        :key="tab.key"
-        :name="tab.name"
-        :show-badge="false"
-      />
-    </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
-    >
-      <messages-view
-        v-if="currentChat.id"
-        :inbox-id="inboxId"
-        :is-inbox-view="isInboxView"
-        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
-      />
-      <empty-state
-        v-if="!currentChat.id && !isInboxView"
-        :is-on-expanded-layout="isOnExpandedLayout"
-      />
-      <div
-        v-show="showContactPanel"
-        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
-      >
-        <contact-panel
-          v-if="showContactPanel"
-          :conversation-id="currentChat.id"
-          :inbox-id="currentChat.inbox_id"
-          :on-toggle="onToggleContactPanel"
-        />
-      </div>
-    </div>
-    <dashboard-app-frame
-      v-for="(dashboardApp, index) in dashboardApps"
-      v-show="activeIndex - 1 === index"
-      :key="currentChat.id + '-' + dashboardApp.id"
-      :is-visible="activeIndex - 1 === index"
-      :config="dashboardApps[index].content"
-      :position="index"
-      :current-chat="currentChat"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
@@ -145,7 +81,7 @@ export default {
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
@@ -153,6 +89,72 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    :class="{ 'with-border-right': !isOnExpandedLayout }"
+  >
+    <ConversationHeader
+      v-if="currentChat.id"
+      :chat="currentChat"
+      :is-inbox-view="isInboxView"
+      :is-contact-panel-open="isContactPanelOpen"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
+      @contactPanelToggle="onToggleContactPanel"
+    />
+    <woot-tabs
+      v-if="dashboardApps.length && currentChat.id"
+      :index="activeIndex"
+      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      @change="onDashboardAppTabChange"
+    >
+      <woot-tabs-item
+        v-for="tab in dashboardAppTabs"
+        :key="tab.key"
+        :name="tab.name"
+        :show-badge="false"
+      />
+    </woot-tabs>
+    <div
+      v-show="!activeIndex"
+      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
+    >
+      <MessagesView
+        v-if="currentChat.id"
+        :inbox-id="inboxId"
+        :is-inbox-view="isInboxView"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contactPanelToggle="onToggleContactPanel"
+      />
+      <EmptyState
+        v-if="!currentChat.id && !isInboxView"
+        :is-on-expanded-layout="isOnExpandedLayout"
+      />
+      <div
+        v-show="showContactPanel"
+        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
+      >
+        <ContactPanel
+          v-if="showContactPanel"
+          :conversation-id="currentChat.id"
+          :inbox-id="currentChat.inbox_id"
+          :on-toggle="onToggleContactPanel"
+        />
+      </div>
+    </div>
+    <DashboardAppFrame
+      v-for="(dashboardApp, index) in dashboardApps"
+      v-show="activeIndex - 1 === index"
+      :key="currentChat.id + '-' + dashboardApp.id"
+      :is-visible="activeIndex - 1 === index"
+      :config="dashboardApps[index].content"
+      :position="index"
+      :current-chat="currentChat"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 777c9fdcd..0685ebc53 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 64ae36824..428e5549f 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 d8a54b402..3d1741fc9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -1,7 +1,89 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    currentChat: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      email: '',
+      selectedType: '',
+      isSubmitting: false,
+    };
+  },
+  validations: {
+    email: {
+      required,
+      email,
+      minLength: minLength(4),
+    },
+  },
+  computed: {
+    sentToOtherEmailAddress() {
+      return this.selectedType === 'other_email_address';
+    },
+    isFormValid() {
+      if (this.selectedType) {
+        if (this.sentToOtherEmailAddress) {
+          return !!this.email && !this.v$.email.$error;
+        }
+        return true;
+      }
+      return false;
+    },
+    selectedEmailAddress() {
+      const { meta } = this.currentChat;
+      switch (this.selectedType) {
+        case 'contact':
+          return meta.sender.email;
+        case 'assignee':
+          return meta.assignee.email;
+        case 'other_email_address':
+          return this.email;
+        default:
+          return '';
+      }
+    },
+  },
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+    async onSubmit() {
+      this.isSubmitting = false;
+      try {
+        await this.$store.dispatch('sendEmailTranscript', {
+          email: this.selectedEmailAddress,
+          conversationId: this.currentChat.id,
+        });
+        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
+        this.onCancel();
+      } catch (error) {
+        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+  },
+};
+</script>
+
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="h-auto overflow-auto flex flex-col">
+    <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
         :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
@@ -48,20 +130,20 @@
             }}</label>
           </div>
           <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
-            <label :class="{ error: $v.email.$error }">
+            <label :class="{ error: v$.email.$error }">
               <input
                 v-model.trim="email"
                 type="text"
                 :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
-                @input="$v.email.$touch"
+                @input="v$.email.$touch"
               />
-              <span v-if="$v.email.$error" class="message">
+              <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">
+        <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"
@@ -74,82 +156,3 @@
     </div>
   </woot-modal>
 </template>
-
-<script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
-import alertMixin from 'shared/mixins/alertMixin';
-export default {
-  mixins: [alertMixin],
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    currentChat: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      email: '',
-      selectedType: '',
-      isSubmitting: false,
-    };
-  },
-  validations: {
-    email: {
-      required,
-      email,
-      minLength: minLength(4),
-    },
-  },
-  computed: {
-    sentToOtherEmailAddress() {
-      return this.selectedType === 'other_email_address';
-    },
-    isFormValid() {
-      if (this.selectedType) {
-        if (this.sentToOtherEmailAddress) {
-          return !!this.email && !this.$v.email.$error;
-        }
-        return true;
-      }
-      return false;
-    },
-    selectedEmailAddress() {
-      const { meta } = this.currentChat;
-      switch (this.selectedType) {
-        case 'contact':
-          return meta.sender.email;
-        case 'assignee':
-          return meta.assignee.email;
-        case 'other_email_address':
-          return this.email;
-        default:
-          return '';
-      }
-    },
-  },
-  methods: {
-    onCancel() {
-      this.$emit('cancel');
-    },
-    async onSubmit() {
-      this.isSubmitting = false;
-      try {
-        await this.$store.dispatch('sendEmailTranscript', {
-          email: this.selectedEmailAddress,
-          conversationId: this.currentChat.id,
-        });
-        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
-        this.onCancel();
-      } catch (error) {
-        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
-      } finally {
-        this.isSubmitting = false;
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
index 2aabae577..bcbd57a42 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 209cd3440..40c7dd557 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
@@ -1,3 +1,16 @@
+<script>
+import FeaturePlaceholder from './FeaturePlaceholder.vue';
+export default {
+  components: { FeaturePlaceholder },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col items-center justify-center h-full">
     <img
@@ -17,19 +30,6 @@
       <br />
     </span>
     <!-- Cmd bar, keyboard shortcuts placeholder -->
-    <feature-placeholder />
+    <FeaturePlaceholder />
   </div>
 </template>
-
-<script>
-import FeaturePlaceholder from './FeaturePlaceholder.vue';
-export default {
-  components: { FeaturePlaceholder },
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
index 127e42c61..6cd447fab 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="flex flex-col gap-2 mt-9">
-    <div
-      v-for="keyShortcut in keyShortcuts"
-      :key="keyShortcut.key"
-      class="flex gap-2 items-center"
-    >
-      <div class="flex gap-2 items-center">
-        <hotkey
-          custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
-        >
-          ⌘
-        </hotkey>
-        <hotkey
-          custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
-        >
-          {{ keyShortcut.key }}
-        </hotkey>
-      </div>
-      <span
-        class="text-sm text-slate-700 dark:text-slate-300 font-medium text-center"
-      >
-        {{ keyShortcut.description }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
@@ -49,3 +21,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col gap-2 mt-9">
+    <div
+      v-for="keyShortcut in keyShortcuts"
+      :key="keyShortcut.key"
+      class="flex items-center gap-2"
+    >
+      <div class="flex items-center gap-2">
+        <Hotkey
+          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-7000 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+        >
+          ⌘
+        </Hotkey>
+        <Hotkey
+          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+        >
+          {{ keyShortcut.key }}
+        </Hotkey>
+      </div>
+      <span
+        class="text-sm font-medium text-center text-slate-700 dark:text-slate-300"
+      >
+        {{ keyShortcut.description }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index c324b823a..05d6fe4db 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -1,14 +1,3 @@
-<template>
-  <select
-    v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
-    @change="onTabChange()"
-  >
-    <option v-for="(value, status) in items" :key="status" :value="status">
-      {{ $t(`${pathPrefix}.${status}.TEXT`) }}
-    </option>
-  </select>
-</template>
 <script>
 export default {
   props: {
@@ -46,3 +35,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <select
+    v-model="activeValue"
+    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    @change="onTabChange()"
+  >
+    <option v-for="(value, status) in items" :key="status" :value="status">
+      {{ $t(`${pathPrefix}.${status}.TEXT`) }}
+    </option>
+  </select>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 54167db71..7ab868e93 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -1,147 +1,3 @@
-<template>
-  <li
-    v-if="shouldRenderMessage"
-    :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
-  >
-    <div :class="wrapClass">
-      <div
-        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
-        class="message-failed--alert"
-      >
-        <woot-button
-          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          size="tiny"
-          color-scheme="alert"
-          variant="clear"
-          icon="arrow-clockwise"
-          @click="retrySendMessage"
-        />
-      </div>
-      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
-        <bubble-mail-head
-          :email-attributes="contentAttributes.email"
-          :cc="emailHeadAttributes.cc"
-          :bcc="emailHeadAttributes.bcc"
-          :is-incoming="isIncoming"
-        />
-        <instagram-story-reply v-if="storyUrl" :story-url="storyUrl" />
-        <bubble-reply-to
-          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
-          :message="inReplyTo"
-          :message-type="data.message_type"
-          :parent-has-attachments="hasAttachments"
-        />
-        <div v-if="isUnsupported">
-          <template v-if="isAFacebookInbox && isInstagram">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
-          </template>
-          <template v-else-if="isAFacebookInbox">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
-          </template>
-          <template v-else>
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
-          </template>
-        </div>
-        <bubble-text
-          v-else-if="data.content"
-          :message="message"
-          :is-email="isEmailContentType"
-          :display-quoted-button="displayQuotedButton"
-        />
-        <bubble-integration
-          :message-id="data.id"
-          :content-attributes="contentAttributes"
-          :inbox-id="data.inbox_id"
-        />
-        <span
-          v-if="isPending && hasAttachments"
-          class="chat-bubble has-attachment agent"
-        >
-          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
-        </span>
-        <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in attachments" :key="attachment.id">
-            <instagram-story
-              v-if="isAnInstagramStory"
-              :story-url="attachment.data_url"
-              @error="onMediaLoadError"
-            />
-            <bubble-image-audio-video
-              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
-              :attachment="attachment"
-              @error="onMediaLoadError"
-            />
-            <bubble-location
-              v-else-if="attachment.file_type === 'location'"
-              :latitude="attachment.coordinates_lat"
-              :longitude="attachment.coordinates_long"
-              :name="attachment.fallback_title"
-            />
-            <bubble-contact
-              v-else-if="attachment.file_type === 'contact'"
-              :name="data.content"
-              :phone-number="attachment.fallback_title"
-            />
-            <bubble-file v-else :url="attachment.data_url" />
-          </div>
-        </div>
-        <bubble-actions
-          :id="data.id"
-          :sender="data.sender"
-          :story-sender="storySender"
-          :external-error="errorMessageTooltip"
-          :story-id="`${storyId}`"
-          :is-a-tweet="isATweet"
-          :is-a-whatsapp-channel="isAWhatsAppChannel"
-          :is-email="isEmailContentType"
-          :is-private="data.private"
-          :message-type="data.message_type"
-          :message-status="status"
-          :source-id="data.source_id"
-          :inbox-id="data.inbox_id"
-          :created-at="createdAt"
-        />
-      </div>
-      <spinner v-if="isPending" size="tiny" />
-      <div
-        v-if="showAvatar"
-        v-tooltip.left="tooltipForSender"
-        class="sender--info"
-      >
-        <woot-thumbnail
-          :src="sender.thumbnail"
-          :username="senderNameForAvatar"
-          size="16px"
-        />
-        <a
-          v-if="isATweet && isIncoming"
-          class="sender--available-name"
-          :href="twitterProfileLink"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {{ sender.name }}
-        </a>
-      </div>
-    </div>
-    <div
-      v-if="shouldShowContextMenu"
-      class="invisible context-menu-wrap group-hover:visible"
-    >
-      <context-menu
-        v-if="isBubble && !isMessageDeleted"
-        :context-menu-position="contextMenuPosition"
-        :is-open="showContextMenu"
-        :enabled-options="contextMenuEnabledOptions"
-        :message="data"
-        @open="openContextMenu"
-        @close="closeContextMenu"
-        @replyTo="handleReplyTo"
-      />
-    </div>
-  </li>
-</template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import BubbleActions from './bubble/Actions.vue';
@@ -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 22d69439e..af1c3e06d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-    <template v-if="showMessageType">
-      <fluent-icon
-        v-if="isMessagePrivate"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="lock-closed"
-      />
-      <fluent-icon
-        v-else-if="messageByAgent"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="arrow-reply"
-      />
-      <fluent-icon
-        v-else-if="isMessageAnActivity"
-        size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
-        icon="info"
-      />
-    </template>
-    <span v-if="message.content && isMessageSticker">
-      <fluent-icon
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        icon="image"
-      />
-      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
-    </span>
-    <span v-else-if="message.content">
-      {{ parsedLastMessage }}
-    </span>
-    <span v-else-if="message.attachments">
-      <fluent-icon
-        v-if="attachmentIcon && showMessageType"
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
-        :icon="attachmentIcon"
-      />
-      {{ $t(`${attachmentMessageContent}`) }}
-    </span>
-    <span v-else>
-      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -102,3 +54,51 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+    <template v-if="showMessageType">
+      <fluent-icon
+        v-if="isMessagePrivate"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="lock-closed"
+      />
+      <fluent-icon
+        v-else-if="messageByAgent"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="arrow-reply"
+      />
+      <fluent-icon
+        v-else-if="isMessageAnActivity"
+        size="16"
+        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        icon="info"
+      />
+    </template>
+    <span v-if="message.content && isMessageSticker">
+      <fluent-icon
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        icon="image"
+      />
+      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+    </span>
+    <span v-else-if="message.content">
+      {{ parsedLastMessage }}
+    </span>
+    <span v-else-if="message.attachments">
+      <fluent-icon
+        v-if="attachmentIcon && showMessageType"
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        :icon="attachmentIcon"
+      />
+      {{ $t(`${attachmentMessageContent}`) }}
+    </span>
+    <span v-else>
+      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
index 81e4531af..15793f4c8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    openProfileSettings() {
+      return this.$router.push({ name: 'profile_settings_index' });
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto"
@@ -14,15 +24,3 @@
     </p>
   </div>
 </template>
-
-<script>
-export default {
-  methods: {
-    openProfileSettings() {
-      return this.$router.push({ name: 'profile_settings_index' });
-    },
-  },
-};
-</script>
-
-<style></style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index df61e9de1..44c58ac9d 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 4a742781d..dcfc51b2a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -1,5 +1,55 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import EmailTranscriptModal from './EmailTranscriptModal.vue';
+import ResolveAction from '../../buttons/ResolveAction.vue';
+import {
+  CMD_MUTE_CONVERSATION,
+  CMD_SEND_TRANSCRIPT,
+  CMD_UNMUTE_CONVERSATION,
+} from '../../../routes/dashboard/commands/commandBarBusEvents';
+
+export default {
+  components: {
+    EmailTranscriptModal,
+    ResolveAction,
+  },
+  data() {
+    return {
+      showEmailActionsModal: false,
+    };
+  },
+  computed: {
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
+  },
+  mounted() {
+    this.$emitter.on(CMD_MUTE_CONVERSATION, this.mute);
+    this.$emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
+    this.$emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+  },
+  destroyed() {
+    this.$emitter.off(CMD_MUTE_CONVERSATION, this.mute);
+    this.$emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
+    this.$emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+  },
+  methods: {
+    mute() {
+      this.$store.dispatch('muteConversation', this.currentChat.id);
+      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
+    },
+    unmute() {
+      this.$store.dispatch('unmuteConversation', this.currentChat.id);
+      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+    },
+    toggleEmailActionsModal() {
+      this.showEmailActionsModal = !this.showEmailActionsModal;
+    },
+  },
+};
+</script>
+
 <template>
-  <div class="flex actions--container relative items-center gap-2">
+  <div class="relative flex items-center gap-2 actions--container">
     <woot-button
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
@@ -23,11 +73,11 @@
       icon="share"
       @click="toggleEmailActionsModal"
     />
-    <resolve-action
+    <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
-    <email-transcript-modal
+    <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"
@@ -35,56 +85,7 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import EmailTranscriptModal from './EmailTranscriptModal.vue';
-import ResolveAction from '../../buttons/ResolveAction.vue';
-import {
-  CMD_MUTE_CONVERSATION,
-  CMD_SEND_TRANSCRIPT,
-  CMD_UNMUTE_CONVERSATION,
-} from '../../../routes/dashboard/commands/commandBarBusEvents';
 
-export default {
-  components: {
-    EmailTranscriptModal,
-    ResolveAction,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      showEmailActionsModal: false,
-    };
-  },
-  computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
-  },
-  mounted() {
-    this.$emitter.on(CMD_MUTE_CONVERSATION, this.mute);
-    this.$emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
-    this.$emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  destroyed() {
-    this.$emitter.off(CMD_MUTE_CONVERSATION, this.mute);
-    this.$emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
-    this.$emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  methods: {
-    mute() {
-      this.$store.dispatch('muteConversation', this.currentChat.id);
-      this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
-    },
-    unmute() {
-      this.$store.dispatch('unmuteConversation', this.currentChat.id);
-      this.showAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-    },
-    toggleEmailActionsModal() {
-      this.showEmailActionsModal = !this.showEmailActionsModal;
-    },
-  },
-};
-</script>
 <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 000000000..cc809d2ce
--- /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 5824da0bd..da8408d1f 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 3a0e2b63a..398dc013a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -1,27 +1,3 @@
-<template>
-  <span
-    v-if="priority"
-    v-tooltip="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
-    :class="{
-      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
-        isUrgent,
-      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
-        !isUrgent,
-    }"
-  >
-    <fluent-icon
-      :icon="`priority-${priority.toLowerCase()}`"
-      size="14"
-      view-box="0 0 14 14"
-    />
-  </span>
-</template>
-
 <script>
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 
@@ -52,3 +28,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span
+    v-if="priority"
+    v-tooltip="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
+    :class="{
+      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
+        isUrgent,
+      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
+        !isUrgent,
+    }"
+  >
+    <fluent-icon
+      :icon="`priority-${priority.toLowerCase()}`"
+      size="14"
+      view-box="0 0 14 14"
+    />
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 2726cea92..1a901d449 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 e3135fa47..08ca1eba6 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 ce24f4ce1..2db7d6a65 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
@@ -1,3 +1,17 @@
+<script>
+import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
+
+export default {
+  components: { MessagePreview },
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
@@ -5,7 +19,7 @@
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
     <div class="flex-grow gap-1 mt-px text-xs truncate">
       {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
-      <message-preview
+      <MessagePreview
         :message="message"
         :show-message-type="false"
         :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
@@ -24,20 +38,6 @@
   </div>
 </template>
 
-<script>
-import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
-
-export default {
-  components: { MessagePreview },
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
 <style lang="scss">
 // TODO: Remove this
 // override for dashboard/assets/scss/widgets/_reply-box.scss
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index a3a26db73..d4c5a0930 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: '',
-    },
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
   },
-  data() {
-    return { selectedIndex: 0 };
-  },
-  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]);
-    },
-  },
+const getters = useStoreGetters();
+const agents = computed(() => getters['agents/getVerifiedAgents'].value);
+
+const tagAgentsRef = ref(null);
+const selectedIndex = ref(0);
+
+const items = computed(() => {
+  if (!props.searchKey) {
+    return agents.value;
+  }
+  return agents.value.filter(agent =>
+    agent.name.toLowerCase().includes(props.searchKey.toLowerCase())
+  );
+});
+
+const adjustScroll = () => {
+  nextTick(() => {
+    if (tagAgentsRef.value) {
+      tagAgentsRef.value.scrollTop = 50 * selectedIndex.value;
+    }
+  });
+};
+
+const onSelect = () => {
+  emit('click', items.value[selectedIndex.value]);
+};
+
+useKeyboardNavigableList({
+  elementRef: tagAgentsRef,
+  items,
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+watch(items, newListOfAgents => {
+  if (newListOfAgents.length < selectedIndex.value + 1) {
+    selectedIndex.value = 0;
+  }
+});
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onAgentSelect = index => {
+  selectedIndex.value = index;
+  onSelect();
 };
 </script>
 
-<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;
-
-  &.with-bottom-border {
-    @apply border-b-[0.5rem] border-solid border-white dark:border-slate-600;
-
-    li {
-      &:last-child {
-        @apply mb-0;
-      }
-    }
-  }
-
-  li {
-    &.active {
-      @apply bg-slate-50 dark:bg-slate-800;
-
-      .mention--user-name {
-        @apply text-slate-900 dark:text-slate-100;
-      }
-      .mention--email {
-        @apply text-slate-800 dark:text-slate-200;
-      }
-    }
-  }
-}
-</style>
+<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 48b1dcea3..66ad8965d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -1,19 +1,3 @@
-<template>
-  <mention-box
-    v-if="items.length"
-    type="variable"
-    :items="items"
-    @mention-select="handleVariableClick"
-  >
-    <template slot-scope="{ item }">
-      <span class="text-capitalize variable--list-label">
-        {{ item.description }}
-      </span>
-      ({{ item.label }})
-    </template>
-  </mention-box>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { MESSAGE_VARIABLES } from 'shared/constants/messages';
@@ -71,6 +55,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <MentionBox
+    v-if="items.length"
+    type="variable"
+    :items="items"
+    @mentionSelect="handleVariableClick"
+  >
+    <template slot-scope="{ item }">
+      <span class="text-capitalize variable--list-label">
+        {{ item.description }}
+      </span>
+      ({{ item.label }})
+    </template>
+  </MentionBox>
+</template>
+
 <style scoped>
 .variable--list-label {
   font-weight: var(--font-weight-bold);
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
index 6c4523f9a..de025a1e5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
@@ -1,26 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
-    <woot-modal-header
-      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
-      :header-content="modalHeaderContent"
-    />
-    <div class="row modal-content">
-      <templates-picker
-        v-if="!selectedWaTemplate"
-        :inbox-id="inboxId"
-        @onSelect="pickTemplate"
-      />
-      <template-parser
-        v-else
-        :template="selectedWaTemplate"
-        @resetTemplate="onResetTemplate"
-        @sendMessage="onSendMessage"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
@@ -61,7 +38,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
@@ -70,6 +47,29 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
+    <woot-modal-header
+      :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
+      :header-content="modalHeaderContent"
+    />
+    <div class="row modal-content">
+      <TemplatesPicker
+        v-if="!selectedWaTemplate"
+        :inbox-id="inboxId"
+        @onSelect="pickTemplate"
+      />
+      <TemplateParser
+        v-else
+        :template="selectedWaTemplate"
+        @resetTemplate="onResetTemplate"
+        @sendMessage="onSendMessage"
+      />
+    </div>
+  </woot-modal>
+</template>
+
 <style scoped>
 .modal-content {
   padding: 1.5625rem 2rem;
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
index 0e2a402e8..23918ddd3 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 7f0077f4b..e7f69934c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -1,59 +1,3 @@
-<template>
-  <div class="w-full">
-    <div class="templates__list-search gap-1">
-      <fluent-icon icon="search" class="search-icon" size="16" />
-      <input
-        ref="search"
-        v-model="query"
-        type="search"
-        :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
-        class="templates__search-input"
-      />
-    </div>
-    <div class="template__list-container">
-      <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
-        <button
-          class="template__list-item"
-          @click="$emit('onSelect', template)"
-        >
-          <div>
-            <div class="flex items-center justify-between mb-2.5">
-              <p class="label-title">
-                {{ template.name }}
-              </p>
-              <span
-                class="inline-block py-1 px-2 rounded-sm text-xs leading-none cursor-default bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100"
-              >
-                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
-                {{ template.language }}
-              </span>
-            </div>
-            <div>
-              <p class="strong">
-                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
-              </p>
-              <p class="label-body">{{ getTemplatebody(template) }}</p>
-            </div>
-            <div class="label-category">
-              <p class="strong">
-                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
-              </p>
-              <p>{{ template.category }}</p>
-            </div>
-          </div>
-        </button>
-        <hr v-if="i != filteredTemplateMessages.length - 1" :key="`hr-${i}`" />
-      </div>
-      <div v-if="!filteredTemplateMessages.length">
-        <p>
-          {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
-          <strong>{{ query }}</strong>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 // TODO: Remove this when we support all formats
 const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
@@ -96,6 +40,61 @@ export default {
 };
 </script>
 
+<template>
+  <div class="w-full">
+    <div class="gap-1 templates__list-search">
+      <fluent-icon icon="search" class="search-icon" size="16" />
+      <input
+        v-model="query"
+        type="search"
+        :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
+        class="templates__search-input"
+      />
+    </div>
+    <div class="template__list-container">
+      <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
+        <button
+          class="template__list-item"
+          @click="$emit('onSelect', template)"
+        >
+          <div>
+            <div class="flex items-center justify-between mb-2.5">
+              <p class="label-title">
+                {{ template.name }}
+              </p>
+              <span
+                class="inline-block px-2 py-1 text-xs leading-none bg-white rounded-sm cursor-default dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+              >
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
+                {{ template.language }}
+              </span>
+            </div>
+            <div>
+              <p class="strong">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
+              </p>
+              <p class="label-body">{{ getTemplatebody(template) }}</p>
+            </div>
+            <div class="label-category">
+              <p class="strong">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
+              </p>
+              <p>{{ template.category }}</p>
+            </div>
+          </div>
+        </button>
+        <hr v-if="i != filteredTemplateMessages.length - 1" :key="`hr-${i}`" />
+      </div>
+      <div v-if="!filteredTemplateMessages.length">
+        <p>
+          {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
+          <strong>{{ query }}</strong>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .templates__list-search {
   @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 416af5d06..f3ed9ac51 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 4d6b2bc55..2d0b3d3a3 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 d5e0375cd..edbe12172 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="file message-text__wrap">
-    <div class="icon-wrap">
-      <fluent-icon icon="document" class="file--icon" size="32" />
-    </div>
-    <div class="meta">
-      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
-        {{ decodeURI(fileName) }}
-      </h5>
-      <a
-        class="download clear link button small"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        :href="url"
-      >
-        {{ $t('CONVERSATION.DOWNLOAD') }}
-      </a>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -45,6 +24,27 @@ export default {
 };
 </script>
 
+<template>
+  <div class="file message-text__wrap">
+    <div class="icon-wrap">
+      <fluent-icon icon="document" class="file--icon" size="32" />
+    </div>
+    <div class="meta">
+      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
+        {{ decodeURI(fileName) }}
+      </h5>
+      <a
+        class="download clear link button small"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        :href="url"
+      >
+        {{ $t('CONVERSATION.DOWNLOAD') }}
+      </a>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
index d763d6bec..d5368e4aa 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -1,12 +1,3 @@
-<template>
-  <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
-      <img :src="url" class="modal-image skip-context-menu" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 export default {
   components: {},
@@ -31,3 +22,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="image message-text__wrap">
+    <img :src="url" @click="onClick" @error="$emit('error')" />
+    <woot-modal full-width :show.sync="show" :on-close="onClose">
+      <img :src="url" class="modal-image skip-context-menu" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
index 41e207cbf..9a0640bf3 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 8716d9ac9..11a6eaf73 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
@@ -1,16 +1,3 @@
-<template>
-  <bubble-image
-    v-if="!hasImgStoryError"
-    :url="storyUrl"
-    @error="onImageLoadError"
-  />
-  <bubble-video
-    v-else-if="!hasVideoStoryError"
-    :url="storyUrl"
-    @error="onVideoLoadError"
-  />
-  <instagram-story-error-place-holder v-else />
-</template>
 <script>
 import BubbleImage from './Image.vue';
 import BubbleVideo from './Video.vue';
@@ -49,3 +36,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BubbleImage
+    v-if="!hasImgStoryError"
+    :url="storyUrl"
+    @error="onImageLoadError"
+  />
+  <BubbleVideo
+    v-else-if="!hasVideoStoryError"
+    :url="storyUrl"
+    @error="onVideoLoadError"
+  />
+  <InstagramStoryErrorPlaceHolder v-else />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
index db70afac5..07781df88 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
@@ -1,3 +1,7 @@
+<script>
+export default {};
+</script>
+
 <template>
   <div
     class="flex items-center justify-center px-8 h-28 w-full bg-slate-100 text-slate-700 dark:bg-slate-500 dark:text-slate-75"
@@ -8,7 +12,3 @@
     </p>
   </div>
 </template>
-
-<script>
-export default {};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
index baa41d81c..a42f694fd 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
@@ -1,11 +1,3 @@
-<template>
-  <blockquote
-    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
-  >
-    <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
-    <instagram-story :story-url="storyUrl" class="mt-3 rounded-md" />
-  </blockquote>
-</template>
 <script>
 import InstagramStory from './InstagramStory.vue';
 
@@ -33,3 +25,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <blockquote
+    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
+  >
+    <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
+    <InstagramStory :story-url="storyUrl" class="mt-3 rounded-md" />
+  </blockquote>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
index 80843854d..b31153f1b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
@@ -1,10 +1,3 @@
-<template>
-  <dyte-video-call
-    v-if="showDyteIntegration"
-    :message-id="messageId"
-    :meeting-data="contentAttributes.data"
-  />
-</template>
 <script>
 import DyteVideoCall from './integrations/Dyte.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
@@ -37,3 +30,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <DyteVideoCall
+    v-if="showDyteIntegration"
+    :message-id="messageId"
+    :meeting-data="contentAttributes.data"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
index 66365e85c..645b25017 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    v-if="showHead"
-    class="message__mail-head"
-    :class="{ 'is-incoming': isIncoming }"
-  >
-    <div v-if="fromMail" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
-      <span>{{ fromMail }}</span>
-    </div>
-    <div v-if="toMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
-      <span>{{ toMails }}</span>
-    </div>
-    <div v-if="ccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
-      <span>{{ ccMails }}</span>
-    </div>
-    <div v-if="bccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
-      <span>{{ bccMails }}</span>
-    </div>
-    <div v-if="subject" class="meta-wrap">
-      <span class="message__content--type">
-        {{ $t('EMAIL_HEADER.SUBJECT') }}:
-      </span>
-      <span>{{ subject }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -75,6 +44,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="showHead"
+    class="message__mail-head"
+    :class="{ 'is-incoming': isIncoming }"
+  >
+    <div v-if="fromMail" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
+      <span>{{ fromMail }}</span>
+    </div>
+    <div v-if="toMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
+      <span>{{ toMails }}</span>
+    </div>
+    <div v-if="ccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
+      <span>{{ ccMails }}</span>
+    </div>
+    <div v-if="bccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
+      <span>{{ bccMails }}</span>
+    </div>
+    <div v-if="subject" class="meta-wrap">
+      <span class="message__content--type">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+      </span>
+      <span>{{ subject }}</span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .message__mail-head {
   padding-bottom: var(--space-small);
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
index 5cb063d23..f3cec8480 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
@@ -1,23 +1,3 @@
-<template>
-  <div
-    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
-    :class="{
-      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
-        messageType === MESSAGE_TYPE.INCOMING,
-      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
-      '-mx-2': !parentHasAttachments,
-    }"
-    @click="scrollToMessage"
-  >
-    <message-preview
-      class="cursor-pointer"
-      :message="message"
-      :show-message-type="false"
-      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
-    />
-  </div>
-</template>
-
 <script>
 import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
@@ -54,3 +34,23 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
+    :class="{
+      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
+        messageType === MESSAGE_TYPE.INCOMING,
+      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
+      '-mx-2': !parentHasAttachments,
+    }"
+    @click="scrollToMessage"
+  >
+    <MessagePreview
+      class="cursor-pointer"
+      :message="message"
+      :show-message-type="false"
+      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index bc24ed90f..ab7c81623 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -1,43 +1,3 @@
-<template>
-  <div
-    class="message-text__wrap"
-    :class="{
-      'show--quoted': isQuotedContentPresent,
-      'hide--quoted': !isQuotedContentPresent,
-    }"
-  >
-    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
-    <div v-else @click="handleClickOnContent">
-      <letter
-        class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
-        :html="message"
-      />
-    </div>
-    <button
-      v-if="showQuoteToggle"
-      class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
-      @click="toggleQuotedContent"
-    >
-      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-up" size="16" />
-        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
-      </span>
-      <span v-else class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-down" size="16" />
-        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
-      </span>
-    </button>
-    <gallery-view
-      v-if="showGalleryViewer"
-      :show.sync="showGalleryViewer"
-      :attachment="attachment"
-      :all-attachments="availableAttachments"
-      @error="onClose"
-      @close="onClose"
-    />
-  </div>
-</template>
-
 <script>
 import Letter from 'vue-letter';
 import GalleryView from '../components/GalleryView.vue';
@@ -114,6 +74,47 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="message-text__wrap"
+    :class="{
+      'show--quoted': isQuotedContentPresent,
+      'hide--quoted': !isQuotedContentPresent,
+    }"
+  >
+    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
+    <div v-else @click="handleClickOnContent">
+      <Letter
+        class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
+        :html="message"
+      />
+    </div>
+    <button
+      v-if="showQuoteToggle"
+      class="py-1 text-xs cursor-pointer text-slate-300 dark:text-slate-300"
+      @click="toggleQuotedContent"
+    >
+      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-up" size="16" />
+        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+      </span>
+      <span v-else class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-down" size="16" />
+        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+      </span>
+    </button>
+    <GalleryView
+      v-if="showGalleryViewer"
+      :show.sync="showGalleryViewer"
+      :attachment="attachment"
+      :all-attachments="availableAttachments"
+      @error="onClose"
+      @close="onClose"
+    />
+  </div>
+</template>
+
 <style lang="scss">
 .text-content {
   overflow: auto;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
index 94a24e575..aac444888 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
@@ -1,3 +1,31 @@
+<script>
+export default {
+  props: {
+    contentAttributes: {
+      type: Object,
+      default: () => ({}),
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    translationsAvailable() {
+      return !!Object.keys(this.translations).length;
+    },
+    translations() {
+      return this.contentAttributes.translations || {};
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <woot-modal
     modal-type="right-aligned"
@@ -30,30 +58,3 @@
     </div>
   </woot-modal>
 </template>
-<script>
-export default {
-  props: {
-    contentAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    translationsAvailable() {
-      return !!Object.keys(this.translations).length;
-    },
-    translations() {
-      return this.contentAttributes.translations || {};
-    },
-  },
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
index 6ff96bb5b..f6275c476 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="video message-text__wrap">
-    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal :show.sync="show" :on-close="onClose">
-      <video
-        :src="url"
-        controls
-        playsInline
-        class="modal-video skip-context-menu mx-auto"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -40,3 +26,17 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="video message-text__wrap">
+    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
+    <woot-modal :show.sync="show" :on-close="onClose">
+      <video
+        :src="url"
+        controls
+        playsInline
+        class="modal-video skip-context-menu mx-auto"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
index 9780c2c43..a75731183 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
@@ -1,3 +1,47 @@
+<script>
+import DyteAPI from 'dashboard/api/integrations/dyte';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { useAlert } from 'dashboard/composables';
+
+export default {
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    meetingData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
+  },
+  computed: {
+    meetingLink() {
+      return buildDyteURL(this.meetingData.room_name, this.dyteAuthToken);
+    },
+  },
+  methods: {
+    async joinTheCall() {
+      this.isLoading = true;
+      try {
+        const { data: { authResponse: { authToken } = {} } = {} } =
+          await DyteAPI.addParticipantToMeeting(this.messageId);
+        this.dyteAuthToken = authToken;
+      } catch (err) {
+        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    leaveTheRoom() {
+      this.dyteAuthToken = '';
+    },
+  },
+};
+</script>
+
 <template>
   <div>
     <woot-button
@@ -28,50 +72,7 @@
     </div>
   </div>
 </template>
-<script>
-import DyteAPI from 'dashboard/api/integrations/dyte';
-import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
-import alertMixin from 'shared/mixins/alertMixin';
 
-export default {
-  mixins: [alertMixin],
-  props: {
-    messageId: {
-      type: Number,
-      required: true,
-    },
-    meetingData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
-  },
-  computed: {
-    meetingLink() {
-      return buildDyteURL(this.meetingData.room_name, this.dyteAuthToken);
-    },
-  },
-  methods: {
-    async joinTheCall() {
-      this.isLoading = true;
-      try {
-        const { data: { authResponse: { authToken } = {} } = {} } =
-          await DyteAPI.addParticipantToMeeting(this.messageId);
-        this.dyteAuthToken = authToken;
-      } catch (err) {
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
-      } finally {
-        this.isLoading = false;
-      }
-    },
-    leaveTheRoom() {
-      this.dyteAuthToken = '';
-    },
-  },
-};
-</script>
 <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 08f77be9a..f3610e546 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 042e25838..9d15fc884 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -1,53 +1,3 @@
-<template>
-  <div
-    v-if="hasSlaThreshold"
-    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
-    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
-  >
-    <div
-      v-on-clickaway="closeSlaPopover"
-      class="flex items-center w-full truncate"
-      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
-      @mouseover="openSlaPopover()"
-    >
-      <div
-        class="flex items-center gap-1"
-        :class="
-          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
-        "
-      >
-        <fluent-icon
-          size="14"
-          :icon="slaStatus.icon"
-          type="outline"
-          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
-          class="flex-shrink-0"
-          :class="slaTextStyles"
-        />
-        <span
-          v-if="showExtendedInfo"
-          class="text-xs font-medium"
-          :class="slaTextStyles"
-        >
-          {{ slaStatusText }}
-        </span>
-      </div>
-      <span
-        class="text-xs font-medium"
-        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
-      >
-        {{ slaStatus.threshold }}
-      </span>
-    </div>
-    <SLA-popover-card
-      v-if="showSlaPopoverCard"
-      :sla-missed-events="slaEvents"
-      class="right-0 top-7"
-    />
-  </div>
-</template>
-
 <script>
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
@@ -152,3 +102,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
+    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
+  >
+    <div
+      v-on-clickaway="closeSlaPopover"
+      class="flex items-center w-full truncate"
+      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
+      @mouseover="openSlaPopover()"
+    >
+      <div
+        class="flex items-center gap-1"
+        :class="
+          showExtendedInfo &&
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+        "
+      >
+        <fluent-icon
+          size="14"
+          :icon="slaStatus.icon"
+          type="outline"
+          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
+          class="flex-shrink-0"
+          :class="slaTextStyles"
+        />
+        <span
+          v-if="showExtendedInfo"
+          class="text-xs font-medium"
+          :class="slaTextStyles"
+        >
+          {{ slaStatusText }}
+        </span>
+      </div>
+      <span
+        class="text-xs font-medium"
+        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
+      >
+        {{ slaStatus.threshold }}
+      </span>
+    </div>
+    <SLAPopoverCard
+      v-if="showSlaPopoverCard"
+      :sla-missed-events="slaEvents"
+      class="right-0 top-7"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
index 3affa52c8..82774cbe0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
@@ -14,6 +14,7 @@ defineProps({
 const formatDate = timestamp =>
   format(fromUnixTime(timestamp), 'MMM dd, yyyy, hh:mm a');
 </script>
+
 <template>
   <div class="flex justify-between w-full">
     <span
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 655a42948..6b1c66d02 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -4,8 +4,6 @@ import { ref, computed } from 'vue';
 import wootConstants from 'dashboard/constants/globals';
 import SLAEventItem from './SLAEventItem.vue';
 
-const { SLA_MISS_TYPES } = wootConstants;
-
 const props = defineProps({
   slaMissedEvents: {
     type: Array,
@@ -13,6 +11,8 @@ const props = defineProps({
   },
 });
 
+const { SLA_MISS_TYPES } = wootConstants;
+
 const shouldShowAllNrts = ref(false);
 
 const frtMisses = computed(() =>
@@ -37,6 +37,7 @@ const toggleShowAllNRT = () => {
   shouldShowAllNrts.value = !shouldShowAllNrts.value;
 };
 </script>
+
 <template>
   <div
     class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
@@ -44,12 +45,12 @@ const toggleShowAllNRT = () => {
     <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
-    <SLA-event-item
+    <SLAEventItem
       v-if="frtMisses.length"
       :label="$t('SLA.EVENTS.FRT')"
       :items="frtMisses"
     />
-    <SLA-event-item
+    <SLAEventItem
       v-if="nrtMisses.length"
       :label="$t('SLA.EVENTS.NRT')"
       :items="nrtMisses"
@@ -75,8 +76,8 @@ const toggleShowAllNRT = () => {
           </woot-button>
         </div>
       </template>
-    </SLA-event-item>
-    <SLA-event-item
+    </SLAEventItem>
+    <SLAEventItem
       v-if="rtMisses.length"
       :label="$t('SLA.EVENTS.RT')"
       :items="rtMisses"
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index ca07fb6fc..fc9ec29fe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -1,76 +1,3 @@
-<template>
-  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
-    <menu-item
-      v-if="!hasUnreadMessages"
-      :option="unreadOption"
-      variant="icon"
-      @click="$emit('mark-as-unread')"
-    />
-    <template v-for="option in statusMenuConfig">
-      <menu-item
-        v-if="show(option.key)"
-        :key="option.key"
-        :option="option"
-        variant="icon"
-        @click="toggleStatus(option.key, null)"
-      />
-    </template>
-    <menu-item
-      v-if="showSnooze"
-      :option="snoozeOption"
-      variant="icon"
-      @click="snoozeConversation()"
-    />
-
-    <menu-item-with-submenu :option="priorityConfig">
-      <menu-item
-        v-for="(option, i) in priorityConfig.options"
-        :key="i"
-        :option="option"
-        @click="assignPriority(option.key)"
-      />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="labelMenuConfig"
-      :sub-menu-available="!!labels.length"
-    >
-      <menu-item
-        v-for="label in labels"
-        :key="label.id"
-        :option="generateMenuLabelConfig(label, 'label')"
-        variant="label"
-        @click="$emit('assign-label', label)"
-      />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="agentMenuConfig"
-      :sub-menu-available="!!assignableAgents.length"
-    >
-      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
-      <template v-else>
-        <menu-item
-          v-for="agent in assignableAgents"
-          :key="agent.id"
-          :option="generateMenuLabelConfig(agent, 'agent')"
-          variant="agent"
-          @click="$emit('assign-agent', agent)"
-        />
-      </template>
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
-      :option="teamMenuConfig"
-      :sub-menu-available="!!teams.length"
-    >
-      <menu-item
-        v-for="team in teams"
-        :key="team.id"
-        :option="generateMenuLabelConfig(team, 'team')"
-        @click="$emit('assign-team', team)"
-      />
-    </menu-item-with-submenu>
-  </div>
-</template>
-
 <script>
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
@@ -219,7 +146,7 @@ export default {
   },
   methods: {
     toggleStatus(status, snoozedUntil) {
-      this.$emit('update-conversation', status, snoozedUntil);
+      this.$emit('updateConversation', status, snoozedUntil);
     },
     async snoozeConversation() {
       await this.$store.dispatch('setContextMenuChatId', this.chatId);
@@ -227,7 +154,7 @@ export default {
       ninja.open({ parent: 'snooze_conversation' });
     },
     assignPriority(priority) {
-      this.$emit('assign-priority', priority);
+      this.$emit('assignPriority', priority);
     },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
@@ -250,3 +177,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="p-1 bg-white rounded-md shadow-xl dark:bg-slate-700">
+    <MenuItem
+      v-if="!hasUnreadMessages"
+      :option="unreadOption"
+      variant="icon"
+      @click="$emit('markAsUnread')"
+    />
+    <template v-for="option in statusMenuConfig">
+      <MenuItem
+        v-if="show(option.key)"
+        :key="option.key"
+        :option="option"
+        variant="icon"
+        @click="toggleStatus(option.key, null)"
+      />
+    </template>
+    <MenuItem
+      v-if="showSnooze"
+      :option="snoozeOption"
+      variant="icon"
+      @click="snoozeConversation()"
+    />
+
+    <MenuItemWithSubmenu :option="priorityConfig">
+      <MenuItem
+        v-for="(option, i) in priorityConfig.options"
+        :key="i"
+        :option="option"
+        @click="assignPriority(option.key)"
+      />
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="labelMenuConfig"
+      :sub-menu-available="!!labels.length"
+    >
+      <MenuItem
+        v-for="label in labels"
+        :key="label.id"
+        :option="generateMenuLabelConfig(label, 'label')"
+        variant="label"
+        @click="$emit('assignLabel', label)"
+      />
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="agentMenuConfig"
+      :sub-menu-available="!!assignableAgents.length"
+    >
+      <AgentLoadingPlaceholder v-if="assignableAgentsUiFlags.isFetching" />
+      <template v-else>
+        <MenuItem
+          v-for="agent in assignableAgents"
+          :key="agent.id"
+          :option="generateMenuLabelConfig(agent, 'agent')"
+          variant="agent"
+          @click="$emit('assignAgent', agent)"
+        />
+      </template>
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
+      :option="teamMenuConfig"
+      :sub-menu-available="!!teams.length"
+    >
+      <MenuItem
+        v-for="team in teams"
+        :key="team.id"
+        :option="generateMenuLabelConfig(team, 'team')"
+        @click="$emit('assignTeam', team)"
+      />
+    </MenuItemWithSubmenu>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
index 17962a169..f62117f96 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="agent-placeholder">
-    <spinner />
-    <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -15,6 +8,13 @@ export default {
 };
 </script>
 
+<template>
+  <div class="agent-placeholder">
+    <Spinner />
+    <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .agent-placeholder {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 0a132de73..578618e03 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    class="menu text-slate-800 dark:text-slate-100"
-    role="button"
-    @click.stop="$emit('click')"
-  >
-    <fluent-icon
-      v-if="variant === 'icon' && option.icon"
-      :icon="option.icon"
-      size="14"
-      class="menu-icon"
-    />
-    <span
-      v-if="variant === 'label' && option.color"
-      class="label-pill"
-      :style="{ backgroundColor: option.color }"
-    />
-    <thumbnail
-      v-if="variant === 'agent'"
-      :username="option.label"
-      :src="option.thumbnail"
-      :status="option.status"
-      size="20px"
-      class="agent-thumbnail"
-    />
-    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
-      {{ option.label }}
-    </p>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
@@ -48,6 +17,37 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="menu text-slate-800 dark:text-slate-100"
+    role="button"
+    @click.stop="$emit('click')"
+  >
+    <fluent-icon
+      v-if="variant === 'icon' && option.icon"
+      :icon="option.icon"
+      size="14"
+      class="menu-icon"
+    />
+    <span
+      v-if="variant === 'label' && option.color"
+      class="label-pill"
+      :style="{ backgroundColor: option.color }"
+    />
+    <Thumbnail
+      v-if="variant === 'agent'"
+      :username="option.label"
+      :src="option.thumbnail"
+      :status="option.status"
+      size="20px"
+      class="agent-thumbnail"
+    />
+    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
+      {{ option.label }}
+    </p>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .menu {
   width: calc(var(--space-mega) * 2);
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 619b5aeab..37fa5a36c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
@@ -17,21 +32,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    subMenuAvailable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .menu-with-submenu {
   min-width: calc(6.25rem * 2);
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index 115cb64ff..889051674 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -1,93 +1,3 @@
-<template>
-  <li
-    v-if="shouldShowSuggestions"
-    class="label-suggestion right"
-    @mouseover="isHovered = true"
-    @mouseleave="isHovered = false"
-  >
-    <div class="wrap">
-      <div class="label-suggestion--container">
-        <h6 class="label-suggestion--title">Suggested labels</h6>
-        <div class="label-suggestion--options">
-          <button
-            v-for="label in preparedLabels"
-            :key="label.title"
-            v-tooltip.top="{
-              content: selectedLabels.includes(label.title)
-                ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
-                : labelTooltip,
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            class="label-suggestion--option"
-            @click="pushOrAddLabel(label.title)"
-          >
-            <woot-label
-              variant="dashed"
-              v-bind="label"
-              :bg-color="
-                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
-              "
-            />
-          </button>
-          <woot-button
-            v-if="preparedLabels.length === 1"
-            v-tooltip.top="{
-              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            variant="smooth"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
-            @click="dismissSuggestions"
-          />
-        </div>
-        <div v-if="preparedLabels.length > 1">
-          <woot-button
-            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
-            class="label--add"
-            icon="add"
-            size="tiny"
-            @click="addAllLabels"
-          >
-            {{ addButtonText }}
-          </woot-button>
-          <woot-button
-            v-tooltip.top="{
-              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
-              delay: { show: 600, hide: 0 },
-              hideOnClick: true,
-            }"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            variant="smooth"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
-            @click="dismissSuggestions"
-          />
-        </div>
-      </div>
-      <div class="sender--info has-tooltip" data-original-title="null">
-        <woot-thumbnail
-          v-tooltip.top="{
-            content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
-            delay: { show: 600, hide: 0 },
-            hideOnClick: true,
-          }"
-          size="16px"
-        >
-          <avatar class="user-thumbnail thumbnail-rounded">
-            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
-          </avatar>
-        </woot-thumbnail>
-      </div>
-    </div>
-  </li>
-</template>
-
 <script>
 // components
 import WootButton from '../../../ui/WootButton.vue';
@@ -229,6 +139,98 @@ export default {
 };
 </script>
 
+<template>
+  <li
+    v-if="shouldShowSuggestions"
+    class="label-suggestion right"
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div class="wrap">
+      <div class="label-suggestion--container">
+        <h6 class="label-suggestion--title">
+          {{ $t('LABEL_MGMT.SUGGESTIONS.SUGGESTED_LABELS') }}
+        </h6>
+        <div class="label-suggestion--options">
+          <button
+            v-for="label in preparedLabels"
+            :key="label.title"
+            v-tooltip.top="{
+              content: selectedLabels.includes(label.title)
+                ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
+                : labelTooltip,
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            class="label-suggestion--option"
+            @click="pushOrAddLabel(label.title)"
+          >
+            <woot-label
+              variant="dashed"
+              v-bind="label"
+              :bg-color="
+                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
+              "
+            />
+          </button>
+          <WootButton
+            v-if="preparedLabels.length === 1"
+            v-tooltip.top="{
+              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            variant="smooth"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
+            class="label--add"
+            icon="dismiss"
+            size="tiny"
+            @click="dismissSuggestions"
+          />
+        </div>
+        <div v-if="preparedLabels.length > 1">
+          <WootButton
+            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
+            class="label--add"
+            icon="add"
+            size="tiny"
+            @click="addAllLabels"
+          >
+            {{ addButtonText }}
+          </WootButton>
+          <WootButton
+            v-tooltip.top="{
+              content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
+              delay: { show: 600, hide: 0 },
+              hideOnClick: true,
+            }"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
+            variant="smooth"
+            class="label--add"
+            icon="dismiss"
+            size="tiny"
+            @click="dismissSuggestions"
+          />
+        </div>
+      </div>
+      <div class="sender--info has-tooltip" data-original-title="null">
+        <woot-thumbnail
+          v-tooltip.top="{
+            content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
+            delay: { show: 600, hide: 0 },
+            hideOnClick: true,
+          }"
+          size="16px"
+        >
+          <Avatar class="user-thumbnail thumbnail-rounded">
+            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
+          </Avatar>
+        </woot-thumbnail>
+      </div>
+    </div>
+  </li>
+</template>
+
 <style scoped lang="scss">
 .wrap {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 4dd06f673..c1565ea90 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -1,102 +1,3 @@
-<template>
-  <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
-    <div class="triangle">
-      <svg height="12" viewBox="0 0 24 12" width="24">
-        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
-      </svg>
-    </div>
-    <div class="header flex items-center justify-between">
-      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
-    </div>
-    <div class="container">
-      <div
-        v-if="assignableAgentsUiFlags.isFetching"
-        class="agent__list-loading"
-      >
-        <spinner />
-        <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
-      </div>
-      <div v-else class="agent__list-container">
-        <ul v-if="!selectedAgent">
-          <li class="search-container">
-            <div
-              class="agent-list-search h-8 flex justify-between items-center gap-2"
-            >
-              <fluent-icon icon="search" class="search-icon" size="16" />
-              <input
-                ref="search"
-                v-model="query"
-                type="search"
-                placeholder="Search"
-                class="agent--search_input"
-              />
-            </div>
-          </li>
-          <li v-for="agent in filteredAgents" :key="agent.id">
-            <div class="agent-list-item" @click="assignAgent(agent)">
-              <thumbnail
-                :src="agent.thumbnail"
-                :status="agent.availability_status"
-                :username="agent.name"
-                size="22px"
-              />
-              <span class="my-0 text-slate-800 dark:text-slate-75">
-                {{ agent.name }}
-              </span>
-            </div>
-          </li>
-        </ul>
-        <div v-else class="agent-confirmation-container">
-          <p v-if="selectedAgent.id">
-            {{
-              $t('BULK_ACTION.ASSIGN_CONFIRMATION_LABEL', {
-                conversationCount,
-                conversationLabel,
-              })
-            }}
-            <strong>
-              {{ selectedAgent.name }}
-            </strong>
-            <span>?</span>
-          </p>
-          <p v-else>
-            {{
-              $t('BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL', {
-                conversationCount,
-                conversationLabel,
-              })
-            }}
-          </p>
-          <div class="agent-confirmation-actions">
-            <woot-button
-              color-scheme="primary"
-              variant="smooth"
-              @click="goBack"
-            >
-              {{ $t('BULK_ACTION.GO_BACK_LABEL') }}
-            </woot-button>
-            <woot-button
-              color-scheme="primary"
-              variant="flat"
-              :is-loading="uiFlags.isUpdating"
-              @click="submit"
-            >
-              {{ $t('BULK_ACTION.YES') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -127,7 +28,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'bulkActions/getUIFlags',
-      inboxes: 'inboxes/getInboxes',
       assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     filteredAgents() {
@@ -184,6 +84,104 @@ export default {
 };
 </script>
 
+<template>
+  <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between header">
+      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="container">
+      <div
+        v-if="assignableAgentsUiFlags.isFetching"
+        class="agent__list-loading"
+      >
+        <Spinner />
+        <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
+      </div>
+      <div v-else class="agent__list-container">
+        <ul v-if="!selectedAgent">
+          <li class="search-container">
+            <div
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
+            >
+              <fluent-icon icon="search" class="search-icon" size="16" />
+              <input
+                v-model="query"
+                type="search"
+                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+                class="agent--search_input"
+              />
+            </div>
+          </li>
+          <li v-for="agent in filteredAgents" :key="agent.id">
+            <div class="agent-list-item" @click="assignAgent(agent)">
+              <Thumbnail
+                :src="agent.thumbnail"
+                :status="agent.availability_status"
+                :username="agent.name"
+                size="22px"
+              />
+              <span class="my-0 text-slate-800 dark:text-slate-75">
+                {{ agent.name }}
+              </span>
+            </div>
+          </li>
+        </ul>
+        <div v-else class="agent-confirmation-container">
+          <p v-if="selectedAgent.id">
+            {{
+              $t('BULK_ACTION.ASSIGN_CONFIRMATION_LABEL', {
+                conversationCount,
+                conversationLabel,
+              })
+            }}
+            <strong>
+              {{ selectedAgent.name }}
+            </strong>
+            <span>?</span>
+          </p>
+          <p v-else>
+            {{
+              $t('BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL', {
+                conversationCount,
+                conversationLabel,
+              })
+            }}
+          </p>
+          <div class="agent-confirmation-actions">
+            <woot-button
+              color-scheme="primary"
+              variant="smooth"
+              @click="goBack"
+            >
+              {{ $t('BULK_ACTION.GO_BACK_LABEL') }}
+            </woot-button>
+            <woot-button
+              color-scheme="primary"
+              variant="flat"
+              :is-loading="uiFlags.isUpdating"
+              @click="submit"
+            >
+              {{ $t('BULK_ACTION.YES') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .bulk-action__agents {
   @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 198774dad..746b932ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -1,112 +1,3 @@
-<template>
-  <div class="bulk-action__container">
-    <div class="flex items-center justify-between">
-      <label class="bulk-action__panel flex items-center justify-between">
-        <input
-          ref="selectAllCheck"
-          type="checkbox"
-          class="checkbox"
-          :checked="allConversationsSelected"
-          :indeterminate.prop="!allConversationsSelected"
-          @change="selectAll($event)"
-        />
-        <span>
-          {{
-            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-              conversationCount: conversations.length,
-            })
-          }}
-        </span>
-      </label>
-      <div class="bulk-action__actions flex gap-1 items-center">
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="tag"
-          @click="toggleLabelActions"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="repeat"
-          @click="toggleUpdateActions"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="person-assign"
-          @click="toggleAgentList"
-        />
-        <woot-button
-          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="people-team-add"
-          @click="toggleTeamsList"
-        />
-      </div>
-      <transition name="popover-animation">
-        <label-actions
-          v-if="showLabelActions"
-          class="label-actions-box"
-          @assign="assignLabels"
-          @close="showLabelActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <update-actions
-          v-if="showUpdateActions"
-          class="update-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          :show-resolve="!showResolvedAction"
-          :show-reopen="!showOpenAction"
-          :show-snooze="!showSnoozedAction"
-          @update="updateConversations"
-          @close="showUpdateActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <agent-selector
-          v-if="showAgentsList"
-          class="agent-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="submit"
-          @close="showAgentsList = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <team-actions
-          v-if="showTeamsList"
-          class="team-actions-box"
-          @assign-team="assignTeam"
-          @close="showTeamsList = false"
-        />
-      </transition>
-    </div>
-    <div v-if="allConversationsSelected" class="bulk-action__alert">
-      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-    </div>
-    <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
@@ -218,22 +109,22 @@ export default {
       this.showCustomTimeSnoozeModal = false;
     },
     selectAll(e) {
-      this.$emit('select-all-conversations', e.target.checked);
+      this.$emit('selectAllConversations', e.target.checked);
     },
     submit(agent) {
-      this.$emit('assign-agent', agent);
+      this.$emit('assignAgent', agent);
     },
     updateConversations(status, snoozedUntil) {
-      this.$emit('update-conversations', status, snoozedUntil);
+      this.$emit('updateConversations', status, snoozedUntil);
     },
     assignLabels(labels) {
-      this.$emit('assign-labels', labels);
+      this.$emit('assignLabels', labels);
     },
     assignTeam(team) {
-      this.$emit('assign-team', team);
+      this.$emit('assignTeam', team);
     },
     resolveConversations() {
-      this.$emit('resolve-conversations');
+      this.$emit('resolveConversations');
     },
     toggleUpdateActions() {
       this.showUpdateActions = !this.showUpdateActions;
@@ -251,6 +142,114 @@ export default {
 };
 </script>
 
+<template>
+  <div class="bulk-action__container">
+    <div class="flex items-center justify-between">
+      <label class="flex items-center justify-between bulk-action__panel">
+        <input
+          type="checkbox"
+          class="checkbox"
+          :checked="allConversationsSelected"
+          :indeterminate.prop="!allConversationsSelected"
+          @change="selectAll($event)"
+        />
+        <span>
+          {{
+            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+              conversationCount: conversations.length,
+            })
+          }}
+        </span>
+      </label>
+      <div class="flex items-center gap-1 bulk-action__actions">
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="tag"
+          @click="toggleLabelActions"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="repeat"
+          @click="toggleUpdateActions"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="person-assign"
+          @click="toggleAgentList"
+        />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="people-team-add"
+          @click="toggleTeamsList"
+        />
+      </div>
+      <transition name="popover-animation">
+        <LabelActions
+          v-if="showLabelActions"
+          class="label-actions-box"
+          @assign="assignLabels"
+          @close="showLabelActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <UpdateActions
+          v-if="showUpdateActions"
+          class="update-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          :show-resolve="!showResolvedAction"
+          :show-reopen="!showOpenAction"
+          :show-snooze="!showSnoozedAction"
+          @update="updateConversations"
+          @close="showUpdateActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <AgentSelector
+          v-if="showAgentsList"
+          class="agent-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          @select="submit"
+          @close="showAgentsList = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <TeamActions
+          v-if="showTeamsList"
+          class="team-actions-box"
+          @assignTeam="assignTeam"
+          @close="showTeamsList = false"
+        />
+      </transition>
+    </div>
+    <div v-if="allConversationsSelected" class="bulk-action__alert">
+      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+    </div>
+    <woot-modal
+      :show.sync="showCustomTimeSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <CustomSnoozeModal
+        @close="hideCustomSnoozeModal"
+        @chooseTime="customSnoozeTime"
+      />
+    </woot-modal>
+  </div>
+</template>
+
 <style scoped lang="scss">
 // For RTL direction view
 .app-rtl--wrapper {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 80224532a..242369e5e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -1,78 +1,3 @@
-<template>
-  <div v-on-clickaway="onClose" class="labels-container">
-    <div class="triangle">
-      <svg height="12" viewBox="0 0 24 12" width="24">
-        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
-      </svg>
-    </div>
-    <div class="header flex items-center justify-between">
-      <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
-      <woot-button
-        size="tiny"
-        variant="clear"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
-    </div>
-    <div class="labels-list">
-      <header class="labels-list__header">
-        <div
-          class="label-list-search h-8 flex justify-between items-center gap-2"
-        >
-          <fluent-icon icon="search" class="search-icon" size="16" />
-          <input
-            ref="search"
-            v-model="query"
-            type="search"
-            placeholder="Search"
-            class="label--search_input"
-          />
-        </div>
-      </header>
-      <ul class="labels-list__body">
-        <li
-          v-for="label in filteredLabels"
-          :key="label.id"
-          class="label__list-item"
-        >
-          <label
-            class="item"
-            :class="{ 'label-selected': isLabelSelected(label.title) }"
-          >
-            <input
-              v-model="selectedLabels"
-              type="checkbox"
-              :value="label.title"
-              class="label-checkbox"
-            />
-            <span
-              class="label-title overflow-hidden whitespace-nowrap text-ellipsis"
-            >
-              {{ label.title }}
-            </span>
-            <span
-              class="label-pill"
-              :style="{ backgroundColor: label.color }"
-            />
-          </label>
-        </li>
-      </ul>
-      <footer class="labels-list__footer">
-        <woot-button
-          size="small"
-          is-expanded
-          color-scheme="primary"
-          :disabled="!selectedLabels.length"
-          @click="$emit('assign', selectedLabels)"
-        >
-          <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
-        </woot-button>
-      </footer>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -105,6 +30,80 @@ export default {
 };
 </script>
 
+<template>
+  <div v-on-clickaway="onClose" class="labels-container">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between header">
+      <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="labels-list">
+      <header class="labels-list__header">
+        <div
+          class="flex items-center justify-between h-8 gap-2 label-list-search"
+        >
+          <fluent-icon icon="search" class="search-icon" size="16" />
+          <input
+            v-model="query"
+            type="search"
+            :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+            class="label--search_input"
+          />
+        </div>
+      </header>
+      <ul class="labels-list__body">
+        <li
+          v-for="label in filteredLabels"
+          :key="label.id"
+          class="label__list-item"
+        >
+          <label
+            class="item"
+            :class="{ 'label-selected': isLabelSelected(label.title) }"
+          >
+            <input
+              v-model="selectedLabels"
+              type="checkbox"
+              :value="label.title"
+              class="label-checkbox"
+            />
+            <span
+              class="overflow-hidden label-title whitespace-nowrap text-ellipsis"
+            >
+              {{ label.title }}
+            </span>
+            <span
+              class="label-pill"
+              :style="{ backgroundColor: label.color }"
+            />
+          </label>
+        </li>
+      </ul>
+      <footer class="labels-list__footer">
+        <woot-button
+          size="small"
+          is-expanded
+          color-scheme="primary"
+          :disabled="!selectedLabels.length"
+          @click="$emit('assign', selectedLabels)"
+        >
+          <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
+        </woot-button>
+      </footer>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .labels-list {
   @apply flex flex-col max-h-[15rem] min-h-[auto];
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index fcfaa61df..e72b7fa69 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -1,3 +1,34 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  data() {
+    return {
+      query: '',
+      selectedteams: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ teams: 'teams/getTeams' }),
+    filteredTeams() {
+      return [
+        { name: 'None', id: 0 },
+        ...this.teams.filter(team =>
+          team.name.toLowerCase().includes(this.query.toLowerCase())
+        ),
+      ];
+    },
+  },
+  methods: {
+    assignTeam(key) {
+      this.$emit('assignTeam', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <template>
   <div v-on-clickaway="onClose" class="bulk-action__teams">
     <div class="triangle">
@@ -5,7 +36,7 @@
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex items-center justify-between">
+    <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -20,14 +51,13 @@
         <ul>
           <li class="search-container">
             <div
-              class="agent-list-search h-8 flex justify-between items-center gap-2"
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
-                ref="search"
                 v-model="query"
                 type="search"
-                placeholder="Search"
+                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
                 class="agent--search_input"
               />
             </div>
@@ -58,37 +88,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  data() {
-    return {
-      query: '',
-      selectedteams: [],
-    };
-  },
-  computed: {
-    ...mapGetters({ teams: 'teams/getTeams' }),
-    filteredTeams() {
-      return [
-        { name: 'None', id: 0 },
-        ...this.teams.filter(team =>
-          team.name.toLowerCase().includes(this.query.toLowerCase())
-        ),
-      ];
-    },
-  },
-  methods: {
-    assignTeam(key) {
-      this.$emit('assign-team', key);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .bulk-action__teams {
   @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 0653fc0cc..6deb92683 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -5,19 +5,7 @@ import { ref } from 'vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
-const { t } = useI18n();
-
-const emits = defineEmits(['update', 'close']);
-
 const props = defineProps({
-  selectedInboxes: {
-    type: Array,
-    default: () => [],
-  },
-  conversationCount: {
-    type: Number,
-    default: 0,
-  },
   showResolve: {
     type: Boolean,
     default: true,
@@ -32,6 +20,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['update', 'close']);
+
+const { t } = useI18n();
+
 const actions = ref([
   { icon: 'checkmark', key: 'resolved' },
   { icon: 'arrow-redo', key: 'open' },
@@ -45,12 +37,12 @@ const updateConversations = key => {
     const ninja = document.querySelector('ninja-keys');
     ninja?.open({ parent: 'bulk_action_snooze_conversation' });
   } else {
-    emits('update', key);
+    emit('update', key);
   }
 };
 
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const showAction = key => {
@@ -75,7 +67,7 @@ const actionLabel = key => {
 <template>
   <div
     v-on-clickaway="onClose"
-    class="absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md"
+    class="absolute z-20 w-auto origin-top-right bg-white border border-solid rounded-lg shadow-md right-2 top-12 dark:bg-slate-800 border-slate-50 dark:border-slate-700"
   >
     <div
       class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
@@ -102,9 +94,9 @@ const actionLabel = key => {
       />
     </div>
     <div class="px-2.5 pt-0 pb-2.5">
-      <woot-dropdown-menu class="m-0 list-none">
+      <WootDropdownMenu class="m-0 list-none">
         <template v-for="action in actions">
-          <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
+          <WootDropdownItem v-if="showAction(action.key)" :key="action.key">
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -114,9 +106,9 @@ const actionLabel = key => {
             >
               {{ actionLabel(action.key) }}
             </woot-button>
-          </woot-dropdown-item>
+          </WootDropdownItem>
         </template>
-      </woot-dropdown-menu>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 079d1c7bf..6c719fc01 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -1,56 +1,26 @@
-<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,
+    conversationLabels: {
+      type: Array,
       required: true,
     },
-    conversationLabels: {
-      type: String,
-      required: false,
-      default: '',
-    },
+  },
+  setup(props) {
+    const accountLabels = useMapGetter('labels/getLabels');
+
+    const activeLabels = computed(() => {
+      return accountLabels.value.filter(({ title }) =>
+        props.conversationLabels.includes(title)
+      );
+    });
+
+    return {
+      activeLabels,
+    };
   },
   data() {
     return {
@@ -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 5304627c4..108461353 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 e2859e890..a30bcbc77 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -1,63 +1,3 @@
-<template>
-  <div>
-    <woot-input
-      v-model="formState.title"
-      :class="{ error: v$.title.$error }"
-      class="w-full"
-      :styles="{ ...inputStyles, padding: '6px 12px' }"
-      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
-      :placeholder="
-        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
-      "
-      :error="nameError"
-      @input="v$.title.$touch"
-    />
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
-      <textarea
-        v-model="formState.description"
-        :style="{ ...inputStyles, padding: '8px 12px' }"
-        rows="3"
-        class="text-sm"
-        :placeholder="
-          $t(
-            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
-          )
-        "
-      />
-    </label>
-    <div class="flex flex-col gap-4">
-      <searchable-dropdown
-        v-for="dropdown in dropdowns"
-        :key="dropdown.type"
-        :type="dropdown.type"
-        :value="formState[dropdown.type]"
-        :label="$t(dropdown.label)"
-        :items="dropdown.items"
-        :placeholder="$t(dropdown.placeholder)"
-        :error="dropdown.error"
-        @change="onChange"
-      />
-    </div>
-    <div class="flex items-center justify-end w-full gap-2 mt-8">
-      <woot-button
-        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
-        @click.prevent="onClose"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
-      </woot-button>
-      <woot-button
-        :is-disabled="isSubmitDisabled"
-        class="px-4 rounded-xl"
-        :is-loading="isCreating"
-        @click.prevent="createIssue"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { reactive, computed, onMounted, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -69,10 +9,6 @@ import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import SearchableDropdown from './SearchableDropdown.vue';
 
 const props = defineProps({
-  accountId: {
-    type: [Number, String],
-    required: true,
-  },
   conversationId: {
     type: [Number, String],
     required: true,
@@ -266,3 +202,63 @@ const createIssue = async () => {
 
 onMounted(getTeams);
 </script>
+
+<template>
+  <div>
+    <woot-input
+      v-model="formState.title"
+      :class="{ error: v$.title.$error }"
+      class="w-full"
+      :styles="{ ...inputStyles, padding: '6px 12px' }"
+      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
+      :placeholder="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
+      "
+      :error="nameError"
+      @input="v$.title.$touch"
+    />
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
+      <textarea
+        v-model="formState.description"
+        :style="{ ...inputStyles, padding: '8px 12px' }"
+        rows="3"
+        class="text-sm"
+        :placeholder="
+          $t(
+            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
+          )
+        "
+      />
+    </label>
+    <div class="flex flex-col gap-4">
+      <SearchableDropdown
+        v-for="dropdown in dropdowns"
+        :key="dropdown.type"
+        :type="dropdown.type"
+        :value="formState[dropdown.type]"
+        :label="$t(dropdown.label)"
+        :items="dropdown.items"
+        :placeholder="$t(dropdown.placeholder)"
+        :error="dropdown.error"
+        @change="onChange"
+      />
+    </div>
+    <div class="flex items-center justify-end w-full gap-2 mt-8">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isCreating"
+        @click.prevent="createIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index 589178853..139ca9792 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -1,3 +1,53 @@
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { computed, ref } from 'vue';
+import LinkIssue from './LinkIssue.vue';
+import CreateIssue from './CreateIssue.vue';
+
+const props = defineProps({
+  accountId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+
+const selectedTabIndex = ref(0);
+
+const title = computed(() => {
+  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
+  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
+    conversationId: props.conversation.id,
+    name,
+  });
+});
+
+const tabs = ref([
+  {
+    key: 0,
+    name: t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
+  },
+  {
+    key: 1,
+    name: t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE'),
+  },
+]);
+const onClose = () => {
+  emit('close');
+};
+
+const onClickTabChange = index => {
+  selectedTabIndex.value = index;
+};
+</script>
+
 <template>
   <div class="flex flex-col h-auto overflow-auto">
     <woot-modal-header
@@ -23,7 +73,7 @@
         </woot-tabs>
       </div>
       <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
-        <create-issue
+        <CreateIssue
           :account-id="accountId"
           :conversation-id="conversation.id"
           :title="title"
@@ -32,7 +82,7 @@
       </div>
 
       <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue
+        <LinkIssue
           :conversation-id="conversation.id"
           :title="title"
           @close="onClose"
@@ -41,52 +91,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import { useI18n } from 'dashboard/composables/useI18n';
-import { computed, ref } from 'vue';
-import LinkIssue from './LinkIssue.vue';
-import CreateIssue from './CreateIssue.vue';
-
-const props = defineProps({
-  accountId: {
-    type: [Number, String],
-    required: true,
-  },
-  conversation: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const selectedTabIndex = ref(0);
-
-const title = computed(() => {
-  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
-  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
-    conversationId: props.conversation.id,
-    name,
-  });
-});
-
-const emits = defineEmits(['close']);
-
-const tabs = ref([
-  {
-    key: 0,
-    name: t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
-  },
-  {
-    key: 1,
-    name: t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE'),
-  },
-]);
-const onClose = () => {
-  emits('close');
-};
-
-const onClickTabChange = index => {
-  selectedTabIndex.value = index;
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 3304f6040..8113ef29e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -4,13 +4,6 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.
 import IssueHeader from './IssueHeader.vue';
 import { computed } from 'vue';
 
-const priorityMap = {
-  1: 'Urgent',
-  2: 'High',
-  3: 'Medium',
-  4: 'Low',
-};
-
 const props = defineProps({
   issue: {
     type: Object,
@@ -22,7 +15,14 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['unlink-issue']);
+const emit = defineEmits(['unlinkIssue']);
+
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
 
 const formattedDate = computed(() => {
   const { createdAt } = props.issue;
@@ -50,7 +50,7 @@ const priorityLabel = computed(() => {
 });
 
 const unlinkIssue = () => {
-  emit('unlink-issue', props.linkId);
+  emit('unlinkIssue', props.linkId);
 };
 </script>
 
@@ -59,11 +59,11 @@ const unlinkIssue = () => {
     class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
   >
     <div class="flex flex-col w-full">
-      <issue-header
+      <IssueHeader
         :identifier="issue.identifier"
         :link-id="linkId"
         :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
+        @unlinkIssue="unlinkIssue"
       />
 
       <span class="mt-2 text-sm font-medium text-ash-900">
@@ -77,7 +77,7 @@ const unlinkIssue = () => {
       </span>
     </div>
     <div class="flex flex-row items-center h-6 gap-2">
-      <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
+      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
       <div v-if="assignee" class="w-px h-3 bg-ash-200" />
       <div class="flex items-center gap-1 py-1">
         <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
index add7b5608..3b2396a94 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -1,3 +1,29 @@
+<script setup>
+import { inject } from 'vue';
+const props = defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  issueUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlinkIssue']);
+
+const isUnlinking = inject('isUnlinking');
+
+const unlinkIssue = () => {
+  emit('unlinkIssue');
+};
+
+const openIssue = () => {
+  window.open(props.issueUrl, '_blank');
+};
+</script>
+
 <template>
   <div class="flex flex-row justify-between">
     <div
@@ -38,29 +64,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { inject } from 'vue';
-const props = defineProps({
-  identifier: {
-    type: String,
-    required: true,
-  },
-  issueUrl: {
-    type: String,
-    required: true,
-  },
-});
-
-const isUnlinking = inject('isUnlinking');
-
-const emit = defineEmits(['unlink-issue']);
-
-const unlinkIssue = () => {
-  emit('unlink-issue');
-};
-
-const openIssue = () => {
-  window.open(props.issueUrl, '_blank');
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 458871c38..c2fb15b21 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 70167147b..dc7c03a2f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
@@ -1,43 +1,8 @@
-<template>
-  <div
-    class="flex w-full"
-    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
-  >
-    <label class="w-full" :class="{ error: hasError }">
-      {{ label }}
-      <filter-button
-        right-icon="chevron-down"
-        :button-text="selectedItemName"
-        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
-        @click="toggleDropdown"
-      >
-        <template v-if="shouldShowDropdown" #dropdown>
-          <filter-list-dropdown
-            v-on-clickaway="toggleDropdown"
-            :show-clear-filter="false"
-            :list-items="items"
-            :active-filter-id="selectedItemId"
-            :input-placeholder="placeholder"
-            enable-search
-            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-            @click="onSelect"
-          />
-        </template>
-      </filter-button>
-      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
-    </label>
-  </div>
-</template>
-
 <script setup>
 import { ref, computed, defineComponent } from 'vue';
 import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
-defineComponent({
-  name: 'SearchableDropdown',
-});
-
 const props = defineProps({
   type: { type: String, required: true },
   label: { type: String, default: null },
@@ -48,6 +13,11 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['change']);
+
+defineComponent({
+  name: 'SearchableDropdown',
+});
+
 const shouldShowDropdown = ref(false);
 
 const toggleDropdown = () => {
@@ -71,3 +41,34 @@ const selectedItemName = computed(
 
 const selectedItemId = computed(() => selectedItem.value?.id || null);
 </script>
+
+<template>
+  <div
+    class="flex w-full"
+    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
+  >
+    <label class="w-full" :class="{ error: hasError }">
+      {{ label }}
+      <FilterButton
+        right-icon="chevron-down"
+        :button-text="selectedItemName"
+        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+        @click="toggleDropdown"
+      >
+        <template v-if="shouldShowDropdown" #dropdown>
+          <FilterListDropdown
+            v-on-clickaway="toggleDropdown"
+            :show-clear-filter="false"
+            :list-items="items"
+            :active-filter-id="selectedItemId"
+            :input-placeholder="placeholder"
+            enable-search
+            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+            @click="onSelect"
+          />
+        </template>
+      </FilterButton>
+      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
+    </label>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index c7861b039..6d2c789c2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="relative" :class="{ group: linkedIssue }">
-    <woot-button
-      v-on-clickaway="closeIssue"
-      v-tooltip="tooltipText"
-      variant="clear"
-      color-scheme="secondary"
-      @click="openIssue"
-    >
-      <fluent-icon
-        icon="linear"
-        size="19"
-        class="text-[#5E6AD2]"
-        view-box="0 0 19 19"
-      />
-      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
-        {{ linkedIssue.issue.identifier }}
-      </span>
-    </woot-button>
-    <issue
-      v-if="linkedIssue"
-      :issue="linkedIssue.issue"
-      :link-id="linkedIssue.id"
-      class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
-    />
-    <woot-modal
-      :show.sync="shouldShowPopup"
-      :on-close="closePopup"
-      :close-on-backdrop-click="false"
-      class="!items-start [&>div]:!top-12 [&>div]:sticky"
-    >
-      <create-or-link-issue
-        :conversation="conversation"
-        :account-id="currentAccountId"
-        @close="closePopup"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script setup>
 import { computed, ref, onMounted, watch, defineComponent, provide } from 'vue';
 import { useAlert } from 'dashboard/composables';
@@ -49,10 +8,6 @@ import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
 import Issue from './Issue.vue';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 
-defineComponent({
-  name: 'Linear',
-});
-
 const props = defineProps({
   conversationId: {
     type: [Number, String],
@@ -60,6 +15,10 @@ const props = defineProps({
   },
 });
 
+defineComponent({
+  name: 'Linear',
+});
+
 const getters = useStoreGetters();
 const { t } = useI18n();
 
@@ -139,3 +98,44 @@ onMounted(() => {
   loadLinkedIssue();
 });
 </script>
+
+<template>
+  <div class="relative" :class="{ group: linkedIssue }">
+    <woot-button
+      v-on-clickaway="closeIssue"
+      v-tooltip="tooltipText"
+      variant="clear"
+      color-scheme="secondary"
+      @click="openIssue"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
+      />
+      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
+        {{ linkedIssue.issue.identifier }}
+      </span>
+    </woot-button>
+    <Issue
+      v-if="linkedIssue"
+      :issue="linkedIssue.issue"
+      :link-id="linkedIssue.id"
+      class="absolute right-0 top-[40px] invisible group-hover:visible"
+      @unlinkIssue="unlinkIssue"
+    />
+    <woot-modal
+      :show.sync="shouldShowPopup"
+      :on-close="closePopup"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <CreateOrLinkIssue
+        :conversation="conversation"
+        :account-id="currentAccountId"
+        @close="closePopup"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
index 4e9dc9538..2e38a28b7 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 e3dd8c239..f3c57155f 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -1,38 +1,3 @@
-<template>
-  <div>
-    <label>
-      <span v-if="label">{{ label }}</span>
-    </label>
-    <woot-thumbnail
-      v-if="src"
-      size="80px"
-      :src="src"
-      :username="usernameAvatar"
-    />
-    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
-      <woot-button
-        color-scheme="alert"
-        variant="hollow"
-        size="tiny"
-        type="button"
-        @click="onAvatarDelete"
-      >
-        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
-      </woot-button>
-    </div>
-    <label>
-      <input
-        id="file"
-        ref="file"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        @change="handleImageUpload"
-      />
-      <slot />
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -71,6 +36,41 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
+    <woot-thumbnail
+      v-if="src"
+      size="80px"
+      :src="src"
+      :username="usernameAvatar"
+    />
+    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
+      <woot-button
+        color-scheme="alert"
+        variant="hollow"
+        size="tiny"
+        type="button"
+        @click="onAvatarDelete"
+      >
+        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
+      </woot-button>
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        @change="handleImageUpload"
+      />
+      <slot />
+    </label>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .avatar-delete-btn {
   margin-top: var(--space-smaller);
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index 9ddaf3e5c..770f47d14 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -1,24 +1,3 @@
-<template>
-  <label class="input-container">
-    <span v-if="label">{{ label }}</span>
-    <input
-      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-      :value="value"
-      :type="type"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :style="styles"
-      @input="onChange"
-      @blur="onBlur"
-    />
-    <p v-if="helpText" class="help-text">{{ helpText }}</p>
-    <span v-if="error" class="message">
-      {{ error }}
-    </span>
-    <slot name="masked" />
-  </label>
-</template>
-
 <script>
 export default {
   props: {
@@ -65,6 +44,28 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="input-container">
+    <span v-if="label">{{ label }}</span>
+    <input
+      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+      :value="value"
+      :type="type"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :style="styles"
+      @input="onChange"
+      @blur="onBlur"
+    />
+    <p v-if="helpText" class="help-text">{{ helpText }}</p>
+    <span v-if="error" class="message">
+      {{ error }}
+    </span>
+    <slot name="masked" />
+  </label>
+</template>
+
 <style scoped lang="scss">
 .help-text {
   @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 6b09acbac..e08c52e1b 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -1,96 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative">
-    <div
-      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
-      :class="
-        error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
-      "
-    >
-      <div
-        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
-        @click.prevent="toggleCountryDropdown"
-      >
-        <h5 v-if="activeCountry" class="mb-0">
-          {{ activeCountry.emoji }}
-        </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        ref="phoneNumberInput"
-        :value="phoneNumber"
-        type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :style="styles"
-        @input="onChange"
-        @blur="onBlur"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="onOutsideClick"
-      tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
-      @keydown.prevent.up="moveUp"
-      @keydown.prevent.down="moveDown"
-      @keydown.prevent.enter="
-        onSelectCountry(filteredCountriesBySearch[selectedIndex])
-      "
-    >
-      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
-          @input="onSearchCountry"
-        />
-      </div>
-      <div
-        v-for="(country, index) in filteredCountriesBySearch"
-        ref="dropdownItem"
-        :key="index"
-        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
-        :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
-        }"
-        @click="onSelectCountry(country)"
-      >
-        <span class="text-base mr-1">{{ country.emoji }}</span>
-
-        <span
-          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
-        >
-          {{ country.name }}
-        </span>
-        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
-          country.dial_code
-        }}</span>
-      </div>
-      <div v-if="filteredCountriesBySearch.length === 0">
-        <span
-          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
-        >
-          No results found
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
@@ -258,3 +165,96 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative phone-input--wrap">
+    <div
+      class="flex items-center justify-start border border-solid rounded-md dark:bg-slate-900"
+      :class="
+        error
+          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
+          : 'mb-4 border-slate-200 dark:border-slate-600'
+      "
+    >
+      <div
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
+        @click.prevent="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry" class="mb-0">
+          {{ activeCountry.emoji }}
+        </h5>
+        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        ref="phoneNumberInput"
+        :value="phoneNumber"
+        type="tel"
+        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :style="styles"
+        @input="onChange"
+        @blur="onBlur"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="onOutsideClick"
+      tabindex="0"
+      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
+      @keydown.prevent.up="moveUp"
+      @keydown.prevent.down="moveDown"
+      @keydown.prevent.enter="
+        onSelectCountry(filteredCountriesBySearch[selectedIndex])
+      "
+    >
+      <div class="sticky top-0 p-1 bg-white dark:bg-slate-900">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          :placeholder="$t('GENERAL.PHONE_INPUT.PLACEHOLDER')"
+          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-2000 dark:!border-slate-6000"
+          @input="onSearchCountry"
+        />
+      </div>
+      <div
+        v-for="(country, index) in filteredCountriesBySearch"
+        ref="dropdownItem"
+        :key="index"
+        class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-slate-50 dark:hover:bg-slate-700"
+        :class="{
+          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
+          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+        }"
+        @click="onSelectCountry(country)"
+      >
+        <span class="mr-1 text-base">{{ country.emoji }}</span>
+
+        <span
+          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {{ country.name }}
+        </span>
+        <span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
+          country.dial_code
+        }}</span>
+      </div>
+      <div v-if="filteredCountriesBySearch.length === 0">
+        <span
+          class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
+        >
+          {{ $t('GENERAL.PHONE_INPUT.EMPTY_STATE') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index b8780773f..1d1a51ff5 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 bd5e9bee7..000000000
--- 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 3f83e0f15..000000000
--- 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 689ec2527..e10f5b334 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 63765acc0..f1d9d1152 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -1,18 +1,3 @@
-<template>
-  <modal :show.sync="show" :on-close="cancel">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header :header-title="title" :header-content="description" />
-      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
-        <woot-button variant="clear" @click="cancel">
-          {{ cancelLabel }}
-        </woot-button>
-        <woot-button @click="confirm">
-          {{ confirmLabel }}
-        </woot-button>
-      </div>
-    </div>
-  </modal>
-</template>
 <script>
 import Modal from '../../Modal.vue';
 
@@ -64,3 +49,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Modal :show.sync="show" :on-close="cancel">
+    <div class="h-auto overflow-auto flex flex-col">
+      <woot-modal-header :header-title="title" :header-content="description" />
+      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
+        <woot-button variant="clear" @click="cancel">
+          {{ cancelLabel }}
+        </woot-button>
+        <woot-button @click="confirm">
+          {{ confirmLabel }}
+        </woot-button>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
index 5dbc440d5..a69e6dda7 100644
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -1,27 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="title"
-      :header-content="message"
-      :header-content-value="messageValue"
-    />
-    <div class="flex justify-end items-center gap-2 p-8">
-      <woot-button variant="clear" class="action-button" @click="onClose">
-        {{ rejectText }}
-      </woot-button>
-      <woot-button
-        color-scheme="alert"
-        class="action-button"
-        variant="smooth"
-        @click="onConfirm"
-      >
-        {{ confirmText }}
-      </woot-button>
-    </div>
-  </modal>
-</template>
-
 <script>
 import Modal from '../../Modal.vue';
 
@@ -41,6 +17,31 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <Modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="title"
+      :header-content="message"
+      :header-content-value="messageValue"
+    />
+    <div class="flex items-center justify-end gap-2 p-8">
+      <woot-button variant="clear" class="action-button" @click="onClose">
+        {{ rejectText }}
+      </woot-button>
+      <woot-button
+        color-scheme="alert"
+        class="action-button"
+        variant="smooth"
+        @click="onConfirm"
+      >
+        {{ confirmText }}
+      </woot-button>
+    </div>
+  </Modal>
+</template>
+
 <style lang="scss" scoped>
 .action-button {
   max-width: var(--space-giga);
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index ffaab7e61..53b465558 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 acee1f6fc..7ad2085d0 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 49479499b..6a9184813 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 000000000..1325d5dbb
--- /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 000000000..aaee9825d
--- /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 000000000..a5d84a245
--- /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 000000000..92c65197e
--- /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 000000000..1bbe97e88
--- /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 000000000..531e4c39e
--- /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 000000000..095c0a43c
--- /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 000000000..4968bdafe
--- /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 000000000..d268547a5
--- /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 000000000..396363bbf
--- /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 f9edd184a..ab088ad27 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 000000000..0c3a7b611
--- /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 000000000..ea5bef886
--- /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 000000000..493f86d02
--- /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 000000000..f05ef79b6
--- /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 000000000..3b2f3e766
--- /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 000000000..388b1b8b4
--- /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 000000000..c05d91fb6
--- /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 000000000..6967331ea
--- /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 000000000..f3a7cb4dc
--- /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 11d6c43de..54b560ed7 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 000000000..54fe6cd92
--- /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 5464d1107..fd33c334d 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 0812ba7f6..6f5a4dede 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 000000000..66194e003
--- /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 edbbf4472..c3dd3d880 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 2c1300292..8efd9b44f 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 000000000..fb3f01c45
--- /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 d137c367c..d0dda11e8 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 8c2486bab..0ec4f3cdf 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 000000000..1bd74508d
--- /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 000000000..9a53c6c6d
--- /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 000000000..57016cfdc
--- /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 000000000..352e5397e
--- /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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 d30ec0091..7a693f66c 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 a23fc14ac..7721cc3e6 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 4db7fce93..882643434 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 742a3657e..4cc4b9bed 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 6c4238b92..5d77c21aa 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 a168e82f0..20c738a86 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 5397fcb63..47349d1b1 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 172e5501d..da2df93e5 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 107e64fd8..546982b36 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 4dca590e9..dabbff89f 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 f9ecaaaae..6cbe55032 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 a637a6ec7..4e3a52035 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 358238827..7eba56a39 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 c6a983179..36f68986e 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 3ced03bb8..c4a61057c 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 b115b879e..0ca19491b 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 36cff8c31..a7d5233e7 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 7425dfe1f..ad80d7b52 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 534901533..6dbf9dd0a 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 2278670e3..5b7e8ac15 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 8dae17243..c3778e07b 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 52b73f56d..95bc3e3b4 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 085e87057..248e250c7 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 f205d54ab..1db9e0fe4 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 1fa696c1f..bef157e73 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 aed1f077a..7adff9c7b 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 14d2252f5..c82f0b1dc 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 234af4b46..55a420012 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 c4d2b817a..6fab51692 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 23c977988..a953ac2a8 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 7bd05d20d..3c87653e8 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 4dd3c382f..e3829fe21 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 0120d68be..41ce73b55 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 f96c0f800..b38e31c61 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 f7259abe8..25d9bdcb1 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 297245baa..988d6fd50 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 14e13f321..12819d90e 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 78e828869..ef3b31c87 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 91d0cd40f..dd6c9cd22 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 7380d7530..d654b8365 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 bfef5be29..43c9b6c9e 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 b6c377401..9623df356 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 5b225f3cd..92138294f 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 9929536ed..b0e1e4696 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 5a74a3ce7..c35c753fe 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 6ef7ee90c..2489d14ee 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 25bb4dfb7..4c2c5bfa2 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 69a6f4bba..2bf3c5f18 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 776058f54..56eba13a4 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 3410fe618..e544b69f3 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 bb736e1e6..b289f7193 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 0a47cba1b..89a632d2a 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 15424edeb..d0cb6b0a3 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 76815db4b..bbaab1d7d 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 05461367c..66ecf7bb6 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 f06a19771..eea4442c9 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 008676de7..ae5846652 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 96eaa0a3e..3afd1fe90 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 a36ed4002..0fd6c8771 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 33d2d8506..a4f684d98 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 04cddfe5e..ed0ce4e45 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 e3dd7c68c..cc7ba55f9 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 9f3429c8b..65e9cba88 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 4595a205b..b288c766e 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 182e49bd6..547e40017 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 f0129c7bc..6133fab01 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 971ae7f33..120478b4b 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 7ba57c201..aa7707a1b 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 d70dc97d4..0e0fdd6ae 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 8b1b7e5fa..e83787f3d 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 9e16dc2b3..5de226331 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 19333d4fd..37bc1bec7 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 c67a5f9e7..d0c48ce7e 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 b1717a408..6ca3a6395 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 a387032ed..53fcc8b71 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 56c87c266..3b2bf78a9 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 785818757..411fc3788 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 bf5ffcfc4..57bd4a29d 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 f732cb103..fc9c312f5 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."
+        "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": "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"
+      "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 b197e8814..94b1f4a62 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 a00bebd69..dbdf08bf9 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 0817e4562..11e9ad073 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 5254f9d37..5df0b7319 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 ba89f20ec..65f007fdd 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 7742e7cc6..b465bee36 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 3c5009512..cfdcf4ff5 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 e0ce2abae..0bcc745d7 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 3c24b3c5f..4c453e5e9 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 6ec12d43d..a3edded62 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 bbcf28156..e0107126e 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 8e5c767cd..99f08c76c 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 883dcd0fa..09b72d5db 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 b7245cc99..51ac1d29c 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 064200a54..26b8c6c77 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 0b6578024..6a526e9cd 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 39c675612..83d6b7679 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 a8ee531b8..ac2c1d322 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 81380a072..c4d4b77a5 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 950828d51..e1babc0d4 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 25bb4dfb7..a7a2af822 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 00cf1d19d..1621a3993 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 95232f805..6baa3e661 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 ec2b2cafd..920829513 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 b53f61b4b..fa743bdc8 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 d2c9d417e..57d7923f0 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 4e31e1dfa..6bfd39cd3 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 3bdaedc1d..fbbdadb74 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 a4de7a921..35f91009a 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 684133e33..8581470a0 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 ca5aa7b61..32e2f6461 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 de7ee13c4..90818e7fc 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 549ae64ed..6c8060297 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 3642b2a6f..6d8216f46 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 97fd5095e..3daad112b 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 4e8644021..0e293f5bc 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 81e0a48c7..724802cca 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 a58948f55..7674610aa 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 4dbe289f9..95c31b0ec 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 25bb4dfb7..8e95993f4 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 01c27c60f..528c81e42 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 8ad43b61a..d7fe99398 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 05935391a..c889e8f1f 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 09cf1dc44..d8b8f3334 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 f87937096..9ad2cf040 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 b51ebc52a..33d2a9647 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 4d8e4710c..c9a461b6e 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 3f1f78776..3cdc90a26 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 3ca82a299..b410a2f9d 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 b055d31ce..f6cc2429f 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 11809a5aa..d7611fe34 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 2560ef1ed..dc5c70d1e 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 c53d7aca7..470ec2b2b 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 1a8e88c38..60e2eaffe 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 7fd21f6eb..1bb97354a 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 4701a1e92..a021c7644 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 ea0ba5e2c..de04c6a3f 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 6bcf5cd44..9a3e758f8 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 c5bfe39c7..20ed25a4a 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 111f90ece..2b9b790da 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 9a33b0a30..ed69a789e 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 3f38361ce..f59d59c78 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 4de2a8a90..4c5370519 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 25bb4dfb7..5915545e7 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 02b43472f..b4a18a921 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 b6504f093..2b7e18289 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 c25dd7916..da476b8c6 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 2a5aa7a41..947464a30 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 f1d497717..edcd79bff 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 5d9d599fd..55d977ff0 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 ef0bb1130..e2a8b83ee 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 ae09da88e..ba5edb4fd 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 c06e4a414..8923aa78d 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 28b19cea2..41258ded7 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 e16a11344..af21262a8 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 849aff390..b241429f5 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 9e00b1947..bba5aace3 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 ce1b8f80e..f1d3a6fca 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 9ec81359e..369063d94 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 035b7e561..fa3680241 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 f69d32ea1..adce30f30 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 29e8e611d..d0effe63e 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 9c9a88f73..24042cb1a 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 0b564591a..dcc4e633a 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 25bb4dfb7..a1f613aa7 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 ea9e14e13..497783e4b 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 9c48d4783..c6ba34bae 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 b76b54ff5..70d20001f 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 7d308f070..bb73e6e00 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 dbdd5a431..0ac079d5e 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 9679aa084..624d8782e 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 eebefd684..1aeabcb19 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 e52cd98dd..62c4db972 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 e63cbc8d2..4d62e5e14 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 1cfe735cd..42c975711 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 170f01d7f..564bd161b 100644
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -18,6 +18,7 @@
       "AND": "AND",
       "OR": "OR"
     },
+    "INPUT_PLACEHOLDER": "Enter value",
     "OPERATOR_LABELS": {
       "equal_to": "Equal to",
       "not_equal_to": "Not equal to",
diff --git a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
index d01730ed8..442b6becd 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 8a3fa7715..263f78896 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 469df1c24..a933b1853 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 aa5829b8d..dbf37defb 100644
--- a/app/javascript/dashboard/i18n/locale/en/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/en/bulkActions.json
@@ -7,6 +7,7 @@
     "GO_BACK_LABEL": "Go back",
     "ASSIGN_LABEL": "Assign",
     "YES": "Yes",
+    "SEARCH_INPUT_PLACEHOLDER": "Search",
     "ASSIGN_AGENT_TOOLTIP": "Assign agent",
     "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully.",
diff --git a/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
index 71a334d87..7721cc3e6 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 4db7fce93..882643434 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -381,6 +381,9 @@
       },
       "SUCCESS_MESSAGE": "Contact merged successfully",
       "ERROR_MESSAGE": "Could not merge contacts, try again!"
+    },
+    "DROPDOWN_ITEM": {
+      "ID": "(ID: {identifier})"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 742a3657e..34fa34981 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 25bb4dfb7..78e97db90 100644
--- a/app/javascript/dashboard/i18n/locale/en/general.json
+++ b/app/javascript/dashboard/i18n/locale/en/general.json
@@ -1,5 +1,9 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items",
+    "PHONE_INPUT": {
+      "PLACEHOLDER": "Search",
+      "EMPTY_STATE": "No results found"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 6c4238b92..5d77c21aa 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -481,6 +481,7 @@
           "DESCRIPTION": "Use the portal as a headless CMS with third party front-end frameworks using our APIs."
         }
       }
-    }
+    },
+    "LOADING": "Loading..."
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 82e6e7c2b..eec8ccde6 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 6e052949c..47349d1b1 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 978592c83..a24266fb4 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 28c4660aa..246d60c26 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 172e5501d..da2df93e5 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -481,7 +481,8 @@
       "HEADER": "Conversation Traffic",
       "NO_CONVERSATIONS": "No conversations",
       "CONVERSATION": "%{count} conversation",
-      "CONVERSATIONS": "%{count} conversations"
+      "CONVERSATIONS": "%{count} conversations",
+      "DOWNLOAD_REPORT": "Download report"
     },
     "AGENT_CONVERSATIONS": {
       "HEADER": "Conversations by agents",
@@ -536,6 +537,7 @@
       "LABELS": "Label",
       "TEAMS": "Team"
     },
+    "WITH": "with",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/i18n/locale/en/search.json b/app/javascript/dashboard/i18n/locale/en/search.json
index 107e64fd8..546982b36 100644
--- a/app/javascript/dashboard/i18n/locale/en/search.json
+++ b/app/javascript/dashboard/i18n/locale/en/search.json
@@ -11,6 +11,7 @@
       "CONVERSATIONS": "Conversations",
       "MESSAGES": "Messages"
     },
+    "SEARCHING_DATA": "Searching",
     "EMPTY_STATE": "No %{item} found for query '%{query}'",
     "EMPTY_STATE_FULL": "No results found for query '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ to focus",
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 445b7244e..dabbff89f 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 f32f24b61..0da7873be 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 50dcb780d..6cbe55032 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 42d7df470..892a1ae62 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 65c71df28..a8bb0970a 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 4e96ba4e0..57e026dfa 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 89dd971a9..f50fd9011 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 72c40ad98..c97e0005b 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 3c468c334..490e13510 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 5fb0bb5ce..681211027 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 1f2a4bccb..53f870d5b 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 64b38b91d..c3c779746 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 25bb4dfb7..20d218464 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 63a9b7b0b..6fdbc000d 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 6937412ca..9073e5842 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 2391d4462..ecbac3d75 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 abbe73c58..951f99bc5 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 50fce31e8..1d46a88ce 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 c9a74ceea..251020ce5 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 dac3cc339..0eae29ba3 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 7ba67702e..4a419f8ad 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 b03322a99..f0e2d53df 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 acbd235ab..26e0e1510 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 2125e478b..a8a8d7013 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 0e8715e56..bf9c39626 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 223a6f525..bb3d4186e 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 858c8a165..280716293 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 a06342c6d..0b48b7781 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 613790399..2a9e43718 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 ec98e6103..d96a1abf9 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 844c4b862..68699f3ee 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 303f09300..2a1a7ddcf 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 3444763b2..a4b6d9d88 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 7c80079a3..46109d09c 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 813520351..260208889 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 2184c10f8..439c02cfd 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 e7e92b2f3..78b85c030 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 115d66adf..e5c74eef3 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 ff97a08ae..99c02000a 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 08dec1250..df885fa39 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 278115f5e..cac41e2a1 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 0f364dc91..5c932b6e8 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 9dbb17164..b561306ff 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 31d6c696e..6cdcccb69 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 81cf67bbf..beec9efe9 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 2d03ea352..340f65f0d 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 a60377e9b..1657b4e3a 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 72705e8b1..0b3857e63 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 9bc26933a..cf56b9e2c 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 599fcf56f..219b222ee 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 95e120c39..c2ee8bb34 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 25bb4dfb7..3a3e20797 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 6df26953f..d5b9215e3 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 f3e8e9246..df7e3ffa7 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 a7897227f..d560044bf 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 b600fcaf8..538729ca6 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 1e17cdfc3..eaaaf1c59 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 e1aaf05c7..fa63bcb11 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 5716f05ec..19ce86e13 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 8e8487378..9432f82a6 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 6918a7eb9..76c82f9b2 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 8fcaec01b..1698e05b3 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 09a7e27d7..4e1511844 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 f1bb049b6..80c79d76d 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 9cff6f204..7c80cc941 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 ae59ed392..ffcbe20a7 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 8a2591413..34f95116b 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 703be1fc8..487cc7483 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 a15cb65cf..30b948494 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 06c404409..6864cf3f7 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 25bb4dfb7..b25c8d702 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 87d60620f..f5c93bc0a 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 3be07446f..168d5d2ef 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 d1283cbff..7c8538720 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 4cd66a317..d9392ef25 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 2b894d68f..3b5cfb6bc 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 f7de20e78..ff1a5aa0c 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 ab14858e6..383f972cb 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 b814f3bf0..b7f7bfac5 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 379b4e182..5b714bd54 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 3b2fde171..6e72872a4 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 6a70d6fcb..ca107ffdb 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 52ab71ea5..31b1318da 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 5e9fa608b..d52b42955 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 036255990..def12f45d 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 6f138be06..70d7cffdc 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 2a6c5d9f3..a4790dc18 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 9354c8642..aba51300d 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 e3b2610ec..19db5415b 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 25bb4dfb7..7ac10d6a1 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 b4e7d1580..7232fbe55 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 03f4d9e8a..a1d1a3e0b 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 8da24448f..05f770859 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 2e1023d20..1a30333f6 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 311fc3589..f21fb8b0b 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 5e3d06d83..595191139 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 221078e86..671620f90 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 20de30b15..d693a219c 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 73fdef26e..74f4d597c 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 6bb85c95d..96aa29630 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 70683fe9e..745e73faa 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 170f01d7f..7fe7183c3 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 d711762fa..f6f2fc866 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 bb3007975..7f412b4c0 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 082afcb84..74b152c84 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 7a4a3af37..0c713552b 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 cc3e4569b..8eb490a4b 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 467b0def9..5c74d9928 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 2cd3c1f06..19212a595 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 45587f2db..7c7adad7a 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 c27532783..b27417c82 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 fbafaf73c..bf244893c 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 fc8d99827..632f45fc1 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 f9ecaaaae..6cbe55032 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 f69ce988f..8e568185a 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 d65a736a7..fb3d25d14 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 e5af8f609..5b66b9d62 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 64a0e83d6..21c5bd247 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 bbf3034b0..d4bf01e91 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 88056e60d..9bfece531 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 fe7c8de4a..dbf37defb 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 cbf061b30..ff4b0e0ac 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 15fbe05ac..ada1e0213 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 ba36b5118..e92ab9c33 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 02d5dcf89..9d1051c62 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 b7d31aab7..e6b513e76 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 25bb4dfb7..f6cab3dae 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 fe625da3c..5b4c8024c 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 f36e69405..3ed4232b3 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 95a06c4bd..53afbe6cb 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 a80ecb837..cde3dc027 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 1ac3f3f7c..44bd90337 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 09ac38551..bf53ba1a8 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 3a59d4f26..89f419da2 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 b38fdf84c..d45042bb1 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 70d48976e..a2db00f4a 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 fbafaf73c..68854b416 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 ec2d94744..0deef8159 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 2c65d0245..28bea23e1 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 7629b0c76..74a554a6c 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 f9ecaaaae..f4836f6a7 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 22a26ac68..b09776d18 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 e00a8874c..14f0d7b06 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 887c9411f..a8f5ce3c0 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 10ae1f6b9..42f20837a 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 e8c8e8ebf..5e63ef0e5 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 f0d0d0916..511fc1edf 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 7ba9a6d8a..1455c0a2e 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 4bfb9930d..64203743d 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 25bb4dfb7..b92df5935 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 09a23508d..6bc055c59 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 315bbdf54..4b32ae3e8 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 dac1517d0..8b9a6a7b2 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 9c25873c1..14145d5aa 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 ff8543f88..6c6d1b8a8 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 18bea009f..d238211bb 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 8314f9958..b8c5d082f 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 7b2bd1c8e..72652d709 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 80e9ac2a3..447aabd54 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 99171f85a..b121ade4a 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 bb3007975..7f412b4c0 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 082afcb84..74b152c84 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 7a4a3af37..0c713552b 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 cc3e4569b..8eb490a4b 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 467b0def9..5c74d9928 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 b1d9e50ae..e2a64d3d8 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 45587f2db..b219617fa 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 c27532783..b27417c82 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 fbafaf73c..bf244893c 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 4dca590e9..dabbff89f 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 f9ecaaaae..6cbe55032 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 361910761..3dfeb3d8b 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 44cb7546b..4c0c647fb 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 363bd3865..ab97e8328 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 87a52e563..ee6c73d43 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 2f07fe8a0..d12ff335a 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 205ed3dec..db23733a5 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 d9eb8c2dc..cc7c9a11d 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 80971d342..8549b0a9b 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 25bb4dfb7..2b082c9c2 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 4327e5a70..bd7da57d5 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 a51a30a14..82a34dad0 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 39facb3f6..770ff3865 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 9b2a9b367..e9e3f6d31 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 7db3157ad..01a99a2ac 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 831b41fac..81aa8276d 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 7c601dd56..e6d872174 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 ca5ab205d..c6ee83b6d 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 18b143847..af80ff677 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 1f3775673..74cc5760a 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 bb883b0f0..8c2cc528f 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 8836f13ac..f7344f58c 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 df05b2995..f69062ea8 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 49815e07c..0c028c776 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 fbdab2cdb..890dc7107 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 433fa04bc..d067a37a9 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 507ca4664..dd0d23ca0 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 072148ec5..81ffa3e80 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 25bb4dfb7..da37c9397 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 02e892c26..4e77c9d38 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 41fc6ebdc..8ee3eac39 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 259c9193f..db612bd6e 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 09c9abd7b..5e9cf1931 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 55c76ef38..c5d4284fc 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 6896ea953..c88c068dd 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 73448d3ac..1f5c63129 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 53dc6abec..605050421 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 32acdec20..66bd17f5e 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 6bb916df0..0d01e8098 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 ce0790853..90819c2e9 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 01385d110..0e39e39ef 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 b8f46fc6c..8a5f13910 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 222089f44..a5e679768 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 320d61f81..9800703c6 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 97d4dd0df..813d0a7cd 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 02e813746..7863c085b 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 494b9f095..f75f74730 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 25bb4dfb7..1fd89fe3a 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 ee72c3e97..03c67f209 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 d86288338..29a2fe6df 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 0018cdf25..42789b30e 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 fca21ca3a..d259017c3 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 cee675b33..367055311 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 6f1f6c84a..bd8e522e8 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 af0ada57a..8251bc23b 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 be8994196..b5b93b96f 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 7f3ff3627..f395d8d1c 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 d90df3853..98e3dd10f 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 6b1f4d15b..c16217615 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 2d3c7d272..6a64f552d 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 9f2cd4f29..d8307ee4a 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 29fe5dad2..9d64a738e 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 223ceeb87..68387c57c 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 77e43fff4..30e14f7ac 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 20a70df5b..e4bab8eb6 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 f04038323..a6b14aa30 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 25bb4dfb7..78e97db90 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 df9e36055..b616b45d5 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 872b16c52..e917f9e96 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 954d374f2..58a6fad79 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 edcc20abb..be8b9ff74 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 e7dcb6eda..2fcf65dd3 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 9e29599d0..80c1db59e 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 ab95f6cc8..d43f64ed1 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 5c7b2769b..eea0cfd58 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 ddac71cdb..794027346 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 387f222e5..872bb24c6 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 bb3007975..7f412b4c0 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 082afcb84..74b152c84 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 7a4a3af37..0c713552b 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 cc3e4569b..8eb490a4b 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 467b0def9..5c74d9928 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 2cd3c1f06..19212a595 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 45587f2db..b219617fa 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 c27532783..b27417c82 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 107e64fd8..546982b36 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 fc8d99827..632f45fc1 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 f9ecaaaae..6cbe55032 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 7ea1703d2..30874d339 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 61f00d5da..2cd078a93 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 854d0a47f..1c8a0f168 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 cf7b67d20..cca5e4552 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 2a774aecd..e73a8219b 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 7f41881d6..df6a5f99c 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 a73b63deb..2d66432cf 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 ba8552a94..1ed9dcb36 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 25bb4dfb7..58927922a 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 a2eb25cd7..94f08c701 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 092aff90d..df102f670 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 99d402fef..54411e818 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 7a41267e6..30caaa9c9 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 b811033f7..012c03c09 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 675bc1e11..56a606c09 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 5ecbb2537..bee66034b 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 2f872cf59..e72abb9ee 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 b8628279f..fbb0842c0 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 ad5991ca9..687f25f85 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 bbcf28156..4f6834632 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 2693e0b62..2659bd434 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 d4887cb8d..4f85d80b9 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 27617d0af..40251fe89 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 9f0f1463e..1e1296619 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 b89464acd..be22d5f88 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 14f84cd59..d156af6d3 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 fa49f9749..f85ab67d7 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 ac106c525..c1d42f146 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 25bb4dfb7..ded0ebaef 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 b3488d4d0..04da6b9ec 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 c8652cc4a..8971fe656 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 cdc9ed65f..bcd8035e8 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 c434674ba..92d003f0d 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 dfea92819..631209b61 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 9ebe4b50e..63dc0dfb6 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 a0b28f1a0..98ba3b7e5 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 e87fc02b7..5d78b047b 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 e1e9a17e8..d0c7fa28b 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 fb59fe9b5..5af262f12 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 bccc12cf2..5bf06f4dc 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 f8418bfbf..b0062e373 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 b1cb63ef0..b9004fbf9 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 6483d8e99..25da57a8a 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 42b88f9c4..2ae41de91 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 d4cefaca3..2c2279cde 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 f14e91958..b171f0fcf 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 1bf543b8a..cd406547b 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 31176001d..ba2b8cf5a 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 860edb902..19966e45b 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 081354415..f4489f135 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 e39f07ee5..a6064b24c 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 8fae36d23..af585b10f 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 d83a1c3f3..9a6d1319f 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 9f3f1f9c5..b9c6870ae 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 5677165c7..7d0a00c58 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 42c0b0608..a8bdb8fe0 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 f3a0b36da..0c43906b3 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 7e178ed59..6a6b0742c 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 8fb896cb2..206e691c7 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 32825a222..c6f636c9f 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 d855ca946..c465b2a2d 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 832c26aa2..c76ab0f09 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 47c320750..f2c899b50 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 f6e09a6d9..59b3f177a 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 ccf5b3f03..12d3153b4 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 51b38cebe..e63a93e4b 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 25bb4dfb7..158181ca4 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 71cb85b6b..dae202760 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 68e4794c5..92ba797c7 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 af719a2cb..cc94c973c 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 3c2bd3b27..a3e70d353 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 b1a55d097..fcad3ddb9 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 d983d85e8..7d23575c7 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 0303cbf46..95fa3eec4 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 30472e868..5f8b71a18 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 834022d9c..ce8a0b28f 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 c701528cb..808bff3b6 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 e9a375515..6c9a2a3a6 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 eb331f5f5..e581abe45 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 80c19feef..7c3029c9d 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 a006eaed5..66757a92f 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 d13e78b4a..e1c81f468 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 03571837a..b285741e5 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 3c22bbeaf..b995e420a 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 f0e107a1d..02589d53c 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 25bb4dfb7..99f9b07d9 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 e617756b9..df78dcafe 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 3b7dc5276..2883329fb 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 d70059629..cb1a7176b 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 d2d4fbaf3..6b2ecc61d 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 c96071bc8..f81156f7f 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 b7db3339f..ba5f038ba 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 444938137..a20600006 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 107e64fd8..546982b36 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 5f504c37f..7443c46f3 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 7f46b151d..12185db3d 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 bb3007975..7f412b4c0 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 8d211d0c5..0f4646eb4 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 fe7c8de4a..dbf37defb 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 b19386c24..a7a30e7e3 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 783c6edb7..ae4d3e41b 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 088e785a4..c0d9fc0fa 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 a417ea309..1ff4a63e2 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 8c62e90bb..302a89985 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 f3c90e473..3ac90ecb3 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 c27532783..b27417c82 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 107e64fd8..546982b36 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 fa1f07ed7..6224db197 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 f9ecaaaae..6cbe55032 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 b96a82f2f..12ac07005 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 d9eb79d99..7f478ff50 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 097f8da05..1e5d4c096 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 dd1655ffc..32526ab00 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 6ea5298e7..e56cfc60a 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 aead72726..42af0eeab 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 71b846085..1ebcaf7b0 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 5146497c0..577845ac9 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 25bb4dfb7..38184deee 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 42a1c6746..c6a68c9e8 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 5aa0123fe..4c7958958 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 d16eb2267..5c7e82311 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 042a6bad5..723ac7856 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 3377463b2..f57792dd6 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 c76ba92ac..947196205 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 d602e11ae..666c663df 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 4b0717242..0a8589048 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 511e3f9c7..dba65b10f 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 a9453b569..c3f7bfeee 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 1726f0aac..284796e5a 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 bd720bed4..7d1e62461 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 0b6267f67..f5f38d2fc 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 7f7d4be8c..98907e4d0 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 11487cb77..0f2bf3c22 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 efc6fdfb6..bf5c45a14 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 3923ecc8f..924b218b9 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 0935ee275..a523532f9 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 25bb4dfb7..b7140855a 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 7d0829020..f5a2a4fb9 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 ae40223f0..f9a9ed768 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 c3ba99aab..11c4a21f5 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 19944e3c6..26f6c6b48 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 877dfcf8a..0ed84a5fd 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 3b34c7494..b27bead78 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 4c09109f1..38f883b48 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 19e5f7e95..22ee7e717 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 4a142b234..fce633113 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 30cf468ca..5f606abd8 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 5b82fb085..5a01cb478 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 c5c7bc040..afdc7b646 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 e6b6649ae..15f46d60b 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 26ea565ff..88dd9e822 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 ef1863750..f0f7b2402 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 ef4e2ce5d..d9b442bdb 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 83b173659..c74aae3ba 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 30ac433ac..c3a2fc7b6 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 25bb4dfb7..3d1b76f47 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 710b006ff..1c7f9927c 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 9353d1da8..160fef59c 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 43db2cfe8..91d7d9426 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 1c76f92fe..cd741f349 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 7454c84c6..6d05affb0 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 f0d2f1280..b5162841e 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 e515579c1..74e449cb4 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 43710106d..07f477f43 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 c72b3deec..778b2da21 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 cefd78fde..6e79bba6f 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 b68e38580..8487b6eb8 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 34c11e11f..0f2816be4 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 d6ca9dab8..0650e6583 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 27883db0d..1cf3f14e2 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 778e8092c..eaeddf4df 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 cdd43a4fb..16639fa62 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 94df40284..aaac6a16f 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 8a49522fc..e0bcdfd9f 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 38d1b298d..0f2d68c26 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 c26e15f11..c27f87ef4 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 d614fdbce..d89364717 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 82be843c2..c01b58cff 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 de2b2e2a5..73da76bb4 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 501ba2bd1..f193922f4 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 0cd2faabc..4c5b9608b 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 741f85f3f..fc067cdb6 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 390f548d1..062ef762c 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 718e66d62..3aad38f58 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 eb53fc9e8..7b7422478 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 231f32775..921f4ca39 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 9576ccaf0..cbe0a001a 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 fb9ae47ac..a761b380a 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 d084ba0e4..a842a0795 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 118cc0cd1..0c57141b9 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 c872daa58..c06a8b070 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 6a697fbcd..ceae300c4 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 946b6f6be..626f289be 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 34d11e23b..dd33da9ab 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 4ddf9a6bf..4d5797c72 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 0dd0a5833..0b2622c1a 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 57d5c2243..a42f62cc1 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 129b55bc2..6a3201e39 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 e14a449e8..91aacdbd4 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 28d7542ee..f40326ff2 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 3c6fe33f4..0489ce371 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 b01043431..ff4350519 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 172ec48d1..69b1703e9 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 fda625c21..9f2e01550 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 70eb8f75f..36b75ef36 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 cd49825d7..c84a4493d 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 93a7c691f..808e6674e 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 36dd83e81..35597a033 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 bab2f7fea..ed4b16cb0 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 528835c72..7d8544338 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 60a3d9b30..8ea4eeb6e 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 4abe8dc76..5f40448f2 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 dc4bc3845..471f0ff2d 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 6f982b469..0d3a42b5b 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 fa5b27a97..856183800 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 7f2429387..4490332cd 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 3aa43fbb1..d9b73d1fe 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 63857aae0..96836b072 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 7f6e2cc5a..65e677415 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 c7e7f5a46..8b04465cd 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 8272b2833..acca437a1 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 e362cfbfc..6de1835f7 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 25bb4dfb7..49c0fc566 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 49692a011..b8e3b795d 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 5395606fe..edc2eb7aa 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 c60fe9aa8..629da8221 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 a8ba58e90..1cf5ef07d 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 13d2adae8..c1316ebc1 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 822caef8b..0e9eb0989 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 f4a905ea6..ec34fa3d7 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 106339043..88ebafd3d 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 4f1cd9af2..dd0984765 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 fd405ec2a..90d95d37c 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 18c1c92be..b95cb6aba 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 70b74a6f1..55a1b4906 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 ac9784829..5781bf76f 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 e579f53f5..da1845515 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 8c64c6cb6..1ec968642 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 a1c1fe68d..51c0ee7ed 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 62a3e2c29..b6c8be62f 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 b714a54ff..6741cc46f 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 25bb4dfb7..6191f3cfb 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 c6691e23f..2c12a66a1 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 c8c41dae1..e20532265 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 887bf51f5..79111208a 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 48bc702e2..feee6336b 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 4753ef6bc..5614272a4 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 342b21d29..aff41ed81 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 04f751a10..9b034e38c 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 347f1396e..ede39709d 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 5748315b6..2cb09e45d 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 0f26072ce..b3d6d944e 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 bb3007975..7f412b4c0 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 a23fc14ac..7721cc3e6 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 992f9e1f4..017edbe45 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 cc3e4569b..8eb490a4b 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 467b0def9..5c74d9928 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 674f0ef96..df4b67604 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 45587f2db..b219617fa 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 c27532783..b27417c82 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 107e64fd8..546982b36 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 4dca590e9..dabbff89f 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 f9ecaaaae..6cbe55032 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 eb0685ad9..9300772c2 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 9c0b2754d..5f6a3c80b 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 28cb7a60c..f5058bfdb 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 3047c3b4f..196e01a08 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 a5041dce4..c3960c434 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 cf78cfad0..5f1ae71ed 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 105a2facc..3847382c6 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 b2fae8f0d..8c7f8b817 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 25bb4dfb7..2e1198efe 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 ed241f423..ad2541193 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 b7eccc358..81c52fc78 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 549d28ead..07d1f9cd7 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 905d1948c..c421bb20d 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 01af0fce7..67c53dd8c 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 3b8895cf8..d3734a816 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 2695a4a58..2d31991ac 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 11102ba60..767ea1233 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 151996596..c94dfa0d4 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 f709a7b18..bfed6166c 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 d30ec0091..7a693f66c 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 a23fc14ac..7721cc3e6 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 4db7fce93..882643434 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 742a3657e..4cc4b9bed 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 6c4238b92..5d77c21aa 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 a168e82f0..20c738a86 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 5397fcb63..47349d1b1 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 172e5501d..da2df93e5 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 107e64fd8..546982b36 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 4dca590e9..dabbff89f 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 f9ecaaaae..6cbe55032 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 d30ec0091..7a693f66c 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 a23fc14ac..7721cc3e6 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 4db7fce93..882643434 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 742a3657e..4cc4b9bed 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 6c4238b92..5d77c21aa 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 a168e82f0..20c738a86 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 5397fcb63..47349d1b1 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 172e5501d..da2df93e5 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 107e64fd8..546982b36 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 4dca590e9..dabbff89f 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 f9ecaaaae..6cbe55032 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 b981a4d30..56b2459a2 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 2b473b717..034b5d672 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 a9dbf6ed4..6256cfc28 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 1c054b77d..5cf5a1ba4 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 d294574fe..3a75edd02 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 5bb923dfc..36cf162ff 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 53d0d60d6..34fd29c2f 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 6902ac4fc..abefe4531 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 25bb4dfb7..46e1d3a00 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 ecbf3e360..352edb4d7 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 b2e7aaf32..c98128b63 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 b03568abd..3d7e5ce33 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 38a4b6b88..87d1f2334 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 00284e298..00570cc64 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 95fedd6ae..5a6f2cb2e 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 de4e12154..02eccf603 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 99b1652f2..da2e7379d 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 5a66f107a..169ff6026 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 b4284cb96..aaa0c7207 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 2fe0174d2..e106bae0d 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 ab5fdffe9..f1cd7d11e 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 37b3a201a..86ee92ebe 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 af3b2f822..57eac6956 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 220c2de0b..28f74b4a2 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 1447159b0..158453770 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 d57c6655f..6e740857e 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 3a40f68bd..056697b8f 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 25bb4dfb7..c5218d71d 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 325d7b36a..581393333 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 4be6a1d03..68e241f1f 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 68ed3a292..76c2f85c6 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 3b7d9f5d6..f2ecc4a59 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 90fd320e8..26c19a657 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 ea6e618e9..db8bf601a 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 a937178ae..edacf6e01 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 6219e27e5..c91d04f32 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 5d3f3d614..cd6845a0d 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 c9667d362..91ef46f4c 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 353e219ba..a2521595a 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 6cd62d27b..87b788ea6 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 25d1d30ed..83feedc7e 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 458627daf..8acc77a2a 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 fe7c8de4a..dbf37defb 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 898a057a1..fd388e26a 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 9d7c17e13..f3a79b4c0 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 364439a14..951cb6faf 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 25bb4dfb7..78e97db90 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 6e452195a..445484fb0 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 b861aed03..622532097 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 bf924fe58..8ff31a302 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 945fd851d..dcd82f057 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 d9f0878f2..28bfe5e48 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 414b3093f..35774f7ad 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 c6089d791..0e5b5c966 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 243c0da2c..7f2e02fc5 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 a76dd9dc1..c2462fa8e 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 085d0d8c1..7ba036394 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 462f3da9e..356e8fc17 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 3837533c8..8ba4e71f0 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 44dd1f26d..a457b3a94 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 ccba93413..f2961416c 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 8aff7ecc8..54e49da0e 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 c33dd55e2..b9771ef1a 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 9459caf1d..517cce91b 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 c3293bafa..437873d5f 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 25bb4dfb7..a081fc80a 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 c503e8c76..544532ca6 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 859236cc8..91808be4b 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 fea6b9c18..9ac2b8f1f 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 14f4e00bb..00cc71664 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 bc542c3ff..91dcfbbfe 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 9352844b7..4244efd3e 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 33decb414..932401332 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 da078584b..b32ed7360 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 5b0155803..be3e20889 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 ce8d3e237..59c9b4369 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 000000000..564bd161b
--- /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 000000000..fb744b4a9
--- /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 000000000..442b6becd
--- /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 000000000..64a0e83d6
--- /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 000000000..7a693f66c
--- /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 000000000..9c8207fbd
--- /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 000000000..dbf37defb
--- /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 000000000..bbcc463ee
--- /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 000000000..7721cc3e6
--- /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 000000000..1458bf58a
--- /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 000000000..882643434
--- /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 000000000..02d5dcf89
--- /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 000000000..4cc4b9bed
--- /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 000000000..9e16dc2b3
--- /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 000000000..c7ef06880
--- /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 000000000..d5b96f0f9
--- /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 000000000..78e97db90
--- /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 000000000..bba50316c
--- /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 000000000..5d77c21aa
--- /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 000000000..137aac54b
--- /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 000000000..20c738a86
--- /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 000000000..a80ecb837
--- /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 000000000..47349d1b1
--- /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 000000000..a24266fb4
--- /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 000000000..fb33028d6
--- /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 000000000..543b481bd
--- /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 000000000..da2df93e5
--- /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 000000000..955696b0c
--- /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 000000000..546982b36
--- /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 000000000..4908dad02
--- /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 000000000..dabbff89f
--- /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 000000000..1ad4865ff
--- /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 000000000..f32f24b61
--- /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 000000000..6cbe55032
--- /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 000000000..347c96893
--- /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 000000000..bbcf28156
--- /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 e9e048a18..1c0dc219a 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 4fd1a9bda..45f632df1 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 e7680ea4c..cfacbd624 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 d88c0a798..9c12e6503 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 92d0462e2..e5d109edd 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 f92fe3cd4..0e45e5a76 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 48d622128..d5ca1feee 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 a5dc43b46..21de4b9ad 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 25bb4dfb7..862c4388a 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 325f15e56..e56764bfe 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 7467368b2..1e545661e 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 4e2860237..8f5c87a4d 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 2879984b4..ecff22c73 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 8a807c157..9ab8b27a6 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 813559257..3fc93541b 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 f4683fa2a..66bec620e 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 703aecc9c..5039521ca 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 a84de60a0..f307be835 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 01f4b6f2b..7ea3105c0 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 38a7d7516..232d7d7bf 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 419672b49..10641ca69 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 b40f0582f..c6a301bcd 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 ed1b42803..6a16aada5 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 66bac58aa..7a20ceb4f 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 ffe8e444d..511e1a4a7 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 c690cee09..e18bff131 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 5bdf28d8a..038ef1425 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 1df537bd9..fde7a3107 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 b4b781f99..4b8be2403 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 52fa06b9d..5b45fc1a8 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 cc0dfa911..ded61fdb4 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 59eefdc6f..045b58837 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 d824e9b5e..0b7d0da34 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 6b752b92e..bb5493c62 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 14e34c288..4e50b3737 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 5501e8bb2..f2afaa7d2 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 d9c90c366..988830537 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 7113099d8..354667524 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 546260d0a..20ba291e5 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 29acbfa9c..b59cc0129 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 1ea47ccf1..7db802d88 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 3005577cf..8541e87a3 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 4d5fd94b2..58146ca26 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 e711c4358..04776240f 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 f67fb32c2..29d567318 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 cd9dff79f..40e38334f 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 3431800d4..0e00b4369 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 25bb4dfb7..795daa26e 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 dcdc78c74..e1e72d35a 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 97c88533f..00870f460 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 134aaa0a6..3c1692656 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 9ce5b264b..1968a6ace 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 da7332787..9bef8708f 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 0170e9a96..d9dea71dd 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 942cc6790..005c197dc 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 deec7dfd7..2c46d4f51 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 d8cbf63c5..6852efa86 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 34ca8d2a8..4e70db7a8 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 170f01d7f..564bd161b 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 b563de61f..442b6becd 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 bb3007975..7f412b4c0 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 469df1c24..9c8207fbd 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 fe7c8de4a..dbf37defb 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 a23fc14ac..7721cc3e6 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 992f9e1f4..017edbe45 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 cc3e4569b..8eb490a4b 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 25bb4dfb7..78e97db90 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 10b72907b..bba50316c 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 467b0def9..5c74d9928 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 0a6361587..4c46d7808 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 45587f2db..b219617fa 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 09ac38551..a24266fb4 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 3a59d4f26..543b481bd 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 c27532783..b27417c82 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 107e64fd8..546982b36 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 fc8d99827..632f45fc1 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 f9ecaaaae..6cbe55032 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 f70a883fe..7ef8cddc3 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 b231bec68..f154533be 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 9e56b5227..f192819a0 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 13aaa0714..82bec1983 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 e119116bb..3e880cbd7 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 233937dd9..5a5df4aa1 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 b026f2980..b910b8bbb 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 1465db5c8..bfc115317 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 25bb4dfb7..fa77eaf0f 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 37da63b42..afbe74507 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 90c51fe5f..dd2f34b15 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 a497d7c2c..bc081baa9 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 27ece386e..ac1783ed2 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 f81049d57..a8305a976 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 3cb779c2e..7abebd2b4 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 ce53e9fba..5a92bd627 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 6af0daa26..8a7a5ae3e 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 7cb7aef71..902f01524 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 8e81c6e03..72cd1b97f 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 c5d2df289..e94fa17be 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 1b102afaf..d7bc82dde 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 56345c6af..f4c2e8432 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 d528b1d05..fd7e7142a 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 5d9e71b57..12133b031 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 e3d7f8f5d..ef1216b43 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 e6f46619c..82bf986bf 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 d6ef31100..268887275 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 5a1cb476b..456fa7207 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 11586e6b3..275806627 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 2b6e7bf1e..93d7c7406 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 25bb4dfb7..3f39e289f 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 0127763e9..1b73aad4e 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 ee17d3e76..e3f53b806 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 7ad71ad64..b5ef8a01b 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 e6913a20f..00a799961 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 fee98b36f..4cda86fd9 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 a75e5b36c..1617e484e 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 7f8a2e426..05af999c9 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 512701e51..3bb65ae18 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 b8bd13bb4..4e1d95949 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 b79271b59..518c0754a 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 361241aaf..6266b2173 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 f3fb00401..7be2730a6 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 31654ecf8..1747775eb 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 0fe30a7a5..f7da272f3 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 a14087e74..c6aebd421 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 b6f4ae9a9..e33f83d0d 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 1f80e99f5..74fb8650f 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 bdf71dec7..4a1a81d65 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 6902a3e63..f84b00005 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 f8546a744..bd486075a 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 25bb4dfb7..cefe266b4 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 49f69de56..0c529fe3a 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 f936beee0..3e9cbc072 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 bdbc90b71..7a859f3d1 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 d9e425735..67315a24e 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 b946f605f..28777c1a8 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 1b38b2f67..99d08cbe5 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 4213a703b..2548ec44d 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 eba9aee8e..78cb9ad92 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 1e57f93e0..7451f90d7 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 5718a3a0f..0fa31f99a 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 9e4a6e605..000000000
--- 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 54bde3ffb..a775b2ecd 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 5bc05a4ae..000000000
--- 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 a7e8d8120..1e9863283 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 68705d2fd..000000000
--- 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 129fc7913..000000000
--- 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 6c9e954b6..000000000
--- 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 745f91589..000000000
--- 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 d864bc020..000000000
--- 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 a0617685d..000000000
--- 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 0f221c209..b5313f27c 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 996631916..000000000
--- 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 fc595d5fe..000000000
--- 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 c918ae774..000000000
--- 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 2484cad4b..000000000
--- 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 c6f096dae..000000000
--- 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 9db7f8c28..000000000
--- 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 3602ef95d..000000000
--- 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 e7aa61eaf..a3bd6c494 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 50fd63d8f..000000000
--- 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 a8b3ee2b1..000000000
--- 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 4bc970ac9..000000000
--- 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 b8da9ca56..000000000
--- 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 35b4b5a37..000000000
--- 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 f3743c402..000000000
--- 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 b513cb1fd..64e654b4c 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 7fe4a3321..21ed33b3d 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 5dcfd568a..52eb6eaa5 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -1,9 +1,47 @@
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+    value: { type: [String, Number], default: '' },
+    showEdit: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      isEditing: false,
+      editedValue: this.value,
+    };
+  },
+  methods: {
+    focusInput() {
+      this.$refs.inputfield.focus();
+    },
+    onEdit() {
+      this.isEditing = true;
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    onUpdate() {
+      this.isEditing = false;
+      this.$emit('update', this.editedValue);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="contact-attribute">
     <div class="title-wrap">
       <h4 class="text-sm title">
         <div class="title--icon">
-          <emoji-or-icon :icon="icon" :emoji="emoji" />
+          <EmojiOrIcon :icon="icon" :emoji="emoji" />
         </div>
         {{ label }}
       </h4>
@@ -49,44 +87,6 @@
   </div>
 </template>
 
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .contact-attribute {
   margin-bottom: var(--space-small);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index a45c5fe2c..ec3865227 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="option-item--user">
-    <thumbnail :src="thumbnail" size="28px" :username="name" />
-    <div class="option__user-data">
-      <h5 class="option__title">
-        {{ name }}
-        <span v-if="identifier" class="user-identifier">
-          (ID: {{ identifier }})
-        </span>
-      </h5>
-      <p class="option__body">
-        <span v-if="email" class="email-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
-          {{ email }}
-        </span>
-        <span v-if="phoneNumber" class="phone-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
-          {{ phoneNumber }}
-        </span>
-        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from '../../../components/widgets/Thumbnail.vue';
 
@@ -55,6 +30,31 @@ export default {
 };
 </script>
 
+<template>
+  <div class="option-item--user">
+    <Thumbnail :src="thumbnail" size="28px" :username="name" />
+    <div class="option__user-data">
+      <h5 class="option__title">
+        {{ name }}
+        <span v-if="identifier" class="user-identifier">
+          {{ $t('MERGE_CONTACTS.DROPDOWN_ITEM.ID', { identifier }) }}
+        </span>
+      </h5>
+      <p class="option__body">
+        <span v-if="email" class="email-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
+        </span>
+        <span v-if="phoneNumber" class="phone-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
+          {{ phoneNumber }}
+        </span>
+        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .option-item--user {
   @apply flex items-center;
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index b600b3185..fc0cfef0d 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -1,56 +1,3 @@
-<template>
-  <div class="contact-fields">
-    <h3 class="text-lg title">
-      {{ $t('CONTACTS_PAGE.FIELDS') }}
-    </h3>
-    <attribute
-      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="mail"
-      emoji=""
-      :value="contact.email"
-      :show-edit="true"
-      @update="onEmailUpdate"
-    />
-    <attribute
-      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="call"
-      emoji=""
-      :value="contact.phone_number"
-      :show-edit="true"
-      @update="onPhoneUpdate"
-    />
-    <attribute
-      v-if="additionalAttributes.location"
-      :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="map"
-      emoji="🌍"
-      :value="additionalAttributes.location"
-      :show-edit="true"
-      @update="onLocationUpdate"
-    />
-    <div
-      v-for="attribute in customAttributekeys"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <attribute
-        :label="attribute"
-        icon="chevron-right"
-        :value="customAttributes[attribute]"
-        :show-edit="true"
-        @update="value => onCustomAttributeUpdate(attribute, value)"
-      />
-    </div>
-    <woot-button
-      size="small"
-      variant="link"
-      icon="add"
-      @click="handleCustomCreate"
-    >
-      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
-    </woot-button>
-  </div>
-</template>
 <script>
 import Attribute from './ContactAttribute.vue';
 
@@ -93,7 +40,7 @@ export default {
       this.$emit('update', { location: value });
     },
     handleCustomCreate() {
-      this.$emit('create-attribute');
+      this.$emit('createAttribute');
     },
     onCustomAttributeUpdate(key, value) {
       this.$emit('update', { custom_attributes: { [key]: value } });
@@ -102,6 +49,60 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact-fields">
+    <h3 class="text-lg title">
+      {{ $t('CONTACTS_PAGE.FIELDS') }}
+    </h3>
+    <Attribute
+      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
+      icon="mail"
+      emoji=""
+      :value="contact.email"
+      show-edit
+      @update="onEmailUpdate"
+    />
+    <Attribute
+      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
+      icon="call"
+      emoji=""
+      :value="contact.phone_number"
+      show-edit
+      @update="onPhoneUpdate"
+    />
+    <Attribute
+      v-if="additionalAttributes.location"
+      :label="$t('CONTACT_PANEL.LOCATION')"
+      icon="map"
+      emoji="🌍"
+      :value="additionalAttributes.location"
+      show-edit
+      @update="onLocationUpdate"
+    />
+    <div
+      v-for="attribute in customAttributekeys"
+      :key="attribute"
+      class="custom-attribute--row"
+    >
+      <Attribute
+        :label="attribute"
+        icon="chevron-right"
+        :value="customAttributes[attribute]"
+        show-edit
+        @update="value => onCustomAttributeUpdate(attribute, value)"
+      />
+    </div>
+    <woot-button
+      size="small"
+      variant="link"
+      icon="add"
+      @click="handleCustomCreate"
+    >
+      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
+    </woot-button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .contact-fields {
   margin-top: var(--space-medium);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
index 3d1b7222a..bae899dab 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -1,46 +1,3 @@
-<template>
-  <div class="contact--intro">
-    <thumbnail
-      :src="contact.thumbnail"
-      size="64px"
-      :username="contact.name"
-      :status="contact.availability_status"
-    />
-
-    <div class="contact--details">
-      <h2 class="text-lg contact--name">
-        {{ contact.name }}
-      </h2>
-      <h3 class="text-base contact--work">
-        {{ contact.title }}
-        <i v-if="company.name" class="icon ion-minus-round" />
-        <span class="company-name">{{ company.name }}</span>
-      </h3>
-      <p v-if="additionalAttributes.description" class="contact--bio">
-        {{ additionalAttributes.description }}
-      </p>
-      <social-icons :social-profiles="socialProfiles" />
-    </div>
-    <div class="contact-actions">
-      <woot-button
-        class="new-message"
-        size="small expanded"
-        icon="ion-paper-airplane"
-        @click="onNewMessageClick"
-      >
-        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="small expanded"
-        icon="edit"
-        @click="onEditClick"
-      >
-        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from 'dashboard/routes/dashboard/conversation/contact/SocialIcons.vue';
@@ -85,6 +42,50 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact--intro">
+    <Thumbnail
+      :src="contact.thumbnail"
+      size="64px"
+      :username="contact.name"
+      :status="contact.availability_status"
+    />
+
+    <div class="contact--details">
+      <h2 class="text-lg contact--name">
+        {{ contact.name }}
+      </h2>
+      <h3 class="text-base contact--work">
+        {{ contact.title }}
+        <i v-if="company.name" class="icon ion-minus-round" />
+        <span class="company-name">{{ company.name }}</span>
+      </h3>
+      <p v-if="additionalAttributes.description" class="contact--bio">
+        {{ additionalAttributes.description }}
+      </p>
+      <SocialIcons :social-profiles="socialProfiles" />
+    </div>
+    <div class="contact-actions">
+      <woot-button
+        class="new-message"
+        size="small expanded"
+        icon="ion-paper-airplane"
+        @click="onNewMessageClick"
+      >
+        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="small expanded"
+        icon="edit"
+        @click="onEditClick"
+      >
+        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .contact--details {
   margin-top: var(--space-small);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
index f9e7a99b4..cb7e61607 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
@@ -1,34 +1,3 @@
-<template>
-  <div class="panel">
-    <contact-intro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <contact-fields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <edit-contact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <new-conversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <add-custom-attribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
 <script>
 import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
 import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
@@ -98,6 +67,38 @@ export default {
 };
 </script>
 
+<template>
+  <div class="panel">
+    <ContactIntro
+      :contact="contact"
+      @message="toggleConversationModal"
+      @edit="toggleEditModal"
+    />
+    <ContactFields
+      :contact="contact"
+      @update="updateField"
+      @createAttribute="toggleCustomAttributeModal"
+    />
+    <EditContact
+      v-if="showEditModal"
+      :show="showEditModal"
+      :contact="contact"
+      @cancel="toggleEditModal"
+    />
+    <NewConversation
+      v-if="enableNewConversation"
+      :show="showConversationModal"
+      :contact="contact"
+      @cancel="toggleConversationModal"
+    />
+    <AddCustomAttribute
+      :show="showCustomAttributeModal"
+      @cancel="toggleCustomAttributeModal"
+      @create="createCustomAttribute"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .panel {
   padding: var(--space-normal) var(--space-normal);
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 8f09a4754..4e5e2104a 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 83c588da7..722d7680a 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -1,3 +1,18 @@
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    parentContactName: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-if="parentContactName"
@@ -31,18 +46,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    primaryContactName: {
-      type: String,
-      default: '',
-    },
-    parentContactName: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 4e45508ee..298b439da 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 6690b2d11..caaa9285d 100644
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
@@ -1,12 +1,3 @@
-<template>
-  <note-list
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import NoteList from './components/NoteList.vue';
@@ -48,3 +39,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <NoteList
+    :is-fetching="uiFlags.isFetching"
+    :notes="notes"
+    @add="onAdd"
+    @delete="onDelete"
+  />
+</template>
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index 69f999e17..f3f82e8a3 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 d4d199b94..cba9b8cc9 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 6061fc769..99d15862b 100644
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -1,27 +1,3 @@
-<template>
-  <div>
-    <add-note @add="onAddNote" />
-    <contact-note
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
 import AddNote from './AddNote.vue';
 import ContactNote from './ContactNote.vue';
@@ -58,3 +34,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <AddNote @add="onAddNote" />
+    <ContactNote
+      v-for="note in notes"
+      :id="note.id"
+      :key="note.id"
+      :note="note.content"
+      :user="note.user"
+      :created-at="note.created_at"
+      @edit="onEditNote"
+      @delete="onDeleteNote"
+    />
+
+    <div v-if="isFetching" class="text-center p-4 text-base">
+      <Spinner size="" />
+      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
+    </div>
+    <div v-else-if="!notes.length" class="text-center p-4 text-base">
+      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 4c86862f5..e75b082ab 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -1,20 +1,3 @@
-<template>
-  <blockquote
-    ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
-  >
-    <p class="header">
-      <strong class="text-slate-700 dark:text-slate-100">
-        {{ author }}
-      </strong>
-      {{ $t('SEARCH.WROTE') }}
-    </p>
-    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
-      <div v-dompurify-html="prepareContent(content)" class="message-content" />
-    </read-more>
-  </blockquote>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ReadMore from './ReadMore.vue';
@@ -81,6 +64,23 @@ export default {
 };
 </script>
 
+<template>
+  <blockquote
+    ref="messageContainer"
+    class="message border-l-2 border-slate-100 dark:border-slate-700"
+  >
+    <p class="header">
+      <strong class="text-slate-700 dark:text-slate-100">
+        {{ author }}
+      </strong>
+      {{ $t('SEARCH.WROTE') }}
+    </p>
+    <ReadMore :shrink="isOverflowing" @expand="isOverflowing = false">
+      <div v-dompurify-html="prepareContent(content)" class="message-content" />
+    </ReadMore>
+  </blockquote>
+</template>
+
 <style scoped lang="scss">
 .message {
   @apply py-0 px-2 mt-2;
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index f94af7b5f..06e128ec2 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -1,7 +1,17 @@
+<script>
+export default {
+  props: {
+    shrink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="read-more">
     <div
-      ref="content"
       :class="{
         'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
           shrink,
@@ -22,17 +32,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    shrink: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
 <style scoped>
 @tailwind components;
 @layer components {
@@ -56,7 +55,6 @@ export default {
   @apply max-h-[100px] overflow-hidden relative;
 }
 .shrink-container::after {
-  @apply content-[''] absolute bottom-0 left-0 right-0 h-[50px] z-10;
 }
 .read-more-button {
   @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index c828f8b0a..431f39d9f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
-    </div>
-    <input
-      ref="searchInput"
-      type="search"
-      class="dark:bg-slate-900"
-      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
-      :value="searchQuery"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="debounceSearch"
-    />
-    <woot-label
-      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
-      :show-close="false"
-      small
-      class="helper-label"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -71,6 +47,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
+    <div class="icon-container">
+      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+    </div>
+    <input
+      ref="searchInput"
+      type="search"
+      class="dark:bg-slate-900"
+      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
+      :value="searchQuery"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="debounceSearch"
+    />
+    <woot-label
+      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
+      :show-close="false"
+      small
+      class="helper-label"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .input-container {
   transition: border-bottom 0.2s ease-in-out;
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
index cfddfcfe6..f74c4dce8 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -9,7 +9,7 @@
       <div class="search-input">
         <fluent-icon icon="search" size="14px" class="search--icon" />
         <span
-          class="text-ellipsis overflow-hidden whitespace-nowrap search-placeholder"
+          class="overflow-hidden text-ellipsis whitespace-nowrap search-placeholder"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </span>
@@ -18,20 +18,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    tabs: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {},
-};
-</script>
 <style lang="scss" scoped>
 .search-input-box {
   @apply p-2;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index 1f5266b5d..9c38bca85 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -1,27 +1,3 @@
-<template>
-  <router-link :to="navigateTo" class="contact-item">
-    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
-    <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
-        {{ name }}
-      </h5>
-      <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
-      >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
-          email
-        }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
-          •
-        </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
-          {{ phone }}
-        </span>
-      </p>
-    </div>
-  </router-link>
-</template>
-
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -59,6 +35,30 @@ export default {
 };
 </script>
 
+<template>
+  <router-link :to="navigateTo" class="contact-item">
+    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
+    <div class="ml-2 rtl:mr-2 rtl:ml-0">
+      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+        {{ name }}
+      </h5>
+      <p
+        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+      >
+        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+          email
+        }}</span>
+        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+          •
+        </span>
+        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+          {{ phone }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
 <style scoped lang="scss">
 .contact-item {
   @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index deaae694c..872ef1b27 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONTACTS')"
-    :empty="!contacts.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="contacts.length" class="search-list">
-      <li v-for="contact in contacts" :key="contact.id">
-        <search-result-contact-item
-          :id="contact.id"
-          :name="contact.name"
-          :email="contact.email"
-          :phone="contact.phone_number"
-          :account-id="accountId"
-          :thumbnail="contact.thumbnail"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -57,3 +34,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.CONTACTS')"
+    :empty="!contacts.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="contacts.length" class="search-list">
+      <li v-for="contact in contacts" :key="contact.id">
+        <SearchResultContactItem
+          :id="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :phone="contact.phone_number"
+          :account-id="accountId"
+          :thumbnail="contact.thumbnail"
+        />
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index 52ef356be..cd4ead3ad 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 3c646a85e..c7f369e44 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -1,26 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
-    :empty="!conversations.length"
-    :query="query"
-    :show-title="showTitle || isFetching"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="conversations.length" class="search-list">
-      <li v-for="conversation in conversations" :key="conversation.id">
-        <search-result-conversation-item
-          :id="conversation.id"
-          :name="conversation.contact.name"
-          :email="conversation.contact.email"
-          :account-id="accountId"
-          :inbox="conversation.inbox"
-          :created-at="conversation.created_at"
-        />
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultSection from './SearchResultSection.vue';
@@ -56,3 +33,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
+    :empty="!conversations.length"
+    :query="query"
+    :show-title="showTitle || isFetching"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="conversations.length" class="search-list">
+      <li v-for="conversation in conversations" :key="conversation.id">
+        <SearchResultConversationItem
+          :id="conversation.id"
+          :name="conversation.contact.name"
+          :email="conversation.contact.email"
+          :account-id="accountId"
+          :inbox="conversation.inbox"
+          :created-at="conversation.created_at"
+        />
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index d2cdf0cb4..92e813e99 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -1,31 +1,3 @@
-<template>
-  <search-result-section
-    :title="$t('SEARCH.SECTION.MESSAGES')"
-    :empty="!messages.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="messages.length" class="search-list">
-      <li v-for="message in messages" :key="message.id">
-        <search-result-conversation-item
-          :id="message.conversation_id"
-          :account-id="accountId"
-          :inbox="message.inbox"
-          :created-at="message.created_at"
-          :message-id="message.id"
-        >
-          <message-content
-            :author="getName(message)"
-            :content="message.content"
-            :search-term="query"
-          />
-        </search-result-conversation-item>
-      </li>
-    </ul>
-  </search-result-section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
@@ -70,3 +42,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.MESSAGES')"
+    :empty="!messages.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="messages.length" class="search-list">
+      <li v-for="message in messages" :key="message.id">
+        <SearchResultConversationItem
+          :id="message.conversation_id"
+          :account-id="accountId"
+          :inbox="message.inbox"
+          :created-at="message.created_at"
+          :message-id="message.id"
+        >
+          <MessageContent
+            :author="getName(message)"
+            :content="message.content"
+            :search-term="query"
+          />
+        </SearchResultConversationItem>
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index 709936122..8a417db90 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,19 +1,3 @@
-<template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
-    </div>
-    <woot-loading-state v-if="isFetching" :message="'Searching'" />
-    <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
-        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
-      </p>
-    </div>
-  </section>
-</template>
-
 <script>
 export default {
   props: {
@@ -46,6 +30,25 @@ export default {
 };
 </script>
 
+<template>
+  <section class="result-section">
+    <div v-if="showTitle" class="header">
+      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+    </div>
+    <woot-loading-state
+      v-if="isFetching"
+      :message="$t('SEARCH.SEARCHING_DATA')"
+    />
+    <slot v-else />
+    <div v-if="empty && !isFetching" class="empty">
+      <fluent-icon icon="info" size="16px" class="icon" />
+      <p class="empty-state__text">
+        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
+      </p>
+    </div>
+  </section>
+</template>
+
 <style scoped lang="scss">
 .result-section {
   @apply my-2 mx-0;
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 93a1e59af..b76e2194e 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="tab-container">
-    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
-      <woot-tabs-item
-        v-for="item in tabs"
-        :key="item.key"
-        :name="item.name"
-        :count="item.count"
-      />
-    </woot-tabs>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -38,11 +25,25 @@ export default {
   methods: {
     onTabChange(index) {
       this.activeTab = index;
-      this.$emit('tab-change', this.tabs[index].key);
+      this.$emit('tabChange', this.tabs[index].key);
     },
   },
 };
 </script>
+
+<template>
+  <div class="tab-container">
+    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
+      <woot-tabs-item
+        v-for="item in tabs"
+        :key="item.key"
+        :name="item.name"
+        :count="item.count"
+      />
+    </woot-tabs>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .tab-container {
   @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index c9b122b32..a5472e6e4 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -1,71 +1,3 @@
-<template>
-  <div class="search-page">
-    <div class="page-header">
-      <woot-button
-        icon="chevron-left"
-        variant="smooth"
-        size="small "
-        class="back-button"
-        @click="onBack"
-      >
-        {{ $t('GENERAL_SETTINGS.BACK') }}
-      </woot-button>
-    </div>
-    <section class="search-root">
-      <header>
-        <search-header @search="onSearch" />
-        <search-tabs
-          v-if="query"
-          :tabs="tabs"
-          :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
-        />
-      </header>
-      <div class="search-results">
-        <div v-if="showResultsSection">
-          <search-result-contacts-list
-            v-if="filterContacts"
-            :is-fetching="uiFlags.contact.isFetching"
-            :contacts="contacts"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-messages-list
-            v-if="filterMessages"
-            :is-fetching="uiFlags.message.isFetching"
-            :messages="messages"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-
-          <search-result-conversations-list
-            v-if="filterConversations"
-            :is-fetching="uiFlags.conversation.isFetching"
-            :conversations="conversations"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
-        </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
-          </p>
-        </div>
-        <div v-else class="empty text-center">
-          <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
-          </p>
-          <p class="empty-state__text">
-            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
-          </p>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
 <script>
 import SearchHeader from './SearchHeader.vue';
 import SearchTabs from './SearchTabs.vue';
@@ -208,6 +140,74 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-page">
+    <div class="page-header">
+      <woot-button
+        icon="chevron-left"
+        variant="smooth"
+        size="small "
+        class="back-button"
+        @click="onBack"
+      >
+        {{ $t('GENERAL_SETTINGS.BACK') }}
+      </woot-button>
+    </div>
+    <section class="search-root">
+      <header>
+        <SearchHeader @search="onSearch" />
+        <SearchTabs
+          v-if="query"
+          :tabs="tabs"
+          :selected-tab="activeTabIndex"
+          @tabChange="tab => (selectedTab = tab)"
+        />
+      </header>
+      <div class="search-results">
+        <div v-if="showResultsSection">
+          <SearchResultContactsList
+            v-if="filterContacts"
+            :is-fetching="uiFlags.contact.isFetching"
+            :contacts="contacts"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <SearchResultMessagesList
+            v-if="filterMessages"
+            :is-fetching="uiFlags.message.isFetching"
+            :messages="messages"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <SearchResultConversationsList
+            v-if="filterConversations"
+            :is-fetching="uiFlags.conversation.isFetching"
+            :conversations="conversations"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+        </div>
+        <div v-else-if="showEmptySearchResults" class="empty">
+          <fluent-icon icon="info" size="16px" class="icon" />
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+          </p>
+        </div>
+        <div v-else class="text-center empty">
+          <p class="text-center margin-bottom-0">
+            <fluent-icon icon="search" size="24px" class="icon" />
+          </p>
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-page {
   @apply flex flex-col w-full bg-white dark:bg-slate-900;
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index a083cc522..ce1277c85 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -1,52 +1,3 @@
-<template>
-  <div class="widget-preview-container">
-    <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
-        name="widget-screen"
-        :items="widgetScreens"
-        :action="handleScreenChange"
-      />
-    </div>
-    <div v-if="isWidgetVisible" class="widget-wrapper">
-      <WidgetHead :config="getWidgetHeadConfig" />
-      <div>
-        <WidgetBody :config="getWidgetBodyConfig" />
-        <WidgetFooter :config="getWidgetFooterConfig" />
-        <div class="branding">
-          <a class="branding-link">
-            <img class="branding-image" :src="globalConfig.logoThumbnail" />
-            <span>
-              {{
-                useInstallationName(
-                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
-                  globalConfig.installationName
-                )
-              }}
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="widget-bubble" :style="getBubblePositionStyle">
-      <button
-        class="bubble"
-        :class="getBubbleTypeClass"
-        :style="{ background: color }"
-        @click="toggleWidget"
-      >
-        <img
-          v-if="!isWidgetVisible"
-          src="~dashboard/assets/images/bubble-logo.svg"
-          alt=""
-        />
-        <div>
-          {{ getWidgetBubbleLauncherTitle }}
-        </div>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
@@ -75,7 +26,6 @@ export default {
     },
     websiteName: {
       type: String,
-      default: '',
       required: true,
     },
     logo: {
@@ -198,6 +148,55 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-preview-container">
+    <div v-if="isWidgetVisible" class="screen-selector">
+      <InputRadioGroup
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div v-if="isWidgetVisible" class="widget-wrapper">
+      <WidgetHead :config="getWidgetHeadConfig" />
+      <div>
+        <WidgetBody :config="getWidgetBodyConfig" />
+        <WidgetFooter :config="getWidgetFooterConfig" />
+        <div class="branding">
+          <a class="branding-link">
+            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+            <span>
+              {{
+                useInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
+                  globalConfig.installationName
+                )
+              }}
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="widget-bubble" :style="getBubblePositionStyle">
+      <button
+        class="bubble"
+        :class="getBubbleTypeClass"
+        :style="{ background: color }"
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+        />
+        <div>
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .screen-selector {
   display: flex;
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 5ab15d5fd..93d63f0ef 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="widget-body-container">
-    <div v-if="config.isDefaultScreen" class="availability-content">
-      <div class="availability-info">
-        <div class="team-status">
-          {{ getStatusText }}
-        </div>
-        <div class="reply-wait-message">
-          {{ config.replyTime }}
-        </div>
-      </div>
-      <thumbnail username="J" size="40px" />
-    </div>
-    <div v-else class="conversation-content">
-      <div class="conversation-wrap">
-        <div class="message-wrap">
-          <div class="user-message-wrap">
-            <div class="user-message">
-              <div class="message-wrap">
-                <div
-                  class="chat-bubble user"
-                  :style="{ background: config.color }"
-                >
-                  <p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="agent-message-wrap">
-          <div class="agent-message">
-            <div class="avatar-wrap" />
-            <div class="message-wrap">
-              <div class="chat-bubble agent">
-                <div class="message-content">
-                  <p>
-                    {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
@@ -85,6 +37,54 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-body-container">
+    <div v-if="config.isDefaultScreen" class="availability-content">
+      <div class="availability-info">
+        <div class="team-status">
+          {{ getStatusText }}
+        </div>
+        <div class="reply-wait-message">
+          {{ config.replyTime }}
+        </div>
+      </div>
+      <Thumbnail username="J" size="40px" />
+    </div>
+    <div v-else class="conversation-content">
+      <div class="conversation-wrap">
+        <div class="message-wrap">
+          <div class="user-message-wrap">
+            <div class="user-message">
+              <div class="message-wrap">
+                <div
+                  class="chat-bubble user"
+                  :style="{ background: config.color }"
+                >
+                  <p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="agent-message-wrap">
+          <div class="agent-message">
+            <div class="avatar-wrap" />
+            <div class="message-wrap">
+              <div class="chat-bubble agent">
+                <div class="message-content">
+                  <p>
+                    {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .widget-body-container {
   .availability-content {
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index b5d4bbc28..34e0f58d2 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,31 +1,3 @@
-<template>
-  <div class="footer-wrap">
-    <custom-button
-      v-if="config.isDefaultScreen"
-      class="start-conversation"
-      :style="{ background: config.color }"
-    >
-      {{
-        $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
-      }}
-    </custom-button>
-    <div v-else class="chat-message-input is-focused">
-      <resizable-text-area
-        id="chat-input"
-        :rows="1"
-        :placeholder="
-          $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
-        "
-        class="user-message-input is-focused"
-      />
-      <div class="button-wrap">
-        <fluent-icon icon="emoji" />
-        <fluent-icon class="icon-send" icon="send" />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import CustomButton from 'dashboard/components/buttons/Button.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -44,6 +16,34 @@ export default {
 };
 </script>
 
+<template>
+  <div class="footer-wrap">
+    <CustomButton
+      v-if="config.isDefaultScreen"
+      class="start-conversation"
+      :style="{ background: config.color }"
+    >
+      {{
+        $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
+      }}
+    </CustomButton>
+    <div v-else class="chat-message-input is-focused">
+      <ResizableTextArea
+        id="chat-input"
+        :rows="1"
+        :placeholder="
+          $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
+        "
+        class="user-message-input is-focused"
+      />
+      <div class="button-wrap">
+        <fluent-icon icon="emoji" />
+        <fluent-icon class="icon-send" icon="send" />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .footer-wrap {
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index e59a00488..70d343f59 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -1,3 +1,25 @@
+<script>
+export default {
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    isDefaultScreen() {
+      return (
+        this.config.isDefaultScreen &&
+        ((this.config.welcomeHeading &&
+          this.config.welcomeHeading.length !== 0) ||
+          (this.config.welcomeTagLine &&
+            this.config.welcomeTagline.length !== 0))
+      );
+    },
+  },
+};
+</script>
+
 <template>
   <div class="header-wrapper">
     <div class="header-branding">
@@ -24,28 +46,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    isDefaultScreen() {
-      return (
-        this.config.isDefaultScreen &&
-        ((this.config.welcomeHeading &&
-          this.config.welcomeHeading.length !== 0) ||
-          (this.config.welcomeTagLine &&
-            this.config.welcomeTagline.length !== 0))
-      );
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .header-wrapper {
   background-color: var(--white);
diff --git a/app/javascript/dashboard/routes/dashboard/Captain.vue b/app/javascript/dashboard/routes/dashboard/Captain.vue
new file mode 100644
index 000000000..24ba89272
--- /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 f1ad0772d..77f7d879f 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,44 +1,3 @@
-<template>
-  <div
-    class="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 000000000..529b624b0
--- /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 6174d3569..d639696ba 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 9c4a638b6..c680788fd 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 03914184f..6b16bf93d 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 d83f00f51..37b1986f0 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 54e900c30..b6ccce531 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
@@ -1,3 +1,46 @@
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      content: '',
+      date: '',
+      label: '',
+    };
+  },
+  computed: {
+    buttonDisabled() {
+      return this.content && this.date === '';
+    },
+  },
+  methods: {
+    resetValue() {
+      this.content = '';
+      this.date = '';
+    },
+
+    optionSelected(event) {
+      this.label = event.target.value;
+    },
+
+    onAdd() {
+      const task = {
+        content: this.content,
+        date: this.date,
+        label: this.label,
+      };
+      this.$emit('add', task);
+      this.resetValue();
+    },
+  },
+};
+</script>
+
 <template>
   <div class="wrap">
     <div class="input-select-wrap">
@@ -47,49 +90,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      content: '',
-      date: '',
-      label: '',
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return this.content && this.date === '';
-    },
-  },
-  methods: {
-    resetValue() {
-      this.content = '';
-      this.date = '';
-    },
-
-    optionSelected(event) {
-      this.label = event.target.value;
-    },
-
-    onAdd() {
-      const task = {
-        content: this.content,
-        date: this.date,
-        label: this.label,
-      };
-      this.$emit('add', task);
-      this.resetValue();
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 01a790194..0c9a1ec5b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,84 +1,3 @@
-<template>
-  <div
-    class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
-    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
-  >
-    <contact-info
-      :show-close-button="showCloseButton"
-      :show-avatar="showAvatar"
-      :contact="contact"
-      close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
-    />
-    <draggable
-      :list="contactSidebarItems"
-      :disabled="!dragEnabled"
-      class="list-group"
-      ghost-class="ghost"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <transition-group>
-        <div
-          v-for="element in contactSidebarItems"
-          :key="element.name"
-          class="list-group-item"
-        >
-          <div v-if="element.name === 'contact_attributes'">
-            <accordion-item
-              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-              :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
-              compact
-              @click="
-                value => toggleSidebarUIState('is_ct_custom_attr_open', value)
-              "
-            >
-              <custom-attributes
-                :contact-id="contact.id"
-                attribute-type="contact_attribute"
-                attribute-class="conversation--attribute"
-                attribute-from="contact_panel"
-                :custom-attributes="contact.custom_attributes"
-                :empty-state-message="
-                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
-                "
-                class="even"
-              />
-            </accordion-item>
-          </div>
-          <div v-if="element.name === 'contact_labels'">
-            <accordion-item
-              :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
-              :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
-              @click="value => toggleSidebarUIState('is_ct_labels_open', value)"
-            >
-              <contact-label :contact-id="contact.id" class="contact-labels" />
-            </accordion-item>
-          </div>
-          <div v-if="element.name === 'previous_conversation'">
-            <accordion-item
-              :title="
-                $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
-              "
-              :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
-              @click="
-                value => toggleSidebarUIState('is_ct_prev_conv_open', value)
-              "
-            >
-              <contact-conversations
-                v-if="contact.id"
-                :contact-id="contact.id"
-                conversation-id=""
-              />
-            </accordion-item>
-          </div>
-        </div>
-      </transition-group>
-    </draggable>
-  </div>
-</template>
-
 <script>
 import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
@@ -86,7 +5,7 @@ import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/Contact
 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';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
   components: {
@@ -95,9 +14,8 @@ export default {
     ContactInfo,
     ContactLabel,
     CustomAttributes,
-    draggable,
+    Draggable: draggable,
   },
-  mixins: [uiSettingsMixin],
   props: {
     contact: {
       type: Object,
@@ -116,6 +34,21 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    } = useUISettings();
+
+    return {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    };
+  },
   data() {
     return {
       dragEnabled: true,
@@ -143,6 +76,85 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
+    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
+  >
+    <ContactInfo
+      :show-close-button="showCloseButton"
+      :show-avatar="showAvatar"
+      :contact="contact"
+      close-icon-name="dismiss"
+      @panelClose="onClose"
+      @togglePanel="onClose"
+    />
+    <Draggable
+      :list="contactSidebarItems"
+      :disabled="!dragEnabled"
+      class="list-group"
+      ghost-class="ghost"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <transition-group>
+        <div
+          v-for="element in contactSidebarItems"
+          :key="element.name"
+          class="list-group-item"
+        >
+          <div v-if="element.name === 'contact_attributes'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
+              :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
+              compact
+              @click="
+                value => toggleSidebarUIState('is_ct_custom_attr_open', value)
+              "
+            >
+              <CustomAttributes
+                :contact-id="contact.id"
+                attribute-type="contact_attribute"
+                attribute-from="contact_panel"
+                :custom-attributes="contact.custom_attributes"
+                :empty-state-message="
+                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
+                "
+              />
+            </AccordionItem>
+          </div>
+          <div v-if="element.name === 'contact_labels'">
+            <AccordionItem
+              :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
+              :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
+              @click="value => toggleSidebarUIState('is_ct_labels_open', value)"
+            >
+              <ContactLabel :contact-id="contact.id" class="contact-labels" />
+            </AccordionItem>
+          </div>
+          <div v-if="element.name === 'previous_conversation'">
+            <AccordionItem
+              :title="
+                $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
+              "
+              :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
+              @click="
+                value => toggleSidebarUIState('is_ct_prev_conv_open', value)
+              "
+            >
+              <ContactConversations
+                v-if="contact.id"
+                :contact-id="contact.id"
+                conversation-id=""
+              />
+            </AccordionItem>
+          </div>
+        </div>
+      </transition-group>
+    </Draggable>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
index 04c79561f..921c86a85 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 6f5e92017..41c986d03 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 2ca3f595f..2c5b4b538 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 1a824f587..98037a821 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 e165c68d1..d4b992abd 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>
 
-  .button.show {
-    @apply opacity-100 translate-x-0 visible;
-  }
-}
-</style>
+          <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>
+
+          <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 def668aca..6e536b555 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 531e9141e..8909a0376 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
@@ -1,3 +1,42 @@
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    isCompleted: {
+      type: Boolean,
+      default: false,
+    },
+    date: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('completed', this.isCompleted);
+    },
+    onEdit() {
+      this.$emit('edit', this.id);
+    },
+    onDelete() {
+      this.$emit('delete', this.id);
+    },
+  },
+};
+</script>
+
 <template>
   <div class="reminder-wrap">
     <div class="status-wrap">
@@ -44,45 +83,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    isCompleted: {
-      type: Boolean,
-      default: false,
-    },
-    date: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('completed', this.isCompleted);
-    },
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .reminder-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
index a9e6c8cdb..6940b9122 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
@@ -1,3 +1,21 @@
+<script>
+export default {
+  methods: {
+    onClickNotes() {
+      this.$emit('notes');
+    },
+
+    onClickEvents() {
+      this.$emit('events');
+    },
+
+    onClickConversation() {
+      this.$emit('conversation');
+    },
+  },
+};
+</script>
+
 <template>
   <div class="wrap">
     <div class="header">
@@ -37,24 +55,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  methods: {
-    onClickNotes() {
-      this.$emit('notes');
-    },
-
-    onClickEvents() {
-      this.$emit('events');
-    },
-
-    onClickConversation() {
-      this.$emit('conversation');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
   width: 100%;
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
index 37876a62c..8eb1fc8e7 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 a6f44ac6b..8f6658392 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,58 +1,3 @@
-<template>
-  <div
-    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
-  >
-    <settings-header
-      button-route="new"
-      :header-title="contact.name"
-      show-back-button
-      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
-      :back-url="backUrl"
-      :show-new-button="false"
-    >
-      <thumbnail
-        v-if="contact.thumbnail"
-        :src="contact.thumbnail"
-        :username="contact.name"
-        size="32px"
-        class="mr-2 rtl:mr-0 rtl:ml-2"
-      />
-    </settings-header>
-
-    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <spinner size="" />
-      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
-    </div>
-    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
-      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-        <contact-info-panel
-          :show-close-button="false"
-          :show-avatar="false"
-          :contact="contact"
-        />
-        <div class="w-3/4 h-full">
-          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-            <woot-tabs-item
-              v-for="tab in tabs"
-              :key="tab.key"
-              :name="tab.name"
-              :show-badge="false"
-            />
-          </woot-tabs>
-          <div
-            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
-          >
-            <contact-notes
-              v-if="selectedTabIndex === 0"
-              :contact-id="Number(contactId)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactInfoPanel from '../components/ContactInfoPanel.vue';
@@ -117,3 +62,58 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+  >
+    <SettingsHeader
+      button-route="new"
+      :header-title="contact.name"
+      show-back-button
+      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
+      :back-url="backUrl"
+      :show-new-button="false"
+    >
+      <Thumbnail
+        v-if="contact.thumbnail"
+        :src="contact.thumbnail"
+        :username="contact.name"
+        size="32px"
+        class="mr-2 rtl:mr-0 rtl:ml-2"
+      />
+    </SettingsHeader>
+
+    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
+      <Spinner size="" />
+      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
+    </div>
+    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
+      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
+        <ContactInfoPanel
+          :show-close-button="false"
+          :show-avatar="false"
+          :contact="contact"
+        />
+        <div class="w-3/4 h-full">
+          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+            <woot-tabs-item
+              v-for="tab in tabs"
+              :key="tab.key"
+              :name="tab.name"
+              :show-badge="false"
+            />
+          </woot-tabs>
+          <div
+            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
+          >
+            <ContactNotes
+              v-if="selectedTabIndex === 0"
+              :contact-id="Number(contactId)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index f78202075..1070566b0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="contact-conversation--panel">
-    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
-      <div v-if="!previousConversations.length" class="no-label-message">
-        <span>
-          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-        </span>
-      </div>
-      <div v-else class="contact-conversation--list">
-        <conversation-card
-          v-for="conversation in previousConversations"
-          :key="conversation.id"
-          :chat="conversation"
-          :hide-inbox-name="false"
-          :hide-thumbnail="true"
-          class="compact"
-        />
-      </div>
-    </div>
-    <spinner v-else />
-  </div>
-</template>
-
 <script>
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
@@ -69,6 +46,29 @@ export default {
 };
 </script>
 
+<template>
+  <div class="contact-conversation--panel">
+    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
+      <div v-if="!previousConversations.length" class="no-label-message">
+        <span>
+          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+        </span>
+      </div>
+      <div v-else class="contact-conversation--list">
+        <ConversationCard
+          v-for="conversation in previousConversations"
+          :key="conversation.id"
+          :chat="conversation"
+          :hide-inbox-name="false"
+          hide-thumbnail
+          class="compact"
+        />
+      </div>
+    </div>
+    <Spinner v-else />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .no-label-message {
   @apply text-slate-500 dark:text-slate-400 mb-4;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
index bf3ee8140..0a409e65d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="custom-attributes--panel">
-    <div
-      v-for="attribute in listOfAttributes"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <div class="custom-attribute--row__attribute">
-        {{ attribute }}
-      </div>
-      <div>
-        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
-      </div>
-    </div>
-    <p v-if="!listOfAttributes.length">
-      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
-    </p>
-  </div>
-</template>
-
 <script>
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
@@ -56,6 +36,26 @@ export default {
 };
 </script>
 
+<template>
+  <div class="custom-attributes--panel">
+    <div
+      v-for="attribute in listOfAttributes"
+      :key="attribute"
+      class="custom-attribute--row"
+    >
+      <div class="custom-attribute--row__attribute">
+        {{ attribute }}
+      </div>
+      <div>
+        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
+      </div>
+    </div>
+    <p v-if="!listOfAttributes.length">
+      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
+    </p>
+  </div>
+</template>
+
 <style scoped>
 .custom-attributes--panel {
   margin-bottom: var(--space-normal);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index bfb868892..1bba00568 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -1,7 +1,17 @@
+<script>
+export default {
+  props: {
+    title: { type: String, required: true },
+    value: { type: [String, Number], default: '' },
+    compact: { type: Boolean, default: false },
+  },
+};
+</script>
+
 <template>
   <div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
     <div class="items-center flex justify-between mb-1.5">
-      <span class="text-slate-800 font-medium dark:text-slate-100 text-sm">
+      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
         {{ title }}
       </span>
       <slot name="button" />
@@ -13,15 +23,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    compact: { type: Boolean, default: false },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 731ac26e4..8d82e5465 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 ec309f7bd..d718d3598 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 2a095c063..987f42d18 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 820295b57..f59f69b87 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 cd3cdfb80..48b7ec89f 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 a2bade368..6cda0ff7f 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 38650bee0..8f2881f0b 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 e81d048d1..5b0a33c3a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -1,30 +1,3 @@
-<template>
-  <div
-    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
-  >
-    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
-      {{ macro.name }}
-    </h6>
-    <div
-      v-for="(action, i) in resolvedMacro"
-      :key="i"
-      class="relative pl-4 macro-block"
-    >
-      <div
-        v-if="i !== macro.actions.length - 1"
-        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
-      />
-      <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
-      />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
-        {{ action.actionName }}
-      </p>
-      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
-    </div>
-  </div>
-</template>
-
 <script>
 import {
   resolveActionName,
@@ -81,6 +54,33 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+  >
+    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+      {{ macro.name }}
+    </h6>
+    <div
+      v-for="(action, i) in resolvedMacro"
+      :key="i"
+      class="relative pl-4 macro-block"
+    >
+      <div
+        v-if="i !== macro.actions.length - 1"
+        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
+      />
+      <div
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
+      />
+      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+        {{ action.actionName }}
+      </p>
+      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .macro-preview {
   .macro-block {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index cf4028976..5281ed890 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 f8862dcea..696d75848 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 02bfeff09..3924ec22d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,63 +1,5 @@
-<template>
-  <div class="ltr:-ml-1 rtl:-mr-1 h-5 w-full">
-    <a
-      v-if="href"
-      :href="href"
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
-    >
-      <emoji-or-icon
-        :icon="icon"
-        :emoji="emoji"
-        icon-size="14"
-        class="ltr:ml-1 rtl:mr-1 flex-shrink-0"
-      />
-      <span
-        v-if="value"
-        class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-        :title="value"
-      >
-        {{ value }}
-      </span>
-      <span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
-
-      <woot-button
-        v-if="showCopy"
-        type="submit"
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="clipboard"
-        class-names="p-0"
-        @click="onCopy"
-      />
-    </a>
-
-    <div
-      v-else
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
-    >
-      <emoji-or-icon
-        :icon="icon"
-        :emoji="emoji"
-        icon-size="14"
-        class="ltr:ml-1 rtl:mr-1 flex-shrink-0"
-      />
-      <span
-        v-if="value"
-        class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-      >
-        {{ value }}
-      </span>
-      <span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
-    </div>
-  </div>
-</template>
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 
@@ -65,7 +7,6 @@ export default {
   components: {
     EmojiOrIcon,
   },
-  mixins: [alertMixin],
   props: {
     href: {
       type: String,
@@ -92,8 +33,67 @@ export default {
     async onCopy(e) {
       e.preventDefault();
       await copyTextToClipboard(this.value);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
     },
   },
 };
 </script>
+
+<template>
+  <div class="w-full h-5 ltr:-ml-1 rtl:-mr-1">
+    <a
+      v-if="href"
+      :href="href"
+      class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
+    >
+      <EmojiOrIcon
+        :icon="icon"
+        :emoji="emoji"
+        icon-size="14"
+        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
+      />
+      <span
+        v-if="value"
+        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
+        :title="value"
+      >
+        {{ value }}
+      </span>
+      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
+        $t('CONTACT_PANEL.NOT_AVAILABLE')
+      }}</span>
+
+      <woot-button
+        v-if="showCopy"
+        type="submit"
+        variant="clear"
+        size="tiny"
+        color-scheme="secondary"
+        icon="clipboard"
+        class-names="p-0"
+        @click="onCopy"
+      />
+    </a>
+
+    <div
+      v-else
+      class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
+    >
+      <EmojiOrIcon
+        :icon="icon"
+        :emoji="emoji"
+        icon-size="14"
+        class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
+      />
+      <span
+        v-if="value"
+        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
+      >
+        {{ value }}
+      </span>
+      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
+        $t('CONTACT_PANEL.NOT_AVAILABLE')
+      }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 075fff1d0..21ed74e6a 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 c33b9031d..b5c3a77a4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -1,21 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('CREATE_CONTACT.TITLE')"
-        :header-content="$t('CREATE_CONTACT.DESC')"
-      />
-      <contact-form
-        :in-progress="uiFlags.isCreating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
@@ -29,10 +11,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
   },
 
   computed: {
@@ -54,3 +32,21 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CREATE_CONTACT.TITLE')"
+        :header-content="$t('CREATE_CONTACT.DESC')"
+      />
+      <ContactForm
+        :in-progress="uiFlags.isCreating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index 8099da416..21f1de0e3 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,24 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
-          contact.name || contact.email
-        }`"
-        :header-content="$t('EDIT_CONTACT.DESC')"
-      />
-      <contact-form
-        :contact="contact"
-        :in-progress="uiFlags.isUpdating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
@@ -61,3 +40,24 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
+          contact.name || contact.email
+        }`"
+        :header-content="$t('EDIT_CONTACT.DESC')"
+      />
+      <ContactForm
+        :contact="contact"
+        :in-progress="uiFlags.isUpdating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
index b7527c096..a0a579bbf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
@@ -1,21 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('NEW_CONVERSATION.TITLE')"
-        :header-content="$t('NEW_CONVERSATION.DESC')"
-      />
-      <conversation-form
-        :contact="contact"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import ConversationForm from './ConversationForm.vue';
 
@@ -59,3 +41,21 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('NEW_CONVERSATION.TITLE')"
+        :header-content="$t('NEW_CONVERSATION.DESC')"
+      />
+      <ConversationForm
+        :contact="contact"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index a4152051d..564e8415d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -1,21 +1,3 @@
-<template>
-  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
-    <a
-      v-for="profile in availableProfiles"
-      :key="profile.key"
-      :href="`${profile.link}${socialProfiles[profile.key]}`"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        :icon="`brand-${profile.key}`"
-        size="16"
-        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-      />
-    </a>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -44,3 +26,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
+    <a
+      v-for="profile in availableProfiles"
+      :key="profile.key"
+      :href="`${profile.link}${socialProfiles[profile.key]}`"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <fluent-icon
+        :icon="`brand-${profile.key}`"
+        size="16"
+        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
index dae4f926b..8ba5b21c9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="mx-0 flex flex-wrap">
-    <templates-picker
-      v-if="!selectedWaTemplate"
-      :inbox-id="inboxId"
-      @onSelect="pickTemplate"
-    />
-    <template-parser
-      v-else
-      :template="selectedWaTemplate"
-      @resetTemplate="onResetTemplate"
-      @sendMessage="onSendMessage"
-    />
-  </div>
-</template>
-
 <script>
 import TemplatesPicker from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue';
 import TemplateParser from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue';
@@ -27,10 +11,6 @@ export default {
       type: Number,
       default: undefined,
     },
-    show: {
-      type: Boolean,
-      default: true,
-    },
   },
   data() {
     return {
@@ -47,7 +27,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
@@ -56,4 +36,18 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <div class="flex flex-wrap mx-0">
+    <TemplatesPicker
+      v-if="!selectedWaTemplate"
+      :inbox-id="inboxId"
+      @onSelect="pickTemplate"
+    />
+    <TemplateParser
+      v-else
+      :template="selectedWaTemplate"
+      @resetTemplate="onResetTemplate"
+      @sendMessage="onSendMessage"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 20bef48f6..3c127b857 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 df0d6d7ec..942ba115c 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 d84158477..b7d5e17dd 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 1988e9974..0a4fe57e6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -1,16 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
-    @click="toggle"
-  />
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +14,19 @@ export default {
 };
 </script>
 
+<template>
+  <woot-button
+    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
+    icon="arrow-right-import"
+    size="tiny"
+    variant="smooth"
+    color-scheme="secondary"
+    class="layout-switch__container"
+    :class="{ expanded: isOnExpandedLayout }"
+    @click="toggle"
+  />
+</template>
+
 <style lang="scss" soped>
 .layout-switch__container {
   &.expanded .icon {
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
index ec49a6d96..e9ada22ff 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 75dae4e7f..843dea527 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 b02f29342..0f30f1efc 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 52ddcc921..b1e334b2c 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 a1d8f2dd3..2b9a09d6d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="edit-article--container">
-    <resizable-text-area
-      v-model="articleTitle"
-      type="text"
-      :rows="1"
-      class="article-heading"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="onTitleInput"
-    />
-    <woot-article-editor
-      v-model="articleContent"
-      class="article-content"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
-      :enabled-menu-options="customEditorMenuOptions"
-      @focus="onFocus"
-      @blur="onBlur"
-      @input="onContentInput"
-    />
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -38,10 +14,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    isSettingsSidebarOpen: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -56,7 +28,7 @@ export default {
     this.articleContent = this.article.content;
     this.saveArticle = debounce(
       values => {
-        this.$emit('save-article', values);
+        this.$emit('saveArticle', values);
       },
       300,
       false
@@ -79,6 +51,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="edit-article--container">
+    <ResizableTextArea
+      v-model="articleTitle"
+      type="text"
+      :rows="1"
+      class="article-heading"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onTitleInput"
+    />
+    <WootArticleEditor
+      v-model="articleContent"
+      class="article-content"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuOptions"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onContentInput"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .edit-article--container {
   @apply my-8 mx-auto py-0 max-w-[56rem] w-full;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index 3ebdf011f..18281aec3 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 836f77250..79c578c48 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -1,17 +1,63 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
+export default {
+  name: 'ArticleSearchResultItem',
+  props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: 'Untitled',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    category: {
+      type: String,
+      default: '',
+    },
+    locale: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleInsert(e) {
+      e.stopPropagation();
+      this.$emit('insert', this.id);
+    },
+    handlePreview(e) {
+      e.stopPropagation();
+      this.$emit('preview', this.id);
+    },
+    async handleCopy(e) {
+      e.stopPropagation();
+      await copyTextToClipboard(this.url);
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+    },
+  },
+};
+</script>
+
 <template>
   <button
-    class="flex flex-col 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"
+    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="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"
+      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="text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300 mb-0 w-full"
+        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300"
       >
         {{ locale }}
         {{ ` / ` }}
@@ -40,54 +86,3 @@
     </div>
   </button>
 </template>
-
-<script>
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  name: 'ArticleSearchResultItem',
-  mixins: [alertMixin],
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    title: {
-      type: String,
-      default: 'Untitled',
-    },
-    body: {
-      type: String,
-      default: '',
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    handleInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert', this.id);
-    },
-    handlePreview(e) {
-      e.stopPropagation();
-      this.$emit('preview', this.id);
-    },
-    async handleCopy(e) {
-      e.stopPropagation();
-      await copyTextToClipboard(this.url);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
index 168ac792c..704ee64c6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
-    <div class="py-1">
-      <woot-button
-        variant="link"
-        size="small"
-        icon="chevron-left"
-        @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
-      </woot-button>
-    </div>
-    <div class="-ml-4 h-full overflow-y-auto">
-      <div class="w-full h-full min-h-0">
-        <iframe-loader :url="url" />
-      </div>
-    </div>
-
-    <div class="flex justify-end gap-2 py-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        is-expanded
-        color-scheme="secondary"
-        icon="chevron-left"
-        @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
-      </woot-button>
-      <woot-button
-        size="small"
-        is-expanded
-        icon="arrow-download"
-        @click="onInsert"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
@@ -65,3 +24,44 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
+    <div class="py-1">
+      <woot-button
+        variant="link"
+        size="small"
+        icon="chevron-left"
+        @click="onBack"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
+      </woot-button>
+    </div>
+    <div class="-ml-4 h-full overflow-y-auto">
+      <div class="w-full h-full min-h-0">
+        <IframeLoader :url="url" />
+      </div>
+    </div>
+
+    <div class="flex justify-end gap-2 py-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        is-expanded
+        color-scheme="secondary"
+        icon="chevron-left"
+        @click="onBack"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
+      </woot-button>
+      <woot-button
+        size="small"
+        is-expanded
+        icon="arrow-download"
+        @click="onInsert"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index 661473316..da139ddb5 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 b7370939f..8e9b16ac4 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 4a6eb5b8b..ca50c11e0 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="flex justify-end gap-1 py-4 bg-white dark:bg-slate-900 h-full overflow-y-auto"
-  >
-    <div class="flex flex-col gap-1 w-full">
-      <div v-if="isLoading" class="empty-state-message">
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
-      </div>
-      <div v-else-if="showNoResults" class="empty-state-message">
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
-      </div>
-      <search-result-item
-        v-for="article in articles"
-        v-else
-        :id="article.id"
-        :key="article.id"
-        :title="article.title"
-        :body="article.content"
-        :url="article.url"
-        :category="article.category.name"
-        :locale="article.localeName"
-        @preview="handlePreview"
-        @insert="handleInsert"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import SearchResultItem from './ArticleSearchResultItem.vue';
 
@@ -47,10 +19,6 @@ export default {
       type: String,
       default: '',
     },
-    portalSlug: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     showNoResults() {
@@ -67,6 +35,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex justify-end h-full gap-1 py-4 overflow-y-auto bg-white dark:bg-slate-900"
+  >
+    <div class="flex flex-col w-full gap-1">
+      <div v-if="isLoading" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
+      </div>
+      <div v-else-if="showNoResults" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
+      </div>
+      <template v-else>
+        <SearchResultItem
+          v-for="article in articles"
+          :id="article.id"
+          :key="article.id"
+          :title="article.title"
+          :body="article.content"
+          :url="article.url"
+          :category="article.category.name"
+          :locale="article.localeName"
+          @preview="handlePreview"
+          @insert="handleInsert"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .empty-state-message {
   @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 1e8c2e92c..cb0adbdbc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -1,70 +1,3 @@
-<template>
-  <div class="flex-1">
-    <div
-      class="hidden lg:grid py-0 px-6 h-12 content-center grid-cols-12 z-10 gap-4 border-b border-slate-50 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
-      :class="{ draggable: onCategoryPage }"
-    >
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-6"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right hidden lg:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
-      </div>
-      <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right rtl:text-left hidden md:block col-span-2"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
-      </div>
-    </div>
-    <draggable
-      tag="div"
-      class="border-t-0 px-4 pb-4"
-      :disabled="!dragEnabled"
-      :list="localArticles"
-      ghost-class="article-ghost-class"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <ArticleItem
-        v-for="article in localArticles"
-        :id="article.id"
-        :key="article.id"
-        :class="{ draggable: onCategoryPage }"
-        :title="article.title"
-        :author="article.author"
-        :show-drag-icon="dragEnabled"
-        :category="article.category"
-        :views="article.views"
-        :status="article.status"
-        :updated-at="article.updated_at"
-      />
-    </draggable>
-
-    <table-footer
-      v-if="showArticleFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
 <script>
 import ArticleItem from './ArticleItem.vue';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
@@ -74,7 +7,7 @@ export default {
   components: {
     ArticleItem,
     TableFooter,
-    draggable,
+    Draggable: draggable,
   },
   props: {
     articles: {
@@ -150,11 +83,79 @@ export default {
       this.$emit('reorder', reorderedGroup);
     },
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
 </script>
+
+<template>
+  <div class="flex-1">
+    <div
+      class="sticky z-10 content-center hidden h-12 grid-cols-12 gap-4 px-6 py-0 bg-white border-b lg:grid border-slate-50 dark:border-slate-700 top-16 dark:bg-slate-900"
+      :class="{ draggable: onCategoryPage }"
+    >
+      <div
+        class="col-span-6 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
+      </div>
+      <div
+        class="col-span-2 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
+      </div>
+      <div
+        class="hidden px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right lg:block"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
+      </div>
+      <div
+        class="px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
+      </div>
+      <div
+        class="hidden col-span-2 px-0 py-2 text-sm font-semibold text-right capitalize text-slate-700 dark:text-slate-100 rtl:text-left md:block"
+      >
+        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
+      </div>
+    </div>
+    <Draggable
+      tag="div"
+      class="px-4 pb-4 border-t-0"
+      :disabled="!dragEnabled"
+      :list="localArticles"
+      ghost-class="article-ghost-class"
+      @start="dragging = true"
+      @end="onDragEnd"
+    >
+      <ArticleItem
+        v-for="article in localArticles"
+        :id="article.id"
+        :key="article.id"
+        :class="{ draggable: onCategoryPage }"
+        :title="article.title"
+        :author="article.author"
+        :show-drag-icon="dragEnabled"
+        :category="article.category"
+        :views="article.views"
+        :status="article.status"
+        :updated-at="article.updated_at"
+      />
+    </Draggable>
+
+    <TableFooter
+      v-if="showArticleFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      class="bottom-0 border-t dark:bg-slate-900 border-slate-75 dark:border-slate-700/50"
+      @pageChange="onPageChange"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 /*
 The .article-ghost-class class is maintained as the vueDraggable doesn't allow multiple classes
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index d946b1b11..7e8c2d428 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -1,142 +1,3 @@
-<template>
-  <div
-    class="flex p-6 items-center justify-between w-full h-16 sticky top-0 z-50 bg-white dark:bg-slate-900"
-  >
-    <div class="flex items-center">
-      <woot-sidemenu-icon />
-      <div class="flex items-center my-0 mx-2">
-        <h3 class="text-xl text-slate-800 dark:text-slate-100 font-medium mb-0">
-          {{ headerTitle }}
-        </h3>
-        <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
-          `(${count})`
-        }}</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-1">
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="filter"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="openFilterModal"
-      >
-        {{ $t('HELP_CENTER.HEADER.FILTER') }}
-      </woot-button>
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="arrow-sort"
-        color-scheme="secondary"
-        size="small"
-        variant="hollow"
-        @click="openDropdown"
-      >
-        {{ $t('HELP_CENTER.HEADER.SORT') }}
-        <span
-          class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
-        >
-          {{ selectedValue }}
-          <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
-        </span>
-      </woot-button>
-      <div
-        v-if="showSortByDropdown"
-        v-on-clickaway="closeDropdown"
-        class="dropdown-pane dropdown-pane--open"
-      >
-        <woot-dropdown-menu>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="send-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
-            </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="dual-screen-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
-            </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="calendar-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
-            </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
-      </div>
-      <woot-button
-        v-if="shouldShowSettings"
-        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
-        icon="settings"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-      />
-      <div class="relative">
-        <woot-button
-          v-if="shouldShowLocaleDropdown"
-          icon="globe"
-          color-scheme="secondary"
-          size="small"
-          variant="hollow"
-          @click="openLocaleDropdown"
-        >
-          <div class="flex justify-between w-full min-w-0 items-center">
-            <span
-              class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
-            >
-              {{ selectedLocale }}
-              <Fluent-icon
-                class="dropdown-arrow"
-                icon="chevron-down"
-                size="14"
-              />
-            </span>
-          </div>
-        </woot-button>
-        <div
-          v-if="showLocaleDropdown"
-          v-on-clickaway="closeLocaleDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <multiselect-dropdown-items
-            :options="switchableLocales"
-            :has-thumbnail="false"
-            :selected-items="[selectedLocale]"
-            :input-placeholder="
-              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
-            "
-            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
-            @click="onClickSelectItem"
-          />
-        </div>
-      </div>
-      <woot-button
-        size="small"
-        icon="add"
-        color-scheme="primary"
-        @click="onClickNewArticlePage"
-      >
-        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -211,7 +72,7 @@ export default {
       this.showLocaleDropdown = false;
     },
     onClickNewArticlePage() {
-      this.$emit('new-article-page');
+      this.$emit('newArticlePage');
     },
     onClickSelectItem(value) {
       const { name, code } = value;
@@ -219,12 +80,151 @@ export default {
       if (!name || name === this.selectedLocale) {
         return;
       }
-      this.$emit('change-locale', code);
+      this.$emit('changeLocale', code);
     },
   },
 };
 </script>
 
+<template>
+  <div
+    class="sticky top-0 z-50 flex items-center justify-between w-full h-16 p-6 bg-white dark:bg-slate-900"
+  >
+    <div class="flex items-center">
+      <woot-sidemenu-icon />
+      <div class="flex items-center mx-2 my-0">
+        <h3 class="mb-0 text-xl font-medium text-slate-800 dark:text-slate-100">
+          {{ headerTitle }}
+        </h3>
+        <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
+          `(${count})`
+        }}</span>
+      </div>
+    </div>
+    <div class="flex items-center gap-1">
+      <woot-button
+        v-if="shouldShowSettings"
+        icon="filter"
+        color-scheme="secondary"
+        variant="hollow"
+        size="small"
+        @click="openFilterModal"
+      >
+        {{ $t('HELP_CENTER.HEADER.FILTER') }}
+      </woot-button>
+      <woot-button
+        v-if="shouldShowSettings"
+        icon="arrow-sort"
+        color-scheme="secondary"
+        size="small"
+        variant="hollow"
+        @click="openDropdown"
+      >
+        {{ $t('HELP_CENTER.HEADER.SORT') }}
+        <span
+          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
+        >
+          {{ selectedValue }}
+          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
+        </span>
+      </woot-button>
+      <div
+        v-if="showSortByDropdown"
+        v-on-clickaway="closeDropdown"
+        class="dropdown-pane dropdown-pane--open"
+      >
+        <WootDropdownMenu>
+          <WootDropdownItem>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="send-clock"
+            >
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
+            </woot-button>
+          </WootDropdownItem>
+          <WootDropdownItem>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="dual-screen-clock"
+            >
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
+            </woot-button>
+          </WootDropdownItem>
+          <WootDropdownItem>
+            <woot-button
+              variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="calendar-clock"
+            >
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
+            </woot-button>
+          </WootDropdownItem>
+        </WootDropdownMenu>
+      </div>
+      <woot-button
+        v-if="shouldShowSettings"
+        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
+        icon="settings"
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+      />
+      <div class="relative">
+        <woot-button
+          v-if="shouldShowLocaleDropdown"
+          icon="globe"
+          color-scheme="secondary"
+          size="small"
+          variant="hollow"
+          @click="openLocaleDropdown"
+        >
+          <div class="flex items-center justify-between w-full min-w-0">
+            <span
+              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
+            >
+              {{ selectedLocale }}
+              <FluentIcon
+                class="dropdown-arrow"
+                icon="chevron-down"
+                size="14"
+              />
+            </span>
+          </div>
+        </woot-button>
+        <div
+          v-if="showLocaleDropdown"
+          v-on-clickaway="closeLocaleDropdown"
+          class="dropdown-pane dropdown-pane--open"
+        >
+          <MultiselectDropdownItems
+            :options="switchableLocales"
+            :has-thumbnail="false"
+            :selected-items="[selectedLocale]"
+            :input-placeholder="
+              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
+            "
+            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
+            @click="onClickSelectItem"
+          />
+        </div>
+      </div>
+      <woot-button
+        size="small"
+        icon="add"
+        color-scheme="primary"
+        @click="onClickNewArticlePage"
+      >
+        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .dropdown-pane--open {
   @apply absolute top-10 right-0 z-50 min-w-[8rem];
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index 67b9ccc61..4555f8f14 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -1,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 bff12f5e7..5c204fe4c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -1,62 +1,3 @@
-<template>
-  <div class="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 c25717a0c..9a0ffb8a7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -1,207 +1,15 @@
-<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"
-    >
-      <thumbnail :username="portal.name" variant="square" />
-      <div class="ml-2 rtl:ml-0 rtl:mr-2 flex-grow">
-        <header class="flex items-start justify-between mb-8">
-          <div>
-            <div class="flex items-center">
-              <h2 class="mb-0 text-lg text-slate-800 dark:text-slate-100">
-                {{ portal.name }}
-              </h2>
-              <woot-label
-                :title="status"
-                :color-scheme="labelColor"
-                size="small"
-                variant="smooth"
-                class="my-0 mx-2"
-              />
-            </div>
-            <p class="text-sm mb-0 text-slate-700 dark:text-slate-200">
-              {{ articleCount }}
-              {{
-                $t(
-                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
-                )
-              }}
-            </p>
-          </div>
-          <div class="flex flex-row gap-1">
-            <woot-button
-              variant="smooth"
-              size="small"
-              color-scheme="primary"
-              @click="addLocale"
-            >
-              {{
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD')
-              }}
-            </woot-button>
-            <woot-button
-              variant="hollow"
-              size="small"
-              color-scheme="secondary"
-              @click="openSite"
-            >
-              {{
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.VISIT')
-              }}
-            </woot-button>
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.SETTINGS'
-                )
-              "
-              variant="hollow"
-              size="small"
-              icon="settings"
-              color-scheme="secondary"
-              @click="openSettings"
-            />
-            <woot-button
-              v-tooltip.top-end="
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.DELETE')
-              "
-              variant="hollow"
-              color-scheme="alert"
-              size="small"
-              icon="delete"
-              @click="onClickOpenDeleteModal(portal)"
-            />
-          </div>
-        </header>
-        <div class="mb-12">
-          <h2
-            class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
-          >
-            {{
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
-              )
-            }}
-          </h2>
-          <div
-            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">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.name }}
-                </span>
-              </div>
-              <div class="flex items-start flex-col mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.custom_domain }}
-                </span>
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <div class="flex items-start flex-col mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.slug }}
-                </span>
-              </div>
-              <div class="flex items-start flex-col mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.page_title }}
-                </span>
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <div class="flex items-start flex-col mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
-                  )
-                }}</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"
-                    :style="{ background: portal.color }"
-                  />
-                </div>
-              </div>
-              <div class="flex items-start flex-col mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.header_text }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="mb-12">
-          <h2
-            class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
-          >
-            {{
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
-              )
-            }}
-          </h2>
-          <locale-item-table
-            :locales="locales"
-            :selected-locale-code="portal.meta.default_locale"
-            @change-default-locale="changeDefaultLocale"
-            @delete="deletePortalLocale"
-          />
-        </div>
-      </div>
-    </div>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="onClickDeletePortal"
-      :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
-      :message="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.MESSAGE')"
-      :message-value="deleteMessageValue"
-      :confirm-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.YES')"
-      :reject-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.NO')"
-    />
-  </div>
-</template>
-
 <script>
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import LocaleItemTable from './PortalListItemTable.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import alertMixin from 'shared/mixins/alertMixin';
 import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
 export default {
   components: {
-    thumbnail,
+    Thumbnail: thumbnail,
     LocaleItemTable,
   },
-  mixins: [alertMixin, uiSettingsMixin],
   props: {
     portal: {
       type: Object,
@@ -213,6 +21,13 @@ export default {
       values: ['archived', 'draft', 'published'],
     },
   },
+  setup() {
+    const { updateUISettings } = useUISettings();
+
+    return {
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showDeleteConfirmationPopup: false,
@@ -249,10 +64,10 @@ export default {
   },
   methods: {
     addLocale() {
-      this.$emit('add-locale', this.portal.id);
+      this.$emit('addLocale', this.portal.id);
     },
     openSite() {
-      this.$emit('open-site', this.portal.slug);
+      this.$emit('openSite', this.portal.slug);
     },
     openSettings() {
       this.fetchPortalAndItsCategories();
@@ -300,7 +115,7 @@ export default {
             'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
           );
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     changeDefaultLocale({ localeCode }) {
@@ -357,7 +172,7 @@ export default {
       } catch (error) {
         this.alertMessage = error?.message || errorMessage;
       } finally {
-        this.showAlert(this.alertMessage);
+        useAlert(this.alertMessage);
       }
     },
     navigateToPortalEdit() {
@@ -369,3 +184,194 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="relative flex p-4 mb-3 bg-white border border-solid rounded-md dark:bg-slate-900 border-slate-100 dark:border-slate-600"
+    >
+      <Thumbnail :username="portal.name" variant="square" />
+      <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">
+              <h2 class="mb-0 text-lg text-slate-800 dark:text-slate-100">
+                {{ portal.name }}
+              </h2>
+              <woot-label
+                :title="status"
+                :color-scheme="labelColor"
+                size="small"
+                variant="smooth"
+                class="mx-2 my-0"
+              />
+            </div>
+            <p class="mb-0 text-sm text-slate-700 dark:text-slate-200">
+              {{ articleCount }}
+              {{
+                $t(
+                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
+                )
+              }}
+            </p>
+          </div>
+          <div class="flex flex-row gap-1">
+            <woot-button
+              variant="smooth"
+              size="small"
+              color-scheme="primary"
+              @click="addLocale"
+            >
+              {{
+                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD')
+              }}
+            </woot-button>
+            <woot-button
+              variant="hollow"
+              size="small"
+              color-scheme="secondary"
+              @click="openSite"
+            >
+              {{
+                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.VISIT')
+              }}
+            </woot-button>
+            <woot-button
+              v-tooltip.top-end="
+                $t(
+                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.SETTINGS'
+                )
+              "
+              variant="hollow"
+              size="small"
+              icon="settings"
+              color-scheme="secondary"
+              @click="openSettings"
+            />
+            <woot-button
+              v-tooltip.top-end="
+                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.DELETE')
+              "
+              variant="hollow"
+              color-scheme="alert"
+              size="small"
+              icon="delete"
+              @click="onClickOpenDeleteModal(portal)"
+            />
+          </div>
+        </header>
+        <div class="mb-12">
+          <h2
+            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
+          >
+            {{
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
+              )
+            }}
+          </h2>
+          <div
+            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 flex-col items-start mb-4">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
+                  )
+                }}</label>
+                <span class="text-sm text-slate-600 dark:text-slate-300">
+                  {{ portal.name }}
+                </span>
+              </div>
+              <div class="flex flex-col items-start mb-4">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
+                  )
+                }}</label>
+                <span class="text-sm text-slate-600 dark:text-slate-300">
+                  {{ portal.custom_domain }}
+                </span>
+              </div>
+            </div>
+            <div class="flex flex-col">
+              <div class="flex flex-col items-start mb-4">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
+                  )
+                }}</label>
+                <span class="text-sm text-slate-600 dark:text-slate-300">
+                  {{ portal.slug }}
+                </span>
+              </div>
+              <div class="flex flex-col items-start mb-4">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
+                  )
+                }}</label>
+                <span class="text-sm text-slate-600 dark:text-slate-300">
+                  {{ portal.page_title }}
+                </span>
+              </div>
+            </div>
+            <div class="flex flex-col">
+              <div class="flex flex-col items-start mb-4">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
+                  )
+                }}</label>
+                <div class="flex items-center">
+                  <div
+                    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 flex-col items-start mb-4">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
+                  )
+                }}</label>
+                <span class="text-sm text-slate-600 dark:text-slate-300">
+                  {{ portal.header_text }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mb-12">
+          <h2
+            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
+          >
+            {{
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
+              )
+            }}
+          </h2>
+          <LocaleItemTable
+            :locales="locales"
+            :selected-locale-code="portal.meta.default_locale"
+            @changeDefaultLocale="changeDefaultLocale"
+            @delete="deletePortalLocale"
+          />
+        </div>
+      </div>
+    </div>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="onClickDeletePortal"
+      :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
+      :message="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.MESSAGE')"
+      :message-value="deleteMessageValue"
+      :confirm-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.YES')"
+      :reject-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index d07e14271..bf3e08c6f 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 3de2a6f52..a34bfb4fc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -1,3 +1,41 @@
+<script>
+import PortalSwitch from './PortalSwitch.vue';
+export default {
+  components: {
+    PortalSwitch,
+  },
+  props: {
+    portals: {
+      type: Array,
+      default: () => [],
+    },
+    activePortalSlug: {
+      type: String,
+      default: '',
+    },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
+  },
+
+  methods: {
+    closePortalPopover() {
+      this.$emit('closePopover');
+    },
+    openPortalPage() {
+      this.closePortalPopover();
+      this.$router.push({
+        name: 'list_all_portals',
+      });
+    },
+    fetchPortalAndItsCategories() {
+      this.$emit('fetchPortal');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     v-on-clickaway="closePortalPopover"
@@ -27,59 +65,21 @@
           />
         </div>
       </div>
-      <p class="text-xs text-slate-600 dark:text-slate-300 mt-2">
+      <p class="mt-2 text-xs text-slate-600 dark:text-slate-300">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
       </p>
     </header>
     <div>
-      <portal-switch
+      <PortalSwitch
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
         :active-portal-slug="activePortalSlug"
         :active-locale="activeLocale"
         :active="portal.slug === activePortalSlug"
-        @open-portal-page="closePortalPopover"
-        @fetch-portal="fetchPortalAndItsCategories"
+        @openPortalPage="closePortalPopover"
+        @fetchPortal="fetchPortalAndItsCategories"
       />
     </div>
   </div>
 </template>
-
-<script>
-import PortalSwitch from './PortalSwitch.vue';
-export default {
-  components: {
-    PortalSwitch,
-  },
-  props: {
-    portals: {
-      type: Array,
-      default: () => [],
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    closePortalPopover() {
-      this.$emit('close-popover');
-    },
-    openPortalPage() {
-      this.closePortalPopover();
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-    fetchPortalAndItsCategories() {
-      this.$emit('fetch-portal');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 4417fdf57..fb62b3c94 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -15,15 +15,6 @@ import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { isDomain } from 'shared/helpers/Validators';
 import SettingsLayout from './Layout/SettingsLayout.vue';
 
-const { EXAMPLE_URL } = wootConstants;
-const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-
-const { t } = useI18n();
-
-defineComponent({
-  name: 'PortalSettingsBasicForm',
-});
-
 const props = defineProps({
   portal: {
     type: Object,
@@ -38,6 +29,16 @@ const props = defineProps({
     default: '',
   },
 });
+const emit = defineEmits(['submit', 'deleteLogo']);
+
+defineComponent({
+  name: 'PortalSettingsBasicForm',
+});
+
+const { EXAMPLE_URL } = wootConstants;
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+
+const { t } = useI18n();
 
 const state = reactive({
   name: '',
@@ -97,8 +98,6 @@ const showDeleteButton = computed(() => {
   return hasValidAvatarUrl(state.logoUrl);
 });
 
-const emit = defineEmits(['submit', 'delete-logo']);
-
 onMounted(() => {
   const portal = props.portal || {};
   state.name = portal.name || '';
@@ -135,7 +134,7 @@ function onSubmitClick() {
 async function deleteAvatar() {
   state.logoUrl = '';
   state.avatarBlobId = '';
-  emit('delete-logo');
+  emit('deleteLogo');
 }
 
 async function uploadLogoToStorage(file) {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
index 7572f5b80..4049633df 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -2,20 +2,11 @@
 import { getRandomColor } from 'dashboard/helper/labelColor';
 import SettingsLayout from './Layout/SettingsLayout.vue';
 import wootConstants from 'dashboard/constants/globals';
-const { EXAMPLE_URL } = wootConstants;
-
 import { useVuelidate } from '@vuelidate/core';
 import { url } from '@vuelidate/validators';
 
 import { defineComponent, reactive, computed, onMounted } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
-
-defineComponent({
-  name: 'PortalSettingsCustomizationForm',
-});
-
-const { t } = useI18n();
-
 const props = defineProps({
   portal: {
     type: Object,
@@ -29,6 +20,14 @@ const props = defineProps({
 
 const emit = defineEmits(['submit']);
 
+defineComponent({
+  name: 'PortalSettingsCustomizationForm',
+});
+
+const { t } = useI18n();
+
+const { EXAMPLE_URL } = wootConstants;
+
 const state = reactive({
   color: getRandomColor(),
   pageTitle: '',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 1a6ab873a..886c06200 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -1,82 +1,10 @@
-<template>
-  <div class="portal" :class="{ active }">
-    <thumbnail :username="portal.name" variant="square" />
-    <div class="actions-container">
-      <header class="flex items-center justify-between mb-2.5">
-        <div>
-          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
-            {{ portal.name }}
-          </h3>
-          <p class="text-slate-600 dark:text-slate-200 mb-0 text-xs">
-            {{ articlesCount }}
-            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
-          </p>
-        </div>
-        <woot-label
-          v-if="active"
-          variant="smooth"
-          size="small"
-          color-scheme="success"
-          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
-        />
-      </header>
-      <div class="portal-locales">
-        <h5 class="text-base text-slate-700 dark:text-slate-100">
-          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
-        </h5>
-        <ul>
-          <li v-for="locale in locales" :key="locale.code">
-            <woot-button
-              :variant="`locale-item ${
-                isLocaleActive(locale.code, activePortalSlug)
-                  ? 'smooth'
-                  : 'clear'
-              }`"
-              size="large"
-              color-scheme="secondary"
-              @click="event => onClick(event, locale.code, portal)"
-            >
-              <div class="flex items-center justify-between w-full">
-                <div class="meta">
-                  <h6 class="text-sm text-left mb-0.5">
-                    <span class="text-slate-700 dark:text-slate-100">
-                      {{ localeName(locale.code) }}
-                    </span>
-                    <span
-                      v-if="isLocaleDefault(locale.code)"
-                      class="text-sm text-slate-300 dark:text-slate-200"
-                    >
-                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
-                    </span>
-                  </h6>
-
-                  <span
-                    class="flex text-slate-600 dark:text-slate-200 text-sm text-left leading-4 w-full"
-                  >
-                    {{ locale.articles_count }}
-                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
-                    {{ locale.code }}
-                  </span>
-                </div>
-                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
-                  <fluent-icon icon="checkmark" class="locale__radio" />
-                </div>
-              </div>
-            </woot-button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import portalMixin from '../mixins/portalMixin';
 
 export default {
   components: {
-    thumbnail,
+    Thumbnail,
   },
   mixins: [portalMixin],
   props: {
@@ -126,8 +54,8 @@ export default {
           locale: code,
         },
       });
-      this.$emit('fetch-portal');
-      this.$emit('open-portal-page');
+      this.$emit('fetchPortal');
+      this.$emit('openPortalPage');
     },
     isLocaleActive(code, slug) {
       const isPortalActive = this.portal.slug === slug;
@@ -141,6 +69,78 @@ export default {
 };
 </script>
 
+<template>
+  <div class="portal" :class="{ active }">
+    <Thumbnail :username="portal.name" variant="square" />
+    <div class="actions-container">
+      <header class="flex items-center justify-between mb-2.5">
+        <div>
+          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
+            {{ portal.name }}
+          </h3>
+          <p class="mb-0 text-xs text-slate-600 dark:text-slate-200">
+            {{ articlesCount }}
+            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
+          </p>
+        </div>
+        <woot-label
+          v-if="active"
+          variant="smooth"
+          size="small"
+          color-scheme="success"
+          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
+        />
+      </header>
+      <div class="portal-locales">
+        <h5 class="text-base text-slate-700 dark:text-slate-100">
+          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
+        </h5>
+        <ul>
+          <li v-for="locale in locales" :key="locale.code">
+            <woot-button
+              :variant="`locale-item ${
+                isLocaleActive(locale.code, activePortalSlug)
+                  ? 'smooth'
+                  : 'clear'
+              }`"
+              size="large"
+              color-scheme="secondary"
+              @click="event => onClick(event, locale.code, portal)"
+            >
+              <div class="flex items-center justify-between w-full">
+                <div class="meta">
+                  <h6 class="text-sm text-left mb-0.5">
+                    <span class="text-slate-700 dark:text-slate-100">
+                      {{ localeName(locale.code) }}
+                    </span>
+                    <span
+                      v-if="isLocaleDefault(locale.code)"
+                      class="text-sm text-slate-300 dark:text-slate-200"
+                    >
+                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
+                    </span>
+                  </h6>
+
+                  <span
+                    class="flex w-full text-sm leading-4 text-left text-slate-600 dark:text-slate-200"
+                  >
+                    {{ locale.articles_count }}
+                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
+                    {{ locale.code }}
+                  </span>
+                </div>
+                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
+                  <fluent-icon icon="checkmark" class="locale__radio" />
+                </div>
+              </div>
+            </woot-button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .portal {
   @apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
index f6aceedf5..f0803ac6e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm"
-  >
-    <sidebar-header
-      :thumbnail-src="thumbnailSrc"
-      :header-title="headerTitle"
-      :sub-title="subTitle"
-      :portal-link="portalLink"
-      class="px-4"
-      @open-popover="openPortalPopover"
-    />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="py-2 px-4 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @open="onClickOpenAddCatogoryModal"
-      />
-      <p
-        v-if="!hasCategory"
-        key="empty-category-nessage"
-        class="p-1.5 px-4 text-slate-300"
-      >
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
-    </transition-group>
-  </div>
-</template>
-
 <script>
 import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue';
 import SidebarHeader from './SidebarHeader.vue';
@@ -92,11 +53,50 @@ export default {
       this.$emit('input', value);
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
     onClickOpenAddCatogoryModal() {
-      this.$emit('open-modal');
+      this.$emit('openModal');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col h-full overflow-auto text-sm bg-white border-r w-60 dark:bg-slate-900 dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50"
+  >
+    <SidebarHeader
+      :thumbnail-src="thumbnailSrc"
+      :header-title="headerTitle"
+      :sub-title="subTitle"
+      :portal-link="portalLink"
+      class="px-4"
+      @openPopover="openPortalPopover"
+    />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="px-4 py-2 mb-0 ml-0 list-none"
+    >
+      <SecondaryNavItem
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <SecondaryNavItem
+        v-for="menuItem in additionalSecondaryMenuItems"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @open="onClickOpenAddCatogoryModal"
+      />
+      <p
+        v-if="!hasCategory"
+        key="empty-category-nessage"
+        class="p-1.5 px-4 text-slate-300"
+      >
+        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
+      </p>
+    </transition-group>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
index e3fe22b19..aa72a2bdf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -1,44 +1,3 @@
-<template>
-  <div
-    class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
-  >
-    <div class="flex items-center">
-      <thumbnail
-        size="32px"
-        :src="thumbnailSrc"
-        :username="headerTitle"
-        variant="square"
-      />
-      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
-        <h4
-          class="text-sm w-28 h-4 mb-0 leading-4 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
-        >
-          {{ headerTitle }}
-        </h4>
-        <span class="h-4 leading-4 text-slate-600 dark:text-slate-200 text-xs">
-          {{ subTitle }}
-        </span>
-      </div>
-    </div>
-    <div class="flex items-end">
-      <woot-button
-        variant="clear"
-        color-scheme="secondary"
-        size="small"
-        icon="arrow-up-right"
-        @click="popoutHelpCenter"
-      />
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="arrow-swap"
-        @click="openPortalPopover"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
@@ -68,8 +27,49 @@ export default {
       window.open(this.portalLink, '_blank');
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex items-center justify-between h-16 px-0 py-4 border-b mb-1/4 border-slate-50 dark:border-slate-700"
+  >
+    <div class="flex items-center">
+      <Thumbnail
+        size="32px"
+        :src="thumbnailSrc"
+        :username="headerTitle"
+        variant="square"
+      />
+      <div class="flex flex-col items-start ml-2 rtl:ml-0 rtl:mr-2">
+        <h4
+          class="h-4 mb-0 overflow-hidden text-sm leading-4 w-28 whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+        >
+          {{ headerTitle }}
+        </h4>
+        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
+          {{ subTitle }}
+        </span>
+      </div>
+    </div>
+    <div class="flex items-end">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        size="small"
+        icon="arrow-up-right"
+        @click="popoutHelpCenter"
+      />
+      <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="arrow-swap"
+        @click="openPortalPopover"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
index 8af29af17..72e21bada 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="search-input--wrap">
-    <div class="search-icon--wrap">
-      <fluent-icon icon="search" size="18" class="search-icon" />
-    </div>
-    <input
-      v-model="searchValue"
-      class="search-input"
-      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
-      @input="onSearch"
-    />
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <div class="search-input--wrap">
+    <div class="search-icon--wrap">
+      <fluent-icon icon="search" size="18" class="search-icon" />
+    </div>
+    <input
+      v-model="searchValue"
+      class="search-input"
+      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
+      @input="onSearch"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .search-input--wrap {
   display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
index d16eb87e3..ef4dd2b27 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -1,3 +1,66 @@
+<script>
+import { mapGetters } from 'vuex';
+import wootConstants from 'dashboard/constants/globals';
+export default {
+  data() {
+    return {
+      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
+      upgradeFeature: [
+        {
+          key: 1,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
+          icon: 'book-copy',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
+          ),
+        },
+        {
+          key: 2,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
+          icon: 'globe-line',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
+          ),
+        },
+        {
+          key: 3,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
+          icon: 'heart-handshake',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
+          ),
+        },
+        {
+          key: 4,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
+          icon: 'search-check',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
+          ),
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
+    }),
+  },
+  methods: {
+    openBillingPage() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    openHelpCenterDocs() {
+      window.open(this.helpCenterDocsURL, '_blank');
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full h-full max-w-full overflow-auto bg-white dark:bg-slate-900"
@@ -70,66 +133,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-export default {
-  data() {
-    return {
-      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
-      upgradeFeature: [
-        {
-          key: 1,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
-          icon: 'book-copy',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
-          ),
-        },
-        {
-          key: 2,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
-          icon: 'globe-line',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
-          ),
-        },
-        {
-          key: 3,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
-          icon: 'heart-handshake',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
-          ),
-        },
-        {
-          key: 4,
-          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
-          icon: 'search-check',
-          description: this.$t(
-            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
-          ),
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
-    }),
-  },
-  methods: {
-    openBillingPage() {
-      this.$router.push({
-        name: 'billing_settings_index',
-        params: { accountId: this.accountId },
-      });
-    },
-    openHelpCenterDocs() {
-      window.open(this.helpCenterDocsURL, '_blank');
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index 34df7812f..27cea581c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -1,127 +1,3 @@
-<template>
-  <transition name="popover-animation">
-    <div
-      class="min-w-[15rem] max-w-[22.5rem] p-6 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700"
-    >
-      <h3 class="text-base text-slate-800 dark:text-slate-100">
-        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
-      </h3>
-      <div class="mt-4 mb-6">
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <multiselect-dropdown
-            :options="categories"
-            :selected-item="selectedCategory"
-            :has-thumbnail="false"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
-            "
-            :input-placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
-              )
-            "
-            @click="onClickSelectCategory"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <multiselect-dropdown
-            :options="agents"
-            :selected-item="assignedAuthor"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
-            "
-            :input-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
-            "
-            @click="onClickAssignAuthor"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
-          <textarea
-            v-model="metaTitle"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="metaDescription"
-            class="text-sm"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
-              )
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
-          <multiselect
-            ref="tagInput"
-            v-model="metaTags"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
-            "
-            label="name"
-            :options="metaOptions"
-            track-by="name"
-            :multiple="true"
-            :taggable="true"
-            :close-on-select="false"
-            @search-change="handleSearchChange"
-            @close="onBlur"
-            @tag="addTagValue"
-            @remove="removeTag"
-          />
-        </label>
-      </div>
-      <div class="flex flex-col">
-        <woot-button
-          icon="archive"
-          size="small"
-          variant="clear"
-          color-scheme="secondary"
-          @click="onClickArchiveArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
-        </woot-button>
-        <woot-button
-          icon="delete"
-          size="small"
-          variant="clear"
-          color-scheme="alert"
-          @click="onClickDeleteArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-  </transition>
-</template>
-
 <script>
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import { mapGetters } from 'vuex';
@@ -180,7 +56,7 @@ export default {
   mounted() {
     this.saveArticle = debounce(
       () => {
-        this.$emit('save-article', {
+        this.$emit('saveArticle', {
           meta: {
             title: this.metaTitle,
             description: this.metaDescription,
@@ -219,30 +95,153 @@ export default {
       }
     },
     onClickSelectCategory({ id }) {
-      this.$emit('save-article', { category_id: id });
+      this.$emit('saveArticle', { category_id: id });
     },
     onClickAssignAuthor({ id }) {
-      this.$emit('save-article', { author_id: id });
+      this.$emit('saveArticle', { author_id: id });
       this.updateMeta();
     },
     onChangeMetaInput() {
       this.saveArticle();
     },
     onClickArchiveArticle() {
-      this.$emit('archive-article');
+      this.$emit('archiveArticle');
       this.updateMeta();
     },
     onClickDeleteArticle() {
-      this.$emit('delete-article');
+      this.$emit('deleteArticle');
       this.updateMeta();
     },
     updateMeta() {
-      this.$emit('update-meta');
+      this.$emit('updateMeta');
     },
   },
 };
 </script>
 
+<template>
+  <transition name="popover-animation">
+    <div
+      class="min-w-[15rem] max-w-[22.5rem] p-6 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700"
+    >
+      <h3 class="text-base text-slate-800 dark:text-slate-100">
+        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
+      </h3>
+      <div class="mt-4 mb-6">
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
+          <MultiselectDropdown
+            :options="categories"
+            :selected-item="selectedCategory"
+            :has-thumbnail="false"
+            :multiselector-title="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
+            "
+            :input-placeholder="
+              $t(
+                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
+              )
+            "
+            @click="onClickSelectCategory"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
+          <MultiselectDropdown
+            :options="agents"
+            :selected-item="assignedAuthor"
+            :multiselector-title="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
+            "
+            :input-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
+            "
+            @click="onClickAssignAuthor"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
+          <textarea
+            v-model="metaTitle"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
+            "
+            @input="onChangeMetaInput"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="metaDescription"
+            class="text-sm"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t(
+                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
+              )
+            "
+            @input="onChangeMetaInput"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
+          <multiselect
+            v-model="metaTags"
+            :placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
+            "
+            label="name"
+            :options="metaOptions"
+            track-by="name"
+            multiple
+            taggable
+            :close-on-select="false"
+            @search-change="handleSearchChange"
+            @close="onBlur"
+            @tag="addTagValue"
+            @remove="removeTag"
+          />
+        </label>
+      </div>
+      <div class="flex flex-col">
+        <woot-button
+          icon="archive"
+          size="small"
+          variant="clear"
+          color-scheme="secondary"
+          @click="onClickArchiveArticle"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
+        </woot-button>
+        <woot-button
+          icon="delete"
+          size="small"
+          variant="clear"
+          color-scheme="alert"
+          @click="onClickDeleteArticle"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
+        </woot-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .multiselect {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
index 0f1711ac1..df95c34ee 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
@@ -1,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 7268d0ed1..5fe13feb5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -1,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 ff610e44e..8284e1a80 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
-  >
-    <article-header
-      :header-title="headerTitle"
-      :count="meta.count"
-      :selected-locale="activeLocaleName"
-      :all-locales="allowedLocales"
-      selected-value="Published"
-      class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
-    />
-    <div
-      v-if="isFetching"
-      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
-    >
-      <spinner />
-      <span class="text-slate-600 dark:text-slate-200">
-        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
-      </span>
-    </div>
-    <empty-state
-      v-else-if="shouldShowEmptyState"
-      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
-    />
-    <div v-else class="flex flex-1">
-      <article-table
-        :articles="articles"
-        :current-page="Number(meta.currentPage)"
-        :total-count="Number(meta.count)"
-        @page-change="onPageChange"
-        @reorder="onReorder"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import allLocales from 'shared/constants/locales.js';
@@ -62,7 +23,6 @@ export default {
     ...mapGetters({
       articles: 'articles/allArticles',
       categories: 'categories/allCategories',
-      uiFlags: 'articles/uiFlags',
       meta: 'articles/getMeta',
       isFetching: 'articles/isFetching',
       currentUserId: 'getCurrentUserID',
@@ -188,8 +148,47 @@ export default {
           locale,
         },
       });
-      this.$emit('reload-locale');
+      this.$emit('reloadLocale');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col w-full max-w-full px-0 py-0 overflow-auto bg-white dark:bg-slate-900"
+  >
+    <ArticleHeader
+      :header-title="headerTitle"
+      :count="meta.count"
+      :selected-locale="activeLocaleName"
+      :all-locales="allowedLocales"
+      selected-value="Published"
+      class="border-b border-slate-50 dark:border-slate-700"
+      @newArticlePage="newArticlePage"
+      @changeLocale="onChangeLocale"
+    />
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center px-4 py-6 text-base text-slate-600 dark:text-slate-200"
+    >
+      <Spinner />
+      <span class="text-slate-600 dark:text-slate-200">
+        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
+      </span>
+    </div>
+    <EmptyState
+      v-else-if="shouldShowEmptyState"
+      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
+    />
+    <div v-else class="flex flex-1">
+      <ArticleTable
+        :articles="articles"
+        :current-page="Number(meta.currentPage)"
+        :total-count="Number(meta.count)"
+        @pageChange="onPageChange"
+        @reorder="onReorder"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
index be0673c7e..c636f6101 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to list articles in a category in a portal</div>
+  <div>{{ 'Component to list articles in a category in a portal' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index 7115b1d82..f2e3924a5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -1,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 1a332510a..14aa4e1ca 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -1,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 1e9886510..92fccdb49 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -1,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 56887f206..204e9af07 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,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 2152fc147..6d3c40e1c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -134,13 +134,13 @@ function changeCurrentCategory(event) {
       </div>
     </header>
     <div class="category-list">
-      <category-list-item
+      <CategoryListItem
         :categories="categoriesByLocaleCode"
         @delete="deleteCategory"
         @edit="openEditCategoryModal"
       />
     </div>
-    <edit-category
+    <EditCategory
       v-if="showEditCategoryModal"
       :show.sync="showEditCategoryModal"
       :portal-name="currentPortalName"
@@ -149,7 +149,7 @@ function changeCurrentCategory(event) {
       :selected-portal-slug="currentPortalSlug"
       @cancel="closeEditCategoryModal"
     />
-    <add-category
+    <AddCategory
       v-if="showAddCategoryModal"
       :show.sync="showAddCategoryModal"
       :portal-name="currentPortalName"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index 2bbfaf391..947ae2e8c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -1,40 +1,3 @@
-<template>
-  <div class="flex items-center relative">
-    <woot-button
-      variant="hollow"
-      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
-      color-scheme="secondary"
-      @click="toggleEmojiPicker"
-    >
-      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
-      <fluent-icon
-        v-else
-        size="18"
-        icon="emoji-add"
-        type="outline"
-        class="text-slate-400 dark:text-slate-600"
-      />
-    </woot-button>
-    <woot-input
-      v-model="name"
-      :class="{ error: hasError }"
-      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
-      :error="nameErrorMessage"
-      :label="label"
-      :placeholder="placeholder"
-      :help-text="helpText"
-      @input="onNameChange"
-    />
-    <emoji-input
-      v-if="showEmojiPicker"
-      v-on-clickaway="hideEmojiPicker"
-      class="left-0 top-16"
-      :show-remove-button="true"
-      :on-click="onClickInsertEmoji"
-    />
-  </div>
-</template>
-
 <script>
 const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
@@ -98,11 +61,11 @@ export default {
     },
     onClickInsertEmoji(emoji = '') {
       this.icon = emoji;
-      this.$emit('icon-change', emoji);
+      this.$emit('iconChange', emoji);
       this.showEmojiPicker = false;
     },
     onNameChange() {
-      this.$emit('name-change', this.name);
+      this.$emit('nameChange', this.name);
     },
     hideEmojiPicker() {
       if (this.showEmojiPicker) {
@@ -113,6 +76,43 @@ export default {
 };
 </script>
 
+<template>
+  <div class="relative flex items-center">
+    <woot-button
+      variant="hollow"
+      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
+      color-scheme="secondary"
+      @click="toggleEmojiPicker"
+    >
+      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
+      <fluent-icon
+        v-else
+        size="18"
+        icon="emoji-add"
+        type="outline"
+        class="text-slate-400 dark:text-slate-600"
+      />
+    </woot-button>
+    <woot-input
+      v-model="name"
+      :class="{ error: hasError }"
+      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
+      :error="nameErrorMessage"
+      :label="label"
+      :placeholder="placeholder"
+      :help-text="helpText"
+      @input="onNameChange"
+    />
+    <EmojiInput
+      v-if="showEmojiPicker"
+      v-on-clickaway="hideEmojiPicker"
+      class="left-0 top-16"
+      show-remove-button
+      :on-click="onClickInsertEmoji"
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .emoji-dialog::before {
   @apply hidden;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
index 722b868a7..6832de1ba 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to create a category</div>
+  <div>{{ 'Component to create a category' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
index bf5385b34..2fec281a7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to show details of a category</div>
+  <div>{{ 'Component to show details of a category' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index cbbb4cb15..231569ab3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -1,38 +1,4 @@
-<template>
-  <div class="wrapper">
-    <settings-header
-      button-route="new"
-      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div class="overflow-auto max-h-[96%]">
-      <setting-intro-banner :header-title="portalName">
-        <woot-tabs
-          :index="activeTabIndex"
-          :border="false"
-          @change="onTabChange"
-        >
-          <woot-tabs-item
-            v-for="tab in tabs"
-            :key="tab.key"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </setting-intro-banner>
-      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
 import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
@@ -44,9 +10,6 @@ export default {
   },
   mixins: [globalConfigMixin],
   computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
     currentPortal() {
       const slug = this.$route.params.portalSlug;
       if (slug) return this.$store.getters['portals/portalBySlug'](slug);
@@ -99,6 +62,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="wrapper">
+    <SettingsHeader
+      button-route="new"
+      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div class="overflow-auto max-h-[96%]">
+      <SettingIntroBanner :header-title="portalName">
+        <woot-tabs
+          :index="activeTabIndex"
+          :border="false"
+          @change="onTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </SettingIntroBanner>
+      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .wrapper {
   flex: 1;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
index aac8125e5..4b2c6ebfe 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -71,7 +71,7 @@ async function deleteLogo() {
 </script>
 
 <template>
-  <portal-settings-basic-form
+  <PortalSettingsBasicForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
@@ -79,6 +79,6 @@ async function deleteLogo() {
       $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
     "
     @submit="updatePortalSettings"
-    @delete-logo="deleteLogo"
+    @deleteLogo="deleteLogo"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
index 902dc3ca6..190d6edae 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
@@ -44,7 +44,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
index de1fd7e65..f8792cb2f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -126,7 +126,7 @@ function addLocale() {
       v-if="currentPortal"
       :locales="locales"
       :selected-locale-code="currentPortal.meta.default_locale"
-      @change-default-locale="changeDefaultLocale"
+      @changeDefaultLocale="changeDefaultLocale"
       @delete="deletePortalLocale"
     />
     <woot-modal
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index 35452417f..9f040f908 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,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 0222044bc..b656dabb1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,31 +1,3 @@
-<template>
-  <section class="flex-1">
-    <settings-header
-      button-route="new"
-      :header-title="portalHeaderText"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div
-      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
-    >
-      <woot-wizard
-        class="hidden md:block"
-        :global-config="globalConfig"
-        :items="items"
-      />
-      <div
-        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
-      >
-        <router-view />
-      </div>
-    </div>
-  </section>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -68,3 +40,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="flex-1">
+    <SettingsHeader
+      button-route="new"
+      :header-title="portalHeaderText"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div
+      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
+    >
+      <woot-wizard
+        class="hidden md:block"
+        :global-config="globalConfig"
+        :items="items"
+      />
+      <div
+        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
+      >
+        <router-view />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
index 60420be90..74046cd9b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@@ -59,7 +59,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
index 2857867bb..cf210a50a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
@@ -1,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 3a3e77142..bc8fb85a6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -1,8 +1,16 @@
+<script setup>
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import { defineComponent } from 'vue';
+defineComponent({
+  name: 'PortalSettingsFinish',
+});
+</script>
+
 <template>
   <div
     class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
   >
-    <empty-state
+    <EmptyState
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
       :message="
         $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
@@ -18,14 +26,6 @@
           {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
-
-<script setup>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { defineComponent } from 'vue';
-defineComponent({
-  name: 'PortalSettingsFinish',
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
index fd8c02176..bdbf7ccd8 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
@@ -1,3 +1,4 @@
+<!-- Unused file deprecated -->
 <template>
-  <div>Component to view details of portal</div>
+  <div>{{ 'Component to view details of portal' }}</div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
index 49ab0a709..a325ebbe1 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
-  >
-    <span v-if="uiFlags.isFetching" class="spinner my-4" />
-    <div v-else class="flex flex-col items-center gap-2">
-      <fluent-icon
-        icon="mail-inbox"
-        size="40"
-        class="text-slate-600 dark:text-slate-400"
-      />
-      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
-        {{ emptyMessage }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -38,3 +20,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
+  >
+    <span v-if="uiFlags.isFetching" class="spinner my-4" />
+    <div v-else class="flex flex-col items-center gap-2">
+      <fluent-icon
+        icon="mail-inbox"
+        size="40"
+        class="text-slate-600 dark:text-slate-400"
+      />
+      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
+        {{ emptyMessage }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index f120bbea5..2093d6b05 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 f7d41e223..2173ec113 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 cbaacf198..ac74b92c3 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 50ebd3a5b..b46bb674c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
@@ -1,22 +1,3 @@
-<template>
-  <woot-context-menu
-    :x="contextMenuPosition.x"
-    :y="contextMenuPosition.y"
-    @close="handleClose"
-  >
-    <div
-      class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
-    >
-      <menu-item
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-  </woot-context-menu>
-</template>
-
 <script>
 import MenuItem from './MenuItem.vue';
 export default {
@@ -44,3 +25,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-context-menu
+    :x="contextMenuPosition.x"
+    :y="contextMenuPosition.y"
+    @close="handleClose"
+  >
+    <div
+      class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
+    >
+      <MenuItem
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+  </woot-context-menu>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
index 3101bc63c..4f9b855ca 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 5a91e4762..271c4460a 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 556a22de0..87146a661 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 0b0ef03ff..3e4a9d8a9 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue
@@ -21,6 +21,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <div
     class="inline-flex items-center rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
index f10821677..e5ab0818c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
@@ -1,18 +1,3 @@
-<template>
-  <div
-    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
-  >
-    <div class="flex flex-col">
-      <menu-item
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onClick(item.key)"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import MenuItem from './MenuItem.vue';
 export default {
@@ -39,8 +24,23 @@ export default {
   },
   methods: {
     onClick(key) {
-      this.$emit('option-click', key);
+      this.$emit('optionClick', key);
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="z-50 flex flex-col w-40 gap-1 py-1 bg-white border divide-y shadow-md dark:bg-slate-900 border-slate-100 dark:border-slate-700/50 rounded-xl divide-slate-100 dark:divide-slate-700/50"
+  >
+    <div class="flex flex-col">
+      <MenuItem
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onClick(item.key)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
index cddad0d58..5019d451d 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
@@ -6,16 +6,17 @@ defineProps({
   },
 });
 
-const emits = defineEmits(['click']);
+const emit = defineEmits(['click']);
 
 const onMenuItemClick = () => {
-  emits('click');
+  emit('click');
 };
 </script>
+
 <template>
   <div
     role="button"
-    class="py-1 px-2 w-full h-8 font-medium text-xs text-slate-800 dark:text-slate-100 flex items-center whitespace-nowrap text-ellipsis overflow-hidden hover:text-woot-600 dark:hover:text-woot-500 cursor-pointer rounded-md"
+    class="flex items-center w-full h-8 px-2 py-1 overflow-hidden text-xs font-medium rounded-md cursor-pointer text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis hover:text-woot-600 dark:hover:text-woot-500"
     @click.stop="onMenuItemClick"
   >
     {{ label }}
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
index e361f39df..ed0db6c13 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -1,3 +1,38 @@
+<script>
+export default {
+  props: {
+    totalLength: {
+      type: Number,
+      default: 0,
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    isUpDisabled() {
+      return this.currentIndex === 1;
+    },
+    isDownDisabled() {
+      return this.currentIndex === this.totalLength || this.totalLength <= 1;
+    },
+  },
+  methods: {
+    handleUpClick() {
+      if (this.currentIndex > 1) {
+        this.$emit('prev');
+      }
+    },
+    handleDownClick() {
+      if (this.currentIndex < this.totalLength) {
+        this.$emit('next');
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex gap-2 items-center">
     <div class="flex gap-1 items-center">
@@ -34,37 +69,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    totalLength: {
-      type: Number,
-      default: 0,
-    },
-    currentIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    isUpDisabled() {
-      return this.currentIndex === 1;
-    },
-    isDownDisabled() {
-      return this.currentIndex === this.totalLength || this.totalLength <= 1;
-    },
-  },
-  methods: {
-    handleUpClick() {
-      if (this.currentIndex > 1) {
-        this.$emit('prev');
-      }
-    },
-    handleDownClick() {
-      if (this.currentIndex < this.totalLength) {
-        this.$emit('next');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
index 5f6ddc8d2..8fb66ee1b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue
@@ -1,3 +1,21 @@
+<script>
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+export default {
+  props: {
+    status: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      CONVERSATION_STATUS,
+    };
+  },
+};
+</script>
+
 <template>
   <div class="inline-flex items-center justify-center rounded-md">
     <!-- Pending -->
@@ -66,21 +84,3 @@
     </svg>
   </div>
 </template>
-
-<script>
-import { CONVERSATION_STATUS } from 'shared/constants/messages';
-
-export default {
-  props: {
-    status: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_STATUS,
-    };
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index 459f9aaef..6848aadb2 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 28e7c232e..5257c0740 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -1,79 +1,11 @@
-<template>
-  <div class="w-full">
-    <woot-button
-      size="expanded"
-      color-scheme="secondary"
-      variant="link"
-      class="w-full"
-      @click="onClickOpenNotification()"
-    >
-      <div
-        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
-      >
-        <div
-          v-if="!notificationItem.read_at"
-          class="w-2 h-2 rounded-full bg-woot-500"
-        />
-        <div v-else class="w-2 flex" />
-        <div
-          class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
-        >
-          <div class="flex justify-between">
-            <div class="items-center flex">
-              <span class="font-bold text-slate-800 dark:text-slate-100">
-                {{
-                  `#${
-                    notificationItem.primary_actor
-                      ? notificationItem.primary_actor.id
-                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
-                  }`
-                }}
-              </span>
-              <span
-                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
-              >
-                {{
-                  $t(
-                    `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
-                  )
-                }}
-              </span>
-            </div>
-            <div v-if="hasNotificationAssignee">
-              <thumbnail
-                :src="notificationAssigneeThumbnail"
-                size="16px"
-                :username="notificationAssigneeName"
-              />
-            </div>
-          </div>
-          <div class="w-full flex">
-            <span
-              class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden 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"
-          >
-            {{ dynamicTime(notificationItem.last_activity_at) }}
-          </span>
-        </div>
-      </div>
-    </woot-button>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
-  mixins: [timeMixin],
   props: {
     notificationItem: {
       type: Object,
@@ -96,9 +28,77 @@ export default {
     },
   },
   methods: {
+    dynamicTime,
     onClickOpenNotification() {
-      this.$emit('open-notification', this.notificationItem);
+      this.$emit('openNotification', this.notificationItem);
     },
   },
 };
 </script>
+
+<template>
+  <div class="w-full">
+    <woot-button
+      size="expanded"
+      color-scheme="secondary"
+      variant="link"
+      class="w-full"
+      @click="onClickOpenNotification()"
+    >
+      <div
+        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
+      >
+        <div
+          v-if="!notificationItem.read_at"
+          class="w-2 h-2 rounded-full bg-woot-500"
+        />
+        <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="flex items-center">
+              <span class="font-bold text-slate-800 dark:text-slate-100">
+                {{
+                  `#${
+                    notificationItem.primary_actor
+                      ? notificationItem.primary_actor.id
+                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
+                  }`
+                }}
+              </span>
+              <span
+                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
+              >
+                {{
+                  $t(
+                    `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
+                  )
+                }}
+              </span>
+            </div>
+            <div v-if="hasNotificationAssignee">
+              <Thumbnail
+                :src="notificationAssigneeThumbnail"
+                size="16px"
+                :username="notificationAssigneeName"
+              />
+            </div>
+          </div>
+          <div class="flex w-full">
+            <span
+              class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+            >
+              {{ notificationItem.push_message_title }}
+            </span>
+          </div>
+          <span
+            class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
+          >
+            {{ dynamicTime(notificationItem.last_activity_at) }}
+          </span>
+        </div>
+      </div>
+    </woot-button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index 9ae08b144..d07b9c0c7 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -1,41 +1,4 @@
-<template>
-  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <notification-panel-item
-      v-for="notificationItem in notifications"
-      v-show="!isLoading"
-      :key="notificationItem.id"
-      :notification-item="notificationItem"
-      @open-notification="onClickNotification"
-    />
-    <empty-state
-      v-if="showEmptyResult"
-      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
-    />
-    <woot-button
-      v-if="!isLoading && inLastPage"
-      size="expanded"
-      variant="clear"
-      color-scheme="primary"
-      class-names="mt-3"
-      @click="openNotificationPage"
-    >
-      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
-    </woot-button>
-    <div
-      v-if="isLoading"
-      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
-    >
-      <spinner />
-      <span>{{
-        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
-      }}</span>
-    </div>
-  </div>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
-
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import NotificationPanelItem from './NotificationPanelItem.vue';
@@ -65,9 +28,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      notificationMetadata: 'notifications/getMeta',
-    }),
     showEmptyResult() {
       return !this.isLoading && this.notifications.length === 0;
     },
@@ -84,3 +44,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
+    <NotificationPanelItem
+      v-for="notificationItem in notifications"
+      v-show="!isLoading"
+      :key="notificationItem.id"
+      :notification-item="notificationItem"
+      @openNotification="onClickNotification"
+    />
+    <EmptyState
+      v-if="showEmptyResult"
+      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
+    />
+    <woot-button
+      v-if="!isLoading && inLastPage"
+      size="expanded"
+      variant="clear"
+      color-scheme="primary"
+      class-names="mt-3"
+      @click="openNotificationPage"
+    >
+      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
+    </woot-button>
+    <div
+      v-if="isLoading"
+      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
+    >
+      <Spinner />
+      <span>{{
+        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
+      }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 903d09eac..b378afec2 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -1,94 +1,8 @@
-<template>
-  <section
-    class="h-full flex-shrink flex-grow overflow-hidden py-8 px-4 bg-white dark:bg-slate-900"
-  >
-    <woot-submit-button
-      v-if="notificationMetadata.unreadCount"
-      class="button nice success button--fixed-top"
-      :button-text="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
-      :loading="isUpdating"
-      @click="onMarkAllDoneClick"
-    />
-
-    <table class="woot-table notifications-table">
-      <tbody v-show="!isLoading">
-        <tr
-          v-for="notificationItem in notifications"
-          :key="notificationItem.id"
-          :class="{
-            'is-unread': notificationItem.read_at === null,
-          }"
-          @click="() => onClickNotification(notificationItem)"
-        >
-          <td>
-            <div
-              class="flex-view notification-contant--wrap overflow-hidden whitespace-nowrap text-ellipsis"
-            >
-              <h5 class="notification--title">
-                {{
-                  `#${
-                    notificationItem.primary_actor
-                      ? notificationItem.primary_actor.id
-                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
-                  }`
-                }}
-              </h5>
-              <span
-                class="notification--message-title overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ notificationItem.push_message_title }}
-              </span>
-            </div>
-          </td>
-          <td class="text-right">
-            <span class="notification--type">
-              {{
-                $t(
-                  `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
-                )
-              }}
-            </span>
-          </td>
-          <td class="thumbnail--column">
-            <thumbnail
-              v-if="notificationItem.primary_actor.meta.assignee"
-              :src="notificationItem.primary_actor.meta.assignee.thumbnail"
-              size="36px"
-              :username="notificationItem.primary_actor.meta.assignee.name"
-            />
-          </td>
-          <td>
-            <div class="text-right timestamp--column">
-              <span class="notification--created-at">
-                {{ dynamicTime(notificationItem.last_activity_at) }}
-              </span>
-            </div>
-          </td>
-          <td>
-            <div
-              v-if="!notificationItem.read_at"
-              class="notification--unread-indicator"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <empty-state
-      v-if="showEmptyResult"
-      :title="$t('NOTIFICATIONS_PAGE.LIST.404')"
-    />
-    <div v-if="isLoading" class="notifications--loader">
-      <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 { dynamicTime } from 'shared/helpers/timeHelper';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -97,7 +11,6 @@ export default {
     Spinner,
     EmptyState,
   },
-  mixins: [timeMixin],
   props: {
     notifications: {
       type: Array,
@@ -128,9 +41,98 @@ export default {
       return !this.isLoading && this.notifications.length === 0;
     },
   },
+  methods: {
+    dynamicTime,
+  },
 };
 </script>
 
+<template>
+  <section
+    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
+  >
+    <woot-submit-button
+      v-if="notificationMetadata.unreadCount"
+      class="button nice success button--fixed-top"
+      :button-text="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
+      :loading="isUpdating"
+      @click="onMarkAllDoneClick"
+    />
+
+    <table class="woot-table notifications-table">
+      <tbody v-show="!isLoading">
+        <tr
+          v-for="notificationItem in notifications"
+          :key="notificationItem.id"
+          :class="{
+            'is-unread': notificationItem.read_at === null,
+          }"
+          @click="() => onClickNotification(notificationItem)"
+        >
+          <td>
+            <div
+              class="overflow-hidden flex-view notification-contant--wrap whitespace-nowrap text-ellipsis"
+            >
+              <h5 class="notification--title">
+                {{
+                  `#${
+                    notificationItem.primary_actor
+                      ? notificationItem.primary_actor.id
+                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
+                  }`
+                }}
+              </h5>
+              <span
+                class="overflow-hidden notification--message-title whitespace-nowrap text-ellipsis"
+              >
+                {{ notificationItem.push_message_title }}
+              </span>
+            </div>
+          </td>
+          <td class="text-right">
+            <span class="notification--type">
+              {{
+                $t(
+                  `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
+                )
+              }}
+            </span>
+          </td>
+          <td class="thumbnail--column">
+            <Thumbnail
+              v-if="notificationItem.primary_actor.meta.assignee"
+              :src="notificationItem.primary_actor.meta.assignee.thumbnail"
+              size="36px"
+              :username="notificationItem.primary_actor.meta.assignee.name"
+            />
+          </td>
+          <td>
+            <div class="text-right timestamp--column">
+              <span class="notification--created-at">
+                {{ dynamicTime(notificationItem.last_activity_at) }}
+              </span>
+            </div>
+          </td>
+          <td>
+            <div
+              v-if="!notificationItem.read_at"
+              class="notification--unread-indicator"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <EmptyState
+      v-if="showEmptyResult"
+      :title="$t('NOTIFICATIONS_PAGE.LIST.404')"
+    />
+    <div v-if="isLoading" class="notifications--loader">
+      <Spinner />
+      <span>{{ $t('NOTIFICATIONS_PAGE.LIST.LOADING_MESSAGE') }}</span>
+    </div>
+  </section>
+</template>
+
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/mixins';
 
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index b4df7a0e8..8c1454304 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="overflow-y-auto h-full">
-    <div class="flex flex-col h-full">
-      <notification-table
-        :notifications="records"
-        :is-loading="uiFlags.isFetching"
-        :is-updating="uiFlags.isUpdating"
-        :on-click-notification="openConversation"
-        :on-mark-all-done-click="onMarkAllDoneClick"
-      />
-      <table-footer
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
@@ -77,6 +56,27 @@ export default {
 };
 </script>
 
+<template>
+  <div class="h-full overflow-y-auto">
+    <div class="flex flex-col h-full">
+      <NotificationTable
+        :notifications="records"
+        :is-loading="uiFlags.isFetching"
+        :is-updating="uiFlags.isUpdating"
+        :on-click-notification="openConversation"
+        :on-mark-all-done-click="onMarkAllDoneClick"
+      />
+      <TableFooter
+        class="border-t border-slate-75 dark:border-slate-700/50"
+        :current-page="Number(meta.currentPage)"
+        :total-count="meta.count"
+        :page-size="15"
+        @pageChange="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .notification--page {
   background: var(--white);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 0b415553a..dfc79f820 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 618805309..916f821ad 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 8f6f46601..d67d96eb5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+  props: {
+    headerTitle: { type: String, default: '' },
+    headerContent: { type: String, default: '' },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col w-full items-start">
     <h2
@@ -11,12 +20,3 @@
     />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: { type: String, default: '' },
-    headerContent: { type: String, default: '' },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index 3f5bf16f9..6eb6c4657 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 2b2604ac8..6b191983e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
-  >
-    <settings-header
-      button-route="new"
-      :icon="icon"
-      :header-title="$t(headerTitle)"
-      :button-text="$t(headerButtonText)"
-      :show-back-button="showBackButton"
-      :back-url="backUrl"
-      :show-new-button="showNewButton"
-      :show-sidemenu-icon="showSidemenuIcon"
-    />
-    <keep-alive v-if="keepAlive">
-      <router-view />
-    </keep-alive>
-    <router-view v-else />
-  </div>
-</template>
-
 <script>
 /* eslint no-console: 0 */
 import SettingsHeader from './SettingsHeader.vue';
@@ -65,3 +44,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
+  >
+    <SettingsHeader
+      button-route="new"
+      :icon="icon"
+      :header-title="$t(headerTitle)"
+      :button-text="$t(headerButtonText)"
+      :show-back-button="showBackButton"
+      :back-url="backUrl"
+      :show-new-button="showNewButton"
+      :show-sidemenu-icon="showSidemenuIcon"
+    />
+    <keep-alive v-if="keepAlive">
+      <router-view />
+    </keep-alive>
+    <router-view v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 0f9bbef5a..7344bc81e 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 b770f49f8..886de661e 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 0146e7890..98dab9c5d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -1,35 +1,3 @@
-<template>
-  <tr class="space-x-2">
-    <td class="agent-bot--details">
-      <div class="agent-bot--link">
-        {{ agentBot.name }}
-        (<agent-bot-type :bot-type="agentBot.bot_type" />)
-      </div>
-      <div class="agent-bot--description">
-        <show-more :text="agentBot.description" :limit="120" />
-      </div>
-    </td>
-    <td class="flex justify-end gap-1">
-      <woot-button
-        v-if="isACSMLTypeBot"
-        v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        icon="edit"
-        @click="$emit('edit', agentBot)"
-      />
-      <woot-button
-        v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        @click="$emit('delete', agentBot, index)"
-      />
-    </td>
-  </tr>
-</template>
 <script>
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import AgentBotType from './AgentBotType.vue';
@@ -54,6 +22,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <tr class="space-x-2">
+    <td class="agent-bot--details">
+      <div class="agent-bot--link">
+        {{ agentBot.name }}
+        (<AgentBotType :bot-type="agentBot.bot_type" />)
+      </div>
+      <div class="agent-bot--description">
+        <ShowMore :text="agentBot.description" :limit="120" />
+      </div>
+    </td>
+    <td class="flex justify-end gap-1">
+      <woot-button
+        v-if="isACSMLTypeBot"
+        v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        icon="edit"
+        @click="$emit('edit', agentBot)"
+      />
+      <woot-button
+        v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        @click="$emit('delete', agentBot, index)"
+      />
+    </td>
+  </tr>
+</template>
+
 <style scoped lang="scss">
 .agent-bot--link {
   align-items: center;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
index b379786a3..ac3ac90b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
@@ -1,14 +1,3 @@
-<template>
-  <span class="inline-flex items-center gap-1">
-    <img
-      v-tooltip="botTypeConfig[botType].label"
-      class="agent-bot-type--thumbnail"
-      :src="botTypeConfig[botType].thumbnail"
-      :alt="botTypeConfig[botType].label"
-    />
-    <span>{{ botTypeConfig[botType].label }}</span>
-  </span>
-</template>
 <script>
 export default {
   props: {
@@ -33,6 +22,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span class="inline-flex items-center gap-1">
+    <img
+      v-tooltip="botTypeConfig[botType].label"
+      class="agent-bot-type--thumbnail"
+      :src="botTypeConfig[botType].thumbnail"
+      :alt="botTypeConfig[botType].label"
+    />
+    <span>{{ botTypeConfig[botType].label }}</span>
+  </span>
+</template>
+
 <style scoped>
 .agent-bot-type--thumbnail {
   width: auto;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
index fe02d4a2d..9d71657f5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -1,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 e30360647..80987bead 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="csml-editor--container">
-    <loading-state
-      v-if="iframeLoading"
-      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
-      class="dashboard-app_loading-container"
-    />
-    <iframe
-      id="csml-editor--frame"
-      :src="globalConfig.csmlEditorHost"
-      @load="onEditorLoad"
-    />
-  </div>
-</template>
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
@@ -60,6 +46,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="csml-editor--container">
+    <LoadingState
+      v-if="iframeLoading"
+      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
+      class="dashboard-app_loading-container"
+    />
+    <iframe
+      id="csml-editor--frame"
+      :src="globalConfig.csmlEditorHost"
+      @load="onEditorLoad"
+    />
+  </div>
+</template>
+
 <style scoped>
 #csml-editor--frame {
   border: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
index cc7d4468f..3c909fdba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -1,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 d8139a382..10868e58c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
@@ -1,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 9895fe030..74720e28a 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 406cdd9c2..4385723b6 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 dd0cbb27b..cb0402e12 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 @@
-<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>
+<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';
 
-    <!-- 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">
+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>
+  <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 854450c5d..d7f881204 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 e517651d3..1ff257b7e 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 0f540cd6e..5c234ec03 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -1,3 +1,109 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import EditAttribute from './EditAttribute.vue';
+
+export default {
+  components: {
+    EditAttribute,
+  },
+  data() {
+    return {
+      selectedTabIndex: 0,
+      showEditPopup: false,
+      showDeletePopup: false,
+      selectedAttribute: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'attributes/getUIFlags',
+    }),
+    attributes() {
+      const attributeModel = this.selectedTabIndex
+        ? 'contact_attribute'
+        : 'conversation_attribute';
+
+      return this.$store.getters['attributes/getAttributesByModel'](
+        attributeModel
+      );
+    },
+    tabs() {
+      return [
+        {
+          key: 0,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
+        },
+        {
+          key: 1,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
+        },
+      ];
+    },
+    deleteConfirmText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedAttribute.attribute_display_name
+      }`;
+    },
+    deleteRejectText() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
+    },
+    confirmDeleteTitle() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      });
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      })}`;
+    },
+  },
+  mounted() {
+    this.fetchAttributes(this.selectedTabIndex);
+  },
+  methods: {
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
+      this.fetchAttributes(index);
+    },
+    fetchAttributes(index) {
+      this.$store.dispatch('attributes/get', index);
+    },
+    async deleteAttributes({ id }) {
+      try {
+        await this.$store.dispatch('attributes/delete', id);
+        useAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        const errorMessage =
+          error?.response?.message ||
+          this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
+        useAlert(errorMessage);
+      }
+    },
+    openEditPopup(response) {
+      this.showEditPopup = true;
+      this.selectedAttribute = response;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+    confirmDeletion() {
+      this.deleteAttributes(this.selectedAttribute);
+      this.closeDelete();
+    },
+    openDelete(value) {
+      this.showDeletePopup = true;
+      this.selectedAttribute = value;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedAttribute = {};
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-row gap-4 p-8">
     <div class="w-full lg:w-3/5">
@@ -13,7 +119,7 @@
       <div class="w-full">
         <p
           v-if="!uiFlags.isFetching && !attributes.length"
-          class="mt-12 flex items-center justify-center"
+          class="flex items-center justify-center mt-12"
         >
           {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
         </p>
@@ -81,14 +187,14 @@
         </table>
       </div>
     </div>
-    <div class="hidden lg:block w-1/3">
+    <div class="hidden w-1/3 lg:block">
       <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
     </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-attribute
+      <EditAttribute
         :selected-attribute="selectedAttribute"
         :is-updating="uiFlags.isUpdating"
-        @on-close="hideEditPopup"
+        @onClose="hideEditPopup"
       />
     </woot-modal>
     <woot-confirm-delete-modal
@@ -100,119 +206,12 @@
       :reject-text="deleteRejectText"
       :confirm-value="selectedAttribute.attribute_display_name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import EditAttribute from './EditAttribute.vue';
-
-export default {
-  components: {
-    EditAttribute,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      selectedTabIndex: 0,
-      showEditPopup: false,
-      showDeletePopup: false,
-      selectedAttribute: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'attributes/getUIFlags',
-    }),
-    attributes() {
-      const attributeModel = this.selectedTabIndex
-        ? 'contact_attribute'
-        : 'conversation_attribute';
-
-      return this.$store.getters['attributes/getAttributesByModel'](
-        attributeModel
-      );
-    },
-    tabs() {
-      return [
-        {
-          key: 0,
-          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
-        },
-        {
-          key: 1,
-          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
-        },
-      ];
-    },
-    deleteConfirmText() {
-      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedAttribute.attribute_display_name
-      }`;
-    },
-    deleteRejectText() {
-      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
-    },
-    confirmDeleteTitle() {
-      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
-        attributeName: this.selectedAttribute.attribute_display_name,
-      });
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-        attributeName: this.selectedAttribute.attribute_display_name,
-      })}`;
-    },
-  },
-  mounted() {
-    this.fetchAttributes(this.selectedTabIndex);
-  },
-  methods: {
-    onClickTabChange(index) {
-      this.selectedTabIndex = index;
-      this.fetchAttributes(index);
-    },
-    fetchAttributes(index) {
-      this.$store.dispatch('attributes/get', index);
-    },
-    async deleteAttributes({ id }) {
-      try {
-        await this.$store.dispatch('attributes/delete', id);
-        this.showAlert(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);
-      }
-    },
-    openEditPopup(response) {
-      this.showEditPopup = true;
-      this.selectedAttribute = response;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    confirmDeletion() {
-      this.deleteAttributes(this.selectedAttribute);
-      this.closeDelete();
-    },
-    openDelete(value) {
-      this.showDeletePopup = true;
-      this.selectedAttribute = value;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedAttribute = {};
-    },
-  },
-};
-</script>
-
 <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 c5263c272..03d78e8d1 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 1e6a56bcb..e7670caef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
-    >
-      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-    <custom-attribute />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-attribute :on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
@@ -39,4 +22,19 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <div class="flex-1 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
+    >
+      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+    <CustomAttribute />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddAttribute :on-close="hideAddPopup" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 709d70b25..baaa90145 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 @@
-<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')"
-        />
+<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';
 
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table w-full"
-        >
-          <colgroup>
-            <col class="w-3/5" />
-            <col />
-            <col />
-          </colgroup>
+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">
+    <BaseSettingsHeader
+      :title="$t('AUDIT_LOGS.HEADER')"
+      :description="$t('AUDIT_LOGS.DESCRIPTION')"
+      :link-text="$t('AUDIT_LOGS.LEARN_MORE')"
+      feature-name="audit_logs"
+    />
+
+    <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 acf061288..51561ca0c 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 152b55aae..8cb143a7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,155 +1,8 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
-    <div class="flex flex-col modal-content">
-      <div class="w-full">
-        <woot-input
-          v-model="automation.name"
-          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: $v.automation.name.$error }"
-          :error="
-            $v.automation.name.$error
-              ? $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 }"
-          :error="
-            $v.automation.description.$error
-              ? $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 }">
-            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
-              <option
-                v-for="event in automationRuleEvents"
-                :key="event.key"
-                :value="event.key"
-              >
-                {{ event.value }}
-              </option>
-            </select>
-            <span v-if="$v.automation.event_name.$error" class="message">
-              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
-            </span>
-          </label>
-          <p v-if="hasAutomationMutated" class="info-message">
-            {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
-          </p>
-        </div>
-        <!-- // Conditions Start -->
-        <section>
-          <label>
-            {{ $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"
-          >
-            <filter-input-box
-              v-for="(condition, i) in automation.conditions"
-              :key="i"
-              v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
-              :dropdown-values="
-                getConditionDropdownValues(
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :show-query-operator="i !== automation.conditions.length - 1"
-              :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
-              "
-              :v="$v.automation.conditions.$each[i]"
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewCondition"
-              >
-                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Conditions End -->
-        <!-- // Actions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
-          >
-            <automation-action-input
-              v-for="(action, i) in automation.actions"
-              :key="i"
-              v-model="automation.actions[i]"
-              :action-types="automationActionTypes"
-              :dropdown-values="
-                getActionDropdownValues(automation.actions[i].action_name)
-              "
-              :show-action-input="
-                showActionInput(automation.actions[i].action_name)
-              "
-              :v="$v.automation.actions.$each[i]"
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewAction"
-              >
-                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Actions End -->
-        <div class="w-full">
-          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
-            <woot-button @click="submitAutomation">
-              {{ $t('AUTOMATION.ADD.SUBMIT') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import 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 FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -158,17 +11,16 @@ import {
 } from './constants';
 export default {
   components: {
-    filterInputBox,
-    automationActionInput,
+    FilterInputBox,
+    AutomationActionInput,
   },
-  mixins: [alertMixin, automationMethodsMixin, automationValidationsMixin],
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
-
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -199,6 +51,7 @@ export default {
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
       mode: 'create',
+      errors: {},
     };
   },
   computed: {
@@ -238,15 +91,155 @@ export default {
   },
 };
 </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>
+<template>
+  <div>
+    <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
+    <div class="flex flex-col modal-content">
+      <div class="w-full">
+        <woot-input
+          v-model="automation.name"
+          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
+          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
+        />
+        <woot-input
+          v-model="automation.description"
+          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
+          type="text"
+          :class="{ error: errors.description }"
+          :error="
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
+          "
+          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
+        />
+        <div class="mb-6">
+          <label :class="{ error: errors.event_name }">
+            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
+            <select
+              v-model="automation.event_name"
+              class="m-0"
+              @change="onEventChange()"
+            >
+              <option
+                v-for="event in automationRuleEvents"
+                :key="event.key"
+                :value="event.key"
+              >
+                {{ event.value }}
+              </option>
+            </select>
+            <span v-if="errors.event_name" class="message">
+              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
+            </span>
+          </label>
+          <p
+            v-if="hasAutomationMutated"
+            class="text-xs text-right text-green-500 dark:text-green-500"
+          >
+            {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
+          </p>
+        </div>
+        <!-- // Conditions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <FilterInputBox
+              v-for="(condition, i) in automation.conditions"
+              :key="i"
+              v-model="automation.conditions[i]"
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :dropdown-values="
+                getConditionDropdownValues(
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :show-query-operator="i !== automation.conditions.length - 1"
+              :custom-attribute-type="
+                getCustomAttributeType(automation.conditions[i].attribute_key)
+              "
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewCondition"
+              >
+                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Conditions End -->
+        <!-- // Actions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <AutomationActionInput
+              v-for="(action, i) in automation.actions"
+              :key="i"
+              v-model="automation.actions[i]"
+              :action-types="automationActionTypes"
+              :dropdown-values="
+                getActionDropdownValues(automation.actions[i].action_name)
+              "
+              :show-action-input="
+                showActionInput(automation.actions[i].action_name)
+              "
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
+              @resetAction="resetAction(i)"
+              @removeAction="removeAction(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewAction"
+              >
+                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Actions End -->
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
+            </woot-button>
+            <woot-button @click="submitAutomation">
+              {{ $t('AUTOMATION.ADD.SUBMIT') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 1b2b5a9fe..c11a56fc7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,153 +1,8 @@
-<template>
-  <div>
-    <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
-    <div class="flex flex-col modal-content">
-      <div v-if="automation" class="w-full">
-        <woot-input
-          v-model="automation.name"
-          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: $v.automation.name.$error }"
-          :error="
-            $v.automation.name.$error
-              ? $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 }"
-          :error="
-            $v.automation.description.$error
-              ? $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 }">
-            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
-              <option
-                v-for="event in automationRuleEvents"
-                :key="event.key"
-                :value="event.key"
-              >
-                {{ event.value }}
-              </option>
-            </select>
-            <span v-if="$v.automation.event_name.$error" class="message">
-              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <!-- // Conditions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
-          >
-            <filter-input-box
-              v-for="(condition, i) in automation.conditions"
-              :key="i"
-              v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
-              :dropdown-values="
-                getConditionDropdownValues(
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
-              "
-              :show-query-operator="i !== automation.conditions.length - 1"
-              :v="$v.automation.conditions.$each[i]"
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewCondition"
-              >
-                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Conditions End -->
-        <!-- // Actions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
-          >
-            <automation-action-input
-              v-for="(action, i) in automation.actions"
-              :key="i"
-              v-model="automation.actions[i]"
-              :action-types="automationActionTypes"
-              :dropdown-values="getActionDropdownValues(action.action_name)"
-              :show-action-input="showActionInput(action.action_name)"
-              :v="$v.automation.actions.$each[i]"
-              :initial-file-name="getFileName(action, automation.files)"
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
-            />
-            <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
-                @click="appendNewAction"
-              >
-                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
-            </div>
-          </div>
-        </section>
-        <!-- // Actions End -->
-        <div class="w-full">
-          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-            <woot-button
-              class="button"
-              variant="clear"
-              @click.prevent="onClose"
-            >
-              {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
-            <woot-button @click="submitAutomation">
-              {{ $t('AUTOMATION.EDIT.SUBMIT') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import 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 FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -157,10 +12,10 @@ import {
 
 export default {
   components: {
-    filterInputBox,
-    automationActionInput,
+    FilterInputBox,
+    AutomationActionInput,
   },
-  mixins: [alertMixin, automationMethodsMixin, automationValidationsMixin],
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
@@ -182,6 +37,7 @@ export default {
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
       mode: 'edit',
+      errors: {},
     };
   },
   computed: {
@@ -216,6 +72,150 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
+    <div class="flex flex-col modal-content">
+      <div v-if="automation" class="w-full">
+        <woot-input
+          v-model="automation.name"
+          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
+          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
+        />
+        <woot-input
+          v-model="automation.description"
+          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
+          type="text"
+          :class="{ error: errors.description }"
+          :error="
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
+          "
+          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
+        />
+        <div class="event_wrapper">
+          <label :class="{ error: errors.event_name }">
+            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
+            <select v-model="automation.event_name" @change="onEventChange()">
+              <option
+                v-for="event in automationRuleEvents"
+                :key="event.key"
+                :value="event.key"
+              >
+                {{ event.value }}
+              </option>
+            </select>
+            <span v-if="errors.event_name" class="message">
+              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <!-- // Conditions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <FilterInputBox
+              v-for="(condition, i) in automation.conditions"
+              :key="i"
+              v-model="automation.conditions[i]"
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :dropdown-values="
+                getConditionDropdownValues(
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :custom-attribute-type="
+                getCustomAttributeType(automation.conditions[i].attribute_key)
+              "
+              :show-query-operator="i !== automation.conditions.length - 1"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewCondition"
+              >
+                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Conditions End -->
+        <!-- // Actions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
+          </label>
+          <div
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+          >
+            <AutomationActionInput
+              v-for="(action, i) in automation.actions"
+              :key="i"
+              v-model="automation.actions[i]"
+              :action-types="automationActionTypes"
+              :dropdown-values="getActionDropdownValues(action.action_name)"
+              :show-action-input="showActionInput(action.action_name)"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
+              :initial-file-name="getFileName(action, automation.files)"
+              @resetAction="resetAction(i)"
+              @removeAction="removeAction(i)"
+            />
+            <div class="mt-4">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewAction"
+              >
+                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Actions End -->
+        <div class="w-full">
+          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+            <woot-button
+              class="button"
+              variant="clear"
+              @click.prevent="onClose"
+            >
+              {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
+            </woot-button>
+            <woot-button @click="submitAutomation">
+              {{ $t('AUTOMATION.EDIT.SUBMIT') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .event_wrapper {
   select {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index a780c9832..cbd200f09 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 863e1b5f9..4fdf1ef67 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 6f8ade8a0..90582afa3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="manage-subscription">
-    <div>
-      <h6>{{ title }}</h6>
-      <p class="manage-subscription--description">
-        {{ description }}
-      </p>
-    </div>
-    <div>
-      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
-        {{ buttonLabel }}
-      </woot-button>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -36,3 +21,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="manage-subscription">
+    <div>
+      <h6>{{ title }}</h6>
+      <p class="manage-subscription--description">
+        {{ description }}
+      </p>
+    </div>
+    <div>
+      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('click')">
+        {{ buttonLabel }}
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index c27f81399..8c0dc7b5c 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 5f259152c..0e8dea361 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 2eb0c3078..2989db04c 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 3c73cbf77..d1abc6490 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="flex items-center flex-col">
-    <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <spinner color-scheme="primary" />
-      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-    <div v-else class="w-full">
-      <empty-state v-if="showEmptyResult" :title="emptyMessage" />
-      <div v-else class="w-full">
-        <campaign-card
-          v-for="campaign in campaigns"
-          :key="campaign.id"
-          :campaign="campaign"
-          :is-ongoing-type="isOngoingType"
-          @edit="campaign => $emit('edit', campaign)"
-          @delete="campaign => $emit('delete', campaign)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -77,3 +55,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center flex-col">
+    <div v-if="isLoading" class="items-center flex text-base justify-center">
+      <Spinner color-scheme="primary" />
+      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
+    </div>
+    <div v-else class="w-full">
+      <EmptyState v-if="showEmptyResult" :title="emptyMessage" />
+      <div v-else class="w-full">
+        <CampaignCard
+          v-for="campaign in campaigns"
+          :key="campaign.id"
+          :campaign="campaign"
+          :is-ongoing-type="isOngoingType"
+          @edit="campaign => $emit('edit', campaign)"
+          @delete="campaign => $emit('delete', campaign)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index 71d1de41c..7bd4f2a15 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 9004ac22d..d6f1918cf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ buttonText }}
-    </woot-button>
-    <campaign />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign @on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
 import campaignMixin from 'shared/mixins/campaignMixin';
 import Campaign from './Campaign.vue';
@@ -50,3 +33,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ buttonText }}
+    </woot-button>
+    <Campaign />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddCampaign @onClose="hideAddPopup" />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index cafde905f..95f60f5a2 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 16cf0d77a..634745b38 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 0cc4b5932..d3fc54596 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')"
-        />
+          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
+        </woot-button>
+      </template>
+    </BaseSettingsHeader>
 
-        <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"
+    <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 236801c8c..9140e2c17 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 e70358cc9..5a2110a8e 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,
@@ -9,10 +12,6 @@ defineProps({
     required: true,
   },
   iconName: {
-    type: String,
-    required: true,
-  },
-  href: {
     type: String,
     default: '',
   },
@@ -20,8 +19,18 @@ defineProps({
     type: String,
     default: '',
   },
+  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 337c370cd..d98a8e243 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 61157e486..2985a34a9 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 93bff206d..0cbcc554b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      class="max-w-4xl"
-      :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
-      :header-content="
-        useInstallationName(
-          $t('INBOX_MGMT.ADD.AUTH.DESC'),
-          globalConfig.installationName
-        )
-      "
-    />
-    <div
-      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
-    >
-      <channel-item
-        v-for="channel in channelList"
-        :key="channel.key"
-        :channel="channel"
-        :enabled-features="enabledFeatures"
-        @channel-item-click="initChannelAuth"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
 import router from '../../../index';
@@ -87,3 +59,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      class="max-w-4xl"
+      :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
+      :header-content="
+        useInstallationName(
+          $t('INBOX_MGMT.ADD.AUTH.DESC'),
+          globalConfig.installationName
+        )
+      "
+    />
+    <div
+      class="grid max-w-3xl grid-cols-2 mx-0 mt-6 sm:grid-cols-3 lg:grid-cols-4"
+    >
+      <ChannelItem
+        v-for="channel in channelList"
+        :key="channel.key"
+        :channel="channel"
+        :enabled-features="enabledFeatures"
+        @channelItemClick="initChannelAuth"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index d9f0008d5..c01f9443a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -1,97 +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"
-  >
-    <empty-state
-      :title="$t('INBOX_MGMT.FINISH.TITLE')"
-      :message="message"
-      :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
-    >
-      <div class="w-full text-center">
-        <div class="my-4 mx-auto max-w-[70%]">
-          <woot-code
-            v-if="currentInbox.web_widget_script"
-            :script="currentInbox.web_widget_script"
-          />
-        </div>
-        <div class="w-[50%] max-w-[50%] ml-[25%]">
-          <woot-code
-            v-if="isATwilioInbox"
-            lang="html"
-            :script="currentInbox.callback_webhook_url"
-          />
-        </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">
-            {{ $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">
-            {{
-              $t(
-                'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
-              )
-            }}
-          </p>
-          <woot-code
-            lang="html"
-            :script="currentInbox.provider_config.webhook_verify_token"
-          />
-        </div>
-        <div class="w-[50%] max-w-[50%] ml-[25%]">
-          <woot-code
-            v-if="isALineInbox"
-            lang="html"
-            :script="currentInbox.callback_webhook_url"
-          />
-        </div>
-        <div class="w-[50%] max-w-[50%] ml-[25%]">
-          <woot-code
-            v-if="isASmsInbox"
-            lang="html"
-            :script="currentInbox.callback_webhook_url"
-          />
-        </div>
-        <div
-          v-if="isAEmailInbox && !currentInbox.provider"
-          class="w-[50%] max-w-[50%] ml-[25%]"
-        >
-          <woot-code lang="html" :script="currentInbox.forward_to_email" />
-        </div>
-        <div class="flex justify-center gap-2 mt-4">
-          <router-link
-            class="button hollow primary rounded"
-            :to="{
-              name: 'settings_inbox_show',
-              params: { inboxId: $route.params.inbox_id },
-            }"
-          >
-            {{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
-          </router-link>
-          <router-link
-            class="button success rounded"
-            :to="{
-              name: 'inbox_dashboard',
-              params: { inboxId: $route.params.inbox_id },
-            }"
-          >
-            {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
-          </router-link>
-        </div>
-      </div>
-    </empty-state>
-  </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'](
@@ -154,3 +67,88 @@ 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"
+  >
+    <EmptyState
+      :title="$t('INBOX_MGMT.FINISH.TITLE')"
+      :message="message"
+      :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
+    >
+      <div class="w-full text-center">
+        <div class="my-4 mx-auto max-w-[70%]">
+          <woot-code
+            v-if="currentInbox.web_widget_script"
+            :script="currentInbox.web_widget_script"
+          />
+        </div>
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
+          <woot-code
+            v-if="isATwilioInbox"
+            lang="html"
+            :script="currentInbox.callback_webhook_url"
+          />
+        </div>
+        <div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
+          <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="mt-8 font-medium text-slate-700 dark:text-slate-200">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
+              )
+            }}
+          </p>
+          <woot-code
+            lang="html"
+            :script="currentInbox.provider_config.webhook_verify_token"
+          />
+        </div>
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
+          <woot-code
+            v-if="isALineInbox"
+            lang="html"
+            :script="currentInbox.callback_webhook_url"
+          />
+        </div>
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
+          <woot-code
+            v-if="isASmsInbox"
+            lang="html"
+            :script="currentInbox.callback_webhook_url"
+          />
+        </div>
+        <div
+          v-if="isAEmailInbox && !currentInbox.provider"
+          class="w-[50%] max-w-[50%] ml-[25%]"
+        >
+          <woot-code lang="html" :script="currentInbox.forward_to_email" />
+        </div>
+        <div class="flex justify-center gap-2 mt-4">
+          <router-link
+            class="rounded button hollow primary"
+            :to="{
+              name: 'settings_inbox_show',
+              params: { inboxId: $route.params.inbox_id },
+            }"
+          >
+            {{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
+          </router-link>
+          <router-link
+            class="rounded button success"
+            :to="{
+              name: 'inbox_dashboard',
+              params: { inboxId: $route.params.inbox_id },
+            }"
+          >
+            {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
+          </router-link>
+        </div>
+      </div>
+    </EmptyState>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index 9e7f6dba0..9b3a883ba 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 ec9dc1ab7..bab39f686 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,16 +1,3 @@
-<template>
-  <div
-    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard
-      class="hidden md:block w-1/4"
-      :global-config="globalConfig"
-      :items="items"
-    />
-    <router-view />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -33,3 +20,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard
+      class="hidden md:block w-1/4"
+      :global-config="globalConfig"
+      :items="items"
+    />
+    <router-view />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index f9290786e..c7c7a2a44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -1,148 +1,24 @@
-<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"
-        >
-          {{ $t('INBOX_MGMT.LIST.404') }}
-          <router-link
-            v-if="isAdmin"
-            :to="addAccountScoping('settings/inboxes/new')"
-          >
-            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
-          </router-link>
-        </p>
-
-        <table v-if="inboxesList.length" class="woot-table">
-          <tbody>
-            <tr v-for="item in inboxesList" :key="item.id">
-              <td>
-                <img
-                  v-if="item.avatar_url"
-                  class="woot-thumbnail"
-                  :src="item.avatar_url"
-                  alt="No Page Image"
-                />
-                <img
-                  v-else
-                  class="woot-thumbnail"
-                  src="~dashboard/assets/images/flag.svg"
-                  alt="No Page Image"
-                />
-              </td>
-              <!-- Short Code  -->
-              <td>
-                <span class="agent-name">{{ item.name }}</span>
-                <span v-if="item.channel_type === 'Channel::FacebookPage'">
-                  Facebook
-                </span>
-                <span v-if="item.channel_type === 'Channel::WebWidget'">
-                  Website
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
-                  Twitter
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwilioSms'">
-                  {{ twilioChannelName(item) }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Whatsapp'">
-                  Whatsapp
-                </span>
-                <span v-if="item.channel_type === 'Channel::Sms'"> Sms </span>
-                <span v-if="item.channel_type === 'Channel::Email'">
-                  Email
-                </span>
-                <span v-if="item.channel_type === 'Channel::Telegram'">
-                  Telegram
-                </span>
-                <span v-if="item.channel_type === 'Channel::Line'">Line</span>
-                <span v-if="item.channel_type === 'Channel::Api'">
-                  {{ globalConfig.apiChannelName || 'API' }}
-                </span>
-              </td>
-
-              <!-- Action Buttons -->
-              <td>
-                <div class="button-wrapper">
-                  <router-link
-                    :to="addAccountScoping(`settings/inboxes/${item.id}`)"
-                  >
-                    <woot-button
-                      v-if="isAdmin"
-                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
-                      variant="smooth"
-                      size="tiny"
-                      icon="settings"
-                      color-scheme="secondary"
-                      class-names="grey-btn"
-                    />
-                  </router-link>
-
-                  <woot-button
-                    v-if="isAdmin"
-                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                    variant="smooth"
-                    color-scheme="alert"
-                    size="tiny"
-                    class-names="grey-btn"
-                    :is-loading="loading[item.id]"
-                    icon="dismiss-circle"
-                    @click="openDelete(item)"
-                  />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="w-1/3 hidden lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INBOX_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <settings
-      v-if="showSettings"
-      :show.sync="showSettings"
-      :on-close="closeSettings"
-      :inbox="selectedInbox"
-    />
-
-    <woot-confirm-delete-modal
-      v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
-      :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="confirmDeleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-      :confirm-value="selectedInbox.name"
-      :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
 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],
+  mixins: [globalConfigMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+    const { accountScopedUrl } = useAccount();
+    return {
+      isAdmin,
+      accountScopedUrl,
+    };
+  },
   data() {
     return {
       loading: {},
@@ -195,9 +71,9 @@ export default {
     async deleteInbox({ id }) {
       try {
         await this.$store.dispatch('inboxes/delete', id);
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
       }
     },
 
@@ -216,3 +92,140 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!inboxesList.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('INBOX_MGMT.LIST.404') }}
+          <router-link
+            v-if="isAdmin"
+            :to="accountScopedUrl('settings/inboxes/new')"
+          >
+            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
+          </router-link>
+        </p>
+
+        <table v-if="inboxesList.length" class="woot-table">
+          <tbody>
+            <tr v-for="item in inboxesList" :key="item.id">
+              <td>
+                <img
+                  v-if="item.avatar_url"
+                  class="woot-thumbnail"
+                  :src="item.avatar_url"
+                  alt="No Page Image"
+                />
+                <img
+                  v-else
+                  class="woot-thumbnail"
+                  src="~dashboard/assets/images/flag.svg"
+                  alt="No Page Image"
+                />
+              </td>
+              <!-- Short Code  -->
+              <td>
+                <span class="agent-name">{{ item.name }}</span>
+                <span v-if="item.channel_type === 'Channel::FacebookPage'">
+                  {{ 'Facebook' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::WebWidget'">
+                  {{ 'Website' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
+                  {{ 'Twitter' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::TwilioSms'">
+                  {{ twilioChannelName(item) }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Whatsapp'">
+                  {{ 'Whatsapp' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Sms'">
+                  {{ 'Sms' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Email'">
+                  {{ 'Email' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Telegram'">
+                  {{ 'Telegram' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Line'">
+                  {{ 'Line' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Api'">
+                  {{ globalConfig.apiChannelName || 'API' }}
+                </span>
+              </td>
+
+              <!-- Action Buttons -->
+              <td>
+                <div class="button-wrapper">
+                  <router-link
+                    :to="accountScopedUrl(`settings/inboxes/${item.id}`)"
+                  >
+                    <woot-button
+                      v-if="isAdmin"
+                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                      variant="smooth"
+                      size="tiny"
+                      icon="settings"
+                      color-scheme="secondary"
+                      class-names="grey-btn"
+                    />
+                  </router-link>
+
+                  <woot-button
+                    v-if="isAdmin"
+                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                    variant="smooth"
+                    color-scheme="alert"
+                    size="tiny"
+                    class-names="grey-btn"
+                    :is-loading="loading[item.id]"
+                    icon="dismiss-circle"
+                    @click="openDelete(item)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('INBOX_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+    <Settings
+      v-if="showSettings"
+      :show.sync="showSettings"
+      :on-close="closeSettings"
+      :inbox="selectedInbox"
+    />
+
+    <woot-confirm-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="confirmDeleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+      :confirm-value="selectedInbox.name"
+      :confirm-place-holder-text="confirmPlaceHolderText"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index ee8e66446..5fc73855e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -1,5 +1,39 @@
+<script>
+import draggable from 'vuedraggable';
+export default {
+  components: { Draggable: draggable },
+  props: {
+    preChatFields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      preChatFieldOptions: this.preChatFields,
+    };
+  },
+  watch: {
+    preChatFields() {
+      this.preChatFieldOptions = this.preChatFields;
+    },
+  },
+  methods: {
+    isFieldEditable(item) {
+      return !item.enabled;
+    },
+    handlePreChatFieldOptions(event, type, item) {
+      this.$emit('update', event, type, item);
+    },
+    onDragEnd() {
+      this.$emit('dragEnd', this.preChatFieldOptions);
+    },
+  },
+};
+</script>
+
 <template>
-  <draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
+  <Draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
     <tr v-for="(item, index) in preChatFieldOptions" :key="index">
       <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
       <td class="pre-chat-field">
@@ -38,42 +72,9 @@
         />
       </td>
     </tr>
-  </draggable>
+  </Draggable>
 </template>
 
-<script>
-import draggable from 'vuedraggable';
-export default {
-  components: { draggable },
-  props: {
-    preChatFields: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      preChatFieldOptions: this.preChatFields,
-    };
-  },
-  watch: {
-    preChatFields() {
-      this.preChatFieldOptions = this.preChatFields;
-    },
-  },
-  methods: {
-    isFieldEditable(item) {
-      return !item.enabled;
-    },
-    handlePreChatFieldOptions(event, type, item) {
-      this.$emit('update', event, type, item);
-    },
-    onDragEnd() {
-      this.$emit('drag-end', this.preChatFieldOptions);
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .pre-chat-field {
   @apply py-4 px-2 text-slate-700 dark:text-slate-100;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 48bdb6bb7..95708340a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -1,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 8735c8d88..09ae9add9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -1,433 +1,8 @@
-<template>
-  <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
-  >
-    <setting-intro-banner
-      :header-image="inbox.avatarUrl"
-      :header-title="inboxName"
-    >
-      <woot-tabs
-        class="settings--tabs"
-        :index="selectedTabIndex"
-        :border="false"
-        @change="onTabChange"
-      >
-        <woot-tabs-item
-          v-for="tab in tabs"
-          :key="tab.key"
-          :name="tab.name"
-          :show-badge="false"
-        />
-      </woot-tabs>
-    </setting-intro-banner>
-
-    <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
-    <facebook-reauthorize v-if="facebookUnauthorized" :inbox="inbox" />
-
-    <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
-        :show-border="false"
-      >
-        <woot-avatar-uploader
-          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
-          :src="avatarUrl"
-          class="pb-4"
-          delete-avatar
-          @change="handleImageUpload"
-          @onAvatarDelete="handleAvatarDelete"
-        />
-        <woot-input
-          v-model.trim="selectedInboxName"
-          class="w-3/4 pb-4"
-          :class="{ error: $v.selectedInboxName.$error }"
-          :label="inboxNameLabel"
-          :placeholder="inboxNamePlaceHolder"
-          :error="
-            $v.selectedInboxName.$error
-              ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
-              : ''
-          "
-          @blur="$v.selectedInboxName.$touch"
-        />
-        <woot-input
-          v-if="isAPIInbox"
-          v-model.trim="webhookUrl"
-          class="w-3/4 pb-4"
-          :class="{ error: $v.webhookUrl.$error }"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
-          "
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
-          "
-          :error="
-            $v.webhookUrl.$error
-              ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
-              : ''
-          "
-          @blur="$v.webhookUrl.$touch"
-        />
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model.trim="channelWebsiteUrl"
-          class="w-3/4 pb-4"
-          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
-          "
-        />
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model.trim="channelWelcomeTitle"
-          class="w-3/4 pb-4"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
-            )
-          "
-        />
-
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model.trim="channelWelcomeTagline"
-          class="w-3/4 pb-4"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-            )
-          "
-        />
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-          <woot-color-picker v-model="inbox.widget_color" />
-        </label>
-
-        <label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-          <input v-model="whatsAppAPIProviderName" type="text" disabled />
-        </label>
-
-        <label class="w-3/4 pb-4">
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
-          }}
-          <select v-model="greetingEnabled">
-            <option :value="true">
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
-                )
-              }}
-            </option>
-            <option :value="false">
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
-                )
-              }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
-              )
-            }}
-          </p>
-        </label>
-        <div v-if="greetingEnabled" class="pb-4">
-          <greetings-editor
-            v-model.trim="greetingMessage"
-            :label="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
-              )
-            "
-            :placeholder="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
-              )
-            "
-            :richtext="!textAreaChannels"
-          />
-        </div>
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
-          <select v-model="replyTime">
-            <option key="in_a_few_minutes" value="in_a_few_minutes">
-              {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
-              }}
-            </option>
-            <option key="in_a_few_hours" value="in_a_few_hours">
-              {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
-              }}
-            </option>
-            <option key="in_a_day" value="in_a_day">
-              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
-            </option>
-          </select>
-
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
-          <select v-model="emailCollectEnabled">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
-            }}
-          </p>
-        </label>
-
-        <label class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
-          <select v-model="csatSurveyEnabled">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
-          <select v-model="allowMessagesAfterResolved">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
-          <select v-model="continuityViaEmail">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
-        <div class="w-3/4 pb-4">
-          <label>
-            {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
-          </label>
-          <select v-model="selectedPortalSlug" class="filter__question">
-            <option value="">
-              {{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
-            </option>
-            <option v-for="p in portals" :key="p.slug" :value="p.slug">
-              {{ p.name }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
-          </p>
-        </div>
-        <label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
-          <select v-model="locktoSingleConversation">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox">
-          {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
-        </label>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="attachments"
-            @input="handleFeatureFlag"
-          />
-          <label for="attachments">
-            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="emoji_picker"
-            @input="handleFeatureFlag"
-          />
-          <label for="emoji_picker">
-            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="end_conversation"
-            @input="handleFeatureFlag"
-          />
-          <label for="end_conversation">
-            {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="use_inbox_avatar_for_bot"
-            @input="handleFeatureFlag"
-          />
-          <label for="emoji_picker">
-            {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
-          </label>
-        </div>
-      </settings-section>
-      <settings-section
-        v-if="isAWebWidgetInbox || isAnEmailChannel"
-        :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
-        :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
-        :show-border="false"
-      >
-        <div class="w-3/4 pb-4">
-          <sender-name-example-preview
-            :sender-name-type="senderNameType"
-            :business-name="businessName"
-            @update="toggleSenderNameType"
-          />
-          <div class="flex flex-col items-start gap-2 mt-2">
-            <woot-button
-              variant="clear"
-              color-scheme="primary"
-              @click="onClickShowBusinessNameInput"
-            >
-              {{
-                $t(
-                  'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
-                )
-              }}
-            </woot-button>
-            <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
-              <input
-                ref="businessNameInput"
-                v-model="businessName"
-                :placeholder="
-                  $t(
-                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
-                  )
-                "
-                class="mb-0"
-                type="text"
-              />
-              <woot-button color-scheme="primary" @click="updateInbox">
-                {{
-                  $t(
-                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
-                  )
-                }}
-              </woot-button>
-            </div>
-          </div>
-        </div>
-      </settings-section>
-      <settings-section :show-border="false">
-        <woot-submit-button
-          v-if="isAPIInbox"
-          type="submit"
-          :disabled="$v.webhookUrl.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          @click="updateInbox"
-        />
-        <woot-submit-button
-          v-else
-          type="submit"
-          :disabled="$v.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          @click="updateInbox"
-        />
-      </settings-section>
-    </div>
-
-    <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
-      <collaborators-page :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'configuration'">
-      <configuration-page :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'preChatForm'">
-      <pre-chat-form-settings :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'businesshours'">
-      <weekly-availability :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'widgetBuilder'">
-      <widget-builder :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'botConfiguration'">
-      <bot-configuration :inbox="inbox" />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { shouldBeUrl } from 'shared/helpers/Validators';
-import configMixin from 'shared/mixins/configMixin';
-import alertMixin from 'shared/mixins/alertMixin';
+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';
@@ -458,7 +33,10 @@ export default {
     SenderNameExamplePreview,
     MicrosoftReauthorize,
   },
-  mixins: [alertMixin, configMixin, inboxMixin],
+  mixins: [inboxMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       avatarFile: null,
@@ -720,11 +298,9 @@ export default {
           payload.avatar = this.avatarFile;
         }
         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'));
       }
     },
     handleImageUpload({ file, url }) {
@@ -739,9 +315,9 @@ export default {
         );
         this.avatarFile = null;
         this.avatarUrl = '';
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message
             ? error.message
             : this.$t('INBOX_MGMT.DELETE.API.AVATAR_ERROR_MESSAGE')
@@ -769,6 +345,431 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
+  >
+    <SettingIntroBanner
+      :header-image="inbox.avatarUrl"
+      :header-title="inboxName"
+    >
+      <woot-tabs
+        class="settings--tabs"
+        :index="selectedTabIndex"
+        :border="false"
+        @change="onTabChange"
+      >
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+    </SettingIntroBanner>
+
+    <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
+    <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
+
+    <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
+        :show-border="false"
+      >
+        <woot-avatar-uploader
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
+          :src="avatarUrl"
+          class="pb-4"
+          delete-avatar
+          @change="handleImageUpload"
+          @onAvatarDelete="handleAvatarDelete"
+        />
+        <woot-input
+          v-model.trim="selectedInboxName"
+          class="w-3/4 pb-4"
+          :class="{ error: v$.selectedInboxName.$error }"
+          :label="inboxNameLabel"
+          :placeholder="inboxNamePlaceHolder"
+          :error="
+            v$.selectedInboxName.$error
+              ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
+              : ''
+          "
+          @blur="v$.selectedInboxName.$touch"
+        />
+        <woot-input
+          v-if="isAPIInbox"
+          v-model.trim="webhookUrl"
+          class="w-3/4 pb-4"
+          :class="{ error: v$.webhookUrl.$error }"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
+          "
+          :placeholder="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
+          "
+          :error="
+            v$.webhookUrl.$error
+              ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
+              : ''
+          "
+          @blur="v$.webhookUrl.$touch"
+        />
+        <woot-input
+          v-if="isAWebWidgetInbox"
+          v-model.trim="channelWebsiteUrl"
+          class="w-3/4 pb-4"
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
+          "
+        />
+        <woot-input
+          v-if="isAWebWidgetInbox"
+          v-model.trim="channelWelcomeTitle"
+          class="w-3/4 pb-4"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
+          "
+          :placeholder="
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+            )
+          "
+        />
+
+        <woot-input
+          v-if="isAWebWidgetInbox"
+          v-model.trim="channelWelcomeTagline"
+          class="w-3/4 pb-4"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+          "
+          :placeholder="
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+            )
+          "
+        />
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+          <woot-color-picker v-model="inbox.widget_color" />
+        </label>
+
+        <label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+          <input v-model="whatsAppAPIProviderName" type="text" disabled />
+        </label>
+
+        <label class="w-3/4 pb-4">
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
+          }}
+          <select v-model="greetingEnabled">
+            <option :value="true">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
+                )
+              }}
+            </option>
+            <option :value="false">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
+                )
+              }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
+              )
+            }}
+          </p>
+        </label>
+        <div v-if="greetingEnabled" class="pb-4">
+          <GreetingsEditor
+            v-model.trim="greetingMessage"
+            :label="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
+              )
+            "
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+              )
+            "
+            :richtext="!textAreaChannels"
+          />
+        </div>
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
+          <select v-model="replyTime">
+            <option key="in_a_few_minutes" value="in_a_few_minutes">
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
+              }}
+            </option>
+            <option key="in_a_few_hours" value="in_a_few_hours">
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
+              }}
+            </option>
+            <option key="in_a_day" value="in_a_day">
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
+            </option>
+          </select>
+
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
+          <select v-model="emailCollectEnabled">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
+            }}
+          </p>
+        </label>
+
+        <label class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
+          <select v-model="csatSurveyEnabled">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
+          <select v-model="allowMessagesAfterResolved">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
+              )
+            }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
+          <select v-model="continuityViaEmail">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
+              )
+            }}
+          </p>
+        </label>
+        <div class="w-3/4 pb-4">
+          <label>
+            {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
+          </label>
+          <select v-model="selectedPortalSlug" class="filter__question">
+            <option value="">
+              {{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
+            </option>
+            <option v-for="p in portals" :key="p.slug" :value="p.slug">
+              {{ p.name }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
+          </p>
+        </div>
+        <label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
+          <select v-model="locktoSingleConversation">
+            <option :value="true">
+              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
+            </option>
+            <option :value="false">
+              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
+            </option>
+          </select>
+          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
+              )
+            }}
+          </p>
+        </label>
+
+        <label v-if="isAWebWidgetInbox">
+          {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
+        </label>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="attachments"
+            @input="handleFeatureFlag"
+          />
+          <label for="attachments">
+            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="emoji_picker"
+            @input="handleFeatureFlag"
+          />
+          <label for="emoji_picker">
+            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="end_conversation"
+            @input="handleFeatureFlag"
+          />
+          <label for="end_conversation">
+            {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="use_inbox_avatar_for_bot"
+            @input="handleFeatureFlag"
+          />
+          <label for="emoji_picker">
+            {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
+          </label>
+        </div>
+      </SettingsSection>
+      <SettingsSection
+        v-if="isAWebWidgetInbox || isAnEmailChannel"
+        :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
+        :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
+        :show-border="false"
+      >
+        <div class="w-3/4 pb-4">
+          <SenderNameExamplePreview
+            :sender-name-type="senderNameType"
+            :business-name="businessName"
+            @update="toggleSenderNameType"
+          />
+          <div class="flex flex-col items-start gap-2 mt-2">
+            <woot-button
+              variant="clear"
+              color-scheme="primary"
+              @click="onClickShowBusinessNameInput"
+            >
+              {{
+                $t(
+                  'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
+                )
+              }}
+            </woot-button>
+            <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
+              <input
+                ref="businessNameInput"
+                v-model="businessName"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
+                  )
+                "
+                class="mb-0"
+                type="text"
+              />
+              <woot-button color-scheme="primary" @click="updateInbox">
+                {{
+                  $t(
+                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
+                  )
+                }}
+              </woot-button>
+            </div>
+          </div>
+        </div>
+      </SettingsSection>
+      <SettingsSection :show-border="false">
+        <woot-submit-button
+          v-if="isAPIInbox"
+          type="submit"
+          :disabled="v$.webhookUrl.$invalid"
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="uiFlags.isUpdating"
+          @click="updateInbox"
+        />
+        <woot-submit-button
+          v-else
+          type="submit"
+          :disabled="v$.$invalid"
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="uiFlags.isUpdating"
+          @click="updateInbox"
+        />
+      </SettingsSection>
+    </div>
+
+    <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
+      <CollaboratorsPage :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'configuration'">
+      <ConfigurationPage :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'preChatForm'">
+      <PreChatFormSettings :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'businesshours'">
+      <WeeklyAvailability :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'widgetBuilder'">
+      <WidgetBuilder :inbox="inbox" />
+    </div>
+    <div v-if="selectedTabKey === 'botConfiguration'">
+      <BotConfiguration :inbox="inbox" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .settings--tabs {
   ::v-deep .tabs {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 47a70d8b4..bab40210c 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 82dd5966c..5a46d1f85 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 ebac2a2d1..08279c1cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -1,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 701a0d5f3..410411b2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -1,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 aecf5d61a..035f23e91 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
@@ -1,124 +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.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
-        <input
-          v-model.trim="inboxName"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.PLACEHOLDER')
-          "
-          @blur="$v.inboxName.$touch"
-        />
-        <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 }">
-        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
-        <input
-          v-model.trim="phoneNumber"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.PLACEHOLDER')
-          "
-          @blur="$v.phoneNumber.$touch"
-        />
-        <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 }">
-        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
-        <input
-          v-model.trim="accountId"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.PLACEHOLDER')
-          "
-          @blur="$v.accountId.$touch"
-        />
-        <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 }">
-        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
-        <input
-          v-model.trim="applicationId"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.PLACEHOLDER')
-          "
-          @blur="$v.applicationId.$touch"
-        />
-        <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 }">
-        {{ $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"
-        />
-        <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 }">
-        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
-        <input
-          v-model.trim="apiSecret"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.PLACEHOLDER')
-          "
-          @blur="$v.apiSecret.$touch"
-        />
-        <span v-if="$v.apiSecret.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.ERROR')
-        }}</span>
-      </label>
-    </div>
-
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.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';
 
 const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
 
 export default {
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountId: '',
@@ -132,7 +24,6 @@ export default {
   computed: {
     ...mapGetters({
       uiFlags: 'inboxes/getUIFlags',
-      globalConfig: 'globalConfig/get',
     }),
   },
   validations: {
@@ -145,8 +36,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -173,9 +64,120 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
+        <input
+          v-model.trim="inboxName"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.PLACEHOLDER')
+          "
+          @blur="v$.inboxName.$touch"
+        />
+        <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 }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model.trim="phoneNumber"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.PLACEHOLDER')
+          "
+          @blur="v$.phoneNumber.$touch"
+        />
+        <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 }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
+        <input
+          v-model.trim="accountId"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.PLACEHOLDER')
+          "
+          @blur="v$.accountId.$touch"
+        />
+        <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 }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
+        <input
+          v-model.trim="applicationId"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.PLACEHOLDER')
+          "
+          @blur="v$.applicationId.$touch"
+        />
+        <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 }">
+        {{ $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"
+        />
+        <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 }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
+        <input
+          v-model.trim="apiSecret"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.PLACEHOLDER')
+          "
+          @blur="v$.apiSecret.$touch"
+        />
+        <span v-if="v$.apiSecret.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="w-full">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>
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 dd320dd17..88eba6b4e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -1,108 +1,15 @@
-<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.phoneNumberId.$error }">
-        <span>
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
-        </span>
-        <input
-          v-model.trim="phoneNumberId"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.PLACEHOLDER')
-          "
-          @blur="$v.phoneNumberId.$touch"
-        />
-        <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 }">
-        <span>
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
-        </span>
-        <input
-          v-model.trim="businessAccountId"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.PLACEHOLDER')
-          "
-          @blur="$v.businessAccountId.$touch"
-        />
-        <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 }">
-        <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, isNumber } from 'shared/helpers/Validators';
 
 export default {
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       inboxName: '',
@@ -124,8 +31,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -155,7 +62,7 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(
+        useAlert(
           error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
         );
       }
@@ -163,3 +70,99 @@ 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$.phoneNumberId.$error }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
+        </span>
+        <input
+          v-model.trim="phoneNumberId"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.PLACEHOLDER')
+          "
+          @blur="v$.phoneNumberId.$touch"
+        />
+        <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 }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
+        </span>
+        <input
+          v-model.trim="businessAccountId"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.PLACEHOLDER')
+          "
+          @blur="v$.businessAccountId.$touch"
+        />
+        <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 }">
+        <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/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index 375e5aefb..0326cd288 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    v-if="!provider"
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      class="max-w-4xl"
-      :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
-    />
-    <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
-      <channel-selector
-        v-for="emailProvider in emailProviderList"
-        :key="emailProvider.key"
-        :class="{ inactive: !emailProvider.isEnabled }"
-        :title="emailProvider.title"
-        :src="emailProvider.src"
-        @click="() => onClick(emailProvider)"
-      />
-    </div>
-  </div>
-  <microsoft v-else-if="provider === 'microsoft'" />
-  <google v-else-if="provider === 'google'" />
-  <forward-to-option v-else-if="provider === 'other_provider'" />
-</template>
 <script setup>
 import { ref, computed } from 'vue';
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
@@ -76,3 +51,29 @@ function onClick(emailProvider) {
   }
 }
 </script>
+
+<template>
+  <div
+    v-if="!provider"
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      class="max-w-4xl"
+      :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
+    />
+    <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
+      <ChannelSelector
+        v-for="emailProvider in emailProviderList"
+        :key="emailProvider.key"
+        :class="{ inactive: !emailProvider.isEnabled }"
+        :title="emailProvider.title"
+        :src="emailProvider.src"
+        @click="() => onClick(emailProvider)"
+      />
+    </div>
+  </div>
+  <Microsoft v-else-if="provider === 'microsoft'" />
+  <Google v-else-if="provider === 'google'" />
+  <ForwardToOption v-else-if="provider === 'other_provider'" />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 374a88854..8d3406715 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 f726b24da..85faa48dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -1,85 +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.LINE_CHANNEL.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.LINE_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.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
-          <input
-            v-model.trim="channelName"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-            "
-            @blur="$v.channelName.$touch"
-          />
-          <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 }">
-          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
-          <input
-            v-model.trim="lineChannelId"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
-            "
-            @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 }">
-          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
-          <input
-            v-model.trim="lineChannelSecret"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
-            "
-            @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 }">
-          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
-          <input
-            v-model.trim="lineChannelToken"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
-            "
-            @blur="$v.lineChannelToken.$touch"
-          />
-        </label>
-      </div>
-
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.LINE_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';
 
@@ -87,7 +10,9 @@ export default {
   components: {
     PageHeader,
   },
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       channelName: '',
@@ -109,8 +34,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -136,11 +61,87 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(
-          this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE')
-        );
+        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"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.LINE_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.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <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 }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
+          <input
+            v-model.trim="lineChannelId"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
+            "
+            @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 }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
+          <input
+            v-model.trim="lineChannelSecret"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
+            "
+            @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 }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
+          <input
+            v-model.trim="lineChannelToken"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
+            "
+            @blur="v$.lineChannelToken.$touch"
+          />
+        </label>
+      </div>
+
+      <div class="w-full">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 81e271cbf..4f9eb4fc6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -1,29 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
-    />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label>
-        {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
-        <select v-model="provider">
-          <option value="twilio">
-            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.TWILIO') }}
-          </option>
-          <option value="360dialog">
-            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.BANDWIDTH') }}
-          </option>
-        </select>
-      </label>
-    </div>
-    <twilio v-if="provider === 'twilio'" type="sms" />
-    <bandwidth-sms v-else />
-  </div>
-</template>
-
 <script>
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import BandwidthSms from './BandwidthSms.vue';
@@ -42,3 +16,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
+    />
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label>
+        {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
+        <select v-model="provider">
+          <option value="twilio">
+            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.TWILIO') }}
+          </option>
+          <option value="360dialog">
+            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.BANDWIDTH') }}
+          </option>
+        </select>
+      </label>
+    </div>
+    <Twilio v-if="provider === 'twilio'" type="sms" />
+    <BandwidthSms v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
index c7cbaeb4a..b92645b58 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -1,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 b37817129..3bce5493c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -1,155 +1,22 @@
 <!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
-<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.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"
-        />
-        <span v-if="$v.channelName.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
-        }}</span>
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label
-        v-if="useMessagingService"
-        :class="{ error: $v.messagingServiceSID.$error }"
-      >
-        {{ $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.LABEL') }}
-        <input
-          v-model.trim="messagingServiceSID"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.PLACEHOLDER')
-          "
-          @blur="$v.messagingServiceSID.$touch"
-        />
-        <span v-if="$v.messagingServiceSID.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.ERROR')
-        }}</span>
-      </label>
-    </div>
-
-    <div
-      v-if="!useMessagingService"
-      class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
-    >
-      <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"
-        />
-        <span v-if="$v.phoneNumber.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
-        }}</span>
-      </label>
-    </div>
-
-    <div class="max-w-[65%] w-full messagingServiceHelptext">
-      <label for="useMessagingService">
-        <input
-          id="useMessagingService"
-          v-model="useMessagingService"
-          type="checkbox"
-          class="checkbox"
-        />
-        {{
-          $t(
-            'INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.USE_MESSAGING_SERVICE'
-          )
-        }}
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <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"
-        />
-        <span v-if="$v.accountSID.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
-        }}</span>
-      </label>
-    </div>
-    <div class="max-w-[65%] w-full messagingServiceHelptext">
-      <label for="useAPIKey">
-        <input
-          id="useAPIKey"
-          v-model="useAPIKey"
-          type="checkbox"
-          class="checkbox"
-        />
-        {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
-      </label>
-    </div>
-    <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <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"
-        />
-        <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 }">
-        {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
-        <input
-          v-model.trim="authToken"
-          type="text"
-          :placeholder="
-            $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.PLACEHOLDER`)
-          "
-          @blur="$v.authToken.$touch"
-        />
-        <span v-if="$v.authToken.$error" class="message">
-          {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.ERROR`) }}
-        </span>
-      </label>
-    </div>
-
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.TWILIO.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],
   props: {
     type: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountSID: '',
@@ -203,8 +70,8 @@ export default {
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -234,12 +101,149 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <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"
+        />
+        <span v-if="v$.channelName.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label
+        v-if="useMessagingService"
+        :class="{ error: v$.messagingServiceSID.$error }"
+      >
+        {{ $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.LABEL') }}
+        <input
+          v-model.trim="messagingServiceSID"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.PLACEHOLDER')
+          "
+          @blur="v$.messagingServiceSID.$touch"
+        />
+        <span v-if="v$.messagingServiceSID.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div
+      v-if="!useMessagingService"
+      class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
+    >
+      <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"
+        />
+        <span v-if="v$.phoneNumber.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="max-w-[65%] w-full messagingServiceHelptext">
+      <label for="useMessagingService">
+        <input
+          id="useMessagingService"
+          v-model="useMessagingService"
+          type="checkbox"
+          class="checkbox"
+        />
+        {{
+          $t(
+            'INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.USE_MESSAGING_SERVICE'
+          )
+        }}
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <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"
+        />
+        <span v-if="v$.accountSID.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
+        }}</span>
+      </label>
+    </div>
+    <div class="max-w-[65%] w-full messagingServiceHelptext">
+      <label for="useAPIKey">
+        <input
+          id="useAPIKey"
+          v-model="useAPIKey"
+          type="checkbox"
+          class="checkbox"
+        />
+        {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
+      </label>
+    </div>
+    <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <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"
+        />
+        <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 }">
+        {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
+        <input
+          v-model.trim="authToken"
+          type="text"
+          :placeholder="
+            $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.PLACEHOLDER`)
+          "
+          @blur="v$.authToken.$touch"
+        />
+        <span v-if="v$.authToken.$error" class="message">
+          {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.ERROR`) }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-full">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>
+
 <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 08919b978..216c822f0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,3 +1,30 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import twitterClient from '../../../../../api/channel/twitterClient';
+
+export default {
+  data() {
+    return { isRequestingAuthorization: false };
+  },
+  methods: {
+    async requestAuthorization() {
+      try {
+        this.isRequestingAuthorization = true;
+        const response = await twitterClient.generateAuthorization();
+        const {
+          data: { url },
+        } = response;
+        window.location.href = url;
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.ADD.TWITTER.ERROR_MESSAGE'));
+      } finally {
+        this.isRequestingAuthorization = 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"
@@ -15,33 +42,7 @@
     </div>
   </div>
 </template>
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import twitterClient from '../../../../../api/channel/twitterClient';
 
-export default {
-  mixins: [alertMixin],
-  data() {
-    return { isRequestingAuthorization: false };
-  },
-  methods: {
-    async requestAuthorization() {
-      try {
-        this.isRequestingAuthorization = true;
-        const response = await twitterClient.generateAuthorization();
-        const {
-          data: { url },
-        } = response;
-        window.location.href = url;
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.TWITTER.ERROR_MESSAGE'));
-      } finally {
-        this.isRequestingAuthorization = false;
-      }
-    },
-  },
-};
-</script>
 <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 dae97dbe2..2f1b0067e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -1,8 +1,81 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+
+export default {
+  components: {
+    PageHeader,
+    GreetingsEditor,
+  },
+  data() {
+    return {
+      inboxName: '',
+      channelWebsiteUrl: '',
+      channelWidgetColor: '#009CE0',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      greetingEnabled: false,
+      greetingMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
+  },
+  methods: {
+    async createChannel() {
+      try {
+        const website = await this.$store.dispatch(
+          'inboxes/createWebsiteChannel',
+          {
+            name: this.inboxName,
+            greeting_enabled: this.greetingEnabled,
+            greeting_message: this.greetingMessage,
+            channel: {
+              type: 'web_widget',
+              website_url: this.channelWebsiteUrl,
+              widget_color: this.channelWidgetColor,
+              welcome_title: this.channelWelcomeTitle,
+              welcome_tagline: this.channelWelcomeTagline,
+            },
+          }
+        );
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: website.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message ||
+            this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
     />
@@ -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 8206e4651..d361e0f78 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <page-header
-      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
-    />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label>
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-        <select v-model="provider">
-          <option value="whatsapp_cloud">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
-          </option>
-          <option value="twilio">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
-          </option>
-        </select>
-      </label>
-    </div>
-
-    <twilio v-if="provider === 'twilio'" type="whatsapp" />
-    <three-sixty-dialog-whatsapp v-else-if="provider === '360dialog'" />
-    <cloud-whatsapp v-else />
-  </div>
-</template>
-
 <script>
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import Twilio from './Twilio.vue';
@@ -46,3 +18,31 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
+    />
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label>
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+        <select v-model="provider">
+          <option value="whatsapp_cloud">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
+          </option>
+          <option value="twilio">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
+          </option>
+        </select>
+      </label>
+    </div>
+
+    <Twilio v-if="provider === 'twilio'" type="whatsapp" />
+    <ThreeSixtyDialogWhatsapp v-else-if="provider === '360dialog'" />
+    <CloudWhatsapp v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
index 25f59380d..62d85bd1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
@@ -1,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 b0588bdd6..0e8c506dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
@@ -6,6 +6,7 @@ defineComponent({
   name: 'GoogleOAuthChannel',
 });
 </script>
+
 <template>
   <OAuthChannel
     provider="google"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
index b6ccef365..fce007ca0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
@@ -64,11 +64,12 @@ async function requestAuthorization() {
   }
 }
 </script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <settings-sub-page-header
+    <SettingsSubPageHeader
       :header-title="title"
       :header-content="description"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
index 976b65534..6c8947bfa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
@@ -6,8 +6,6 @@ import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
 
-const { t } = useI18n();
-
 const props = defineProps({
   inbox: {
     type: Object,
@@ -15,6 +13,8 @@ const props = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const isRequestingAuthorization = ref(false);
 
 async function requestAuthorization() {
@@ -37,7 +37,7 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <inbox-reconnection-required
+  <InboxReconnectionRequired
     class="mx-8 mt-5"
     @reauthorize="requestAuthorization"
   />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
index 01b39efe0..e662d3f72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -1,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 6f6e1bef1..34879f9ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -1,72 +1,3 @@
-<template>
-  <div class="day-wrap">
-    <div class="checkbox-wrap">
-      <input
-        v-model="isDayEnabled"
-        name="enable-day"
-        class="enable-checkbox"
-        type="checkbox"
-        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
-      />
-    </div>
-    <div class="day">
-      <span>{{ dayName }}</span>
-    </div>
-    <div v-if="isDayEnabled" class="hours-select-wrap">
-      <div class="hours-range">
-        <div class="checkbox-wrap open-all-day">
-          <input
-            v-model="isOpenAllDay"
-            name="enable-open-all-day"
-            class="enable-checkbox"
-            type="checkbox"
-            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
-          />
-          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
-        </div>
-        <multiselect
-          v-model="fromTime"
-          :options="fromTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-        <div class="separator-icon">
-          <fluent-icon icon="subtract" type="solid" size="16" />
-        </div>
-        <multiselect
-          v-model="toTime"
-          :options="toTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-      </div>
-      <div v-if="hasError" class="date-error">
-        <span class="error">{{
-          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
-        }}</span>
-      </div>
-    </div>
-    <div v-else class="day-unavailable">
-      <span>
-        {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
-      </span>
-    </div>
-    <div>
-      <span v-if="isDayEnabled && !hasError" class="label">
-        {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
-      </span>
-    </div>
-  </div>
-</template>
-
 <script>
 import parse from 'date-fns/parse';
 import differenceInMinutes from 'date-fns/differenceInMinutes';
@@ -79,7 +10,6 @@ export default {
   props: {
     dayName: {
       type: String,
-      default: '',
       required: true,
     },
     timeSlot: {
@@ -201,6 +131,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="day-wrap">
+    <div class="checkbox-wrap">
+      <input
+        v-model="isDayEnabled"
+        name="enable-day"
+        class="enable-checkbox"
+        type="checkbox"
+        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
+      />
+    </div>
+    <div class="day">
+      <span>{{ dayName }}</span>
+    </div>
+    <div v-if="isDayEnabled" class="hours-select-wrap">
+      <div class="hours-range">
+        <div class="checkbox-wrap open-all-day">
+          <input
+            v-model="isOpenAllDay"
+            name="enable-open-all-day"
+            class="enable-checkbox"
+            type="checkbox"
+            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
+          />
+          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
+        </div>
+        <multiselect
+          v-model="fromTime"
+          :options="fromTimeSlots"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+          :allow-empty="false"
+          :disabled="isOpenAllDay"
+        />
+        <div class="separator-icon">
+          <fluent-icon icon="subtract" type="solid" size="16" />
+        </div>
+        <multiselect
+          v-model="toTime"
+          :options="toTimeSlots"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+          :allow-empty="false"
+          :disabled="isOpenAllDay"
+        />
+      </div>
+      <div v-if="hasError" class="date-error">
+        <span class="error">{{
+          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
+        }}</span>
+      </div>
+    </div>
+    <div v-else class="day-unavailable">
+      <span>
+        {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
+      </span>
+    </div>
+    <div>
+      <span v-if="isDayEnabled && !hasError" class="label">
+        {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
+      </span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .day-wrap::v-deep .multiselect {
   @apply m-0 w-[7.5rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
index fe6a80586..0357e09a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
@@ -3,7 +3,7 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 </script>
 
 <template>
-  <banner
+  <Banner
     color-scheme="alert"
     class="justify-start rounded-md"
     :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
index 6f08afc3d..ded4fb9d7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
@@ -1,23 +1,3 @@
-<template>
-  <div>
-    <label class="radio-group-label">{{ label }}</label>
-    <div class="radio-group">
-      <div v-for="item in items" :key="item.id" class="radio-group-item">
-        <label class="radio-group-item-label">
-          <input
-            class="radio-input"
-            :name="`${name} -radio-input`"
-            type="radio"
-            :checked="item.checked"
-            @change="action({ ...item, checked: true })"
-          />
-          <span>{{ item.title }}</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -41,6 +21,26 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <label class="radio-group-label">{{ label }}</label>
+    <div class="radio-group">
+      <div v-for="item in items" :key="item.id" class="radio-group-item">
+        <label class="radio-group-item-label">
+          <input
+            class="radio-input"
+            :name="`${name} -radio-input`"
+            type="radio"
+            :checked="item.checked"
+            @change="action({ ...item, checked: true })"
+          />
+          <span>{{ item.title }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .radio-group-label {
   margin-bottom: var(--space-smaller);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 126b57198..9f7be45ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -1,48 +1,3 @@
-<template>
-  <div class="flex flex-row items-center gap-4">
-    <button
-      v-for="keyOption in senderNameKeyOptions"
-      :key="keyOption.key"
-      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
-      @click="toggleSenderNameType(keyOption.key)"
-    >
-      <preview-card
-        :heading="keyOption.heading"
-        :content="keyOption.content"
-        :active="keyOption.key === senderNameType"
-      >
-        <div class="flex flex-col items-start p-3 gap-2">
-          <span class="text-xs">
-            {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
-          </span>
-          <div class="flex flex-row items-center gap-2">
-            <thumbnail :username="userName(keyOption)" size="32px" />
-            <div class="flex flex-col items-start gap-1">
-              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
-                <span
-                  v-if="isKeyOptionFriendly(keyOption.key)"
-                  class="text-xs font-semibold leading-tight"
-                >
-                  {{ keyOption.preview.senderName }}
-                </span>
-                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
-                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
-                </span>
-                <span
-                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
-                >
-                  {{ businessName || keyOption.preview.businessName }}
-                </span>
-              </div>
-              <span class="text-xs">{{ keyOption.preview.email }}</span>
-            </div>
-          </div>
-        </div>
-      </preview-card>
-    </button>
-  </div>
-</template>
-
 <script>
 import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -111,3 +66,48 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-row items-center gap-4">
+    <button
+      v-for="keyOption in senderNameKeyOptions"
+      :key="keyOption.key"
+      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
+      @click="toggleSenderNameType(keyOption.key)"
+    >
+      <PreviewCard
+        :heading="keyOption.heading"
+        :content="keyOption.content"
+        :active="keyOption.key === senderNameType"
+      >
+        <div class="flex flex-col items-start p-3 gap-2">
+          <span class="text-xs">
+            {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
+          </span>
+          <div class="flex flex-row items-center gap-2">
+            <Thumbnail :username="userName(keyOption)" size="32px" />
+            <div class="flex flex-col items-start gap-1">
+              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
+                <span
+                  v-if="isKeyOptionFriendly(keyOption.key)"
+                  class="text-xs font-semibold leading-tight"
+                >
+                  {{ keyOption.preview.senderName }}
+                </span>
+                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
+                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
+                </span>
+                <span
+                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
+                >
+                  {{ businessName || keyOption.preview.businessName }}
+                </span>
+              </div>
+              <span class="text-xs">{{ keyOption.preview.email }}</span>
+            </div>
+          </div>
+        </div>
+      </PreviewCard>
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
index 850b5a863..5984ff238 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SingleSelectDropdown.vue
@@ -1,20 +1,3 @@
-<template>
-  <div>
-    <label for="dropdown-select">
-      {{ label }}
-    </label>
-    <select
-      id="dropdown-select"
-      v-model="value"
-      name="dropdown-select"
-      @change="action(value)"
-    >
-      <option v-for="option in options" :key="option.key">
-        {{ option.value }}
-      </option>
-    </select>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -42,3 +25,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <label for="dropdown-select">
+      {{ label }}
+    </label>
+    <select
+      id="dropdown-select"
+      v-model="value"
+      name="dropdown-select"
+      @change="action(value)"
+    >
+      <option v-for="option in options" :key="option.key">
+        {{ option.value }}
+      </option>
+    </select>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 12ff70a62..43cc5bedf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -1,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 d90f88d3b..986f072e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -1,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();
     },
 
-    loadFBsdk() {
-      ((d, s, id) => {
-        let js;
-        // eslint-disable-next-line
-        const fjs = (js = d.getElementsByTagName(s)[0]);
-        if (d.getElementById(id)) {
-          return;
+    async loadFBsdk() {
+      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+        id: 'facebook-jssdk',
+      });
+    },
+
+    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 2046847b3..7ef9bc71b 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 c10e5994e..170902ec0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -1,162 +1,11 @@
-<template>
-  <div v-if="isATwilioChannel" class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
-      :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
-    >
-      <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </settings-section>
-  </div>
-  <div v-else-if="isALineChannel" class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
-      :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
-    >
-      <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </settings-section>
-  </div>
-  <div v-else-if="isAWebWidgetInbox">
-    <div class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
-      >
-        <woot-code
-          :script="inbox.web_widget_script"
-          lang="html"
-          :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
-          :enable-code-pen="true"
-        />
-      </settings-section>
-
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
-      >
-        <woot-code :script="inbox.hmac_token" />
-        <template #subTitle>
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
-          >
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
-          </a>
-        </template>
-      </settings-section>
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
-      >
-        <div class="flex items-center gap-2">
-          <input
-            id="hmacMandatory"
-            v-model="hmacMandatory"
-            type="checkbox"
-            @change="handleHmacFlag"
-          />
-          <label for="hmacMandatory">
-            {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
-          </label>
-        </div>
-      </settings-section>
-    </div>
-  </div>
-  <div v-else-if="isAPIInbox" class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
-    >
-      <woot-code :script="inbox.inbox_identifier" />
-    </settings-section>
-
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
-    >
-      <woot-code :script="inbox.hmac_token" />
-    </settings-section>
-    <settings-section
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
-    >
-      <div class="flex items-center gap-2">
-        <input
-          id="hmacMandatory"
-          v-model="hmacMandatory"
-          type="checkbox"
-          @change="handleHmacFlag"
-        />
-        <label for="hmacMandatory">
-          {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
-        </label>
-      </div>
-    </settings-section>
-  </div>
-  <div v-else-if="isAnEmailChannel">
-    <div class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
-      >
-        <woot-code :script="inbox.forward_to_email" />
-      </settings-section>
-    </div>
-    <imap-settings :inbox="inbox" />
-    <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
-  </div>
-  <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
-    <div v-if="inbox.provider_config" class="mx-8">
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')"
-      >
-        <woot-code :script="inbox.provider_config.webhook_verify_token" />
-      </settings-section>
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')"
-      >
-        <woot-code :script="inbox.provider_config.api_key" />
-      </settings-section>
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
-        :sub-title="
-          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
-        "
-      >
-        <div
-          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
-        >
-          <woot-input
-            v-model.trim="whatsAppInboxAPIKey"
-            type="text"
-            class="flex-1 mr-2"
-            :placeholder="
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
-              )
-            "
-          />
-          <woot-button
-            :disabled="$v.whatsAppInboxAPIKey.$invalid"
-            @click="updateWhatsAppInboxAPIKey"
-          >
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
-          </woot-button>
-        </div>
-      </settings-section>
-    </div>
-  </div>
-</template>
-
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
+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 { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 
 export default {
   components: {
@@ -164,13 +13,16 @@ export default {
     ImapSettings,
     SmtpSettings,
   },
-  mixins: [inboxMixin, alertMixin],
+  mixins: [inboxMixin],
   props: {
     inbox: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       hmacMandatory: false,
@@ -205,9 +57,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.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
     },
     async updateWhatsAppInboxAPIKey() {
@@ -224,14 +76,167 @@ 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.ERROR_MESSAGE'));
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </script>
+
+<template>
+  <div v-if="isATwilioChannel" class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
+      :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
+    >
+      <woot-code :script="inbox.callback_webhook_url" lang="html" />
+    </SettingsSection>
+  </div>
+  <div v-else-if="isALineChannel" class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
+      :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
+    >
+      <woot-code :script="inbox.callback_webhook_url" lang="html" />
+    </SettingsSection>
+  </div>
+  <div v-else-if="isAWebWidgetInbox">
+    <div class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+      >
+        <woot-code
+          :script="inbox.web_widget_script"
+          lang="html"
+          :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
+          enable-code-pen
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
+      >
+        <woot-code :script="inbox.hmac_token" />
+        <template #subTitle>
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
+          </a>
+        </template>
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
+      >
+        <div class="flex items-center gap-2">
+          <input
+            id="hmacMandatory"
+            v-model="hmacMandatory"
+            type="checkbox"
+            @change="handleHmacFlag"
+          />
+          <label for="hmacMandatory">
+            {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
+          </label>
+        </div>
+      </SettingsSection>
+    </div>
+  </div>
+  <div v-else-if="isAPIInbox" class="mx-8">
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
+    >
+      <woot-code :script="inbox.inbox_identifier" />
+    </SettingsSection>
+
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
+    >
+      <woot-code :script="inbox.hmac_token" />
+    </SettingsSection>
+    <SettingsSection
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
+      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
+    >
+      <div class="flex items-center gap-2">
+        <input
+          id="hmacMandatory"
+          v-model="hmacMandatory"
+          type="checkbox"
+          @change="handleHmacFlag"
+        />
+        <label for="hmacMandatory">
+          {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
+        </label>
+      </div>
+    </SettingsSection>
+  </div>
+  <div v-else-if="isAnEmailChannel">
+    <div class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
+      >
+        <woot-code :script="inbox.forward_to_email" />
+      </SettingsSection>
+    </div>
+    <ImapSettings :inbox="inbox" />
+    <SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
+  </div>
+  <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
+    <div v-if="inbox.provider_config" class="mx-8">
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')"
+      >
+        <woot-code :script="inbox.provider_config.webhook_verify_token" />
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')"
+      >
+        <woot-code :script="inbox.provider_config.api_key" />
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model.trim="whatsAppInboxAPIKey"
+            type="text"
+            class="flex-1 mr-2"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
+              )
+            "
+          />
+          <woot-button
+            :disabled="v$.whatsAppInboxAPIKey.$invalid"
+            @click="updateWhatsAppInboxAPIKey"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </woot-button>
+        </div>
+      </SettingsSection>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .whatsapp-settings--content {
   ::v-deep input {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue
deleted file mode 100644
index 22ba37105..000000000
--- 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 151afd049..000000000
--- 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 d3074f62d..000000000
--- 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 abdd99344..4adc4f7dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
@@ -1,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 35a990724..0d12b7e91 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 5c94793c0..3c67dfdcf 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 5ab8cd74b..6a79ca325 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 32e239fea..6c6f5f5be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -1,14 +1,75 @@
+<script>
+import { mapGetters } from 'vuex';
+import { frontendURL } from '../../../../helper/URLHelper';
+import { useAlert } from 'dashboard/composables';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  props: {
+    integrationId: {
+      type: [String, Number],
+      required: true,
+    },
+    integrationName: { type: String, default: '' },
+    integrationDescription: { type: String, default: '' },
+    integrationEnabled: { type: Boolean, default: false },
+    integrationAction: { type: String, default: '' },
+    actionButtonText: { type: String, default: '' },
+    deleteConfirmationText: { type: Object, default: () => ({}) },
+  },
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  methods: {
+    frontendURL,
+    openDeletePopup() {
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.closeDeletePopup();
+      this.deleteIntegration(this.deleteIntegration);
+      this.$router.push({ name: 'settings_integrations' });
+    },
+    async deleteIntegration() {
+      try {
+        await this.$store.dispatch(
+          'integrations/deleteIntegration',
+          this.integrationId
+        );
+        useAlert(this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div
-    class="flex flex-col md:flex-row justify-between items-start md:items-center"
+    class="flex flex-col items-start justify-between md:flex-row md:items-center"
   >
-    <div class="flex items-center justify-start m-0 mx-4 flex-1">
+    <div class="flex items-center justify-start flex-1 m-0 mx-4">
       <img
-        :src="'/dashboard/images/integrations/' + 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 21b13ca58..000000000
--- 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 96819bcab..ad2daa5f3 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 000000000..7162596a2
--- /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 aea851ee7..38deab634 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 454f03dac..afaf059a6 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 d9f5e5d9e..6b86dcf82 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -1,34 +1,4 @@
-<template>
-  <div class="flex-shrink flex-grow overflow-auto p-4">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div>
-          <div
-            v-if="integrationLoaded"
-            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
-          >
-            <integration
-              :integration-id="integration.id"
-              :integration-logo="integration.logo"
-              :integration-name="integration.name"
-              :integration-description="integration.description"
-              :integration-enabled="integration.enabled"
-              :integration-action="integrationAction()"
-            />
-          </div>
-          <div
-            v-if="integration.enabled"
-            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
-          >
-            <IntegrationHelpText />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
 <script>
-import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration.vue';
 import IntegrationHelpText from './IntegrationHelpText.vue';
@@ -45,7 +15,6 @@ export default {
       type: [String, Number],
       required: true,
     },
-    code: { type: String, default: '' },
   },
   data() {
     return {
@@ -58,11 +27,6 @@ export default {
         this.integrationId
       );
     },
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-    }),
   },
   mounted() {
     this.fetchIntegrations();
@@ -81,3 +45,33 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-grow flex-shrink p-4 overflow-auto">
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <div>
+          <div
+            v-if="integrationLoaded"
+            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+          >
+            <Integration
+              :integration-id="integration.id"
+              :integration-logo="integration.logo"
+              :integration-name="integration.name"
+              :integration-description="integration.description"
+              :integration-enabled="integration.enabled"
+              :integration-action="integrationAction()"
+            />
+          </div>
+          <div
+            v-if="integration.enabled"
+            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+          >
+            <IntegrationHelpText />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/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 3f8dfccea..45ea83168 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 24dc2993a..ac090a2d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -1,39 +1,3 @@
-<template>
-  <div
-    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto"
-  >
-    <div
-      class="bg-white dark:bg-slate-800 border-b border-solid border-slate-75 dark:border-slate-700/50 rounded-sm p-4"
-    >
-      <integration
-        :integration-id="integration.id"
-        :integration-logo="integration.logo"
-        :integration-name="integration.name"
-        :integration-description="integration.description"
-        :integration-enabled="integration.enabled"
-        :integration-action="integrationAction"
-        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
-        :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
-        }"
-      />
-    </div>
-    <div v-if="areHooksAvailable" class="p-6 flex-1">
-      <select-channel-warning
-        v-if="!isIntegrationHookEnabled"
-        :has-connected-a-channel="hasConnectedAChannel"
-      />
-      <slack-integration-help-text
-        :selected-channel-name="selectedChannelName"
-      />
-    </div>
-  </div>
-  <div v-else class="flex flex-1 items-center justify-center">
-    <spinner size="" color-scheme="primary" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -83,9 +47,6 @@ export default {
       return this.$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');
     },
     ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
       uiFlags: 'integrations/getUIFlags',
     }),
 
@@ -113,3 +74,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
+    class="flex flex-col flex-1 overflow-auto"
+  >
+    <div
+      class="p-4 bg-white border-b border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+    >
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
+        :delete-confirmation-text="{
+          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
+          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
+        }"
+      />
+    </div>
+    <div v-if="areHooksAvailable" class="flex-1 p-6">
+      <SelectChannelWarning
+        v-if="!isIntegrationHookEnabled"
+        :has-connected-a-channel="hasConnectedAChannel"
+      />
+      <SlackIntegrationHelpText :selected-channel-name="selectedChannelName" />
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center flex-1">
+    <Spinner size="" color-scheme="primary" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index 6c698898d..00ad15bbf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,84 +1,11 @@
-<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"
-  >
-    <div class="flex">
-      <div class="flex-shrink-0 mt-0.5">
-        <fluent-icon
-          icon="alert"
-          class="text-yellow-500 dark:text-yellow-400"
-          size="24"
-        />
-      </div>
-      <div class="ml-3">
-        <p
-          class="text-base font-semibold text-yellow-900 dark:text-yellow-500 mb-1"
-        >
-          {{
-            $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
-          }}
-        </p>
-        <div class="text-sm text-yellow-800 dark:text-yellow-600 mt-2">
-          <p
-            v-dompurify-html="
-              formatMessage(
-                useInstallationName(
-                  errorDescription,
-                  globalConfig.installationName
-                ),
-                false
-              )
-            "
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!hasConnectedAChannel" class="ml-8 mt-2">
-      <woot-submit-button
-        v-if="!availableChannels.length"
-        button-class="smooth small warning"
-        :loading="uiFlags.isFetchingSlackChannels"
-        :button-text="
-          $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
-        "
-        spinner-class="warning"
-        @click="fetchChannels"
-      />
-      <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"
-        >
-          <option value="">
-            {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}
-          </option>
-          <option
-            v-for="channel in availableChannels"
-            :key="channel.id"
-            :value="channel.id"
-          >
-            #{{ channel.name }}
-          </option>
-        </select>
-        <woot-submit-button
-          button-class="smooth small success"
-          :button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.UPDATE')"
-          spinner-class="success"
-          :loading="uiFlags.isUpdatingSlack"
-          @click="updateIntegration"
-        />
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
-  mixins: [alertMixin, globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin, messageFormatterMixin],
   props: {
     hasConnectedAChannel: {
       type: Boolean,
@@ -116,13 +43,85 @@ export default {
         await this.$store.dispatch('integrations/updateSlack', {
           referenceId: this.selectedChannelId,
         });
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
+        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
       } catch (error) {
-        this.showAlert(
-          error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR'
-        );
+        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
       }
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
+  >
+    <div class="flex">
+      <div class="flex-shrink-0 mt-0.5">
+        <fluent-icon
+          icon="alert"
+          class="text-yellow-500 dark:text-yellow-400"
+          size="24"
+        />
+      </div>
+      <div class="ml-3">
+        <p
+          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="mt-2 text-sm text-yellow-800 dark:text-yellow-600">
+          <p
+            v-dompurify-html="
+              formatMessage(
+                useInstallationName(
+                  errorDescription,
+                  globalConfig.installationName
+                ),
+                false
+              )
+            "
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!hasConnectedAChannel" class="mt-2 ml-8">
+      <woot-submit-button
+        v-if="!availableChannels.length"
+        button-class="smooth small warning"
+        :loading="uiFlags.isFetchingSlackChannels"
+        :button-text="
+          $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
+        "
+        spinner-class="warning"
+        @click="fetchChannels"
+      />
+      <div v-else class="inline-flex">
+        <select
+          v-model="selectedChannelId"
+          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') }}
+          </option>
+          <option
+            v-for="channel in availableChannels"
+            :key="channel.id"
+            :value="channel.id"
+          >
+            #{{ channel.name }}
+          </option>
+        </select>
+        <woot-submit-button
+          button-class="smooth small success"
+          :button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.UPDATE')"
+          spinner-class="success"
+          :loading="uiFlags.isUpdatingSlack"
+          @click="updateIntegration"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
index 9a0476f13..e1db3c30b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -1,3 +1,16 @@
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+export default {
+  mixins: [messageFormatterMixin],
+  props: {
+    selectedChannelName: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex-1 w-full p-6 bg-white rounded-md border border-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
@@ -21,15 +34,3 @@
     </div>
   </div>
 </template>
-<script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-export default {
-  mixins: [messageFormatterMixin],
-  props: {
-    selectedChannelName: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
index 739ec467c..c9b315443 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
@@ -1,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 d1ee7ba9b..e9ec855dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -1,99 +1,8 @@
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
-        >
-          <thead>
-            <th
-              v-for="thHeader in $t(
-                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
-              )"
-              :key="thHeader"
-              class="last:text-right"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <webhook-row
-              v-for="(webHookItem, index) in records"
-              :key="webHookItem.id"
-              :index="index"
-              :webhook="webHookItem"
-              @edit="openEditPopup"
-              @delete="openDeletePopup"
-            />
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <new-webhook v-if="showAddPopup" :on-close="hideAddPopup" />
-    </woot-modal>
-
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-webhook
-        v-if="showEditPopup"
-        :id="selectedWebHook.id"
-        :value="selectedWebHook"
-        :on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
-      :message="
-        $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
-          webhookURL: selectedWebHook.url,
-        })
-      "
-      :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
-      :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 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';
 
@@ -103,7 +12,7 @@ export default {
     EditWebhook,
     WebhookRow,
   },
-  mixins: [alertMixin, globalConfigMixin],
+  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -152,11 +61,11 @@ export default {
     async deleteWebhook(id) {
       try {
         await this.$store.dispatch('webhooks/delete', id);
-        this.showAlert(
+        useAlert(
           this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.SUCCESS_MESSAGE')
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
         );
       }
@@ -164,3 +73,95 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
+    </woot-button>
+
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!uiFlags.fetchingList && !records.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.fetchingList"
+          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
+        />
+
+        <table
+          v-if="!uiFlags.fetchingList && records.length"
+          class="woot-table"
+        >
+          <thead>
+            <th
+              v-for="thHeader in $t(
+                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
+              )"
+              :key="thHeader"
+              class="last:text-right"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <WebhookRow
+              v-for="(webHookItem, index) in records"
+              :key="webHookItem.id"
+              :index="index"
+              :webhook="webHookItem"
+              @edit="openEditPopup"
+              @delete="openDeletePopup"
+            />
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
+    </woot-modal>
+
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <EditWebhook
+        v-if="showEditPopup"
+        :id="selectedWebHook.id"
+        :value="selectedWebHook"
+        :on-close="hideEditPopup"
+      />
+    </woot-modal>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
+      :message="
+        $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
+          webhookURL: selectedWebHook.url,
+        })
+      "
+      :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
+      :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
index 6fd7ec81b..43b1d2843 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,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 a917ddec5..d399adbdd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -1,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 b27cb6162..20e6d6c1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -1,36 +1,3 @@
-<template>
-  <tr class="space-x-2">
-    <td class="max-w-2xl">
-      <div class="font-medium break-words text-slate-700 dark:text-slate-100">
-        {{ webhook.url }}
-      </div>
-      <span class="text-xs text-slate-500 dark:text-slate-400">
-        <span class="font-medium">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
-        </span>
-        <show-more :text="subscribedEvents" :limit="60" />
-      </span>
-    </td>
-    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        icon="edit"
-        @click="$emit('edit', webhook)"
-      />
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        @click="$emit('delete', webhook, index)"
-      />
-    </td>
-  </tr>
-</template>
 <script>
 import webhookMixin from './webhookMixin';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
@@ -56,3 +23,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <tr class="space-x-2">
+    <td class="max-w-2xl">
+      <div class="font-medium break-words text-slate-700 dark:text-slate-100">
+        {{ webhook.url }}
+      </div>
+      <span class="text-xs text-slate-500 dark:text-slate-400">
+        <span class="font-medium">
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
+        </span>
+        <ShowMore :text="subscribedEvents" :limit="60" />
+      </span>
+    </td>
+    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
+      <woot-button
+        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        icon="edit"
+        @click="$emit('edit', webhook)"
+      />
+      <woot-button
+        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        @click="$emit('delete', webhook, index)"
+      />
+    </td>
+  </tr>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/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 bdebc0329..c4d319173 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 191b3149c..191e00b3a 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 958b05a12..71605db0c 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 dad8af733..0fdaf16e8 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 088c565d0..9f5edc2dd 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 8e1628bdb..000000000
--- 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 47c8c21df..9968ee749 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 9f11646a6..000000000
--- 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 0a2373a06..32e3cfadb 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 f32bb6f17..5217f0199 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,71 +1,18 @@
-<template>
-  <div class="flex-1 overflow-auto">
-    <router-link
-      :to="addAccountScoping('settings/macros/new')"
-      class="button success button--fixed-top button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ $t('MACROS.HEADER_BTN_TXT') }}
-      </span>
-    </router-link>
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full lg:w-3/5">
-        <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
-          <p class="flex h-full items-center flex-col justify-center">
-            {{ $t('MACROS.LIST.404') }}
-          </p>
-        </div>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('MACROS.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <macros-table-row
-              v-for="(macro, index) in records"
-              :key="index"
-              :macro="macro"
-              @delete="openDeletePopup(macro, index)"
-            />
-          </tbody>
-        </table>
-      </div>
-      <div class="hidden lg:block w-1/3">
-        <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
-      :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import accountMixin from 'dashboard/mixins/account.js';
+import { useAlert } from 'dashboard/composables';
+import { useAccount } from 'dashboard/composables/useAccount';
 import MacrosTableRow from './MacrosTableRow.vue';
 export default {
   components: {
     MacrosTableRow,
   },
-  mixins: [alertMixin, accountMixin],
+  setup() {
+    const { accountScopedUrl } = useAccount();
+    return {
+      accountScopedUrl,
+    };
+  },
   data() {
     return {
       showDeleteConfirmationPopup: false,
@@ -101,12 +48,70 @@ export default {
     async deleteMacro(id) {
       try {
         await this.$store.dispatch('macros/delete', id);
-        this.showAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
+        useAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
         this.loading[this.selectedResponse.id] = false;
       } catch (error) {
-        this.showAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
+        useAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <router-link
+      :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" />
+      <span class="button__content">
+        {{ $t('MACROS.HEADER_BTN_TXT') }}
+      </span>
+    </router-link>
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full lg:w-3/5">
+        <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
+          <p class="flex flex-col items-center justify-center h-full">
+            {{ $t('MACROS.LIST.404') }}
+          </p>
+        </div>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('MACROS.LOADING')"
+        />
+        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
+          <thead>
+            <th
+              v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <MacrosTableRow
+              v-for="(macro, index) in records"
+              :key="index"
+              :macro="macro"
+              @delete="openDeletePopup(macro, index)"
+            />
+          </tbody>
+        </table>
+      </div>
+      <div class="hidden w-1/3 lg:block">
+        <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
+      :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 7c9f476e4..f29d822ff 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 @@
+<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 { useAlert } from 'dashboard/composables';
+import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
+import { useMacros } from 'dashboard/composables/useMacros';
+
+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 {
+      ...action,
+      action_params: actionParams,
+    };
+  });
+  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: [],
+      },
+    ],
+    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="h-full overflow-auto flex-1 flex flex-col">
+  <div class="flex flex-col flex-1 h-full overflow-auto">
     <woot-loading-state
       v-if="uiFlags.isFetchingItem"
-      :message="$t('MACROS.EDITOR.LOADING')"
+      :message="t('MACROS.EDITOR.LOADING')"
     />
-    <macro-form
+    <MacroForm
       v-if="macro && !uiFlags.isFetchingItem"
-      :macro-data.sync="macro"
+      :macro-data="macro"
+      @update:macro-data="macro = $event"
       @submit="saveMacro"
     />
   </div>
 </template>
-
-<script>
-import MacroForm from './MacroForm.vue';
-import { MACRO_ACTION_TYPES } from './constants';
-import { mapGetters } from 'vuex';
-import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
-import alertMixin from 'shared/mixins/alertMixin';
-import macrosMixin from 'dashboard/mixins/macrosMixin';
-
-export default {
-  components: {
-    MacroForm,
-  },
-  mixins: [alertMixin, macrosMixin],
-  provide() {
-    return {
-      macroActionTypes: this.macroActionTypes,
-    };
-  },
-  data() {
-    return {
-      macro: null,
-      mode: 'CREATE',
-      macroActionTypes: MACRO_ACTION_TYPES,
-    };
-  },
-  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();
-        }
-      },
-      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'));
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index 3cebed550..d5dd35d74 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 614257e58..649f3efbb 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 b67fb021e..c400ba628 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -1,75 +1,18 @@
-<template>
-  <div class="macros__nodes">
-    <div class="macro__node">
-      <div>
-        <woot-label
-          :title="$t('MACROS.EDITOR.START_FLOW')"
-          color-scheme="primary"
-        />
-      </div>
-    </div>
-    <draggable
-      :list="actionData"
-      animation="200"
-      ghost-class="ghost"
-      tag="div"
-      class="macros__nodes-draggable"
-      handle=".macros__node-drag-handle"
-    >
-      <div v-for="(action, i) in actionData" :key="i" class="macro__node">
-        <macro-node
-          v-model="actionData[i]"
-          class="macros__node-action"
-          type="add"
-          :index="i"
-          :file-name="
-            fileName(
-              actionData[i].action_params[0],
-              actionData[i].action_name,
-              files
-            )
-          "
-          :single-node="actionData.length === 1"
-          @resetAction="$emit('resetAction', i)"
-          @deleteNode="$emit('deleteNode', i)"
-        />
-      </div>
-    </draggable>
-    <div class="macro__node">
-      <div>
-        <woot-button
-          :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
-          class="macros__action-button"
-          color-scheme="success"
-          variant="smooth"
-          icon="add-circle"
-          @click="$emit('addNewNode')"
-        >
-          {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
-        </woot-button>
-      </div>
-    </div>
-    <div class="macro__node">
-      <div>
-        <woot-label
-          :title="$t('MACROS.EDITOR.END_FLOW')"
-          color-scheme="primary"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
 import { getFileName } from './macroHelper';
+
 export default {
   components: {
     Draggable,
     MacroNode,
   },
   props: {
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
     value: {
       type: Array,
       default: () => [],
@@ -97,6 +40,69 @@ export default {
 };
 </script>
 
+<template>
+  <div class="macros__nodes">
+    <div class="macro__node">
+      <div>
+        <woot-label
+          :title="$t('MACROS.EDITOR.START_FLOW')"
+          color-scheme="primary"
+        />
+      </div>
+    </div>
+    <Draggable
+      :list="actionData"
+      animation="200"
+      ghost-class="ghost"
+      tag="div"
+      class="macros__nodes-draggable"
+      handle=".macros__node-drag-handle"
+    >
+      <div v-for="(action, i) in actionData" :key="i" class="macro__node">
+        <MacroNode
+          v-model="actionData[i]"
+          class="macros__node-action"
+          type="add"
+          :index="i"
+          :error-key="errors[`action_${i}`]"
+          :file-name="
+            fileName(
+              actionData[i].action_params[0],
+              actionData[i].action_name,
+              files
+            )
+          "
+          :single-node="actionData.length === 1"
+          @resetAction="$emit('resetAction', i)"
+          @deleteNode="$emit('deleteNode', i)"
+        />
+      </div>
+    </Draggable>
+    <div class="macro__node">
+      <div>
+        <woot-button
+          :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
+          class="macros__action-button"
+          color-scheme="success"
+          variant="smooth"
+          icon="add-circle"
+          @click="$emit('addNewNode')"
+        >
+          {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
+        </woot-button>
+      </div>
+    </div>
+    <div class="macro__node">
+      <div>
+        <woot-label
+          :title="$t('MACROS.EDITOR.END_FLOW')"
+          color-scheme="primary"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 .macros__nodes {
   max-width: 800px;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index 078c4b369..01b3ede4f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -1,3 +1,32 @@
+<script>
+export default {
+  inject: ['v$'],
+  props: {
+    macroName: {
+      type: String,
+      default: '',
+    },
+    macroVisibility: {
+      type: String,
+      default: 'global',
+    },
+  },
+  methods: {
+    isActive(key) {
+      return this.macroVisibility === key
+        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
+        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
+    },
+    onUpdateName(value) {
+      this.$emit('update:name', value);
+    },
+    onUpdateVisibility(value) {
+      this.$emit('update:visibility', value);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
@@ -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 c70fbddc1..6eee853ea 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 93b6fcb23..683c848e9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -1,3 +1,27 @@
+<script setup>
+import { ref, computed } from 'vue';
+import FormButton from 'v3/components/Form/Button.vue';
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['onCopy']);
+const inputType = ref('password');
+const toggleMasked = () => {
+  inputType.value = inputType.value === 'password' ? 'text' : 'password';
+};
+
+const maskIcon = computed(() => {
+  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
+});
+
+const onClick = () => {
+  emit('onCopy', props.value);
+};
+</script>
+
 <template>
   <div class="flex flex-row justify-between gap-4">
     <woot-input
@@ -21,7 +45,7 @@
         </button>
       </template>
     </woot-input>
-    <form-button
+    <FormButton
       type="submit"
       size="large"
       icon="text-copy"
@@ -30,29 +54,6 @@
       @click="onClick"
     >
       {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY') }}
-    </form-button>
+    </FormButton>
   </div>
 </template>
-<script setup>
-import { ref, computed } from 'vue';
-import FormButton from 'v3/components/Form/Button.vue';
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['on-copy']);
-const inputType = ref('password');
-const toggleMasked = () => {
-  inputType.value = inputType.value === 'password' ? 'text' : 'password';
-};
-
-const maskIcon = computed(() => {
-  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
-});
-
-const onClick = () => {
-  emit('on-copy', props.value);
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index ead4b77f2..18ae1c07e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -1,3 +1,21 @@
+<script setup>
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['change']);
+const onChange = (id, value) => {
+  emit('change', id, value);
+};
+</script>
+
 <template>
   <div>
     <label
@@ -23,20 +41,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import CheckBox from 'v3/components/Form/CheckBox.vue';
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  items: {
-    type: Array,
-    required: true,
-  },
-});
-const emit = defineEmits(['change']);
-const onChange = (id, value) => {
-  emit('change', id, value);
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index 41d25b522..ddc6545f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -1,3 +1,30 @@
+<script setup>
+import { computed } from 'vue';
+import { ALERT_EVENTS } from './constants';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: 'all',
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const alertEvents = ALERT_EVENTS;
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
+</script>
+
 <template>
   <div>
     <label
@@ -37,30 +64,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-import { ALERT_EVENTS } from './constants';
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  value: {
-    type: String,
-    default: 'all',
-  },
-});
-
-const alertEvents = ALERT_EVENTS;
-
-const emit = defineEmits(['update']);
-
-const selectedValue = computed({
-  get: () => props.value,
-  set: value => {
-    emit('update', value);
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 3246e12af..232a7a74a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -1,23 +1,3 @@
-<template>
-  <form-select
-    v-model="selectedValue"
-    name="alertTone"
-    spacing="compact"
-    :value="selectedValue"
-    :options="alertTones"
-    :label="label"
-    class="max-w-xl"
-  >
-    <option
-      v-for="tone in alertTones"
-      :key="tone.label"
-      :value="tone.value"
-      :selected="tone.value === selectedValue"
-    >
-      {{ tone.label }}
-    </option>
-  </form-select>
-</template>
 <script setup>
 import { computed } from 'vue';
 import FormSelect from 'v3/components/Form/Select.vue';
@@ -34,6 +14,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['change']);
+
 const alertTones = computed(() => [
   {
     value: 'ding',
@@ -45,8 +27,6 @@ const alertTones = computed(() => [
   },
 ]);
 
-const emit = defineEmits(['change']);
-
 const selectedValue = computed({
   get: () => props.value,
   set: value => {
@@ -54,3 +34,24 @@ const selectedValue = computed({
   },
 });
 </script>
+
+<template>
+  <FormSelect
+    v-model="selectedValue"
+    name="alertTone"
+    spacing="compact"
+    :value="selectedValue"
+    :options="alertTones"
+    :label="label"
+    class="max-w-xl"
+  >
+    <option
+      v-for="tone in alertTones"
+      :key="tone.label"
+      :value="tone.value"
+      :selected="tone.value === selectedValue"
+    >
+      {{ tone.label }}
+    </option>
+  </FormSelect>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index 84f369f5a..f09432f83 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 0c2fa9e78..b6c93a126 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 35cbbeb7b..540b405d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
@@ -1,3 +1,28 @@
+<script setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  lightImage: {
+    type: String,
+    default: '',
+  },
+  darkImage: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div
     class="flex flex-col gap-4 w-full h-fit sm:max-h-[220px] p-4 sm:max-w-[350px] rounded-md border border-solid border-ash-200"
@@ -37,28 +62,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  lightImage: {
-    type: String,
-    default: '',
-  },
-  darkImage: {
-    type: String,
-    default: '',
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 45ec109aa..1f37a1355 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 a86b4fa5c..2d149755c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -1,25 +1,3 @@
-<template>
-  <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
-    <woot-message-editor
-      id="message-signature-input"
-      v-model="signature"
-      class="message-editor h-[10rem] !px-3"
-      :is-format-mode="true"
-      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
-      :enabled-menu-options="customEditorMenuList"
-      :enable-suggestions="false"
-      :show-image-resize-toolbar="true"
-    />
-    <form-button
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </form-button>
-  </form>
-</template>
 <script setup>
 import { ref, watch } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
@@ -33,10 +11,9 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['updateSignature']);
 const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
 const signature = ref(props.messageSignature);
-const emit = defineEmits(['update-signature']);
-
 watch(
   () => props.messageSignature ?? '',
   newValue => {
@@ -45,6 +22,29 @@ watch(
 );
 
 const updateSignature = () => {
-  emit('update-signature', signature.value);
+  emit('updateSignature', signature.value);
 };
 </script>
+
+<template>
+  <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
+    <WootMessageEditor
+      id="message-signature-input"
+      v-model="signature"
+      class="message-editor h-[10rem] !px-3"
+      is-format-mode
+      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuList"
+      :enable-suggestions="false"
+      show-image-resize-toolbar
+    />
+    <FormButton
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
+    </FormButton>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
index feb180014..4cd512055 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
@@ -1,18 +1,3 @@
-<template>
-  <div
-    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
-    :class="`col-span-${span}`"
-  >
-    <input
-      v-model="localFlags"
-      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
-      type="checkbox"
-      :value="localValue"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
 <script setup>
 import { ref, watch } from 'vue';
 
@@ -51,3 +36,18 @@ const handleInput = e => {
   emit('input', props.type, e);
 };
 </script>
+
+<template>
+  <div
+    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+    :class="`col-span-${span}`"
+  >
+    <input
+      v-model="localFlags"
+      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      type="checkbox"
+      :value="localValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index 986ff9aca..8e49a4366 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -1,3 +1,137 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+import {
+  hasPushPermissions,
+  requestPushPermissions,
+  verifyServiceWorkerExistence,
+} from 'dashboard/helper/pushHelper.js';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import FormSwitch from 'v3/components/Form/Switch.vue';
+import { NOTIFICATION_TYPES } from './constants';
+
+export default {
+  components: {
+    TableHeaderCell,
+    FormSwitch,
+    CheckBox,
+  },
+  data() {
+    return {
+      selectedEmailFlags: [],
+      selectedPushFlags: [],
+      enableAudioAlerts: false,
+      hasEnabledPushPermissions: false,
+      notificationTypes: NOTIFICATION_TYPES,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
+      pushFlags: 'userNotificationSettings/getSelectedPushFlags',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasPushAPISupport() {
+      return !!('Notification' in window);
+    },
+    isSLAEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
+    },
+    filteredNotificationTypes() {
+      return this.notificationTypes.filter(notification =>
+        this.isSLAEnabled
+          ? true
+          : ![
+              'sla_missed_first_response',
+              'sla_missed_next_response',
+              'sla_missed_resolution',
+            ].includes(notification.value)
+      );
+    },
+  },
+  watch: {
+    emailFlags(value) {
+      this.selectedEmailFlags = value;
+    },
+    pushFlags(value) {
+      this.selectedPushFlags = value;
+    },
+  },
+  mounted() {
+    if (hasPushPermissions()) {
+      this.getPushSubscription();
+    }
+    this.$store.dispatch('userNotificationSettings/get');
+  },
+  methods: {
+    checkFlagStatus(type, flagType) {
+      const selectedFlags =
+        type === 'email' ? this.selectedEmailFlags : this.selectedPushFlags;
+      return selectedFlags.includes(`${type}_${flagType}`);
+    },
+    onRegistrationSuccess() {
+      this.hasEnabledPushPermissions = true;
+    },
+    onRequestPermissions() {
+      requestPushPermissions({
+        onSuccess: this.onRegistrationSuccess,
+      });
+    },
+    getPushSubscription() {
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager
+          .getSubscription()
+          .then(subscription => {
+            if (!subscription) {
+              this.hasEnabledPushPermissions = false;
+            } else {
+              this.hasEnabledPushPermissions = true;
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.log(error))
+      );
+    },
+    async updateNotificationSettings() {
+      try {
+        this.$store.dispatch('userNotificationSettings/update', {
+          selectedEmailFlags: this.selectedEmailFlags,
+          selectedPushFlags: this.selectedPushFlags,
+        });
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      } catch (error) {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
+      }
+    },
+    handleInput(type, id) {
+      if (type === 'email') {
+        this.handleEmailInput(id);
+      } else {
+        this.handlePushInput(id);
+      }
+    },
+    handleEmailInput(id) {
+      this.selectedEmailFlags = this.toggleInput(this.selectedEmailFlags, id);
+      this.updateNotificationSettings();
+    },
+    handlePushInput(id) {
+      this.selectedPushFlags = this.toggleInput(this.selectedPushFlags, id);
+      this.updateNotificationSettings();
+    },
+    toggleInput(selected, current) {
+      if (selected.includes(current)) {
+        const newSelectedFlags = selected.filter(flag => flag !== current);
+        return newSelectedFlags;
+      }
+      return [...selected, current];
+    },
+  },
+};
+</script>
+
 <template>
   <div id="profile-settings-notifications" class="flex flex-col gap-6">
     <!-- Layout for desktop devices -->
@@ -5,23 +139,23 @@
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <table-header-cell
+        <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>
-        </table-header-cell>
-        <table-header-cell
+        </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>
-        </table-header-cell>
-        <table-header-cell
+        </TableHeaderCell>
+        <TableHeaderCell
           :span="3"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
         >
@@ -32,7 +166,7 @@
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
           </div>
-        </table-header-cell>
+        </TableHeaderCell>
       </div>
       <div
         v-for="(notification, index) in filteredNotificationTypes"
@@ -122,173 +256,10 @@
           {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
         </span>
       </div>
-      <form-switch
+      <FormSwitch
         :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 TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
-import CheckBox from 'v3/components/Form/CheckBox.vue';
-import {
-  hasPushPermissions,
-  requestPushPermissions,
-  verifyServiceWorkerExistence,
-} from 'dashboard/helper/pushHelper.js';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import FormSwitch from 'v3/components/Form/Switch.vue';
-import { NOTIFICATION_TYPES } from './constants';
-
-export default {
-  components: {
-    TableHeaderCell,
-    FormSwitch,
-    CheckBox,
-  },
-  mixins: [alertMixin, configMixin, uiSettingsMixin],
-  data() {
-    return {
-      selectedEmailFlags: [],
-      selectedPushFlags: [],
-      enableAudioAlerts: false,
-      hasEnabledPushPermissions: false,
-      notificationTypes: NOTIFICATION_TYPES,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
-      pushFlags: 'userNotificationSettings/getSelectedPushFlags',
-      uiSettings: 'getUISettings',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    hasPushAPISupport() {
-      return !!('Notification' in window);
-    },
-    isSLAEnabled() {
-      return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
-    },
-    filteredNotificationTypes() {
-      return this.notificationTypes.filter(notification =>
-        this.isSLAEnabled
-          ? true
-          : ![
-              'sla_missed_first_response',
-              'sla_missed_next_response',
-              'sla_missed_resolution',
-            ].includes(notification.value)
-      );
-    },
-  },
-  watch: {
-    emailFlags(value) {
-      this.selectedEmailFlags = value;
-    },
-    pushFlags(value) {
-      this.selectedPushFlags = value;
-    },
-  },
-  mounted() {
-    if (hasPushPermissions()) {
-      this.getPushSubscription();
-    }
-    this.$store.dispatch('userNotificationSettings/get');
-  },
-  methods: {
-    checkFlagStatus(type, flagType) {
-      const selectedFlags =
-        type === 'email' ? this.selectedEmailFlags : this.selectedPushFlags;
-      return selectedFlags.includes(`${type}_${flagType}`);
-    },
-    onRegistrationSuccess() {
-      this.hasEnabledPushPermissions = true;
-    },
-    onRequestPermissions() {
-      requestPushPermissions({
-        onSuccess: this.onRegistrationSuccess,
-      });
-    },
-    getPushSubscription() {
-      verifyServiceWorkerExistence(registration =>
-        registration.pushManager
-          .getSubscription()
-          .then(subscription => {
-            if (!subscription) {
-              this.hasEnabledPushPermissions = false;
-            } else {
-              this.hasEnabledPushPermissions = true;
-            }
-          })
-          // eslint-disable-next-line no-console
-          .catch(error => console.log(error))
-      );
-    },
-    async updateNotificationSettings() {
-      try {
-        this.$store.dispatch('userNotificationSettings/update', {
-          selectedEmailFlags: this.selectedEmailFlags,
-          selectedPushFlags: this.selectedPushFlags,
-        });
-        this.showAlert(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,
-        });
-      }
-      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') {
-        this.handleEmailInput(id);
-      } else {
-        this.handlePushInput(id);
-      }
-    },
-    handleEmailInput(id) {
-      this.selectedEmailFlags = this.toggleInput(this.selectedEmailFlags, id);
-      this.updateNotificationSettings();
-    },
-    handlePushInput(id) {
-      this.selectedPushFlags = this.toggleInput(this.selectedPushFlags, id);
-      this.updateNotificationSettings();
-    },
-    toggleInput(selected, current) {
-      if (selected.includes(current)) {
-        const newSelectedFlags = selected.filter(flag => flag !== current);
-        return newSelectedFlags;
-      }
-      return [...selected, current];
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index 1a0fb2eae..4b7580d3e 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 d4ab08bc1..87ac25efa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <span class="text-sm font-medium text-ash-900">
-      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
-    </span>
-    <profile-avatar
-      :src="src"
-      :name="userNameWithoutEmoji"
-      @change="updateProfilePicture"
-      @delete="deleteProfilePicture"
-    />
-  </div>
-</template>
 <script setup>
 import { computed } from 'vue';
 import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
@@ -26,15 +13,29 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['change', 'delete']);
+const emit = defineEmits(['change', 'delete']);
 
 const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
 
 const updateProfilePicture = e => {
-  emits('change', e);
+  emit('change', e);
 };
 
 const deleteProfilePicture = () => {
-  emits('delete');
+  emit('delete');
 };
 </script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <span class="text-sm font-medium text-ash-900">
+      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
+    </span>
+    <ProfileAvatar
+      :src="src"
+      :name="userNameWithoutEmoji"
+      @change="updateProfilePicture"
+      @delete="deleteProfilePicture"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
index f0931afdc..90c725952 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
@@ -1,3 +1,12 @@
+<script setup>
+defineProps({
+  keepAlive: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
 <template>
   <div
     class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-white dark:bg-slate-900"
@@ -8,12 +17,3 @@
     <router-view v-else />
   </div>
 </template>
-
-<script setup>
-defineProps({
-  keepAlive: {
-    type: Boolean,
-    default: true,
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 68911721b..7a7374994 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="agent-reports"
-    type="agent"
-    getter-key="agents/getAgents"
-    action-key="agents/get"
-    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="agent-reports"
+    type="agent"
+    getter-key="agents/getAgents"
+    action-key="agents/get"
+    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index a75051aaf..492775542 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -1,22 +1,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 e16da9182..df2ab7d7a 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 f055a9a4f..96d573829 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="inbox-reports"
-    type="inbox"
-    getter-key="inboxes/getInboxes"
-    action-key="inboxes/get"
-    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="inbox-reports"
+    type="inbox"
+    getter-key="inboxes/getInboxes"
+    action-key="inboxes/get"
+    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 528053c57..1f96b161f 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 77a010846..d3792bd79 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="label-reports"
-    type="label"
-    getter-key="labels/getLabels"
-    action-key="labels/get"
-    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="label-reports"
+    type="label"
+    getter-key="labels/getLabels"
+    action-key="labels/get"
+    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index ae709db41..8f59f2229 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -1,75 +1,3 @@
-<template>
-  <div class="flex-1 overflow-auto p-4">
-    <div class="flex flex-col md:flex-row items-center">
-      <div
-        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
-      >
-        <metric-card
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
-        >
-          <div
-            v-for="(metric, name, index) in conversationMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
-        <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
-          <div
-            v-for="(metric, name, index) in agentStatusMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-    </div>
-    <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
-      <metric-card :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
-        <template #control>
-          <woot-button
-            icon="arrow-download"
-            size="small"
-            variant="smooth"
-            color-scheme="secondary"
-            @click="downloadHeatmapData"
-          >
-            Download Report
-          </woot-button>
-        </template>
-        <report-heatmap
-          :heat-data="accountConversationHeatmap"
-          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
-        />
-      </metric-card>
-    </div>
-    <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
-      <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
-        <agent-table
-          :agents="agents"
-          :agent-metrics="agentConversationMetric"
-          :page-index="pageIndex"
-          :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
-        />
-      </metric-card>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import AgentTable from './components/overview/AgentTable.vue';
@@ -190,3 +118,76 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex-1 p-4 overflow-auto">
+    <div class="flex flex-col items-center md:flex-row">
+      <div
+        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+      >
+        <MetricCard
+          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+          :is-loading="uiFlags.isFetchingAccountConversationMetric"
+          :loading-message="
+            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
+          "
+        >
+          <div
+            v-for="(metric, name, index) in conversationMetrics"
+            :key="index"
+            class="flex-1 min-w-0 metric-content"
+          >
+            <h3 class="heading">
+              {{ name }}
+            </h3>
+            <p class="metric">{{ metric }}</p>
+          </div>
+        </MetricCard>
+      </div>
+      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
+        <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
+          <div
+            v-for="(metric, name, index) in agentStatusMetrics"
+            :key="index"
+            class="flex-1 min-w-0 metric-content"
+          >
+            <h3 class="heading">
+              {{ name }}
+            </h3>
+            <p class="metric">{{ metric }}</p>
+          </div>
+        </MetricCard>
+      </div>
+    </div>
+    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
+        <template #control>
+          <woot-button
+            icon="arrow-download"
+            size="small"
+            variant="smooth"
+            color-scheme="secondary"
+            @click="downloadHeatmapData"
+          >
+            {{ $t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT') }}
+          </woot-button>
+        </template>
+        <ReportHeatmap
+          :heat-data="accountConversationHeatmap"
+          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
+        />
+      </MetricCard>
+    </div>
+    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
+        <AgentTable
+          :agents="agents"
+          :agent-metrics="agentConversationMetric"
+          :page-index="pageIndex"
+          :is-loading="uiFlags.isFetchingAgentConversationMetric"
+          @pageChange="onPageNumberChange"
+        />
+      </MetricCard>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 273f814b7..f90c3730c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -1,35 +1,3 @@
-<template>
-  <div
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
-  >
-    <div
-      v-for="metric in metrics"
-      :key="metric.KEY"
-      class="p-4 rounded-md mb-3"
-    >
-      <chart-stats :metric="metric" :account-summary-key="accountSummaryKey" />
-      <div class="mt-4 h-72">
-        <woot-loading-state
-          v-if="accountReport.isFetching[metric.KEY]"
-          class="text-xs"
-          :message="$t('REPORT.LOADING_CHART')"
-        />
-        <div v-else class="h-72 flex items-center justify-center">
-          <woot-bar
-            v-if="accountReport.data[metric.KEY].length"
-            :collection="getCollection(metric)"
-            :chart-options="getChartOptions(metric)"
-            class="h-72 w-full"
-          />
-          <span v-else class="text-sm text-slate-600">
-            {{ $t('REPORT.NO_ENOUGH_DATA') }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
@@ -150,3 +118,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
+  >
+    <div
+      v-for="metric in metrics"
+      :key="metric.KEY"
+      class="p-4 rounded-md mb-3"
+    >
+      <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
+      <div class="mt-4 h-72">
+        <woot-loading-state
+          v-if="accountReport.isFetching[metric.KEY]"
+          class="text-xs"
+          :message="$t('REPORT.LOADING_CHART')"
+        />
+        <div v-else class="h-72 flex items-center justify-center">
+          <woot-bar
+            v-if="accountReport.data[metric.KEY].length"
+            :collection="getCollection(metric)"
+            :chart-options="getChartOptions(metric)"
+            class="h-72 w-full"
+          />
+          <span v-else class="text-sm text-slate-600">
+            {{ $t('REPORT.NO_ENOUGH_DATA') }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index a9958d905..c2065babf 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 d920404c1..523186b8d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,13 +1,3 @@
-<template>
-  <woot-reports
-    key="team-reports"
-    type="team"
-    getter-key="teams/getTeams"
-    action-key="teams/get"
-    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
-  />
-</template>
-
 <script>
 import WootReports from './components/WootReports.vue';
 
@@ -17,3 +7,13 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootReports
+    key="team-reports"
+    type="team"
+    getter-key="teams/getTeams"
+    action-key="teams/get"
+    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
index 46227f945..fe8e30ba8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
@@ -40,25 +40,25 @@ onMounted(fetchMetrics);
   <div
     class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
   >
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.TOOLTIP')"
       :value="conversationCount"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
       :value="messageCount"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.RESOLUTION_RATE.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.RESOLUTION_RATE.TOOLTIP')"
       :value="formatToPercent(resolutionRate)"
       class="flex-1"
     />
-    <report-metric-card
+    <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.HANDOFF_RATE.LABEL')"
       :info-text="$t('BOT_REPORTS.METRIC.HANDOFF_RATE.TOOLTIP')"
       :value="formatToPercent(handoffRate)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
index 4faf4de2b..26f68ea33 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
@@ -1,3 +1,28 @@
+<script>
+import reportMixin from 'dashboard/mixins/reportMixin';
+export default {
+  mixins: [reportMixin],
+  props: {
+    metric: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    trendColor(value, key) {
+      if (this.isAverageMetricType(key)) {
+        return value > 0
+          ? 'border-red-500 text-red-500'
+          : 'border-green-500 text-green-500';
+      }
+      return value < 0
+        ? 'border-red-500 text-red-500'
+        : 'border-green-500 text-green-500';
+    },
+  },
+};
+</script>
+
 <template>
   <div class="text-slate-900 dark:text-slate-100">
     <span class="text-sm">
@@ -25,27 +50,3 @@
     </div>
   </div>
 </template>
-<script>
-import reportMixin from 'dashboard/mixins/reportMixin';
-export default {
-  mixins: [reportMixin],
-  props: {
-    metric: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  methods: {
-    trendColor(value, key) {
-      if (this.isAverageMetricType(key)) {
-        return value > 0
-          ? 'border-red-500 text-red-500'
-          : 'border-green-500 text-green-500';
-      }
-      return value < 0
-        ? 'border-red-500 text-red-500'
-        : 'border-green-500 text-green-500';
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 77106e8d5..0f07c773c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
-  >
-    <csat-metric-card
-      :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
-      :value="responseCount"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-    <csat-metric-card
-      :disabled="ratingFilterEnabled"
-      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
-      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-    <csat-metric-card
-      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
-      :value="formatToPercent(responseRate)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-
-    <div
-      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      ref="csatHorizontalBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
-    >
-      <h3
-        class="flex items-center text-xs md:text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
-      >
-        <div class="flex justify-end flex-row-reverse">
-          <div
-            v-for="(rating, key, index) in ratingPercentage"
-            :key="rating + key + index"
-            class="ltr:pr-4 rtl:pl-4"
-          >
-            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
-            <span>{{ formatToPercent(rating) }}</span>
-          </div>
-        </div>
-      </h3>
-      <div class="mt-2">
-        <woot-horizontal-bar :collection="chartData" :height="24" />
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import CsatMetricCard from './ReportMetricCard.vue';
@@ -104,3 +55,55 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
+<template>
+  <div
+    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+  >
+    <CsatMetricCard
+      :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
+      :value="responseCount"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+    <CsatMetricCard
+      :disabled="ratingFilterEnabled"
+      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
+      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+    <CsatMetricCard
+      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
+      :value="formatToPercent(responseRate)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+
+    <div
+      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
+      ref="csatHorizontalBarChart"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
+    >
+      <h3
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-slate-800 dark:text-slate-100"
+      >
+        <div class="flex flex-row-reverse justify-end">
+          <div
+            v-for="(rating, key, index) in ratingPercentage"
+            :key="rating + key + index"
+            class="ltr:pr-4 rtl:pl-4"
+          >
+            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
+            <span>{{ formatToPercent(rating) }}</span>
+          </div>
+        </div>
+      </h3>
+      <div class="mt-2">
+        <woot-horizontal-bar :collection="chartData" :height="24" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 1e89f06ef..22c570cc0 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 6312419a0..0e7bfd4c3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -1,55 +1,3 @@
-<template>
-  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
-    <div
-      class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
-    >
-      <reports-filters-date-range @on-range-change="onDateRangeChange" />
-      <woot-date-range-picker
-        v-if="isDateRangeSelected"
-        show-range
-        class="no-margin auto-width"
-        :value="customDateRange"
-        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-        @change="onCustomDateRangeChange"
-      />
-      <reports-filters-date-group-by
-        v-if="showGroupByFilter && isGroupByPossible"
-        :valid-group-options="validGroupOptions"
-        :selected-option="selectedGroupByFilter"
-        @on-grouping-change="onGroupingChange"
-      />
-      <reports-filters-agents
-        v-if="showAgentsFilter"
-        @agents-filter-selection="handleAgentsFilterSelection"
-      />
-      <reports-filters-labels
-        v-if="showLabelsFilter"
-        @labels-filter-selection="handleLabelsFilterSelection"
-      />
-      <reports-filters-teams
-        v-if="showTeamFilter"
-        @team-filter-selection="handleTeamFilterSelection"
-      />
-      <reports-filters-inboxes
-        v-if="showInboxFilter"
-        @inbox-filter-selection="handleInboxFilterSelection"
-      />
-      <reports-filters-ratings
-        v-if="showRatingFilter"
-        @rating-filter-selection="handleRatingFilterSelection"
-      />
-    </div>
-    <div v-if="showBusinessHoursSwitch" class="flex items-center">
-      <span class="mx-2 text-sm whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
-      </span>
-    </div>
-  </div>
-</template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 import ReportsFiltersDateRange from './Filters/DateRange.vue';
@@ -75,10 +23,6 @@ export default {
     ReportsFiltersRatings,
   },
   props: {
-    filterItemsList: {
-      type: Array,
-      default: () => [],
-    },
     showGroupByFilter: {
       type: Boolean,
       default: false,
@@ -182,7 +126,7 @@ export default {
         selectedTeam,
         selectedRating,
       } = this;
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         groupBy,
@@ -231,3 +175,56 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
+    <div
+      class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
+    >
+      <ReportsFiltersDateRange @on-range-change="onDateRangeChange" />
+      <WootDateRangePicker
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+      <ReportsFiltersDateGroupBy
+        v-if="showGroupByFilter && isGroupByPossible"
+        :valid-group-options="validGroupOptions"
+        :selected-option="selectedGroupByFilter"
+        @onGroupingChange="onGroupingChange"
+      />
+      <ReportsFiltersAgents
+        v-if="showAgentsFilter"
+        @agentsFilterSelection="handleAgentsFilterSelection"
+      />
+      <ReportsFiltersLabels
+        v-if="showLabelsFilter"
+        @labelsFilterSelection="handleLabelsFilterSelection"
+      />
+      <ReportsFiltersTeams
+        v-if="showTeamFilter"
+        @teamFilterSelection="handleTeamFilterSelection"
+      />
+      <ReportsFiltersInboxes
+        v-if="showInboxFilter"
+        @inboxFilterSelection="handleInboxFilterSelection"
+      />
+      <ReportsFiltersRatings
+        v-if="showRatingFilter"
+        @ratingFilterSelection="handleRatingFilterSelection"
+      />
+    </div>
+    <div v-if="showBusinessHoursSwitch" class="flex items-center">
+      <span class="mx-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
index 4baecbb48..f671ee14c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOptions"
-      class="no-margin"
-      :options="options"
-      track-by="id"
-      label="name"
-      :multiple="true"
-      :close-on-select="false"
-      :clear-on-select="false"
-      :hide-selected="true"
-      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,8 +18,29 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('agents-filter-selection', this.selectedOptions);
+      this.$emit('agentsFilterSelection', this.selectedOptions);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOptions"
+      class="no-margin"
+      :options="options"
+      track-by="id"
+      label="name"
+      multiple
+      :close-on-select="false"
+      :clear-on-select="false"
+      hide-selected
+      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
index a360c5e8d..7dd2119af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
@@ -1,27 +1,6 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <p aria-hidden="true" class="hide">
-      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-    </p>
-    <multiselect
-      v-model="currentSelectedFilter"
-      class="no-margin"
-      track-by="id"
-      label="groupBy"
-      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-      :options="translatedOptions"
-      :allow-empty="false"
-      :show-labels="false"
-      @select="changeFilterSelection"
-    />
-  </div>
-</template>
-
 <script>
 import { GROUP_BY_OPTIONS } from '../../constants';
 
-const EVENT_NAME = 'on-grouping-change';
-
 export default {
   name: 'ReportsFiltersDateGroupBy',
   props: {
@@ -60,8 +39,27 @@ export default {
   },
   methods: {
     changeFilterSelection(selectedFilter) {
-      this.groupByOptions = this.$emit(EVENT_NAME, selectedFilter);
+      this.groupByOptions = this.$emit('onGroupingChange', selectedFilter);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <p aria-hidden="true" class="hide">
+      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+    </p>
+    <multiselect
+      v-model="currentSelectedFilter"
+      class="no-margin"
+      track-by="id"
+      label="groupBy"
+      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+      :options="translatedOptions"
+      :allow-empty="false"
+      :show-labels="false"
+      @select="changeFilterSelection"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
index b98283ced..4d1cc340f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      track-by="name"
-      label="name"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      deselect-label=""
-      :options="options"
-      :searchable="false"
-      :allow-empty="false"
-      @select="updateRange"
-    />
-  </div>
-</template>
-
 <script>
 import { DATE_RANGE_OPTIONS } from '../../constants';
 
@@ -44,3 +25,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      track-by="name"
+      label="name"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      deselect-label=""
+      :options="options"
+      :searchable="false"
+      :allow-empty="false"
+      @select="updateRange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
index 652cb06a6..1119cacd6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -33,8 +18,24 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('inbox-filter-selection', this.selectedOption);
+      this.$emit('inboxFilterSelection', this.selectedOption);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
index d32879507..a1f103306 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="title"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    >
-      <template slot="singleLabel" slot-scope="props">
-        <div class="flex items-center gap-2">
-          <div
-            :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5"
-          />
-          <span class="reports-option__desc">
-            <span class="my-0 text-slate-800 dark:text-slate-75">
-              {{ props.option.title }}
-            </span>
-          </span>
-        </div>
-      </template>
-      <template slot="option" slot-scope="props">
-        <div class="flex items-center gap-2">
-          <div
-            :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
-          />
-          <span class="reports-option__desc">
-            <span class="my-0 text-slate-800 dark:text-slate-75">
-              {{ props.option.title }}
-            </span>
-          </span>
-        </div>
-      </template>
-    </multiselect>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -60,8 +18,51 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('labels-filter-selection', this.selectedOption);
+      this.$emit('labelsFilterSelection', this.selectedOption);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="title"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    >
+      <template slot="singleLabel" slot-scope="props">
+        <div class="flex items-center gap-2">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="w-5 h-5 rounded-full"
+          />
+          <span class="reports-option__desc">
+            <span class="my-0 text-slate-800 dark:text-slate-75">
+              {{ props.option.title }}
+            </span>
+          </span>
+        </div>
+      </template>
+      <template slot="option" slot-scope="props">
+        <div class="flex items-center gap-2">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+          />
+          <span class="reports-option__desc">
+            <span class="my-0 text-slate-800 dark:text-slate-75">
+              {{ props.option.title }}
+            </span>
+          </span>
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
index 49d6689ae..dc09b0744 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :option-height="24"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      :options="options"
-      :show-labels="false"
-      track-by="value"
-      label="label"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -32,8 +16,24 @@ export default {
   },
   methods: {
     handleInput(selectedRating) {
-      this.$emit('rating-filter-selection', selectedRating);
+      this.$emit('ratingFilterSelection', selectedRating);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :option-height="24"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      :options="options"
+      :show-labels="false"
+      track-by="value"
+      label="label"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
index f834a9e71..dc1a0ced5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -33,8 +18,24 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('team-filter-selection', this.selectedOption);
+      this.$emit('teamFilterSelection', this.selectedOption);
     },
   },
 };
 </script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 623c15026..bf98c5d44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -50,14 +50,14 @@ const closeDropdown = () => emit('closeDropdown');
 </script>
 
 <template>
-  <filter-button
+  <FilterButton
     right-icon="chevron-down"
     :button-text="name"
     class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
     @click="toggleDropdown"
   >
     <template v-if="showMenu && activeFilterType === type" #dropdown>
-      <filter-list-dropdown
+      <FilterListDropdown
         v-if="options"
         v-on-clickaway="closeDropdown"
         show-clear-filter
@@ -70,5 +70,5 @@ const closeDropdown = () => emit('closeDropdown');
         @removeFilter="removeFilter"
       />
     </template>
-  </filter-button>
+  </FilterButton>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
index c35bdb061..e58d90a59 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
@@ -33,6 +33,8 @@ defineProps({
   },
 });
 
+const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
+
 const hoveredItemId = ref(null);
 
 const showSubMenu = id => {
@@ -45,7 +47,6 @@ const hideSubMenu = () => {
 
 const isHovered = id => hoveredItemId.value === id;
 
-const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
 const toggleDropdown = () => emit('toggleDropdown');
 const addFilter = item => {
   emit('addFilter', item);
@@ -58,19 +59,19 @@ const closeDropdown = () => {
 </script>
 
 <template>
-  <filter-button :button-text="name" left-icon="filter" @click="toggleDropdown">
+  <FilterButton :button-text="name" left-icon="filter" @click="toggleDropdown">
     <!-- Dropdown with search and sub-dropdown -->
     <template v-if="showMenu" #dropdown>
-      <filter-list-dropdown
+      <FilterListDropdown
         v-on-clickaway="closeDropdown"
         class="left-0 md:right-0 top-10"
       >
         <template #listItem>
-          <filter-dropdown-empty-state
+          <FilterDropdownEmptyState
             v-if="!menuOption.length"
             :message="emptyStateMessage"
           />
-          <filter-list-item-button
+          <FilterListItemButton
             v-for="item in menuOption"
             :key="item.id"
             :button-text="item.name"
@@ -80,7 +81,7 @@ const closeDropdown = () => {
           >
             <!-- Submenu with search and clear button  -->
             <template v-if="item.options && isHovered(item.id)" #dropdown>
-              <filter-list-dropdown
+              <FilterListDropdown
                 :list-items="item.options"
                 :input-placeholder="
                   $t(`${placeholderI18nKey}.${item.type.toUpperCase()}`)
@@ -90,9 +91,9 @@ const closeDropdown = () => {
                 @click="addFilter"
               />
             </template>
-          </filter-list-item-button>
+          </FilterListItemButton>
         </template>
-      </filter-list-dropdown>
+      </FilterListDropdown>
     </template>
-  </filter-button>
+  </FilterButton>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 6f28dabb5..f31ddcd59 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -9,7 +9,6 @@ import { getQuantileIntervals } from '@chatwoot/utils';
 import { groupHeatmapByDay } from 'helpers/ReportsDataHelper';
 import { useI18n } from 'dashboard/composables/useI18n';
 
-const { t } = useI18n();
 const props = defineProps({
   heatData: {
     type: Array,
@@ -20,7 +19,7 @@ const props = defineProps({
     default: false,
   },
 });
-
+const { t } = useI18n();
 const processedData = computed(() => {
   return groupHeatmapByDay(props.heatData);
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index 88eae0541..263390356 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -1,184 +1,3 @@
-<template>
-  <div class="flex flex-col md:flex-row">
-    <div class="flex items-center w-full flex-col md:flex-row">
-      <div
-        v-if="type === 'agent'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          :placeholder="multiselectLabel"
-          label="name"
-          track-by="id"
-          :options="filterItemsList"
-          :option-height="24"
-          :show-labels="false"
-          @input="changeFilterSelection"
-        >
-          <template slot="singleLabel" slot-scope="props">
-            <div class="flex items-center gap-2">
-              <thumbnail
-                :src="props.option.thumbnail"
-                :status="props.option.availability_status"
-                :username="props.option.name"
-                size="22px"
-              />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">{{
-                  props.option.name
-                }}</span>
-              </span>
-            </div>
-          </template>
-          <template slot="option" slot-scope="props">
-            <div class="flex items-center gap-2">
-              <thumbnail
-                :src="props.option.thumbnail"
-                :status="props.option.availability_status"
-                :username="props.option.name"
-                size="22px"
-              />
-              <p class="my-0 text-slate-800 dark:text-slate-75">
-                {{ props.option.name }}
-              </p>
-            </div>
-          </template>
-        </multiselect>
-      </div>
-      <div
-        v-else-if="type === 'label'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          :placeholder="multiselectLabel"
-          label="title"
-          track-by="id"
-          :options="filterItemsList"
-          :option-height="24"
-          :show-labels="false"
-          @input="changeFilterSelection"
-        >
-          <template slot="singleLabel" slot-scope="props">
-            <div class="flex gap-2 items-center">
-              <div
-                :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5"
-              />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">
-                  {{ props.option.title }}
-                </span>
-              </span>
-            </div>
-          </template>
-          <template slot="option" slot-scope="props">
-            <div class="flex items-center gap-2">
-              <div
-                :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
-              />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">
-                  {{ props.option.title }}
-                </span>
-              </span>
-            </div>
-          </template>
-        </multiselect>
-      </div>
-      <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
-          <template v-if="type === 'inbox'">
-            {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
-          </template>
-          <template v-else-if="type === 'team'">
-            {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
-          </template>
-          <!-- handle default condition because the prop is not limited to the given 4 values -->
-          <template v-else>
-            {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
-          </template>
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          track-by="id"
-          label="name"
-          :placeholder="multiselectLabel"
-          selected-label
-          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-          deselect-label=""
-          :options="filterItemsList"
-          :searchable="false"
-          :allow-empty="false"
-          @input="changeFilterSelection"
-        />
-      </div>
-      <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('REPORT.DURATION_FILTER_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentDateRangeSelection"
-          track-by="name"
-          label="name"
-          :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-          selected-label
-          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-          deselect-label=""
-          :options="dateRange"
-          :searchable="false"
-          :allow-empty="false"
-          @select="changeDateSelection"
-        />
-      </div>
-      <div v-if="isDateRangeSelected" class="">
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
-        </p>
-        <woot-date-range-picker
-          show-range
-          :value="customDateRange"
-          :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-          :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-          @change="onChange"
-        />
-      </div>
-      <div
-        v-if="notLast7Days"
-        class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="text-xs mb-2 font-medium">
-          {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedGroupByFilter"
-          track-by="id"
-          label="groupBy"
-          :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-          :options="groupByFilterItemsList"
-          :allow-empty="false"
-          :show-labels="false"
-          @input="changeGroupByFilterSelection"
-        />
-      </div>
-    </div>
-    <div class="flex items-center my-2">
-      <span class="text-sm mx-2 whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
-      </span>
-    </div>
-  </div>
-</template>
 <script>
 import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
@@ -283,7 +102,7 @@ export default {
       this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
     },
     businessHoursSelected() {
-      this.$emit('business-hours-toggle', this.businessHoursSelected);
+      this.$emit('businessHoursToggle', this.businessHoursSelected);
     },
   },
   mounted() {
@@ -291,7 +110,7 @@ export default {
   },
   methods: {
     onDateRangeChange() {
-      this.$emit('date-range-change', {
+      this.$emit('dateRangeChange', {
         from: this.from,
         to: this.to,
         groupBy: this.groupBy,
@@ -308,15 +127,197 @@ export default {
       this.onDateRangeChange();
     },
     changeFilterSelection() {
-      this.$emit('filter-change', this.currentSelectedFilter);
+      this.$emit('filterChange', this.currentSelectedFilter);
     },
     onChange(value) {
       this.customDateRange = value;
       this.onDateRangeChange();
     },
     changeGroupByFilterSelection() {
-      this.$emit('group-by-filter-change', this.currentSelectedGroupByFilter);
+      this.$emit('groupByFilterChange', this.currentSelectedGroupByFilter);
     },
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col md:flex-row">
+    <div class="flex flex-col items-center w-full md:flex-row">
+      <div
+        v-if="type === 'agent'"
+        class="md:w-[240px] w-full multiselect-wrap--small"
+      >
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentSelectedFilter"
+          :placeholder="multiselectLabel"
+          label="name"
+          track-by="id"
+          :options="filterItemsList"
+          :option-height="24"
+          :show-labels="false"
+          @input="changeFilterSelection"
+        >
+          <template slot="singleLabel" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <Thumbnail
+                :src="props.option.thumbnail"
+                :status="props.option.availability_status"
+                :username="props.option.name"
+                size="22px"
+              />
+              <span class="reports-option__desc">
+                <span class="my-0 text-slate-800 dark:text-slate-75">{{
+                  props.option.name
+                }}</span>
+              </span>
+            </div>
+          </template>
+          <template slot="option" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <Thumbnail
+                :src="props.option.thumbnail"
+                :status="props.option.availability_status"
+                :username="props.option.name"
+                size="22px"
+              />
+              <p class="my-0 text-slate-800 dark:text-slate-75">
+                {{ props.option.name }}
+              </p>
+            </div>
+          </template>
+        </multiselect>
+      </div>
+      <div
+        v-else-if="type === 'label'"
+        class="md:w-[240px] w-full multiselect-wrap--small"
+      >
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentSelectedFilter"
+          :placeholder="multiselectLabel"
+          label="title"
+          track-by="id"
+          :options="filterItemsList"
+          :option-height="24"
+          :show-labels="false"
+          @input="changeFilterSelection"
+        >
+          <template slot="singleLabel" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <div
+                :style="{ backgroundColor: props.option.color }"
+                class="w-5 h-5 rounded-full"
+              />
+              <span class="reports-option__desc">
+                <span class="my-0 text-slate-800 dark:text-slate-75">
+                  {{ props.option.title }}
+                </span>
+              </span>
+            </div>
+          </template>
+          <template slot="option" slot-scope="props">
+            <div class="flex items-center gap-2">
+              <div
+                :style="{ backgroundColor: props.option.color }"
+                class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+              />
+              <span class="reports-option__desc">
+                <span class="my-0 text-slate-800 dark:text-slate-75">
+                  {{ props.option.title }}
+                </span>
+              </span>
+            </div>
+          </template>
+        </multiselect>
+      </div>
+      <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
+        <p class="mb-2 text-xs font-medium">
+          <template v-if="type === 'inbox'">
+            {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
+          </template>
+          <template v-else-if="type === 'team'">
+            {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
+          </template>
+          <!-- handle default condition because the prop is not limited to the given 4 values -->
+          <template v-else>
+            {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
+          </template>
+        </p>
+        <multiselect
+          v-model="currentSelectedFilter"
+          track-by="id"
+          label="name"
+          :placeholder="multiselectLabel"
+          selected-label
+          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+          deselect-label=""
+          :options="filterItemsList"
+          :searchable="false"
+          :allow-empty="false"
+          @input="changeFilterSelection"
+        />
+      </div>
+      <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('REPORT.DURATION_FILTER_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentDateRangeSelection"
+          track-by="name"
+          label="name"
+          :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+          selected-label
+          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+          deselect-label=""
+          :options="dateRange"
+          :searchable="false"
+          :allow-empty="false"
+          @select="changeDateSelection"
+        />
+      </div>
+      <div v-if="isDateRangeSelected" class="">
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
+        </p>
+        <WootDateRangePicker
+          show-range
+          :value="customDateRange"
+          :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+          :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+          @change="onChange"
+        />
+      </div>
+      <div
+        v-if="notLast7Days"
+        class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
+      >
+        <p class="mb-2 text-xs font-medium">
+          {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+        </p>
+        <multiselect
+          v-model="currentSelectedGroupByFilter"
+          track-by="id"
+          label="groupBy"
+          :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+          :options="groupByFilterItemsList"
+          :allow-empty="false"
+          :show-labels="false"
+          @input="changeGroupByFilterSelection"
+        />
+      </div>
+    </div>
+    <div class="flex items-center my-2">
+      <span class="mx-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
index 2369e3330..44f512d06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
@@ -18,16 +18,19 @@ defineProps({
   },
 });
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div
     ref="reportMetricContainer"
-    class="m-0 p-4"
+    class="p-4 m-0"
     :class="{
       'grayscale pointer-events-none opacity-30': disabled,
     }"
   >
     <h3
-      class="flex items-center text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
+      class="flex items-center m-0 text-sm font-medium text-slate-800 dark:text-slate-100"
     >
       <span ref="reportMetricLabel">{{ label }}</span>
       <fluent-icon
@@ -40,7 +43,7 @@ defineProps({
     </h3>
     <h4
       ref="reportMetricValue"
-      class="text-slate-700 dark:text-slate-100 mb-0 mt-1 font-thin text-3xl"
+      class="mt-1 mb-0 text-3xl font-thin text-slate-700 dark:text-slate-100"
     >
       {{ value }}
     </h4>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
index 4bb34f925..ad37910cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
@@ -1,61 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
-  >
-    <!-- Active filters section -->
-    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
-      <active-filter-chip
-        v-for="filter in activeFilters"
-        v-bind="filter"
-        :key="filter.type"
-        :placeholder="
-          $t(
-            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
-          )
-        "
-        :active-filter-type="activeFilterType"
-        :show-menu="showSubDropdownMenu"
-        enable-search
-        @toggleDropdown="openActiveFilterDropdown"
-        @closeDropdown="closeActiveFilterDropdown"
-        @addFilter="addFilter"
-        @removeFilter="removeFilter"
-      />
-    </div>
-    <!-- Dividing line between Active filters and Add filter button -->
-    <div
-      v-if="hasActiveFilters && !isAllFilterSelected"
-      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
-    />
-    <!-- Add filter and clear filter button -->
-    <div class="flex items-center gap-2">
-      <add-filter-chip
-        v-if="!isAllFilterSelected"
-        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
-        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
-        :menu-option="filterListMenuItems"
-        :show-menu="showDropdownMenu"
-        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
-        @toggleDropdown="showDropdown"
-        @closeDropdown="closeDropdown"
-        @addFilter="addFilter"
-      />
-
-      <!-- Dividing line between Add filter and Clear all filter button -->
-      <div
-        v-if="hasActiveFilters"
-        class="w-px h-5 border border-slate-75 dark:border-slate-800"
-      />
-      <!-- Clear all filter button -->
-      <filter-button
-        v-if="hasActiveFilters"
-        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
-        @click="clearAllFilters"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import {
@@ -166,13 +108,13 @@ export default {
       const { type, id, name } = item;
       const filterKey = getFilterType(type, 'typeToKey');
       this.appliedFilters[filterKey] = type === 'labels' ? name : id;
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
       this.resetDropdown();
     },
     removeFilter(type) {
       const filterKey = getFilterType(type, 'typeToKey');
       this.appliedFilters[filterKey] = null;
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
     },
     clearAllFilters() {
       this.appliedFilters = {
@@ -182,7 +124,7 @@ export default {
         sla_policy_id: null,
         label_list: null,
       };
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
       this.resetDropdown();
     },
     showDropdown() {
@@ -208,3 +150,61 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
+  >
+    <!-- Active filters section -->
+    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
+      <ActiveFilterChip
+        v-for="filter in activeFilters"
+        v-bind="filter"
+        :key="filter.type"
+        :placeholder="
+          $t(
+            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
+          )
+        "
+        :active-filter-type="activeFilterType"
+        :show-menu="showSubDropdownMenu"
+        enable-search
+        @toggleDropdown="openActiveFilterDropdown"
+        @closeDropdown="closeActiveFilterDropdown"
+        @addFilter="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </div>
+    <!-- Dividing line between Active filters and Add filter button -->
+    <div
+      v-if="hasActiveFilters && !isAllFilterSelected"
+      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+    />
+    <!-- Add filter and clear filter button -->
+    <div class="flex items-center gap-2">
+      <AddFilterChip
+        v-if="!isAllFilterSelected"
+        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
+        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
+        :menu-option="filterListMenuItems"
+        :show-menu="showDropdownMenu"
+        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
+        @toggleDropdown="showDropdown"
+        @closeDropdown="closeDropdown"
+        @addFilter="addFilter"
+      />
+
+      <!-- Dividing line between Add filter and Clear all filter button -->
+      <div
+        v-if="hasActiveFilters"
+        class="w-px h-5 border border-slate-75 dark:border-slate-800"
+      />
+      <!-- Clear all filter button -->
+      <FilterButton
+        v-if="hasActiveFilters"
+        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
+        @click="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 634325393..6a4bafc2e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    toolTip: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
@@ -22,25 +45,3 @@
     </span>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: [String, Number],
-      required: true,
-    },
-    toolTip: {
-      type: String,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 5c598b403..9f638f3ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -1,3 +1,25 @@
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
 <template>
   <div
     class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
@@ -29,25 +51,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import SLAMetricCard from './SLAMetricCard.vue';
-defineProps({
-  hitRate: {
-    type: String,
-    required: true,
-  },
-  noOfBreaches: {
-    type: Number,
-    required: true,
-  },
-  noOfConversations: {
-    type: Number,
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
index 16fbbcf40..b9a149624 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <woot-date-picker @dateRangeChanged="onDateRangeChange" />
-    <SLA-filter @filter-change="emitFilterChange" />
-  </div>
-</template>
 <script>
 import SLAFilter from '../SLA/SLAFilter.vue';
 import subDays from 'date-fns/subDays';
@@ -44,7 +38,7 @@ export default {
       const fromDate = subDays(new Date(), offset);
       const from = getUnixStartOfDay(fromDate);
       const to = getUnixEndOfDay(new Date());
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         ...this.selectedGroupByFilter,
@@ -52,7 +46,7 @@ export default {
     },
     emitChange() {
       const { from, to } = this;
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         ...this.selectedGroupByFilter,
@@ -69,3 +63,10 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
+    <woot-date-picker @dateRangeChanged="onDateRangeChange" />
+    <SLAFilter @filterChange="emitFilterChange" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index 129265cdf..a85dcffbf 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 61ac3056f..542ba78e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -1,60 +1,3 @@
-<template>
-  <div>
-    <div
-      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
-    >
-      <div
-        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
-      >
-        <table-header-cell
-          :span="6"
-          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
-        />
-        <table-header-cell
-          :span="2"
-          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
-        />
-        <table-header-cell
-          :span="2"
-          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
-        />
-        <table-header-cell :span="2" label="" />
-      </div>
-
-      <div
-        v-if="isLoading"
-        class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
-      >
-        <spinner />
-        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
-      </div>
-      <div v-else-if="slaReports.length > 0">
-        <SLA-report-item
-          v-for="slaReport in slaReports"
-          :key="slaReport.applied_sla.id"
-          :sla-name="slaReport.applied_sla.sla_name"
-          :conversation="slaReport.conversation"
-          :conversation-id="slaReport.conversation.id"
-          :sla-events="slaReport.sla_events"
-        />
-      </div>
-      <div
-        v-else
-        class="flex items-center justify-center rounded-b-xl h-32 bg-white dark:bg-slate-900"
-      >
-        {{ $t('SLA_REPORTS.NO_RECORDS') }}
-      </div>
-    </div>
-    <table-footer
-      v-if="shouldShowFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
 <script>
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
 import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
@@ -104,8 +47,65 @@ export default {
   },
   methods: {
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+    >
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+      >
+        <TableHeaderCell
+          :span="6"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
+        />
+        <TableHeaderCell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
+        />
+        <TableHeaderCell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
+        />
+        <TableHeaderCell :span="2" label="" />
+      </div>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
+      >
+        <Spinner />
+        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
+      </div>
+      <div v-else-if="slaReports.length > 0">
+        <SLAReportItem
+          v-for="slaReport in slaReports"
+          :key="slaReport.applied_sla.id"
+          :sla-name="slaReport.applied_sla.sla_name"
+          :conversation="slaReport.conversation"
+          :conversation-id="slaReport.conversation.id"
+          :sla-events="slaReport.sla_events"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
+    </div>
+    <TableFooter
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @pageChange="onPageChange"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index be40349fe..ff84c2f1c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -1,26 +1,3 @@
-<template>
-  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      <div class="relative">
-        <woot-button
-          color-scheme="secondary"
-          variant="link"
-          @click="openSlaEvents"
-        >
-          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-        </woot-button>
-        <SLA-popover-card
-          v-if="showSlaPopoverCard"
-          :sla-missed-events="slaEvents"
-          class="right-0"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
@@ -50,3 +27,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <div class="relative">
+        <woot-button
+          color-scheme="secondary"
+          variant="link"
+          @click="openSlaEvents"
+        >
+          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+        </woot-button>
+        <SLAPopoverCard
+          v-if="showSlaPopoverCard"
+          :sla-missed-events="slaEvents"
+          class="right-0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index c62857872..2d5e52462 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,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 4fc7fdbf6..ce20c4582 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 d40555c9d..50f9cd0ba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -1,3 +1,28 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  name: 'MetricCard',
+  components: {
+    Spinner,
+  },
+  props: {
+    header: {
+      type: String,
+      default: '',
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="metric-card flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
@@ -36,37 +61,14 @@
       v-else-if="isLoading"
       class="items-center flex text-base justify-center px-12 py-6"
     >
-      <spinner />
+      <Spinner />
       <span class="text-slate-300 dark:text-slate-200">
         {{ loadingMessage }}
       </span>
     </div>
   </div>
 </template>
-<script>
-import Spinner from 'shared/components/Spinner.vue';
 
-export default {
-  name: 'MetricCard',
-  components: {
-    Spinner,
-  },
-  props: {
-    header: {
-      type: String,
-      default: '',
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    loadingMessage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .metric-card {
   @apply flex flex-col mb-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
index 2964bf24d..56b4fe186 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
@@ -43,8 +43,8 @@ describe('ReportsFiltersAgents.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('agents-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('agents-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('agentsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('agentsFilterSelection')[0]).toEqual([
       selectedAgents,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
index bbe93beb7..f25f57742 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
@@ -16,8 +16,8 @@ describe('ReportsFiltersDateGroupBy.vue', () => {
     const selectedFilter = GROUP_BY_OPTIONS.DAY;
     wrapper.vm.changeFilterSelection(selectedFilter);
 
-    expect(wrapper.emitted('on-grouping-change')).toBeTruthy();
-    expect(wrapper.emitted('on-grouping-change')[0]).toEqual([selectedFilter]);
+    expect(wrapper.emitted('onGroupingChange')).toBeTruthy();
+    expect(wrapper.emitted('onGroupingChange')[0]).toEqual([selectedFilter]);
   });
 
   it('updates currentSelectedFilter when selectedOption is changed', async () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
index 83e4b222c..50a87e979 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
@@ -58,9 +58,7 @@ describe('ReportsFiltersInboxes.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('inbox-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('inbox-filter-selection')[0]).toEqual([
-      selectedInbox,
-    ]);
+    expect(wrapper.emitted('inboxFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('inboxFilterSelection')[0]).toEqual([selectedInbox]);
   });
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
index 03fadac5f..cf5fe6ebd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
@@ -58,8 +58,8 @@ describe('ReportsFiltersLabels.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('labels-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('labels-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('labelsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('labelsFilterSelection')[0]).toEqual([
       selectedLabel,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
index 5b650cd99..870aa5a50 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
@@ -23,8 +23,8 @@ describe('ReportFiltersRatings.vue', () => {
 
     wrapper.vm.handleInput(selectedRating);
 
-    expect(wrapper.emitted('rating-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('rating-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('ratingFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('ratingFilterSelection')[0]).toEqual([
       selectedRating,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
index ecfec4e1e..aa1aba637 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
@@ -54,8 +54,8 @@ describe('ReportsFiltersTeams.vue', () => {
     });
     wrapper.setData({ selectedOption: { id: 1, name: 'Team 1' } });
     wrapper.vm.handleInput();
-    expect(wrapper.emitted('team-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('team-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('teamFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('teamFilterSelection')[0]).toEqual([
       { id: 1, name: 'Team 1' },
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
index 16a4f49b6..4a4ac00c3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
@@ -2,9 +2,9 @@
 
 exports[`CsatMetrics.vue > computes response count correctly 1`] = `
 "<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csat-metric-card-stub>
+  <csatmetriccard-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csatmetriccard-stub>
+  <csatmetriccard-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csatmetriccard-stub>
+  <csatmetriccard-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"></csatmetriccard-stub>
   <!---->
 </div>"
 `;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index 2829ed1d9..229fe7e3a 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 772ec4bcd..5b0158af2 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 21d2f5257..4785ddb3b 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 bbe0ac7fe..e559e96cc 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 d8c7594c2..b1fc7a342 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 eb8bfd65a..2711658ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
@@ -5,7 +5,7 @@ import SLAListItem from './SLAListItem.vue';
 <template>
   <div class="w-full min-h-[12rem] relative">
     <div class="w-full space-y-3">
-      <SLA-list-item
+      <SLAListItem
         class="opacity-25 dark:opacity-20"
         :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
         :description="$t('SLA.LIST.EMPTY.DESC_1')"
@@ -14,7 +14,7 @@ import SLAListItem from './SLAListItem.vue';
         resolution-time="24h"
         has-business-hours
       />
-      <SLA-list-item
+      <SLAListItem
         class="opacity-25 dark:opacity-20"
         :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
         :description="$t('SLA.LIST.EMPTY.DESC_2')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
index 8790fe2a8..3f8cad837 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
@@ -6,6 +6,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-slate-75 dark:border-slate-700/50"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
index cfb40dbdc..b969a8c37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
@@ -1,12 +1,12 @@
 <script setup>
 import BaseEmptyState from './BaseEmptyState.vue';
 
-const emit = defineEmits(['primary-action']);
-const primaryAction = () => emit('primary-action');
+const emit = defineEmits(['primaryAction']);
+const primaryAction = () => emit('primaryAction');
 </script>
 
 <template>
-  <base-empty-state>
+  <BaseEmptyState>
     <p class="max-w-xs text-sm font-medium text-center">
       {{ $t('SLA.LIST.404') }}
     </p>
@@ -18,5 +18,5 @@ const primaryAction = () => emit('primary-action');
     >
       {{ $t('SLA.ADD_ACTION_LONG') }}
     </woot-button>
-  </base-empty-state>
+  </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
index 498b5c856..36d954df1 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 08e66dbfe..b318478fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
@@ -34,22 +34,23 @@ defineProps({
   },
 });
 </script>
+
 <template>
-  <base-settings-list-item
+  <BaseSettingsListItem
     class="sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50"
     :title="slaName"
     :description="description"
   >
     <template #label>
-      <SLA-business-hours-label :has-business-hours="hasBusinessHours" />
+      <SLABusinessHoursLabel :has-business-hours="hasBusinessHours" />
     </template>
     <template #rightSection>
       <div
         class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
       >
-        <SLA-response-time response-type="FRT" :response-time="firstResponse" />
-        <SLA-response-time response-type="NRT" :response-time="nextResponse" />
-        <SLA-response-time response-type="RT" :response-time="resolutionTime" />
+        <SLAResponseTime response-type="FRT" :response-time="firstResponse" />
+        <SLAResponseTime response-type="NRT" :response-time="nextResponse" />
+        <SLAResponseTime response-type="RT" :response-time="resolutionTime" />
       </div>
     </template>
     <template #actions>
@@ -64,5 +65,5 @@ defineProps({
         @click="$emit('click')"
       />
     </template>
-  </base-settings-list-item>
+  </BaseSettingsListItem>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
index 9041d6a2d..860ded975 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
@@ -1,8 +1,9 @@
 <script setup>
 import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 </script>
+
 <template>
-  <base-settings-list-item class="opacity-50">
+  <BaseSettingsListItem class="opacity-50">
     <template #title>
       <div
         class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
@@ -36,5 +37,5 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
         </div>
       </div>
     </template>
-  </base-settings-list-item>
+  </BaseSettingsListItem>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
index 6c69baa4c..6c3ac5368 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
@@ -17,7 +17,7 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
 </script>
 
 <template>
-  <base-empty-state>
+  <BaseEmptyState>
     <div
       class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
     >
@@ -72,5 +72,5 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
         </a>
       </template>
     </div>
-  </base-empty-state>
+  </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
index a2caaa4e5..e7e986e7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
@@ -10,6 +10,7 @@ defineProps({
   },
 });
 </script>
+
 <template>
   <div
     class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js b/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js
deleted file mode 100644
index 2266bdccd..000000000
--- 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 d086c6072..000000000
--- 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 024aa6636..d530615ea 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 c3dbdfd42..a53479dc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -1,80 +1,3 @@
-<template>
-  <div>
-    <div class="add-agents__header" />
-    <table class="woot-table">
-      <thead>
-        <tr>
-          <td class="ltr:pl-2.5 rtl:pr-2.5">
-            <div class="flex items-center">
-              <input
-                name="select-all-agents"
-                type="checkbox"
-                :checked="allAgentsSelected ? 'checked' : ''"
-                :title="$t('TEAMS_SETTINGS.AGENTS.SELECT_ALL')"
-                @click.self="selectAllAgents"
-              />
-            </div>
-          </td>
-          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
-            {{ $t('TEAMS_SETTINGS.AGENTS.AGENT') }}
-          </td>
-          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
-            {{ $t('TEAMS_SETTINGS.AGENTS.EMAIL') }}
-          </td>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="agent in agentList"
-          :key="agent.id"
-          :class="agentRowClass(agent.id)"
-        >
-          <td class="w-12">
-            <div class="flex items-center">
-              <input
-                type="checkbox"
-                :checked="isAgentSelected(agent.id)"
-                @click.self="() => handleSelectAgent(agent.id)"
-              />
-            </div>
-          </td>
-          <td>
-            <div class="flex items-center gap-2">
-              <thumbnail
-                :src="agent.thumbnail"
-                size="24px"
-                :username="agent.name"
-                :status="agent.availability_status"
-              />
-              <h4 class="text-base mb-0 text-slate-800 dark:text-slate-100">
-                {{ agent.name }}
-              </h4>
-            </div>
-          </td>
-          <td>
-            {{ agent.email || '---' }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="flex items-center justify-between mt-2">
-      <p>
-        {{
-          $t('TEAMS_SETTINGS.AGENTS.SELECTED_COUNT', {
-            selected: selectedAgents.length,
-            total: agentList.length,
-          })
-        }}
-      </p>
-      <woot-submit-button
-        :button-text="submitButtonText"
-        :loading="isWorking"
-        :disabled="disableSubmitButton"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -145,6 +68,83 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <div class="add-agents__header" />
+    <table class="woot-table">
+      <thead>
+        <tr>
+          <td class="ltr:pl-2.5 rtl:pr-2.5">
+            <div class="flex items-center">
+              <input
+                name="select-all-agents"
+                type="checkbox"
+                :checked="allAgentsSelected ? 'checked' : ''"
+                :title="$t('TEAMS_SETTINGS.AGENTS.SELECT_ALL')"
+                @click.self="selectAllAgents"
+              />
+            </div>
+          </td>
+          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
+            {{ $t('TEAMS_SETTINGS.AGENTS.AGENT') }}
+          </td>
+          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
+            {{ $t('TEAMS_SETTINGS.AGENTS.EMAIL') }}
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="agent in agentList"
+          :key="agent.id"
+          :class="agentRowClass(agent.id)"
+        >
+          <td class="w-12">
+            <div class="flex items-center">
+              <input
+                type="checkbox"
+                :checked="isAgentSelected(agent.id)"
+                @click.self="() => handleSelectAgent(agent.id)"
+              />
+            </div>
+          </td>
+          <td>
+            <div class="flex items-center gap-2">
+              <Thumbnail
+                :src="agent.thumbnail"
+                size="24px"
+                :username="agent.name"
+                :status="agent.availability_status"
+              />
+              <h4 class="text-base mb-0 text-slate-800 dark:text-slate-100">
+                {{ agent.name }}
+              </h4>
+            </div>
+          </td>
+          <td>
+            {{ agent.email || '---' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="flex items-center justify-between mt-2">
+      <p>
+        {{
+          $t('TEAMS_SETTINGS.AGENTS.SELECTED_COUNT', {
+            selected: selectedAgents.length,
+            total: agentList.length,
+          })
+        }}
+      </p>
+      <woot-submit-button
+        :button-text="submitButtonText"
+        :loading="isWorking"
+        :disabled="disableSubmitButton"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 input {
   @apply mb-0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index 6493f20f5..5fe7ae531 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -1,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 38fcf5777..52e235c48 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -1,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 232c20527..ff05352ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
-    <router-view />
-  </div>
-</template>
-
 <script>
 export default {
   computed: {
@@ -17,3 +8,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+    <router-view />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index 0b3587bf8..c22ab0ed4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -1,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 1330340ad..ebe1e9c96 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -1,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 9a4e768b7..9364d4b47 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
-    <router-view />
-  </div>
-</template>
-
 <script>
 export default {
   computed: {
@@ -17,3 +8,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+  >
+    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+    <router-view />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
index 2fa452935..b68652314 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -1,8 +1,18 @@
+<script>
+import EmptyState from '../../../../components/widgets/EmptyState.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+};
+</script>
+
 <template>
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <empty-state
+    <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
       :message="$t('TEAMS_SETTINGS.FINISH.MESSAGE')"
       :button-text="$t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT')"
@@ -17,16 +27,6 @@
           {{ $t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>
-
-<script>
-import EmptyState from '../../../../components/widgets/EmptyState.vue';
-
-export default {
-  components: {
-    EmptyState,
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 896c7f304..2e2c80b13 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 1f1f7ceb3..66c445fbe 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 3f063a0c4..dcb6ca648 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 c968351f4..cb0e96785 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 550a02a23..c52a32a1f 100644
--- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 
 <template>
   <div class="items-center bg-slate-50 flex justify-center h-full w-full">
-    <empty-state
+    <EmptyState
       :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
       :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
     />
diff --git a/app/javascript/dashboard/store/modules/accounts.js b/app/javascript/dashboard/store/modules/accounts.js
index c757b7fcb..fb2c8b89f 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 7b24d1171..568150392 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 6a8b94e1e..eaf385372 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 8c2070963..1a905c3c5 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 769354ed2..b3e39d397 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;
+    }
+
+    const id = message.conversation_id;
+    const existingAttachments = _state.attachments[id] || [];
+
+    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
+      );
     });
 
-    if (!chat) return;
-
-    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);
-        }
-      });
-    }
+    // 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;
+
+    const { conversation_id: id } = message;
+    const existingAttachments = _state.attachments[id] || [];
+    if (!existingAttachments.length) return;
+
+    _state.attachments[id] = existingAttachments.filter(attachment => {
+      return attachment.message_id !== message.id;
     });
-
-    if (!chat) 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);
-    }
   },
 
   [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 3183afbe3..add8f022f 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 676720c29..77cc9b357 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 000000000..7a80aed8c
--- /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 3c3bf79de..cded29329 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 de596534c..6340e4de9 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 43080a7d8..feb358684 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 bbf36fa9a..81e62b950 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 031767052..fdcaec106 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 5807ff60f..d5180675c 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 ea3bb8200..a6c873c55 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 1174c636c..3e4be5ba9 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -1,27 +1,3 @@
-<template>
-  <div v-on-clickaway="closeSearch" class="max-w-5xl w-full relative my-4">
-    <public-search-input
-      v-model="searchTerm"
-      :search-placeholder="searchTranslations.searchPlaceholder"
-      @focus="openSearch"
-    />
-    <div
-      v-if="shouldShowSearchBox"
-      class="absolute top-14 w-full"
-      @mouseover="openSearch"
-    >
-      <search-suggestions
-        :items="searchResults"
-        :is-loading="isLoading"
-        :search-term="searchTerm"
-        :empty-placeholder="searchTranslations.emptyPlaceholder"
-        :results-title="searchTranslations.resultsTitle"
-        :loading-placeholder="searchTranslations.loadingPlaceholder"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import SearchSuggestions from './SearchSuggestions.vue';
 import PublicSearchInput from './PublicSearchInput.vue';
@@ -33,12 +9,6 @@ export default {
     PublicSearchInput,
     SearchSuggestions,
   },
-  props: {
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-  },
   data() {
     return {
       searchTerm: '',
@@ -121,3 +91,27 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
+    <PublicSearchInput
+      v-model="searchTerm"
+      :search-placeholder="searchTranslations.searchPlaceholder"
+      @focus="openSearch"
+    />
+    <div
+      v-if="shouldShowSearchBox"
+      class="absolute w-full top-14"
+      @mouseover="openSearch"
+    >
+      <SearchSuggestions
+        :items="searchResults"
+        :is-loading="isLoading"
+        :search-term="searchTerm"
+        :empty-placeholder="searchTranslations.emptyPlaceholder"
+        :results-title="searchTranslations.resultsTitle"
+        :loading-placeholder="searchTranslations.loadingPlaceholder"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
index ffa0f99a7..08dd5e1cf 100644
--- a/app/javascript/portal/components/PublicSearchInput.vue
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
-    :class="{
-      'shadow border-woot-100 dark:border-woot-700': isFocused,
-      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
-    }"
-  >
-    <fluent-icon icon="search" />
-    <input
-      :value="value"
-      type="text"
-      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
-      :placeholder="searchPlaceholder"
-      role="search"
-      @input="onChange"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -57,3 +35,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
+    :class="{
+      'shadow border-woot-100 dark:border-woot-700': isFocused,
+      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
+    }"
+  >
+    <FluentIcon icon="search" />
+    <input
+      :value="value"
+      type="text"
+      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
+      :placeholder="searchPlaceholder"
+      role="search"
+      @input="onChange"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index 2c9697e14..68abe44f5 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 d7b3bb021..d907bc49e 100644
--- a/app/javascript/portal/components/TableOfContents.vue
+++ b/app/javascript/portal/components/TableOfContents.vue
@@ -1,33 +1,3 @@
-<template>
-  <div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
-    <div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
-      <nav class="max-w-2xl">
-        <ol
-          role="list"
-          class="flex flex-col gap-2 text-base border-l-2 border-solid border-slate-100 dark:border-slate-800"
-        >
-          <li
-            v-for="element in rows"
-            :key="element.slug"
-            class="leading-6 border-l-2 relative -left-0.5 border-solid"
-            :class="elementBorderStyles(element)"
-          >
-            <p class="py-1 px-3" :class="getClassName(element)">
-              <a
-                :href="`#${element.slug}`"
-                data-turbolinks="false"
-                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
-                :class="elementTextStyles(element)"
-              >
-                {{ element.title }}
-              </a>
-            </p>
-          </li>
-        </ol>
-      </nav>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -122,3 +92,34 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
+    <div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
+      <nav class="max-w-2xl">
+        <ol
+          role="list"
+          class="flex flex-col gap-2 text-base border-l-2 border-solid border-slate-100 dark:border-slate-800"
+        >
+          <li
+            v-for="element in rows"
+            :key="element.slug"
+            class="leading-6 border-l-2 relative -left-0.5 border-solid"
+            :class="elementBorderStyles(element)"
+          >
+            <p class="py-1 px-3" :class="getClassName(element)">
+              <a
+                :href="`#${element.slug}`"
+                data-turbolinks="false"
+                class="font-medium text-sm tracking-[0.28px] cursor-pointer"
+                :class="elementTextStyles(element)"
+              >
+                {{ element.title }}
+              </a>
+            </p>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index 3e9690b20..dfe2951f0 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -33,7 +33,7 @@ export const openExternalLinksInNewTab = () => {
   const isOnArticlePage =
     isSameHost && document.querySelector('#cw-article-content') !== null;
 
-  document.addEventListener('click', function (event) {
+  document.addEventListener('click', event => {
     if (!isOnArticlePage) return;
 
     // Some of the links come wrapped in strong tag through prosemirror
diff --git a/app/javascript/shared/components/Branding.vue b/app/javascript/shared/components/Branding.vue
index bbeb578e9..8034e3506 100644
--- a/app/javascript/shared/components/Branding.vue
+++ b/app/javascript/shared/components/Branding.vue
@@ -1,27 +1,3 @@
-<template>
-  <div
-    v-if="globalConfig.brandName && !disableBranding"
-    class="px-0 py-3 flex justify-center"
-  >
-    <a
-      :href="brandRedirectURL"
-      rel="noreferrer noopener nofollow"
-      target="_blank"
-      class="branding--link justify-center items-center leading-3"
-    >
-      <img
-        class="branding--image"
-        :alt="globalConfig.brandName"
-        :src="globalConfig.logoThumbnail"
-      />
-      <span>
-        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
-      </span>
-    </a>
-  </div>
-  <div v-else class="p-3" />
-</template>
-
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
@@ -68,6 +44,30 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="globalConfig.brandName && !disableBranding"
+    class="px-0 py-3 flex justify-center"
+  >
+    <a
+      :href="brandRedirectURL"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+      class="branding--link justify-center items-center leading-3"
+    >
+      <img
+        class="branding--image"
+        :alt="globalConfig.brandName"
+        :src="globalConfig.logoThumbnail"
+      />
+      <span>
+        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
+      </span>
+    </a>
+  </div>
+  <div v-else class="p-3" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
index ed28a8e5a..cd041361f 100644
--- a/app/javascript/shared/components/Button.vue
+++ b/app/javascript/shared/components/Button.vue
@@ -1,13 +1,3 @@
-<template>
-  <button
-    :class="buttonClassName"
-    :style="buttonStyles"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-</template>
 <script>
 export default {
   props: {
@@ -65,3 +55,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :class="buttonClassName"
+    :style="buttonStyles"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index 9eb443568..c8a44a660 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -1,29 +1,3 @@
-<template>
-  <a
-    v-if="isLink"
-    :key="action.uri"
-    class="action-button button"
-    :href="action.uri"
-    :style="{
-      background: widgetColor,
-      borderColor: widgetColor,
-      color: textColor,
-    }"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
-  >
-    {{ action.text }}
-  </a>
-  <button
-    v-else
-    :key="action.payload"
-    class="action-button button"
-    :style="{ borderColor: widgetColor, color: widgetColor }"
-    @click="onClick"
-  >
-    {{ action.text }}
-  </button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -54,6 +28,33 @@ export default {
 };
 </script>
 
+<template>
+  <a
+    v-if="isLink"
+    :key="action.uri"
+    class="action-button button"
+    :href="action.uri"
+    :style="{
+      background: widgetColor,
+      borderColor: widgetColor,
+      color: textColor,
+    }"
+    target="_blank"
+    rel="noopener nofollow noreferrer"
+  >
+    {{ action.text }}
+  </a>
+  <button
+    v-else
+    :key="action.payload"
+    class="action-button button"
+    :style="{ borderColor: widgetColor, color: widgetColor }"
+    @click="onClick"
+  >
+    {{ action.text }}
+  </button>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~dashboard/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index f777d6b3d..14683784f 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -1,25 +1,3 @@
-<template>
-  <div
-    class="card-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <img class="media" :src="mediaUrl" />
-    <div class="card-body">
-      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
-        {{ title }}
-      </h4>
-      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
-        {{ description }}
-      </p>
-      <card-button
-        v-for="action in actions"
-        :key="action.id"
-        :action="action"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import CardButton from 'shared/components/CardButton.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -46,12 +24,29 @@ export default {
       type: Array,
       default: () => [],
     },
-    showAvatar: Boolean,
   },
   computed: {},
 };
 </script>
 
+<template>
+  <div
+    class="card-message chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
+    <img class="media" :src="mediaUrl" />
+    <div class="card-body">
+      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
+        {{ title }}
+      </h4>
+      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
+        {{ description }}
+      </p>
+      <CardButton v-for="action in actions" :key="action.id" :action="action" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~dashboard/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index bf3d830eb..f246f94a7 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -1,3 +1,82 @@
+<script>
+import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
+
+export default {
+  mixins: [darkModeMixin],
+  props: {
+    buttonLabel: {
+      type: String,
+      default: '',
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    submittedValues: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      formValues: {},
+      hasSubmitted: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
+    isFormValid() {
+      return this.items.reduce((acc, { name }) => {
+        return !!this.formValues[name] && acc;
+      }, true);
+    },
+  },
+  mounted() {
+    if (this.submittedValues.length) {
+      this.updateFormValues();
+    } else {
+      this.setFormDefaults();
+    }
+  },
+  methods: {
+    onSubmitClick() {
+      this.hasSubmitted = true;
+    },
+    onSubmit() {
+      if (!this.isFormValid) {
+        return;
+      }
+      this.$emit('submit', this.formValues);
+    },
+    buildFormObject(formObjectArray) {
+      return formObjectArray.reduce((acc, obj) => {
+        return {
+          ...acc,
+          [obj.name]: obj.value || obj.default,
+        };
+      }, {});
+    },
+    updateFormValues() {
+      this.formValues = this.buildFormObject(this.submittedValues);
+    },
+    setFormDefaults() {
+      this.formValues = this.buildFormObject(this.items);
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="form chat-bubble agent"
@@ -84,85 +163,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import { getContrastingTextColor } from '@chatwoot/utils';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
-
-export default {
-  mixins: [darkModeMixin],
-  props: {
-    buttonLabel: {
-      type: String,
-      default: '',
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    submittedValues: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      formValues: {},
-      hasSubmitted: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
-    textColor() {
-      return getContrastingTextColor(this.widgetColor);
-    },
-    inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
-    },
-    isFormValid() {
-      return this.items.reduce((acc, { name }) => {
-        return !!this.formValues[name] && acc;
-      }, true);
-    },
-  },
-  mounted() {
-    if (this.submittedValues.length) {
-      this.updateFormValues();
-    } else {
-      this.setFormDefaults();
-    }
-  },
-  methods: {
-    onSubmitClick() {
-      this.hasSubmitted = true;
-    },
-    onSubmit() {
-      if (!this.isFormValid) {
-        return;
-      }
-      this.$emit('submit', this.formValues);
-    },
-    buildFormObject(formObjectArray) {
-      return formObjectArray.reduce((acc, obj) => {
-        return {
-          ...acc,
-          [obj.name]: obj.value || obj.default,
-        };
-      }, {});
-    },
-    updateFormValues() {
-      this.formValues = this.buildFormObject(this.submittedValues);
-    },
-    setFormDefaults() {
-      this.formValues = this.buildFormObject(this.items);
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/ChatOption.vue b/app/javascript/shared/components/ChatOption.vue
index 7532e14d3..de6d27a18 100644
--- a/app/javascript/shared/components/ChatOption.vue
+++ b/app/javascript/shared/components/ChatOption.vue
@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="option"
-    :class="{ 'is-selected': isSelected }"
-    :style="{ borderColor: widgetColor }"
-  >
-    <button class="option-button button" @click="onClick">
-      <span :style="{ color: widgetColor }">{{ action.title }}</span>
-    </button>
-  </li>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -38,6 +26,18 @@ export default {
 };
 </script>
 
+<template>
+  <li
+    class="option"
+    :class="{ 'is-selected': isSelected }"
+    :style="{ borderColor: widgetColor }"
+  >
+    <button class="option-button button" @click="onClick">
+      <span :style="{ color: widgetColor }">{{ action.title }}</span>
+    </button>
+  </li>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index 2cb8b8c97..a6c744234 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
-    <div class="card-body">
-      <h4 class="title text-black-900 dark:text-slate-50">
-        <div
-          v-dompurify-html="formatMessage(title, false)"
-          class="message-content text-black-900 dark:text-slate-50"
-        />
-      </h4>
-      <ul
-        v-if="!hideFields"
-        class="options"
-        :class="{ 'has-selected': !!selected }"
-      >
-        <chat-option
-          v-for="option in options"
-          :key="option.id"
-          :action="option"
-          :is-selected="isSelected(option)"
-          @click="onClick"
-        />
-      </ul>
-    </div>
-  </div>
-</template>
-
 <script>
 import ChatOption from 'shared/components/ChatOption.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -62,6 +36,32 @@ export default {
 };
 </script>
 
+<template>
+  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
+    <div class="card-body">
+      <h4 class="title text-black-900 dark:text-slate-50">
+        <div
+          v-dompurify-html="formatMessage(title, false)"
+          class="message-content text-black-900 dark:text-slate-50"
+        />
+      </h4>
+      <ul
+        v-if="!hideFields"
+        class="options"
+        :class="{ 'has-selected': !!selected }"
+      >
+        <ChatOption
+          v-for="option in options"
+          :key="option.id"
+          :action="option"
+          :is-selected="isSelected(option)"
+          @click="onClick"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .has-selected {
@@ -71,6 +71,7 @@ export default {
   }
 }
 </style>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 471562d02..332892cd3 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -1,50 +1,3 @@
-<template>
-  <div
-    class="customer-satisfaction"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-    :style="{ borderColor: widgetColor }"
-  >
-    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
-      {{ title }}
-    </h6>
-    <div class="ratings">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="selectRating(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-    <form
-      v-if="!isFeedbackSubmitted"
-      class="feedback-form"
-      @submit.prevent="onSubmit()"
-    >
-      <input
-        v-model="feedback"
-        class="form-input"
-        :class="inputColor"
-        :placeholder="$t('CSAT.PLACEHOLDER')"
-        @keydown.enter="onSubmit"
-      />
-      <button
-        class="button small"
-        :disabled="isButtonDisabled"
-        :style="{
-          background: widgetColor,
-          borderColor: widgetColor,
-          color: textColor,
-        }"
-      >
-        <spinner v-if="isUpdating && feedback" />
-        <fluent-icon v-else icon="chevron-right" />
-      </button>
-    </form>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
@@ -149,6 +102,53 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="customer-satisfaction"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :style="{ borderColor: widgetColor }"
+  >
+    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
+      {{ title }}
+    </h6>
+    <div class="ratings">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="selectRating(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+    <form
+      v-if="!isFeedbackSubmitted"
+      class="feedback-form"
+      @submit.prevent="onSubmit()"
+    >
+      <input
+        v-model="feedback"
+        class="form-input"
+        :class="inputColor"
+        :placeholder="$t('CSAT.PLACEHOLDER')"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="isButtonDisabled"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <Spinner v-if="isUpdating && feedback" />
+        <FluentIcon v-else icon="chevron-right" />
+      </button>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue
index 32ae6e10c..a06badcc6 100644
--- a/app/javascript/shared/components/DateSeparator.vue
+++ b/app/javascript/shared/components/DateSeparator.vue
@@ -1,12 +1,3 @@
-<template>
-  <div
-    class="date--separator"
-    :class="$dm('text-slate-700', 'dark:text-slate-200')"
-  >
-    {{ formattedDate }}
-  </div>
-</template>
-
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -31,6 +22,15 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="date--separator"
+    :class="$dm('text-slate-700', 'dark:text-slate-200')"
+  >
+    {{ formattedDate }}
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/shared/components/EmojiOrIcon.vue b/app/javascript/shared/components/EmojiOrIcon.vue
index 2a93dc06f..3a2c12854 100644
--- a/app/javascript/shared/components/EmojiOrIcon.vue
+++ b/app/javascript/shared/components/EmojiOrIcon.vue
@@ -1,14 +1,3 @@
-<template>
-  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
-  <fluent-icon
-    v-else-if="showIcon"
-    :size="iconSize"
-    :icon="icon"
-    class="flex-shrink-0"
-    :class="className"
-  />
-</template>
-
 <script>
 // 🚨 This component is deprecated. Please use fluent-icon instead.
 import { hasEmojiSupport } from 'shared/helpers/emoji';
@@ -46,6 +35,17 @@ export default {
 };
 </script>
 
+<template>
+  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
+  <fluent-icon
+    v-else-if="showIcon"
+    :size="iconSize"
+    :icon="icon"
+    class="flex-shrink-0"
+    :class="className"
+  />
+</template>
+
 <style lang="scss" scoped>
 .icon--emoji {
   font-style: normal;
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index 05369ed1e..0b93b95d4 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -1,13 +1,3 @@
-<template>
-  <base-icon
-    :size="size"
-    :icon="icon"
-    :type="type"
-    :icons="icons"
-    :view-box="viewBox"
-    :icon-lib="iconLib"
-  />
-</template>
 <script>
 import BaseIcon from './Icon.vue';
 import icons from './dashboard-icons.json';
@@ -44,3 +34,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BaseIcon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+    :icon-lib="iconLib"
+  />
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/Icon.vue b/app/javascript/shared/components/FluentIcon/Icon.vue
index da01f3397..f09e4d3f4 100644
--- a/app/javascript/shared/components/FluentIcon/Icon.vue
+++ b/app/javascript/shared/components/FluentIcon/Icon.vue
@@ -1,37 +1,3 @@
-<template>
-  <svg
-    v-if="iconLib === 'fluent'"
-    :width="size"
-    :height="size"
-    fill="none"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      v-for="source in pathSource"
-      :key="source"
-      :d="source"
-      fill="currentColor"
-    />
-  </svg>
-  <svg
-    v-else
-    :width="size"
-    :height="size"
-    fill="none"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g v-for="(pathData, index) in pathSource" :key="index">
-      <path
-        :key="pathData"
-        :d="pathData"
-        stroke="currentColor"
-        stroke-width="1.66667"
-      />
-    </g>
-  </svg>
-</template>
 <script>
 export default {
   props: {
@@ -73,3 +39,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <svg
+    v-if="iconLib === 'fluent'"
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      v-for="source in pathSource"
+      :key="source"
+      :d="source"
+      fill="currentColor"
+    />
+  </svg>
+  <svg
+    v-else
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g v-for="(pathData, index) in pathSource" :key="index">
+      <path
+        :key="pathData"
+        :d="pathData"
+        stroke="currentColor"
+        stroke-width="1.66667"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index d63a0c56b..f692bdbc9 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -1,13 +1,3 @@
-<template>
-  <base-icon
-    :size="size"
-    :icon="icon"
-    :type="type"
-    :icons="icons"
-    :view-box="viewBox"
-    :icon-lib="iconLib"
-  />
-</template>
 <script>
 import BaseIcon from './Icon.vue';
 import icons from './icons.json';
@@ -44,3 +34,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BaseIcon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+    :icon-lib="iconLib"
+  />
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 561129c00..04255c560 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 d67d9c1b3..7388a2886 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -1,32 +1,3 @@
-<template>
-  <section class="w-3/4">
-    <div
-      v-if="richtext"
-      class="py-0 px-4 rounded-md border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 mt-0 mx-0 mb-4"
-    >
-      <woot-message-editor
-        v-model="greetingsMessage"
-        :is-format-mode="true"
-        :enable-variables="true"
-        class="input bg-white dark:bg-slate-900"
-        :placeholder="placeholder"
-        :min-height="4"
-        @input="handleInput"
-      />
-    </div>
-    <resizable-text-area
-      v-else
-      v-model="greetingsMessage"
-      :rows="4"
-      type="text"
-      class="greetings--textarea"
-      :label="label"
-      :placeholder="placeholder"
-      @input="handleInput"
-    />
-  </section>
-</template>
-
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -71,3 +42,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <section class="w-3/4">
+    <div
+      v-if="richtext"
+      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+    >
+      <WootMessageEditor
+        v-model="greetingsMessage"
+        is-format-mode
+        enable-variables
+        class="bg-white input dark:bg-slate-900"
+        :placeholder="placeholder"
+        :min-height="4"
+        @input="handleInput"
+      />
+    </div>
+    <ResizableTextArea
+      v-else
+      v-model="greetingsMessage"
+      :rows="4"
+      type="text"
+      class="greetings--textarea"
+      :label="label"
+      :placeholder="placeholder"
+      @input="handleInput"
+    />
+  </section>
+</template>
diff --git a/app/javascript/shared/components/IframeLoader.vue b/app/javascript/shared/components/IframeLoader.vue
index 16fc3b91e..27d6a44c0 100644
--- a/app/javascript/shared/components/IframeLoader.vue
+++ b/app/javascript/shared/components/IframeLoader.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="relative overflow-hidden pb-1/2 h-full">
-    <iframe
-      v-if="url"
-      :src="url"
-      class="absolute w-full h-full top-0 left-0"
-      @load="handleIframeLoad"
-      @error="handleIframeError"
-    />
-    <article-skeleton-loader
-      v-if="isLoading"
-      class="absolute w-full h-full top-0 left-0"
-    />
-    <div
-      v-if="showEmptyState"
-      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
-    >
-      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
-    </div>
-  </div>
-</template>
-
 <script>
 import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader.vue';
 
@@ -53,3 +31,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative overflow-hidden pb-1/2 h-full">
+    <iframe
+      v-if="url"
+      :src="url"
+      class="absolute w-full h-full top-0 left-0"
+      @load="handleIframeLoad"
+      @error="handleIframeError"
+    />
+    <ArticleSkeletonLoader
+      v-if="isLoading"
+      class="absolute w-full h-full top-0 left-0"
+    />
+    <div
+      v-if="showEmptyState"
+      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
+    >
+      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index ddda31585..9849c163e 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -1,16 +1,3 @@
-<template>
-  <textarea
-    ref="textarea"
-    :placeholder="placeholder"
-    :rows="rows"
-    :value="value"
-    @input="onInput"
-    @focus="onFocus"
-    @keyup="onKeyup"
-    @blur="onBlur"
-  />
-</template>
-
 <script>
 import {
   appendSignature,
@@ -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 f4bdf0bc2..59c798378 100644
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -1,6 +1,3 @@
-<template>
-  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
-</template>
 <script>
 export default {
   props: {
@@ -32,6 +29,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/shared/components/TextArea.vue b/app/javascript/shared/components/TextArea.vue
index 1b6bc2f05..194fe891f 100644
--- a/app/javascript/shared/components/TextArea.vue
+++ b/app/javascript/shared/components/TextArea.vue
@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs font-medium"
-      :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
-      }"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300':
-          !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
-      }"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 export default {
   props: {
@@ -33,10 +5,6 @@ export default {
       type: String,
       default: '',
     },
-    type: {
-      type: String,
-      default: 'text',
-    },
     placeholder: {
       type: String,
       default: '',
@@ -57,6 +25,36 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium"
+      :class="{
+        'text-black-800': !error,
+        'text-red-400': error,
+      }"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      :class="{
+        'border-black-200 hover:border-black-300 focus:border-black-300':
+          !error,
+        'border-red-200 hover:border-red-300 focus:border-red-300': error,
+      }"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="mt-2 text-xs font-medium text-red-400">
+      {{ error }}
+    </div>
+  </label>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index cea163dc3..4928c05f0 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -1,102 +1,3 @@
-<template>
-  <div
-    role="dialog"
-    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
-  >
-    <div class="flex flex-col">
-      <div class="flex gap-2 emoji-search--wrap">
-        <input
-          ref="searchbar"
-          v-model="search"
-          type="text"
-          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0"
-          :placeholder="$t('EMOJI.PLACEHOLDER')"
-        />
-        <woot-button
-          v-if="showRemoveButton"
-          size="small"
-          variant="smooth"
-          class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
-          color-scheme="secondary"
-          @click="onClick('')"
-        >
-          {{ $t('EMOJI.REMOVE') }}
-        </woot-button>
-      </div>
-      <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
-        <h5 class="emoji-category--title">
-          {{ selectedKey }}
-        </h5>
-        <div class="emoji--row">
-          <button
-            v-for="item in filterEmojisByCategory"
-            :key="item.slug"
-            v-dompurify-html="item.emoji"
-            class="emoji--item"
-            track-by="$index"
-            @click="onClick(item.emoji)"
-          />
-        </div>
-      </div>
-      <div v-else ref="emojiItem" class="emoji-item">
-        <div v-for="category in filterAllEmojisBySearch" :key="category.slug">
-          <h5 v-if="category.emojis.length > 0" class="emoji-category--title">
-            {{ category.name }}
-          </h5>
-          <div v-if="category.emojis.length > 0" class="emoji--row">
-            <button
-              v-for="item in category.emojis"
-              :key="item.slug"
-              v-dompurify-html="item.emoji"
-              class="emoji--item"
-              track-by="$index"
-              @click="onClick(item.emoji)"
-            />
-          </div>
-        </div>
-        <div v-if="hasEmptySearchResult" class="empty-message">
-          <div class="emoji-icon">
-            <fluent-icon icon="emoji" size="48" />
-          </div>
-          <span class="empty-message--text">
-            {{ $t('EMOJI.NOT_FOUND') }}
-          </span>
-        </div>
-      </div>
-
-      <div class="emoji-dialog--footer" role="menu">
-        <ul>
-          <li>
-            <button
-              class="emoji--item"
-              :class="{ active: selectedKey === 'Search' }"
-              @click="changeCategory('Search')"
-            >
-              <fluent-icon
-                icon="search"
-                size="16"
-                class="text-slate-700 dark:text-slate-100"
-              />
-            </button>
-          </li>
-          <li
-            v-for="category in categories"
-            :key="category.slug"
-            @click="changeCategory(category.name)"
-          >
-            <button
-              v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
-              class="emoji--item"
-              :class="{ active: selectedKey === category.name }"
-              @click="changeCategory(category.name)"
-            />
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import emojis from './emojisGroup.json';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -181,6 +82,106 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    role="dialog"
+    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
+  >
+    <div class="flex flex-col">
+      <div class="flex gap-2 emoji-search--wrap">
+        <input
+          ref="searchbar"
+          v-model="search"
+          type="text"
+          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
+          :placeholder="$t('EMOJI.PLACEHOLDER')"
+        />
+        <woot-button
+          v-if="showRemoveButton"
+          size="small"
+          variant="smooth"
+          class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
+          color-scheme="secondary"
+          @click="onClick('')"
+        >
+          {{ $t('EMOJI.REMOVE') }}
+        </woot-button>
+      </div>
+      <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
+        <h5 class="emoji-category--title">
+          {{ selectedKey }}
+        </h5>
+        <div class="emoji--row">
+          <button
+            v-for="item in filterEmojisByCategory"
+            :key="item.slug"
+            v-dompurify-html="item.emoji"
+            class="emoji--item"
+            track-by="$index"
+            @click="onClick(item.emoji)"
+          />
+        </div>
+      </div>
+      <div v-else ref="emojiItem" class="emoji-item">
+        <div v-for="category in filterAllEmojisBySearch" :key="category.slug">
+          <h5 v-if="category.emojis.length > 0" class="emoji-category--title">
+            {{ category.name }}
+          </h5>
+          <div v-if="category.emojis.length > 0" class="emoji--row">
+            <button
+              v-for="item in category.emojis"
+              :key="item.slug"
+              v-dompurify-html="item.emoji"
+              class="emoji--item"
+              track-by="$index"
+              @click="onClick(item.emoji)"
+            />
+          </div>
+        </div>
+        <div v-if="hasEmptySearchResult" class="empty-message">
+          <div class="emoji-icon">
+            <FluentIcon icon="emoji" size="48" />
+          </div>
+          <span class="empty-message--text">
+            {{ $t('EMOJI.NOT_FOUND') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="emoji-dialog--footer" role="menu">
+        <ul>
+          <li>
+            <button
+              class="emoji--item"
+              :class="{ active: selectedKey === 'Search' }"
+              @click="changeCategory('Search')"
+            >
+              <FluentIcon
+                icon="search"
+                size="16"
+                class="text-slate-700 dark:text-slate-100"
+              />
+            </button>
+          </li>
+          <li
+            v-for="category in categories"
+            :key="category.slug"
+            @click="changeCategory(category.name)"
+          >
+            <button
+              v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
+              class="emoji--item"
+              :class="{ active: selectedKey === category.name }"
+              @click="changeCategory(category.name)"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
@@ -197,6 +198,7 @@ export default {
   }
 }
 </style>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/mixins';
 
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index fe6a4f2f8..e3485617c 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -1,76 +1,3 @@
-<template>
-  <div
-    v-on-clickaway="onCloseDropdown"
-    class="relative w-full mb-2"
-    @keyup.esc="onCloseDropdown"
-  >
-    <woot-button
-      variant="hollow"
-      color-scheme="secondary"
-      class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
-      @click="toggleDropdown"
-    >
-      <div class="flex gap-1">
-        <Thumbnail
-          v-if="hasValue && hasThumbnail"
-          :src="selectedItem.thumbnail"
-          size="24px"
-          :status="selectedItem.availability_status"
-          :username="selectedItem.name"
-        />
-        <div class="flex justify-between w-full min-w-0 items-center">
-          <h4
-            v-if="!hasValue"
-            class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
-          >
-            {{ multiselectorPlaceholder }}
-          </h4>
-          <h4
-            v-else
-            class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
-            :title="selectedItem.name"
-          >
-            {{ selectedItem.name }}
-          </h4>
-          <i
-            v-if="showSearchDropdown"
-            class="icon ion-chevron-up text-slate-600 mr-1"
-          />
-          <i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
-        </div>
-      </div>
-    </woot-button>
-    <div
-      :class="{ 'dropdown-pane--open': showSearchDropdown }"
-      class="dropdown-pane"
-    >
-      <div class="flex justify-between items-center mb-1">
-        <h4
-          class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
-        >
-          {{ multiselectorTitle }}
-        </h4>
-        <woot-button
-          icon="dismiss"
-          size="tiny"
-          color-scheme="secondary"
-          variant="clear"
-          @click="onCloseDropdown"
-        />
-      </div>
-      <multiselect-dropdown-items
-        v-if="showSearchDropdown"
-        :options="options"
-        :selected-items="[selectedItem]"
-        :has-thumbnail="hasThumbnail"
-        :input-placeholder="inputPlaceholder"
-        :no-search-result="noSearchResult"
-        @click="onClickSelectItem"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
@@ -139,6 +66,79 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-on-clickaway="onCloseDropdown"
+    class="relative w-full mb-2"
+    @keyup.esc="onCloseDropdown"
+  >
+    <woot-button
+      variant="hollow"
+      color-scheme="secondary"
+      class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
+      @click="toggleDropdown"
+    >
+      <div class="flex gap-1">
+        <Thumbnail
+          v-if="hasValue && hasThumbnail"
+          :src="selectedItem.thumbnail"
+          size="24px"
+          :status="selectedItem.availability_status"
+          :username="selectedItem.name"
+        />
+        <div class="flex justify-between w-full min-w-0 items-center">
+          <h4
+            v-if="!hasValue"
+            class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+          >
+            {{ multiselectorPlaceholder }}
+          </h4>
+          <h4
+            v-else
+            class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+            :title="selectedItem.name"
+          >
+            {{ selectedItem.name }}
+          </h4>
+          <i
+            v-if="showSearchDropdown"
+            class="icon ion-chevron-up text-slate-600 mr-1"
+          />
+          <i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
+        </div>
+      </div>
+    </woot-button>
+    <div
+      :class="{ 'dropdown-pane--open': showSearchDropdown }"
+      class="dropdown-pane"
+    >
+      <div class="flex justify-between items-center mb-1">
+        <h4
+          class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+        >
+          {{ multiselectorTitle }}
+        </h4>
+        <woot-button
+          icon="dismiss"
+          size="tiny"
+          color-scheme="secondary"
+          variant="clear"
+          @click="onCloseDropdown"
+        />
+      </div>
+      <MultiselectDropdownItems
+        v-if="showSearchDropdown"
+        :options="options"
+        :selected-items="[selectedItem]"
+        :has-thumbnail="hasThumbnail"
+        :input-placeholder="inputPlaceholder"
+        :no-search-result="noSearchResult"
+        @click="onClickSelectItem"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-[2.625rem] w-full;
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 4c38eb9a6..b853e4a0c 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -1,66 +1,3 @@
-<template>
-  <div class="dropdown-wrap">
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="inputPlaceholder"
-      />
-    </div>
-    <div class="flex justify-start items-start flex-auto overflow-auto">
-      <div class="w-full max-h-[10rem]">
-        <woot-dropdown-menu>
-          <woot-dropdown-item
-            v-for="option in filteredOptions"
-            :key="option.id"
-          >
-            <woot-button
-              class="multiselect-dropdown--item"
-              :variant="isActive(option) ? 'hollow' : 'clear'"
-              color-scheme="secondary"
-              :class="{
-                active: isActive(option),
-              }"
-              @click="() => onclick(option)"
-            >
-              <div class="flex items-center gap-1.5">
-                <Thumbnail
-                  v-if="hasThumbnail"
-                  :src="option.thumbnail"
-                  size="24px"
-                  :username="option.name"
-                  :status="option.availability_status"
-                  has-border
-                />
-                <div
-                  class="flex items-center justify-between w-full min-w-0 gap-2"
-                >
-                  <span
-                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-                    :title="option.name"
-                  >
-                    {{ option.name }}
-                  </span>
-                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
-                </div>
-              </div>
-            </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
-        <h4
-          v-if="noResult"
-          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-        >
-          {{ noSearchResult }}
-        </h4>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -131,6 +68,66 @@ export default {
 };
 </script>
 
+<template>
+  <div class="dropdown-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="inputPlaceholder"
+      />
+    </div>
+    <div class="flex justify-start items-start flex-auto overflow-auto">
+      <div class="w-full max-h-[10rem]">
+        <WootDropdownMenu>
+          <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
+            <woot-button
+              class="multiselect-dropdown--item"
+              :variant="isActive(option) ? 'hollow' : 'clear'"
+              color-scheme="secondary"
+              :class="{
+                active: isActive(option),
+              }"
+              @click="() => onclick(option)"
+            >
+              <div class="flex items-center gap-1.5">
+                <Thumbnail
+                  v-if="hasThumbnail"
+                  :src="option.thumbnail"
+                  size="24px"
+                  :username="option.name"
+                  :status="option.availability_status"
+                  has-border
+                />
+                <div
+                  class="flex items-center justify-between w-full min-w-0 gap-2"
+                >
+                  <span
+                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+                    :title="option.name"
+                  >
+                    {{ option.name }}
+                  </span>
+                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
+                </div>
+              </div>
+            </woot-button>
+          </WootDropdownItem>
+        </WootDropdownMenu>
+        <h4
+          v-if="noResult"
+          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        >
+          {{ noSearchResult }}
+        </h4>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-wrap {
   @apply w-full flex flex-col max-h-[12.5rem];
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
index 759287994..6694ddd78 100644
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    addLabel() {
+      this.$emit('add');
+    },
+  },
+};
+</script>
+
 <template>
   <woot-button
     variant="smooth"
@@ -10,16 +20,6 @@
   </woot-button>
 </template>
 
-<script>
-export default {
-  methods: {
-    addLabel() {
-      this.$emit('add');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .label--add {
   margin-bottom: var(--space-micro);
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
index 38cfa0899..fbe7f6e32 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
@@ -1,3 +1,7 @@
+<script>
+export default {};
+</script>
+
 <template>
   <li
     class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
@@ -5,6 +9,3 @@
     :aria-disabled="true"
   />
 </template>
-<script>
-export default {};
-</script>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
index 8b36bb1c5..65afa3123 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -1,13 +1,3 @@
-<template>
-  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
-    <span
-      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
-    >
-      {{ title }}
-    </span>
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   componentName: 'WootDropdownMenu',
@@ -19,3 +9,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
+    <span
+      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+    >
+      {{ title }}
+    </span>
+    <slot />
+  </li>
+</template>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index 3ec241968..ad2783f3a 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="dropdown-menu__item list-none mb-1"
-    :class="{
-      'is-disabled': disabled,
-    }"
-    :tabindex="disabled ? null : -1"
-    :aria-disabled="disabled"
-  >
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   name: 'WootDropdownItem',
@@ -19,13 +7,23 @@ export default {
       type: Boolean,
       default: false,
     },
-    className: {
-      type: String,
-      default: '',
-    },
   },
 };
 </script>
+
+<template>
+  <li
+    class="mb-1 list-none dropdown-menu__item"
+    :class="{
+      'is-disabled': disabled,
+    }"
+    :tabindex="disabled ? null : -1"
+    :aria-disabled="disabled"
+  >
+    <slot />
+  </li>
+</template>
+
 <style lang="scss" scoped>
 .dropdown-menu__item {
   ::v-deep {
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index a876de401..d7f81cf5c 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 4e5ee1296..95f98f01b 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
@@ -1,11 +1,3 @@
-<template>
-  <li class="sub-menu-container">
-    <ul class="sub-menu-li-container">
-      <woot-dropdown-header v-if="title" :title="title" />
-      <slot />
-    </ul>
-  </li>
-</template>
 <script>
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
 
@@ -24,6 +16,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li class="sub-menu-container">
+    <ul class="sub-menu-li-container">
+      <WootDropdownHeader v-if="title" :title="title" />
+      <slot />
+    </ul>
+  </li>
+</template>
+
 <style lang="scss" scoped>
 .sub-menu-container {
   margin-top: var(--space-micro);
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index 30f36a7bb..b3b224b58 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -1,80 +1,3 @@
-<template>
-  <div class="flex flex-col w-full max-h-[12.5rem]">
-    <div class="flex items-center justify-center mb-1">
-      <h4
-        class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
-      >
-        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
-      </h4>
-      <hotkey
-        custom-class="text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600"
-      >
-        L
-      </hotkey>
-    </div>
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
-      />
-    </div>
-    <div
-      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
-    >
-      <div class="w-full">
-        <woot-dropdown-menu>
-          <label-dropdown-item
-            v-for="label in filteredActiveLabels"
-            :key="label.title"
-            :title="label.title"
-            :color="label.color"
-            :selected="selectedLabels.includes(label.title)"
-            @click="onAddRemove(label)"
-          />
-        </woot-dropdown-menu>
-        <div
-          v-if="noResult"
-          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
-        >
-          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
-        </div>
-        <div
-          v-if="allowCreation && shouldShowCreate"
-          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
-        >
-          <woot-button
-            size="small"
-            variant="clear"
-            color-scheme="secondary"
-            icon="add"
-            is-expanded
-            class="button-new-label"
-            :is-disabled="hasExactMatchInResults"
-            @click="showCreateModal"
-          >
-            {{ createLabelPlaceholder }}
-            {{ parsedSearch }}
-          </woot-button>
-
-          <woot-modal
-            :show.sync="createModalVisible"
-            :on-close="hideCreateModal"
-          >
-            <add-label-modal
-              :prefill-title="parsedSearch"
-              @close="hideCreateModal"
-            />
-          </woot-modal>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import LabelDropdownItem from './LabelDropdownItem.vue';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
@@ -184,6 +107,83 @@ export default {
 };
 </script>
 
+<template>
+  <div class="flex flex-col w-full max-h-[12.5rem]">
+    <div class="flex items-center justify-center mb-1">
+      <h4
+        class="flex-grow m-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+      >
+        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
+      </h4>
+      <Hotkey
+        custom-class="border border-solid text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border-slate-75 dark:border-slate-600"
+      >
+        {{ 'L' }}
+      </Hotkey>
+    </div>
+    <div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
+      />
+    </div>
+    <div
+      class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
+    >
+      <div class="w-full">
+        <woot-dropdown-menu>
+          <LabelDropdownItem
+            v-for="label in filteredActiveLabels"
+            :key="label.title"
+            :title="label.title"
+            :color="label.color"
+            :selected="selectedLabels.includes(label.title)"
+            @click="onAddRemove(label)"
+          />
+        </woot-dropdown-menu>
+        <div
+          v-if="noResult"
+          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
+        >
+          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
+        </div>
+        <div
+          v-if="allowCreation && shouldShowCreate"
+          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
+        >
+          <woot-button
+            size="small"
+            variant="clear"
+            color-scheme="secondary"
+            icon="add"
+            is-expanded
+            class="button-new-label"
+            :is-disabled="hasExactMatchInResults"
+            @click="showCreateModal"
+          >
+            {{ createLabelPlaceholder }}
+            {{ parsedSearch }}
+          </woot-button>
+
+          <woot-modal
+            :show.sync="createModalVisible"
+            :on-close="hideCreateModal"
+          >
+            <AddLabelModal
+              :prefill-title="parsedSearch"
+              @close="hideCreateModal"
+            />
+          </woot-modal>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .hotkey {
   @apply flex-shrink-0;
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
index 6319b7420..0cb1e6b46 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
@@ -1,25 +1,3 @@
-<template>
-  <woot-dropdown-item>
-    <div class="item-wrap">
-      <woot-button variant="clear" @click="onClick">
-        <div class="button-wrap">
-          <div class="name-label-wrap">
-            <div
-              v-if="color"
-              class="label-color--display"
-              :style="{ backgroundColor: color }"
-            />
-            <span class="label-text" :title="title">{{ title }}</span>
-          </div>
-          <div>
-            <i v-if="selected" class="icon ion-checkmark-round" />
-          </div>
-        </div>
-      </woot-button>
-    </div>
-  </woot-dropdown-item>
-</template>
-
 <script>
 export default {
   props: {
@@ -45,6 +23,28 @@ export default {
 };
 </script>
 
+<template>
+  <woot-dropdown-item>
+    <div class="item-wrap">
+      <woot-button variant="clear" @click="onClick">
+        <div class="button-wrap">
+          <div class="name-label-wrap">
+            <div
+              v-if="color"
+              class="label-color--display"
+              :style="{ backgroundColor: color }"
+            />
+            <span class="label-text" :title="title">{{ title }}</span>
+          </div>
+          <div>
+            <i v-if="selected" class="icon ion-checkmark-round" />
+          </div>
+        </div>
+      </woot-button>
+    </div>
+  </woot-dropdown-item>
+</template>
+
 <style lang="scss" scoped>
 .item-wrap {
   @apply flex;
diff --git a/app/javascript/shared/helpers/KeyboardHelpers.js b/app/javascript/shared/helpers/KeyboardHelpers.js
index 8a64c8cb5..fdd64a083 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 d8cf0b352..6502fef39 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 6d65cb36e..fc15b772c 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 000000000..13d04568f
--- /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 000000000..6e041c7ec
--- /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 376d53bee..000000000
--- 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 6973b7e70..000000000
--- 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 149d7b7b7..000000000
--- 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 bb5a89468..3f0796b59 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 6ea906d63..000000000
--- 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 050205f70..55cd22614 100644
--- a/app/javascript/shared/mixins/specs/MockComponent.vue
+++ b/app/javascript/shared/mixins/specs/MockComponent.vue
@@ -1,9 +1,9 @@
-<template>
-  <div class="test" />
-</template>
-
 <script>
 export default {
   name: 'MockComponent',
 };
 </script>
+
+<template>
+  <div class="test" />
+</template>
diff --git a/app/javascript/shared/mixins/specs/automationMixin.spec.js b/app/javascript/shared/mixins/specs/automationMixin.spec.js
index 465e6e9b4..336e35294 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 a523c0513..000000000
--- 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 3669dcd70..000000000
--- 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 29b652bc5..a461df430 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 e17dad415..23c6061d7 100644
--- a/app/javascript/superadmin_pages/components/playground/Header.vue
+++ b/app/javascript/superadmin_pages/components/playground/Header.vue
@@ -17,7 +17,7 @@ defineProps({
     role="banner"
   >
     <a :href="responseSourcePath" class="text-woot-500 hover:underline mr-4">
-      Back
+      {{ 'Back' }}
     </a>
     <div
       class="border border-solid border-slate-100 text-slate-700 mr-4 p-2 rounded-full"
@@ -26,14 +26,14 @@ defineProps({
     </div>
     <div class="flex flex-col h-14 justify-center">
       <h1 id="page-title" class="text-base font-medium text-slate-900">
-        Robin AI playground
+        {{ 'Robin AI playground' }}
       </h1>
       <p class="text-sm text-slate-600">
-        Chat with the source
+        {{ 'Chat with the source' }}
         <span class="font-medium">
           {{ responseSourceName }}
         </span>
-        and evaluate it’s efficiency.
+        {{ 'and evaluate it’s efficiency.' }}
       </p>
     </div>
   </header>
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index f1fb4752a..eda4941cc 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 076ca9fe7..32ebf2970 100755
--- a/app/javascript/survey/App.vue
+++ b/app/javascript/survey/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div id="app" class="woot-survey-wrap">
-    <response />
-  </div>
-</template>
-
 <script>
 import Response from './views/Response.vue';
 
@@ -15,6 +9,12 @@ export default {
 };
 </script>
 
+<template>
+  <div id="app" class="woot-survey-wrap">
+    <Response />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~survey/assets/scss/woot.scss';
 </style>
diff --git a/app/javascript/survey/components/Banner.vue b/app/javascript/survey/components/Banner.vue
index b178b6797..f2a907bf6 100644
--- a/app/javascript/survey/components/Banner.vue
+++ b/app/javascript/survey/components/Banner.vue
@@ -1,16 +1,3 @@
-<template>
-  <div class="flex items-center">
-    <i
-      v-if="showSuccess"
-      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
-    />
-    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
-    <label class="text-base font-medium text-black-800 mt-4 mb-4">
-      {{ message }}
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -29,3 +16,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center">
+    <i
+      v-if="showSuccess"
+      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
+    />
+    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
+    <label class="text-base font-medium text-black-800 mt-4 mb-4">
+      {{ message }}
+    </label>
+  </div>
+</template>
diff --git a/app/javascript/survey/components/Feedback.vue b/app/javascript/survey/components/Feedback.vue
index 2b870cc47..fcae0cb31 100644
--- a/app/javascript/survey/components/Feedback.vue
+++ b/app/javascript/survey/components/Feedback.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="mt-6">
-    <label class="text-base font-medium text-black-800">
-      {{ $t('SURVEY.FEEDBACK.LABEL') }}
-    </label>
-    <text-area
-      v-model="feedback"
-      class="my-5"
-      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
-    />
-    <div class="flex items-center font-medium float-right">
-      <custom-button @click="onClick">
-        <spinner v-if="feedback" class="p-0" />
-        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
-      </custom-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import CustomButton from 'shared/components/Button.vue';
 import TextArea from 'shared/components/TextArea.vue';
@@ -29,16 +10,6 @@ export default {
     TextArea,
     Spinner,
   },
-  props: {
-    isUpdating: {
-      type: Boolean,
-      default: null,
-    },
-    isButtonDisabled: {
-      type: Boolean,
-      default: null,
-    },
-  },
   data() {
     return {
       feedback: '',
@@ -52,3 +23,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mt-6">
+    <label class="text-base font-medium text-black-800">
+      {{ $t('SURVEY.FEEDBACK.LABEL') }}
+    </label>
+    <TextArea
+      v-model="feedback"
+      class="my-5"
+      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+    />
+    <div class="flex items-center float-right font-medium">
+      <CustomButton @click="onClick">
+        <Spinner v-if="feedback" class="p-0" />
+        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+      </CustomButton>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/survey/components/Rating.vue b/app/javascript/survey/components/Rating.vue
index 530bc6c21..8d1e84bcf 100644
--- a/app/javascript/survey/components/Rating.vue
+++ b/app/javascript/survey/components/Rating.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="customer-satisfcation mb-2">
-    <div class="ratings flex py-5 px-0">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="onClick(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="customer-satisfcation mb-2">
+    <div class="ratings flex py-5 px-0">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="onClick(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .emoji-button {
   filter: grayscale(100%);
diff --git a/app/javascript/survey/i18n/locale/ca.json b/app/javascript/survey/i18n/locale/ca.json
index 72b5d72e9..d74c7f84d 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 26047db1c..98739cdb7 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 000000000..2473f114e
--- /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 7619a5f8a..f3cc6d488 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 c645ce5a4..6bfa4fafa 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="h-full w-full antialiased" :class="theme">
-    <router-view />
-    <snackbar-container />
-  </div>
-</template>
 <script>
 import SnackbarContainer from './components/SnackBar/Container.vue';
 
@@ -42,6 +36,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="h-full w-full antialiased" :class="theme">
+    <router-view />
+    <SnackbarContainer />
+  </div>
+</template>
+
 <style lang="scss">
 @tailwind base;
 @tailwind components;
diff --git a/app/javascript/v3/components/Button/SubmitButton.vue b/app/javascript/v3/components/Button/SubmitButton.vue
index a291b642e..474dde8c2 100644
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ b/app/javascript/v3/components/Button/SubmitButton.vue
@@ -1,18 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-    @click="onClick"
-  >
-    <span>{{ buttonText }}</span>
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <spinner v-if="loading" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,3 +46,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
+    @click="onClick"
+  >
+    <span>{{ buttonText }}</span>
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <Spinner v-if="loading" />
+  </button>
+</template>
diff --git a/app/javascript/v3/components/Divider/SimpleDivider.vue b/app/javascript/v3/components/Divider/SimpleDivider.vue
index e54af1747..9413aeacc 100644
--- a/app/javascript/v3/components/Divider/SimpleDivider.vue
+++ b/app/javascript/v3/components/Divider/SimpleDivider.vue
@@ -1,3 +1,14 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div class="relative my-4 section-separator">
     <div class="absolute inset-0 flex items-center" aria-hidden="true">
@@ -12,13 +23,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 16d427307..74d8ada4f 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -1,30 +1,3 @@
-<template>
-  <button
-    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
-    :class="buttonClasses"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <fluent-icon
-      v-if="icon && !trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-    <span
-      v-if="$slots.default"
-      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
-    >
-      <slot />
-    </span>
-    <fluent-icon
-      v-if="icon && trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-  </button>
-</template>
 <script setup>
 import { computed, useAttrs } from 'vue';
 
@@ -54,6 +27,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['click']);
+
 const attrs = useAttrs();
 
 const baseClasses = {
@@ -99,8 +74,6 @@ const sizeClass = computed(() => {
 
 const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
 
-const emit = defineEmits(['click']);
-
 const onClick = () => {
   if (props.disabled) {
     return;
@@ -108,3 +81,31 @@ const onClick = () => {
   emit('click');
 };
 </script>
+
+<template>
+  <button
+    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
+    :class="buttonClasses"
+    v-bind="$attrs"
+    @click="onClick"
+  >
+    <fluent-icon
+      v-if="icon && !trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+    <span
+      v-if="$slots.default"
+      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
+    >
+      <slot />
+    </span>
+    <fluent-icon
+      v-if="icon && trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+  </button>
+</template>
diff --git a/app/javascript/v3/components/Form/CheckBox.vue b/app/javascript/v3/components/Form/CheckBox.vue
index c70a122e6..fe5baf41d 100644
--- a/app/javascript/v3/components/Form/CheckBox.vue
+++ b/app/javascript/v3/components/Form/CheckBox.vue
@@ -1,13 +1,3 @@
-<template>
-  <input
-    :id="value"
-    v-model="checked"
-    type="checkbox"
-    :value="value"
-    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
-  />
-</template>
-
 <script setup>
 import { computed } from 'vue';
 
@@ -22,10 +12,20 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['input']);
+const emit = defineEmits(['update']);
 
 const checked = computed({
   get: () => props.isChecked,
   set: value => emit('update', props.value, value),
 });
 </script>
+
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
index 2a489ee76..ad427acaf 100644
--- a/app/javascript/v3/components/Form/InitialsAvatar.vue
+++ b/app/javascript/v3/components/Form/InitialsAvatar.vue
@@ -1,27 +1,6 @@
-<template>
-  <div
-    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
-    :style="style"
-    aria-hidden="true"
-  >
-    <slot>{{ initial }}</slot>
-  </div>
-</template>
-
 <script setup>
 import { computed } from 'vue';
 import { userInitial } from 'v3/helpers/CommonHelper';
-const colors = {
-  1: 'bg-ash-200 text-ash-900',
-  2: 'bg-amber-200 text-amber-900',
-  3: 'bg-pink-100 text-pink-800',
-  4: 'bg-purple-100 text-purple-800',
-  5: 'bg-indigo-100 text-indigo-800',
-  6: 'bg-grass-100 text-grass-800',
-  7: 'bg-mint-100 text-mint-800',
-  8: 'bg-orange-100 text-orange-800',
-};
 const props = defineProps({
   name: {
     type: String,
@@ -32,6 +11,16 @@ const props = defineProps({
     default: 72,
   },
 });
+const colors = {
+  1: 'bg-ash-200 text-ash-900',
+  2: 'bg-amber-200 text-amber-900',
+  3: 'bg-pink-100 text-pink-800',
+  4: 'bg-purple-100 text-purple-800',
+  5: 'bg-indigo-100 text-indigo-800',
+  6: 'bg-grass-100 text-grass-800',
+  7: 'bg-mint-100 text-mint-800',
+  8: 'bg-orange-100 text-orange-800',
+};
 const style = computed(() => ({
   fontSize: `${Math.floor(props.size / 2.5)}px`,
 }));
@@ -41,3 +30,14 @@ const colorClass = computed(() => {
 
 const initial = computed(() => userInitial(props.name));
 </script>
+
+<template>
+  <div
+    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
+    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ initial }}</slot>
+  </div>
+</template>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 63064b654..0d5dcdc02 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,39 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :icon="icon"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <template #rightOfLabel>
-      <slot />
-    </template>
-    <input
-      :id="name"
-      :name="name"
-      :type="type"
-      autocomplete="off"
-      :tabindex="tabindex"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
-      :class="{
-        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
-          hasError,
-        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
-          !hasError,
-        'px-3 py-3': spacing === 'base',
-        'px-3 py-2 mb-0': spacing === 'compact',
-        'pl-9': icon,
-      }"
-      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
-    />
-  </with-label>
-</template>
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -98,3 +62,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #rightOfLabel>
+      <slot />
+    </template>
+    <input
+      :id="name"
+      :name="name"
+      :type="type"
+      autocomplete="off"
+      :tabindex="tabindex"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :class="{
+        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
+          hasError,
+        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+      }"
+      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </WithLabel>
+</template>
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
index fb802d35d..32eff693a 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -1,3 +1,51 @@
+<script setup>
+import { computed, ref } from 'vue';
+import InitialsAvatar from './InitialsAvatar.vue';
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['change', 'delete']);
+
+const hasImageLoaded = ref(false);
+const imageLoadedError = ref(false);
+const fileInputRef = ref(null);
+
+const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
+
+const onImageLoadError = () => {
+  imageLoadedError.value = true;
+};
+
+const onImageLoad = () => {
+  hasImageLoaded.value = true;
+  imageLoadedError.value = false;
+};
+
+const openFileInput = () => {
+  fileInputRef.value.click();
+};
+
+const onImageUpload = event => {
+  const [file] = event.target.files;
+  emit('change', {
+    file,
+    url: file ? URL.createObjectURL(file) : null,
+  });
+};
+
+const onAvatarDelete = () => {
+  emit('delete');
+};
+</script>
+
 <template>
   <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
     <img
@@ -9,7 +57,7 @@
       @load="onImageLoad"
       @error="onImageLoadError"
     />
-    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
+    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
 
     <input
       ref="fileInputRef"
@@ -35,50 +83,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import { computed, ref } from 'vue';
-import InitialsAvatar from './InitialsAvatar.vue';
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emits = defineEmits(['change', 'delete']);
-
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const fileInputRef = ref(null);
-
-const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
-};
-
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-  imageLoadedError.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emits('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
-  emits('delete');
-};
-</script>
diff --git a/app/javascript/v3/components/Form/RadioTags.vue b/app/javascript/v3/components/Form/RadioTags.vue
index 7cb221132..8d2e49fb2 100644
--- a/app/javascript/v3/components/Form/RadioTags.vue
+++ b/app/javascript/v3/components/Form/RadioTags.vue
@@ -1,25 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <div class="flex gap-2 flex-wrap">
-      <woot-button
-        v-for="option in options"
-        :key="option.value"
-        :variant="value === option.value ? '' : 'hollow'"
-        :color-scheme="value === option.value ? 'primary' : 'secondary'"
-        size="small"
-        @click="$emit('input', option.value)"
-      >
-        {{ option.label }}
-      </woot-button>
-    </div>
-  </with-label>
-</template>
-
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -27,10 +5,6 @@ export default {
     WithLabel,
   },
   props: {
-    id: {
-      type: String,
-      default: '',
-    },
     options: {
       type: Array,
       default: () => [],
@@ -58,3 +32,25 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <div class="flex flex-wrap gap-2">
+      <woot-button
+        v-for="option in options"
+        :key="option.value"
+        :variant="value === option.value ? '' : 'hollow'"
+        :color-scheme="value === option.value ? 'primary' : 'secondary'"
+        size="small"
+        @click="$emit('input', option.value)"
+      >
+        {{ option.label }}
+      </woot-button>
+    </div>
+  </WithLabel>
+</template>
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 67a311b04..00334f24b 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -1,35 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :icon="icon"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <select
-      :id="id"
-      :selected="value"
-      :name="name"
-      :class="{
-        'text-ash-400': !value,
-        'text-ash-900': value,
-        'pl-9': icon,
-      }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
-      @input="onInput"
-    >
-      <option value="" disabled selected class="hidden">
-        {{ placeholder }}
-      </option>
-      <slot>
-        <option v-for="opt in options" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </slot>
-    </select>
-  </with-label>
-</template>
-
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -81,6 +49,39 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <select
+      :id="id"
+      :selected="value"
+      :name="name"
+      :class="{
+        'text-ash-400': !value,
+        'text-ash-900': value,
+        'pl-9': icon,
+      }"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+      @input="onInput"
+    >
+      <option value="" disabled selected class="hidden">
+        {{ placeholder }}
+      </option>
+      <slot>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </slot>
+    </select>
+  </WithLabel>
+</template>
+
 <style scoped>
 .select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index cb9751d62..62bcb6e2d 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -1,3 +1,16 @@
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
+
 <template>
   <button
     type="button"
@@ -20,16 +33,3 @@
     />
   </button>
 </template>
-
-<script>
-export default {
-  props: {
-    value: { type: Boolean, default: false },
-  },
-  methods: {
-    onClick() {
-      this.$emit('input', !this.value);
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/Form/Textarea.vue b/app/javascript/v3/components/Form/Textarea.vue
index 736d4f72b..8c533387c 100644
--- a/app/javascript/v3/components/Form/Textarea.vue
+++ b/app/javascript/v3/components/Form/Textarea.vue
@@ -1,31 +1,3 @@
-<template>
-  <with-label
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <textarea
-      :id="name"
-      :name="name"
-      autocomplete="off"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
-      :rows="rows"
-      :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
-          !hasError,
-        'resize-none': !allowResize,
-      }"
-      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
-    />
-  </with-label>
-</template>
 <script>
 import WithLabel from './WithLabel.vue';
 export default {
@@ -81,3 +53,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <textarea
+      :id="name"
+      :name="name"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :rows="rows"
+      :class="{
+        'focus:outline-red-600 outline-red-600': hasError,
+        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
+          !hasError,
+        'resize-none': !allowResize,
+      }"
+      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </WithLabel>
+</template>
diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
index be7fefffd..68840604b 100644
--- a/app/javascript/v3/components/Form/WithLabel.vue
+++ b/app/javascript/v3/components/Form/WithLabel.vue
@@ -1,3 +1,30 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div class="space-y-1">
     <label
@@ -30,29 +57,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index 0d4d2a866..eb502e1aa 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -1,23 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <a
-      :href="getGoogleAuthUrl()"
-      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
-    >
-      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
-      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
-        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
-      </span>
-    </a>
-    <simple-divider
-      v-if="showSeparator"
-      ref="divider"
-      :label="$t('COMMON.OR')"
-      class="uppercase"
-    />
-  </div>
-</template>
-
 <script>
 import SimpleDivider from '../Divider/SimpleDivider.vue';
 
@@ -58,3 +38,25 @@ export default {
   },
 };
 </script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
+<template>
+  <div class="flex flex-col">
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex justify-center w-full px-4 py-3 bg-white rounded-md shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="ml-2 text-base font-medium text-slate-600 dark:text-white">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+    <SimpleDivider
+      v-if="showSeparator"
+      ref="divider"
+      :label="$t('COMMON.OR')"
+      class="uppercase"
+    />
+  </div>
+</template>
diff --git a/app/javascript/v3/components/SnackBar/Container.vue b/app/javascript/v3/components/SnackBar/Container.vue
index 683480af6..07b27ef46 100644
--- a/app/javascript/v3/components/SnackBar/Container.vue
+++ b/app/javascript/v3/components/SnackBar/Container.vue
@@ -1,18 +1,3 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
-  >
-    <snackbar-item
-      v-for="snackbarAlertMessage in snackbarAlertMessages"
-      :key="snackbarAlertMessage.key"
-      :message="snackbarAlertMessage.message"
-      :action="snackbarAlertMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import SnackbarItem from './Item.vue';
@@ -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 b87845ad6..25c719c76 100644
--- a/app/javascript/v3/components/SnackBar/Item.vue
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -1,3 +1,20 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isActionPresent() {
+      return this.action && this.action.message;
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
@@ -13,25 +30,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    message: { type: String, default: '' },
-    action: {
-      type: Object,
-      default: () => ({}),
-    },
-    showButton: Boolean,
-    duration: {
-      type: [String, Number],
-      default: 3000,
-    },
-  },
-  computed: {
-    isActionPresent() {
-      return this.action && this.action.message;
-    },
-  },
-};
-</script>
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 51fa95f7c..906009883 100644
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="flex items-center justify-center h-full w-full">
-    <spinner color-scheme="primary" size="" />
-    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
-  </div>
-</template>
 <script>
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { verifyPasswordToken } from '../../../api/auth';
@@ -34,3 +28,10 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center justify-center h-full w-full">
+    <Spinner color-scheme="primary" size="" />
+    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index c5f2ba7fe..bbe0e01ec 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 44be9fd0c..c703f3f58 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 e1621db18..75ae10e9a 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,57 +1,3 @@
-<template>
-  <div class="h-full w-full dark:bg-slate-900">
-    <div v-show="!isLoading" class="flex h-full">
-      <div
-        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
-      >
-        <div class="px-8 max-w-[560px] w-full overflow-auto">
-          <div class="mb-4">
-            <img
-              :src="globalConfig.logo"
-              :alt="globalConfig.installationName"
-              class="h-8 w-auto block dark:hidden"
-            />
-            <img
-              v-if="globalConfig.logoDark"
-              :src="globalConfig.logoDark"
-              :alt="globalConfig.installationName"
-              class="h-8 w-auto hidden dark:block"
-            />
-            <h2
-              class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
-            >
-              {{ $t('REGISTER.TRY_WOOT') }}
-            </h2>
-          </div>
-          <signup-form />
-          <div class="text-sm text-slate-800 dark:text-woot-50 px-1">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
-            <router-link class="text-link" to="/app/login">
-              {{
-                useInstallationName(
-                  $t('LOGIN.TITLE'),
-                  globalConfig.installationName
-                )
-              }}
-            </router-link>
-          </div>
-        </div>
-      </div>
-      <testimonials
-        v-if="isAChatwootInstance"
-        class="flex-1"
-        @resize-containers="resizeContainers"
-      />
-    </div>
-    <div
-      v-show="isLoading"
-      class="flex items-center justify-center h-full w-full"
-    >
-      <spinner color-scheme="primary" size="" />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -85,3 +31,57 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-full h-full dark:bg-slate-900">
+    <div v-show="!isLoading" class="flex h-full">
+      <div
+        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
+      >
+        <div class="px-8 max-w-[560px] w-full overflow-auto">
+          <div class="mb-4">
+            <img
+              :src="globalConfig.logo"
+              :alt="globalConfig.installationName"
+              class="block w-auto h-8 dark:hidden"
+            />
+            <img
+              v-if="globalConfig.logoDark"
+              :src="globalConfig.logoDark"
+              :alt="globalConfig.installationName"
+              class="hidden w-auto h-8 dark:block"
+            />
+            <h2
+              class="mt-6 text-3xl font-medium text-left mb-7 text-slate-900 dark:text-woot-50"
+            >
+              {{ $t('REGISTER.TRY_WOOT') }}
+            </h2>
+          </div>
+          <SignupForm />
+          <div class="px-1 text-sm text-slate-800 dark:text-woot-50">
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
+            <router-link class="text-link" to="/app/login">
+              {{
+                useInstallationName(
+                  $t('LOGIN.TITLE'),
+                  globalConfig.installationName
+                )
+              }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <Testimonials
+        v-if="isAChatwootInstance"
+        class="flex-1"
+        @resizeContainers="resizeContainers"
+      />
+    </div>
+    <div
+      v-show="isLoading"
+      class="flex items-center justify-center w-full h-full"
+    >
+      <Spinner color-scheme="primary" size="" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index 898e26ddd..e2a30aa2f 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -1,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 be15a8575..718efc7ef 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -1,36 +1,3 @@
-<template>
-  <div
-    v-if="testimonials.length"
-    class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
-  >
-    <img
-      src="/assets/images/auth/top-left.svg"
-      class="left-0 absolute h-40 w-40 top-0"
-    />
-    <img
-      src="/assets/images/auth/bottom-right.svg"
-      class="right-0 absolute h-40 w-40 bottom-0"
-    />
-    <img
-      src="/assets/images/auth/auth--bg.svg"
-      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
-    />
-    <div class="flex items-center justify-center flex-col h-full w-full z-50">
-      <div class="flex items-start justify-center p-6">
-        <testimonial-card
-          v-for="(testimonial, index) in testimonials"
-          :key="testimonial.id"
-          :review-content="testimonial.authorReview"
-          :author-image="testimonial.authorImage"
-          :author-name="testimonial.authorName"
-          :author-designation="testimonial.authorCompany"
-          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import TestimonialCard from './TestimonialCard.vue';
 import { getTestimonialContent } from '../../../../../api/testimonials';
@@ -50,13 +17,46 @@ export default {
       } catch (error) {
         // Ignoring the error as the UI wouldn't break
       } finally {
-        this.$emit('resize-containers', !!this.testimonials.length);
+        this.$emit('resizeContainers', !!this.testimonials.length);
       }
     },
   },
 };
 </script>
 
+<template>
+  <div
+    v-if="testimonials.length"
+    class="relative flex-1 hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
+  >
+    <img
+      src="/assets/images/auth/top-left.svg"
+      class="absolute top-0 left-0 w-40 h-40"
+    />
+    <img
+      src="/assets/images/auth/bottom-right.svg"
+      class="absolute bottom-0 right-0 w-40 h-40"
+    />
+    <img
+      src="/assets/images/auth/auth--bg.svg"
+      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
+    />
+    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
+      <div class="flex items-start justify-center p-6">
+        <TestimonialCard
+          v-for="(testimonial, index) in testimonials"
+          :key="testimonial.id"
+          :review-content="testimonial.authorReview"
+          :author-image="testimonial.authorImage"
+          :author-name="testimonial.authorName"
+          :author-designation="testimonial.authorCompany"
+          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .center--img {
 }
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
index af8341379..c68ce53f5 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
-  >
-    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
-      {{ reviewContent }}
-    </p>
-    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
-      <div class="bg-white rounded-full p-1">
-        <img :src="authorImage" class="h-8 w-8 rounded-full" />
-      </div>
-      <div class="ml-2">
-        <div class="text-sm font-medium">{{ authorName }}</div>
-        <div class="text-xs">{{ authorDesignation }}</div>
-      </div>
-    </div>
-  </div>
-</template>
 <script>
 export default {
   props: {
@@ -38,3 +20,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
+  >
+    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
+      {{ reviewContent }}
+    </p>
+    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
+      <div class="bg-white rounded-full p-1">
+        <img :src="authorImage" class="h-8 w-8 rounded-full" />
+      </div>
+      <div class="ml-2">
+        <div class="text-sm font-medium">{{ authorName }}</div>
+        <div class="text-xs">{{ authorDesignation }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 5a481dd5a..677b6b87f 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 2ef6da67d..fbd3d17d4 100644
--- a/app/javascript/v3/views/onboarding/OnboardingStep.vue
+++ b/app/javascript/v3/views/onboarding/OnboardingStep.vue
@@ -1,3 +1,27 @@
+<script>
+export default {
+  name: 'OnboardingStep',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
@@ -24,29 +48,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'OnboardingStep',
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-    isComplete: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
 <style scoped>
 .hide-before-of-last:last-child::before {
   display: none;
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 072323d53..6645465c5 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -1,26 +1,3 @@
-<template>
-  <div
-    v-if="!conversationSize && isFetchingList"
-    class="flex flex-1 items-center h-full bg-black-25 justify-center"
-    :class="{ dark: prefersDarkMode }"
-  >
-    <spinner size="" />
-  </div>
-  <div
-    v-else
-    class="flex flex-col justify-end h-full"
-    :class="{
-      'is-mobile': isMobile,
-      'is-widget-right': isRightAligned,
-      'is-bubble-hidden': hideMessageBubble,
-      'is-flat-design': isWidgetStyleFlat,
-      dark: prefersDarkMode,
-    }"
-  >
-    <router-view />
-  </div>
-</template>
-
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
@@ -60,10 +37,7 @@ export default {
   computed: {
     ...mapGetters({
       activeCampaign: 'campaign/getActiveCampaign',
-      campaigns: 'campaign/getCampaigns',
       conversationSize: 'conversation/getConversationSize',
-      currentUser: 'contacts/getCurrentUser',
-      hasFetched: 'agent/getHasFetched',
       hideMessageBubble: 'appConfig/getHideMessageBubble',
       isFetchingList: 'conversation/getIsFetchingList',
       isRightAligned: 'appConfig/isRightAligned',
@@ -114,7 +88,7 @@ export default {
       'setBubbleVisibility',
       'setColorScheme',
     ]),
-    ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
+    ...mapActions('conversation', ['fetchOldConversations']),
     ...mapActions('campaign', [
       'initCampaigns',
       'executeCampaign',
@@ -354,6 +328,29 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!conversationSize && isFetchingList"
+    class="flex items-center justify-center flex-1 h-full bg-black-25"
+    :class="{ dark: prefersDarkMode }"
+  >
+    <Spinner size="" />
+  </div>
+  <div
+    v-else
+    class="flex flex-col justify-end h-full"
+    :class="{
+      'is-mobile': isMobile,
+      'is-widget-right': isRightAligned,
+      'is-bubble-hidden': hideMessageBubble,
+      'is-flat-design': isWidgetStyleFlat,
+      dark: prefersDarkMode,
+    }"
+  >
+    <router-view />
+  </div>
+</template>
+
 <style lang="scss">
 @import '~widget/assets/scss/woot.scss';
 </style>
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index c38726031..e7d592abd 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 f5bad52fc..c1c0cc8d0 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -1,64 +1,3 @@
-<template>
-  <div class="chat-bubble-wrap">
-    <div
-      v-if="
-        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
-      "
-      class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
-    >
-      <div
-        v-dompurify-html="formatMessage(message, false)"
-        class="message-content text-slate-900 dark:text-slate-50"
-      />
-      <email-input
-        v-if="isTemplateEmail"
-        :message-id="messageId"
-        :message-content-attributes="messageContentAttributes"
-      />
-
-      <integration-card
-        v-if="isIntegrations"
-        :message-id="messageId"
-        :meeting-data="messageContentAttributes.data"
-      />
-    </div>
-    <div v-if="isOptions">
-      <chat-options
-        :title="message"
-        :options="messageContentAttributes.items"
-        :hide-fields="!!messageContentAttributes.submitted_values"
-        @click="onOptionSelect"
-      />
-    </div>
-    <chat-form
-      v-if="isForm && !messageContentAttributes.submitted_values"
-      :items="messageContentAttributes.items"
-      :button-label="messageContentAttributes.button_label"
-      :submitted-values="messageContentAttributes.submitted_values"
-      @submit="onFormSubmit"
-    />
-    <div v-if="isCards">
-      <chat-card
-        v-for="item in messageContentAttributes.items"
-        :key="item.title"
-        :media-url="item.media_url"
-        :title="item.title"
-        :description="item.description"
-        :actions="item.actions"
-      />
-    </div>
-    <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items" />
-    </div>
-    <customer-satisfaction
-      v-if="isCSAT"
-      :message-content-attributes="messageContentAttributes.submitted_values"
-      :message-id="messageId"
-    />
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ChatCard from 'shared/components/ChatCard.vue';
@@ -141,3 +80,64 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <div
+      v-if="
+        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
+      "
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
+    >
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content text-slate-900 dark:text-slate-50"
+      />
+      <EmailInput
+        v-if="isTemplateEmail"
+        :message-id="messageId"
+        :message-content-attributes="messageContentAttributes"
+      />
+
+      <IntegrationCard
+        v-if="isIntegrations"
+        :message-id="messageId"
+        :meeting-data="messageContentAttributes.data"
+      />
+    </div>
+    <div v-if="isOptions">
+      <ChatOptions
+        :title="message"
+        :options="messageContentAttributes.items"
+        :hide-fields="!!messageContentAttributes.submitted_values"
+        @click="onOptionSelect"
+      />
+    </div>
+    <ChatForm
+      v-if="isForm && !messageContentAttributes.submitted_values"
+      :items="messageContentAttributes.items"
+      :button-label="messageContentAttributes.button_label"
+      :submitted-values="messageContentAttributes.submitted_values"
+      @submit="onFormSubmit"
+    />
+    <div v-if="isCards">
+      <ChatCard
+        v-for="item in messageContentAttributes.items"
+        :key="item.title"
+        :media-url="item.media_url"
+        :title="item.title"
+        :description="item.description"
+        :actions="item.actions"
+      />
+    </div>
+    <div v-if="isArticle">
+      <ChatArticle :items="messageContentAttributes.items" />
+    </div>
+    <CustomerSatisfaction
+      v-if="isCSAT"
+      :message-content-attributes="messageContentAttributes.submitted_values"
+      :message-id="messageId"
+    />
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index e8f8e7b09..a84d8fc7b 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/app/javascript/widget/components/AgentTypingBubble.vue
@@ -1,3 +1,11 @@
+<script>
+import darkModeMixing from 'widget/mixins/darkModeMixin.js';
+export default {
+  name: 'AgentTypingBubble',
+  mixins: [darkModeMixing],
+};
+</script>
+
 <template>
   <div class="agent-message-wrap">
     <div class="agent-message">
@@ -17,14 +25,6 @@
   </div>
 </template>
 
-<script>
-import darkModeMixing from 'widget/mixins/darkModeMixin.js';
-export default {
-  name: 'AgentTypingBubble',
-  mixins: [darkModeMixing],
-};
-</script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
index 1b0193043..45d898bf9 100644
--- a/app/javascript/widget/components/ArticleCategoryCard.vue
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -1,20 +1,3 @@
-<template>
-  <div>
-    <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
-      {{ title }}
-    </h3>
-    <article-list :articles="articles" @click="onArticleClick" />
-    <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
-      :style="{ color: widgetColor }"
-      @click="$emit('view-all')"
-    >
-      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <fluent-icon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import ArticleList from './ArticleList.vue';
@@ -42,6 +25,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{ title }}
+    </h3>
+    <ArticleList :articles="articles" @click="onArticleClick" />
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      :style="{ color: widgetColor }"
+      @click="$emit('viewAll')"
+    >
+      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .see-articles {
   color: var(--brand-textButtonClear);
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
index 3d29ca611..1a98e7aa4 100644
--- a/app/javascript/widget/components/ArticleHero.vue
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -1,12 +1,3 @@
-<template>
-  <category-card
-    :title="$t('PORTAL.POPULAR_ARTICLES')"
-    :articles="articles.slice(0, 6)"
-    @view-all="$emit('view-all')"
-    @view="onArticleClick"
-  />
-</template>
-
 <script>
 import CategoryCard from './ArticleCategoryCard.vue';
 export default {
@@ -16,10 +7,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    categoryPath: {
-      type: String,
-      default: '',
-    },
   },
   methods: {
     onArticleClick(link) {
@@ -29,4 +16,11 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <CategoryCard
+    :title="$t('PORTAL.POPULAR_ARTICLES')"
+    :articles="articles.slice(0, 6)"
+    @viewAll="$emit('viewAll')"
+    @view="onArticleClick"
+  />
+</template>
diff --git a/app/javascript/widget/components/ArticleList.vue b/app/javascript/widget/components/ArticleList.vue
index 4043bf060..5aef7e265 100644
--- a/app/javascript/widget/components/ArticleList.vue
+++ b/app/javascript/widget/components/ArticleList.vue
@@ -1,15 +1,3 @@
-<template>
-  <ul role="list" class="py-2">
-    <article-list-item
-      v-for="article in articles"
-      :key="article.slug"
-      :link="article.link"
-      :title="article.title"
-      @click="onClick"
-    />
-  </ul>
-</template>
-
 <script>
 import ArticleListItem from './ArticleListItem.vue';
 
@@ -33,3 +21,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ul role="list" class="py-2">
+    <ArticleListItem
+      v-for="article in articles"
+      :key="article.slug"
+      :link="article.link"
+      :title="article.title"
+      @click="onClick"
+    />
+  </ul>
+</template>
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/ArticleListItem.vue
index f16afa5e1..a7e828649 100644
--- a/app/javascript/widget/components/ArticleListItem.vue
+++ b/app/javascript/widget/components/ArticleListItem.vue
@@ -1,18 +1,3 @@
-<template>
-  <li
-    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
-    role="button"
-    @click="onClick"
-  >
-    <button class="underline-offset-2 text-sm leading-6 text-left">
-      {{ title }}
-    </button>
-    <span class="pl-1 arrow">
-      <fluent-icon icon="arrow-right" size="14" />
-    </span>
-  </li>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -38,3 +23,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li
+    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
+    role="button"
+    @click="onClick"
+  >
+    <button class="underline-offset-2 text-sm leading-6 text-left">
+      {{ title }}
+    </button>
+    <span class="pl-1 arrow">
+      <FluentIcon icon="arrow-right" size="14" />
+    </span>
+  </li>
+</template>
diff --git a/app/javascript/widget/components/ArticleSearch.vue b/app/javascript/widget/components/ArticleSearch.vue
index 8ce663321..275d44ec1 100644
--- a/app/javascript/widget/components/ArticleSearch.vue
+++ b/app/javascript/widget/components/ArticleSearch.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
-      >
-        ⌘K
-      </kbd>
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 export default {
@@ -49,3 +23,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center px-2 py-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 px-2 pl-6 pr-1 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+      <kbd
+        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
+      >
+        {{ '⌘K' }}
+      </kbd>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue
index 7e51b887b..10ecd7afb 100644
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ b/app/javascript/widget/components/AvailableAgents.vue
@@ -1,7 +1,3 @@
-<template>
-  <grouped-avatars :users="users" />
-</template>
-
 <script>
 import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
 
@@ -25,3 +21,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <GroupedAvatars :users="users" />
+</template>
diff --git a/app/javascript/widget/components/Banner.vue b/app/javascript/widget/components/Banner.vue
index 173dfabb2..bdd11a5b7 100644
--- a/app/javascript/widget/components/Banner.vue
+++ b/app/javascript/widget/components/Banner.vue
@@ -1,11 +1,3 @@
-<template>
-  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
-    <span>
-      {{ bannerMessage }}
-    </span>
-  </div>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
@@ -31,6 +23,14 @@ export default {
 };
 </script>
 
+<template>
+  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
+    <span>
+      {{ bannerMessage }}
+    </span>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 .banner {
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index 5d038a66b..0779a675f 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -1,21 +1,3 @@
-<template>
-  <file-upload
-    ref="upload"
-    :size="4096 * 2048"
-    :accept="allowedFileTypes"
-    :data="{
-      direct_upload_url: '/api/v1/widget/direct_uploads',
-      direct_upload: true,
-    }"
-    @input-file="onFileUpload"
-  >
-    <button class="icon-button flex items-center justify-center">
-      <fluent-icon v-if="!isUploading.image" icon="attach" />
-      <spinner v-if="isUploading" size="small" />
-    </button>
-  </file-upload>
-</template>
-
 <script>
 import FileUpload from 'vue-upload-component';
 import Spinner from 'shared/components/Spinner.vue';
@@ -150,3 +132,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <FileUpload
+    ref="upload"
+    :size="4096 * 2048"
+    :accept="allowedFileTypes"
+    :data="{
+      direct_upload_url: '/api/v1/widget/direct_uploads',
+      direct_upload: true,
+    }"
+    @input-file="onFileUpload"
+  >
+    <button class="icon-button flex items-center justify-center">
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
+    </button>
+  </FileUpload>
+</template>
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 7d755ef68..ab6b396e8 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -1,45 +1,3 @@
-<template>
-  <footer
-    v-if="!hideReplyBox"
-    class="relative z-50 mb-1"
-    :class="{
-      'rounded-lg': !isWidgetStyleFlat,
-      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
-        hasReplyTo,
-    }"
-  >
-    <footer-reply-to
-      v-if="hasReplyTo"
-      :in-reply-to="inReplyTo"
-      @dismiss="inReplyTo = null"
-    />
-    <chat-input-wrap
-      class="shadow-sm"
-      :on-send-message="handleSendMessage"
-      :on-send-attachment="handleSendAttachment"
-    />
-  </footer>
-  <div v-else>
-    <custom-button
-      class="font-medium"
-      block
-      :bg-color="widgetColor"
-      :text-color="textColor"
-      @click="startNewConversation"
-    >
-      {{ $t('START_NEW_CONVERSATION') }}
-    </custom-button>
-    <custom-button
-      v-if="showEmailTranscriptButton"
-      type="clear"
-      class="font-normal"
-      @click="sendTranscript"
-    >
-      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
-    </custom-button>
-  </div>
-</template>
-
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -59,12 +17,6 @@ export default {
     FooterReplyTo,
   },
   mixins: [routerMixin],
-  props: {
-    msg: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       inReplyTo: null,
@@ -161,6 +113,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <footer
+    v-if="!hideReplyBox"
+    class="relative z-50 mb-1"
+    :class="{
+      'rounded-lg': !isWidgetStyleFlat,
+      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
+        hasReplyTo,
+    }"
+  >
+    <FooterReplyTo
+      v-if="hasReplyTo"
+      :in-reply-to="inReplyTo"
+      @dismiss="inReplyTo = null"
+    />
+    <ChatInputWrap
+      class="shadow-sm"
+      :on-send-message="handleSendMessage"
+      :on-send-attachment="handleSendAttachment"
+    />
+  </footer>
+  <div v-else>
+    <CustomButton
+      class="font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      @click="startNewConversation"
+    >
+      {{ $t('START_NEW_CONVERSATION') }}
+    </CustomButton>
+    <CustomButton
+      v-if="showEmailTranscriptButton"
+      type="clear"
+      class="font-normal"
+      @click="sendTranscript"
+    >
+      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
+    </CustomButton>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 079f337aa..5083f6ef5 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -1,52 +1,4 @@
-<template>
-  <header
-    class="flex justify-between p-5 w-full"
-    :class="$dm('bg-white', 'dark:bg-slate-900')"
-  >
-    <div class="flex items-center">
-      <button
-        v-if="showBackButton"
-        class="-ml-3 px-2"
-        @click="onBackButtonClick"
-      >
-        <fluent-icon
-          icon="chevron-left"
-          size="24"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
-        />
-      </button>
-      <img
-        v-if="avatarUrl"
-        class="h-8 w-8 rounded-full mr-3"
-        :src="avatarUrl"
-        alt="avatar"
-      />
-      <div>
-        <div
-          class="font-medium text-base leading-4 flex items-center"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
-        >
-          <span v-dompurify-html="title" class="mr-1" />
-          <div
-            :class="`h-2 w-2 rounded-full
-              ${isOnline ? 'bg-green-500' : 'hidden'}`"
-          />
-        </div>
-        <div
-          class="text-xs mt-1 leading-3"
-          :class="$dm('text-black-700', 'dark:text-slate-400')"
-        >
-          {{ replyWaitMessage }}
-        </div>
-      </div>
-    </div>
-    <header-actions :show-popout-button="showPopoutButton" />
-  </header>
-</template>
-
 <script>
-import { mapGetters } from 'vuex';
-
 import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -84,9 +36,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -104,3 +53,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="flex justify-between w-full p-5"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
+    <div class="flex items-center">
+      <button
+        v-if="showBackButton"
+        class="px-2 -ml-3"
+        @click="onBackButtonClick"
+      >
+        <FluentIcon
+          icon="chevron-left"
+          size="24"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        />
+      </button>
+      <img
+        v-if="avatarUrl"
+        class="w-8 h-8 mr-3 rounded-full"
+        :src="avatarUrl"
+        alt="avatar"
+      />
+      <div>
+        <div
+          class="flex items-center text-base font-medium leading-4"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        >
+          <span v-dompurify-html="title" class="mr-1" />
+          <div
+            :class="`h-2 w-2 rounded-full
+              ${isOnline ? 'bg-green-500' : 'hidden'}`"
+          />
+        </div>
+        <div
+          class="mt-1 text-xs leading-3"
+          :class="$dm('text-black-700', 'dark:text-slate-400')"
+        >
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+    </div>
+    <HeaderActions :show-popout-button="showPopoutButton" />
+  </header>
+</template>
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 144c90700..864985fde 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,35 +1,3 @@
-<template>
-  <header
-    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
-  >
-    <div
-      class="flex items-start"
-      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
-    >
-      <img
-        v-if="avatarUrl"
-        class="h-12 rounded-full"
-        :src="avatarUrl"
-        alt="Avatar"
-      />
-      <header-actions
-        :show-popout-button="showPopoutButton"
-        :show-end-conversation-button="false"
-      />
-    </div>
-    <h2
-      v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="$dm('text-slate-900', 'dark:text-slate-50')"
-    />
-    <p
-      v-dompurify-html="introBody"
-      class="text-base leading-normal"
-      :class="$dm('text-slate-700', 'dark:text-slate-200')"
-    />
-  </header>
-</template>
-
 <script>
 import HeaderActions from './HeaderActions.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -60,3 +28,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
+  >
+    <div
+      class="flex items-start"
+      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
+    >
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
+      <HeaderActions
+        :show-popout-button="showPopoutButton"
+        :show-end-conversation-button="false"
+      />
+    </div>
+    <h2
+      v-dompurify-html="introHeading"
+      class="mt-4 text-2xl mb-1.5 font-medium"
+      :class="$dm('text-slate-900', 'dark:text-slate-50')"
+    />
+    <p
+      v-dompurify-html="introBody"
+      class="text-base leading-normal"
+      :class="$dm('text-slate-700', 'dark:text-slate-200')"
+    />
+  </header>
+</template>
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index f285a64d5..c68ec3fdf 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -1,52 +1,3 @@
-<template>
-  <div
-    class="chat-message--input is-focused"
-    :class="$dm('bg-white ', 'dark:bg-slate-600')"
-    @keydown.esc="hideEmojiPicker"
-  >
-    <resizable-text-area
-      id="chat-input"
-      ref="chatInput"
-      v-model="userInput"
-      :rows="1"
-      :aria-label="$t('CHAT_PLACEHOLDER')"
-      :placeholder="$t('CHAT_PLACEHOLDER')"
-      class="form-input user-message-input is-focused"
-      :class="inputColor"
-      @typing-off="onTypingOff"
-      @typing-on="onTypingOn"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-    <div class="button-wrap">
-      <chat-attachment-button
-        v-if="showAttachment"
-        :class="$dm('text-black-900', 'dark:text-slate-100')"
-        :on-attach="onSendAttachment"
-      />
-      <button
-        v-if="hasEmojiPickerEnabled"
-        class="flex items-center justify-center icon-button"
-        aria-label="Emoji picker"
-        @click="toggleEmojiPicker"
-      >
-        <fluent-icon icon="emoji" :class="emojiIconColor" />
-      </button>
-      <emoji-input
-        v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
-        :on-click="emojiOnClick"
-        @keydown.esc="hideEmojiPicker"
-      />
-      <chat-send-button
-        v-if="showSendButton"
-        :on-click="handleButtonClick"
-        :color="widgetColor"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 
@@ -174,6 +125,55 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="chat-message--input is-focused"
+    :class="$dm('bg-white ', 'dark:bg-slate-600')"
+    @keydown.esc="hideEmojiPicker"
+  >
+    <ResizableTextArea
+      id="chat-input"
+      ref="chatInput"
+      v-model="userInput"
+      :rows="1"
+      :aria-label="$t('CHAT_PLACEHOLDER')"
+      :placeholder="$t('CHAT_PLACEHOLDER')"
+      class="form-input user-message-input is-focused"
+      :class="inputColor"
+      @typingOff="onTypingOff"
+      @typingOn="onTypingOn"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div class="button-wrap">
+      <ChatAttachmentButton
+        v-if="showAttachment"
+        :class="$dm('text-black-900', 'dark:text-slate-100')"
+        :on-attach="onSendAttachment"
+      />
+      <button
+        v-if="hasEmojiPickerEnabled"
+        class="flex items-center justify-center icon-button"
+        :aria-label="$t('EMOJI.ARIA_LABEL')"
+        @click="toggleEmojiPicker"
+      >
+        <FluentIcon icon="emoji" :class="emojiIconColor" />
+      </button>
+      <EmojiInput
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+        @keydown.esc="hideEmojiPicker"
+      />
+      <ChatSendButton
+        v-if="showSendButton"
+        :on-click="handleButtonClick"
+        :color="widgetColor"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/ChatMessage.vue b/app/javascript/widget/components/ChatMessage.vue
index c3a586f23..2b1d9d6ec 100755
--- a/app/javascript/widget/components/ChatMessage.vue
+++ b/app/javascript/widget/components/ChatMessage.vue
@@ -1,18 +1,3 @@
-<template>
-  <UserMessage
-    v-if="isUserMessage"
-    :id="`cwmsg-${message.id}`"
-    :message="message"
-    :reply-to="replyTo"
-  />
-  <AgentMessage
-    v-else
-    :id="`cwmsg-${message.id}`"
-    :message="message"
-    :reply-to="replyTo"
-  />
-</template>
-
 <script>
 import AgentMessage from 'widget/components/AgentMessage.vue';
 import UserMessage from 'widget/components/UserMessage.vue';
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <UserMessage
+    v-if="isUserMessage"
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+  <AgentMessage
+    v-else
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+</template>
+
 <style scoped lang="scss">
 .message-wrap {
   display: flex;
diff --git a/app/javascript/widget/components/ChatSendButton.vue b/app/javascript/widget/components/ChatSendButton.vue
index 8a8819962..c6db0fcf5 100755
--- a/app/javascript/widget/components/ChatSendButton.vue
+++ b/app/javascript/widget/components/ChatSendButton.vue
@@ -1,15 +1,3 @@
-<template>
-  <button
-    type="submit"
-    :disabled="disabled"
-    class="icon-button flex items-center justify-center ml-1"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
-    <spinner v-else size="small" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -39,3 +27,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    type="submit"
+    :disabled="disabled"
+    class="icon-button flex items-center justify-center ml-1"
+    @click="onClick"
+  >
+    <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
+    <Spinner v-else size="small" />
+  </button>
+</template>
diff --git a/app/javascript/widget/components/ContinueChatButton.vue b/app/javascript/widget/components/ContinueChatButton.vue
index 144bcc37f..509d2c168 100644
--- a/app/javascript/widget/components/ContinueChatButton.vue
+++ b/app/javascript/widget/components/ContinueChatButton.vue
@@ -1,3 +1,25 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: { FluentIcon },
+  props: {
+    title: {
+      type: String,
+      default: 'Continue your chat',
+    },
+    content: {
+      type: String,
+      default: 'Chat with us',
+    },
+    unreadCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+
 <template>
   <button
     type="button"
@@ -7,7 +29,7 @@
     <div
       class="w-10 h-10 rounded-md bg-slate-75 dark:bg-slate-700 text-lg flex items-center justify-center flex-shrink-0"
     >
-      <fluent-icon
+      <FluentIcon
         icon="chat"
         size="16"
         class="text-slate-600 dark:text-slate-400"
@@ -33,29 +55,7 @@
       </p>
     </div>
     <div class="w-8 h-10 flex items-center justify-center">
-      <fluent-icon icon="chevron-right" />
+      <FluentIcon icon="chevron-right" />
     </div>
   </button>
 </template>
-
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon },
-  props: {
-    title: {
-      type: String,
-      default: 'Continue your chat',
-    },
-    content: {
-      type: String,
-      default: 'Chat with us',
-    },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index c0fa424ba..4213a0a57 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -1,26 +1,3 @@
-<template>
-  <div class="conversation--container" :class="colorSchemeClass">
-    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
-      <div v-if="isFetchingList" class="message--loader">
-        <spinner />
-      </div>
-      <div
-        v-for="groupedMessage in groupedMessages"
-        :key="groupedMessage.date"
-        class="messages-wrap"
-      >
-        <date-separator :date="groupedMessage.date" />
-        <chat-message
-          v-for="message in groupedMessage.messages"
-          :key="message.id"
-          :message="message"
-        />
-      </div>
-      <agent-typing-bubble v-if="showStatusIndicator" />
-    </div>
-  </div>
-</template>
-
 <script>
 import ChatMessage from 'widget/components/ChatMessage.vue';
 import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
@@ -118,6 +95,29 @@ export default {
 };
 </script>
 
+<template>
+  <div class="conversation--container" :class="colorSchemeClass">
+    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
+      <div v-if="isFetchingList" class="message--loader">
+        <Spinner />
+      </div>
+      <div
+        v-for="groupedMessage in groupedMessages"
+        :key="groupedMessage.date"
+        class="messages-wrap"
+      >
+        <DateSeparator :date="groupedMessage.date" />
+        <ChatMessage
+          v-for="message in groupedMessage.messages"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
+      <AgentTypingBubble v-if="showStatusIndicator" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/DragWrapper.vue b/app/javascript/widget/components/DragWrapper.vue
index 873622a7c..85b8573d1 100644
--- a/app/javascript/widget/components/DragWrapper.vue
+++ b/app/javascript/widget/components/DragWrapper.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    :style="{ transform: `translateX(${dragDistance}px)` }"
-    class="will-change-transform"
-    @touchstart="handleTouchStart"
-    @touchmove="handleTouchMove"
-    @touchend="resetPosition"
-  >
-    <slot />
-  </div>
-</template>
-
 <script>
 export default {
   name: 'DragWrapper',
@@ -59,3 +47,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    :style="{ transform: `translateX(${dragDistance}px)` }"
+    class="will-change-transform"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+    @touchend="resetPosition"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 44879ad06..faba119f0 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -1,27 +1,3 @@
-<template>
-  <div class="file flex flex-row items-center p-3 cursor-pointer">
-    <div class="icon-wrap" :style="{ color: textColor }">
-      <fluent-icon icon="document" size="28" />
-    </div>
-    <div class="meta">
-      <div class="title" :class="titleColor" :style="{ color: textColor }">
-        {{ title }}
-      </div>
-      <div class="link-wrap mb-1">
-        <a
-          class="download"
-          rel="noreferrer noopener nofollow"
-          target="_blank"
-          :style="{ color: textColor }"
-          :href="url"
-        >
-          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -82,6 +58,30 @@ export default {
 };
 </script>
 
+<template>
+  <div class="file flex flex-row items-center p-3 cursor-pointer">
+    <div class="icon-wrap" :style="{ color: textColor }">
+      <FluentIcon icon="document" size="28" />
+    </div>
+    <div class="meta">
+      <div class="title" :class="titleColor" :style="{ color: textColor }">
+        {{ title }}
+      </div>
+      <div class="link-wrap mb-1">
+        <a
+          class="download"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          :style="{ color: textColor }"
+          :href="url"
+        >
+          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/FooterReplyTo.vue b/app/javascript/widget/components/FooterReplyTo.vue
index e0124196d..f16870cda 100644
--- a/app/javascript/widget/components/FooterReplyTo.vue
+++ b/app/javascript/widget/components/FooterReplyTo.vue
@@ -1,20 +1,3 @@
-<template>
-  <div
-    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
-  >
-    <div class="items-center flex-grow truncate">
-      <strong>Replying to:</strong>
-      {{ inReplyTo.content || replyToAttachment }}
-    </div>
-    <button
-      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
-      @click="$emit('dismiss')"
-    >
-      <fluent-icon icon="dismiss" size="12" />
-    </button>
-  </div>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -39,3 +22,20 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
+  >
+    <div class="items-center flex-grow truncate">
+      <strong>{{ $t('FOOTER_REPLY_TO.REPLY_TO') }}</strong>
+      {{ inReplyTo.content || replyToAttachment }}
+    </div>
+    <button
+      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
+      @click="$emit('dismiss')"
+    >
+      <FluentIcon icon="dismiss" size="12" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/Form/Input.vue b/app/javascript/widget/components/Form/Input.vue
index ffa9edef2..3c1c7a81c 100644
--- a/app/javascript/widget/components/Form/Input.vue
+++ b/app/javascript/widget/components/Form/Input.vue
@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <input
-      :type="type"
-      class="border rounded w-full py-2 px-3 leading-tight outline-none"
-      :class="inputHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-    <div
-      v-if="!error && helpText"
-      class="text-red-400 mt-2 text-xs leading-3 font-medium"
-    >
-      {{ helpText }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -84,3 +56,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <input
+      :type="type"
+      class="border rounded w-full py-2 px-3 leading-tight outline-none"
+      :class="inputHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
+      {{ error }}
+    </div>
+    <div
+      v-if="!error && helpText"
+      class="text-red-400 mt-2 text-xs leading-3 font-medium"
+    >
+      {{ helpText }}
+    </div>
+  </label>
+</template>
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index c7fafa916..68ea3f8cb 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -1,90 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative mt-2">
-    <div
-      class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
-      :class="inputHasError"
-    >
-      <div
-        class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
-        :class="dropdownClass"
-        @click="toggleCountryDropdown"
-      >
-        <h5 v-if="activeCountry.emoji" class="text-xl mb-0">
-          {{ activeCountry.emoji }}
-        </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="py-2 pr-0 pl-2 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        :value="phoneNumber"
-        type="phoneInput"
-        class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
-        name="phoneNumber"
-        :placeholder="placeholder"
-        :class="inputLightAndDarkModeColor"
-        @input="onChange"
-        @blur="context.blurHandler"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="closeDropdown"
-      :class="dropdownBackgroundClass"
-      class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
-      @keydown.up="moveSelectionUp"
-      @keydown.down="moveSelectionDown"
-      @keydown.enter="onSelect"
-    >
-      <div class="sticky top-0" :class="dropdownBackgroundClass">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search country"
-          class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
-        />
-      </div>
-      <div
-        v-for="(country, index) in items"
-        ref="dropdownItem"
-        :key="index"
-        class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
-        :class="[
-          dropdownItemClass,
-          country.id === activeCountryCode ? activeDropdownItemClass : '',
-          index === selectedIndex ? focusedDropdownItemClass : '',
-        ]"
-        @click="onSelectCountry(country)"
-      >
-        <span v-if="country.emoji" class="mr-2 text-xl">{{
-          country.emoji
-        }}</span>
-        <span class="truncate text-sm leading-5">
-          {{ country.name }}
-        </span>
-        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
-      </div>
-      <div v-if="items.length === 0">
-        <span
-          class="text-sm mt-4 justify-center text-center flex"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
-        >
-          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -307,6 +220,93 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative mt-2 phone-input--wrap">
+    <div
+      class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
+      :class="inputHasError"
+    >
+      <div
+        class="flex items-center justify-between h-full px-2 py-2 cursor-pointer country-emoji--wrap"
+        :class="dropdownClass"
+        @click="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
+          {{ activeCountry.emoji }}
+        </h5>
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="py-2 pl-2 pr-0 text-base"
+        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="phoneInput"
+        class="w-full h-full py-2 pl-2 pr-3 leading-tight border-0 rounded-r outline-none"
+        name="phoneNumber"
+        :placeholder="placeholder"
+        :class="inputLightAndDarkModeColor"
+        @input="onChange"
+        @blur="context.blurHandler"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="closeDropdown"
+      :class="dropdownBackgroundClass"
+      class="absolute z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded shadow-lg country-dropdown top-12"
+      @keydown.up="moveSelectionUp"
+      @keydown.down="moveSelectionDown"
+      @keydown.enter="onSelect"
+    >
+      <div class="sticky top-0" :class="dropdownBackgroundClass">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
+          class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
+          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+        />
+      </div>
+      <div
+        v-for="(country, index) in items"
+        :key="index"
+        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
+        :class="[
+          dropdownItemClass,
+          country.id === activeCountryCode ? activeDropdownItemClass : '',
+          index === selectedIndex ? focusedDropdownItemClass : '',
+        ]"
+        @click="onSelectCountry(country)"
+      >
+        <span v-if="country.emoji" class="mr-2 text-xl">{{
+          country.emoji
+        }}</span>
+        <span class="text-sm leading-5 truncate">
+          {{ country.name }}
+        </span>
+        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="items.length === 0">
+        <span
+          class="flex justify-center mt-4 text-sm text-center"
+          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        >
+          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .phone-input--wrap {
diff --git a/app/javascript/widget/components/Form/TextArea.vue b/app/javascript/widget/components/Form/TextArea.vue
index 0b9255e75..3532b09f0 100644
--- a/app/javascript/widget/components/Form/TextArea.vue
+++ b/app/javascript/widget/components/Form/TextArea.vue
@@ -1,24 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="isTextAreaHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -28,10 +7,6 @@ export default {
       type: String,
       default: '',
     },
-    type: {
-      type: String,
-      default: 'text',
-    },
     placeholder: {
       type: String,
       default: '',
@@ -73,6 +48,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium leading-3"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      :class="isTextAreaHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="mt-2 text-xs font-medium leading-3 text-red-400">
+      {{ error }}
+    </div>
+  </label>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;
diff --git a/app/javascript/widget/components/GroupedAvatars.vue b/app/javascript/widget/components/GroupedAvatars.vue
index 0841214d6..bb6906e68 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -1,22 +1,3 @@
-<template>
-  <div class="flex">
-    <span
-      v-for="(user, index) in users"
-      :key="user.id"
-      :class="`${
-        index ? '-ml-4' : ''
-      } inline-block rounded-full text-white shadow-solid`"
-    >
-      <thumbnail
-        size="36px"
-        :username="user.name"
-        :src="user.avatar"
-        has-border
-      />
-    </span>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -31,3 +12,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex">
+    <span
+      v-for="(user, index) in users"
+      :key="user.id"
+      :class="`${
+        index ? '-ml-4' : ''
+      } inline-block rounded-full text-white shadow-solid`"
+    >
+      <Thumbnail
+        size="36px"
+        :username="user.name"
+        :src="user.avatar"
+        has-border
+      />
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 1fa4d9f39..df8b5fdbf 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -1,47 +1,3 @@
-<template>
-  <div v-if="showHeaderActions" class="actions flex items-center">
-    <button
-      v-if="
-        canLeaveConversation &&
-        hasEndConversationEnabled &&
-        showEndConversationButton
-      "
-      class="button transparent compact"
-      :title="$t('END_CONVERSATION')"
-      @click="resolveConversation"
-    >
-      <fluent-icon
-        icon="sign-out"
-        size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-    <button
-      v-if="showPopoutButton"
-      class="button transparent compact new-window--button"
-      @click="popoutWindow"
-    >
-      <fluent-icon
-        icon="open"
-        size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-    <button
-      class="button transparent compact close-button"
-      :class="{
-        'rn-close-button': isRNWebView,
-      }"
-      @click="closeWindow"
-    >
-      <fluent-icon
-        icon="dismiss"
-        size="24"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
-      />
-    </button>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
@@ -120,6 +76,52 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div v-if="showHeaderActions" class="actions flex items-center">
+    <button
+      v-if="
+        canLeaveConversation &&
+        hasEndConversationEnabled &&
+        showEndConversationButton
+      "
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <FluentIcon
+        icon="sign-out"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+    <button
+      v-if="showPopoutButton"
+      class="button transparent compact new-window--button"
+      @click="popoutWindow"
+    >
+      <FluentIcon
+        icon="open"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+    <button
+      class="button transparent compact close-button"
+      :class="{
+        'rn-close-button': isRNWebView,
+      }"
+      @click="closeWindow"
+    >
+      <FluentIcon
+        icon="dismiss"
+        size="24"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
+    </button>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ImageBubble.vue b/app/javascript/widget/components/ImageBubble.vue
index 8bf078400..08bca3464 100644
--- a/app/javascript/widget/components/ImageBubble.vue
+++ b/app/javascript/widget/components/ImageBubble.vue
@@ -1,3 +1,21 @@
+<script>
+export default {
+  props: {
+    url: { type: String, default: '' },
+    thumb: { type: String, default: '' },
+    readableTime: { type: String, default: '' },
+  },
+  methods: {
+    onImgError() {
+      this.$emit('error');
+    },
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
 <template>
   <a
     :href="url"
@@ -17,23 +35,6 @@
   </a>
 </template>
 
-<script>
-export default {
-  props: {
-    url: { type: String, default: '' },
-    thumb: { type: String, default: '' },
-    readableTime: { type: String, default: '' },
-  },
-  methods: {
-    onImgError() {
-      this.$emit('error');
-    },
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/MessageReplyButton.vue b/app/javascript/widget/components/MessageReplyButton.vue
index 4f8bf4a25..16520f1e8 100644
--- a/app/javascript/widget/components/MessageReplyButton.vue
+++ b/app/javascript/widget/components/MessageReplyButton.vue
@@ -1,12 +1,3 @@
-<template>
-  <button
-    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
-    @click="$emit('click')"
-  >
-    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
-  </button>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -15,3 +6,12 @@ export default {
   components: { FluentIcon },
 };
 </script>
+
+<template>
+  <button
+    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
+    @click="$emit('click')"
+  >
+    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
+  </button>
+</template>
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 3ff597c67..596ba16d9 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 919f1bcfe..ac2d255b1 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/app/javascript/widget/components/ReplyToChip.vue
@@ -1,15 +1,3 @@
-<template>
-  <button
-    class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
-    @click="navigateTo(replyTo.id)"
-  >
-    <fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
-    <div class="truncate max-w-[8rem]">
-      {{ replyTo.content || replyToAttachment }}
-    </div>
-  </button>
-</template>
-
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -58,3 +46,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
+    @click="navigateTo(replyTo.id)"
+  >
+    <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <div class="truncate max-w-[8rem]">
+      {{ replyTo.content || replyToAttachment }}
+    </div>
+  </button>
+</template>
diff --git a/app/javascript/widget/components/SearchArticle.vue b/app/javascript/widget/components/SearchArticle.vue
index df38af763..0f8c2c28b 100644
--- a/app/javascript/widget/components/SearchArticle.vue
+++ b/app/javascript/widget/components/SearchArticle.vue
@@ -1,29 +1,3 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
-      <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
-      >
-        ⌘K
-      </kbd>
-    </div>
-  </div>
-</template>
-
 <script>
 import { debounce } from '@chatwoot/utils';
 export default {
@@ -49,3 +23,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center h-8 px-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 px-2 pl-6 pr-1 m-0 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
+      <kbd
+        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
+      >
+        {{ '⌘K' }}
+      </kbd>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 984dfbe3f..18aaaccac 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
-    <div class="flex items-center justify-between">
-      <div class="  ">
-        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
-          {{
-            isOnline
-              ? $t('TEAM_AVAILABILITY.ONLINE')
-              : $t('TEAM_AVAILABILITY.OFFLINE')
-          }}
-        </div>
-        <div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
-          {{ replyWaitMessage }}
-        </div>
-      </div>
-      <available-agents v-if="isOnline" :agents="availableAgents" />
-    </div>
-    <button
-      class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
-      :style="{ color: widgetColor }"
-      @click="startConversation"
-    >
-      <span class="pr-2 text-sm">
-        {{
-          hasConversation
-            ? $t('CONTINUE_CONVERSATION')
-            : $t('START_CONVERSATION')
-        }}
-      </span>
-      <fluent-icon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -59,10 +25,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
   },
 
   computed: {
@@ -84,7 +46,7 @@ export default {
   },
   methods: {
     startConversation() {
-      this.$emit('start-conversation');
+      this.$emit('startConversation');
       if (!this.hasConversation) {
         IFrameHelper.sendMessage({
           event: 'onEvent',
@@ -96,3 +58,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+    <div class="flex items-center justify-between">
+      <div class="">
+        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
+          {{
+            isOnline
+              ? $t('TEAM_AVAILABILITY.ONLINE')
+              : $t('TEAM_AVAILABILITY.OFFLINE')
+          }}
+        </div>
+        <div class="mt-1 text-sm text-slate-500 dark:text-slate-100">
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
+    </div>
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
+      :style="{ color: widgetColor }"
+      @click="startConversation"
+    >
+      <span class="pr-2 text-sm">
+        {{
+          hasConversation
+            ? $t('CONTINUE_CONVERSATION')
+            : $t('START_CONVERSATION')
+        }}
+      </span>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index cefd0cc99..b90ad9011 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -1,28 +1,3 @@
-<template>
-  <div class="chat-bubble-wrap">
-    <button
-      class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-50')"
-      @click="onClickMessage"
-    >
-      <div v-if="showSender" class="row--agent-block">
-        <thumbnail
-          :src="avatarUrl"
-          size="20px"
-          :username="agentName"
-          :status="availabilityStatus"
-        />
-        <span v-dompurify-html="agentName" class="agent--name" />
-        <span v-dompurify-html="companyName" class="company--name" />
-      </div>
-      <div
-        v-dompurify-html="formatMessage(message, false)"
-        class="message-content"
-      />
-    </button>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -105,6 +80,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <button
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-50')"
+      @click="onClickMessage"
+    >
+      <div v-if="showSender" class="row--agent-block">
+        <Thumbnail
+          :src="avatarUrl"
+          size="20px"
+          :username="agentName"
+          :status="availabilityStatus"
+        />
+        <span v-dompurify-html="agentName" class="agent--name" />
+        <span v-dompurify-html="companyName" class="company--name" />
+      </div>
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content"
+      />
+    </button>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .chat-bubble {
diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue
index 875457c42..54c3f4753 100644
--- a/app/javascript/widget/components/UnreadMessageList.vue
+++ b/app/javascript/widget/components/UnreadMessageList.vue
@@ -1,49 +1,3 @@
-<template>
-  <div class="unread-wrap">
-    <div class="close-unread-wrap">
-      <button class="button small close-unread-button" @click="closeFullView">
-        <span class="flex items-center">
-          <fluent-icon class="mr-1" icon="dismiss" size="12" />
-          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
-        </span>
-      </button>
-    </div>
-    <div class="unread-messages">
-      <unread-message
-        v-for="(message, index) in messages"
-        :key="message.id"
-        :message-type="message.messageType"
-        :message-id="message.id"
-        :show-sender="!index"
-        :sender="message.sender"
-        :message="getMessageContent(message)"
-        :campaign-id="message.campaignId"
-      />
-    </div>
-
-    <div class="open-read-view-wrap">
-      <button
-        v-if="unreadMessageCount"
-        class="button clear-button"
-        @click="openConversationView"
-      >
-        <span
-          class="flex items-center"
-          :class="{
-            'is-background-light': isBackgroundLighter,
-          }"
-          :style="{
-            color: widgetColor,
-          }"
-        >
-          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
-          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
-        </span>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import configMixin from '../mixins/configMixin';
@@ -98,6 +52,53 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="unread-wrap">
+    <div class="close-unread-wrap">
+      <button class="button small close-unread-button" @click="closeFullView">
+        <span class="flex items-center">
+          <FluentIcon class="mr-1" icon="dismiss" size="12" />
+          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+    <div class="unread-messages">
+      <UnreadMessage
+        v-for="(message, index) in messages"
+        :key="message.id"
+        :message-type="message.messageType"
+        :message-id="message.id"
+        :show-sender="!index"
+        :sender="message.sender"
+        :message="getMessageContent(message)"
+        :campaign-id="message.campaignId"
+      />
+    </div>
+
+    <div class="open-read-view-wrap">
+      <button
+        v-if="unreadMessageCount"
+        class="button clear-button"
+        @click="openConversationView"
+      >
+        <span
+          class="flex items-center"
+          :class="{
+            'is-background-light': isBackgroundLighter,
+          }"
+          :style="{
+            color: widgetColor,
+          }"
+        >
+          <FluentIcon class="mr-2" size="16" icon="arrow-right" />
+          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables';
 
diff --git a/app/javascript/widget/components/UserAvatar.vue b/app/javascript/widget/components/UserAvatar.vue
index c6120b3ce..f8a713723 100755
--- a/app/javascript/widget/components/UserAvatar.vue
+++ b/app/javascript/widget/components/UserAvatar.vue
@@ -1,6 +1,3 @@
-<template>
-  <div class="user-avatar" :class="size" :style="getBgImage" />
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -27,6 +24,10 @@ export default {
 };
 </script>
 
+<template>
+  <div class="user-avatar" :class="size" :style="getBgImage" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 5a97422db..7c7d844e9 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 eed90865f..0887c0730 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -1,11 +1,3 @@
-<template>
-  <div
-    v-dompurify-html="formatMessage(message, false)"
-    class="chat-bubble user"
-    :style="{ background: widgetColor, color: textColor }"
-  />
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { getContrastingTextColor } from '@chatwoot/utils';
@@ -18,10 +10,6 @@ export default {
       type: String,
       default: '',
     },
-    status: {
-      type: String,
-      default: '',
-    },
     widgetColor: {
       type: String,
       default: '',
@@ -35,6 +23,14 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-dompurify-html="formatMessage(message, false)"
+    class="chat-bubble user"
+    :style="{ background: widgetColor, color: textColor }"
+  />
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/VideoBubble.vue b/app/javascript/widget/components/VideoBubble.vue
index 0ba72d363..3196c6ff2 100644
--- a/app/javascript/widget/components/VideoBubble.vue
+++ b/app/javascript/widget/components/VideoBubble.vue
@@ -4,14 +4,15 @@ defineProps({
   readableTime: { type: String, default: '' },
 });
 
-const emits = defineEmits(['error']);
+const emit = defineEmits(['error']);
 
 const onVideoError = () => {
-  emits('error');
+  emit('error');
 };
 </script>
+
 <template>
-  <div class="block relative max-w-full">
+  <div class="relative block max-w-full">
     <video
       class="w-full max-w-[250px] h-auto"
       :src="url"
@@ -19,7 +20,7 @@ const onVideoError = () => {
       @error="onVideoError"
     />
     <span
-      class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+      class="absolute text-xs text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
     >
       {{ readableTime }}
     </span>
diff --git a/app/javascript/widget/components/dropdown/DropdownMenu.vue b/app/javascript/widget/components/dropdown/DropdownMenu.vue
index 85db8ad21..a8a34ec9a 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenu.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenu.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="relative">
-    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
-      <slot name="button" />
-    </button>
-
-    <!-- to close when clicked on space around it-->
-    <button
-      v-if="isOpen"
-      tabindex="-1"
-      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
-      @click="toggleMenu"
-    />
-
-    <!--dropdown menu-->
-    <transition
-      enter-active-class="transition-all duration-200 ease-out"
-      leave-active-class="transition-all duration-750 ease-in"
-      enter-class="opacity-0 scale-75"
-      enter-to-class="opacity-100 scale-100"
-      leave-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-75"
-    >
-      <div
-        v-if="isOpen"
-        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
-        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
-      >
-        <slot name="content" />
-      </div>
-    </transition>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -74,6 +40,41 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative">
+    <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
+      <slot name="button" />
+    </button>
+
+    <!-- to close when clicked on space around it-->
+    <button
+      v-if="isOpen"
+      tabindex="-1"
+      class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
+      @click="toggleMenu"
+    />
+
+    <!--dropdown menu-->
+    <transition
+      enter-active-class="transition-all duration-200 ease-out"
+      leave-active-class="transition-all duration-750 ease-in"
+      enter-class="opacity-0 scale-75"
+      enter-to-class="opacity-100 scale-100"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-75"
+    >
+      <div
+        v-if="isOpen"
+        class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
+        :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <slot name="content" />
+      </div>
+    </transition>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
index 5665b3ea8..ae1853317 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
@@ -1,14 +1,3 @@
-<template>
-  <button :class="['menu-item', itemClass]" @click="action">
-    <fluent-icon
-      v-if="icon"
-      :icon="iconName"
-      :size="iconSize"
-      :class="iconClass"
-    />
-    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
-  </button>
-</template>
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
@@ -51,6 +40,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button class="menu-item" :class="[itemClass]" @click="action">
+    <FluentIcon
+      v-if="icon"
+      :icon="iconName"
+      :size="iconSize"
+      :class="iconClass"
+    />
+    <span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
+  </button>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index dad629a16..338344154 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -1,42 +1,3 @@
-<template>
-  <div
-    class="w-full h-full bg-slate-25 dark:bg-slate-800"
-    :class="{ 'overflow-auto': isOnHomeView }"
-    @keydown.esc="closeWindow"
-  >
-    <div class="flex flex-col h-full relative">
-      <div
-        class="header-wrap sticky top-0 z-40 transition-all"
-        :class="{
-          expanded: !isHeaderCollapsed,
-          collapsed: isHeaderCollapsed,
-          'custom-header-shadow': isHeaderCollapsed,
-          ...opacityClass,
-        }"
-      >
-        <chat-header-expanded
-          v-if="!isHeaderCollapsed"
-          :intro-heading="channelConfig.welcomeTitle"
-          :intro-body="channelConfig.welcomeTagline"
-          :avatar-url="channelConfig.avatarUrl"
-          :show-popout-button="appConfig.showPopoutButton"
-        />
-        <chat-header
-          v-if="isHeaderCollapsed"
-          :title="channelConfig.websiteName"
-          :avatar-url="channelConfig.avatarUrl"
-          :show-popout-button="appConfig.showPopoutButton"
-          :available-agents="availableAgents"
-          :show-back-button="showBackButton"
-        />
-      </div>
-      <banner />
-      <router-view />
-
-      <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
-    </div>
-  </div>
-</template>
 <script>
 import Banner from '../Banner.vue';
 import Branding from 'shared/components/Branding.vue';
@@ -67,7 +28,6 @@ export default {
     ...mapGetters({
       appConfig: 'appConfig/getAppConfig',
       availableAgents: 'agent/availableAgents',
-      widgetColor: 'appConfig/getWidgetColor',
     }),
     portal() {
       return window.chatwootWebChannel.portal;
@@ -141,6 +101,46 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    class="w-full h-full bg-slate-25 dark:bg-slate-800"
+    :class="{ 'overflow-auto': isOnHomeView }"
+    @keydown.esc="closeWindow"
+  >
+    <div class="relative flex flex-col h-full">
+      <div
+        class="sticky top-0 z-40 transition-all header-wrap"
+        :class="{
+          expanded: !isHeaderCollapsed,
+          collapsed: isHeaderCollapsed,
+          'custom-header-shadow': isHeaderCollapsed,
+          ...opacityClass,
+        }"
+      >
+        <ChatHeaderExpanded
+          v-if="!isHeaderCollapsed"
+          :intro-heading="channelConfig.welcomeTitle"
+          :intro-body="channelConfig.welcomeTagline"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+        />
+        <ChatHeader
+          v-if="isHeaderCollapsed"
+          :title="channelConfig.websiteName"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+          :available-agents="availableAgents"
+          :show-back-button="showBackButton"
+        />
+      </div>
+      <Banner />
+      <router-view />
+
+      <Branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
 @import '~widget/assets/scss/mixins';
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index f022215bd..65d8209ba 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -1,32 +1,3 @@
-<template>
-  <div
-    v-if="!!items.length"
-    class="chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <div v-for="item in items" :key="item.link" class="article-item">
-      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title flex items-center text-black-900 font-medium">
-          <fluent-icon
-            icon="link"
-            class="mr-1"
-            :class="$dm('text-black-900', 'dark:text-slate-50')"
-          />
-          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
-            item.title
-          }}</span>
-        </span>
-        <span
-          class="description"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
-        >
-          {{ truncateMessage(item.description) }}
-        </span>
-      </a>
-    </div>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -46,6 +17,35 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!!items.length"
+    class="chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
+    <div v-for="item in items" :key="item.link" class="article-item">
+      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
+        <span class="title flex items-center text-black-900 font-medium">
+          <FluentIcon
+            icon="link"
+            class="mr-1"
+            :class="$dm('text-black-900', 'dark:text-slate-50')"
+          />
+          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
+            item.title
+          }}</span>
+        </span>
+        <span
+          class="description"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        >
+          {{ truncateMessage(item.description) }}
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index be7176076..2d95569eb 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 6ce22d26b..e96c81648 100644
--- a/app/javascript/widget/components/template/IntegrationCard.vue
+++ b/app/javascript/widget/components/template/IntegrationCard.vue
@@ -1,33 +1,3 @@
-<template>
-  <div>
-    <button
-      class="button join-call-button"
-      color-scheme="secondary"
-      :is-loading="isLoading"
-      :style="{
-        background: widgetColor,
-        borderColor: widgetColor,
-        color: textColor,
-      }"
-      @click="joinTheCall"
-    >
-      <fluent-icon icon="video-add" class="mr-2" />
-      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
-    </button>
-    <div v-if="dyteAuthToken" class="video-call--container">
-      <iframe
-        :src="meetingLink"
-        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
-      />
-      <button
-        class="button small join-call-button leave-room-button"
-        @click="leaveTheRoom"
-      >
-        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
-      </button>
-    </div>
-  </div>
-</template>
 <script>
 import IntegrationAPIClient from 'widget/api/integration';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -82,6 +52,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <button
+      class="button join-call-button"
+      color-scheme="secondary"
+      :is-loading="isLoading"
+      :style="{
+        background: widgetColor,
+        borderColor: widgetColor,
+        color: textColor,
+      }"
+      @click="joinTheCall"
+    >
+      <FluentIcon icon="video-add" class="mr-2" />
+      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="button small join-call-button leave-room-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/composables/specs/useMessage.spec.js b/app/javascript/widget/composables/specs/useMessage.spec.js
new file mode 100644
index 000000000..1498c87af
--- /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 000000000..97b7a7800
--- /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 2e76a6b05..5a5454c44 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 13cd889c8..a7c676c13 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 36a5202bd..ff2c0c5a7 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 83b442e51..33399e09b 100644
--- a/app/javascript/widget/i18n/locale/en.json
+++ b/app/javascript/widget/i18n/locale/en.json
@@ -70,7 +70,8 @@
         "REQUIRED_ERROR": "Phone Number is required",
         "DIAL_CODE_VALID_ERROR": "Please select a country code",
         "VALID_ERROR": "Please enter a valid phone number",
-        "DROPDOWN_EMPTY": "No results found"
+        "DROPDOWN_EMPTY": "No results found",
+        "DROPDOWN_SEARCH": "Search country"
       },
       "MESSAGE": {
         "LABEL": "Message",
@@ -91,7 +92,8 @@
   },
   "EMOJI": {
     "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "NOT_FOUND": "No emoji match your search",
+    "ARIA_LABEL": "Emoji picker"
   },
   "CSAT": {
     "TITLE": "Rate your conversation",
@@ -133,5 +135,8 @@
     "fallback": {
       "CONTENT": "has shared a url"
     }
+  },
+  "FOOTER_REPLY_TO": {
+    "REPLY_TO": "Replying to:"
   }
 }
diff --git a/app/javascript/widget/i18n/locale/hr.json b/app/javascript/widget/i18n/locale/hr.json
index 23d3383d5..e817ba165 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 6daedd2bb..e16ae3097 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 8adadabfd..5f4cf1db1 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 0e2cf74ee..158305259 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 000000000..83b442e51
--- /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 dfa1e0e6a..000000000
--- 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 a6443ccd6..000000000
--- 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 4a5d587ba..c9525a706 100644
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="bg-white h-full">
-    <iframe-loader :url="link" />
-  </div>
-</template>
-
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
@@ -20,3 +14,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="bg-white h-full">
+    <IframeLoader :url="link" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Campaigns.vue b/app/javascript/widget/views/Campaigns.vue
index d28d0e4f4..42c639f95 100644
--- a/app/javascript/widget/views/Campaigns.vue
+++ b/app/javascript/widget/views/Campaigns.vue
@@ -1,7 +1,3 @@
-<template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -38,3 +34,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 35b4ab899..5695f9e65 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,38 +1,3 @@
-<template>
-  <div
-    class="z-50 rounded-md w-full flex flex-1 flex-col"
-    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
-  >
-    <div class="px-4 pt-4 w-full">
-      <team-availability
-        :available-agents="availableAgents"
-        :has-conversation="!!conversationSize"
-        :unread-count="unreadMessageCount"
-        @start-conversation="startConversation"
-      />
-    </div>
-    <div v-if="showArticles" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-hero
-          v-if="
-            !articleUiFlags.isFetching &&
-            !articleUiFlags.isError &&
-            popularArticles.length
-          "
-          :articles="popularArticles"
-          @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
-        />
-      </div>
-    </div>
-    <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-card-skeleton-loader />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import TeamAvailability from 'widget/components/TeamAvailability.vue';
 import ArticleHero from 'widget/components/ArticleHero.vue';
@@ -51,20 +16,9 @@ export default {
     ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, routerMixin, darkModeMixin],
-  props: {
-    hasFetched: {
-      type: Boolean,
-      default: false,
-    },
-    isCampaignViewClicked: {
-      type: Boolean,
-      default: false,
-    },
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
-      activeCampaign: 'campaign/getActiveCampaign',
       conversationSize: 'conversation/getConversationSize',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       popularArticles: 'article/popularArticles',
@@ -134,3 +88,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="z-50 flex flex-col flex-1 w-full rounded-md"
+    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
+  >
+    <div class="w-full px-4 pt-4">
+      <TeamAvailability
+        :available-agents="availableAgents"
+        :has-conversation="!!conversationSize"
+        :unread-count="unreadMessageCount"
+        @startConversation="startConversation"
+      />
+    </div>
+    <div v-if="showArticles" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+        <ArticleHero
+          v-if="
+            !articleUiFlags.isFetching &&
+            !articleUiFlags.isError &&
+            popularArticles.length
+          "
+          :articles="popularArticles"
+          @view="openArticleInArticleViewer"
+          @viewAll="viewAllArticles"
+        />
+      </div>
+    </div>
+    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+        <ArticleCardSkeletonLoader />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Messages.vue b/app/javascript/widget/views/Messages.vue
index ce473b521..bbfb24129 100644
--- a/app/javascript/widget/views/Messages.vue
+++ b/app/javascript/widget/views/Messages.vue
@@ -1,13 +1,3 @@
-<template>
-  <div
-    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
-  >
-    <div class="flex flex-1 overflow-auto">
-      <conversation-wrap :grouped-messages="groupedMessages" />
-    </div>
-    <chat-footer class="px-5" />
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -26,3 +16,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
+  >
+    <div class="flex flex-1 overflow-auto">
+      <ConversationWrap :grouped-messages="groupedMessages" />
+    </div>
+    <ChatFooter class="px-5" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue
index 254782db7..cb122a2f3 100644
--- a/app/javascript/widget/views/PreChatForm.vue
+++ b/app/javascript/widget/views/PreChatForm.vue
@@ -1,8 +1,3 @@
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
-  </div>
-</template>
 <script>
 import PreChatForm from '../components/PreChat/Form.vue';
 import configMixin from '../mixins/configMixin';
@@ -62,3 +57,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
+  </div>
+</template>
diff --git a/app/javascript/widget/views/UnreadMessages.vue b/app/javascript/widget/views/UnreadMessages.vue
index c37b0763c..fbf7fd48c 100644
--- a/app/javascript/widget/views/UnreadMessages.vue
+++ b/app/javascript/widget/views/UnreadMessages.vue
@@ -1,7 +1,3 @@
-<template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -26,3 +22,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>
diff --git a/app/jobs/hook_job.rb b/app/jobs/hook_job.rb
index 29c6dccfe..1912fac01 100644
--- a/app/jobs/hook_job.rb
+++ b/app/jobs/hook_job.rb
@@ -9,6 +9,8 @@ class HookJob < ApplicationJob
       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 @@ class HookJob < ApplicationJob
     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 1fb93c51a..b9ed804d3 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 @@ class Attachment < ApplicationRecord
       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 17f4fc045..8158ab733 100644
--- a/app/models/inbox.rb
+++ b/app/models/inbox.rb
@@ -129,7 +129,16 @@ class Inbox < ApplicationRecord
   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 b746bd92b..9629bdd84 100644
--- a/app/models/integrations/app.rb
+++ b/app/models/integrations/app.rb
@@ -34,10 +34,14 @@ class Integrations::App
     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 @@ class Integrations::App
 
   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 7a5e89326..cb0dd3109 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 98c4f608d..42cf3460d 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 5784c3b6e..95d9cc6a5 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 538f7ee81..24c19595c 100644
--- a/config/integration/apps.yml
+++ b/config/integration/apps.yml
@@ -8,126 +8,71 @@
 # 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
-dialogflow:
-  id: dialogflow
-  logo: dialogflow.svg
-  i18n_key: dialogflow
-  action: /dialogflow
-  hook_type: inbox
+dashboard_apps:
+  id: dashboard_apps
+  logo: dashboard_apps.png
+  i18n_key: dashboard_apps
+  hook_type: account
   allow_multiple_hooks: true
-  settings_json_schema:  {
-    "type": "object",
-    "properties": {
-      "project_id": { "type": "string" },
-      "credentials": { "type": "object" }
-    },
-    "required": ["project_id", "credentials"],
-    "additionalProperties": false
-  }
-  settings_form_schema: [
-    {
-      "label": "Dialogflow Project ID",
-      "type": "text",
-      "name": "project_id",
-      "validation": "required",
-      "validationName": 'Project Id',
-    },
-    {
-      "label": "Dialogflow Project Key File",
-      "type": "textarea",
-      "name": "credentials",
-      "validation": "required|JSON",
-      "validationName": 'Credentials',
-      "validation-messages": {
-          "JSON": "Invalid JSON",
-          "required": "Credentials is required"
-      }
-    }
-  ]
-  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
-  i18n_key: google_translate
-  action: /google_translate
-  hook_type: account
-  allow_multiple_hooks: false
-  settings_json_schema: {
-    "type": "object",
-    "properties": {
-      "project_id": { "type": "string" },
-      "credentials": { "type": "object" },
-    },
-    "required": ["project_id", "credentials"],
-    "additionalProperties": false,
-  }
-  settings_form_schema: [
-    {
-      "label": "Google Cloud Project ID",
-      "type": "text",
-      "name": "project_id",
-      "validation": "required",
-      "validationName": "Project Id",
-    },
-    {
-      "label": "Google Cloud Project Key File",
-      "type": "textarea",
-      "name": "credentials",
-      "validation": "required|JSON",
-      "validationName": "Credentials",
-      "validation-messages": {
-        "JSON": "Invalid JSON",
-        "required": "Credentials is required"
-      },
-    },
-  ]
-  visible_properties: ['project_id']
 openai:
   id: openai
   logo: openai.png
@@ -183,3 +128,115 @@ linear:
     },
   ]
   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.png
+  i18n_key: dialogflow
+  action: /dialogflow
+  hook_type: inbox
+  allow_multiple_hooks: true
+  settings_json_schema:  {
+    "type": "object",
+    "properties": {
+      "project_id": { "type": "string" },
+      "credentials": { "type": "object" }
+    },
+    "required": ["project_id", "credentials"],
+    "additionalProperties": false
+  }
+  settings_form_schema: [
+    {
+      "label": "Dialogflow Project ID",
+      "type": "text",
+      "name": "project_id",
+      "validation": "required",
+      "validationName": 'Project Id',
+    },
+    {
+      "label": "Dialogflow Project Key File",
+      "type": "textarea",
+      "name": "credentials",
+      "validation": "required|JSON",
+      "validationName": 'Credentials',
+      "validation-messages": {
+          "JSON": "Invalid JSON",
+          "required": "Credentials is required"
+      }
+    }
+  ]
+  visible_properties: ['project_id']
+google_translate:
+  id: google_translate
+  logo: google-translate.png
+  i18n_key: google_translate
+  action: /google_translate
+  hook_type: account
+  allow_multiple_hooks: false
+  settings_json_schema: {
+    "type": "object",
+    "properties": {
+      "project_id": { "type": "string" },
+      "credentials": { "type": "object" },
+    },
+    "required": ["project_id", "credentials"],
+    "additionalProperties": false,
+  }
+  settings_form_schema: [
+    {
+      "label": "Google Cloud Project ID",
+      "type": "text",
+      "name": "project_id",
+      "validation": "required",
+      "validationName": "Project Id",
+    },
+    {
+      "label": "Google Cloud Project Key File",
+      "type": "textarea",
+      "name": "credentials",
+      "validation": "required|JSON",
+      "validationName": "Credentials",
+      "validation-messages": {
+        "JSON": "Invalid JSON",
+        "required": "Credentials is required"
+      },
+    },
+  ]
+  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"]
diff --git a/config/locales/am.yml b/config/locales/am.yml
index fb5adb959..e2510eec4 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 77dc32cd1..4237f345b 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 595d67e53..2176ee154 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 d694a616c..759484724 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 beb6c8e8d..54e26d886 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 b2437c67f..d7c1ff0b7 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 76246d5c1..65e553b90 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 270577fa9..aaa87fdcf 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 570b466f8..eca2baa39 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 000000000..5890063ca
--- /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 21f49c717..eaf88e828 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 dae3b36e0..63593ef04 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 8c5dab736..9571404dc 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 0c303071d..329ad69c8 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 cd75e3f58..31d8b6720 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 461a7d001..e2bb718a0 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 01b2fc03c..21bf88ca1 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 a03642b4e..92bea7185 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 a0380712f..6f33c4015 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 eba418ab7..a415936b4 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 3f566ce16..18d4594bf 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 5d8c62fb3..f815c8b6f 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 62010c6cb..592d92962 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 983e981c8..224339468 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 f883e47b2..7d1091b3f 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 a59d1416c..c5137bce3 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 e23fb7d06..b4af2ebd8 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 7b0c6e0b1..54977773e 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 72d0a228d..e43e1a0ce 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 0c1e742c9..ddc2d6432 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 86b490019..aa7fc8889 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 5fc0661bc..fbaa00bf5 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 7cf5bb26f..e0e9fc535 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 80d07a92c..78aed1d6b 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 270145098..f36fb34ff 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 3f3b0adc1..e3f6c7a35 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 5579e3787..5935eaaf1 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 e6497dbef..9631ee207 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 0e384bee4..b67e866c5 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 0b938831d..ce978e486 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 c37e472a0..4ba198d13 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 d3f31c33f..52d1947b0 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 6b84c4c24..42d1efdcf 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 3f34d8cef..37fe4092c 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 d714a8e3d..92ae69dba 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 ce5ed0773..610b17daf 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 2eaa9068d..fa2b942f8 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 000000000..559aedea8
--- /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 30f3798a7..8be6f30b3 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 b8d87a79b..9c1ba95fe 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 634b1c93a..7682c1d86 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 15cf19ff4..fa5d1df7f 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 8fb3e4507..904491cdc 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 f576e6d50..d9aa83d51 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 c876d110b..d29add8ae 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 4ffd06645..f23def557 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -216,6 +216,11 @@ Rails.application.routes.draw do
           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 d2f5b435c..c1406b02b 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 39a131ba2..126ed292e 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 @@ module Enterprise::SuperAdmin::AppConfigsController
       @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 f6333d446..39c08af64 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 4f80424f8..ae3eb3ba0 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 000000000..85428fd08
--- /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 103ef05c5..f3962a66c 100644
--- a/lib/integrations/dialogflow/processor_service.rb
+++ b/lib/integrations/dialogflow/processor_service.rb
@@ -14,13 +14,13 @@ class Integrations::Dialogflow::ProcessorService < Integrations::BotProcessorSer
     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 78b2108f9..54daaf30c 100644
--- a/lib/linear/queries.rb
+++ b/lib/linear/queries.rb
@@ -54,6 +54,10 @@ module Linear::Queries
             title
             description
             identifier
+            state {
+              name
+              color
+            }
           }
         }
       }
diff --git a/package.json b/package.json
index 0e31bb65b..b63b51905 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 b39742a29..000000000
--- 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 000000000..edf8029d9
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 000000000..3141160f4
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 76e165588..000000000
--- 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 000000000..a5b9a4b17
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 000000000..a5b9a4b17
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 000000000..a21fa0a19
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 000000000..a21fa0a19
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 32c657f3b..000000000
--- 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 000000000..42162b58a
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 8a4efab2b..42162b58a 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 1e5d9b7f9..000000000
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 000000000..1b99e803e
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 000000000..1b99e803e
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 d502ea051..000000000
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 000000000..38c87ee46
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 1921f4c3f..f2f5555d2 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 000000000..3af9768a1
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 847b476b0..0a0200d33 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 000000000..00085044f
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 41fc5e45c..00085044f 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 000000000..3a7e67c93
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 000000000..ebd449221
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 000000000..b549d2b15
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 000000000..5eeec8164
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 000000000..5f6b0ecaa
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 000000000..87d955504
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 3db393dab..19631765a 100644
--- a/spec/builders/messages/instagram/message_builder_spec.rb
+++ b/spec/builders/messages/instagram/message_builder_spec.rb
@@ -13,6 +13,7 @@ describe Messages::Instagram::MessageBuilder do
   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 @@ describe Messages::Instagram::MessageBuilder do
       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 43735046e..8662a5006 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 @@ RSpec.describe 'Integration Apps API', type: :request do
       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 @@ RSpec.describe 'Integration Apps API', type: :request do
       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 000000000..ce4976d96
--- /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 268d758cd..90e9360d3 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 642752c5b..187649591 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 @@ RSpec.describe Account::ConversationsResolutionSchedulerJob, type: :job do
   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 00ca91e23..76ecb37dc 100644
--- a/spec/factories/instagram/instagram_message_create_event.rb
+++ b/spec/factories/instagram/instagram_message_create_event.rb
@@ -204,6 +204,42 @@ FactoryBot.define do
     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 64a506a92..6b05d26fb 100644
--- a/spec/models/attachment_spec.rb
+++ b/spec/models/attachment_spec.rb
@@ -44,9 +44,14 @@ RSpec.describe Attachment do
       }.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 000000000..b9652ff89
--- /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 9e551985b..93fa296e5 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 266537dae..6bb82aa15 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"