diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index b41009577b..f9b3a61613 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -1,7 +1,4 @@
 import "@material/mwc-button/mwc-button";
-
-import "@material/mwc-tab";
-import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -40,6 +37,7 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioNetworkDialogParams } from "./show-dialog-network";
+import "../../../../src/components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -117,19 +115,19 @@ export class DialogHassioNetwork
             ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html`<mwc-tab-bar
-                .activeIndex=${this._curTabIndex}
-                @MDCTabBar:activated=${this._handleTabActivated}
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
                 >${this._interfaces.map(
-                  (device) =>
-                    html`<mwc-tab
+                  (device, index) =>
+                    html`<sl-tab
+                      slot="nav"
                       .id=${device.interface}
-                      .label=${device.interface}
-                      dialogInitialFocus
+                      .panel=${index.toString()}
+                      .active=${this._curTabIndex === index}
                     >
-                    </mwc-tab>`
+                      ${device.interface}
+                    </sl-tab>`
                 )}
-              </mwc-tab-bar>`
+              </sl-tab-group>`
             : ""}
         </div>
         ${cache(this._renderTab())}
@@ -486,8 +484,8 @@ export class DialogHassioNetwork
         return;
       }
     }
-    this._curTabIndex = ev.detail.index;
-    this._interface = { ...this._interfaces[ev.detail.index] };
+    this._curTabIndex = Number(ev.detail.name);
+    this._interface = { ...this._interfaces[this._curTabIndex] };
   }
 
   private _handleRadioValueChanged(ev: CustomEvent): void {
@@ -561,11 +559,6 @@ export class DialogHassioNetwork
           flex-shrink: 0;
         }
 
-        mwc-tab-bar {
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
         ha-dialog {
           --dialog-content-position: static;
           --dialog-content-padding: 0;
@@ -638,6 +631,14 @@ export class DialogHassioNetwork
         ha-list-item {
           --mdc-list-side-padding: 10px;
         }
+
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
       `,
     ];
   }
diff --git a/package.json b/package.json
index ec2c9fac7c..71aae461f6 100644
--- a/package.json
+++ b/package.json
@@ -75,8 +75,6 @@
     "@material/mwc-select": "0.27.0",
     "@material/mwc-snackbar": "0.27.0",
     "@material/mwc-switch": "0.27.0",
-    "@material/mwc-tab": "0.27.0",
-    "@material/mwc-tab-bar": "0.27.0",
     "@material/mwc-textarea": "0.27.0",
     "@material/mwc-textfield": "0.27.0",
     "@material/mwc-top-app-bar": "0.27.0",
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
index 3ac4a62f02..3d62c71be4 100644
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
@@ -1,5 +1,3 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -105,20 +103,21 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           >
             ${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
           </span>
-          <mwc-tab-bar
-            .activeIndex=${tabs.indexOf(this._currTab)}
-            @MDCTabBar:activated=${this._handleTabChanged}
-          >
+          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
             ${tabs.map(
               (tab) => html`
-                <mwc-tab
-                  .label=${this.hass.localize(
+                <sl-tab
+                  slot="nav"
+                  .panel=${tab}
+                  .active=${this._currTab === tab}
+                >
+                  ${this.hass.localize(
                     `ui.dialogs.zha_manage_device.tabs.${tab}`
                   )}
-                ></mwc-tab>
+                </sl-tab>
               `
             )}
-          </mwc-tab-bar>
+          </sl-tab-group>
         </ha-dialog-header>
         <div class="content" tabindex="-1" dialogInitialFocus>
           ${cache(
@@ -187,7 +186,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
   }
 
   private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = this._getTabs(this._device)[ev.detail.index];
+    const newTab = ev.detail.name as Tab;
     if (newTab === this._currTab) {
       return;
     }
@@ -229,6 +228,14 @@ class DialogZHAManageZigbeeDevice extends LitElement {
             --mdc-dialog-max-height: calc(100% - 72px);
           }
         }
+
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts
index 056f296a4b..3c264a9e6e 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts
@@ -1,5 +1,3 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -15,6 +13,7 @@ import type { HomeAssistant } from "../../../../../types";
 import { computeClusterKey } from "./functions";
 import "./zha-cluster-attributes";
 import "./zha-cluster-commands";
+import "../../../../../components/sl-tab-group";
 
 declare global {
   // for fire event
@@ -92,20 +91,20 @@ export class ZHAManageClusters extends LitElement {
         </div>
         ${this._selectedCluster
           ? html`
-              <mwc-tab-bar
-                .activeIndex=${tabs.indexOf(this._currTab)}
-                @MDCTabBar:activated=${this._handleTabChanged}
-              >
+              <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                 ${tabs.map(
                   (tab) => html`
-                    <mwc-tab
-                      .label=${this.hass.localize(
+                    <sl-tab
+                      slot="nav"
+                      .panel=${tab}
+                      .active=${this._currTab === tab}
+                      >${this.hass.localize(
                         `ui.panel.config.zha.clusters.tabs.${tab}`
-                      )}
-                    ></mwc-tab>
+                      )}</sl-tab
+                    >
                   `
                 )}
-              </mwc-tab-bar>
+              </sl-tab-group>
 
               <div class="content" tabindex="-1" dialogInitialFocus>
                 ${cache(
@@ -148,7 +147,7 @@ export class ZHAManageClusters extends LitElement {
   }
 
   private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = tabs[ev.detail.index];
+    const newTab = ev.detail.name;
     if (newTab === this._currTab) {
       return;
     }
@@ -177,6 +176,14 @@ export class ZHAManageClusters extends LitElement {
           align-items: center;
           padding-bottom: 10px;
         }
+
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index 0df1ac663c..6decf94b54 100644
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -1,5 +1,3 @@
-import "@material/mwc-tab";
-import "@material/mwc-tab-bar";
 import { mdiDeleteOutline, mdiMenuDown, mdiPlus, mdiWifi } from "@mdi/js";
 import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -35,6 +33,7 @@ import {
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -95,26 +94,27 @@ export class HassioNetwork extends LitElement {
     }
 
     return html`
-      <ha-card
-        outlined
-        .header=${this.hass.localize(
-          "ui.panel.config.network.supervisor.title"
-        )}
-      >
-        ${this._interfaces.length > 1
-          ? html`<mwc-tab-bar
-              .activeIndex=${this._curTabIndex}
-              @MDCTabBar:activated=${this._handleTabActivated}
-              >${this._interfaces.map(
-                (device) =>
-                  html`<mwc-tab
-                    .id=${device.interface}
-                    .label=${device.interface}
-                  >
-                  </mwc-tab>`
-              )}
-            </mwc-tab-bar>`
-          : nothing}
+      <ha-card outlined>
+        <div class="card-header">
+          ${this.hass.localize("ui.panel.config.network.supervisor.title")}
+          ${this._interfaces.length > 1
+            ? html`
+                <sl-tab-group @sl-tab-show=${this._handleTabActivated}
+                  >${this._interfaces.map(
+                    (device, i) =>
+                      html`<sl-tab
+                        slot="nav"
+                        .active=${this._curTabIndex === i}
+                        .panel=${i.toString()}
+                        .id=${device.interface}
+                      >
+                        ${device.interface}
+                      </sl-tab>`
+                  )}
+                </sl-tab-group>
+              `
+            : nothing}
+        </div>
         ${cache(this._renderTab())}
       </ha-card>
     `;
@@ -627,8 +627,8 @@ export class HassioNetwork extends LitElement {
         return;
       }
     }
-    this._curTabIndex = ev.detail.index;
-    this._interface = { ...this._interfaces[ev.detail.index] };
+    this._curTabIndex = Number(ev.detail.name);
+    this._interface = { ...this._interfaces[this._curTabIndex] };
   }
 
   private _handleRadioValueChanged(ev: Event): void {
@@ -775,12 +775,6 @@ export class HassioNetwork extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       css`
-        mwc-tab-bar {
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-          margin-bottom: 24px;
-        }
-
         .content {
           display: block;
           padding: 20px 24px;
@@ -836,6 +830,17 @@ export class HassioNetwork extends LitElement {
         ha-expansion-panel > :last-child {
           margin-bottom: 16px;
         }
+
+        sl-tab-group {
+          line-height: 24px;
+        }
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
       `,
     ];
   }
diff --git a/yarn.lock b/yarn.lock
index e164d21932..3a18f6c428 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2853,60 +2853,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/mwc-tab-bar@npm:0.27.0":
-  version: 0.27.0
-  resolution: "@material/mwc-tab-bar@npm:0.27.0"
-  dependencies:
-    "@material/mwc-base": "npm:^0.27.0"
-    "@material/mwc-tab": "npm:^0.27.0"
-    "@material/mwc-tab-scroller": "npm:^0.27.0"
-    "@material/tab": "npm:=14.0.0-canary.53b3cad2f.0"
-    "@material/tab-bar": "npm:=14.0.0-canary.53b3cad2f.0"
-    lit: "npm:^2.0.0"
-    tslib: "npm:^2.0.1"
-  checksum: 10/f522b882f71c938ed878d3abe774794eca24cab2b1aa187b58ec944e498edc4b10f77ac641fb7e8b76a808f826f0c00b28f683b729356cb6a563ed6922c557f0
-  languageName: node
-  linkType: hard
-
-"@material/mwc-tab-indicator@npm:^0.27.0":
-  version: 0.27.0
-  resolution: "@material/mwc-tab-indicator@npm:0.27.0"
-  dependencies:
-    "@material/mwc-base": "npm:^0.27.0"
-    "@material/tab-indicator": "npm:=14.0.0-canary.53b3cad2f.0"
-    lit: "npm:^2.0.0"
-    tslib: "npm:^2.0.1"
-  checksum: 10/4f8ff17b9f2fd0224ed58d11b8f62707101ce0af68ac57aff4718c255be24bb6df356d80ef6eae142f66ffa5130a325bb5313b69161a34a4b4d22ce0d4447660
-  languageName: node
-  linkType: hard
-
-"@material/mwc-tab-scroller@npm:^0.27.0":
-  version: 0.27.0
-  resolution: "@material/mwc-tab-scroller@npm:0.27.0"
-  dependencies:
-    "@material/dom": "npm:=14.0.0-canary.53b3cad2f.0"
-    "@material/mwc-base": "npm:^0.27.0"
-    "@material/tab-scroller": "npm:=14.0.0-canary.53b3cad2f.0"
-    lit: "npm:^2.0.0"
-    tslib: "npm:^2.0.1"
-  checksum: 10/74fa3bc94ca4920928055bf54f3867a27a6c33309d45e2d30873d31a973c7e9a8442ccd8637aa5940b7e5d600432447df3ffa8062ccac6e05e4d9053567d2004
-  languageName: node
-  linkType: hard
-
-"@material/mwc-tab@npm:0.27.0, @material/mwc-tab@npm:^0.27.0":
-  version: 0.27.0
-  resolution: "@material/mwc-tab@npm:0.27.0"
-  dependencies:
-    "@material/mwc-base": "npm:^0.27.0"
-    "@material/mwc-ripple": "npm:^0.27.0"
-    "@material/mwc-tab-indicator": "npm:^0.27.0"
-    "@material/tab": "npm:=14.0.0-canary.53b3cad2f.0"
-    lit: "npm:^2.0.0"
-    tslib: "npm:^2.0.1"
-  checksum: 10/89247296223c2831983ceaf3b5b491ed6732dba62e00fe70c98d4174a2017482e30cac53e7b083e952b966eecde85bf3057f61ebca97015d6fc3367721754dd8
-  languageName: node
-  linkType: hard
-
 "@material/mwc-textarea@npm:0.27.0":
   version: 0.27.0
   resolution: "@material/mwc-textarea@npm:0.27.0"
@@ -3108,70 +3054,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/tab-bar@npm:=14.0.0-canary.53b3cad2f.0":
-  version: 14.0.0-canary.53b3cad2f.0
-  resolution: "@material/tab-bar@npm:14.0.0-canary.53b3cad2f.0"
-  dependencies:
-    "@material/animation": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/base": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/density": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/elevation": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/tab": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/tab-indicator": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/tab-scroller": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/theme": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/typography": "npm:14.0.0-canary.53b3cad2f.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/997f9ce78d73ae2d6e25f0309dbf109417bb6d2148db27025f7947e9a07a43401f14418e03f104cf7f138b3e39a2864fe4047463a33bb024473faffca3366022
-  languageName: node
-  linkType: hard
-
-"@material/tab-indicator@npm:14.0.0-canary.53b3cad2f.0, @material/tab-indicator@npm:=14.0.0-canary.53b3cad2f.0":
-  version: 14.0.0-canary.53b3cad2f.0
-  resolution: "@material/tab-indicator@npm:14.0.0-canary.53b3cad2f.0"
-  dependencies:
-    "@material/animation": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/base": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/theme": "npm:14.0.0-canary.53b3cad2f.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/c481d8272a5b01df0c2fbfe27f2055469cbb65d422ff14bdf3f5ff72cafa1eff6cdcf242c06c550a2176150acbe5e2ced055b2848cb72bc3217f7e6770b9a85c
-  languageName: node
-  linkType: hard
-
-"@material/tab-scroller@npm:14.0.0-canary.53b3cad2f.0, @material/tab-scroller@npm:=14.0.0-canary.53b3cad2f.0":
-  version: 14.0.0-canary.53b3cad2f.0
-  resolution: "@material/tab-scroller@npm:14.0.0-canary.53b3cad2f.0"
-  dependencies:
-    "@material/animation": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/base": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/dom": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/tab": "npm:14.0.0-canary.53b3cad2f.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/173991868d86227da54cb5392627ad6a449f4f3de4e8b3830c5545d9b9ae1605caae3226b6b54e1fc3336e718a6346129086f7589c4610950f579aa927e278b3
-  languageName: node
-  linkType: hard
-
-"@material/tab@npm:14.0.0-canary.53b3cad2f.0, @material/tab@npm:=14.0.0-canary.53b3cad2f.0":
-  version: 14.0.0-canary.53b3cad2f.0
-  resolution: "@material/tab@npm:14.0.0-canary.53b3cad2f.0"
-  dependencies:
-    "@material/base": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/elevation": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/focus-ring": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/ripple": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/rtl": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/tab-indicator": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/theme": "npm:14.0.0-canary.53b3cad2f.0"
-    "@material/typography": "npm:14.0.0-canary.53b3cad2f.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/ae8a1935bb713f54f45f2d40bc9fc10b046932aa0b1af3816054f318530c37528332cd97c7f2a55aff8ceec228bd457dab804fbd801b662bf75b542dbf4215a4
-  languageName: node
-  linkType: hard
-
 "@material/textfield@npm:=14.0.0-canary.53b3cad2f.0":
   version: 14.0.0-canary.53b3cad2f.0
   resolution: "@material/textfield@npm:14.0.0-canary.53b3cad2f.0"
@@ -9384,8 +9266,6 @@ __metadata:
     "@material/mwc-select": "npm:0.27.0"
     "@material/mwc-snackbar": "npm:0.27.0"
     "@material/mwc-switch": "npm:0.27.0"
-    "@material/mwc-tab": "npm:0.27.0"
-    "@material/mwc-tab-bar": "npm:0.27.0"
     "@material/mwc-textarea": "npm:0.27.0"
     "@material/mwc-textfield": "npm:0.27.0"
     "@material/mwc-top-app-bar": "npm:0.27.0"