diff --git a/dashboard/pkg/epinio/components/configuration/ConfigurationModal.vue b/dashboard/pkg/epinio/components/configuration/ConfigurationModal.vue
index 69c5ddc8..9fa9642d 100644
--- a/dashboard/pkg/epinio/components/configuration/ConfigurationModal.vue
+++ b/dashboard/pkg/epinio/components/configuration/ConfigurationModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import { EPINIO_TYPES } from '../../types';
@@ -38,6 +38,10 @@ const isEdit = computed(() => modalMode.value === 'edit');
 const isCreate = computed(() => modalMode.value === 'create');
 const isEditing = computed(() => isEdit.value || isCreate.value);
 
+const isLoadingApplications = ref(false);
+const cachedApplications = ref<any[]>([]);
+const fetchedApplications = ref<any[]>([]);
+
 const {
   options:    namespaceOpts,
   isLoading:  isLoadingNamespaces,
@@ -48,12 +52,10 @@ const {
   scopeToActiveFilter: true
 });
 
-// Filter apps to those in the selected namespace, and map to dropdown options
 const nsAppOptions = computed(() => {
   if (!formNamespace.value) return [];
 
-  return store.getters['epinio/all'](EPINIO_TYPES.APP)
-    .filter((a: any) => a.meta.namespace === formNamespace.value)
+  return fetchedApplications.value
     .map((a: any) => ({ label: a.meta.name, value: a.meta.name }));
 });
 
@@ -388,6 +390,69 @@ async function onSubmit() {
   }
 }
 
+async function fetchApplications() {
+  if (!formNamespace.value) return;
+
+  if (cachedApplications.value.length > 0) {
+    fetchedApplications.value = cachedApplications.value;
+    return;
+  }
+
+  isLoadingApplications.value = true;
+  try {
+    const res = await store.dispatch('epinio/request', {
+      opt: {
+        url: `/api/v1/applications?namespaces=${formNamespace.value}`,
+        method: 'GET',
+        responseType: 'json'
+      }
+    });
+    const rawData = res.data ?? [];
+    const classifiedData = await Promise.all(rawData.map((item: any) =>
+      store.dispatch('epinio/create', { type: EPINIO_TYPES.APP, ...item })
+    ));
+    fetchedApplications.value = classifiedData;
+    cachedApplications.value = classifiedData;
+  } catch (error) {
+    console.error('Failed to fetch applications', error);
+  } finally {
+    isLoadingApplications.value = false;
+  }
+}  
+
+async function searchApplications(query: string) {
+  if (!formNamespace.value) return;
+
+  isLoadingApplications.value = true;
+  try {
+    const res = await store.dispatch('epinio/request', {
+      opt: {
+        url: `/api/v1/applications?namespaces=${formNamespace.value}&search=${query}`,
+        method: 'GET',
+        responseType: 'json'
+      }
+    });
+    const rawData = res.data ?? [];
+    const classifiedData = await Promise.all(rawData.map((item: any) =>
+      store.dispatch('epinio/create', { type: EPINIO_TYPES.APP, ...item })
+    ));
+    fetchedApplications.value = classifiedData;
+  } catch {
+    fetchedApplications.value = [];
+  } finally {
+    isLoadingApplications.value = false;
+  }
+}
+
+// watch namespace changes to fetch applications for the selected namespace
+watch(formNamespace, (newNamespace) => {
+  if (newNamespace) {
+    fetchedApplications.value = [];
+    cachedApplications.value = [];
+    fetchApplications();
+  }
+}, { immediate: true });
+
 defineExpose({ openCreate, openView, openEdit });
 </script>
 
@@ -456,16 +521,18 @@ defineExpose({ openCreate, openView, openEdit });
 
         <!-- Bind to Application -->
         <trailhand-form-row>
-          <trailhand-dropdown
-            style="width: 100%"
-            :options="nsAppOptions"
+          <ResourceDropdown
             :values="selectedApps"
+            :options="nsAppOptions"
             label="Bind to Application (Optional)"
             :disabled="isView"
-            :multiselect="true"
-            :filterable="true"
+            filterable
+            multiselect
             placeholder="Select applications to bind"
-            @dropdown-change="(e: CustomEvent) => { selectedApps = e.detail.values; }"
+            :onDropdownChange="(e: CustomEvent) => { selectedApps = e.detail.values; }"
+            :fetchAllResources="fetchApplications"
+            :searchResources="searchApplications"
+            :isLoading="isLoadingApplications"
           />
         </trailhand-form-row>
 
diff --git a/dashboard/pkg/epinio/components/service/ServiceInstanceModal.vue b/dashboard/pkg/epinio/components/service/ServiceInstanceModal.vue
index f83923cd..8f5d7b7d 100644
--- a/dashboard/pkg/epinio/components/service/ServiceInstanceModal.vue
+++ b/dashboard/pkg/epinio/components/service/ServiceInstanceModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, reactive } from 'vue';
+import { computed, ref, reactive, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import { EPINIO_TYPES } from '../../types';
@@ -37,6 +37,14 @@ const errors = ref<string[]>([]);
 // Captured separately so background list polls (which omit internal_routes) can't wipe it
 const internalRoutes = ref<string[]>([]);
 
+const isLoadingCatalogServices = ref(false);
+const cachedCatalogServices = ref<any[]>([]);
+const fetchedCatalogServices = ref<any[]>([]);
+
+const isLoadingApplications = ref(false);
+const cachedApplications = ref<any[]>([]);
+const fetchedApplications = ref<any[]>([]);
+
 const {
   options:   namespaceOpts,
   isLoading: isLoadingNamespaces,
@@ -48,12 +56,8 @@ const {
   scopeToActiveFilter: true
 });
 
-const catalogServices = computed(() =>
-  store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE)
-);
-
 const catalogServiceOpts = computed(() =>
-  catalogServices.value.map((cs: any) => ({
+  fetchedCatalogServices.value.map((cs: any) => ({
     label: `${cs.name} (${cs.short_description})`,
     value: cs.name,
   }))
@@ -62,17 +66,16 @@ const catalogServiceOpts = computed(() =>
 const nsAppOptions = computed(() => {
   if (!formNamespace.value) return [];
 
-  return store.getters['epinio/all'](EPINIO_TYPES.APP)
-    .filter((a: any) => a.meta.namespace === formNamespace.value)
+  return fetchedApplications.value
     .map((a: any) => ({ label: a.meta.name, value: a.meta.name }));
 });
 
 const selectedCatalogService = computed(() =>
-  catalogServices.value.find((cs: any) => cs.name === formCatalogService.value)
+  fetchedCatalogServices.value.find((cs: any) => cs.name === formCatalogService.value)
 );
 
 const showChartValues = computed(() =>
-  Object.keys(selectedCatalogService.value?.settings || {}).length !== 0
+  Object.keys(selectedCatalogService.value?.settings || {}).length !== 0 || (isEdit.value && Object.keys(chartValues).length !== 0)
 );
 
 const isEdit = computed(() => modalMode.value === 'edit');
@@ -375,6 +378,120 @@ async function onSubmit() {
   }
 }
 
+const fetchCatalogServices = async () => {
+  if (cachedCatalogServices.value.length > 0) {
+    fetchedCatalogServices.value = cachedCatalogServices.value;
+    return;
+  }
+  isLoadingCatalogServices.value = true;
+  try {
+    const res = await store.dispatch('epinio/request', {
+      opt: {
+        url: `/api/v1/catalogservices`,
+        method: 'GET',
+        responseType: 'json'
+      }
+    });
+    const rawData = res.data ?? [];
+
+    // classify raw JSON into proper model instances
+    const classifiedData = await Promise.all(rawData.map((item: any) =>
+      store.dispatch('epinio/create', { type: EPINIO_TYPES.CATALOG_SERVICE, ...item })
+    ));
+    fetchedCatalogServices.value = classifiedData;
+    cachedCatalogServices.value = classifiedData;
+  } catch (error) {
+    console.error('Failed to fetch services', error);
+  } finally {
+    isLoadingCatalogServices.value = false;
+  }
+};
+
+async function searchCatalogServices(query: string) {
+  isLoadingCatalogServices.value = true;
+  try {
+    const res = await store.dispatch('epinio/request', {
+      opt: {
+        url: `/api/v1/catalogservices?search=${query}`,
+        method: 'GET',
+        responseType: 'json'
+      }
+    });
+    const rawData = res.data ?? [];
+    const classifiedData = await Promise.all(rawData.map((item: any) =>
+      store.dispatch('epinio/create', { type: EPINIO_TYPES.CATALOG_SERVICE, ...item })
+    ));
+    fetchedCatalogServices.value = classifiedData;
+  } catch {
+    fetchedCatalogServices.value = [];
+  } finally {
+    isLoadingCatalogServices.value = false;
+  }
+}
+
+async function fetchApplications() {
+  if (!formNamespace.value) return;
+
+  if (cachedApplications.value.length > 0) {
+    fetchedApplications.value = cachedApplications.value;
+    return;
+  }
+
+  isLoadingApplications.value = true;
+  try {
+    const res = await store.dispatch('epinio/request', {
+      opt: {
+        url: `/api/v1/applications?namespaces=${formNamespace.value}`,
+        method: 'GET',
+        responseType: 'json'
+      }
+    });
+    const rawData = res.data ?? [];
+    const classifiedData = await Promise.all(rawData.map((item: any) =>
+      store.dispatch('epinio/create', { type: EPINIO_TYPES.APP, ...item })
+    ));
+    fetchedApplications.value = classifiedData;
+    cachedApplications.value = classifiedData;
+  } catch (error) {
+    console.error('Failed to fetch applications', error);
+  } finally {
+    isLoadingApplications.value = false;
+  }
+}  
+
+async function searchApplications(query: string) {
+  if (!formNamespace.value) return;
+
+  isLoadingApplications.value = true;
+  try {
+    const res = await store.dispatch('epinio/request', {
+      opt: {
+        url: `/api/v1/applications?namespaces=${formNamespace.value}&search=${query}`,
+        method: 'GET',
+        responseType: 'json'
+      }
+    });
+    const rawData = res.data ?? [];
+    const classifiedData = await Promise.all(rawData.map((item: any) =>
+      store.dispatch('epinio/create', { type: EPINIO_TYPES.APP, ...item })
+    ));
+    fetchedApplications.value = classifiedData;
+  } catch {
+    fetchedApplications.value = [];
+  } finally {
+    isLoadingApplications.value = false;
+  }
+}
+
+// watch namespace changes to fetch applications for the selected namespace
+watch(formNamespace, (newNamespace) => {
+  if (newNamespace) {
+    fetchedApplications.value = [];
+    cachedApplications.value = [];
+    fetchApplications();
+  }
+}, { immediate: true });
+
 defineExpose({ openCreate, openEdit, openView });
 </script>
 
@@ -414,17 +531,18 @@ defineExpose({ openCreate, openEdit, openView });
 
         <!-- Catalog Service + Version (version only in view/edit, 3/4 + 1/4 split via 4-col grid) -->
         <trailhand-form-row :columns="(isView || isEdit) ? '4' : '1'">
-          <trailhand-dropdown
-            :style="(isView || isEdit) ? 'width: 100%; grid-column: span 3' : 'width: 100%'"
-            :options="catalogServiceOpts"
+          <ResourceDropdown
             :value="formCatalogService"
-            label="Catalog Service"
-            :required="!isView"
+            :options="catalogServiceOpts"
+            :label="'Catalog Service'"
             :disabled="isEdit || isView"
-            :filterable="true"
+            filterable
             placeholder="Select the type of service to create"
-            @dropdown-change="(e: CustomEvent) => { formCatalogService = e.detail.value; resetChartValues(); }"
-          ></trailhand-dropdown>
+            :onDropdownChange="(e: CustomEvent) => { formCatalogService = e.detail.value; resetChartValues(); }"
+            :fetchAllResources="fetchCatalogServices"
+            :searchResources="searchCatalogServices"
+            :isLoading="isLoadingCatalogServices"
+          />
           <trailhand-text-input
             v-if="isView || isEdit"
             :value="serviceModel?.catalog_service_version || ''"
@@ -445,17 +563,19 @@ defineExpose({ openCreate, openEdit, openView });
 
         <!-- Bind to Application -->
         <trailhand-form-row>
-          <trailhand-dropdown
-            style="width: 100%"
-            :options="nsAppOptions"
-            :values="selectedApps"
-            label="Bind to Application (Optional)"
-            :disabled="isView"
-            :multiselect="true"
-            :filterable="true"
-            placeholder="Select applications to bind"
-            @dropdown-change="(e: CustomEvent) => { selectedApps = e.detail.values; }"
-          ></trailhand-dropdown>
+        <ResourceDropdown
+          :values="selectedApps"
+          :options="nsAppOptions"
+          label="Bind to Application (Optional)"
+          :disabled="isView"
+          filterable
+          multiselect
+          placeholder="Select applications to bind"
+          :onDropdownChange="(e: CustomEvent) => { selectedApps = e.detail.values; }"
+          :fetchAllResources="fetchApplications"
+          :searchResources="searchApplications"
+          :isLoading="isLoadingApplications"
+        />
         </trailhand-form-row>
 
         <!-- Chart Values (shown when the selected catalog service has configurable settings) -->
diff --git a/dashboard/pkg/epinio/list/configurations.vue b/dashboard/pkg/epinio/list/configurations.vue
index 13a88447..e4c109bb 100644
--- a/dashboard/pkg/epinio/list/configurations.vue
+++ b/dashboard/pkg/epinio/list/configurations.vue
@@ -104,17 +104,34 @@ const canCreateConfiguration = computed(() => {
 const canEdit = canCreateConfiguration;
 const canDelete = canCreateConfiguration;
 
+// Watch the active namespace cache key and update the active namespaces in the store
+watch(
+  () => {
+    void store.state.activeNamespaceCacheKey;
+    const active = store.state.activeNamespaceCache;
+    return active ? Object.keys(active) : null;
+  },
+  async (namespacesArray) => {
+    paginating.value = true;
+    try {
+      await store.dispatch('epinio/setActiveNamespaces', { type: resource, namespaces: namespacesArray });
+    } finally {
+      paginating.value = false;
+    }
+  
+  },
+  { immediate: true }
+);
+
 watchEffect(() => {
-  void store.state.activeNamespaceCacheKey;
-  const activeNamespaces = store.state.activeNamespaceCache;
   const all = store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION) as any[];
 
   all.forEach((row: any) => { void row.status; void row.stateDisplay; void row.meta; void row.configuration; });
 
-  const filtered = all.filter((row: any) => {
-    const ns = row.meta?.namespace;
-
-    return !activeNamespaces || Object.keys(activeNamespaces).length === 0 || activeNamespaces[ns];
+  // Filter empty rows that are added during delete
+  const filtered = all.filter((row) => {
+    if (!row.id) return false;
+    return true;
   });
 
   const overrides = [
diff --git a/dashboard/pkg/epinio/list/services.vue b/dashboard/pkg/epinio/list/services.vue
index 1d85d784..e80f268c 100644
--- a/dashboard/pkg/epinio/list/services.vue
+++ b/dashboard/pkg/epinio/list/services.vue
@@ -70,18 +70,33 @@ const canEdit = computed(() => {
 const canDelete = canEdit;
 const canCreate = canEdit;
 
-watchEffect(() => {
-  void store.state.activeNamespaceCacheKey;
-  const activeNamespaces = store.state.activeNamespaceCache;
+// Watch the active namespace cache key and update the active namespaces in the store
+watch(
+  () => {
+    void store.state.activeNamespaceCacheKey;
+    const active = store.state.activeNamespaceCache;
+    return active ? Object.keys(active) : null;
+  },
+  async (namespacesArray) => {
+    paginating.value = true;
+    try {
+      await store.dispatch('epinio/setActiveNamespaces', { type: resource, namespaces: namespacesArray });
+    } finally {
+      paginating.value = false;
+    }
+  
+  },
+  { immediate: true }
+);
+
+watchEffect(async () => {
   const all = store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE) as any[];
   all.forEach((row: any) => { void row.status; void row.stateDisplay; void row.meta; void row.boundapps; });
 
-  // Filter empty rows that are added during delete, and filter by active namespace
+  // Filter empty rows that are added during delete
   const filtered = all.filter((row) => {
     if (!row.id) return false;
-    const ns = row.meta?.namespace;
-
-    return !activeNamespaces || Object.keys(activeNamespaces).length === 0 || activeNamespaces[ns];
+    return true;
   });
 
   // Build the row action menu with RBAC gating. The model already gates the
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
index 8fb20606..d50185ff 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
@@ -1,35 +1,73 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watchEffect, watch } from 'vue';
 import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
 import { debounce } from 'lodash';
+import { useRouter } from 'vue-router';
 
-import Masthead from '@shell/components/ResourceList/Masthead';
-
-import AppModal from '../../../../components/application/AppModal.vue';
-import AppDeleteModal from '../../../../components/application/AppDeleteModal.vue';
-import BulkDeleteModal from '../../../../components/BulkDeleteModal.vue';
-import ExportAppModal from '../../../../dialog/ExportAppModal.vue';
 import { EPINIO_TYPES } from '../../../../types';
 import { startPolling, stopPolling } from '../../../../utils/polling';
+import Masthead from '@shell/components/ResourceList/Masthead';
 import {
   makeActionMenu,
   makeStateTag,
   makeAppRoutesCell,
   makeNameLinks,
 } from '../../../../utils/table-formatters';
-import EpinioApplicationModel from 'models/applications';
 import { overrideTableRows } from '../../../../utils/table-formatters';
+import AppModal from '../../../../components/application/AppModal.vue';
+import AppDeleteModal from '../../../../components/application/AppDeleteModal.vue';
+import BulkDeleteModal from '../../../../components/BulkDeleteModal.vue';
+import ExportAppModal from '../../../../dialog/ExportAppModal.vue';
+import EpinioApplicationModel from 'models/applications';
 
-const store = useStore();
-const router = useRouter();
+const store = useStore() as any;
 const t = store.getters['i18n/t'];
+const router = useRouter();
 
-const resource = EPINIO_TYPES.APP;
+const resource: string = EPINIO_TYPES.APP;
 const schema = ref(store.getters['epinio/schemaFor'](resource));
+const paginationMeta = computed(() => store.getters['epinio/paginationMeta'](resource));
+const currentPage = computed(() => store.getters['epinio/currentPaginationPage'](resource));
+
+const searchQuery = ref<string>('');
+
+const paginating = ref(false);
+
+async function goToPage(page: number) {
+  const meta = paginationMeta.value;
+
+  if (meta && (page < 1 || page > meta.totalPages)) return;
+  paginating.value = true;
+  try {
+    await store.dispatch('epinio/goToPage', { type: resource, page });
+  } finally {
+    paginating.value = false;
+  }
+}
+
+const onSearch = debounce(async (query: string) => {
+  paginating.value = true;
+  try {
+    await store.dispatch('epinio/search', { type: resource, query });
+  } finally {
+    paginating.value = false;
+  }
+}, 500);
+
+watch(searchQuery, (newQuery) => {
+  onSearch(newQuery);
+});
+
 const appModal = ref<InstanceType<typeof AppModal> | null>(null);
+const deleteModal = ref<InstanceType<typeof AppDeleteModal> | null>(null);
+const bulkDeleteModal = ref<InstanceType<typeof BulkDeleteModal> | null>(null);
 const exportAppModal = ref<InstanceType<typeof ExportAppModal> | null>(null);
 const deleteAppModal = ref<InstanceType<typeof AppDeleteModal> | null>(null);
+
+const tableEl = ref<any>(null);
+const selectedRows = ref<any[]>([]);
+const displayRows = ref<any[]>([]);
+
 const canCreate = computed(() => {
   const canGetter = store.getters['epinio/can'];
   return canGetter && (
@@ -49,159 +87,38 @@ const canDelete = computed(() => {
   );
 });
 
-const bulkDeleteModal = ref<InstanceType<typeof BulkDeleteModal> | null>(null);
-// Selection is scoped per-namespace-table, matching how bulkRemove() already
-// splits requests by namespace and how the tables are grouped in this view.
-const namespaceTableRefs = ref<Record<string, any>>({});
-const namespaceSelectedRows = ref<Record<string, any[]>>({});
-let bulkDeleteNamespace = '';
-
-const pending = ref(true);
-
-// Per-namespace pagination state
-
-type PaginationMeta = { page: number; pageSize: number; totalItems: number; totalPages: number };
-
-const namespaceRows         = ref<Record<string, any[]>>({});
-const namespaceLoading      = ref<Record<string, boolean>>({});
-const namespaceMeta         = ref<Record<string, PaginationMeta | null>>({});
-const namespaceCurrentPages = ref<Record<string, number>>({});
-
-// Returns the best available rows for a namespace: namespace-specific once
-// fetched, global store rows before that (instant initial display).
-function getDisplayRows(ns: string): any[] {
-  return namespaceRows.value[ns] ?? [];
-}
-
-// silent=true → skip loading overlay (polling and background meta seeding)
-async function fetchNamespaceApps(namespace: string, page = 1, search='', silent = false) {
-  if (!silent) {
-    namespaceLoading.value = { ...namespaceLoading.value, [namespace]: true };
-    // Clear rows so stale data doesn't show if search returns empty
-    namespaceRows.value = { ...namespaceRows.value, [namespace]: [] };
-  }
-  namespaceCurrentPages.value = { ...namespaceCurrentPages.value, [namespace]: page };
-
-  try {
-    const { items, meta } = await store.dispatch('epinio/findAppsInNamespace', { namespace, page, search });
-
-    namespaceRows.value = { ...namespaceRows.value, [namespace]: items };
-    namespaceMeta.value = { ...namespaceMeta.value, [namespace]: meta };
-
-    // A delete can empty the page we are on. Step back to the new last page
-    // rather than leaving the user on a page that no longer exists.
-    if (page > 1 && meta && meta.totalPages >= 1 && page > meta.totalPages) {
-      await fetchNamespaceApps(namespace, meta.totalPages, search, silent);
-    }
-  } finally {
-    if (!silent) {
-      namespaceLoading.value = { ...namespaceLoading.value, [namespace]: false };
-    }
-  }
-}
-
-async function handlePageChange(event: CustomEvent, namespace: string) {
-  await fetchNamespaceApps(namespace, event.detail.page);
-}
-
-// Only render namespace groups that have apps in either source.
-const activeNamespaces = computed(() => {
-  void store.state.activeNamespaceCacheKey;
-  const active = store.state.activeNamespaceCache;
-  const namespaces = [...new Set([...Object.keys(namespaceRows.value)])].filter(ns => {
-    if (!active || Object.keys(active).length === 0) return true;
-    const isActive = active[ns];
-    return isActive;
-  });
-  return namespaces.sort();
-});
-
-// Responsive columns
-
-const windowWidth = ref(window.innerWidth);
-const onResize = () => { windowWidth.value = window.innerWidth; };
+const handleCreateClick = () => {
+  appModal.value?.openCreate();
+};
 
-const allColumns = [
-  {
-    field:     'stateDisplay',
-    label:     'State',
-    width:     '110px',
-    formatter: (_value: string, row: any) => makeStateTag(row)
+// Watch the active namespace cache key and update the active namespaces in the store
+watch(
+  () => {
+    void store.state.activeNamespaceCacheKey;
+    const active = store.state.activeNamespaceCache;
+    return active ? Object.keys(active) : null;
   },
-  {
-    field: 'nameDisplay',
-    label: 'Name',
-    width: '125px',
-    link:  (row: any) => {
-      try { return router.resolve(row.detailLocation).href; } catch { return '#'; }
+  async (namespacesArray) => {
+    paginating.value = true;
+    try {
+      await store.dispatch('epinio/setActiveNamespaces', { type: resource, namespaces: namespacesArray });
+    } finally {
+      paginating.value = false;
     }
+  
   },
-  { field: 'deployment.status', label: 'Status', width: '75px' },
-  {
-    field:     'route',
-    label:     'Routes',
-    width:     '180px',
-    sortable:  false,
-    formatter: (_value: any, row: any) => makeAppRoutesCell(row)
-  },
-  {
-    field:     'boundConfigs',
-    label:     'Bound Configs',
-    width:     '180px',
-    sortable:  false,
-    formatter: (_value: any, row: any) => makeNameLinks(
-      row.configuration?.configurations,
-      { cluster: store.getters['clusterId'], namespace: row.meta.namespace, resource: EPINIO_TYPES.CONFIGURATION },
-      router
-    )
-  },
-  {
-    field:     'boundServices',
-    label:     'Bound Services',
-    width:     '180px',
-    sortable:  false,
-    formatter: (_value: any, row: any) => makeNameLinks(
-      row.configuration?.services,
-      { cluster: store.getters['clusterId'], namespace: row.meta.namespace, resource: EPINIO_TYPES.SERVICE_INSTANCE },
-      router
-    )
-  },
-  { field: 'deployment.username', label: 'Last Deployed By', width: '150px' },
-  { field: 'meta.createdAt',      label: 'Age',              width: '50px', formatter: 'age' }
-];
+  { immediate: true }
+);
 
-const columns = computed(() => {
-  const w = windowWidth.value;
-  const hide = new Set<string>();
+watchEffect(async () => {
+  const all = store.getters['epinio/all'](EPINIO_TYPES.APP) as any[];
+  all.forEach((row: any) => { void row.status; void row.stateDisplay; void row.meta; void row.boundapps; });
 
-  if (w < 1700) hide.add('deployment.username');
-  if (w < 1500) hide.add('deployment.status');
-  if (w < 1275) { hide.add('boundConfigs'); hide.add('boundServices'); }
-  if (w < 1100) hide.add('meta.createdAt');
-  if (w < 875)  hide.add('route');
-
-  return allColumns.filter(col => !hide.has(col.field));
-});
-
-// Per-namespace search
-
-const searchQueries = ref<Record<string, string>>({});
-
-const onNamespaceSearch = debounce(async (namespace: string, query: string) => {
-  // Reset to page 1 on new search
-  await fetchNamespaceApps(namespace, 1, query, false);
-}, 300);
-
-function handleSearchInput(namespace: string, query: string) {
-  searchQueries.value[namespace] = query;
-  onNamespaceSearch(namespace, query);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function getApps(apps: any[], _namespace: string): any[] {
-  // Only inject the modal-driven Edit action when the current user actually
-  // has app write permissions; otherwise the model's filter has already
-  // removed goToEdit and we shouldn't add it back.
+  // Filter empty rows that are added during delete
+  const filtered = all.filter((row) => {
+    if (!row.id) return false;
+    return true;
+  });
 
   const overrideProps = [
     {
@@ -270,326 +187,238 @@ function getApps(apps: any[], _namespace: string): any[] {
     {
       prop: 'deleteApp',
       value: (row: EpinioApplicationModel) => () => {
-        deleteAppModal.value?.openDelete(row);
+        deleteModal.value?.openDelete(row);
       },
       conditionFn: () => {
         return true;
       },
     }
-
   ];
 
-  return overrideTableRows(apps, overrideProps);
-}
+  const processedRows = overrideTableRows(filtered, overrideProps);
 
-const handleNavigate = (event: CustomEvent) => router.push(event.detail.url);
+  displayRows.value = [...processedRows];
+});
 
-const handleSelectionChange = (event: CustomEvent, ns: string) => {
-  namespaceSelectedRows.value = { ...namespaceSelectedRows.value, [ns]: event.detail.selectedRows };
-};
+onMounted(async () => {
+  window.addEventListener('resize', onResize);
+  paginating.value = true;
+  try {
+    await Promise.all([
+      store.dispatch('epinio/me'),
+      store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE }),
+      store.dispatch('epinio/findAll', { type: EPINIO_TYPES.CONFIGURATION }),
+      store.dispatch('epinio/findAll', { type: EPINIO_TYPES.APP }),
+    ]);
+  } finally {
+    paginating.value = false;
+  }
+  startPolling(['applications', 'configurations', 'services'], store);
+
+  const query = store.$router.currentRoute._value.query;
+
+  if (query.mode === 'openModal') {
+    appModal.value?.openCreate();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize);
+  stopPolling(['applications', 'configurations', 'services']);
+});
+
+// Services without service_write/service permission on that row can't be
+// individually deleted, so they're excluded from bulk selection too.
+const isRowSelectable = (row: any) => row.canDelete;
 
-const handleBulkDeleteClick = (ns: string) => {
-  bulkDeleteNamespace = ns;
-  bulkDeleteModal.value?.openDelete(namespaceSelectedRows.value[ns] ?? []);
+const handleSelectionChange = (event: CustomEvent) => {
+  selectedRows.value = event.detail.selectedRows;
 };
 
-// Fires on both success and failure. Applications render from per-namespace
-// fetches, not the generic findAll BulkDeleteModal already refreshes
-// internally, so re-fetch this namespace directly — a batch delete can
-// partially succeed even when it ultimately errors.
-const handleBulkDeleteSettled = async () => {
-  const ns = bulkDeleteNamespace;
+const handleBulkDeleteClick = () => {
+  bulkDeleteModal.value?.openDelete(selectedRows.value);
+};
 
-  namespaceSelectedRows.value = { ...namespaceSelectedRows.value, [ns]: [] };
-  namespaceTableRefs.value[ns]?.clearSelection();
-  await refreshNamespace(ns);
+const handleBulkDeleted = () => {
+  selectedRows.value = [];
+  tableEl.value?.clearSelection();
 };
 
 // NOTE: must be a named function declared here, not an inline arrow function
-// in the template — see feedback_vue_ref_unwrap_bug.md. Vue auto-unwraps
-// top-level refs inside template expressions, so referencing a ref directly
-// in an inline template callback can silently break assignment.
-const setTableRef = (ns: string, el: any) => {
+// in the template, see feedback_vue_ref_unwrap_bug.md. Vue auto-unwraps
+// top-level refs inside template expressions, so referencing `tableEl`
+// directly in an inline template callback gives the already-unwrapped
+// (initially null) value instead of the Ref object, and `tableEl.value = el`
+// throws, silently aborting the rest of the block.
+const setTableRef = (el: any) => {
   if (el) {
-    namespaceTableRefs.value[ns] = el;
+    tableEl.value = el;
     el.renderActions = makeActionMenu;
+    el.rowSelectable = isRowSelectable;
   }
 };
 
-// Lifecycle
-
-// Applications are never loaded via the unpaginated findAll. They come in
-// exclusively through findAppsInNamespace (per-namespace, paginated).
-let appsPollIntervalId: number | undefined;
-const APPS_POLL_RATE_MS = 30000;
-
-// Keep namespaceRows in sync with the namespace store. Runs immediately on
-// mount (seeding all known namespaces) and re-runs whenever startPolling
-// updates the store with new namespaces, so new groups appear without a jump.
-watchEffect(() => {
-  const storeNs = (store.getters['epinio/all'](EPINIO_TYPES.NAMESPACE) as any[])
-    .map((ns: any) => ns.meta?.name)
-    .filter(Boolean) as string[];
-  const existing = namespaceRows.value;
-  const additions: Record<string, any[]> = {};
-  for (const ns of storeNs) {
-    if (!(ns in existing)) {
-      additions[ns] = [];
-    }
-  }
-  if (Object.keys(additions).length) {
-    namespaceRows.value = { ...existing, ...additions };
-  }
-});
-
-// Re-fetch rather than splicing the row out locally: these tables paginate
-// server-side, so dropping a row without new meta leaves totalItems (and so
-// the page count) stale, and the row that should shift up from the next page
-// never arrives.
-async function handleDeleted(app: any) {
-  await refreshNamespace(app.meta.namespace);
-}
-
-// An app create can also create its namespace, so seed the group if it is new
-// (the namespace watchEffect adds it too, but only once the store catches up).
-async function handleSaved(namespace?: string) {
-  if (!namespace) {
-    return;
-  }
-
-  if (!(namespace in namespaceRows.value)) {
-    namespaceRows.value = { ...namespaceRows.value, [namespace]: [] };
-  }
-
-  await refreshNamespace(namespace);
-}
-
-function refreshNamespace(namespace: string) {
-  return fetchNamespaceApps(
-    namespace,
-    namespaceCurrentPages.value[namespace] ?? 1,
-    searchQueries.value[namespace] ?? '',
-    true,
-  );
-}
-
-onMounted(async () => {
-  window.addEventListener('resize', onResize);
-
-  const [,,, grouped] = await Promise.all([
-    store.dispatch('epinio/me'),
-    store.dispatch('epinio/findAll', { type: EPINIO_TYPES.CONFIGURATION }),
-    store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE }),
-    store.dispatch('epinio/findGroupedApps'),
-  ]);
-
-  // ?? {} so a failed grouped fetch degrades to an empty loop rather than throwing
-  for (const [ns, nsData] of Object.entries(grouped ?? {})) {
-    const { items, meta } = nsData as { items: any[]; meta: any };
-    // spread-replace instead of direct mutation so Vue tracks the change
-    namespaceRows.value  = { ...namespaceRows.value,  [ns]: items };
-    namespaceMeta.value  = { ...namespaceMeta.value,  [ns]: meta };
-  }
+const handleNavigate = (event: CustomEvent) => {
+  router.push(event.detail.url);
+};
 
-  pending.value = false;
+const windowWidth = ref(window.innerWidth);
+const onResize = () => { windowWidth.value = window.innerWidth; };
 
-  startPolling(['namespaces', 'configurations', 'services'], store);
+const allColumns = [
+  {
+    field:     'stateDisplay',
+    label:     'State',
+    width:     '110px',
+    formatter: (_value: string, row: any) => makeStateTag(row)
+  },
+  {
+    field: 'nameDisplay',
+    label: 'Name',
+    width: '125px',
+    formatter: (_value: any, row: any) => makeNameLinks(
+      [row.meta.name],
+      { cluster: store.getters['clusterId'], namespace: row.meta.namespace, resource: EPINIO_TYPES.APP },
+      router
+    )
+  },
+  {
+    field: 'meta.namespace',
+    label: 'Namespace',
+    width: '125px',
+  },
+  { field: 'deployment.status', label: 'Status', width: '75px' },
+  {
+    field:     'route',
+    label:     'Routes',
+    width:     '180px',
+    sortable:  false,
+    formatter: (_value: any, row: any) => makeAppRoutesCell(row)
+  },
+  {
+    field:     'boundConfigs',
+    label:     'Bound Configs',
+    width:     '180px',
+    sortable:  false,
+    formatter: (_value: any, row: any) => makeNameLinks(
+      row.configuration?.configurations,
+      { cluster: store.getters['clusterId'], namespace: row.meta.namespace, resource: EPINIO_TYPES.CONFIGURATION },
+      router
+    )
+  },
+  {
+    field:     'boundServices',
+    label:     'Bound Services',
+    width:     '180px',
+    sortable:  false,
+    formatter: (_value: any, row: any) => makeNameLinks(
+      row.configuration?.services,
+      { cluster: store.getters['clusterId'], namespace: row.meta.namespace, resource: EPINIO_TYPES.SERVICE_INSTANCE },
+      router
+    )
+  },
+  { field: 'deployment.username', label: 'Last Deployed By', width: '150px' },
+  { field: 'meta.createdAt',      label: 'Age',              width: '50px', formatter: 'age' }
+];
 
-  if (store.$router.currentRoute._value.query.mode === 'openModal') {
-    appModal.value?.openCreate();
-  }
+const columns = computed(() => {
+  const w = windowWidth.value;
+  const hide = new Set<string>();
 
-  appsPollIntervalId = window.setInterval(async() => {
-    // Poll all known namespaces. Because we seed every namespace at mount,
-    // the first poll refreshes existing groups rather than adding new ones.
-    for (const ns of Object.keys(namespaceRows.value)) {
-      await fetchNamespaceApps(
-        ns,
-        namespaceCurrentPages.value[ns] ?? 1,
-        searchQueries.value[ns] ?? '',
-        true,
-      );
-    }
-  }, APPS_POLL_RATE_MS);
-});
+  if (w < 1900) hide.add('deployment.username');
+  if (w < 1700) hide.add('deployment.status');
+  if (w < 1600) { hide.add('boundConfigs'); hide.add('boundServices'); }
+  if (w < 1150) hide.add('meta.createdAt');
+  if (w < 875)  hide.add('route');
 
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize);
-  stopPolling(['namespaces', 'configurations', 'services']);
-  if (appsPollIntervalId !== undefined) {
-    window.clearInterval(appsPollIntervalId);
-  }
+  return allColumns.filter(col => !hide.has(col.field));
 });
 </script>
 
 <template>
-  <!-- <Loading v-if="pending" /> -->
-  <div class="outlet">
+  <div id="modal-container-element">
     <Masthead
       :schema="schema"
       :resource="resource"
     >
+      <template #extraActions>
+        <trailhand-button
+          v-if="selectedRows.length"
+          variant="destructive"
+          size="large"
+          @click="handleBulkDeleteClick"
+        >
+          <trailhand-icon name="trash" />
+          Delete ({{ selectedRows.length }})
+        </trailhand-button>
+      </template>
       <template #createButton>
         <trailhand-button
           v-if="canCreate"
           variant="primary"
           size="large"
-          @click="appModal?.openCreate()"
+          @click="handleCreateClick"
         >
           {{ t('generic.create') }}
         </trailhand-button>
-        <div v-else></div>
+        <div v-else />
       </template>
     </Masthead>
-
-    <div v-if="pending" class="namespace-group">
-      <div class="namespace-group-header">
-        <h3 class="namespace-header">
-          Loading applications...
-        </h3>
-        <trailhand-text-input
-          disabled
-          placeholder="Search..."
-        ></trailhand-text-input>
-      </div>
-      <trailhand-table
-        :rows="[]"
-        :columns="columns"
-        :searchable="false"
-        :server-side="false"
-        :total-items="0"
-        :current-page="1"
-        :loading="true"
-      />
-    </div>
-    <div
-      v-for="ns in activeNamespaces"
-      v-else
-      :key="ns"
-      class="namespace-group"
-    >
-      <div class="namespace-group-header">
-        <h3 class="namespace-header">
-          Namespace: <span class="namespace-name">{{ ns }}</span>
-        </h3>
-        <div class="namespace-header-actions">
-          <trailhand-button
-            v-if="(namespaceSelectedRows[ns] ?? []).length"
-            variant="destructive"
-            size="medium"
-            @click="handleBulkDeleteClick(ns)"
-          >
-            <trailhand-icon name="trash" />
-            Delete ({{ (namespaceSelectedRows[ns] ?? []).length }})
-          </trailhand-button>
-          <trailhand-text-input
-            :value="searchQueries[ns] ?? ''"
-            placeholder="Search..."
-            @text-input-change="(e: CustomEvent) => handleSearchInput(ns, (e.target as HTMLInputElement).value)"
-          ></trailhand-text-input>
-        </div>
-      </div>
-
-      <!--
-        server-side becomes true once per-namespace meta arrives.
-        Until then the table shows up to 10 global rows with no pagination
-        controls (never more than one page worth). Loading overlay only
-        appears on explicit user-initiated page changes, not polling.
-      -->
-      <trailhand-table
-        :ref="(el: any) => setTableRef(ns, el)"
-        :rows="getApps(getDisplayRows(ns), ns)"
-        :selectable="canDelete"
-        :columns="columns"
-        :searchable="false"
-        :server-side="!!namespaceMeta[ns]"
-        :total-items="namespaceMeta[ns]?.totalItems ?? 0"
-        :current-page="namespaceCurrentPages[ns] ?? 1"
-        :loading="namespaceLoading[ns] ?? false"
-        @selection-change="(e: CustomEvent) => handleSelectionChange(e, ns)"
-        @navigate="handleNavigate"
-        @page-change="(e: CustomEvent) => handlePageChange(e, ns)"
-      />
+    <div class="search-container">
+      <trailhand-text-input
+        :value="searchQuery"
+        placeholder="Search..."
+        @text-input-change="(e: CustomEvent) => searchQuery = e.detail.value"
+      ></trailhand-text-input>
     </div>
-    <AppModal ref="appModal" @saved="handleSaved" />
+    <trailhand-table
+      :ref="setTableRef"
+      :rows="displayRows"
+      :columns="columns"
+      :searchable="false"
+      :selectable="canDelete"
+      :server-side="!!paginationMeta"
+      :total-items="paginationMeta?.totalItems ?? displayRows.length"
+      :current-page="currentPage"
+      :loading="paginating"
+      key-field="id"
+      @navigate="handleNavigate"
+      @page-change="(e: CustomEvent) => goToPage(e.detail.page)"
+      @selection-change="handleSelectionChange"
+    />
+    <AppModal ref="appModal" />
+    <AppDeleteModal ref="deleteModal" />
     <ExportAppModal ref="exportAppModal" />
-    <AppDeleteModal ref="deleteAppModal" @deleted="handleDeleted" />
     <BulkDeleteModal
       ref="bulkDeleteModal"
       resource-label="application"
       :resource-type="resource"
       :show-delete-image-option="true"
-      @settled="handleBulkDeleteSettled"
+      @settled="handleBulkDeleted"
     />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.namespace-group {
-  margin-bottom: 2rem;
-
-  trailhand-table {
-    --sortable-table-row-hover-bg: var(--sortable-table-hover-bg);
-    --sortable-table-header-hover-bg: var(--sortable-table-hover-bg);
-    --sortable-table-header-sorted-bg: var(--sortable-table-hover-bg);
-    overflow-wrap: anywhere;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
 
-.namespace-group-header {
+.search-container {
+  width: 100%;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.5rem 0;
-  margin-bottom: 0.5rem;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
 }
 
-.namespace-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-shrink: 0;
+trailhand-table {
+  --sortable-table-row-hover-bg: var(--sortable-table-hover-bg);
+  --sortable-table-header-hover-bg: var(--sortable-table-hover-bg);
+  --sortable-table-header-sorted-bg: var(--sortable-table-hover-bg);
 }
 
-.namespace-header {
-  font-size: 1.3rem;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-  color: var(--body-text);
-  flex: 1;
-  min-width: 0;
-
-  .namespace-name {
-    color: var(--link);
-    font-weight: 500;
-  }
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
 }
 
-.namespace-search-input {
-  width: 100%;
-  max-width: 300px;
-  flex-shrink: 0;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  font-size: 14px;
-
-  &:focus {
-    outline: none;
-    border-color: var(--primary);
-  }
-
-  &::placeholder {
-    color: var(--input-placeholder);
-  }
-}
 </style>
diff --git a/dashboard/pkg/epinio/store/epinio-store/actions.ts b/dashboard/pkg/epinio/store/epinio-store/actions.ts
index 9934db5c..94e454b9 100644
--- a/dashboard/pkg/epinio/store/epinio-store/actions.ts
+++ b/dashboard/pkg/epinio/store/epinio-store/actions.ts
@@ -562,6 +562,13 @@ export default {
     await dispatch('findAll', { type, opt: { force: true } });
   },
 
+  setActiveNamespaces: async({ commit, dispatch }: any, { type, namespaces }: { type: string; namespaces: string[] | null }) => {
+    commit('setActiveNamespaces', namespaces);
+    commit('setPaginationPage', { type, page: 1 });
+    commit('clearAll', type);  // clear before fetch so merge starts from empty
+    await dispatch('findAll', { type, opt: { force: true } });
+  },
+
   me: async({ dispatch, commit }: any): Promise<EpinioMe> => {
     // Always fetch fresh so permissions reflect the current user (no stale cache after login switch)
     const me = await dispatch('request', { opt: { url: `/api/v1/me` } });
diff --git a/dashboard/pkg/epinio/store/epinio-store/getters.ts b/dashboard/pkg/epinio/store/epinio-store/getters.ts
index 47ea9fc7..0fc02e1f 100644
--- a/dashboard/pkg/epinio/store/epinio-store/getters.ts
+++ b/dashboard/pkg/epinio/store/epinio-store/getters.ts
@@ -51,6 +51,7 @@ export default {
       '/api/v1/namespaces':     EPINIO_TYPES.NAMESPACE,
       '/api/v1/configurations': EPINIO_TYPES.CONFIGURATION,
       '/api/v1/services':       EPINIO_TYPES.SERVICE_INSTANCE,
+      '/api/v1/applications':   EPINIO_TYPES.APP,
       '/api/v1/catalogservices': EPINIO_TYPES.CATALOG_SERVICE,
     };
 
@@ -76,6 +77,13 @@ export default {
         params.delete('search');
       }
 
+      const namespaces = state.activeNamespaces;
+      if (namespaces && namespaces.length) {
+        params.set('namespaces', namespaces.join(','));
+      } else {
+        params.delete('namespaces');
+      }
+
       const qs = params.toString();
 
       return qs ? `${ path }?${ qs }` : path;
@@ -159,6 +167,8 @@ export default {
     return out;
   },
 
+  activeNamespaces: (state: any) => () => state.activeNamespaces,
+
   singleProductCNSI: (state: any) => () => state.singleProductCNSI,
 
   info: (state: any) => () => state.info,
diff --git a/dashboard/pkg/epinio/store/epinio-store/index.ts b/dashboard/pkg/epinio/store/epinio-store/index.ts
index 99cf641e..209352c7 100644
--- a/dashboard/pkg/epinio/store/epinio-store/index.ts
+++ b/dashboard/pkg/epinio/store/epinio-store/index.ts
@@ -18,7 +18,9 @@ const epinioFactory = (): CoreStoreSpecifics => {
         searchQuery: {} as Record<string, string>,
         // Server-side namespace search results (names) for the navbar filter.
         // null means no active query -> the filter shows the full list.
-        namespaceSearch: null as string[] | null
+        namespaceSearch: null as string[] | null,
+        // Active namespaces from the top-level filter. null means no active filter -> the list shows all namespaces.
+        activeNamespaces: null as string[] | null,
       };
     },
 
diff --git a/dashboard/pkg/epinio/store/epinio-store/mutations.ts b/dashboard/pkg/epinio/store/epinio-store/mutations.ts
index 69cdec1b..65cfc7b4 100644
--- a/dashboard/pkg/epinio/store/epinio-store/mutations.ts
+++ b/dashboard/pkg/epinio/store/epinio-store/mutations.ts
@@ -50,6 +50,10 @@ export default {
     state.searchQuery[type] = query;
   },
 
+  setActiveNamespaces(state: any, namespaces: string[] | null) {
+    state.activeNamespaces = namespaces;
+  },
+
   setNamespaceSearch(state: any, names: string[] | null) {
     state.namespaceSearch = names;
   },
diff --git a/dashboard/pkg/epinio/utils/namespaces.ts b/dashboard/pkg/epinio/utils/namespaces.ts
index 80131c5f..5dba2f1c 100644
--- a/dashboard/pkg/epinio/utils/namespaces.ts
+++ b/dashboard/pkg/epinio/utils/namespaces.ts
@@ -21,10 +21,12 @@ export function useNamespaces(store: any, opts: UseNamespacesOptions = {}) {
   const isLoading = ref(false);
 
   const classify = (rawData: any[]) => Promise.all(
-    rawData.map((item: any) => store.dispatch(
-      'epinio/create',
-      { type: EPINIO_TYPES.NAMESPACE, ...item }
-    ))
+    rawData.map((item: any) =>
+      store.dispatch('epinio/create', {
+        type: EPINIO_TYPES.NAMESPACE,
+        ...item
+      })
+    )
   );
 
   const load = async (url: string) => {
@@ -47,25 +49,25 @@ export function useNamespaces(store: any, opts: UseNamespacesOptions = {}) {
       return rows;
     }
 
-    return rows.filter((ns: any) => !!active[ns.meta?.name ?? ns.metadata?.name]);
+    return rows.filter(
+      (ns: any) => !!active[ns.meta?.name ?? ns.metadata?.name]
+    );
   };
 
   // Cached, so reopening a dropdown in the same form doesn't refetch
   async function fetchAll() {
     if (cached.value.length > 0) {
       namespaces.value = cached.value;
-
       return;
     }
 
     isLoading.value = true;
 
     try {
-      const rows = await load('/api/v1/namespaces');
-      const scoped = opts.scopeToActiveFilter ? inActiveFilter(rows) : rows;
+      const classifiedData = await load('/api/v1/namespaces');
 
-      namespaces.value = scoped;
-      cached.value = scoped;
+      namespaces.value = classifiedData;
+      cached.value = classifiedData;
     } catch (e) {
       if (opts.onError) {
         opts.onError(e);
@@ -81,9 +83,9 @@ export function useNamespaces(store: any, opts: UseNamespacesOptions = {}) {
     isLoading.value = true;
 
     try {
-      namespaces.value = await load(
-        `/api/v1/namespaces?search=${ encodeURIComponent(query) }`
-      );
+      const classifiedData = await load(`/api/v1/namespaces?search=${ encodeURIComponent(query) }`);
+
+      namespaces.value = classifiedData;
     } catch {
       namespaces.value = [];
     } finally {
@@ -91,24 +93,51 @@ export function useNamespaces(store: any, opts: UseNamespacesOptions = {}) {
     }
   }
 
-  // Read-only namespace fields (view/edit) only need the record's own namespace
-  // present for the label to render. Leaves the cache empty so a later create
-  // still loads the full list.
   function seed(name: string) {
     namespaces.value = name ? [{ meta: { name } }] : [];
     cached.value = [];
   }
 
-  const sorted = computed(() => sortBy(namespaces.value, (ns: any) => ns.meta?.name) as any[]);
+  const filteredNamespaces = computed(() => {
+    if (!opts.scopeToActiveFilter) {
+      return namespaces.value;
+    }
 
-  const options = computed(() => sorted.value.map((ns: any) => ({
-    label: ns.meta?.name || '',
-    value: ns.meta?.name || '',
-  })));
+    // Access the reactive store state inside the computed.
+    const active = store.state.activeNamespaceCache;
+
+    if (!active || Object.keys(active).length === 0) {
+      return namespaces.value;
+    }
 
-  const firstName = computed(() => sorted.value[0]?.meta?.name || '');
+    return inActiveFilter(namespaces.value);
+  });
+
+  const sorted = computed(() =>
+    sortBy(
+      filteredNamespaces.value,
+      (ns: any) => ns.meta?.name
+    ) as any[]
+  );
+
+  const options = computed(() =>
+    sorted.value.map((ns: any) => ({
+      label: ns.meta?.name || '',
+      value: ns.meta?.name || '',
+    }))
+  );
+
+  const firstName = computed(
+    () => sorted.value[0]?.meta?.name || ''
+  );
 
   return {
-    namespaces: sorted, options, isLoading, firstName, fetchAll, search, seed
+    namespaces: sorted,
+    options,
+    isLoading,
+    firstName,
+    fetchAll,
+    search,
+    seed
   };
 }
diff --git a/dashboard/pkg/epinio/utils/table-formatters.ts b/dashboard/pkg/epinio/utils/table-formatters.ts
index 0d1e5b8e..89b6dff1 100644
--- a/dashboard/pkg/epinio/utils/table-formatters.ts
+++ b/dashboard/pkg/epinio/utils/table-formatters.ts
@@ -22,6 +22,10 @@ export function makeRouterLinks(
 ): HTMLSpanElement {
   const span = document.createElement('span');
 
+  span.style.whiteSpace = 'normal';
+  span.style.overflowWrap = 'anywhere';
+  span.style.wordBreak = 'break-word';
+
   items.forEach((item, index) => {
     const a = document.createElement('a');