diff --git a/dashboard/package.json b/dashboard/package.json
index b09a612e..acd01422 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -5,6 +5,7 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@krumio/trailhand-ui": "^1.4.1",
     "@rancher/shell": "3.0.7",
     "@types/lodash": "^4.17.16",
     "eslint": "^9.28.0",
@@ -39,6 +40,8 @@
     "@types/vue": "^1.0.31",
     "@vue/eslint-config-standard": "5.1.2",
     "@vue/eslint-config-typescript": "^11.0.3",
+    "esbuild-loader": "^4.4.2",
     "globals": "^16.2.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/dashboard/pkg/epinio/components/tables/types.ts b/dashboard/pkg/epinio/components/tables/types.ts
index 0768f30b..42a5b2d6 100644
--- a/dashboard/pkg/epinio/components/tables/types.ts
+++ b/dashboard/pkg/epinio/components/tables/types.ts
@@ -44,6 +44,34 @@ export const dataTableFormatters = {
   dateTime: (value: any): string => {
     if (!value) return '-';
     return new Date(value).toLocaleString();
+  },
+
+  /**
+   * Format memory bytes to human readable format (B, KB, MB, GB, TB)
+   */
+  memory: (value: any): string => {
+    if (!value || value === 0) return '0 B';
+
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let val = Number(value);
+    let unitIndex = 0;
+
+    while (val >= 1024 && unitIndex < units.length - 1) {
+      val = val / 1024;
+      unitIndex++;
+    }
+
+    return `${Math.round(val)} ${units[unitIndex]}`;
+  },
+
+  /**
+   * Format millicpus value
+   */
+  milliCPUs: (value: any): string => {
+    if (!value || value === 0) return '0';
+
+    const formatted = Math.round(Number(value)).toString();
+    return formatted === '0' ? '0' : formatted;
   }
 };
 
@@ -83,6 +111,22 @@ export interface DataTableColumn {
    */
   formatter?: string | ((value: any, row: DataTableRow) => any);
 
+  /**
+   * Link URL for the column. Can be:
+   * - A string field name to access the URL from row data
+   * - A function (row) => URL string
+   * When provided, the cell value will be rendered as a clickable link
+   * @param row - The entire row object
+   * @returns The URL for the link
+   */
+  link?: string | ((row: DataTableRow) => string | null | undefined);
+
+  /**
+   * Target attribute for links (default: '_self')
+   * Use '_blank' to open links in a new tab
+   */
+  linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+
   /**
    * Custom sort function for this column
    * @param a - First row to compare
diff --git a/dashboard/pkg/epinio/detail/applications.vue b/dashboard/pkg/epinio/detail/applications.vue
index 0717b8b2..8e31fff6 100644
--- a/dashboard/pkg/epinio/detail/applications.vue
+++ b/dashboard/pkg/epinio/detail/applications.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, defineProps, onMounted } from 'vue';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 import day from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -10,17 +12,15 @@ import { GitUtils } from '@shell/utils/git';
 import { isArray } from '@shell/utils/array';
 import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
 import { APPLICATION_MANIFEST_SOURCE_TYPE, EPINIO_TYPES } from '../types';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 import PlusMinus from '@shell/components/form/PlusMinus.vue';
 import { epinioExceptionToErrorsArray } from '../utils/errors';
 import ApplicationCard from '../components/application/AppCardDetail.vue';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import AppGitDeployment from '../components/application/AppGitDeployment.vue';
-import Link from '@shell/components/formatter/Link.vue';
 import Banner from '@components/Banner/Banner.vue';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 day.extend(relativeTime);
 
@@ -32,6 +32,11 @@ const props = defineProps<{
 
 const store = useStore();
 
+const gitCommitsTableContainer = ref<HTMLElement | null>(null);
+const instancesTableContainer = ref<HTMLElement | null>(null);
+const servicesTableContainer = ref<HTMLElement | null>(null);
+const configsTableContainer = ref<HTMLElement | null>(null);
+
 const t = store.getters['i18n/t'];
 
 const saving = ref(false);
@@ -52,7 +57,21 @@ const instanceColumns: DataTableColumn[] = [
     label: 'Name'
   },
   {
-    field: 'meta.createdAt',
+    field: 'millicpus',
+    label: 'Mill CPUs',
+    formatter: 'milliCPUs'
+  },
+  {
+    field: 'memoryBytes',
+    label: 'RAM',
+    formatter: 'memory'
+  },
+  {
+    field: 'restarts',
+    label: 'Restarts'
+  },
+  {
+    field: 'createdAt',
     label: 'Age',
     formatter: 'age'
   }
@@ -70,11 +89,11 @@ const serviceColumns: DataTableColumn[] = [
   },
   {
     field: 'catalog_service',
-    label: 'Service'
+    label: 'Catalog Service'
   },
   {
     field: 'catalog_service_version',
-    label: 'Service Version'
+    label: 'Catalog Service Version'
   },
   {
     field: 'meta.createdAt',
@@ -84,15 +103,18 @@ const serviceColumns: DataTableColumn[] = [
 ];
 
 const configColumns: DataTableColumn[] = [
-  {
-    field: 'stateDisplay',
-    label: 'State',
-    width: '100px'
-  },
   {
     field: 'nameDisplay',
     label: 'Name'
   },
+  {
+    field: 'variableCount',
+    label: 'No. of Variables'
+  },
+  {
+    field: 'createdBy',
+    label: 'Created By'
+  },
   {
     field: 'meta.createdAt',
     label: 'Age',
@@ -115,6 +137,14 @@ onMounted(async () => {
     await fetchRepoDetails();
     setCommitDetails();
   }
+
+  await nextTick();
+  createOrUpdateInstancesTable();
+  createOrUpdateServicesTable();
+  createOrUpdateConfigsTable();
+  if (preparedCommits.value.length) {
+    createOrUpdateGitCommitsTable();
+  }
 });
 
 async function updateInstances(newInstances: number) {
@@ -180,29 +210,6 @@ const preparedCommits = computed(() => {
   }));
 });
 
-const gitCommitsColumns = computed<DataTableColumn[]>(() => [
-  {
-    field: 'sha',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.sha.label`),
-    width: '100px'
-  },
-  {
-    field: 'author.login',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.author.label`),
-    width: '190px'
-  },
-  {
-    field: 'message',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.message.label`)
-  },
-  {
-    field: 'date',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.date.label`),
-    width: '220px',
-    formatter: 'dateTime'
-  }
-]);
-
 const sourceIcon = computed(() => props.value.appSourceInfo?.icon || 'icon-epinio');
 
 const commitPosition = computed(() => {
@@ -230,6 +237,132 @@ const commitPosition = computed(() => {
     position: idx
   };
 });
+
+// Custom formatters for git commits table
+const formatAuthorLogin = (value: any, row: any) => {
+  if (row.author) {
+    return `
+      <div class="sortable-table-avatar" style="display: flex; align-items: center;">
+        <img src="${row.author.avatarUrl}" alt="" style="width: 30px; height: 30px; border-radius: 4px; margin-right: 10px;">
+        <a href="${row.author.htmlUrl}" target="_blank" rel="nofollow noopener noreferrer">${row.author.name}</a>
+      </div>
+    `;
+  }
+  return t(`gitPicker.${gitType.value}.tableHeaders.author.unknown`);
+};
+
+const formatSha = (value: any, row: any) => {
+  const isDeployed = row.commitId === gitDeployment.value.deployedCommit.long;
+  const deployedIcon = isDeployed
+    ? `<i class="icon icon-fw icon-commit" title="${t('epinio.applications.detail.deployment.details.git.deployed')}"></i>`
+    : '';
+  return `
+    <div class="sortable-table-commit" style="display: flex;">
+      <a href="${row.htmlUrl}" target="_blank" rel="noopener noreferrer">${row.sha}</a>
+      ${deployedIcon}
+    </div>
+  `;
+};
+
+// Create and update tables
+const createOrUpdateGitCommitsTable = () => {
+  if (!gitCommitsTableContainer.value || !preparedCommits.value.length) return;
+
+  gitCommitsTableContainer.value.innerHTML = '';
+
+  const cols = [
+    {
+      field: 'sha',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.sha.label`),
+      width: '100px',
+      formatter: formatSha
+    },
+    {
+      field: 'author.login',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.author.label`),
+      width: '190px',
+      formatter: formatAuthorLogin
+    },
+    {
+      field: 'message',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.message.label`)
+    },
+    {
+      field: 'date',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.date.label`),
+      width: '220px',
+      formatter: 'dateTime'
+    }
+  ];
+
+  const tableElement = createDataTable(cols, preparedCommits.value, {
+    searchable: true,
+    paginated: true,
+    rowsPerPage: 10
+  });
+  setupActionListener(tableElement);
+  gitCommitsTableContainer.value.appendChild(tableElement);
+};
+
+const createOrUpdateInstancesTable = () => {
+  if (!instancesTableContainer.value) return;
+
+  instancesTableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(instanceColumns, props.value.instances || [], {
+    searchable: false,
+    paginated: false
+  });
+  setupActionListener(tableElement);
+  instancesTableContainer.value.appendChild(tableElement);
+};
+
+const createOrUpdateServicesTable = () => {
+  if (!servicesTableContainer.value) return;
+
+  servicesTableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(serviceColumns, props.value.services || [], {
+    searchable: false,
+    paginated: false
+  });
+  setupActionListener(tableElement);
+  servicesTableContainer.value.appendChild(tableElement);
+};
+
+const createOrUpdateConfigsTable = () => {
+  if (!configsTableContainer.value) return;
+
+  configsTableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(configColumns, props.value.baseConfigurations || [], {
+    searchable: false,
+    paginated: false
+  });
+  setupActionListener(tableElement);
+  configsTableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(() => props.value.instances, async () => {
+  await nextTick();
+  createOrUpdateInstancesTable();
+}, { deep: true });
+
+watch(() => props.value.services, async () => {
+  await nextTick();
+  createOrUpdateServicesTable();
+}, { deep: true });
+
+watch(() => props.value.baseConfigurations, async () => {
+  await nextTick();
+  createOrUpdateConfigsTable();
+}, { deep: true });
+
+watch(preparedCommits, async () => {
+  await nextTick();
+  createOrUpdateGitCommitsTable();
+}, { deep: true });
 </script>
 
 <template>
@@ -448,51 +581,7 @@ const commitPosition = computed(() => {
           >
             {{ t('epinio.applications.detail.deployment.commits.redeploy') }}
           </Banner>
-          <DataTable
-            v-if="preparedCommits"
-            :rows="preparedCommits"
-            :columns="gitCommitsColumns"
-            key-field="sha"
-            :searchable="true"
-            :paginated="true"
-            :rows-per-page="10"
-          >
-            <template #cell:author.login="{row}">
-              <div class="sortable-table-avatar">
-                <template v-if="row.author">
-                  <img
-                    :src="row.author.avatarUrl"
-                    alt=""
-                  >
-                  <a
-                    :href="row.author.htmlUrl"
-                    target="_blank"
-                    rel="nofollow noopener noreferrer"
-                  >
-                    {{ row.author.name }}
-                  </a>
-                </template>
-                <template v-else>
-                  {{ t(`gitPicker.${ gitType }.tableHeaders.author.unknown`) }}
-                </template>
-              </div>
-            </template>
-
-            <template #cell:sha="{row}">
-              <div class="sortable-table-commit">
-                <Link
-                  v-model:value="row.sha"
-                  :row="row"
-                  url-key="htmlUrl"
-                />
-                <i
-                  v-if="row.commitId === gitDeployment.deployedCommit.long"
-                  v-tooltip="t('epinio.applications.detail.deployment.details.git.deployed')"
-                  class="icon icon-fw icon-commit"
-                />
-              </div>
-            </template>
-          </DataTable>
+          <div ref="gitCommitsTableContainer"></div>
         </Tab>
       </Tabbed>
     </div>
@@ -508,57 +597,21 @@ const commitPosition = computed(() => {
           name="instances"
           :weight="3"
         >
-          <DataTable
-            :columns="instanceColumns"
-            :rows="value.instances"
-            :searchable="false"
-            :paginated="false"
-          >
-            <template #cell:stateDisplay="{ row }">
-              <BadgeStateFormatter
-                :row="row"
-                :value="row.stateDisplay"
-              />
-            </template>
-          </DataTable>
+          <div ref="instancesTableContainer"></div>
         </Tab>
         <Tab
           label-key="epinio.applications.detail.tables.services"
           name="services"
           :weight="2"
         >
-          <DataTable
-            :columns="serviceColumns"
-            :rows="value.services"
-            :searchable="false"
-            :paginated="false"
-          >
-            <template #cell:stateDisplay="{ row }">
-              <BadgeStateFormatter
-                :row="row"
-                :value="row.stateDisplay"
-              />
-            </template>
-          </DataTable>
+          <div ref="servicesTableContainer"></div>
         </Tab>
         <Tab
           label-key="epinio.applications.detail.tables.configs"
           name="configs"
           :weight="1"
         >
-          <DataTable
-            :columns="configColumns"
-            :rows="value.baseConfigurations"
-            :searchable="false"
-            :paginated="false"
-          >
-            <template #cell:stateDisplay="{ row }">
-              <BadgeStateFormatter
-                :row="row"
-                :value="row.stateDisplay"
-              />
-            </template>
-          </DataTable>
+          <div ref="configsTableContainer"></div>
         </Tab>
       </Tabbed>
     </div>
diff --git a/dashboard/pkg/epinio/detail/catalogservices.vue b/dashboard/pkg/epinio/detail/catalogservices.vue
index 39149477..76895847 100644
--- a/dashboard/pkg/epinio/detail/catalogservices.vue
+++ b/dashboard/pkg/epinio/detail/catalogservices.vue
@@ -1,28 +1,50 @@
 <script setup lang="ts">
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import { useStore } from 'vuex';
-import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ref, onMounted, nextTick, watch } from 'vue';
 
 import EpinioCatalogServiceModel from '../models/catalogservices';
 import { EPINIO_TYPES } from '../types';
 
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver } from '../utils/table-helpers';
 
 const store = useStore();
+const router = useRouter();
 
 const t = store.getters['i18n/t'];
 
 const props = defineProps<{ value: EpinioCatalogServiceModel }>();
 
 const pending = ref<boolean>(true);
+const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
   await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.SERVICE_INSTANCE });
   pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
 });
 
+// Watch for changes to the services
+watch(() => props.value.services, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+// Custom formatters
+const formatBoundApps = (_value: any, row: any) => {
+  if (row.applications && row.applications.length) {
+    return row.applications
+      .map((app: any) => app.meta.name)
+      .join(', ');
+  }
+  return '-';
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -31,25 +53,24 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'nameDisplay',
-    label: 'Name'
-  },
-  {
-    field: 'metadata.namespace',
-    label: 'Namespace'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'catalog_service',
-    label: 'Service',
-    sortable: false
+    label: 'Catalog Service',
+    sortable: false,
+    link: createLinkResolver(router, 'serviceLocation')
   },
   {
     field: 'catalog_service_version',
-    label: 'Service Version'
+    label: 'Catalog Service Version'
   },
   {
     field: 'boundApps',
-    label: 'Bound Apps',
-    sortable: false
+    label: 'Bound Applications',
+    sortable: false,
+    formatter: formatBoundApps
   },
   {
     field: 'metadata.created_at',
@@ -57,6 +78,18 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value || pending.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, props.value.services || []);
+  setupActionListener(tableElement);
+  setupNavigationListener(tableElement, router);
+  tableContainer.value.appendChild(tableElement);
+};
 </script>
 
 <template>
@@ -64,44 +97,7 @@ const columns: DataTableColumn[] = [
     <h2 class="mt-20">
       {{ t('epinio.catalogService.detail.servicesTitle', { catalogService: props.value.name }) }}
     </h2>
-    <DataTable
-      :rows="props.value.services"
-      :columns="columns"
-      :loading="pending"
-    >
-      <template #cell:stateDisplay="{ row }">
-        <BadgeStateFormatter
-          :row="row"
-          :value="row.stateDisplay"
-        />
-      </template>
-      <template #cell:catalog_service="{ row }">
-        <LinkDetail
-          v-if="row.serviceLocation"
-          :row="row.serviceLocation"
-          :value="row.catalog_service"
-        />
-        <span v-else>{{ row.catalog_service }}</span>
-      </template>
-      <template #cell:boundApps="{ row }">
-        <span v-if="row.applications && row.applications.length">
-          <template v-for="(app, index) in row.applications" :key="app.id">
-            <LinkDetail
-              :row="app"
-              :value="app.meta.name"
-            />
-            <span
-              v-if="index < row.applications.length - 1"
-              :key="app.id + 'i'"
-            >, </span>
-          </template>
-        </span>
-        <span
-          v-else
-          class="text-muted"
-        >&nbsp;</span>
-      </template>
-
-    </DataTable>
+    <div v-if="pending">Loading...</div>
+    <div v-else ref="tableContainer"></div>
   </div>
 </template>
diff --git a/dashboard/pkg/epinio/list/appcharts.vue b/dashboard/pkg/epinio/list/appcharts.vue
index b605a71b..05de8b4d 100644
--- a/dashboard/pkg/epinio/list/appcharts.vue
+++ b/dashboard/pkg/epinio/list/appcharts.vue
@@ -1,32 +1,24 @@
 <script setup lang="ts">
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
+import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
+
 import { useStore } from 'vuex';
-import DataTable from '../components/tables/DataTable.vue';
-import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
-
-const pending = ref<boolean>(true);
-defineProps<{ schema: object }>(); // Keep for compatibility
+import { createDataTable, setupActionListener, applyNamespaceFilter } from '../utils/table-helpers';
 
 const store = useStore();
 
-onMounted(async () => {
-  await store.dispatch(
-    `epinio/findAll`,
-    { type: EPINIO_TYPES.APP_CHARTS }
-  );
-  pending.value = false;
-  startPolling(["appcharts"], store);
-});
+defineProps<{ schema: object }>(); // Keep for compatibility
 
-onUnmounted(() => {
-  stopPolling(["appcharts"]);
-});
+const pending = ref<boolean>(true);
+const tableContainer = ref<HTMLElement | null>(null);
 
 const rows = computed(() => {
-  return store.getters['epinio/all'](EPINIO_TYPES.APP_CHARTS);
+  const allRows = store.getters['epinio/all'](EPINIO_TYPES.APP_CHARTS);
+  return applyNamespaceFilter(store, allRows);
 });
 
 const columns: DataTableColumn[] = [
@@ -48,19 +40,41 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, rows.value);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+onMounted(async () => {
+  await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP_CHARTS });
+
+  pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
+
+  startPolling(["appcharts"], store);
+});
+
+onUnmounted(() => {
+  stopPolling(["appcharts"]);
+});
 </script>
 
 <template>
-  <DataTable
-    :rows="rows"
-    :columns="columns"
-    :loading="pending"
-  >
-    <template #cell:stateDisplay="{ row }">
-      <BadgeStateFormatter
-        :row="row"
-        :value="row.stateDisplay"
-      />
-    </template>
-  </DataTable>
+  <div v-if="pending">Loading...</div>
+  <div v-else ref="tableContainer"></div>
 </template>
diff --git a/dashboard/pkg/epinio/list/configurations.vue b/dashboard/pkg/epinio/list/configurations.vue
index 5a7506fd..0c244f48 100644
--- a/dashboard/pkg/epinio/list/configurations.vue
+++ b/dashboard/pkg/epinio/list/configurations.vue
@@ -1,19 +1,89 @@
 <script setup lang="ts">
-import DataTable from '../components/tables/DataTable.vue';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 
 import { useStore } from 'vuex';
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver, applyNamespaceFilter } from '../utils/table-helpers';
 
 const store = useStore();
+const router = useRouter();
 
 defineProps<{ schema: object }>(); // Keep for compatibility
 
 const pending = ref<boolean>(true);
+const tableContainer = ref<HTMLElement | null>(null);
+
+const rows = computed(() => {
+  const allRows = store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION);
+  return applyNamespaceFilter(store, allRows);
+});
+
+// Custom formatters
+const formatBoundApps = (value: any, row: any) => {
+  if (!row.applications || row.applications.length === 0) {
+    return '-';
+  }
+  return row.applications.map((app: any) => app.meta.name).join(', ');
+};
+
+const columns: DataTableColumn[] = [
+  {
+    field: 'nameDisplay',
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
+  },
+  {
+    field: 'boundApps',
+    label: 'Bound Applications',
+    sortable: false,
+    formatter: formatBoundApps
+  },
+  {
+    field: 'service',
+    label: 'Service',
+    sortable: false,
+    link: createLinkResolver(router, 'service.detailLocation'),
+    formatter: (_value: any, row: any) => {
+      return row.service ? row.service.meta.name : '-';
+    }
+  },
+  {
+    field: 'variableCount',
+    label: 'No. of Variables'
+  },
+  {
+    field: 'configuration.user',
+    label: 'Created By'
+  },
+  {
+    field: 'meta.createdAt',
+    label: 'Age',
+    formatter: 'age'
+  }
+];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, rows.value);
+  setupActionListener(tableElement);
+  setupNavigationListener(tableElement, router);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
 
 onMounted(async () => {
   store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP });
@@ -21,6 +91,10 @@ onMounted(async () => {
   await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.CONFIGURATION });
 
   pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
+
   startPolling([
     "applications",
     "namespaces",
@@ -39,83 +113,9 @@ onUnmounted(() => {
     "services"
   ]);
 });
-
-const rows = computed(() => {
-  return store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION);
-});
-
-const columns: DataTableColumn[] = [
-  {
-    field: 'nameDisplay',
-    label: 'Name'
-  },
-  {
-    field: 'meta.namespace',
-    label: 'Namespace'
-  },
-  {
-    field: 'boundApps',
-    label: 'Bound Apps',
-    sortable: false
-  },
-  {
-    field: 'service',
-    label: 'Service',
-    sortable: false
-  },
-  {
-    field: 'variableCount',
-    label: 'Variable Count'
-  },
-  {
-    field: 'meta.createdAt',
-    label: 'Age',
-    formatter: 'age'
-  }
-];
 </script>
 
 <template>
-  <DataTable
-    :rows="rows"
-    :columns="columns"
-    :loading="pending"
-  >
-    <template #cell:stateDisplay="{ row }">
-      <BadgeStateFormatter
-        :row="row"
-        :value="row.stateDisplay"
-      />
-    </template>
-    <template #cell:service="{ row }">
-      <LinkDetail
-        v-if="row.service"
-        :key="row.service.id"
-        :row="row.service"
-        :value="row.service.meta.name"
-      />
-      <span
-        v-else
-        class="text-muted"
-      >&nbsp;</span>
-    </template>
-    <template #cell:boundApps="{ row }">
-      <span v-if="row.applications && row.applications.length">
-        <template v-for="(app, index) in row.applications" :key="app.id">
-          <LinkDetail
-            :row="app"
-            :value="app.meta.name"
-          />
-          <span
-            v-if="index < row.applications.length - 1"
-            :key="app.id + 'i'"
-          >, </span>
-        </template>
-      </span>
-      <span
-        v-else
-        class="text-muted"
-      >&nbsp;</span>
-    </template>
-  </DataTable>
+  <div v-if="pending">Loading...</div>
+  <div v-else ref="tableContainer"></div>
 </template>
diff --git a/dashboard/pkg/epinio/list/namespaces.vue b/dashboard/pkg/epinio/list/namespaces.vue
index 11648e0e..889f9f5c 100644
--- a/dashboard/pkg/epinio/list/namespaces.vue
+++ b/dashboard/pkg/epinio/list/namespaces.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import { useStore } from 'vuex';
 import { ref, onMounted, onUnmounted, computed, watch, nextTick, useAttrs } from 'vue';
 import { EPINIO_TYPES } from '../types';
@@ -6,16 +8,15 @@ import { Card } from '@components/Card';
 import Banner from '@components/Banner/Banner.vue';
 import { _CREATE } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { epinioExceptionToErrorsArray } from '../utils/errors';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { validateKubernetesName } from '@shell/utils/validators/kubernetes-name';
 import { startPolling, stopPolling } from '../utils/polling';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
-defineProps<{
+const props = defineProps<{
   schema: object,
   rows: Array,
 }>();
@@ -24,15 +25,16 @@ const attrs = useAttrs();
 const store = useStore();
 const t = store.getters['i18n/t'];
 
-const errors = ref<Array>([]);
+const errors = ref<Array<any>>([]);
 const namespaceName = ref('namespaceName');
 const showCreateModal = ref<boolean>(false);
 const creatingNamespace = ref<boolean>(false);
 const touched = ref<boolean>(false);
+const tableContainer = ref<HTMLElement | null>(null);
 
 const mode: string = _CREATE;
 const resource: string = EPINIO_TYPES.NAMESPACE;
-const value = ref<Array>({ meta: { name: '' } });
+const value = ref<any>({ meta: { name: '' } });
 
 const showPromptRemove = computed(() => {
   return store.state['action-menu'].showPromptRemove
@@ -48,12 +50,33 @@ const validationPassed = computed(() => {
   return errors.value?.length === 0;
 });
 
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, props.rows);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(() => props.rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
 onMounted(() => {
   // Opens the create namespace modal if the query is passed as query param
   if (store.$router.currentRoute._value.query.mode === 'openModal') {
     openCreateModal();
   }
 
+  nextTick(() => {
+    createOrUpdateTable();
+  });
+
   startPolling(["namespaces", "applications", "configurations"], store);
 });
 
@@ -156,7 +179,7 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'configCount',
-    label: 'Configurations'
+    label: 'Configs'
   },
   {
     field: 'meta.createdAt',
@@ -181,18 +204,7 @@ const columns: DataTableColumn[] = [
         </button>
       </template>
     </Masthead>
-    <DataTable
-      :rows="rows"
-      :columns="columns"
-      key-field="_key"
-    >
-      <template #cell:stateDisplay="{ row }">
-        <BadgeStateFormatter
-          :row="row"
-          :value="row.stateDisplay"
-        />
-      </template>
-    </DataTable>
+    <div ref="tableContainer"></div>
     <div
       v-if="showCreateModal"
       class="modal"
diff --git a/dashboard/pkg/epinio/list/services.vue b/dashboard/pkg/epinio/list/services.vue
index d5682754..1f45d893 100644
--- a/dashboard/pkg/epinio/list/services.vue
+++ b/dashboard/pkg/epinio/list/services.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, computed, nextTick, watch } from 'vue';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 
 import { EPINIO_TYPES } from '../types';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { startPolling, stopPolling } from '../utils/polling';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver, applyNamespaceFilter } from '../utils/table-helpers';
 
 const pending = ref(true);
 const store = useStore();
+const router = useRouter();
+const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
   await Promise.all([
@@ -32,9 +35,18 @@ onUnmounted(() => {
 });
 
 const rows = computed(() => {
-  return store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
+  const allRows = store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
+  return applyNamespaceFilter(store, allRows);
 });
 
+// Custom formatters
+const formatBoundApps = (_value: any, row: any) => {
+  if (!row.applications || row.applications.length === 0) {
+    return '-';
+  }
+  return row.applications.map((app: any) => app.meta.name).join(', ');
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -43,25 +55,24 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'nameDisplay',
-    label: 'Name'
-  },
-  {
-    field: 'metadata.namespace',
-    label: 'Namespace'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'catalog_service',
-    label: 'Service',
-    sortable: false
+    label: 'Catalog Service',
+    sortable: false,
+    link: createLinkResolver(router, 'serviceLocation')
   },
   {
     field: 'catalog_service_version',
-    label: 'Service Version'
+    label: 'Catalog Service Version'
   },
   {
     field: 'boundApps',
-    label: 'Bound Apps',
-    sortable: false
+    label: 'Bound Applications',
+    sortable: false,
+    formatter: formatBoundApps
   },
   {
     field: 'meta.createdAt',
@@ -69,45 +80,45 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, rows.value);
+  setupActionListener(tableElement);
+  setupNavigationListener(tableElement, router);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+onMounted(async () => {
+  await Promise.all([
+    store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP }),
+    store.dispatch(
+      `epinio/findAll`,
+      { type: EPINIO_TYPES.SERVICE_INSTANCE }
+    ),
+  ]);
+  pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
+
+  // Catalog services are static - only poll on initial load, not continuously
+  // They're loaded above but don't need frequent updates
+  startPolling(["namespaces", "applications"], store);
+});
 </script>
 <template>
-  <DataTable
-    :rows="rows"
-    :columns="columns"
-    :loading="pending"
-  >
-    <template #cell:stateDisplay="{ row }">
-      <BadgeStateFormatter
-        :row="row"
-        :value="row.stateDisplay"
-      />
-    </template>
-    <template #cell:catalog_service="{ row }">
-      <LinkDetail
-        v-if="row.serviceLocation"
-        :row="row.serviceLocation"
-        :value="row.catalog_service"
-      />
-      <span v-else>{{ row.catalog_service }}</span>
-    </template>
-    <template #cell:boundApps="{ row }">
-      <span v-if="row.applications && row.applications.length">
-        <template v-for="(app, index) in row.applications" :key="app.id">
-          <LinkDetail
-            :row="app"
-            :value="app.meta.name"
-          />
-          <span
-            v-if="index < row.applications.length - 1"
-            :key="app.id + 'i'"
-          >, </span>
-        </template>
-      </span>
-      <span
-        v-else
-        class="text-muted"
-      >&nbsp;</span>
-    </template>
-  </DataTable>
+  <div v-if="pending">Loading...</div>
+  <div v-else ref="tableContainer"></div>
 </template>
 
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
index de4e0dbc..d102fb81 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 
-import DataTable from '../../../../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../../../../components/tables/types';
 import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 
 import { EPINIO_TYPES } from '../../../../types';
 import { createEpinioRoute } from '../../../../utils/custom-routing';
 
 import { startPolling, stopPolling } from '../../../../utils/polling';
+import { createLinkResolver, setupNavigationListener, applyNamespaceFilter } from '../../../../utils/table-helpers';
 
 const store = useStore();
+const router = useRouter();
 const t = store.getters['i18n/t'];
 
 const resource = EPINIO_TYPES.APP;
@@ -32,9 +34,10 @@ const rows = computed(() => store.getters['epinio/all'](resource));
 
 // Group applications by namespace
 const groupedByNamespace = computed(() => {
+  const filteredRows = applyNamespaceFilter(store, rows.value);
   const groups: Record<string, any[]> = {};
 
-  rows.value.forEach((app: any) => {
+  filteredRows.forEach((app: any) => {
     const namespace = app.meta?.namespace || 'default';
     if (!groups[namespace]) {
       groups[namespace] = [];
@@ -47,6 +50,28 @@ const groupedByNamespace = computed(() => {
 
 const pending = ref(true);
 
+// Custom formatters
+const formatRoutes = (_value: any, row: any) => {
+  if (!row.routes || row.routes.length === 0) {
+    return '-';
+  }
+  return row.routes.map((route: string) => route).join(', ');
+};
+
+const formatBoundConfigs = (_value: any, row: any) => {
+  if (!row.allConfigurations || row.allConfigurations.length === 0) {
+    return '-';
+  }
+  return row.allConfigurations.map((config: any) => config.meta.name).join(', ');
+};
+
+const formatBoundServices = (_value: any, row: any) => {
+  if (!row.services || row.services.length === 0) {
+    return '-';
+  }
+  return row.services.map((service: any) => service.meta.name).join(', ');
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -55,20 +80,34 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'nameDisplay',
-    label: 'Name'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'deployment.status',
     label: 'Status'
   },
   {
-    field: 'route',
+    field: 'routes',
     label: 'Routes',
-    sortable: false
+    sortable: false,
+    formatter: formatRoutes
+  },
+  {
+    field: 'boundConfigs',
+    label: 'Bound Configs',
+    sortable: false,
+    formatter: formatBoundConfigs
+  },
+  {
+    field: 'boundServices',
+    label: 'Bound Services',
+    sortable: false,
+    formatter: formatBoundServices
   },
   {
     field: 'deployment.username',
-    label: 'Last Deployed by'
+    label: 'Last Deployed By'
   },
   {
     field: 'meta.createdAt',
@@ -77,6 +116,51 @@ const columns: DataTableColumn[] = [
   }
 ];
 
+// Store references to table elements for each namespace
+const tableRefs = ref<Record<string, HTMLElement>>({});
+
+// Function to create/update table for a namespace
+const createOrUpdateTable = (namespace: string, apps: any[]) => {
+  const container = tableRefs.value[namespace];
+  if (!container) return;
+
+  // Remove existing table if any
+  container.innerHTML = '';
+
+  // Create new table element
+  const tableElement = document.createElement('data-table');
+  (tableElement as any).columns = columns;
+  (tableElement as any).rows = apps;
+  (tableElement as any).rowActions = true; // Enable actions
+  container.appendChild(tableElement);
+
+  // Listen for action menu events
+  tableElement.addEventListener('action-click', ((event: CustomEvent) => {
+    const { action, resource } = event.detail;
+    handleAction(action, resource);
+  }) as EventListener);
+
+  // Listen for navigation events
+  setupNavigationListener(tableElement, router);
+};
+
+// Handle action menu clicks
+const handleAction = (action: any, resource: any) => {
+  // action.action is the method name (e.g., 'showAppShell')
+  const actionMethod = action.action;
+  if (resource && actionMethod && typeof resource[actionMethod] === 'function') {
+    resource[actionMethod]();
+  }
+};
+
+// Watch for changes in grouped data
+watch(groupedByNamespace, async (newGroups) => {
+  await nextTick();
+  Object.keys(newGroups).forEach(namespace => {
+    createOrUpdateTable(namespace, newGroups[namespace]);
+  });
+}, { deep: true });
+
 onMounted(async () => {
   await store.dispatch('epinio/findAll', { type: EPINIO_TYPES.APP });
   // Non-blocking fetch
@@ -84,6 +168,13 @@ onMounted(async () => {
   store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE });
 
   pending.value = false;
+
+  // Create tables after data is loaded
+  await nextTick();
+  Object.keys(groupedByNamespace.value).forEach(namespace => {
+    createOrUpdateTable(namespace, groupedByNamespace.value[namespace]);
+  });
+
   // Removed 'catalogservices' - catalog services are static and don't need frequent polling
   // They're loaded on initial mount if needed, but don't change frequently
   startPolling(
@@ -133,39 +224,7 @@ onUnmounted(() => {
         Namespace: <span class="namespace-name">{{ namespace }}</span>
       </h3>
 
-      <DataTable
-        :rows="apps"
-        :columns="columns"
-      >
-        <template #cell:stateDisplay="{ row }">
-          <BadgeStateFormatter
-            :row="row"
-            :value="row.stateDisplay"
-          />
-        </template>
-        <template #cell:route="{ row }">
-          <span v-if="row.routes && row.routes.length" class="route">
-            <template
-              v-for="(route, index) in row.routes"
-              :key="route.id || route"
-            >
-              <a
-                v-if="row.state === 'running'"
-                :href="`https://${route}`"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-              >
-                {{ `https://${route}` }}
-              </a>
-              <span v-else>
-                {{ `https://${route}` }}
-              </span>
-              <span v-if="index !== row.routes.length - 1">, </span>
-            </template>
-          </span>
-          <span v-else class="text-muted">&nbsp;</span>
-        </template>
-      </DataTable>
+      <div :ref="el => { if (el) tableRefs[namespace] = el as HTMLElement }"></div>
     </div>
   </div>
 </template>
diff --git a/dashboard/pkg/epinio/pages/index.vue b/dashboard/pkg/epinio/pages/index.vue
index b04b35df..3eff98b8 100644
--- a/dashboard/pkg/epinio/pages/index.vue
+++ b/dashboard/pkg/epinio/pages/index.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
+import { ref, onMounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import Loading from '@shell/components/Loading.vue';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
 import AsyncButton from '@shell/components/AsyncButton.vue';
-import Link from '@shell/components/formatter/Link.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 
 import { EPINIO_MGMT_STORE, EPINIO_TYPES } from '../types';
 import { _MERGE } from '@shell/plugins/dashboard-store/actions';
 import EpinioCluster, { EpinioInfoPath } from '../models/epiniomgmt/epinio.io.management.cluster';
 import epinioAuth, { EpinioAuthTypes } from '../utils/auth';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 const store = useStore();
 const t = store.getters['i18n/t'];
@@ -22,7 +22,8 @@ let clusters: EpinioCluster[] = [];
 let clustersSchema: any = null;
 
 const loading = ref(true);
-const error = ref<Error | null>(null)
+const error = ref<Error | null>(null);
+const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
   loading.value = true
@@ -36,9 +37,17 @@ onMounted(async () => {
     error.value = err as Error
   } finally {
     loading.value = false
+    await nextTick();
+    createOrUpdateTable();
   }
 })
 
+// Watch for clusters changes
+watch(() => clusters, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
 const canRediscover = () => {
   return !clusters.find((c: EpinioCluster) => c.state === 'updating');
 }
@@ -107,6 +116,8 @@ const testCluster = (c: EpinioCluster) => {
       'available',
       { state: { transitioning: false, error: false, message: "" } },
     );
+    // Trigger table update
+    createOrUpdateTable();
   })
   .catch((e: Error) => {
     if (e.message === 'Network Error') {
@@ -127,9 +138,26 @@ const testCluster = (c: EpinioCluster) => {
         }
       });
     }
+    // Trigger table update
+    createOrUpdateTable();
   });
 }
 
+// Custom formatters
+const formatName = (value: any, row: any) => {
+  if (row.state === 'available') {
+    return `<a style="cursor: pointer;" data-cluster-id="${row.id}">${row.name}</a>`;
+  }
+  return row.name;
+};
+
+const formatApi = (value: any, row: any) => {
+  if (row.state !== 'available') {
+    return `<a href="${row.infoUrl}" target="_blank" rel="noopener noreferrer">${row.api}</a>`;
+  }
+  return row.api;
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -138,17 +166,43 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'name',
-    label: 'Name'
+    label: 'Name',
+    formatter: formatName
   },
   {
     field: 'api',
-    label: 'API'
+    label: 'API',
+    formatter: formatApi
   },
   {
     field: 'version',
     label: 'Version'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, clusters);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+
+  // Add click listener for name links
+  tableContainer.value.addEventListener('click', (e: Event) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'A' && target.hasAttribute('data-cluster-id')) {
+      e.preventDefault();
+      const clusterId = target.getAttribute('data-cluster-id');
+      const cluster = clusters.find((c: EpinioCluster) => c.id === clusterId);
+      if (cluster) {
+        login(cluster);
+      }
+    }
+  });
+};
 </script>
 
 <template>
@@ -178,43 +232,7 @@ const columns: DataTableColumn[] = [
           @click="rediscover"
         />
       </div>
-      <DataTable
-        :rows="clusters"
-        :columns="columns"
-        :searchable="false"
-      >
-        <template #cell:stateDisplay="{row}">
-          <div class="epinio-row">
-            <BadgeStateFormatter
-              :row="row"
-              :value="row.stateDisplay"
-            />
-          </div>
-        </template>
-        <template #cell:name="{row}">
-          <div class="epinio-row">
-            <a
-              v-if="row.state === 'available'"
-              @click="login(row)"
-            >{{ row.name }}</a>
-            <template v-else>
-              {{ row.name }}
-            </template>
-          </div>
-        </template>
-        <template #cell:api="{row}">
-          <div class="epinio-row">
-            <Link
-              v-if="row.state !== 'available'"
-              :row="row"
-              :value="{ text: row.api, url: row.infoUrl }"
-            />
-            <template v-else>
-              {{ row.api }}
-            </template>
-          </div>
-        </template>
-      </DataTable>
+      <div ref="tableContainer"></div>
 
     </div>
 
diff --git a/dashboard/pkg/epinio/utils/table-helpers.ts b/dashboard/pkg/epinio/utils/table-helpers.ts
new file mode 100644
index 00000000..a717d69c
--- /dev/null
+++ b/dashboard/pkg/epinio/utils/table-helpers.ts
@@ -0,0 +1,140 @@
+/**
+ * Helper utilities for working with trailhand-ui data-table component
+ */
+
+import type { Router } from 'vue-router';
+import type { Store } from 'vuex';
+
+/**
+ * Create a link resolver function for data-table columns
+ * This resolves Vue Router route objects to URL strings
+ * @param router - Vue Router instance
+ * @param locationProperty - Property path to the route location (e.g., 'detailLocation', 'namespaceLocation')
+ * @returns A function that can be used as a column's link property
+ */
+export function createLinkResolver(router: Router, locationProperty: string) {
+  return (row: any) => {
+    // Support nested properties like 'service.detailLocation'
+    const location = locationProperty.split('.').reduce((obj, key) => obj?.[key], row);
+
+    if (location) {
+      try {
+        const resolved = router.resolve(location);
+        return resolved.href;
+      } catch (e) {
+        console.error(`Failed to resolve route for ${locationProperty}:`, e);
+        return null;
+      }
+    }
+    return null;
+  };
+}
+
+/**
+ * Create a data-table element with the given configuration
+ * @param columns - Column definitions
+ * @param rows - Data rows
+ * @param options - Additional table options
+ * @returns The created table element
+ */
+export function createDataTable(
+  columns: any[],
+  rows: any[],
+  options: {
+    rowActions?: boolean;
+    searchable?: boolean;
+    sortable?: boolean;
+    paginated?: boolean;
+    rowsPerPage?: number;
+  } = {}
+): HTMLElement {
+  const tableElement = document.createElement('data-table');
+
+  (tableElement as any).columns = columns;
+  (tableElement as any).rows = rows;
+  (tableElement as any).rowActions = options.rowActions ?? true;
+  (tableElement as any).searchable = options.searchable ?? true;
+  (tableElement as any).sortable = options.sortable ?? true;
+  (tableElement as any).paginated = options.paginated ?? true;
+
+  if (options.rowsPerPage) {
+    (tableElement as any).rowsPerPage = options.rowsPerPage;
+  }
+
+  return tableElement;
+}
+
+/**
+ * Handle action menu clicks
+ * @param action - The action object with action method name
+ * @param resource - The resource object
+ */
+export function handleActionClick(action: any, resource: any): void {
+  const actionMethod = action.action;
+  if (resource && actionMethod && typeof resource[actionMethod] === 'function') {
+    resource[actionMethod]();
+  }
+}
+
+/**
+ * Setup action click event listener on a table element
+ * @param tableElement - The table element
+ * @param handler - Optional custom handler, defaults to handleActionClick
+ */
+export function setupActionListener(
+  tableElement: HTMLElement,
+  handler: (action: any, resource: any) => void = handleActionClick
+): void {
+  tableElement.addEventListener('action-click', ((event: CustomEvent) => {
+    const { action, resource } = event.detail;
+    handler(action, resource);
+  }) as EventListener);
+}
+
+/**
+ * Setup navigation event listener on a table element
+ * This handles link clicks and navigates using Vue Router instead of page reloads
+ * @param tableElement - The table element
+ * @param router - Vue Router instance
+ */
+export function setupNavigationListener(
+  tableElement: HTMLElement,
+  router: Router
+): void {
+  tableElement.addEventListener('navigate', ((event: CustomEvent) => {
+    const { url } = event.detail;
+    if (url) {
+      router.push(url);
+    }
+  }) as EventListener);
+}
+
+/**
+ * Apply namespace filtering to a list of rows
+ * Uses the Vuex store's activeNamespaceCache to filter rows by namespace
+ * @param store - Vuex store instance
+ * @param allRows - All rows to filter
+ * @returns Filtered rows based on active namespace selection
+ */
+export function applyNamespaceFilter(store: Store<any>, allRows: any[]): any[] {
+  // Access the cache key to trigger reactivity on namespace filter changes
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const cacheKey = store.state.activeNamespaceCacheKey;
+  const activeNamespaces = store.state.activeNamespaceCache;
+
+  // If no namespace filter exists, or if it's empty (no namespaces loaded yet), show all rows
+  if (!activeNamespaces || Object.keys(activeNamespaces).length === 0) {
+    return allRows;
+  }
+
+  // Filter rows by namespace
+  return allRows.filter((row: any) => {
+    const namespace = row.meta?.namespace;
+    // If row has no namespace, show it by default
+    if (!namespace) {
+      return true;
+    }
+    // Check if this namespace is in the active filter
+    return activeNamespaces[namespace];
+  });
+}
diff --git a/dashboard/vue.config.js b/dashboard/vue.config.js
index cea72163..06a801b8 100644
--- a/dashboard/vue.config.js
+++ b/dashboard/vue.config.js
@@ -1,6 +1,22 @@
 const config = require('@rancher/shell/vue.config'); // eslint-disable-line @typescript-eslint/no-var-requires
 
-module.exports = config(__dirname, {
+const baseConfig = config(__dirname, {
   excludes: [],
   // excludes: ['fleet', 'example']
 });
+
+// custom element configuration for web components
+baseConfig.chainWebpack = (config) => {
+  config.module
+    .rule('vue')
+    .use('vue-loader')
+    .tap(options => ({
+      ...options,
+      compilerOptions: {
+        ...(options.compilerOptions || {}),
+        isCustomElement: tag => tag === 'data-table' || tag === 'action-menu' || tag === 'iconify-icon'
+      }
+    }));
+};
+
+module.exports = baseConfig;