diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 7d904c1a5f..06ea54e63a 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -37,12 +37,12 @@ class HassTabsSubpage extends LitElement {
   @property() public route!: Route;
   @property() public tabs!: PageNavigation[];
   @property({ type: Boolean, reflect: true }) public narrow = false;
-  @property() private _activeTab: number = -1;
+  @property() private _activeTab?: PageNavigation;
 
   private _getTabs = memoizeOne(
     (
       tabs: PageNavigation[],
-      activeTab: number,
+      activeTab: PageNavigation | undefined,
       showAdvanced: boolean | undefined,
       _components,
       _language
@@ -56,31 +56,32 @@ class HassTabsSubpage extends LitElement {
       );
 
       return shownTabs.map(
-        (page, index) => html`
-          <div
-            class="tab ${classMap({
-              active: index === activeTab,
-            })}"
-            @click=${this._tabTapped}
-            .path=${page.path}
-          >
-            ${this.narrow
-              ? html`
-                  <ha-icon .icon=${page.icon}></ha-icon>
-                `
-              : ""}
-            ${!this.narrow || index === activeTab
-              ? html`
-                  <span class="name"
-                    >${page.translationKey
-                      ? this.hass.localize(page.translationKey)
-                      : name}</span
-                  >
-                `
-              : ""}
-            <mwc-ripple></mwc-ripple>
-          </div>
-        `
+        (page) =>
+          html`
+            <div
+              class="tab ${classMap({
+                active: page === activeTab,
+              })}"
+              @click=${this._tabTapped}
+              .path=${page.path}
+            >
+              ${this.narrow
+                ? html`
+                    <ha-icon .icon=${page.icon}></ha-icon>
+                  `
+                : ""}
+              ${!this.narrow || page === activeTab
+                ? html`
+                    <span class="name"
+                      >${page.translationKey
+                        ? this.hass.localize(page.translationKey)
+                        : name}</span
+                    >
+                  `
+                : ""}
+              <mwc-ripple></mwc-ripple>
+            </div>
+          `
       );
     }
   );
@@ -88,7 +89,7 @@ class HassTabsSubpage extends LitElement {
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (changedProperties.has("route")) {
-      this._activeTab = this.tabs.findIndex((tab) =>
+      this._activeTab = this.tabs.find((tab) =>
         this.route.prefix.includes(tab.path)
       );
     }