diff --git a/src/views/entities_view.ts b/src/views/entities_view.ts
index fc1b568..7e89478 100644
--- a/src/views/entities_view.ts
+++ b/src/views/entities_view.ts
@@ -1,20 +1,16 @@
 import { mdiDelete, mdiInformationSlabCircleOutline, mdiPlus, mdiPencilOutline } from "@mdi/js";
 import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 
 import { HassEntity } from "home-assistant-js-websocket";
 import memoize from "memoize-one";
 
 import "@ha/layouts/hass-loading-screen";
-import "@ha/layouts/hass-tabs-subpage";
-import "@ha/components/ha-card";
+import "@ha/layouts/hass-tabs-subpage-data-table";
 import "@ha/components/ha-fab";
 import "@ha/components/ha-icon-button";
-import "@ha/components/ha-icon-overflow-menu";
 import "@ha/components/ha-state-icon";
 import "@ha/components/ha-svg-icon";
-import "@ha/components/data-table/ha-data-table";
 import { navigate } from "@ha/common/navigate";
 import { mainWindow } from "@ha/common/dom/get_main_window";
 import { fireEvent } from "@ha/common/dom/fire_event";
@@ -25,8 +21,6 @@ import { showAlertDialog, showConfirmationDialog } from "@ha/dialogs/generic/sho
 import type { PageNavigation } from "@ha/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "@ha/types";
 
-import "../components/knx-project-tree-view";
-
 import { getEntityEntries, deleteEntity } from "../services/websocket.service";
 import { KNX } from "../types/knx";
 import { KNXLogger } from "../tools/knx-logger";
@@ -85,43 +79,44 @@ export class KNXEntitiesView extends LitElement {
       });
   }
 
-  private _columns = memoize((_narrow, _language): DataTableColumnContainer<EntityRow> => {
+  private _columns = memoize((_language): DataTableColumnContainer<EntityRow> => {
     const iconWidth = "56px";
     const actionWidth = "176px"; // 48px*3 + 16px*2 padding
-    const textColumnWith = `calc((100% - ${iconWidth} - ${actionWidth}) / 4)`;
 
     return {
       icon: {
         title: "",
-        width: iconWidth,
+        minWidth: iconWidth,
+        maxWidth: iconWidth,
         type: "icon",
         template: (entry) => html`
           <ha-state-icon
-            title=${ifDefined(entry.entityState?.state)}
             slot="item-icon"
-            .state=${entry.entityState}
+            .hass=${this.hass}
+            .stateObj=${entry.entityState}
           ></ha-state-icon>
         `,
       },
       friendly_name: {
+        showNarrow: true,
         filterable: true,
         sortable: true,
         title: "Friendly Name",
-        width: textColumnWith,
+        flex: 2,
         template: (entry) => entry.entityState?.attributes.friendly_name ?? "",
       },
       entity_id: {
         filterable: true,
         sortable: true,
         title: "Entity ID",
-        width: textColumnWith,
+        flex: 1,
         // template: (entry) => entry.entity_id,
       },
       device: {
         filterable: true,
         sortable: true,
         title: "Device",
-        width: textColumnWith,
+        flex: 1,
         template: (entry) =>
           entry.device_id ? (this.hass.devices[entry.device_id].name ?? "") : "",
       },
@@ -135,12 +130,14 @@ export class KNXEntitiesView extends LitElement {
         title: "Area",
         sortable: true,
         filterable: true,
-        width: textColumnWith,
+        flex: 1,
         template: (entry) => entry.area?.name ?? "",
       },
       actions: {
+        showNarrow: true,
         title: "",
-        width: actionWidth,
+        minWidth: actionWidth,
+        maxWidth: actionWidth,
         type: "icon-button",
         template: (entry) => html`
           <ha-icon-button
@@ -208,25 +205,19 @@ export class KNXEntitiesView extends LitElement {
     }
 
     return html`
-      <hass-tabs-subpage
+      <hass-tabs-subpage-data-table
         .hass=${this.hass}
-        .narrow=${this.narrow!}
+        .narrow=${this.narrow}
         .route=${this.route!}
         .tabs=${this.tabs}
         .localizeFunc=${this.knx.localize}
+        .columns=${this._columns(this.hass.language)}
+        .data=${this.knx_entities}
+        .hasFab=${true}
+        .searchLabel=${this.hass.localize("ui.components.data-table.search")}
+        .clickable=${false}
+        .filter=${this.filterDevice}
       >
-        <div class="sections">
-          <ha-data-table
-            class="entity-table"
-            .hass=${this.hass}
-            .columns=${this._columns(this.narrow, this.hass.language)}
-            .data=${this.knx_entities}
-            .hasFab=${true}
-            .searchLabel=${this.hass.localize("ui.components.data-table.search")}
-            .clickable=${false}
-            .filter=${this.filterDevice}
-          ></ha-data-table>
-        </div>
         <ha-fab
           slot="fab"
           .label=${this.hass.localize("ui.common.add")}
@@ -235,7 +226,7 @@ export class KNXEntitiesView extends LitElement {
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
-      </hass-tabs-subpage>
+      </hass-tabs-subpage-data-table>
     `;
   }
 
@@ -249,15 +240,6 @@ export class KNXEntitiesView extends LitElement {
         --app-header-background-color: var(--sidebar-background-color);
         --app-header-text-color: var(--sidebar-text-color);
       }
-      .sections {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-      }
-
-      .entity-table {
-        flex: 1;
-      }
     `;
   }
 }
diff --git a/src/views/group_monitor.ts b/src/views/group_monitor.ts
index d6be3d5..025bd22 100644
--- a/src/views/group_monitor.ts
+++ b/src/views/group_monitor.ts
@@ -1,6 +1,9 @@
 import { html, CSSResultGroup, LitElement, TemplateResult, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 
+import memoize from "memoize-one";
+
+import "@ha/layouts/hass-loading-screen";
 import "@ha/layouts/hass-tabs-subpage-data-table";
 import { HASSDomEvent } from "@ha/common/dom/fire_event";
 import { computeRTLDirection } from "@ha/common/util/compute_rtl";
@@ -34,8 +37,6 @@ export class KNXGroupMonitor extends LitElement {
 
   @property({ type: Array, reflect: false }) public tabs!: PageNavigation[];
 
-  @state() private columns: DataTableColumnContainer = {};
-
   @state() private projectLoaded = false;
 
   @state() private subscribed?: () => void;
@@ -70,78 +71,94 @@ export class KNXGroupMonitor extends LitElement {
         this.telegram_callback(message);
         this.requestUpdate();
       });
-
-      //! We need to lateinit this property due to the fact that this.hass needs to be available
-      this.columns = {
-        index: {
-          hidden: this.narrow,
-          title: "#",
-          sortable: true,
-          direction: "desc",
-          type: "numeric",
-          width: "60px", // 4 digits
-        },
-        timestamp: {
-          filterable: true,
-          sortable: true,
-          title: this.knx.localize("group_monitor_time"),
-          width: "110px",
-        },
-        direction: {
-          hidden: this.narrow,
-          filterable: true,
-          title: this.knx.localize("group_monitor_direction"),
-          width: "120px",
-        },
-        sourceAddress: {
-          filterable: true,
-          sortable: true,
-          title: this.knx.localize("group_monitor_source"),
-          width: this.narrow ? "90px" : this.projectLoaded ? "95px" : "20%",
-        },
-        sourceText: {
-          hidden: this.narrow || !this.projectLoaded,
-          filterable: true,
-          sortable: true,
-          title: this.knx.localize("group_monitor_source"),
-          width: "20%",
-        },
-        destinationAddress: {
-          sortable: true,
-          filterable: true,
-          title: this.knx.localize("group_monitor_destination"),
-          width: this.narrow ? "90px" : this.projectLoaded ? "96px" : "20%",
-        },
-        destinationText: {
-          hidden: this.narrow || !this.projectLoaded,
-          sortable: true,
-          filterable: true,
-          title: this.knx.localize("group_monitor_destination"),
-          width: "20%",
-        },
-        type: {
-          hidden: this.narrow,
-          title: this.knx.localize("group_monitor_type"),
-          filterable: true,
-          width: "155px", // 155px suits for "GroupValueResponse"
-        },
-        payload: {
-          hidden: this.narrow && this.projectLoaded,
-          title: this.knx.localize("group_monitor_payload"),
-          filterable: true,
-          type: "numeric",
-          width: "105px",
-        },
-        value: {
-          hidden: !this.projectLoaded,
-          title: this.knx.localize("group_monitor_value"),
-          filterable: true,
-          width: this.narrow ? "105px" : "150px",
-        },
-      };
     }
   }
 
+  private _columns = memoize(
+    (narrow, projectLoaded, _language): DataTableColumnContainer<DataTableRowData> => ({
+      index: {
+        showNarrow: false,
+        title: "#",
+        sortable: true,
+        direction: "desc",
+        type: "numeric",
+        minWidth: "60px", // 4 digits
+        maxWidth: "60px",
+      },
+      timestamp: {
+        showNarrow: false,
+        filterable: true,
+        sortable: true,
+        title: this.knx.localize("group_monitor_time"),
+        minWidth: "110px",
+        maxWidth: "110px",
+      },
+      sourceAddress: {
+        showNarrow: true,
+        filterable: true,
+        sortable: true,
+        title: this.knx.localize("group_monitor_source"),
+        flex: 2,
+        template: (row) =>
+          projectLoaded
+            ? html`<div>${row.sourceAddress}</div>
+                <div>${row.sourceText}</div>`
+            : row.sourceAddress,
+      },
+      sourceText: {
+        hidden: true,
+        filterable: true,
+        sortable: true,
+        title: this.knx.localize("group_monitor_source"),
+      },
+      destinationAddress: {
+        showNarrow: true,
+        sortable: true,
+        filterable: true,
+        title: this.knx.localize("group_monitor_destination"),
+        flex: 2,
+        template: (row) =>
+          projectLoaded
+            ? html`<div>${row.destinationAddress}</div>
+                <div>${row.destinationText}</div>`
+            : row.destinationAddress,
+      },
+      destinationText: {
+        showNarrow: true,
+        hidden: true,
+        sortable: true,
+        filterable: true,
+        title: this.knx.localize("group_monitor_destination"),
+      },
+      type: {
+        showNarrow: false,
+        title: this.knx.localize("group_monitor_type"),
+        filterable: true,
+        minWidth: "155px", // 155px suits for "GroupValueResponse"
+        maxWidth: "155px",
+        template: (row) =>
+          html`<div>${row.type}</div>
+            <div>${row.direction}</div>`,
+      },
+      payload: {
+        showNarrow: false,
+        hidden: narrow && projectLoaded,
+        title: this.knx.localize("group_monitor_payload"),
+        filterable: true,
+        type: "numeric",
+        minWidth: "105px",
+        maxWidth: "105px",
+      },
+      value: {
+        showNarrow: true,
+        hidden: !projectLoaded,
+        title: this.knx.localize("group_monitor_value"),
+        filterable: true,
+        flex: 1,
+      },
+    }),
+  );
+
   protected telegram_callback(telegram: TelegramDict): void {
     this.telegrams.push(telegram);
     const rows = [...this.rows];
@@ -169,6 +186,12 @@ export class KNXGroupMonitor extends LitElement {
   }
 
   protected render(): TemplateResult | void {
+    if (this.subscribed === undefined) {
+      return html` <hass-loading-screen
+        .message=${this.knx.localize("group_monitor_waiting_to_connect")}
+      >
+      </hass-loading-screen>`;
+    }
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -176,10 +199,8 @@ export class KNXGroupMonitor extends LitElement {
         .route=${this.route!}
         .tabs=${this.tabs}
         .localizeFunc=${this.knx.localize}
-        .columns=${this.columns}
-        .noDataText=${this.subscribed
-          ? this.knx.localize("group_monitor_connected_waiting_telegrams")
-          : this.knx.localize("group_monitor_waiting_to_connect")}
+        .columns=${this._columns(this.narrow, this.projectLoaded, this.hass.language)}
+        .noDataText=${this.knx.localize("group_monitor_connected_waiting_telegrams")}
         .data=${this.rows}
         .hasFab=${false}
         .searchLabel=${this.hass.localize("ui.components.data-table.search")}