diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json
index 15ed0164c0a..13188700442 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json
@@ -46,7 +46,9 @@
     "dashboard": {
       "title": "Табло",
       "overview": "Преглед на публикуваните приложения.",
-      "kpis": "Ключови показатели"
+      "kpis": "Ключови показатели",
+      "viewAll": "Виж всички",
+      "viewAllOf": "Отваряне на справка {{name}}"
     },
     "inbox": {
       "refresh": "Обнови",
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json
index 43139c3abc6..40c65bfdb19 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json
@@ -46,7 +46,9 @@
     "dashboard": {
       "title": "Dashboard",
       "overview": "Overview of your published applications.",
-      "kpis": "Key Indicators"
+      "kpis": "Key Indicators",
+      "viewAll": "View all",
+      "viewAllOf": "Open the {{name}} report"
     },
     "inbox": {
       "refresh": "Refresh",
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js
index e7a25ff3289..b9c61fc21f2 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js
@@ -94,7 +94,11 @@ document.addEventListener('alpine:init', () => {
     // a built-in shell section, or an entity route /<Entity>[/create | /:id/edit]. The last crumb
     // is the current page (no route); earlier crumbs link back.
     get breadcrumbTrail() {
-      if (this.isDashboard) return [];
+      // The dashboard names itself like every other page: the home icon ahead of it is the route,
+      // this crumb is the label - the page itself carries no heading of its own.
+      if (this.isDashboard) {
+        return [{ label: window.T ? T('application-core:shell.nav.dashboard', 'Dashboard') : 'Dashboard', route: null }];
+      }
       const segments = this.currentPath.split('/').filter(Boolean);
       const top = segments[0];
       const crumbs = [];
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/reports.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/reports.js
index f42e5b4484e..f9f53ea8936 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/reports.js
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/reports.js
@@ -98,6 +98,10 @@ document.addEventListener('alpine:init', () => {
           if (def.description) it.description = def.description;
           if (def.dashboard === false) it.dashboard = false;
           if (def.tId) it.tId = def.tId;
+          // The report's chart type (line / pie / bar / ...), when it declares one. The dashboard
+          // reads it to pick the tile shape: a chart preview is a padded, borderless card like the
+          // reference's chart cards, a row preview the bordered full-bleed table card.
+          if (def.chart) it.chart = def.chart;
           if (def.descriptionTId) it.descriptionTId = def.descriptionTId;
           // A report-attached KPI widget: the dashboard shows a compact KPI tile (count / single
           // aggregate value / top-N list) instead of the report's iframe preview tile.
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
index 4f691e3090f..8add93154de 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template
@@ -136,7 +136,14 @@
         </div>
       </div>
 
-      <div x-show="state === 'default'" class="vbox gap-2 p-4 flex-1 overflow-auto">
+      <!-- The dashboard embeds this page in a tile (?preview=1) whose card already frames the rows,
+           so preview drops this page's own gutter and the table's box and grid lines - the reference's
+           dashboard table card is flush and borderless, while the report page itself keeps all three.
+           The container's data-border is read ONCE when the directive initializes (it just adds
+           `border rounded-md`), so the preview branch sets those classes directly rather than binding
+           the attribute and racing Alpine's directive order; data-borders is a pure CSS hook and does
+           bind. -->
+      <div x-show="state === 'default'" class="vbox gap-2 flex-1 overflow-auto" :class="preview ? '' : 'p-4'">
 #if($chart)
 ## Native Harmonia chart directive for this report's chart type (a generation-time constant).
 #if($chart == "line")#set($chartDirective = "x-h-chart-line")#elseif($chart == "pie")#set($chartDirective = "x-h-chart-pie")#elseif($chart == "doughnut")#set($chartDirective = "x-h-chart-doughnut")#elseif($chart == "polarArea")#set($chartDirective = "x-h-chart-polar-area")#elseif($chart == "radar")#set($chartDirective = "x-h-chart-radar")#else#set($chartDirective = "x-h-chart-bar")#end
@@ -146,8 +153,8 @@
         </div>
         <div x-show="view === 'table'" class="vbox gap-2">
 #end
-        <div x-h-table-container.scroll data-border="true">
-          <table x-h-table data-borders="both">
+        <div x-h-table-container.scroll :class="preview ? '' : 'border rounded-md'">
+          <table x-h-table :data-borders="preview ? null : 'both'">
             <thead x-h-table-header>
               <tr x-h-table-row>
                 <template x-for="(col, i) in columns" :key="i"><th x-h-table-head scope="col" :class="alignClass(col)" x-text="col"></th></template>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template
index 30a4c0808a1..6d8bee03e03 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/dashboard.html.template
@@ -1,135 +1,181 @@
 <!-- Generated by Eclipse Dirigible. Home dashboard: model-generated KPI tiles — report-attached
      KPI widgets and custom widgets — plus a preview tile per report (click -> open it embedded).
      Report tiles come from the reports store; custom widgets are baked into dashboardPage from the
-     model. KPI-tile style adopted from the codbex dashboards. Reached via the Home icon ('/' and /dashboard). -->
-<div x-data="dashboardPage" class="vbox size-full overflow-auto">
-  <div class="vbox gap-6 p-5">
-    <h3 x-h-text.h3 x-text="T('application-core:shell.nav.dashboard', 'Dashboard')"></h3>
+     model. Two card shapes, both composed from the card's own slots: a NUMBER tile (description =
+     label, title = value, action = the icon in an avatar, footer = hint) and, for everything that
+     carries content of its own - a top-N table, an embedded report preview, a custom page - the
+     reference's table-card shape (plain title over its description, a border-b header, flush
+     content, the navigation on a "View all" button). The blocks carry no headings - every tile names
+     itself, so a heading above them only repeats what the cards already say, and the reference's
+     dashboard is likewise bare grids separated by the page's own gap. The KPI widgets are grouped
+     by the shape they render as - scalars in one row, top-N tables in the next - because one grid
+     holding both leaves holes around the wide tiles. The page carries
+     no title of its own; the shell's breadcrumb names it. Reached via the Home icon ('/' and
+     /dashboard). -->
+<div x-data="dashboardPage" class="vbox gap-4 p-4">
 
-    <!-- Key Indicators: report-attached KPI widgets (reports[].widget) plus custom kpi widgets
-         (top-level widgets: - the number comes from the developer's REST endpoint). A count/value
-         widget is a compact number tile; a list widget is a top-N mini table. Clicking a report
-         tile opens the full report. -->
-    <div class="vbox gap-3" x-show="kpis.length > 0 || customKpis.length > 0" x-cloak>
-      <div class="hbox items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
-        <svg role="presentation" x-h-lucide data-lucide="gauge" class="size-4"></svg><span x-text="T('application-core:shell.dashboard.kpis', 'Key Indicators')"></span>
-      </div>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <template x-for="w in customKpis" :key="w.name">
-          <div x-h-card>
-            <div x-h-card-header>
-              <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <svg role="presentation" x-h-lucide :data-lucide="w.icon" class="size-4"></svg><span x-text="T(w.tkey, w.label)"></span>
+  <!-- Key Indicators: report-attached KPI widgets (reports[].widget) plus custom kpi widgets
+       (top-level widgets: - the number comes from the developer's REST endpoint). Clicking a report
+       tile opens the full report. -->
+  <section class="vbox gap-4" x-show="kpis.length > 0 || customKpis.length > 0" x-cloak>
+    <!-- Scalars: one compact number tile each. -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+         x-show="customKpis.length > 0 || summaryKpis.length > 0">
+      <template x-for="w in customKpis" :key="w.name">
+        <div x-h-card>
+          <div x-h-card-header>
+            <div x-h-card-description x-text="T(w.tkey, w.label)"></div>
+            <template x-if="w.value === null && !w.error"><div x-h-skeleton class="mt-1 h-8 w-1/2"></div></template>
+            <div x-show="w.value !== null && !w.error" x-h-card-title class="text-2xl" x-text="customValueText(w)"></div>
+            <div x-show="w.error" x-h-card-title class="text-2xl text-muted-foreground">—</div>
+            <div x-h-card-action>
+              <div x-h-avatar class="rounded-lg" data-variant="primary">
+                <svg role="presentation" x-h-lucide :data-lucide="w.icon"></svg>
               </div>
             </div>
-            <div x-h-card-content>
-              <template x-if="w.value === null && !w.error"><div x-h-skeleton class="w-1/2 h-9"></div></template>
-              <p x-show="w.value !== null && !w.error" class="text-3xl font-bold" x-text="customValueText(w)"></p>
-              <p x-show="w.error" x-h-text.muted class="text-3xl font-bold">—</p>
-              <p x-show="w.detail" x-h-text.muted class="text-xs" x-text="w.detail"></p>
-            </div>
           </div>
-        </template>
-        <template x-for="r in kpis" :key="r.name">
-          <div x-h-card role="button" tabindex="0" class="cursor-pointer"
-               :class="r.widget.kind === 'list' ? 'sm:col-span-2' : ''"
-               @click="openReport(r)" @keydown.enter.prevent="openReport(r)">
-            <div x-h-card-header>
-              <div class="hbox items-center gap-2 text-xs font-semibold uppercase text-muted-foreground">
-                <svg role="presentation" x-h-lucide :data-lucide="r.widget.icon" class="size-4"></svg><span x-text="$store.reports.widgetLabel(r)"></span>
+          <!-- x-if, not x-show: the header pads its own bottom only while nothing but a <template>
+               follows it (last-rendered:pb-6 is :not(:has(~:not(template)))), so a hidden-but-present
+               spacer or footer would leave a tile with no hint sitting on its bottom edge. -->
+          <template x-if="w.detail"><div class="flex-1" aria-hidden="true"></div></template>
+          <template x-if="w.detail">
+            <div x-h-card-footer class="pt-4 text-sm text-muted-foreground" x-text="w.detail"></div>
+          </template>
+        </div>
+      </template>
+      <template x-for="r in summaryKpis" :key="r.name">
+        <div x-h-card role="button" tabindex="0" class="cursor-pointer"
+             @click="openReport(r)" @keydown.enter.prevent="openReport(r)">
+          <div x-h-card-header>
+            <div x-h-card-description x-text="$store.reports.widgetLabel(r)"></div>
+            <template x-if="!kpiState(r).loaded"><div x-h-skeleton class="mt-1 h-8 w-1/2"></div></template>
+            <div x-show="kpiState(r).loaded && !kpiState(r).error" x-h-card-title class="text-2xl" x-text="kpiValueText(r)"></div>
+            <div x-show="kpiState(r).error" x-h-card-title class="text-2xl text-muted-foreground">—</div>
+            <div x-h-card-action>
+              <div x-h-avatar class="rounded-lg" data-variant="primary">
+                <svg role="presentation" x-h-lucide :data-lucide="r.widget.icon"></svg>
               </div>
             </div>
-            <div x-h-card-content>
-              <template x-if="r.widget.kind !== 'list'">
-                <div>
-                  <template x-if="!kpiState(r).loaded"><div x-h-skeleton class="w-1/2 h-9"></div></template>
-                  <p x-show="kpiState(r).loaded && !kpiState(r).error" class="text-3xl font-bold" x-text="kpiValueText(r)"></p>
-                  <p x-show="kpiState(r).error" x-h-text.muted class="text-3xl font-bold">—</p>
-                  <p x-show="r.description" x-h-text.muted class="text-xs" x-text="r.description"></p>
-                </div>
-              </template>
-              <template x-if="r.widget.kind === 'list'">
-                <div>
-                  <template x-if="!kpiState(r).loaded"><div x-h-skeleton class="w-full h-9"></div></template>
-                  <p x-show="kpiState(r).error" x-h-text.muted class="text-3xl font-bold">—</p>
-                  <div x-show="kpiState(r).loaded && !kpiState(r).error" x-h-table-container>
-                    <table x-h-table>
-                      <thead x-h-table-header>
-                        <tr x-h-table-row>
-                          <template x-for="c in kpiColumns(r)" :key="c.alias">
-                            <th x-h-table-head scope="col" :class="kpiAlignClass(c)" x-text="c.label"></th>
-                          </template>
-                        </tr>
-                      </thead>
-                      <tbody x-h-table-body>
-                        <template x-for="(row, i) in kpiRows(r)" :key="i">
-                          <tr x-h-table-row>
-                            <template x-for="c in kpiColumns(r)" :key="c.alias">
-                              <td x-h-table-cell :class="kpiAlignClass(c)" x-text="kpiCellText(r, row, c)"></td>
-                            </template>
-                          </tr>
-                        </template>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </template>
-            </div>
           </div>
-        </template>
-      </div>
+          <template x-if="r.description"><div class="flex-1" aria-hidden="true"></div></template>
+          <template x-if="r.description">
+            <div x-h-card-footer class="pt-4 text-sm text-muted-foreground" x-text="r.description"></div>
+          </template>
+        </div>
+      </template>
     </div>
 
-    <!-- Custom page widgets (top-level widgets: kind page): the developer's own HTML pages,
-         embedded like report preview tiles. -->
-    <div class="vbox gap-3" x-show="customPages.length > 0" x-cloak>
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <template x-for="w in customPages" :key="w.name">
-          <div x-h-card>
-            <div x-h-card-header>
-              <h3 x-h-card-title class="hbox items-center gap-2">
-                <svg role="presentation" x-h-lucide :data-lucide="w.icon" class="size-4"></svg><span x-text="T(w.tkey, w.label)"></span>
-              </h3>
+    <!-- Top-N lists: a table each, spanning the card edge to edge (x-h-card-content pads itself in
+         Harmonia 3, so a full-bleed table is the flush modifier, not a cancelled padding). The card
+         is the reference's table-card shape verbatim (card.md, "Recent orders"): a plain title over
+         its description, the navigation on a labelled "View all" button rather than on the title
+         itself, and a border-b separating the header from the table that starts right below it.
+         Column alignment and number formatting come from the .report's own column metadata, so a
+         numeric column right-aligns here exactly as it does on the report page. -->
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2" x-show="listKpis.length > 0" x-cloak>
+      <template x-for="r in listKpis" :key="r.name">
+        <div x-h-card class="overflow-hidden">
+          <div x-h-card-header class="border-b">
+            <div x-h-card-title x-text="$store.reports.widgetLabel(r)"></div>
+            <div x-h-card-description x-show="r.description" x-text="r.description"></div>
+            <div x-h-card-action>
+              <button x-h-button data-variant="outline" @click="openReport(r)"
+                      :aria-label="T('application-core:shell.dashboard.viewAllOf', 'Open the {{name}} report', { name: $store.reports.widgetLabel(r) })"
+                      x-text="T('application-core:shell.dashboard.viewAll', 'View all')"></button>
             </div>
-            <div x-h-card-content class="vbox gap-2">
-              <p x-show="w.detail" x-h-text.muted class="text-sm" x-text="w.detail"></p>
-              <iframe :src="w.url" :title="w.label" loading="lazy"
-                      style="width:100%; height:220px; border:0;"></iframe>
+          </div>
+          <div x-h-card-content.flush>
+            <template x-if="!kpiState(r).loaded"><div class="p-4"><div x-h-skeleton class="h-9 w-full"></div></div></template>
+            <div x-show="kpiState(r).error" x-h-text.muted class="p-4">—</div>
+            <div x-show="kpiState(r).loaded && !kpiState(r).error" x-h-table-container>
+              <table x-h-table>
+                <caption class="sr-only" x-text="$store.reports.widgetLabel(r)"></caption>
+                <thead x-h-table-header>
+                  <tr x-h-table-row>
+                    <template x-for="c in kpiColumns(r)" :key="c.alias">
+                      <th x-h-table-head scope="col" :class="kpiAlignClass(c)" x-text="c.label"></th>
+                    </template>
+                  </tr>
+                </thead>
+                <tbody x-h-table-body>
+                  <template x-for="(row, i) in kpiRows(r)" :key="i">
+                    <tr x-h-table-row data-hoverable="true">
+                      <template x-for="c in kpiColumns(r)" :key="c.alias">
+                        <td x-h-table-cell :class="kpiAlignClass(c)" x-text="kpiCellText(r, row, c)"></td>
+                      </template>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
             </div>
           </div>
-        </template>
-      </div>
+        </div>
+      </template>
     </div>
+  </section>
 
-    <!-- Reports -->
-    <div class="vbox gap-3" x-show="reports.length > 0" x-cloak>
-      <div class="hbox items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
-        <svg role="presentation" x-h-lucide data-lucide="chart-column" class="size-4"></svg><span x-text="T('application-core:shell.nav.reports', 'Reports')"></span>
-      </div>
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <template x-for="r in reports" :key="r.url">
-          <div x-h-card>
-            <div x-h-card-header>
-              <h3 x-h-card-title class="hbox items-center gap-2 cursor-pointer" @click="openReport(r)">
-                <svg role="presentation" x-h-lucide data-lucide="chart-column" class="size-4"></svg><span x-text="$store.reports.displayLabel(r)"></span>
-              </h3>
-              <div x-h-card-action>
-                <button x-h-button data-variant="transparent" data-size="icon-sm" @click="openReport(r)" aria-label="Open report">
-                  <svg role="presentation" x-h-lucide data-lucide="arrow-up-right"></svg>
-                </button>
-              </div>
+  <!-- Custom page widgets (top-level widgets: kind page): the developer's own HTML pages, embedded
+       like the report preview tiles, in the same table-card shape. No "View all" button here: the
+       widget declares a URL to embed and no destination of its own, and a button that reopened the
+       same page in place of the card would say nothing. -->
+  <section class="vbox" x-show="customPages.length > 0" x-cloak>
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <template x-for="w in customPages" :key="w.name">
+        <div x-h-card class="overflow-hidden">
+          <div x-h-card-header class="border-b">
+            <div x-h-card-title x-text="T(w.tkey, w.label)"></div>
+            <div x-h-card-description x-show="w.detail" x-text="w.detail"></div>
+          </div>
+          <div x-h-card-content.flush>
+            <iframe :src="w.url" :title="w.label" loading="lazy"
+                    style="width:100%; height:220px; border:0;"></iframe>
+          </div>
+        </div>
+      </template>
+    </div>
+  </section>
+
+  <!-- Reports without a KPI widget: a simplified preview of the report itself (first rows, no
+       toolbar/pagination), embedded from the report's own generated page so the query, its
+       parameters and its role gate stay in one place. The full report opens from the "View all"
+       button - the title is plain text, so the one way in is the one a keyboard reaches and a
+       screen reader announces; the description comes from the .report. The tile takes the shape of
+       what the embedded page actually renders: a report declaring chart: draws a chart (the report
+       page defaults to its chart surface), which is the reference's padded borderless card, while
+       a report without one draws rows, which is the bordered full-bleed table card. -->
+  <section class="vbox" x-show="reports.length > 0" x-cloak>
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <template x-for="r in reports" :key="r.url">
+        <div x-h-card :class="r.chart ? '' : 'overflow-hidden'">
+          <div x-h-card-header :class="r.chart ? '' : 'border-b'">
+            <div x-h-card-title x-text="$store.reports.displayLabel(r)"></div>
+            <div x-h-card-description x-show="r.description" x-text="r.description"></div>
+            <div x-h-card-action>
+              <button x-h-button data-variant="outline" @click="openReport(r)"
+                      :aria-label="T('application-core:shell.dashboard.viewAllOf', 'Open the {{name}} report', { name: $store.reports.displayLabel(r) })"
+                      x-text="T('application-core:shell.dashboard.viewAll', 'View all')"></button>
+            </div>
+          </div>
+          <!-- flush is a directive modifier, not a class, so the two shapes are two elements behind
+               an x-if rather than one element with a bound class. A chart keeps the content padding
+               (the reference's chart cards are padded and borderless); rows go edge to edge. The
+               taller frame for a chart is not cosmetic: the report page sizes its chart surface in
+               vh, which inside an iframe resolves against the FRAME's height, so a short frame
+               squashes the chart while the same markup fills the window on the report page. -->
+          <template x-if="r.chart">
+            <div x-h-card-content>
+              <iframe :src="r.url + '?preview=1'" title="Report preview" loading="lazy"
+                      style="width:100%; height:18rem; border:0;"></iframe>
             </div>
-            <!-- A simplified preview of the report (first rows, no toolbar/pagination); the full
-                 report opens via the header / open button. The description (from the .report) tells
-                 the user what the report is about. -->
-            <div x-h-card-content class="vbox gap-2">
-              <p x-show="r.description" x-h-text.muted class="text-sm" x-text="r.description"></p>
+          </template>
+          <template x-if="!r.chart">
+            <div x-h-card-content.flush>
               <iframe :src="r.url + '?preview=1'" title="Report preview" loading="lazy"
                       style="width:100%; height:220px; border:0;"></iframe>
             </div>
-          </div>
-        </template>
-      </div>
+          </template>
+        </div>
+      </template>
     </div>
-  </div>
+  </section>
 </div>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/dashboardPage.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/dashboardPage.js.template
index b069b930624..cf3872e9ce4 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/dashboardPage.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/shell/js/components/pages/dashboardPage.js.template
@@ -75,6 +75,12 @@ document.addEventListener('alpine:init', () => {
 
     kpiState(r) { return this.kpiData[r.name] || { loaded: false }; },
 
+    // KPI widgets split by the shape they render as. A scalar reads as a compact number tile and a
+    // list as a top-N table, so each kind gets a row of its own - in one grid the wide list tiles
+    // leave holes between the narrow ones.
+    get summaryKpis() { return this.kpis.filter(r => r.widget.kind !== 'list'); },
+    get listKpis() { return this.kpis.filter(r => r.widget.kind === 'list'); },
+
     // Custom widgets, split by how they render: number tiles (kpi) vs embedded pages.
     get customKpis() { return this.customWidgets.filter(w => w.kind !== 'page'); },
     get customPages() { return this.customWidgets.filter(w => w.kind === 'page'); },