diff --git a/app/javascript/dashboard/api/inboxes.js b/app/javascript/dashboard/api/inboxes.js
index 21fd64f8d..c6945d94f 100644
--- a/app/javascript/dashboard/api/inboxes.js
+++ b/app/javascript/dashboard/api/inboxes.js
@@ -33,6 +33,13 @@ class Inboxes extends CacheEnabledApiClient {
     return axios.post(`${this.url}/${inboxId}/sync_templates`);
   }
 
+  getMessageTemplates(inboxId, params = {}, config = {}) {
+    return axios.get(`${this.url}/${inboxId}/message_templates`, {
+      ...config,
+      params,
+    });
+  }
+
   updateWhatsappBusinessManagementToken(inboxId, businessManagementToken) {
     return axios.put(
       `${this.url}/${inboxId}/whatsapp_business_management_token`,
diff --git a/app/javascript/dashboard/api/specs/inboxes.spec.js b/app/javascript/dashboard/api/specs/inboxes.spec.js
index 19aad6b3a..41d200da6 100644
--- a/app/javascript/dashboard/api/specs/inboxes.spec.js
+++ b/app/javascript/dashboard/api/specs/inboxes.spec.js
@@ -13,6 +13,7 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('getAgentBot');
     expect(inboxesAPI).toHaveProperty('setAgentBot');
     expect(inboxesAPI).toHaveProperty('syncTemplates');
+    expect(inboxesAPI).toHaveProperty('getMessageTemplates');
   });
 
   describe('API calls', () => {
@@ -50,6 +51,24 @@ describe('#InboxesAPI', () => {
       );
     });
 
+    it('#getMessageTemplates', () => {
+      const controller = new AbortController();
+
+      inboxesAPI.getMessageTemplates(
+        2,
+        { name: 'welcome' },
+        { signal: controller.signal }
+      );
+
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/inboxes/2/message_templates',
+        {
+          signal: controller.signal,
+          params: { name: 'welcome' },
+        }
+      );
+    });
+
     it('#updateWhatsappBusinessManagementToken', () => {
       inboxesAPI.updateWhatsappBusinessManagementToken(2, 'business-token');
       expect(axiosMock.put).toHaveBeenCalledWith(
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 9891b1d86..eda659765 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -840,6 +840,12 @@ const menuItems = computed(() => {
           ],
           to: accountScopedRoute('settings_inbox_list'),
         },
+        {
+          name: 'Settings Templates',
+          label: t('SIDEBAR.WHATSAPP_TEMPLATES'),
+          icon: 'i-lucide-layout-template',
+          to: accountScopedRoute('settings_templates'),
+        },
         {
           name: 'Settings Labels',
           label: t('SIDEBAR.LABELS'),
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 990ab9835..1b795a9a6 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -38,6 +38,7 @@ import sla from './sla.json';
 import snooze from './snooze.json';
 import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
+import whatsappTemplateMgmt from './whatsappTemplateMgmt.json';
 import contentTemplates from './contentTemplates.json';
 import mfa from './mfa.json';
 import onboarding from './onboarding.json';
@@ -85,6 +86,7 @@ export default {
   ...snooze,
   ...teamsSettings,
   ...whatsappTemplates,
+  ...whatsappTemplateMgmt,
   ...contentTemplates,
   ...mfa,
   ...onboarding,
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index b133ca590..e36732e48 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -340,6 +340,7 @@
     "AGENT_BOTS": "Bots",
     "AUDIT_LOGS": "Audit Logs",
     "INBOXES": "Inboxes",
+    "WHATSAPP_TEMPLATES": "Templates",
     "NOTIFICATIONS": "Notifications",
     "CANNED_RESPONSES": "Canned Responses",
     "INTEGRATIONS": "Integrations",
diff --git a/app/javascript/dashboard/i18n/locale/en/whatsappTemplateMgmt.json b/app/javascript/dashboard/i18n/locale/en/whatsappTemplateMgmt.json
new file mode 100644
index 000000000..02831d968
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/whatsappTemplateMgmt.json
@@ -0,0 +1,47 @@
+{
+  "WHATSAPP_TEMPLATE_MGMT": {
+    "TITLE": "Templates",
+    "DESCRIPTION": "View the message templates synced from your WhatsApp inboxes. To create or edit a template, manage it with your provider.",
+    "COUNT": "{n} template | {n} templates",
+    "KNOW_MORE": "Know more",
+    "NEW_TEMPLATE": "New template",
+    "SEARCH_PLACEHOLDER": "Search by content or name...",
+    "MANAGE_IN_META": "Manage in Meta",
+    "MANAGE_IN_TWILIO": "Manage in Twilio",
+    "LOADING": "Loading WhatsApp templates...",
+    "EMPTY": "No WhatsApp templates found.",
+    "NO_RESULTS": "No templates match your filters.",
+    "FETCH_ERROR": "Unable to load WhatsApp templates. Please try again.",
+    "PARTIAL_FETCH_ERROR": "Some WhatsApp templates could not be loaded. Please try again.",
+    "LAST_SYNC_ATTEMPT": "Last sync attempt on {date}",
+    "MORE_INBOXES": "+{n}",
+    "FILTERS": {
+      "ALL_INBOXES": "All inboxes",
+      "ALL_LANGUAGES": "All languages"
+    },
+    "TYPES": {
+      "TEXT": "Text",
+      "IMAGE": "Image",
+      "VIDEO": "Video",
+      "DOCUMENT": "Document",
+      "MEDIA": "Media",
+      "QUICK_REPLY": "Quick reply",
+      "CALL_TO_ACTION": "Call to action",
+      "CATALOG": "Catalog",
+      "COPY_CODE": "Copy code"
+    },
+    "PREVIEW": {
+      "TITLE": "Template preview",
+      "DESCRIPTION": "Preview how this template appears in WhatsApp.",
+      "OPEN": "Preview {name}",
+      "CLOSE": "Close preview",
+      "DETAILS": "Template details",
+      "STATUS": "Status",
+      "TYPE": "Content type",
+      "CATEGORY": "Category",
+      "LANGUAGE": "Language",
+      "INBOXES": "Inboxes",
+      "LAST_SYNC_ATTEMPT": "Last sync attempt"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 2fa3bf0b8..af8e4d120 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -119,7 +119,7 @@ const helpURL = getHelpUrlForFeature(props.featureName);
     >
       <slot name="count" />
       <div
-        v-if="slots.count"
+        v-if="slots.count && slots.actions"
         class="w-px h-3 rounded-lg bg-n-weak ltr:ml-1 ltr:mr-2 rtl:ml-2 rtl:mr-1 flex-shrink-0"
       />
       <slot name="actions" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index c37093176..b9c0f01da 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -14,6 +14,7 @@ import auditlogs from './auditlogs/audit.routes';
 import billing from './billing/billing.routes';
 import canned from './canned/canned.routes';
 import inbox from './inbox/inbox.routes';
+import templates from './templates/templates.routes';
 import integrations from './integrations/integrations.routes';
 import labels from './labels/labels.routes';
 import macros from './macros/macros.routes';
@@ -57,6 +58,7 @@ export default {
     ...billing.routes,
     ...canned.routes,
     ...inbox.routes,
+    ...templates.routes,
     ...integrations.routes,
     ...data.routes,
     ...labels.routes,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/templates/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/templates/Index.vue
new file mode 100644
index 000000000..fcc033ae3
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/templates/Index.vue
@@ -0,0 +1,391 @@
+<script setup>
+import { computed, onActivated, onDeactivated, ref } from 'vue';
+import { picoSearch } from '@scmmishra/pico-search';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+
+import { useAlert } from 'dashboard/composables';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAbortableRequest } from 'dashboard/composables/useAbortableRequest';
+import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
+import InboxesAPI from 'dashboard/api/inboxes';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import TemplateCard from './TemplateCard.vue';
+import TemplatePreviewDrawer from './TemplatePreviewDrawer.vue';
+import { formatTemplateLanguage, groupTemplates } from './templateUtils';
+
+const FUZZY_SEARCH_KEYS = [
+  { name: 'name', weight: 4 },
+  'category',
+  'language',
+  'status',
+  'inboxNames',
+  'searchableContent',
+];
+
+const META_TEMPLATE_MANAGER_URL =
+  'https://business.facebook.com/latest/whatsapp_manager/message_templates';
+const TWILIO_TEMPLATE_MANAGER_URL =
+  'https://console.twilio.com/us1/develop/sms/content-editor';
+const TEMPLATE_LEARN_MORE_URL =
+  'https://www.chatwoot.com/hc/user-guide/articles/1754940076-whatsapp-templates';
+
+const store = useStore();
+const { t } = useI18n();
+
+const inboxes = useMapGetter('inboxes/getInboxes');
+const templates = ref([]);
+const searchQuery = ref('');
+const selectedInboxId = ref('all');
+const selectedLanguage = ref('all');
+const selectedTemplate = ref(null);
+const openFilterMenu = ref(null);
+const previewPanelRef = ref(null);
+const templateRecordsByInboxId = new Map();
+const {
+  run: runTemplateRequest,
+  abort: abortTemplateRequest,
+  isPending: isLoading,
+} = useAbortableRequest();
+
+const hasTemplates = computed(() => templates.value.length > 0);
+
+const whatsappInboxes = computed(() =>
+  inboxes.value.filter(
+    inbox =>
+      inbox.channel_type === INBOX_TYPES.WHATSAPP ||
+      (inbox.channel_type === INBOX_TYPES.TWILIO &&
+        inbox.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP)
+  )
+);
+
+const canManageInMeta = computed(() =>
+  whatsappInboxes.value.some(inbox => inbox.provider === 'whatsapp_cloud')
+);
+
+const hasTwilioInboxes = computed(() =>
+  whatsappInboxes.value.some(inbox => inbox.channel_type === INBOX_TYPES.TWILIO)
+);
+
+const hasUnsupportedWhatsappInboxes = computed(() =>
+  whatsappInboxes.value.some(
+    inbox =>
+      inbox.channel_type === INBOX_TYPES.WHATSAPP &&
+      inbox.provider !== 'whatsapp_cloud'
+  )
+);
+
+const selectedInbox = computed(() =>
+  whatsappInboxes.value.find(
+    inbox => String(inbox.id) === selectedInboxId.value
+  )
+);
+
+const newTemplateUrl = computed(() => {
+  if (selectedInbox.value) {
+    if (selectedInbox.value.channel_type === INBOX_TYPES.TWILIO) {
+      return TWILIO_TEMPLATE_MANAGER_URL;
+    }
+
+    return selectedInbox.value.provider === 'whatsapp_cloud'
+      ? META_TEMPLATE_MANAGER_URL
+      : null;
+  }
+
+  if (
+    canManageInMeta.value &&
+    !hasTwilioInboxes.value &&
+    !hasUnsupportedWhatsappInboxes.value
+  ) {
+    return META_TEMPLATE_MANAGER_URL;
+  }
+
+  return hasTwilioInboxes.value &&
+    !canManageInMeta.value &&
+    !hasUnsupportedWhatsappInboxes.value
+    ? TWILIO_TEMPLATE_MANAGER_URL
+    : null;
+});
+
+const inboxOptions = computed(() => [
+  {
+    value: 'all',
+    label: t('WHATSAPP_TEMPLATE_MGMT.FILTERS.ALL_INBOXES'),
+  },
+  ...whatsappInboxes.value.map(inbox => ({
+    value: String(inbox.id),
+    label: inbox.name,
+  })),
+]);
+
+const languageOptions = computed(() => [
+  {
+    value: 'all',
+    label: t('WHATSAPP_TEMPLATE_MGMT.FILTERS.ALL_LANGUAGES'),
+  },
+  ...[...new Set(templates.value.map(template => template.language))]
+    .filter(Boolean)
+    .sort()
+    .map(language => ({
+      value: language,
+      label: formatTemplateLanguage(language),
+    })),
+]);
+
+const filterMenus = computed(() =>
+  [
+    {
+      key: 'inbox',
+      icon: 'i-lucide-inbox',
+      options: inboxOptions.value,
+      active: selectedInboxId.value,
+    },
+    {
+      key: 'language',
+      icon: 'i-lucide-languages',
+      options: languageOptions.value,
+      active: selectedLanguage.value,
+    },
+  ].map(menu => {
+    const items = menu.options.map(option => ({
+      ...option,
+      action: menu.key,
+      isSelected: option.value === menu.active,
+    }));
+
+    return {
+      ...menu,
+      items,
+      selected: items.find(item => item.isSelected) || items[0],
+    };
+  })
+);
+
+const closeFilterMenu = () => {
+  openFilterMenu.value = null;
+};
+
+const toggleFilterMenu = key => {
+  openFilterMenu.value = openFilterMenu.value === key ? null : key;
+};
+
+const openPreview = template => {
+  selectedTemplate.value = template;
+  previewPanelRef.value?.open();
+};
+
+const handleFilterAction = ({ action, value }) => {
+  closeFilterMenu();
+  if (action === 'inbox') selectedInboxId.value = value;
+  else selectedLanguage.value = value;
+};
+
+const filteredTemplates = computed(() => {
+  let records = templates.value;
+
+  if (selectedInboxId.value !== 'all') {
+    records = records.filter(template =>
+      template.inboxes.some(inbox => String(inbox.id) === selectedInboxId.value)
+    );
+  }
+
+  if (selectedLanguage.value !== 'all') {
+    records = records.filter(
+      template => template.language === selectedLanguage.value
+    );
+  }
+
+  const query = searchQuery.value.trim();
+  if (!query) return records;
+
+  const normalizedQuery = query.toLowerCase();
+  const contentMatches = records.filter(template =>
+    [template.name, template.searchableContent].some(value =>
+      value?.toLowerCase().includes(normalizedQuery)
+    )
+  );
+  if (contentMatches.length) return contentMatches;
+
+  return picoSearch(records, query, FUZZY_SEARCH_KEYS);
+});
+
+const showSearch = computed(() =>
+  Boolean(filteredTemplates.value.length || searchQuery.value)
+);
+
+const fetchTemplates = async () => {
+  try {
+    await runTemplateRequest(async signal => {
+      const didFetchInboxes = await store.dispatch('inboxes/get');
+      if (!didFetchInboxes) throw new Error();
+      if (signal.aborted) return;
+
+      const inboxesToFetch = [...whatsappInboxes.value];
+      const responses = await Promise.allSettled(
+        inboxesToFetch.map(async inbox => {
+          const { data } = await InboxesAPI.getMessageTemplates(
+            inbox.id,
+            {},
+            { signal }
+          );
+
+          if (!Array.isArray(data.payload)) {
+            throw new TypeError();
+          }
+
+          return {
+            inboxId: inbox.id,
+            records: data.payload.map(template => ({
+              template,
+              inbox,
+              lastUpdatedAt: data.meta?.last_sync_attempt_at,
+            })),
+          };
+        })
+      );
+
+      if (signal.aborted) return;
+
+      const successfulResponses = responses.filter(
+        response => response.status === 'fulfilled'
+      );
+      const activeInboxIds = new Set(inboxesToFetch.map(inbox => inbox.id));
+
+      templateRecordsByInboxId.forEach((_, inboxId) => {
+        if (!activeInboxIds.has(inboxId))
+          templateRecordsByInboxId.delete(inboxId);
+      });
+      successfulResponses.forEach(({ value }) => {
+        templateRecordsByInboxId.set(value.inboxId, value.records);
+      });
+      templates.value = groupTemplates(
+        [...templateRecordsByInboxId.values()].flat()
+      );
+
+      if (
+        !inboxOptions.value.some(({ value }) => value === selectedInboxId.value)
+      )
+        selectedInboxId.value = 'all';
+      if (
+        !languageOptions.value.some(
+          ({ value }) => value === selectedLanguage.value
+        )
+      )
+        selectedLanguage.value = 'all';
+
+      if (responses.some(response => response.status === 'rejected')) {
+        const errorMessage = successfulResponses.length
+          ? t('WHATSAPP_TEMPLATE_MGMT.PARTIAL_FETCH_ERROR')
+          : t('WHATSAPP_TEMPLATE_MGMT.FETCH_ERROR');
+        useAlert(errorMessage);
+      }
+    });
+  } catch {
+    useAlert(t('WHATSAPP_TEMPLATE_MGMT.FETCH_ERROR'));
+  }
+};
+
+onActivated(fetchTemplates);
+onDeactivated(abortTemplateRequest);
+</script>
+
+<template>
+  <SettingsLayout
+    :is-loading="isLoading"
+    :loading-message="$t('WHATSAPP_TEMPLATE_MGMT.LOADING')"
+    :no-records-found="!templates.length"
+    :no-records-message="$t('WHATSAPP_TEMPLATE_MGMT.EMPTY')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        v-model:search-query="searchQuery"
+        :title="$t('WHATSAPP_TEMPLATE_MGMT.TITLE')"
+        :search-placeholder="
+          showSearch ? $t('WHATSAPP_TEMPLATE_MGMT.SEARCH_PLACEHOLDER') : ''
+        "
+      >
+        <template #description>
+          {{ $t('WHATSAPP_TEMPLATE_MGMT.DESCRIPTION') }}
+          <a
+            :href="TEMPLATE_LEARN_MORE_URL"
+            class="text-sm font-medium text-n-blue-11 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.KNOW_MORE') }}
+          </a>
+        </template>
+        <template #tabs>
+          <div
+            v-if="hasTemplates"
+            v-on-click-outside="closeFilterMenu"
+            class="flex items-center gap-2"
+          >
+            <div v-for="menu in filterMenus" :key="menu.key" class="relative">
+              <Button
+                :icon="menu.icon"
+                color="slate"
+                size="sm"
+                :class="{ 'bg-n-slate-9/10': openFilterMenu === menu.key }"
+                @click="toggleFilterMenu(menu.key)"
+              >
+                <span class="min-w-0 truncate">{{ menu.selected.label }}</span>
+                <Icon icon="i-lucide-chevron-down" class="shrink-0 size-4" />
+              </Button>
+              <DropdownMenu
+                v-if="openFilterMenu === menu.key"
+                :menu-items="menu.items"
+                class="mt-2 min-w-52 top-full ltr:left-0 rtl:right-0"
+                @action="handleFilterAction"
+              />
+            </div>
+          </div>
+        </template>
+        <template v-if="filteredTemplates.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{
+              $t('WHATSAPP_TEMPLATE_MGMT.COUNT', {
+                n: filteredTemplates.length,
+              })
+            }}
+          </span>
+        </template>
+        <template v-if="newTemplateUrl" #actions>
+          <a :href="newTemplateUrl" target="_blank" rel="noopener noreferrer">
+            <Button
+              :label="$t('WHATSAPP_TEMPLATE_MGMT.NEW_TEMPLATE')"
+              icon="i-lucide-plus"
+              size="sm"
+            />
+          </a>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+
+    <template #body>
+      <div
+        v-if="!filteredTemplates.length"
+        class="flex items-center justify-center p-8"
+      >
+        <span class="text-base text-n-slate-11">
+          {{ $t('WHATSAPP_TEMPLATE_MGMT.NO_RESULTS') }}
+        </span>
+      </div>
+
+      <div v-else class="border-t divide-y divide-n-weak border-n-weak">
+        <TemplateCard
+          v-for="template in filteredTemplates"
+          :key="template.key"
+          :template="template"
+          @preview="openPreview(template)"
+        />
+      </div>
+    </template>
+
+    <TemplatePreviewDrawer ref="previewPanelRef" :template="selectedTemplate" />
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/templates/TemplateCard.vue b/app/javascript/dashboard/routes/dashboard/settings/templates/TemplateCard.vue
new file mode 100644
index 000000000..5cb928df4
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/templates/TemplateCard.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+import {
+  formatTemplateDate,
+  formatTemplateLabel,
+  formatTemplateLanguage,
+  templateStatusClasses,
+  templateTypeKey,
+} from './templateUtils';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['preview']);
+
+const showStatus = computed(
+  () => props.template.status?.toLowerCase() !== 'approved'
+);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-4 py-4 cursor-pointer group"
+    role="button"
+    tabindex="0"
+    @click="emit('preview')"
+    @keydown.enter="emit('preview')"
+    @keydown.space.prevent="emit('preview')"
+  >
+    <div class="flex items-center min-w-0 gap-3">
+      <span
+        class="grid border rounded-xl shadow-sm size-10 shrink-0 place-items-center bg-n-alpha-3 border-n-strong ring ring-n-solid-1"
+      >
+        <ChannelIcon
+          :inbox="template.inboxes[0]"
+          class="size-5 text-n-slate-11"
+        />
+      </span>
+      <div class="flex flex-col min-w-0 gap-1">
+        <div class="flex items-center min-w-0 gap-2">
+          <span class="truncate text-heading-3 text-n-slate-12">
+            {{ template.name }}
+          </span>
+          <span
+            v-if="showStatus"
+            class="inline-flex shrink-0 px-2 py-0.5 text-xs font-medium rounded-md"
+            :class="templateStatusClasses(template.status)"
+          >
+            {{ formatTemplateLabel(template.status) }}
+          </span>
+        </div>
+        <div
+          class="flex flex-wrap items-center gap-2 text-body-main text-n-slate-11"
+        >
+          <span>
+            {{
+              $t(`WHATSAPP_TEMPLATE_MGMT.TYPES.${templateTypeKey(template)}`)
+            }}
+          </span>
+          <div class="w-px h-3 rounded-lg bg-n-strong" />
+          <span>{{ formatTemplateLanguage(template.language) }}</span>
+          <div class="w-px h-3 rounded-lg bg-n-strong" />
+          <span class="truncate">{{ template.inboxNames }}</span>
+          <div class="w-px h-3 rounded-lg bg-n-strong" />
+          <span class="whitespace-nowrap">
+            {{
+              $t('WHATSAPP_TEMPLATE_MGMT.LAST_SYNC_ATTEMPT', {
+                date: formatTemplateDate(template.lastUpdatedAt),
+              })
+            }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <Button
+      v-tooltip.top="$t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.TITLE')"
+      icon="i-lucide-eye"
+      color="slate"
+      size="sm"
+      class="shrink-0"
+      :aria-label="
+        $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.OPEN', { name: template.name })
+      "
+      @click.stop="emit('preview')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/templates/TemplatePreviewDrawer.vue b/app/javascript/dashboard/routes/dashboard/settings/templates/TemplatePreviewDrawer.vue
new file mode 100644
index 000000000..d524994a6
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/templates/TemplatePreviewDrawer.vue
@@ -0,0 +1,143 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import SidePanel from 'dashboard/components-next/side-panel/SidePanel.vue';
+import {
+  TemplateNormalizer,
+  TemplatePreview,
+} from 'dashboard/components-next/template-preview';
+import { PLATFORMS } from 'dashboard/services/TemplateConstants';
+import {
+  formatTemplateDate,
+  formatTemplateLabel,
+  formatTemplateLanguage,
+  templateStatusClasses,
+  templateTypeKey,
+} from './templateUtils';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const META_TEMPLATE_MANAGER_URL =
+  'https://business.facebook.com/latest/whatsapp_manager/message_templates';
+const TWILIO_TEMPLATE_MANAGER_URL =
+  'https://console.twilio.com/us1/develop/sms/content-editor';
+
+const panelRef = ref(null);
+
+const platform = computed(() => props.template?.platform || PLATFORMS.WHATSAPP);
+const normalizedTemplate = computed(() =>
+  props.template
+    ? TemplateNormalizer.normalize(props.template, platform.value)
+    : null
+);
+const variables = computed(() => normalizedTemplate.value?.variables || {});
+const managementUrl = computed(() => {
+  if (platform.value === PLATFORMS.TWILIO) {
+    return TWILIO_TEMPLATE_MANAGER_URL;
+  }
+
+  return props.template?.inboxes?.some(
+    inbox => inbox.provider === 'whatsapp_cloud'
+  )
+    ? META_TEMPLATE_MANAGER_URL
+    : null;
+});
+const managementLabel = computed(() =>
+  platform.value === PLATFORMS.TWILIO
+    ? t('WHATSAPP_TEMPLATE_MGMT.MANAGE_IN_TWILIO')
+    : t('WHATSAPP_TEMPLATE_MGMT.MANAGE_IN_META')
+);
+const open = () => panelRef.value?.open();
+const close = () => panelRef.value?.close();
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <SidePanel
+    ref="panelRef"
+    width="md"
+    :title="template?.name"
+    :description="$t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.DESCRIPTION')"
+  >
+    <div v-if="template" class="flex flex-col gap-6">
+      <div
+        class="flex items-center justify-center px-6 py-10 border rounded-xl min-h-80 border-n-weak bg-n-alpha-1"
+      >
+        <TemplatePreview
+          :template="template"
+          :variables="variables"
+          :platform="platform"
+        />
+      </div>
+
+      <div>
+        <h3 class="text-sm font-medium text-n-slate-12">
+          {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.DETAILS') }}
+        </h3>
+        <dl class="grid grid-cols-[8rem_1fr] gap-x-4 gap-y-3 mt-4 text-sm">
+          <dt class="text-n-slate-10">
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.STATUS') }}
+          </dt>
+          <dd>
+            <span
+              class="inline-flex px-2 py-0.5 text-xs font-medium rounded-md"
+              :class="templateStatusClasses(template.status)"
+            >
+              {{ formatTemplateLabel(template.status) }}
+            </span>
+          </dd>
+          <dt class="text-n-slate-10">
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.TYPE') }}
+          </dt>
+          <dd class="text-n-slate-12">
+            {{
+              $t(`WHATSAPP_TEMPLATE_MGMT.TYPES.${templateTypeKey(template)}`)
+            }}
+          </dd>
+          <dt class="text-n-slate-10">
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.CATEGORY') }}
+          </dt>
+          <dd class="text-n-slate-12">
+            {{ formatTemplateLabel(template.category) }}
+          </dd>
+          <dt class="text-n-slate-10">
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.LANGUAGE') }}
+          </dt>
+          <dd class="text-n-slate-12">
+            {{ formatTemplateLanguage(template.language) }}
+          </dd>
+          <dt class="text-n-slate-10">
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.INBOXES') }}
+          </dt>
+          <dd class="text-n-slate-12">{{ template.inboxNames }}</dd>
+          <dt class="text-n-slate-10">
+            {{ $t('WHATSAPP_TEMPLATE_MGMT.PREVIEW.LAST_SYNC_ATTEMPT') }}
+          </dt>
+          <dd class="text-n-slate-12">
+            {{ formatTemplateDate(template.lastUpdatedAt) }}
+          </dd>
+        </dl>
+      </div>
+    </div>
+
+    <template v-if="managementUrl" #footer>
+      <a :href="managementUrl" target="_blank" rel="noopener noreferrer">
+        <Button
+          class="w-full"
+          :label="managementLabel"
+          icon="i-lucide-external-link"
+          trailing-icon
+        />
+      </a>
+    </template>
+  </SidePanel>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/templates/specs/templateUtils.spec.js b/app/javascript/dashboard/routes/dashboard/settings/templates/specs/templateUtils.spec.js
new file mode 100644
index 000000000..8ca8d9a6b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/templates/specs/templateUtils.spec.js
@@ -0,0 +1,146 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { groupTemplates } from '../templateUtils';
+
+const whatsappInbox = ({
+  id,
+  name,
+  businessAccountId,
+  provider = 'whatsapp_cloud',
+}) => ({
+  id,
+  name,
+  channel_type: INBOX_TYPES.WHATSAPP,
+  provider,
+  provider_config: { business_account_id: businessAccountId },
+});
+
+describe('#groupTemplates', () => {
+  it('uses the newest cache fields when grouping a shared provider template', () => {
+    const olderInbox = whatsappInbox({
+      id: 1,
+      name: 'Older inbox',
+      businessAccountId: 'waba-1',
+    });
+    const newerInbox = whatsappInbox({
+      id: 2,
+      name: 'Newer inbox',
+      businessAccountId: 'waba-1',
+    });
+
+    const result = groupTemplates([
+      {
+        inbox: olderInbox,
+        lastUpdatedAt: '2026-08-01T10:00:00.000Z',
+        template: {
+          id: 'template-1',
+          name: 'order_update',
+          language: 'en_US',
+          status: 'pending',
+          components: [{ type: 'BODY', text: 'Old body' }],
+        },
+      },
+      {
+        inbox: newerInbox,
+        lastUpdatedAt: '2026-08-02T10:00:00.000Z',
+        template: {
+          id: 'template-1',
+          name: 'order_update',
+          language: 'en_US',
+          status: 'approved',
+          components: [{ type: 'BODY', text: 'New body' }],
+        },
+      },
+    ]);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({
+      status: 'approved',
+      components: [{ type: 'BODY', text: 'New body' }],
+      inboxNames: 'Older inbox, Newer inbox',
+      lastUpdatedAt: '2026-08-02T10:00:00.000Z',
+    });
+    expect(result[0].inboxes).toEqual([olderInbox, newerInbox]);
+  });
+
+  it('keeps delimiter-containing provider identities separate', () => {
+    const result = groupTemplates([
+      {
+        inbox: whatsappInbox({
+          id: 1,
+          name: 'Delimiter A',
+          businessAccountId: 'account:a',
+        }),
+        template: {
+          id: 'template',
+          name: 'delimiter_a',
+          language: 'en_US',
+        },
+      },
+      {
+        inbox: whatsappInbox({
+          id: 2,
+          name: 'Delimiter B',
+          businessAccountId: 'account',
+        }),
+        template: {
+          id: 'a:template',
+          name: 'delimiter_b',
+          language: 'en_US',
+        },
+      },
+    ]);
+
+    expect(result).toHaveLength(2);
+    expect(result.map(template => template.inboxes)).toEqual([
+      [
+        whatsappInbox({
+          id: 1,
+          name: 'Delimiter A',
+          businessAccountId: 'account:a',
+        }),
+      ],
+      [
+        whatsappInbox({
+          id: 2,
+          name: 'Delimiter B',
+          businessAccountId: 'account',
+        }),
+      ],
+    ]);
+  });
+
+  it('scopes templates without provider identities to their inbox and content', () => {
+    const result = groupTemplates([
+      {
+        inbox: whatsappInbox({
+          id: 1,
+          name: 'First inbox',
+          businessAccountId: 'waba-1',
+        }),
+        template: {
+          name: 'shared_name',
+          language: 'en_US',
+          components: [{ type: 'BODY', text: 'First body' }],
+        },
+      },
+      {
+        inbox: whatsappInbox({
+          id: 2,
+          name: 'Second inbox',
+          businessAccountId: 'waba-1',
+        }),
+        template: {
+          name: 'shared_name',
+          language: 'en_US',
+          components: [{ type: 'BODY', text: 'Second body' }],
+        },
+      },
+    ]);
+
+    expect(result).toHaveLength(2);
+    expect(result.map(template => template.searchableContent)).toEqual([
+      '[{"type":"BODY","text":"First body"}]',
+      '[{"type":"BODY","text":"Second body"}]',
+    ]);
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/templates/templateUtils.js b/app/javascript/dashboard/routes/dashboard/settings/templates/templateUtils.js
new file mode 100644
index 000000000..90808720a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/templates/templateUtils.js
@@ -0,0 +1,137 @@
+import { TemplateTypeDetector } from 'dashboard/services/TemplateTypeDetector';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import {
+  PLATFORMS,
+  TEMPLATE_TYPES,
+} from 'dashboard/services/TemplateConstants';
+
+const TEMPLATE_TYPE_KEYS = {
+  [TEMPLATE_TYPES.WHATSAPP_TEXT]: 'TEXT',
+  [TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER]: 'TEXT',
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE]: 'IMAGE',
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO]: 'VIDEO',
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT]: 'DOCUMENT',
+  [TEMPLATE_TYPES.WHATSAPP_INTERACTIVE]: 'CALL_TO_ACTION',
+  [TEMPLATE_TYPES.WHATSAPP_COPY_CODE]: 'COPY_CODE',
+  [TEMPLATE_TYPES.TWILIO_TEXT]: 'TEXT',
+  [TEMPLATE_TYPES.TWILIO_MEDIA]: 'MEDIA',
+  [TEMPLATE_TYPES.TWILIO_QUICK_REPLY]: 'QUICK_REPLY',
+  [TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION]: 'CALL_TO_ACTION',
+  [TEMPLATE_TYPES.TWILIO_CARD]: 'CATALOG',
+};
+
+export const groupTemplates = templateRecords => {
+  const groupedTemplates = new Map();
+
+  templateRecords.forEach(({ template, inbox, lastUpdatedAt }) => {
+    const platform =
+      inbox.channel_type === INBOX_TYPES.TWILIO
+        ? PLATFORMS.TWILIO
+        : PLATFORMS.WHATSAPP;
+    const providerAccountId =
+      inbox.provider_config?.business_account_id ||
+      inbox.account_sid ||
+      inbox.id;
+    const name = template.name || template.friendly_name;
+    const providerTemplateIdentifier = template.id || template.content_sid;
+    const templateIdentifier = providerTemplateIdentifier || name;
+    const key = JSON.stringify(
+      providerTemplateIdentifier
+        ? [
+            platform,
+            providerAccountId,
+            providerTemplateIdentifier,
+            template.language,
+          ]
+        : [platform, inbox.id, name, template.language, template]
+    );
+    const searchableContent = JSON.stringify(
+      template.components || template.types || template.body || []
+    );
+    const normalizedTemplate = {
+      ...template,
+      id: templateIdentifier,
+      name,
+      platform,
+      key,
+      inboxes: [inbox],
+      inboxNames: inbox.name,
+      lastUpdatedAt,
+      searchableContent,
+    };
+    const existingTemplate = groupedTemplates.get(key);
+
+    if (existingTemplate) {
+      const inboxes = [...existingTemplate.inboxes, inbox];
+      const incomingIsNewer =
+        lastUpdatedAt &&
+        (!existingTemplate.lastUpdatedAt ||
+          new Date(lastUpdatedAt) > new Date(existingTemplate.lastUpdatedAt));
+
+      groupedTemplates.set(key, {
+        ...(incomingIsNewer ? normalizedTemplate : existingTemplate),
+        inboxes,
+        inboxNames: inboxes.map(item => item.name).join(', '),
+        lastUpdatedAt: incomingIsNewer
+          ? lastUpdatedAt
+          : existingTemplate.lastUpdatedAt,
+      });
+      return;
+    }
+
+    groupedTemplates.set(key, normalizedTemplate);
+  });
+
+  return [...groupedTemplates.values()].sort((first, second) =>
+    first.name.localeCompare(second.name)
+  );
+};
+
+export const formatTemplateLabel = value => {
+  if (!value) return '—';
+
+  return value
+    .toLowerCase()
+    .replaceAll('_', ' ')
+    .replace(/\b\w/g, character => character.toUpperCase());
+};
+
+export const formatTemplateLanguage = language => {
+  if (!language) return '—';
+
+  const locale = language.replace('_', '-');
+  const languageCode = locale.split('-')[0];
+  const displayName = new Intl.DisplayNames([locale], {
+    type: 'language',
+  }).of(languageCode);
+
+  return `${displayName} (${locale})`;
+};
+
+export const formatTemplateDate = value => {
+  if (!value) return '—';
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+  }).format(new Date(value));
+};
+
+export const templateStatusClasses = status => {
+  const classes = {
+    approved: 'bg-n-teal-3 text-n-teal-11',
+    pending: 'bg-n-amber-3 text-n-amber-11',
+    rejected: 'bg-n-ruby-3 text-n-ruby-11',
+    paused: 'bg-n-amber-3 text-n-amber-11',
+    disabled: 'bg-n-alpha-2 text-n-slate-11',
+  };
+
+  return classes[status?.toLowerCase()] || 'bg-n-alpha-2 text-n-slate-11';
+};
+
+export const templateTypeKey = template => {
+  const type =
+    template.platform === PLATFORMS.TWILIO
+      ? TemplateTypeDetector.detectTwilioType(template)
+      : TemplateTypeDetector.detectWhatsAppType(template);
+  return TEMPLATE_TYPE_KEYS[type] || 'TEXT';
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/templates/templates.routes.js b/app/javascript/dashboard/routes/dashboard/settings/templates/templates.routes.js
new file mode 100644
index 000000000..505abe53a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/templates/templates.routes.js
@@ -0,0 +1,23 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/templates'),
+      component: SettingsWrapper,
+      children: [
+        {
+          path: '',
+          name: 'settings_templates',
+          component: Index,
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
+      ],
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 64a29c215..ed2db91bb 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -170,8 +170,10 @@ export const actions = {
       const response = await InboxesAPI.get(true);
       commit(types.default.SET_INBOXES_UI_FLAG, { isFetching: false });
       commit(types.default.SET_INBOXES, response.data.payload);
+      return true;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isFetching: false });
+      return false;
     }
   },
   createChannel: async ({ commit }, params) => {