diff --git a/src/common/config/can_show_page.ts b/src/common/config/can_show_page.ts
index 0e4fdd0ecd45..0daf6469d3a7 100644
--- a/src/common/config/can_show_page.ts
+++ b/src/common/config/can_show_page.ts
@@ -1,5 +1,6 @@
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../types";
+import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
@@ -7,13 +8,11 @@ export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   !hideAdvancedPage(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  page.component
-    ? isComponentLoaded(hass, page.component)
-    : page.components
-      ? page.components.some((integration) =>
-          isComponentLoaded(hass, integration)
-        )
-      : true;
+  !page.component ||
+  ensureArray(page.component).some((integration) =>
+    isComponentLoaded(hass, integration)
+  );
+
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 9de45b8a4a21..41be14b6a9e1 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -10,7 +10,6 @@ import {
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
@@ -19,12 +18,12 @@ import "../components/ha-svg-icon";
 import "../components/ha-tab";
 import { HomeAssistant, Route } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
+import { canShowPage } from "../common/config/can_show_page";
 
 export interface PageNavigation {
   path: string;
   translationKey?: string;
-  component?: string;
-  components?: string[];
+  component?: string | string[];
   name?: string;
   core?: boolean;
   advancedOnly?: boolean;
@@ -66,19 +65,12 @@ class HassTabsSubpage extends LitElement {
     (
       tabs: PageNavigation[],
       activeTab: PageNavigation | undefined,
-      showAdvanced: boolean | undefined,
       _components,
       _language,
       _narrow,
       localizeFunc
     ) => {
-      const shownTabs = tabs.filter(
-        (page) =>
-          (!page.component ||
-            page.core ||
-            isComponentLoaded(this.hass, page.component)) &&
-          (!page.advancedOnly || showAdvanced)
-      );
+      const shownTabs = tabs.filter((page) => canShowPage(this.hass, page));
 
       if (shownTabs.length < 2) {
         if (shownTabs.length === 1) {
@@ -127,7 +119,6 @@ class HassTabsSubpage extends LitElement {
     const tabs = this._getTabs(
       this.tabs,
       this._activeTab,
-      this.hass.userData?.showAdvanced,
       this.hass.config.components,
       this.hass.language,
       this.narrow,
diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts
index e6aacf6fd5e6..2a808dbc2588 100644
--- a/src/panels/config/ha-panel-config.ts
+++ b/src/panels/config/ha-panel-config.ts
@@ -74,7 +74,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "areas",
       iconPath: mdiSofa,
       iconColor: "#E48629",
-      components: ["zone"],
+      component: ["zone"],
     },
     {
       path: "/hassio",
@@ -108,7 +108,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "people",
       iconPath: mdiAccount,
       iconColor: "#5A87FA",
-      components: ["person", "users"],
+      component: ["person", "users"],
     },
     {
       path: "#external-app-configuration",
@@ -341,7 +341,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "hardware",
       iconPath: mdiMemory,
       iconColor: "#301A8E",
-      components: ["hassio", "hardware"],
+      component: ["hassio", "hardware"],
     },
   ],
   about: [