diff --git a/src/panels/profile/ha-advanced-mode-card.ts b/src/panels/profile/ha-advanced-mode-card.ts
deleted file mode 100644
index 74b959917d..0000000000
--- a/src/panels/profile/ha-advanced-mode-card.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
- LitElement,
- property,
- TemplateResult,
- html,
- customElement,
- CSSResult,
- css,
-} from "lit-element";
-import "../../components/ha-card";
-import { HomeAssistant } from "../../types";
-import {
- CoreFrontendUserData,
- getOptimisticFrontendUserDataCollection,
-} from "../../data/frontend";
-
-@customElement("ha-advanced-mode-card")
-class AdvancedModeCard extends LitElement {
- @property() public hass!: HomeAssistant;
- @property() public coreUserData?: CoreFrontendUserData;
-
- protected render(): TemplateResult | void {
- return html`
-
-
-
- ${this.hass.localize("ui.panel.profile.advanced_mode.description")}
-
-
- `;
- }
-
- private async _advancedToggled(ev) {
- getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({
- showAdvanced: ev.currentTarget.checked,
- });
- }
-
- static get styles(): CSSResult {
- return css`
- .card-header {
- display: flex;
- }
- .title {
- flex: 1;
- }
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "ha-advanced-mode-card": AdvancedModeCard;
- }
-}
diff --git a/src/panels/profile/ha-advanced-mode-row.ts b/src/panels/profile/ha-advanced-mode-row.ts
new file mode 100644
index 0000000000..8121b3f92a
--- /dev/null
+++ b/src/panels/profile/ha-advanced-mode-row.ts
@@ -0,0 +1,67 @@
+import {
+ LitElement,
+ property,
+ TemplateResult,
+ html,
+ customElement,
+ CSSResult,
+ css,
+} from "lit-element";
+
+import "../../components/ha-card";
+
+import { HomeAssistant } from "../../types";
+import {
+ CoreFrontendUserData,
+ getOptimisticFrontendUserDataCollection,
+} from "../../data/frontend";
+
+@customElement("ha-advanced-mode-row")
+class AdvancedModeRow extends LitElement {
+ @property() public hass!: HomeAssistant;
+ @property() public narrow!: boolean;
+ @property() public coreUserData?: CoreFrontendUserData;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+ ${this.hass.localize("ui.panel.profile.advanced_mode.title")}
+
+
+ ${this.hass.localize("ui.panel.profile.advanced_mode.description")}
+ ${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")}
+
+
+
+
+ `;
+ }
+
+ private async _advancedToggled(ev) {
+ getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({
+ showAdvanced: ev.currentTarget.checked,
+ });
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ a {
+ color: var(--primary-color);
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-advanced-mode-row": AdvancedModeRow;
+ }
+}
diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts
index 1331e068fd..69a6d85c74 100644
--- a/src/panels/profile/ha-panel-profile.ts
+++ b/src/panels/profile/ha-panel-profile.ts
@@ -1,30 +1,3 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-item/paper-item";
-import "@material/mwc-button";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-
-import "../../components/ha-card";
-import "../../components/ha-menu-button";
-import "../../resources/ha-style";
-
-import {
- getOptimisticFrontendUserDataCollection,
- CoreFrontendUserData,
-} from "../../data/frontend";
-
-import "./ha-change-password-card";
-import "./ha-mfa-modules-card";
-import "./ha-advanced-mode-card";
-import "./ha-refresh-tokens-card";
-import "./ha-long-lived-access-tokens-card";
-
-import "./ha-pick-language-row";
-import "./ha-pick-theme-row";
-import "./ha-push-notifications-row";
-import "./ha-force-narrow-row";
-import "./ha-set-vibrate-row";
import {
LitElement,
TemplateResult,
@@ -33,6 +6,31 @@ import {
css,
property,
} from "lit-element";
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-item/paper-item";
+import "@material/mwc-button";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+
+import "./ha-change-password-card";
+import "./ha-mfa-modules-card";
+import "./ha-refresh-tokens-card";
+import "./ha-long-lived-access-tokens-card";
+import "./ha-advanced-mode-row";
+import "./ha-pick-language-row";
+import "./ha-pick-theme-row";
+import "./ha-push-notifications-row";
+import "./ha-force-narrow-row";
+import "./ha-set-vibrate-row";
+import "../../components/ha-card";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
+
+import {
+ getOptimisticFrontendUserDataCollection,
+ CoreFrontendUserData,
+} from "../../data/frontend";
import { haStyle } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event";
@@ -119,6 +117,15 @@ class HaPanelProfile extends LitElement {
.narrow=${this.narrow}
.hass=${this.hass}
>
+ ${this.hass.user!.is_admin
+ ? html`
+
+ `
+ : ""}
@@ -142,15 +149,6 @@ class HaPanelProfile extends LitElement {
.mfaModules=${this.hass.user!.mfa_modules}
>
- ${this.hass.user!.is_admin
- ? html`
-
- `
- : ""}
-