diff --git a/app/controllers/webhooks/whatsapp_controller.rb b/app/controllers/webhooks/whatsapp_controller.rb
index 8f408d2b0..c4c376e5c 100644
--- a/app/controllers/webhooks/whatsapp_controller.rb
+++ b/app/controllers/webhooks/whatsapp_controller.rb
@@ -2,6 +2,12 @@ class Webhooks::WhatsappController < ActionController::API
   include MetaTokenVerifyConcern
 
   def process_payload
+    if inactive_whatsapp_number?
+      Rails.logger.warn("Rejected webhook for inactive WhatsApp number: #{params[:phone_number]}")
+      render json: { error: 'Inactive WhatsApp number' }, status: :unprocessable_entity
+      return
+    end
+
     Webhooks::WhatsappEventsJob.perform_later(params.to_unsafe_hash)
     head :ok
   end
@@ -13,4 +19,15 @@ class Webhooks::WhatsappController < ActionController::API
     whatsapp_webhook_verify_token = channel.provider_config['webhook_verify_token'] if channel.present?
     token == whatsapp_webhook_verify_token if whatsapp_webhook_verify_token.present?
   end
+
+  def inactive_whatsapp_number?
+    phone_number = params[:phone_number]
+    return false if phone_number.blank?
+
+    inactive_numbers = GlobalConfig.get_value('INACTIVE_WHATSAPP_NUMBERS').to_s
+    return false if inactive_numbers.blank?
+
+    inactive_numbers_array = inactive_numbers.split(',').map(&:strip)
+    inactive_numbers_array.include?(phone_number)
+  end
 end
diff --git a/app/javascript/dashboard/api/liveReports.js b/app/javascript/dashboard/api/liveReports.js
new file mode 100644
index 000000000..1435da258
--- /dev/null
+++ b/app/javascript/dashboard/api/liveReports.js
@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();
diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index 9367e8b2d..a8da23f3b 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -82,7 +82,7 @@ input[type='url']:not(.reset-base) {
 }
 
 input[type='file'] {
-  @apply bg-white dark:bg-n-solid-1 leading-[1.15] mb-4;
+  @apply bg-n-background leading-[1.15] mb-4;
 }
 
 // Select
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 95b368dae..4e3b96259 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -29,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  labelClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['action']);
@@ -97,9 +101,13 @@ onMounted(() => {
       </slot>
       <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-      <span v-if="item.label" class="min-w-0 text-sm truncate">{{
-        item.label
-      }}</span>
+      <span
+        v-if="item.label"
+        class="min-w-0 text-sm truncate"
+        :class="labelClass"
+      >
+        {{ item.label }}
+      </span>
     </button>
     <div
       v-if="filteredMenuItems.length === 0"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 05031f055..93ac36a28 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -93,7 +93,7 @@ const hasQuotedMessage = computed(() => {
         <template v-else>
           <Letter
             v-if="showQuotedMessage"
-            class-name="prose prose-bubble !max-w-none"
+            class-name="prose prose-bubble !max-w-none letter-render"
             :allowed-css-properties="[
               ...allowedCssProperties,
               'transform',
@@ -104,7 +104,7 @@ const hasQuotedMessage = computed(() => {
           />
           <Letter
             v-else
-            class-name="prose prose-bubble !max-w-none"
+            class-name="prose prose-bubble !max-w-none letter-render"
             :html="unquotedHTML"
             :allowed-css-properties="[
               ...allowedCssProperties,
@@ -143,3 +143,21 @@ const hasQuotedMessage = computed(() => {
     </section>
   </BaseBubble>
 </template>
+
+<style lang="scss">
+// Tailwind resets break the rendering of google drive link in Gmail messages
+// This fixes it using https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+
+.letter-render [class*='gmail_drive_chip'] {
+  box-sizing: initial;
+  @apply bg-n-slate-4 border-n-slate-6 rounded-md !important;
+
+  a {
+    @apply text-n-slate-12 !important;
+
+    img {
+      display: inline-block;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
index 1a7997f50..8e43c9eb4 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from './FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
@@ -9,6 +9,26 @@ import { useMessageContext } from '../../provider.js';
 const { content, attachments, contentAttributes, messageType } =
   useMessageContext();
 
+const hasTranslations = computed(() => {
+  const { translations = {} } = contentAttributes.value;
+  return Object.keys(translations || {}).length > 0;
+});
+
+const renderOriginal = ref(false);
+
+const renderContent = computed(() => {
+  if (renderOriginal.value) {
+    return content.value;
+  }
+
+  if (hasTranslations.value) {
+    const translations = contentAttributes.value.translations;
+    return translations[Object.keys(translations)[0]];
+  }
+
+  return content.value;
+});
+
 const isTemplate = computed(() => {
   return messageType.value === MESSAGE_TYPES.TEMPLATE;
 });
@@ -16,6 +36,16 @@ const isTemplate = computed(() => {
 const isEmpty = computed(() => {
   return !content.value && !attachments.value?.length;
 });
+
+const viewToggleKey = computed(() => {
+  return renderOriginal.value
+    ? 'CONVERSATION.VIEW_TRANSLATED'
+    : 'CONVERSATION.VIEW_ORIGINAL';
+});
+
+const handleSeeOriginal = () => {
+  renderOriginal.value = !renderOriginal.value;
+};
 </script>
 
 <template>
@@ -24,7 +54,16 @@ const isEmpty = computed(() => {
       <span v-if="isEmpty" class="text-n-slate-11">
         {{ $t('CONVERSATION.NO_CONTENT') }}
       </span>
-      <FormattedContent v-if="content" :content="content" />
+      <FormattedContent v-if="renderContent" :content="renderContent" />
+      <span class="-mt-3">
+        <span
+          v-if="hasTranslations"
+          class="text-xs text-n-slate-11 cursor-pointer hover:underline"
+          @click="handleSeeOriginal"
+        >
+          {{ $t(viewToggleKey) }}
+        </span>
+      </span>
       <AttachmentChips :attachments="attachments" class="gap-2" />
       <template v-if="isTemplate">
         <div
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 19bf08bcd..b974e68f3 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -97,7 +97,7 @@ export default {
     }
 
     .step {
-      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
+      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 09a22ffa3..ae41cbc2f 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,5 +1,4 @@
 <script setup>
-import Icon from 'next/icon/Icon.vue';
 import router from '../../routes/index';
 const props = defineProps({
   backUrl: {
@@ -24,24 +23,16 @@ const goBack = () => {
   }
 };
 
-const buttonStyleClass = props.compact
-  ? 'text-sm text-n-slate-11'
-  : 'text-base text-n-blue-text';
+const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
 </script>
 
 <template>
   <button
-    class="flex items-center p-0 font-normal cursor-pointer gap-1"
+    class="flex items-center p-0 font-normal cursor-pointer text-n-slate-11"
     :class="buttonStyleClass"
     @click.capture="goBack"
   >
-    <Icon
-      icon="i-lucide-chevron-left"
-      class="ltr:-ml-1 rtl:-mr-1"
-      :class="
-        props.compact ? 'text-n-slate-11 size-4' : 'text-n-blue-text size-5'
-      "
-    />
+    <fluent-icon icon="chevron-left" class="-ml-1" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
deleted file mode 100644
index 29377a9c4..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-export default {
-  props: {
-    contentAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['close'],
-  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"
-    class="text-left"
-    show
-    :on-close="onClose"
-  >
-    <div class="content">
-      <p>
-        <b>{{ $t('TRANSLATE_MODAL.ORIGINAL_CONTENT') }}</b>
-      </p>
-      <p v-dompurify-html="content" class="mb-0" />
-      <br />
-      <hr />
-      <div v-if="translationsAvailable">
-        <p>
-          <b>{{ $t('TRANSLATE_MODAL.TRANSLATED_CONTENT') }}</b>
-        </p>
-        <div v-for="(translation, language) in translations" :key="language">
-          <p>
-            <strong>{{ language }}:</strong>
-          </p>
-          <p v-dompurify-html="translation" />
-          <br />
-        </div>
-      </div>
-      <p v-else>
-        {{ $t('TRANSLATE_MODAL.NO_TRANSLATIONS_AVAILABLE') }}
-      </p>
-    </div>
-  </woot-modal>
-</template>
diff --git a/app/javascript/dashboard/i18n/locale/am/agentMgmt.json b/app/javascript/dashboard/i18n/locale/am/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/am/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/am/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json
index 8a2cbafec..b24281d42 100644
--- a/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "اختر وكيل",
         "TEAM": "اختر فريق"
       },
+      "LIST": {
+        "NONE": "لا شيء"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "لم يتم العثور على وكلاء",
diff --git a/app/javascript/dashboard/i18n/locale/az/agentMgmt.json b/app/javascript/dashboard/i18n/locale/az/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/az/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/az/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json b/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json
index 7e2738c70..8f6eadbcf 100644
--- a/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/bg/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Изберете агент",
         "TEAM": "Изберете екип"
       },
+      "LIST": {
+        "NONE": "Нито един"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Няма намерени агенти",
diff --git a/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
index 094bc22d1..995fabd0a 100644
--- a/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
@@ -3,8 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Afegir Agent",
     "LOADING": "S'està recollint la llista d'agents",
-    "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",
+    "DESCRIPTION": "",
+    "LEARN_MORE": "Rakibkazi",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrador/a",
       "AGENT": "Agent"
@@ -105,6 +105,9 @@
         "AGENT": "Seleccionar Agent",
         "TEAM": "Selecciona equip"
       },
+      "LIST": {
+        "NONE": "Ningú"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No s'han trobat agents",
diff --git a/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json b/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json
index 902839a91..91726682b 100644
--- a/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/cs/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Vybrat agenta",
         "TEAM": "Vybrat tým"
       },
+      "LIST": {
+        "NONE": "Nic"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nenalezeni žádní agenti",
diff --git a/app/javascript/dashboard/i18n/locale/da/agentMgmt.json b/app/javascript/dashboard/i18n/locale/da/agentMgmt.json
index f34ca3ff6..766ea1bde 100644
--- a/app/javascript/dashboard/i18n/locale/da/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/da/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Vælg agent",
         "TEAM": "Vælg hold"
       },
+      "LIST": {
+        "NONE": "Ingen"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Ingen agenter fundet",
diff --git a/app/javascript/dashboard/i18n/locale/de/agentMgmt.json b/app/javascript/dashboard/i18n/locale/de/agentMgmt.json
index 6abf13fdf..6ec5352fb 100644
--- a/app/javascript/dashboard/i18n/locale/de/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/de/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Agent auswählen",
         "TEAM": "Team auswählen"
       },
+      "LIST": {
+        "NONE": "Keine"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Keine Agenten gefunden",
diff --git a/app/javascript/dashboard/i18n/locale/el/agentMgmt.json b/app/javascript/dashboard/i18n/locale/el/agentMgmt.json
index 38c7b2b17..fddb0d1f2 100644
--- a/app/javascript/dashboard/i18n/locale/el/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/el/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Επιλογή πράκτορα",
         "TEAM": "Επιλογή ομάδας"
       },
+      "LIST": {
+        "NONE": "Κανένα"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Δεν βρέθηκαν Πράκτορες",
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index faa78c8a7..2847f4821 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -12,6 +12,8 @@
     "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",
+    "VIEW_ORIGINAL": "View original",
+    "VIEW_TRANSLATED": "View translated",
     "EMPTY_STATE": {
       "CMD_BAR": "to open command menu",
       "KEYBOARD_SHORTCUTS": "to view keyboard shortcuts"
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index c9ac00f7f..3156115c9 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -476,6 +476,18 @@
         "STATUS": "Status"
       }
     },
+    "TEAM_CONVERSATIONS": {
+      "ALL_TEAMS": "All Teams",
+      "HEADER": "Conversations by teams",
+      "LOADING_MESSAGE": "Loading team metrics...",
+      "NO_TEAMS": "There is no data available",
+      "TABLE_HEADER": {
+        "TEAM": "Team",
+        "OPEN": "Open",
+        "UNATTENDED": "Unattended",
+        "STATUS": "Status"
+      }
+    },
     "AGENT_STATUS": {
       "HEADER": "Agent status",
       "ONLINE": "Online",
diff --git a/app/javascript/dashboard/i18n/locale/es/agentMgmt.json b/app/javascript/dashboard/i18n/locale/es/agentMgmt.json
index cab7e1cdc..9d92bbdc1 100644
--- a/app/javascript/dashboard/i18n/locale/es/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/es/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Seleccionar agente",
         "TEAM": "Seleccionar equipo"
       },
+      "LIST": {
+        "NONE": "Ninguna"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No se encontraron agentes",
diff --git a/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json b/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json
index e27dce80a..1f2673d3f 100644
--- a/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fa/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "انتخاب اپراتور",
         "TEAM": "انتخاب تیم"
       },
+      "LIST": {
+        "NONE": "هیچکدام"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "اپراتوری یافت نشد",
diff --git a/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json b/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json
index a3e7b6115..25472a2bc 100644
--- a/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fi/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Edustajia ei löytynyt",
diff --git a/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json
index 72e56a26a..f0bca3e22 100644
--- a/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/fr/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Sélectionner un agent",
         "TEAM": "Sélectionner une équipe"
       },
+      "LIST": {
+        "NONE": "Aucun"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Aucun agent trouvé",
diff --git a/app/javascript/dashboard/i18n/locale/he/agentMgmt.json b/app/javascript/dashboard/i18n/locale/he/agentMgmt.json
index 1951beab0..91302df4f 100644
--- a/app/javascript/dashboard/i18n/locale/he/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/he/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "בחר נציג",
         "TEAM": "בחר קבוצה"
       },
+      "LIST": {
+        "NONE": "כלום"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "לא נמצא סוכן",
diff --git a/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json
index 13c9fe3a4..a1356f425 100644
--- a/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hi/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json
index a81cc72e4..ba6eceeda 100644
--- a/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hr/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "Nijedno"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json
index 2267d55b8..75eb07d74 100644
--- a/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hu/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Ügynök kiválasztása",
         "TEAM": "Csapat kiválasztása"
       },
+      "LIST": {
+        "NONE": "Nincs"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nem találunk ügynököt",
diff --git a/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json b/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hy/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/id/agentMgmt.json b/app/javascript/dashboard/i18n/locale/id/agentMgmt.json
index d708ad35b..adcd0be5a 100644
--- a/app/javascript/dashboard/i18n/locale/id/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/id/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Pilih Agen",
         "TEAM": "Pilih tim"
       },
+      "LIST": {
+        "NONE": "Tidak ada"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Tidak ada agen",
diff --git a/app/javascript/dashboard/i18n/locale/is/agentMgmt.json b/app/javascript/dashboard/i18n/locale/is/agentMgmt.json
index 26f38a84d..c782fa874 100644
--- a/app/javascript/dashboard/i18n/locale/is/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/is/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Velja þjónustufulltrúa",
         "TEAM": "Velja teymi"
       },
+      "LIST": {
+        "NONE": "Enginn"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Engir þjónustufulltrúar fundust",
diff --git a/app/javascript/dashboard/i18n/locale/it/agentMgmt.json b/app/javascript/dashboard/i18n/locale/it/agentMgmt.json
index a08a1b946..20b0b985b 100644
--- a/app/javascript/dashboard/i18n/locale/it/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/it/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Seleziona un'agente",
         "TEAM": "Seleziona team"
       },
+      "LIST": {
+        "NONE": "Nessuno"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nessun agente trovato",
diff --git a/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json
index 36eb690f3..03440c503 100644
--- a/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ja/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "担当者を選択",
         "TEAM": "チームを選択"
       },
+      "LIST": {
+        "NONE": "なし"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "担当者が見つかりません",
diff --git a/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ka/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json
index 55a17a955..15cb28d31 100644
--- a/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ko/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "에이전트 선택",
         "TEAM": "팀 선택"
       },
+      "LIST": {
+        "NONE": "없음"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "에이전트를 찾을 수 없음",
diff --git a/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json b/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json
index b0d1a9753..4959e6395 100644
--- a/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lt/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Pasirinkti agentą",
         "TEAM": "Pasirinkite komandą"
       },
+      "LIST": {
+        "NONE": "Nėra"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Agentų nerasta",
diff --git a/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json b/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json
index f992db7d3..e75c6d3f1 100644
--- a/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/lv/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Izvēlieties aģentu",
         "TEAM": "Izvēlieties komandu"
       },
+      "LIST": {
+        "NONE": "Nav"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Aģenti nav atrasti",
diff --git a/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json
index 767d1a116..6174a0aee 100644
--- a/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ml/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "ഏജന്റിനെ തിരഞ്ഞെടുക്കുക",
         "TEAM": "ടീം തിരഞ്ഞെടുക്കുക"
       },
+      "LIST": {
+        "NONE": "ഒന്നുമില്ല"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "ഏജന്റകളെ ഒന്നും കണ്ടെത്താൻ സാധിച്ചില്ല",
diff --git a/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json
index 507915209..8d383f511 100644
--- a/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ms/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Pilih ejen",
         "TEAM": "Pilih pasukan"
       },
+      "LIST": {
+        "NONE": "Tiada"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Tiada ejen dijumpa",
diff --git a/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ne/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json
index 5ecd39173..4eb1a71dd 100644
--- a/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/nl/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Selecteer agent",
         "TEAM": "Selecteer team"
       },
+      "LIST": {
+        "NONE": "Geen"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Geen medewerkers gevonden",
diff --git a/app/javascript/dashboard/i18n/locale/no/agentMgmt.json b/app/javascript/dashboard/i18n/locale/no/agentMgmt.json
index 6ef069550..42a65eb79 100644
--- a/app/javascript/dashboard/i18n/locale/no/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/no/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Velg agent",
         "TEAM": "Velg gruppe"
       },
+      "LIST": {
+        "NONE": "Ingen"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Ingen agenter funnet",
diff --git a/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json
index 2e16cf703..c4573928e 100644
--- a/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pl/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Wybierz konsultanta",
         "TEAM": "Wybierz zespół"
       },
+      "LIST": {
+        "NONE": "Brak"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nie znaleziono agentów",
diff --git a/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json b/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json
index f2141f4e3..d9c7c5fff 100644
--- a/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Escolher agente",
         "TEAM": "Escolher equipa"
       },
+      "LIST": {
+        "NONE": "Nenhuma"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nenhum agente encontrado",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json b/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json
index deff4c6a2..0262dd26c 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Selecionar agente",
         "TEAM": "Selecionar time"
       },
+      "LIST": {
+        "NONE": "Nenhuma"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nenhum agente encontrado",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json b/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json
index 9d4b660d1..94aa08bf1 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/auditLogs.json
@@ -3,7 +3,7 @@
     "HEADER": "Auditoria",
     "HEADER_BTN_TXT": "Adicionar Logs de Auditoria",
     "LOADING": "Buscando Logs de Auditoria",
-    "DESCRIPTION": "Logs de Auditoria mantêm um registro de atividades em sua conta, permitindo que você acompanhe e auditoria de sua conta, equipe ou serviços.",
+    "DESCRIPTION": "Logs de Auditoria mantêm um registro de atividades em sua conta, permitindo que você acompanhe e auditore sua conta, equipe ou serviços.",
     "LEARN_MORE": "Saiba 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> Os Logs de Auditoria são rastros para eventos e ações em um Sistema Chatwoot. </p>",
diff --git a/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json
index 8f284f678..5871683d4 100644
--- a/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ro/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Selectați agentul",
         "TEAM": "Selectați echipa"
       },
+      "LIST": {
+        "NONE": "Nimic"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Niciun agent găsit",
diff --git a/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json
index 127357c8a..17eb0f150 100644
--- a/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ru/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Выбрать Агента",
         "TEAM": "Выберите команду"
       },
+      "LIST": {
+        "NONE": "Ничего"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Операторы не найдены",
diff --git a/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sh/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json
index cffb17244..22a6ec461 100644
--- a/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sk/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Vybrať agenta",
         "TEAM": "Vybrať tím"
       },
+      "LIST": {
+        "NONE": "Žiadne"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Žiadni agenti neboli nájdení",
diff --git a/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sl/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sq/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json
index d78e287ef..38a693be4 100644
--- a/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sr/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Izaberite agenta",
         "TEAM": "Izaberite tim"
       },
+      "LIST": {
+        "NONE": "Niko"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Nema pronađenih agenata",
diff --git a/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json b/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json
index 29a18cee4..925b6854c 100644
--- a/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/sv/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Välj agent",
         "TEAM": "Välj team"
       },
+      "LIST": {
+        "NONE": "Inget"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Inga agenter hittades",
diff --git a/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json
index 3e7d6a37e..2576c9c14 100644
--- a/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ta/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/th/agentMgmt.json b/app/javascript/dashboard/i18n/locale/th/agentMgmt.json
index 8a0893c42..baafc8e91 100644
--- a/app/javascript/dashboard/i18n/locale/th/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/th/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "เลือกพนักงาน",
         "TEAM": "เลือกทีม"
       },
+      "LIST": {
+        "NONE": "ไม่มี"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "ไม่พบพนักงาน",
diff --git a/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json b/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/tl/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json b/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json
index d688b5f51..c69172907 100644
--- a/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/tr/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Temsilci seçin",
         "TEAM": "Takım seçin"
       },
+      "LIST": {
+        "NONE": "Hiç"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Kullanıcı bulunamadı",
diff --git a/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json b/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json
index 5490db873..146890e69 100644
--- a/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/uk/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Виберіть агента",
         "TEAM": "Виберіть команду"
       },
+      "LIST": {
+        "NONE": "Нiчого"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Агентів не знайдено",
diff --git a/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json
index 56feed818..5826eef95 100644
--- a/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "ایجنٹ منتخب کریں۔",
         "TEAM": "ٹیم منتخب کریں۔"
       },
+      "LIST": {
+        "NONE": "کوئی نہیں۔"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "کوئی ایجنٹ نہیں ملا",
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json b/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json
index 364fa7d50..448994e69 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",
diff --git a/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json b/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json
index 8a9083ab9..a16af3dd1 100644
--- a/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/vi/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "Chọn thành viên",
         "TEAM": "Chọn nhóm"
       },
+      "LIST": {
+        "NONE": "Không có"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "Không tìm thấy nhà cung cấp",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json b/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json
index b8a4a0c49..33a2b5fb9 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "选择客服代表",
         "TEAM": "选择团队"
       },
+      "LIST": {
+        "NONE": "啥都没有"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "未找到客服代表",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json b/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json
index e3af34c03..1e45fa988 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/agentMgmt.json
@@ -105,6 +105,9 @@
         "AGENT": "選擇客服",
         "TEAM": "選擇團隊"
       },
+      "LIST": {
+        "NONE": "無"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "查無客服",
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index f5688c0bb..ca8a28f5c 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -11,14 +11,12 @@ import {
   ACCOUNT_EVENTS,
   CONVERSATION_EVENTS,
 } from '../../../helper/AnalyticsHelper/events';
-import TranslateModal from 'dashboard/components/widgets/conversation/bubble/TranslateModal.vue';
 import MenuItem from '../../../components/widgets/conversation/contextMenu/menuItem.vue';
 import { useTrack } from 'dashboard/composables';
 
 export default {
   components: {
     AddCannedModal,
-    TranslateModal,
     MenuItem,
     ContextMenu,
   },
@@ -54,7 +52,6 @@ export default {
   data() {
     return {
       isCannedResponseModalOpen: false,
-      showTranslateModal: false,
       showDeleteModal: false,
     };
   },
@@ -125,15 +122,11 @@ export default {
       });
       useTrack(CONVERSATION_EVENTS.TRANSLATE_A_MESSAGE);
       this.handleClose();
-      this.showTranslateModal = true;
     },
     handleReplyTo() {
       this.$emit('replyTo', this.message);
       this.handleClose();
     },
-    onCloseTranslateModal() {
-      this.showTranslateModal = false;
-    },
     openDeleteModal() {
       this.handleClose();
       this.showDeleteModal = true;
@@ -170,13 +163,6 @@ export default {
         :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"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index cae0dd3a3..6f7c58ec5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -251,7 +251,7 @@ export default {
           $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
         "
         :input-placeholder="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT')
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM')
         "
         @select="onClickAssignTeam"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 2a7ac0300..f59235767 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -54,11 +54,9 @@ export default {
 
 <template>
   <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-n-background border-b border-n-weak"
+    class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
   >
-    <h1
-      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
-    >
+    <h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <BackButton
         v-if="showBackButton"
@@ -66,21 +64,16 @@ export default {
         :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">
+      <span class="text-xl 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"
+      class="button success button--fixed-top rounded-[5px] flex gap-2"
     >
       <fluent-icon icon="add-circle" />
       <span class="button__content">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index a3c460f3f..f5ba2b4eb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -17,29 +17,31 @@ const props = defineProps({
 const { t } = useI18n();
 
 const showNewButton = computed(
-  () => props.newButtonRoutes.length !== 0 && !props.showBackButton
+  () => props.newButtonRoutes.length && !props.showBackButton
 );
 </script>
 
 <template>
-  <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-n-background 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"
-    />
-    <router-view v-slot="{ Component }">
-      <keep-alive v-if="keepAlive">
-        <component :is="Component" />
-      </keep-alive>
-      <component :is="Component" v-else />
-    </router-view>
+  <div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
+    <div class="max-w-6xl mx-auto w-full flex flex-col flex-1">
+      <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"
+        class="sticky top-0 z-20"
+      />
+
+      <router-view v-slot="{ Component }" class="px-5 flex-1 overflow-hidden">
+        <component :is="Component" v-if="!keepAlive" :key="$route.fullPath" />
+        <keep-alive v-else>
+          <component :is="Component" :key="$route.fullPath" />
+        </keep-alive>
+      </router-view>
+    </div>
   </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 3a604503f..a2a1f28fb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -9,8 +9,14 @@ import { useAccount } from 'dashboard/composables/useAccount';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import semver from 'semver';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import V4Button from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    BaseSettingsHeader,
+    V4Button,
+  },
   setup() {
     const { updateUISettings } = useUISettings();
     const { enabledLanguages } = useConfig();
@@ -161,131 +167,130 @@ 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 flex-col w-full">
+    <BaseSettingsHeader :title="$t('GENERAL_SETTINGS.TITLE')">
+      <template #actions>
+        <V4Button blue :loading="isUpdating" @click="updateAccount">
+          {{ $t('GENERAL_SETTINGS.SUBMIT') }}
+        </V4Button>
+      </template>
+    </BaseSettingsHeader>
+    <div class="flex-grow flex-shrink min-w-0 overflow-auto mt-3">
+      <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
         <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+          class="flex flex-row border-b border-slate-25 dark:border-slate-800"
         >
-          <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 }"
+          <div
+            class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
           >
-            {{ $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>
+            <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>
+      </form>
 
-      <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-loading-state v-if="uiFlags.isFetchingItem" />
+    </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 class="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="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>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index ea25fd6dc..82852ab9b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-import SettingsContent from '../Wrapper.vue';
 import Index from './Index.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 
 export default {
   routes: [
@@ -9,12 +9,7 @@ export default {
       meta: {
         permissions: ['administrator'],
       },
-      component: SettingsContent,
-      props: {
-        headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'briefcase',
-        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 38a145fc3..4c19a1bca 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -41,7 +41,7 @@ const openInNewTab = url => {
 </script>
 
 <template>
-  <div class="flex flex-col items-start w-full gap-2 pt-4">
+  <div class="flex flex-col items-start w-full gap-2">
     <BackButton
       v-if="backButtonLabel"
       compact
@@ -60,13 +60,11 @@ const openInNewTab = url => {
               size="14"
               :icon="iconName"
               type="outline"
-              class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+              class="flex-shrink-0 text-n-brand"
             />
           </div>
         </div>
-        <h1
-          class="text-2xl font-semibold font-interDisplay tracking-[0.3px] text-slate-900 dark:text-slate-25"
-        >
+        <h1 class="text-xl font-medium tracking-tight text-n-slate-12">
           {{ title }}
         </h1>
       </div>
@@ -75,9 +73,9 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col w-full gap-3 text-slate-600 dark:text-slate-300">
+    <div class="flex flex-col w-full gap-3 text-n-slate-11">
       <p
-        class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
+        class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl"
       >
         <slot name="description">{{ description }}</slot>
       </p>
@@ -87,7 +85,7 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand dark:text-n-brand hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand hover:underline"
         >
           {{ linkText }}
           <Icon
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
index 3ff111f05..ebdb90f35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <div
-    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 w-full"
+    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between group outline outline-n-container outline-1 bg-n-alpha-3 rounded-2xl shadow w-full"
   >
     <slot name="leftSection">
       <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
@@ -21,7 +21,7 @@ defineProps({
           class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
         >
           <h3
-            class="justify-between text-sm font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+            class="justify-between tracking-tight font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
           >
             <slot name="title">
               {{ title }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index 82136dc34..7f1268dc2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -40,9 +40,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="flex flex-row overflow-auto p-4 h-full bg-n-alpha-2 dark:bg-n-solid-1"
-  >
+  <div class="flex flex-row overflow-auto h-full">
     <woot-wizard
       class="hidden md:block w-1/4"
       :global-config="globalConfig"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index fa7c9baec..1018ec6dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -360,7 +360,7 @@ export default {
 
 <template>
   <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto settings bg-n-solid-1"
+    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto settings"
   >
     <SettingIntroBanner
       :header-image="inbox.avatarUrl"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index 1195ea22d..aeb7c0df4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -1,78 +1,76 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { frontendURL } from '../../../../helper/URLHelper';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useInstallationName } 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')
-        );
-      }
-    },
+const props = defineProps({
+  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: () => ({}) },
+});
+
+const store = useStore();
+const router = useRouter();
+
+const showDeleteConfirmationPopup = ref(false);
+
+const accountId = computed(() => store.getters.getCurrentAccountId);
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+
+const openDeletePopup = () => {
+  showDeleteConfirmationPopup.value = true;
+};
+
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteIntegration = async () => {
+  try {
+    await store.dispatch('integrations/deleteIntegration', props.integrationId);
+    useAlert('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE');
+  } catch (error) {
+    useAlert('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE');
+  }
+};
+
+const confirmDeletion = () => {
+  closeDeletePopup();
+  deleteIntegration();
+  router.push({ name: 'settings_integrations' });
 };
 </script>
 
 <template>
   <div
-    class="flex flex-col items-start justify-between md:flex-row md:items-center"
+    class="flex flex-col items-start justify-between md:flex-row md:items-center p-4 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
-    <div class="flex items-center justify-start flex-1 m-0 mx-4">
-      <img
-        :src="`/dashboard/images/integrations/${integrationId}.png`"
-        class="w-16 h-16 p-2 mr-4"
-      />
+    <div class="flex items-center justify-start flex-1 m-0 mx-4 gap-6">
+      <div class="flex h-16 w-16 items-center justify-center">
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+      </div>
       <div>
-        <h3 class="mb-1 text-xl font-medium text-slate-800 dark:text-slate-100">
+        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
           {{ integrationName }}
         </h3>
-        <p class="text-slate-700 dark:text-slate-200">
+        <p class="text-n-slate-11 text-sm leading-6">
           {{
             useInstallationName(
               integrationDescription,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index 46a1dacef..792e06b4d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -108,7 +108,9 @@ export default {
 </script>
 
 <template>
-  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
+  <div
+    class="overflow-auto p-4 max-w-6xl mx-auto my-auto flex flex-wrap h-full"
+  >
     <woot-button
       v-if="showAddButton"
       color-scheme="success"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
index 40e68ca7b..1cf2af784 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
@@ -37,7 +37,7 @@ const integrationStatus = computed(() =>
 );
 
 const integrationStatusColor = computed(() =>
-  props.enabled ? 'bg-green-500' : 'bg-slate-200'
+  props.enabled ? 'bg-n-teal-9' : 'bg-n-slate-8'
 );
 
 const actionURL = computed(() =>
@@ -47,30 +47,30 @@ const actionURL = computed(() =>
 
 <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"
+    class="flex flex-col flex-1 p-6 m-[1px] outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
     <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"
+          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
         />
         <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"
+          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
         />
       </div>
-      <fluent-icon
+      <span
         v-tooltip="integrationStatus"
-        size="20"
-        class="text-white p-0.5 rounded-full"
+        class="text-white p-0.5 rounded-full w-5 h-5 flex items-center justify-center"
         :class="integrationStatusColor"
-        icon="checkmark"
-      />
+      >
+        <i class="i-ph-check-bold text-sm" />
+      </span>
     </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"
+        class="font-medium mb-2 text-n-slate-12 flex justify-between items-center"
       >
         <span class="text-base font-semibold">{{ name }}</span>
         <router-link :to="actionURL">
@@ -79,7 +79,7 @@ const actionURL = computed(() =>
           </woot-button>
         </router-link>
       </div>
-      <p class="text-slate-700 dark:text-slate-200">
+      <p class="text-n-slate-11">
         {{ useInstallationName(description, globalConfig.installationName) }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
index 5cb4d2b07..fd5a88cde 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
@@ -35,32 +35,23 @@ onMounted(() => {
 </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 && !uiFlags.isCreatingLinear"
-            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"
-              :delete-confirmation-text="{
-                title: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.TITLE'),
-                message: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.MESSAGE'),
-              }"
-            />
-          </div>
-          <div v-else class="flex items-center justify-center flex-1">
-            <Spinner size="" color-scheme="primary" />
-          </div>
-        </div>
-      </div>
+  <div class="flex-grow flex-shrink p-4 overflow-auto max-w-6xl mx-auto">
+    <div v-if="integrationLoaded && !uiFlags.isCreatingLinear">
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :delete-confirmation-text="{
+          title: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.TITLE'),
+          message: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.MESSAGE'),
+        }"
+      />
+    </div>
+    <div v-else class="flex items-center justify-center flex-1">
+      <Spinner size="" color-scheme="primary" />
     </div>
   </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 6b86dcf82..62bf0a4e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -47,31 +47,19 @@ 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 class="max-w-6xl">
+    <div v-if="integrationLoaded">
+      <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">
+      <IntegrationHelpText />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index a27cdc084..a1bd609cd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,63 +1,62 @@
-<script>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
-export default {
-  props: {
-    integrationId: {
-      type: String,
-      required: true,
-    },
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  integrationId: {
+    type: String,
+    required: true,
   },
-  emits: ['add', 'delete'],
-  setup(props) {
-    const { integration, hasConnectedHooks } = useIntegrationHook(
-      props.integrationId
-    );
-    return { integration, hasConnectedHooks };
-  },
-};
+});
+
+defineEmits(['add', 'delete']);
+
+const { integration, hasConnectedHooks } = useIntegrationHook(
+  props.integrationId
+);
 </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-xl mb-4 p-4"
-      >
-        <div class="flex">
-          <div class="flex h-[6.25rem] w-[6.25rem]">
-            <img
-              :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
+    class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
+  >
+    <div class="flex items-center justify-center">
+      <div class="flex h-16 w-16 items-center justify-center">
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+      </div>
+      <div class="flex flex-col justify-center m-0 mx-4 flex-1">
+        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
+          {{ integration.name }}
+        </h3>
+        <p class="text-n-slate-11 text-sm leading-6">
+          {{ integration.description }}
+        </p>
+      </div>
+      <div class="flex justify-center items-center mb-0 w-[15%]">
+        <div v-if="hasConnectedHooks">
+          <div @click="$emit('delete', integration.hooks[0])">
+            <Button
+              ruby
+              faded
+              :label="$t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT')"
             />
           </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"
-            >
-              {{ integration.name }}
-            </h3>
-            <p class="text-slate-700 dark:text-slate-200">
-              {{ integration.description }}
-            </p>
-          </div>
-          <div class="flex justify-center items-center mb-0 w-[15%]">
-            <div v-if="hasConnectedHooks">
-              <div @click="$emit('delete', integration.hooks[0])">
-                <woot-button class="nice alert">
-                  {{ $t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT') }}
-                </woot-button>
-              </div>
-            </div>
-            <div v-else>
-              <woot-button class="button nice" @click="$emit('add')">
-                {{ $t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT') }}
-              </woot-button>
-            </div>
-          </div>
+        </div>
+        <div v-else>
+          <Button
+            blue
+            faded
+            :label="$t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT')"
+            @click="$emit('add')"
+          />
         </div>
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index d82adda9d..79eac5bf2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -1,102 +1,99 @@
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import Integration from './Integration.vue';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
 import Spinner from 'shared/components/Spinner.vue';
-export default {
-  components: {
-    Spinner,
-    Integration,
-    SelectChannelWarning,
-    SlackIntegrationHelpText,
-  },
-  mixins: [globalConfigMixin],
-  props: {
-    code: { type: String, default: '' },
-  },
-  data() {
-    return { integrationLoaded: false };
-  },
-  computed: {
-    integration() {
-      return this.$store.getters['integrations/getIntegration']('slack');
-    },
-    areHooksAvailable() {
-      const { hooks = [] } = this.integration || {};
-      return !!hooks.length;
-    },
-    hook() {
-      const { hooks = [] } = this.integration || {};
-      const [hook] = hooks;
-      return hook || {};
-    },
-    isIntegrationHookEnabled() {
-      return this.hook.status || false;
-    },
-    hasConnectedAChannel() {
-      return !!this.hook.reference_id;
-    },
-    selectedChannelName() {
-      if (this.hook.status) {
-        const { settings: { channel_name: channelName = '' } = {} } = this.hook;
-        return channelName || 'customer-conversations';
-      }
-      return this.$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');
-    },
-    ...mapGetters({
-      uiFlags: 'integrations/getUIFlags',
-    }),
 
-    integrationAction() {
-      if (this.integration.enabled) {
-        return 'disconnect';
-      }
-      return this.integration.action;
-    },
-  },
-  mounted() {
-    this.intializeSlackIntegration();
-  },
-  methods: {
-    async intializeSlackIntegration() {
-      await this.$store.dispatch('integrations/get', 'slack');
-      if (this.code) {
-        await this.$store.dispatch('integrations/connectSlack', this.code);
-        // Clear the query param `code` from the URL as the
-        // subsequent reloads would result in an error
-        this.$router.replace(this.$route.path);
-      }
-      this.integrationLoaded = true;
-    },
-  },
+const props = defineProps({
+  code: { type: String, default: '' },
+});
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const integrationLoaded = ref(false);
+
+const integration = computed(() => {
+  return store.getters['integrations/getIntegration']('slack');
+});
+
+const areHooksAvailable = computed(() => {
+  const { hooks = [] } = integration.value || {};
+  return !!hooks.length;
+});
+
+const hook = computed(() => {
+  const { hooks = [] } = integration.value || {};
+  const [firstHook] = hooks;
+  return firstHook || {};
+});
+
+const isIntegrationHookEnabled = computed(() => {
+  return hook.value.status || false;
+});
+
+const hasConnectedAChannel = computed(() => {
+  return !!hook.value.reference_id;
+});
+
+const selectedChannelName = computed(() => {
+  if (hook.value.status) {
+    const { settings: { channel_name: channelName = '' } = {} } = hook.value;
+    return channelName || 'customer-conversations';
+  }
+  return t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');
+});
+
+const uiFlags = computed(() => store.getters['integrations/getUIFlags']);
+
+const integrationAction = computed(() => {
+  if (integration.value.enabled) {
+    return 'disconnect';
+  }
+  return integration.value.action;
+});
+
+const intializeSlackIntegration = async () => {
+  await store.dispatch('integrations/get', 'slack');
+  if (props.code) {
+    await store.dispatch('integrations/connectSlack', props.code);
+    // Clear the query param `code` from the URL as the
+    // subsequent reloads would result in an error
+    router.replace(route.path);
+  }
+  integrationLoaded.value = true;
 };
+
+onMounted(() => {
+  intializeSlackIntegration();
+});
 </script>
 
 <template>
   <div
     v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto"
+    class="flex flex-col flex-1 overflow-auto gap-5 pt-1 pb-10"
   >
-    <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">
+    <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 v-if="areHooksAvailable" class="flex-1">
       <SelectChannelWarning
         v-if="!isIntegrationHookEnabled"
         :has-connected-a-channel="hasConnectedAChannel"
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 8267a6c52..f94f3640f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,109 +1,99 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useInstallationName } from 'shared/mixins/globalConfigMixin';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    hasConnectedAChannel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-  data() {
-    return { selectedChannelId: '', availableChannels: [] };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-      uiFlags: 'integrations/getUIFlags',
-    }),
-    errorDescription() {
-      return !this.hasConnectedAChannel
-        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
-        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
-    },
-  },
-  methods: {
-    async fetchChannels() {
-      try {
-        this.availableChannels = await this.$store.dispatch(
-          'integrations/listAllSlackChannels'
-        );
-        this.availableChannels.sort((c1, c2) => c1.name - c2.name);
-      } catch {
-        this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
-        this.availableChannels = [];
-      }
-    },
-    async updateIntegration() {
-      try {
-        await this.$store.dispatch('integrations/updateSlack', {
-          referenceId: this.selectedChannelId,
-        });
-        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
-      } catch (error) {
-        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
-      }
-    },
+const props = defineProps({
+  hasConnectedAChannel: {
+    type: Boolean,
+    default: true,
   },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { formatMessage } = useMessageFormatter();
+
+const selectedChannelId = ref('');
+const availableChannels = ref([]);
+
+const uiFlags = computed(() => store.getters['integrations/getUIFlags']);
+
+const errorDescription = computed(() => {
+  return !props.hasConnectedAChannel
+    ? t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
+    : t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
+});
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+
+const formattedErrorMessage = computed(() => {
+  return formatMessage(
+    useInstallationName(
+      errorDescription.value,
+      globalConfig.value.installationName
+    ),
+    false
+  );
+});
+
+const fetchChannels = async () => {
+  try {
+    availableChannels.value = await store.dispatch(
+      'integrations/listAllSlackChannels'
+    );
+    availableChannels.value.sort((c1, c2) => c1.name - c2.name);
+  } catch {
+    t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
+    availableChannels.value = [];
+  }
+};
+
+const updateIntegration = async () => {
+  try {
+    await store.dispatch('integrations/updateSlack', {
+      referenceId: selectedChannelId.value,
+    });
+    useAlert(t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
+  } catch (error) {
+    useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
+  }
 };
 </script>
 
 <template>
   <div
-    class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
+    class="px-6 py-4 mb-4 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
     <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 class="flex-shrink-0">
+        <div class="i-lucide-bell text-xl text-n-amber-11 mt-1" />
       </div>
       <div class="ml-3">
-        <p
-          class="mb-1 text-base font-semibold text-yellow-900 dark:text-yellow-500"
-        >
+        <p class="mb-1 text-base font-semibold text-n-slate-12">
           {{
             $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 class="mt-2 text-sm text-n-slate-11 mb-3">
+          <p v-dompurify-html="formattedErrorMessage" />
         </div>
       </div>
     </div>
-    <div v-if="!hasConnectedAChannel" class="mt-2 ml-8">
-      <woot-submit-button
+    <div v-if="!hasConnectedAChannel" class="mb-2 mt-1 ml-8">
+      <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"
+        amber
+        sm
+        :is-loading="uiFlags.isFetchingSlackChannels"
         @click="fetchChannels"
-      />
+      >
+        {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT') }}
+      </Button>
       <div v-else class="inline-flex">
         <select
           v-model="selectedChannelId"
@@ -120,13 +110,14 @@ export default {
             #{{ 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"
+        <Button
+          teal
+          sm
+          :is-loading="uiFlags.isUpdatingSlack"
           @click="updateIntegration"
-        />
+        >
+          {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.UPDATE') }}
+        </Button>
       </div>
     </div>
   </div>
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 ee6cad7e2..b28ca19a3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -1,41 +1,37 @@
-<script>
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-export default {
-  props: {
-    selectedChannelName: {
-      type: String,
-      required: true,
-    },
+
+const props = defineProps({
+  selectedChannelName: {
+    type: String,
+    required: true,
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-};
+});
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const formattedHelpText = computed(() => {
+  return formatMessage(
+    t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
+      selectedChannelName: props.selectedChannelName,
+    }),
+    false
+  );
+});
 </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"
+    class="flex-1 w-full px-6 py-5 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
     <div class="prose-lg max-w-5xl">
-      <h5 class="dark:text-slate-100">
-        {{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
+      <h5 class="text-n-slate-12 tracking-tight">
+        {{ t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
       </h5>
-      <p>
-        <span
-          v-dompurify-html="
-            formatMessage(
-              $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
-                selectedChannelName: selectedChannelName,
-              }),
-              false
-            )
-          "
-        />
-      </p>
+      <div v-dompurify-html="formattedHelpText" class="text-n-slate-11" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index d1e250147..4fde45403 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -29,9 +29,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-n-weak"
-  >
+  <div class="p-3 bg-n-background h-full flex flex-col">
     <div>
       <woot-input
         :model-value="macroName"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 3e343fd05..a0eeb3ab9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -1,166 +1,17 @@
-<script>
-import { mapGetters } from 'vuex';
-import AgentTable from './components/overview/AgentTable.vue';
-import MetricCard from './components/overview/MetricCard.vue';
-import { OVERVIEW_METRICS } from './constants';
-
-import endOfDay from 'date-fns/endOfDay';
-import getUnixTime from 'date-fns/getUnixTime';
+<script setup>
 import ReportHeader from './components/ReportHeader.vue';
 import HeatmapContainer from './components/HeatmapContainer.vue';
-export const FETCH_INTERVAL = 60000;
-
-export default {
-  name: 'LiveReports',
-  components: {
-    ReportHeader,
-    AgentTable,
-    MetricCard,
-    HeatmapContainer,
-  },
-  data() {
-    return {
-      // always start with 0, this is to manage the pagination in tanstack table
-      // when we send the data, we do a +1 to this value
-      pageIndex: 0,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      agentStatus: 'agents/getAgentStatus',
-      agents: 'agents/getAgents',
-      accountConversationMetric: 'getAccountConversationMetric',
-      agentConversationMetric: 'getAgentConversationMetric',
-      uiFlags: 'getOverviewUIFlags',
-    }),
-    agentStatusMetrics() {
-      let metric = {};
-      Object.keys(this.agentStatus).forEach(key => {
-        const metricName = this.$t(
-          `OVERVIEW_REPORTS.AGENT_STATUS.${OVERVIEW_METRICS[key]}`
-        );
-        metric[metricName] = this.agentStatus[key];
-      });
-      return metric;
-    },
-    conversationMetrics() {
-      let metric = {};
-      Object.keys(this.accountConversationMetric).forEach(key => {
-        const metricName = this.$t(
-          `OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.${OVERVIEW_METRICS[key]}`
-        );
-        metric[metricName] = this.accountConversationMetric[key];
-      });
-      return metric;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('agents/get');
-    this.initalizeReport();
-  },
-  beforeUnmount() {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-  },
-  methods: {
-    initalizeReport() {
-      this.fetchAllData();
-      this.scheduleReportRefresh();
-    },
-    scheduleReportRefresh() {
-      this.timeoutId = setTimeout(async () => {
-        await this.fetchAllData();
-        this.scheduleReportRefresh();
-      }, FETCH_INTERVAL);
-    },
-    fetchAllData() {
-      this.fetchAccountConversationMetric();
-      this.fetchAgentConversationMetric();
-    },
-    downloadHeatmapData() {
-      let to = endOfDay(new Date());
-
-      this.$store.dispatch('downloadAccountConversationHeatmap', {
-        to: getUnixTime(to),
-      });
-    },
-
-    fetchAccountConversationMetric() {
-      this.$store.dispatch('fetchAccountConversationMetric', {
-        type: 'account',
-      });
-    },
-    fetchAgentConversationMetric() {
-      this.$store.dispatch('fetchAgentConversationMetric', {
-        type: 'agent',
-        page: this.pageIndex + 1,
-      });
-    },
-    onPageNumberChange(pageIndex) {
-      this.pageIndex = pageIndex;
-      this.fetchAgentConversationMetric();
-    },
-  },
-};
+import AgentLiveReportContainer from './components/AgentLiveReportContainer.vue';
+import TeamLiveReportContainer from './components/TeamLiveReportContainer.vue';
+import StatsLiveReportsContainer from './components/StatsLiveReportsContainer.vue';
 </script>
 
 <template>
   <ReportHeader :header-title="$t('OVERVIEW_REPORTS.HEADER')" />
   <div class="flex flex-col gap-4 pb-6">
-    <div class="flex flex-col items-center md:flex-row gap-4">
-      <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 pb-2"
-          >
-            <h3 class="text-base text-n-slate-11">
-              {{ name }}
-            </h3>
-            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
-              {{ 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 pb-2"
-          >
-            <h3 class="text-base text-n-slate-11">
-              {{ name }}
-            </h3>
-            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
-              {{ metric }}
-            </p>
-          </div>
-        </MetricCard>
-      </div>
-    </div>
+    <StatsLiveReportsContainer />
     <HeatmapContainer />
-    <div class="flex flex-row flex-wrap max-w-full">
-      <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
-        <AgentTable
-          :agents="agents"
-          :agent-metrics="agentConversationMetric"
-          :page-index="pageIndex"
-          :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
-        />
-      </MetricCard>
-    </div>
+    <AgentLiveReportContainer />
+    <TeamLiveReportContainer />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/AgentLiveReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/AgentLiveReportContainer.vue
new file mode 100644
index 000000000..e274e4fe2
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/AgentLiveReportContainer.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { onMounted } from 'vue';
+
+import AgentTable from './overview/AgentTable.vue';
+import MetricCard from './overview/MetricCard.vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
+
+const store = useStore();
+
+const uiFlags = useMapGetter('getOverviewUIFlags');
+const agentConversationMetric = useMapGetter('getAgentConversationMetric');
+const agents = useMapGetter('agents/getAgents');
+
+const fetchData = () => store.dispatch('fetchAgentConversationMetric');
+
+const { startRefetching } = useLiveRefresh(fetchData);
+
+onMounted(() => {
+  store.dispatch('agents/get');
+  fetchData();
+  startRefetching();
+});
+</script>
+
+<template>
+  <div class="flex flex-row flex-wrap max-w-full">
+    <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
+      <AgentTable
+        :agents="agents"
+        :agent-metrics="agentConversationMetric"
+        :is-loading="uiFlags.isFetchingAgentConversationMetric"
+      />
+    </MetricCard>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/StatsLiveReportsContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/StatsLiveReportsContainer.vue
new file mode 100644
index 000000000..8a3ee5ecd
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/StatsLiveReportsContainer.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { OVERVIEW_METRICS } from '../constants';
+import { useToggle } from '@vueuse/core';
+
+import MetricCard from './overview/MetricCard.vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('getOverviewUIFlags');
+const agentStatus = useMapGetter('agents/getAgentStatus');
+const accountConversationMetric = useMapGetter('getAccountConversationMetric');
+const store = useStore();
+
+const accounti18nKey = 'OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS';
+const teams = useMapGetter('teams/getTeams');
+
+const teamMenuList = computed(() => {
+  return [
+    { label: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.ALL_TEAMS'), value: null },
+    ...teams.value.map(team => ({ label: team.name, value: team.id })),
+  ];
+});
+
+const agentStatusMetrics = computed(() => {
+  let metric = {};
+  Object.keys(agentStatus.value).forEach(key => {
+    const metricName = t(
+      `OVERVIEW_REPORTS.AGENT_STATUS.${OVERVIEW_METRICS[key]}`
+    );
+    metric[metricName] = agentStatus.value[key];
+  });
+  return metric;
+});
+const conversationMetrics = computed(() => {
+  let metric = {};
+  Object.keys(accountConversationMetric.value).forEach(key => {
+    const metricName = t(`${accounti18nKey}.${OVERVIEW_METRICS[key]}`);
+    metric[metricName] = accountConversationMetric.value[key];
+  });
+  return metric;
+});
+
+const selectedTeam = ref(null);
+const selectedTeamLabel = computed(() => {
+  const team =
+    teamMenuList.value.find(
+      menuItem => menuItem.value === selectedTeam.value
+    ) || {};
+  return team.label;
+});
+const fetchData = () => {
+  const params = {};
+  if (selectedTeam.value) {
+    params.team_id = selectedTeam.value;
+  }
+  store.dispatch('fetchAccountConversationMetric', params);
+};
+
+const { startRefetching } = useLiveRefresh(fetchData);
+const [showDropdown, toggleDropdown] = useToggle();
+
+const handleAction = ({ value }) => {
+  toggleDropdown(false);
+  selectedTeam.value = value;
+  fetchData();
+};
+
+onMounted(() => {
+  fetchData();
+  startRefetching();
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center md:flex-row gap-4">
+    <div
+      class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+    >
+      <MetricCard
+        :header="t(`${accounti18nKey}.HEADER`)"
+        :is-loading="uiFlags.isFetchingAccountConversationMetric"
+        :loading-message="t(`${accounti18nKey}.LOADING_MESSAGE`)"
+      >
+        <template v-if="teams.length" #control>
+          <div
+            v-on-clickaway="() => toggleDropdown(false)"
+            class="relative flex items-center group z-50"
+          >
+            <Button
+              sm
+              slate
+              faded
+              :label="selectedTeamLabel"
+              class="capitalize rounded-md group-hover:bg-n-alpha-2"
+              @click="toggleDropdown()"
+            />
+            <DropdownMenu
+              v-if="showDropdown"
+              :menu-items="teamMenuList"
+              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
+              label-class="capitalize"
+              @action="handleAction($event)"
+            />
+          </div>
+        </template>
+        <div
+          v-for="(metric, name, index) in conversationMetrics"
+          :key="index"
+          class="flex-1 min-w-0 pb-2"
+        >
+          <h3 class="text-base text-n-slate-11">
+            {{ name }}
+          </h3>
+          <p class="text-n-slate-12 text-3xl mb-0 mt-1">
+            {{ 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 pb-2"
+        >
+          <h3 class="text-base text-n-slate-11">
+            {{ name }}
+          </h3>
+          <p class="text-n-slate-12 text-3xl mb-0 mt-1">
+            {{ metric }}
+          </p>
+        </div>
+      </MetricCard>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/TeamLiveReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/TeamLiveReportContainer.vue
new file mode 100644
index 000000000..c72d0dd96
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/TeamLiveReportContainer.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { onMounted } from 'vue';
+
+import MetricCard from './overview/MetricCard.vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
+import TeamTable from './overview/TeamTable.vue';
+
+const store = useStore();
+
+const uiFlags = useMapGetter('getOverviewUIFlags');
+const teamConversationMetric = useMapGetter('getTeamConversationMetric');
+const teams = useMapGetter('teams/getTeams');
+
+const fetchData = () => store.dispatch('fetchTeamConversationMetric');
+
+const { startRefetching } = useLiveRefresh(fetchData);
+
+onMounted(() => {
+  store.dispatch('teams/get');
+  fetchData();
+  startRefetching();
+});
+</script>
+
+<template>
+  <div class="flex flex-row flex-wrap max-w-full">
+    <MetricCard :header="$t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.HEADER')">
+      <TeamTable
+        :teams="teams"
+        :team-metrics="teamConversationMetric"
+        :is-loading="uiFlags.isFetchingTeamConversationMetric"
+      />
+    </MetricCard>
+  </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 fb470d8fc..42ca08582 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
@@ -4,6 +4,7 @@ import {
   useVueTable,
   createColumnHelper,
   getCoreRowModel,
+  getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
 
@@ -13,7 +14,7 @@ import Table from 'dashboard/components/table/Table.vue';
 import Pagination from 'dashboard/components/table/Pagination.vue';
 import AgentCell from './AgentCell.vue';
 
-const { agents, agentMetrics, pageIndex } = defineProps({
+const { agents, agentMetrics } = defineProps({
   agents: {
     type: Array,
     default: () => [],
@@ -26,42 +27,45 @@ const { agents, agentMetrics, pageIndex } = defineProps({
     type: Boolean,
     default: false,
   },
-  pageIndex: {
-    type: Number,
-    default: 1,
-  },
 });
 
-const emit = defineEmits(['pageChange']);
 const { t } = useI18n();
 
-function getAgentInformation(id) {
-  return agents?.find(agent => agent.id === Number(id));
-}
+const getAgentMetrics = id =>
+  agentMetrics.find(metrics => metrics.assignee_id === Number(id)) || {};
 
-const totalCount = computed(() => agents.length);
-
-const tableData = computed(() => {
-  return agentMetrics
-    .filter(agentMetric => getAgentInformation(agentMetric.id))
+const tableData = computed(() =>
+  agents
     .map(agent => {
-      const agentInformation = getAgentInformation(agent.id);
+      const metric = getAgentMetrics(agent.id);
       return {
-        agent: agentInformation.name || agentInformation.available_name,
-        email: agentInformation.email,
-        thumbnail: agentInformation.thumbnail,
-        open: agent.metric.open ?? 0,
-        unattended: agent.metric.unattended ?? 0,
-        status: agentInformation.availability_status,
+        agent: agent.available_name || agent.name,
+        email: agent.email,
+        thumbnail: agent.thumbnail,
+        open: metric.open || 0,
+        unattended: metric.unattended || 0,
+        status: agent.availability_status,
       };
-    });
-});
+    })
+    .sort((a, b) => {
+      // First sort by open tickets (descending)
+      const openDiff = b.open - a.open;
+      // If open tickets are equal, sort by name (ascending)
+      if (openDiff === 0) {
+        return a.agent.localeCompare(b.agent);
+      }
+      return openDiff;
+    })
+);
 
 const defaulSpanRender = cellProps =>
   h(
     'span',
+
     {
-      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
+      class: cellProps.getValue()
+        ? 'capitalize text-n-slate-12'
+        : 'capitalize text-n-slate-11',
     },
     cellProps.getValue() ? cellProps.getValue() : '---'
   );
@@ -86,100 +90,33 @@ const columns = [
   }),
 ];
 
-const paginationParams = computed(() => {
-  return {
-    pageIndex: pageIndex,
-    pageSize: 25,
-  };
-});
-
 const table = useVueTable({
   get data() {
     return tableData.value;
   },
   columns,
-  manualPagination: true,
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
-  get rowCount() {
-    return totalCount.value;
-  },
-  state: {
-    get pagination() {
-      return paginationParams.value;
-    },
-  },
-  onPaginationChange: updater => {
-    const newPagintaion = updater(paginationParams.value);
-    emit('pageChange', newPagintaion.pageIndex);
-  },
+  getPaginationRowModel: getPaginationRowModel(),
 });
 </script>
 
 <template>
-  <div class="agent-table-container">
+  <div class="flex flex-col flex-1">
     <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <Pagination class="mt-2" :table="table" />
-    <div v-if="isLoading" class="agents-loader">
+    <div
+      v-if="isLoading"
+      class="items-center flex text-base justify-center p-8"
+    >
       <Spinner />
-      <span>{{
-        $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
-      }}</span>
+      <span>
+        {{ $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE') }}
+      </span>
     </div>
     <EmptyState
-      v-else-if="!isLoading && !agentMetrics.length"
+      v-else-if="!isLoading && !agents.length"
       :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.agent-table-container {
-  @apply flex flex-col flex-1;
-
-  .ve-table {
-    &::v-deep {
-      th.ve-table-header-th {
-        @apply text-sm rounded-xl;
-        padding: var(--space-small) var(--space-two) !important;
-      }
-
-      td.ve-table-body-td {
-        padding: var(--space-one) var(--space-two) !important;
-      }
-    }
-  }
-
-  &::v-deep .ve-pagination {
-    @apply bg-transparent dark:bg-transparent;
-  }
-
-  &::v-deep .ve-pagination-select {
-    @apply hidden;
-  }
-
-  .row-user-block {
-    @apply items-center flex text-left;
-
-    .user-block {
-      @apply items-start flex flex-col min-w-0 my-0 mx-2;
-
-      .title {
-        @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
-      }
-
-      .sub-title {
-        @apply text-xs text-slate-600 dark:text-slate-200;
-      }
-    }
-  }
-
-  .table-pagination {
-    @apply mt-4 text-right;
-  }
-}
-
-.agents-loader {
-  @apply items-center flex text-base justify-center p-8;
-}
-</style>
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 8c83d56af..02ada6ccf 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
@@ -19,7 +19,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col m-0.5 px-6 py-5 overflow-hidden rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
+    class="flex flex-col m-0.5 px-6 py-5 rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
   >
     <div
       class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
new file mode 100644
index 000000000..290b8a01d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { computed, h } from 'vue';
+import {
+  useVueTable,
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+} from '@tanstack/vue-table';
+import { useI18n } from 'vue-i18n';
+
+import Spinner from 'shared/components/Spinner.vue';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import Table from 'dashboard/components/table/Table.vue';
+import Pagination from 'dashboard/components/table/Pagination.vue';
+
+const { teams, teamMetrics } = defineProps({
+  teams: {
+    type: Array,
+    default: () => [],
+  },
+  teamMetrics: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const getTeamMetrics = id =>
+  teamMetrics.find(metrics => metrics.team_id === Number(id)) || {};
+
+const tableData = computed(() =>
+  teams
+    .map(team => {
+      const metric = getTeamMetrics(team.id);
+      return {
+        agent: team.name,
+        open: metric.open || 0,
+        unattended: metric.unattended || 0,
+      };
+    })
+    .sort((a, b) => {
+      // First sort by open tickets (descending)
+      const openDiff = b.open - a.open;
+      // If open tickets are equal, sort by name (ascending)
+      if (openDiff === 0) {
+        return a.agent.localeCompare(b.agent);
+      }
+      return openDiff;
+    })
+);
+
+const defaulSpanRender = cellProps =>
+  h(
+    'span',
+    {
+      class: cellProps.getValue()
+        ? 'capitalize text-n-slate-12'
+        : 'capitalize text-n-slate-11',
+    },
+    cellProps.getValue() ? cellProps.getValue() : '---'
+  );
+
+const columnHelper = createColumnHelper();
+const columns = [
+  columnHelper.accessor('agent', {
+    header: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.TEAM'),
+    cell: defaulSpanRender,
+    size: 250,
+  }),
+  columnHelper.accessor('open', {
+    header: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.OPEN'),
+    cell: defaulSpanRender,
+    size: 100,
+  }),
+  columnHelper.accessor('unattended', {
+    header: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.UNATTENDED'),
+    cell: defaulSpanRender,
+    size: 100,
+  }),
+];
+
+const table = useVueTable({
+  get data() {
+    return tableData.value;
+  },
+  columns,
+  enableSorting: false,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+});
+</script>
+
+<template>
+  <div class="flex flex-col flex-1">
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
+    <Pagination class="mt-2" :table="table" />
+    <div
+      v-if="isLoading"
+      class="items-center flex text-base justify-center p-8"
+    >
+      <Spinner />
+      <span>
+        {{ $t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.LOADING_MESSAGE') }}
+      </span>
+    </div>
+    <EmptyState
+      v-else-if="!isLoading && !teams.length"
+      :title="$t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.NO_TEAMS')"
+    />
+  </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 2906736d8..9b94403d3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -24,7 +24,7 @@ export default {
 
 <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"
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
   >
     <woot-wizard class="hidden md:block w-1/4" :items="items" />
     <router-view />
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 7871ae0e3..f9fb4a012 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -28,7 +28,7 @@ export default {
 
 <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"
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
   >
     <woot-wizard class="hidden md:block w-1/4" :items="items" />
     <router-view />
diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index 1d7fdbe46..8715d24ec 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -6,6 +6,7 @@ import { MESSAGE_STATUS } from 'shared/constants/messages';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from '../../../../shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
+import * as Sentry from '@sentry/vue';
 
 const state = {
   allConversations: [],
@@ -209,16 +210,30 @@ export const mutations = {
 
   [types.UPDATE_CONVERSATION](_state, conversation) {
     const { allConversations } = _state;
-    const currentConversationIndex = allConversations.findIndex(
-      c => c.id === conversation.id
-    );
-    if (currentConversationIndex > -1) {
-      const { messages, ...conversationAttributes } = conversation;
-      const currentConversation = {
-        ...allConversations[currentConversationIndex],
-        ...conversationAttributes,
-      };
-      allConversations[currentConversationIndex] = currentConversation;
+    const index = allConversations.findIndex(c => c.id === conversation.id);
+
+    if (index > -1) {
+      const selectedConversation = allConversations[index];
+
+      // ignore out of order events
+      if (conversation.updated_at < selectedConversation.updated_at) {
+        Sentry.withScope(scope => {
+          scope.setContext('incoming', conversation);
+          scope.setContext('stored', selectedConversation);
+          scope.setContext('incoming_meta', conversation.meta);
+          scope.setContext('stored_meta', selectedConversation.meta);
+          Sentry.captureMessage('Conversation update mismatch');
+        });
+
+        return;
+      }
+
+      if (conversation.updated_at === selectedConversation.updated_at) {
+        return;
+      }
+
+      const { messages, ...updates } = conversation;
+      allConversations[index] = { ...selectedConversation, ...updates };
       if (_state.selectedChatId === conversation.id) {
         emitter.emit(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS);
         emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
diff --git a/app/javascript/dashboard/store/modules/reports.js b/app/javascript/dashboard/store/modules/reports.js
index 74da87d32..496ccbf29 100644
--- a/app/javascript/dashboard/store/modules/reports.js
+++ b/app/javascript/dashboard/store/modules/reports.js
@@ -5,6 +5,7 @@ import { downloadCsvFile, generateFileName } from '../../helper/downloadHelper';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import { REPORTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 import { clampDataBetweenTimeline } from 'shared/helpers/ReportsDataHelper';
+import liveReports from '../../api/liveReports';
 
 const state = {
   fetchingStatus: false,
@@ -54,10 +55,12 @@ const state = {
       isFetchingAccountConversationMetric: false,
       isFetchingAccountConversationsHeatmap: false,
       isFetchingAgentConversationMetric: false,
+      isFetchingTeamConversationMetric: false,
     },
     accountConversationMetric: {},
     accountConversationHeatmap: [],
     agentConversationMetric: [],
+    teamConversationMetric: [],
   },
 };
 
@@ -80,6 +83,9 @@ const getters = {
   getAgentConversationMetric(_state) {
     return _state.overview.agentConversationMetric;
   },
+  getTeamConversationMetric(_state) {
+    return _state.overview.teamConversationMetric;
+  },
   getOverviewUIFlags($state) {
     return $state.overview.uiFlags;
   },
@@ -145,9 +151,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
-  fetchAccountConversationMetric({ commit }, reportObj) {
+  fetchAccountConversationMetric({ commit }, params = {}) {
     commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, true);
-    Report.getConversationMetric(reportObj.type)
+    liveReports
+      .getConversationMetric(params)
       .then(accountConversationMetric => {
         commit(
           types.default.SET_ACCOUNT_CONVERSATION_METRIC,
@@ -159,9 +166,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, false);
       });
   },
-  fetchAgentConversationMetric({ commit }, reportObj) {
+  fetchAgentConversationMetric({ commit }) {
     commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, true);
-    Report.getConversationMetric(reportObj.type, reportObj.page)
+    liveReports
+      .getGroupedConversations({ groupBy: 'assignee_id' })
       .then(agentConversationMetric => {
         commit(
           types.default.SET_AGENT_CONVERSATION_METRIC,
@@ -173,6 +181,18 @@ export const actions = {
         commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, false);
       });
   },
+  fetchTeamConversationMetric({ commit }) {
+    commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, true);
+    liveReports
+      .getGroupedConversations({ groupBy: 'team_id' })
+      .then(teamMetric => {
+        commit(types.default.SET_TEAM_CONVERSATION_METRIC, teamMetric.data);
+        commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, false);
+      })
+      .catch(() => {
+        commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, false);
+      });
+  },
   downloadAgentReports(_, reportObj) {
     return Report.getAgentReports(reportObj)
       .then(response => {
@@ -278,6 +298,12 @@ const mutations = {
   [types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING](_state, flag) {
     _state.overview.uiFlags.isFetchingAgentConversationMetric = flag;
   },
+  [types.default.SET_TEAM_CONVERSATION_METRIC](_state, metricData) {
+    _state.overview.teamConversationMetric = metricData;
+  },
+  [types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING](_state, flag) {
+    _state.overview.uiFlags.isFetchingTeamConversationMetric = flag;
+  },
 };
 
 export default {
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 02d2b0f55..081eb9f79 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
@@ -569,4 +569,382 @@ describe('#mutations', () => {
       expect(state.copilotAssistant).toEqual(data.assistant);
     });
   });
+
+  describe('#SET_ALL_MESSAGES_LOADED', () => {
+    it('should set allMessagesLoaded to true on selected chat', () => {
+      const state = {
+        allConversations: [{ id: 1, allMessagesLoaded: false }],
+        selectedChatId: 1,
+      };
+      mutations[types.SET_ALL_MESSAGES_LOADED](state);
+      expect(state.allConversations[0].allMessagesLoaded).toBe(true);
+    });
+  });
+
+  describe('#CLEAR_ALL_MESSAGES_LOADED', () => {
+    it('should set allMessagesLoaded to false on selected chat', () => {
+      const state = {
+        allConversations: [{ id: 1, allMessagesLoaded: true }],
+        selectedChatId: 1,
+      };
+      mutations[types.CLEAR_ALL_MESSAGES_LOADED](state);
+      expect(state.allConversations[0].allMessagesLoaded).toBe(false);
+    });
+  });
+
+  describe('#SET_PREVIOUS_CONVERSATIONS', () => {
+    it('should prepend messages to conversation messages array', () => {
+      const state = {
+        allConversations: [{ id: 1, messages: [{ id: 'msg2' }] }],
+      };
+      const payload = { id: 1, data: [{ id: 'msg1' }] };
+
+      mutations[types.SET_PREVIOUS_CONVERSATIONS](state, payload);
+      expect(state.allConversations[0].messages).toEqual([
+        { id: 'msg1' },
+        { id: 'msg2' },
+      ]);
+    });
+
+    it('should not modify messages if data is empty', () => {
+      const state = {
+        allConversations: [{ id: 1, messages: [{ id: 'msg2' }] }],
+      };
+      const payload = { id: 1, data: [] };
+
+      mutations[types.SET_PREVIOUS_CONVERSATIONS](state, payload);
+      expect(state.allConversations[0].messages).toEqual([{ id: 'msg2' }]);
+    });
+  });
+
+  describe('#SET_MISSING_MESSAGES', () => {
+    it('should replace message array with new data', () => {
+      const state = {
+        allConversations: [{ id: 1, messages: [{ id: 'old' }] }],
+      };
+      const payload = { id: 1, data: [{ id: 'new' }] };
+
+      mutations[types.SET_MISSING_MESSAGES](state, payload);
+      expect(state.allConversations[0].messages).toEqual([{ id: 'new' }]);
+    });
+
+    it('should do nothing if conversation is not found', () => {
+      const state = {
+        allConversations: [],
+      };
+      const payload = { id: 1, data: [{ id: 'new' }] };
+
+      mutations[types.SET_MISSING_MESSAGES](state, payload);
+      expect(state.allConversations).toEqual([]);
+    });
+  });
+
+  describe('#ASSIGN_AGENT', () => {
+    it('should assign agent to selected conversation', () => {
+      const assignee = { id: 1, name: 'Agent' };
+      const state = {
+        allConversations: [{ id: 1, meta: {} }],
+        selectedChatId: 1,
+      };
+
+      mutations[types.ASSIGN_AGENT](state, assignee);
+      expect(state.allConversations[0].meta.assignee).toEqual(assignee);
+    });
+  });
+
+  describe('#ASSIGN_PRIORITY', () => {
+    it('should assign priority to conversation', () => {
+      const priority = { title: 'Urgent', value: 'urgent' };
+      const state = {
+        allConversations: [{ id: 1 }],
+      };
+
+      mutations[types.ASSIGN_PRIORITY](state, {
+        priority,
+        conversationId: 1,
+      });
+      expect(state.allConversations[0].priority).toEqual(priority);
+    });
+  });
+
+  describe('#MUTE_CONVERSATION', () => {
+    it('should mute selected conversation', () => {
+      const state = {
+        allConversations: [{ id: 1, muted: false }],
+        selectedChatId: 1,
+      };
+
+      mutations[types.MUTE_CONVERSATION](state);
+      expect(state.allConversations[0].muted).toBe(true);
+    });
+  });
+
+  describe('#UNMUTE_CONVERSATION', () => {
+    it('should unmute selected conversation', () => {
+      const state = {
+        allConversations: [{ id: 1, muted: true }],
+        selectedChatId: 1,
+      };
+
+      mutations[types.UNMUTE_CONVERSATION](state);
+      expect(state.allConversations[0].muted).toBe(false);
+    });
+  });
+
+  describe('#UPDATE_CONVERSATION', () => {
+    it('should update existing conversation', () => {
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+            status: 'open',
+            updated_at: 100,
+            messages: [{ id: 'msg1' }],
+          },
+        ],
+      };
+
+      const conversation = {
+        id: 1,
+        status: 'resolved',
+        updated_at: 200,
+        messages: [{ id: 'msg2' }],
+      };
+
+      mutations[types.UPDATE_CONVERSATION](state, conversation);
+      expect(state.allConversations[0]).toEqual({
+        id: 1,
+        status: 'resolved',
+        updated_at: 200,
+        messages: [{ id: 'msg1' }],
+      });
+    });
+
+    it('should add conversation if not found', () => {
+      const state = {
+        allConversations: [],
+      };
+
+      const conversation = {
+        id: 1,
+        status: 'open',
+      };
+
+      mutations[types.UPDATE_CONVERSATION](state, conversation);
+      expect(state.allConversations).toEqual([conversation]);
+    });
+
+    it('should emit events if updating selected conversation', () => {
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+            status: 'open',
+            updated_at: 100,
+          },
+        ],
+        selectedChatId: 1,
+      };
+
+      const conversation = {
+        id: 1,
+        status: 'resolved',
+        updated_at: 200,
+      };
+
+      mutations[types.UPDATE_CONVERSATION](state, conversation);
+      expect(emitter.emit).toHaveBeenCalledWith('FETCH_LABEL_SUGGESTIONS');
+      expect(emitter.emit).toHaveBeenCalledWith('SCROLL_TO_MESSAGE');
+    });
+
+    it('should ignore updates with older timestamps', () => {
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+            status: 'open',
+            updated_at: 200,
+          },
+        ],
+      };
+
+      const conversation = {
+        id: 1,
+        status: 'resolved',
+        updated_at: 100,
+      };
+
+      mutations[types.UPDATE_CONVERSATION](state, conversation);
+      expect(state.allConversations[0].status).toEqual('open');
+    });
+
+    it('should ignore updates with same timestamps', () => {
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+            status: 'open',
+            updated_at: 100,
+          },
+        ],
+      };
+
+      const conversation = {
+        id: 1,
+        status: 'resolved',
+        updated_at: 100,
+      };
+
+      mutations[types.UPDATE_CONVERSATION](state, conversation);
+      expect(state.allConversations[0].status).toEqual('open');
+    });
+  });
+
+  describe('#UPDATE_CONVERSATION_CONTACT', () => {
+    it('should update conversation contact data', () => {
+      const state = {
+        allConversations: [
+          { id: 1, meta: { sender: { id: 1, name: 'Old Name' } } },
+        ],
+      };
+
+      const payload = {
+        conversationId: 1,
+        id: 1,
+        name: 'New Name',
+      };
+
+      mutations[types.UPDATE_CONVERSATION_CONTACT](state, payload);
+      // The mutation extracts all properties except conversationId
+      const { conversationId, ...contact } = payload;
+      expect(state.allConversations[0].meta.sender).toEqual(contact);
+    });
+
+    it('should do nothing if conversation is not found', () => {
+      const state = {
+        allConversations: [],
+      };
+
+      const payload = {
+        conversationId: 1,
+        id: 1,
+        name: 'New Name',
+      };
+
+      mutations[types.UPDATE_CONVERSATION_CONTACT](state, payload);
+      expect(state.allConversations).toEqual([]);
+    });
+  });
+
+  describe('#SET_ACTIVE_INBOX', () => {
+    it('should set current inbox as integer', () => {
+      const state = {
+        currentInbox: null,
+      };
+
+      mutations[types.SET_ACTIVE_INBOX](state, '1');
+      expect(state.currentInbox).toBe(1);
+    });
+
+    it('should set null if no inbox ID provided', () => {
+      const state = {
+        currentInbox: 1,
+      };
+
+      mutations[types.SET_ACTIVE_INBOX](state, null);
+      expect(state.currentInbox).toBe(null);
+    });
+  });
+
+  describe('#CLEAR_CONTACT_CONVERSATIONS', () => {
+    it('should remove all conversations with matching contact ID', () => {
+      const state = {
+        allConversations: [
+          { id: 1, meta: { sender: { id: 1 } } },
+          { id: 2, meta: { sender: { id: 2 } } },
+          { id: 3, meta: { sender: { id: 1 } } },
+        ],
+      };
+
+      mutations[types.CLEAR_CONTACT_CONVERSATIONS](state, 1);
+      expect(state.allConversations).toHaveLength(1);
+      expect(state.allConversations[0].id).toBe(2);
+    });
+  });
+
+  describe('#ADD_CONVERSATION', () => {
+    it('should add a new conversation', () => {
+      const state = {
+        allConversations: [],
+      };
+
+      const conversation = { id: 1, messages: [] };
+      mutations[types.ADD_CONVERSATION](state, conversation);
+      expect(state.allConversations).toEqual([conversation]);
+    });
+  });
+
+  describe('#SET_LIST_LOADING_STATUS', () => {
+    it('should set listLoadingStatus to true', () => {
+      const state = {
+        listLoadingStatus: false,
+      };
+
+      mutations[types.SET_LIST_LOADING_STATUS](state);
+      expect(state.listLoadingStatus).toBe(true);
+    });
+  });
+
+  describe('#CLEAR_LIST_LOADING_STATUS', () => {
+    it('should set listLoadingStatus to false', () => {
+      const state = {
+        listLoadingStatus: true,
+      };
+
+      mutations[types.CLEAR_LIST_LOADING_STATUS](state);
+      expect(state.listLoadingStatus).toBe(false);
+    });
+  });
+
+  describe('#CHANGE_CHAT_STATUS_FILTER', () => {
+    it('should update chat status filter', () => {
+      const state = {
+        chatStatusFilter: 'open',
+      };
+
+      mutations[types.CHANGE_CHAT_STATUS_FILTER](state, 'resolved');
+      expect(state.chatStatusFilter).toBe('resolved');
+    });
+  });
+
+  describe('#UPDATE_ASSIGNEE', () => {
+    it('should update assignee on conversation', () => {
+      const state = {
+        allConversations: [{ id: 1, meta: { assignee: null } }],
+      };
+
+      const payload = {
+        id: 1,
+        assignee: { id: 1, name: 'Agent' },
+      };
+
+      mutations[types.UPDATE_ASSIGNEE](state, payload);
+      expect(state.allConversations[0].meta.assignee).toEqual(payload.assignee);
+    });
+  });
+
+  describe('#SET_LAST_MESSAGE_ID_IN_SYNC_CONVERSATION', () => {
+    it('should update the sync conversation message ID', () => {
+      const state = {
+        syncConversationsMessages: {},
+      };
+
+      mutations[types.SET_LAST_MESSAGE_ID_IN_SYNC_CONVERSATION](state, {
+        conversationId: 1,
+        messageId: 100,
+      });
+
+      expect(state.syncConversationsMessages[1]).toBe(100);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index c5b06f1ad..68b565dfa 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -338,4 +338,8 @@ export default {
   SET_SLA_REPORTS: 'SET_SLA_REPORTS',
   SET_SLA_REPORTS_METRICS: 'SET_SLA_REPORTS_METRICS',
   SET_SLA_REPORTS_META: 'SET_SLA_REPORTS_META',
+
+  SET_TEAM_CONVERSATION_METRIC: 'SET_TEAM_CONVERSATION_METRIC',
+  TOGGLE_TEAM_CONVERSATION_METRIC_LOADING:
+    'TOGGLE_TEAM_CONVERSATION_METRIC_LOADING',
 };
diff --git a/app/jobs/webhooks/telegram_events_job.rb b/app/jobs/webhooks/telegram_events_job.rb
index af42f1432..4f16c401d 100644
--- a/app/jobs/webhooks/telegram_events_job.rb
+++ b/app/jobs/webhooks/telegram_events_job.rb
@@ -5,13 +5,33 @@ class Webhooks::TelegramEventsJob < ApplicationJob
     return unless params[:bot_token]
 
     channel = Channel::Telegram.find_by(bot_token: params[:bot_token])
-    return unless channel
+
+    if channel_is_inactive?(channel)
+      log_inactive_channel(channel, params)
+      return
+    end
 
     process_event_params(channel, params)
   end
 
   private
 
+  def channel_is_inactive?(channel)
+    return true if channel.blank?
+    return true unless channel.account.active?
+
+    false
+  end
+
+  def log_inactive_channel(channel, params)
+    message = if channel&.id
+                "Account #{channel.account.id} is not active for channel #{channel.id}"
+              else
+                "Channel not found for bot_token: #{params[:bot_token]}"
+              end
+    Rails.logger.warn("Telegram event discarded: #{message}")
+  end
+
   def process_event_params(channel, params)
     return unless params[:telegram]
 
diff --git a/app/jobs/webhooks/whatsapp_events_job.rb b/app/jobs/webhooks/whatsapp_events_job.rb
index b84e9cde5..cd2dad167 100644
--- a/app/jobs/webhooks/whatsapp_events_job.rb
+++ b/app/jobs/webhooks/whatsapp_events_job.rb
@@ -3,7 +3,11 @@ class Webhooks::WhatsappEventsJob < ApplicationJob
 
   def perform(params = {})
     channel = find_channel_from_whatsapp_business_payload(params)
-    return if channel_is_inactive?(channel)
+
+    if channel_is_inactive?(channel)
+      Rails.logger.warn("Inactive WhatsApp channel: #{channel&.phone_number || "unknown - #{params[:phone_number]}"}")
+      return
+    end
 
     case channel.provider
     when 'whatsapp_cloud'
diff --git a/app/services/message_templates/hook_execution_service.rb b/app/services/message_templates/hook_execution_service.rb
index 401f90b27..bc161d885 100644
--- a/app/services/message_templates/hook_execution_service.rb
+++ b/app/services/message_templates/hook_execution_service.rb
@@ -25,6 +25,9 @@ class MessageTemplates::HookExecutionService
     return false if conversation.tweet?
     # should not send for outbound messages
     return false unless message.incoming?
+    # prevents sending out-of-office message if an agent has sent a message in last 5 minutes
+    # ensures better UX by not interrupting active conversations at the end of business hours
+    return false if conversation.messages.outgoing.exists?(['created_at > ?', 5.minutes.ago])
 
     inbox.out_of_office? && conversation.messages.today.template.empty? && inbox.out_of_office_message.present?
   end
diff --git a/config/installation_config.yml b/config/installation_config.yml
index d5924ebe0..422ecea9c 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -204,6 +204,11 @@
   display_title: 'Blocked Email Domains'
   description: 'Add a domain per line to block them from signing up, accepts Regex'
   type: code
+- name: INACTIVE_WHATSAPP_NUMBERS
+  value: ''
+  display_title: 'Inactive WhatsApp Numbers'
+  description: 'Comma-separated list of WhatsApp numbers that should be rejected with a 422 error'
+  type: code
 # ------- End of Chatwoot Internal Config for Cloud ----#
 
 # ------- Chatwoot Internal Config for Self Hosted ----#
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 1cbf2c6ca..f0b798648 100644
--- a/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
+++ b/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
@@ -32,7 +32,7 @@ module Enterprise::SuperAdmin::AppConfigsController
   end
 
   def internal_config_options
-    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS BLOCKED_EMAIL_DOMAINS
+    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS INACTIVE_WHATSAPP_NUMBERS BLOCKED_EMAIL_DOMAINS
        CAPTAIN_CLOUD_PLAN_LIMITS ACCOUNT_SECURITY_NOTIFICATION_WEBHOOK_URL]
   end
 end
diff --git a/spec/controllers/webhooks/whatsapp_controller_spec.rb b/spec/controllers/webhooks/whatsapp_controller_spec.rb
index 4a63f5ba0..e5fa392b0 100644
--- a/spec/controllers/webhooks/whatsapp_controller_spec.rb
+++ b/spec/controllers/webhooks/whatsapp_controller_spec.rb
@@ -29,5 +29,34 @@ RSpec.describe 'Webhooks::WhatsappController', type: :request do
       post '/webhooks/whatsapp/123221321', params: { content: 'hello' }
       expect(response).to have_http_status(:success)
     end
+
+    context 'when phone number is in inactive list' do
+      before do
+        allow(GlobalConfig).to receive(:get_value).with('INACTIVE_WHATSAPP_NUMBERS').and_return('+1234567890,+9876543210')
+      end
+
+      it 'returns service unavailable for inactive phone number in URL params' do
+        allow(Rails.logger).to receive(:warn)
+        expect(Rails.logger).to receive(:warn).with('Rejected webhook for inactive WhatsApp number: +1234567890')
+
+        post '/webhooks/whatsapp/+1234567890', params: { content: 'hello' }
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Inactive WhatsApp number')
+      end
+    end
+
+    context 'when INACTIVE_WHATSAPP_NUMBERS config is not set' do
+      before do
+        allow(GlobalConfig).to receive(:get_value).with('INACTIVE_WHATSAPP_NUMBERS').and_return(nil)
+      end
+
+      it 'processes the webhook normally' do
+        allow(Webhooks::WhatsappEventsJob).to receive(:perform_later)
+        expect(Webhooks::WhatsappEventsJob).to receive(:perform_later)
+
+        post '/webhooks/whatsapp/+1234567890', params: { content: 'hello' }
+        expect(response).to have_http_status(:success)
+      end
+    end
   end
 end
diff --git a/spec/jobs/webhooks/telegram_events_job_spec.rb b/spec/jobs/webhooks/telegram_events_job_spec.rb
index 992a50b1b..119a3be41 100644
--- a/spec/jobs/webhooks/telegram_events_job_spec.rb
+++ b/spec/jobs/webhooks/telegram_events_job_spec.rb
@@ -17,8 +17,9 @@ RSpec.describe Webhooks::TelegramEventsJob do
       expect(described_class.perform_now({})).to be_nil
     end
 
-    it 'returns nil when invalid bot_token' do
-      expect(described_class.perform_now({ bot_token: 'invalid' })).to be_nil
+    it 'logs a warning when channel is not found' do
+      expect(Rails.logger).to receive(:warn).with('Telegram event discarded: Channel not found for bot_token: invalid')
+      described_class.perform_now({ bot_token: 'invalid' })
     end
   end
 
@@ -32,6 +33,19 @@ RSpec.describe Webhooks::TelegramEventsJob do
       expect(process_service).to receive(:perform)
       described_class.perform_now(params.with_indifferent_access)
     end
+
+    it 'logs a warning and does not process events if account is suspended' do
+      account = telegram_channel.account
+      account.update!(status: :suspended)
+
+      process_service = double
+      allow(Telegram::IncomingMessageService).to receive(:new).and_return(process_service)
+      allow(process_service).to receive(:perform)
+
+      expect(Rails.logger).to receive(:warn).with("Telegram event discarded: Account #{account.id} is not active for channel #{telegram_channel.id}")
+      expect(Telegram::IncomingMessageService).not_to receive(:new)
+      described_class.perform_now(params.with_indifferent_access)
+    end
   end
 
   context 'when update message params' do
diff --git a/spec/jobs/webhooks/whatsapp_events_job_spec.rb b/spec/jobs/webhooks/whatsapp_events_job_spec.rb
index 1b7ec172f..ba8a19413 100644
--- a/spec/jobs/webhooks/whatsapp_events_job_spec.rb
+++ b/spec/jobs/webhooks/whatsapp_events_job_spec.rb
@@ -81,6 +81,22 @@ RSpec.describe Webhooks::WhatsappEventsJob do
       expect(Whatsapp::IncomingMessageService).not_to receive(:new)
       job.perform_now(params)
     end
+
+    it 'logs a warning when channel is inactive' do
+      channel.prompt_reauthorization!
+      allow(Rails.logger).to receive(:warn)
+
+      expect(Rails.logger).to receive(:warn).with("Inactive WhatsApp channel: #{channel.phone_number}")
+      job.perform_now(params)
+    end
+
+    it 'logs a warning with unknown phone number when channel does not exist' do
+      unknown_phone = '+1234567890'
+      allow(Rails.logger).to receive(:warn)
+
+      expect(Rails.logger).to receive(:warn).with("Inactive WhatsApp channel: unknown - #{unknown_phone}")
+      job.perform_now(phone_number: unknown_phone)
+    end
   end
 
   context 'when default provider' do
diff --git a/spec/services/message_templates/hook_execution_service_spec.rb b/spec/services/message_templates/hook_execution_service_spec.rb
index 949d71ac6..9d9d82922 100644
--- a/spec/services/message_templates/hook_execution_service_spec.rb
+++ b/spec/services/message_templates/hook_execution_service_spec.rb
@@ -194,6 +194,25 @@ describe MessageTemplates::HookExecutionService do
       expect(out_of_office_service).to have_received(:perform)
     end
 
+    it 'does not call ::MessageTemplates::Template::OutOfOffice when there are recent outgoing messages' do
+      contact = create(:contact)
+      conversation = create(:conversation, contact: contact)
+
+      conversation.inbox.update(working_hours_enabled: true, out_of_office_message: 'We are out of office')
+      conversation.inbox.working_hours.today.update!(closed_all_day: true)
+
+      create(:message, conversation: conversation, message_type: :outgoing, created_at: 2.minutes.ago)
+
+      out_of_office_service = double
+      allow(MessageTemplates::Template::OutOfOffice).to receive(:new).and_return(out_of_office_service)
+      allow(out_of_office_service).to receive(:perform).and_return(true)
+
+      create(:message, conversation: conversation)
+
+      expect(MessageTemplates::Template::OutOfOffice).not_to have_received(:new)
+      expect(out_of_office_service).not_to have_received(:perform)
+    end
+
     it 'will not calls ::MessageTemplates::Template::OutOfOffice when outgoing message' do
       contact = create(:contact)
       conversation = create(:conversation, contact: contact)