diff --git a/src/panels/config/developer-tools/debug/developer-tools-debug.ts b/src/panels/config/developer-tools/debug/developer-tools-debug.ts
index 810068d934..b75450cb86 100644
--- a/src/panels/config/developer-tools/debug/developer-tools-debug.ts
+++ b/src/panels/config/developer-tools/debug/developer-tools-debug.ts
@@ -2,6 +2,7 @@ import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../components/ha-card";
 import "../../../../components/ha-button";
+import "../../../../components/ha-md-list";
 import "../../../../components/entity/ha-entity-picker";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
@@ -22,8 +23,6 @@ import type { ExtEntityRegistryEntry } from "../../../../data/entity/entity_regi
 class HaPanelDevDebug extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @state() private _entityId?: string;
 
   protected render() {
@@ -34,14 +33,14 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
             "ui.panel.config.developer-tools.tabs.debug.title"
           )}
         >
-          <ha-debug-connection-row
-            .hass=${this.hass}
-            .narrow=${this.narrow}
-          ></ha-debug-connection-row>
-          <ha-debug-disable-view-transition-row
-            .hass=${this.hass}
-            .narrow=${this.narrow}
-          ></ha-debug-disable-view-transition-row>
+          <ha-md-list>
+            <ha-debug-connection-row
+              .hass=${this.hass}
+            ></ha-debug-connection-row>
+            <ha-debug-disable-view-transition-row
+              .hass=${this.hass}
+            ></ha-debug-disable-view-transition-row>
+          </ha-md-list>
         </ha-card>
         <ha-card
           .header=${this.hass.localize(
@@ -128,6 +127,11 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
         max-width: 600px;
         margin: 0 auto;
       }
+      ha-md-list {
+        padding-top: 0;
+        padding-bottom: 0;
+        background: none;
+      }
     `,
   ];
 }
diff --git a/src/panels/config/developer-tools/debug/ha-debug-connection-row.ts b/src/panels/config/developer-tools/debug/ha-debug-connection-row.ts
index 6a42ecf181..029a30ff7e 100644
--- a/src/panels/config/developer-tools/debug/ha-debug-connection-row.ts
+++ b/src/panels/config/developer-tools/debug/ha-debug-connection-row.ts
@@ -1,7 +1,7 @@
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../components/ha-settings-row";
+import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
@@ -11,26 +11,25 @@ import { storeState } from "../../../../util/ha-pref-storage";
 class HaDebugConnectionRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   protected render(): TemplateResult {
     return html`
-      <ha-settings-row .narrow=${this.narrow}>
-        <span slot="heading">
-          ${this.hass.localize(
+      <ha-md-list-item>
+        <span slot="headline"
+          >${this.hass.localize(
             "ui.panel.config.developer-tools.tabs.debug.debug_connection.title"
-          )}
-        </span>
-        <span slot="description">
-          ${this.hass.localize(
+          )}</span
+        >
+        <span slot="supporting-text"
+          >${this.hass.localize(
             "ui.panel.config.developer-tools.tabs.debug.debug_connection.description"
-          )}
-        </span>
+          )}</span
+        >
         <ha-switch
+          slot="end"
           .checked=${this.hass.debugConnection}
           @change=${this._checkedChanged}
         ></ha-switch>
-      </ha-settings-row>
+      </ha-md-list-item>
     `;
   }
 
diff --git a/src/panels/config/developer-tools/debug/ha-debug-disable-view-transition-row.ts b/src/panels/config/developer-tools/debug/ha-debug-disable-view-transition-row.ts
index b3e4404a1a..0438793f24 100644
--- a/src/panels/config/developer-tools/debug/ha-debug-disable-view-transition-row.ts
+++ b/src/panels/config/developer-tools/debug/ha-debug-disable-view-transition-row.ts
@@ -3,7 +3,7 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { storage } from "../../../../common/decorators/storage";
 import { setViewTransitionDisabled } from "../../../../common/util/view-transition";
-import "../../../../components/ha-settings-row";
+import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
@@ -12,29 +12,28 @@ import type { HomeAssistant } from "../../../../types";
 class HaDebugDisableViewTransitionRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @storage({ key: "disableViewTransition", state: true, subscribe: false })
   private _disabled = false;
 
   protected render(): TemplateResult {
     return html`
-      <ha-settings-row .narrow=${this.narrow}>
-        <span slot="heading">
-          ${this.hass.localize(
+      <ha-md-list-item>
+        <span slot="headline"
+          >${this.hass.localize(
             "ui.panel.config.developer-tools.tabs.debug.disable_view_transition.title"
-          )}
-        </span>
-        <span slot="description">
-          ${this.hass.localize(
+          )}</span
+        >
+        <span slot="supporting-text"
+          >${this.hass.localize(
             "ui.panel.config.developer-tools.tabs.debug.disable_view_transition.description"
-          )}
-        </span>
+          )}</span
+        >
         <ha-switch
+          slot="end"
           .checked=${this._disabled}
           @change=${this._checkedChanged}
         ></ha-switch>
-      </ha-settings-row>
+      </ha-md-list-item>
     `;
   }