diff --git a/src/panels/config/network/ha-config-section-network.ts b/src/panels/config/network/ha-config-section-network.ts
index daf8b15fc4..a8a162f18f 100644
--- a/src/panels/config/network/ha-config-section-network.ts
+++ b/src/panels/config/network/ha-config-section-network.ts
@@ -6,6 +6,7 @@ import type { HomeAssistant, Route } from "../../../types";
 import "./ha-config-network";
 import "./ha-config-url-form";
 import "./supervisor-network";
+import "./supervisor-hostname";
 
 @customElement("ha-config-section-network")
 class HaConfigSectionNetwork extends LitElement {
@@ -25,7 +26,10 @@ class HaConfigSectionNetwork extends LitElement {
       >
         <div class="content">
           ${isComponentLoaded(this.hass, "hassio")
-            ? html`<supervisor-network .hass=${this.hass}></supervisor-network>`
+            ? html`<supervisor-hostname
+                  .hass=${this.hass}
+                ></supervisor-hostname>
+                <supervisor-network .hass=${this.hass}></supervisor-network>`
             : ""}
           <ha-config-url-form .hass=${this.hass}></ha-config-url-form>
           <ha-config-network .hass=${this.hass}></ha-config-network>
@@ -40,6 +44,7 @@ class HaConfigSectionNetwork extends LitElement {
       max-width: 1040px;
       margin: 0 auto;
     }
+    supervisor-hostname,
     supervisor-network,
     ha-config-url-form {
       display: block;
diff --git a/src/panels/config/network/supervisor-hostname.ts b/src/panels/config/network/supervisor-hostname.ts
new file mode 100644
index 0000000000..f18c173217
--- /dev/null
+++ b/src/panels/config/network/supervisor-hostname.ts
@@ -0,0 +1,122 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-tab";
+import "@material/mwc-tab-bar";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-alert";
+import "../../../components/ha-card";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-expansion-panel";
+import "../../../components/ha-formfield";
+import "../../../components/ha-header-bar";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-radio";
+import "../../../components/ha-related-items";
+import "../../../components/ha-textfield";
+import { extractApiErrorMessage } from "../../../data/hassio/common";
+import {
+  changeHostOptions,
+  fetchHassioHostInfo,
+} from "../../../data/hassio/host";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-settings-row";
+
+@customElement("supervisor-hostname")
+export class HassioHostname extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _processing = false;
+
+  @state() private _hostname?: string;
+
+  protected firstUpdated() {
+    this._fetchHostInfo();
+  }
+
+  private async _fetchHostInfo() {
+    const hostInfo = await fetchHassioHostInfo(this.hass);
+    this._hostname = hostInfo.hostname;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._hostname) {
+      return html``;
+    }
+
+    return html`
+      <ha-card
+        outlined
+        .header=${this.hass.localize("ui.panel.config.network.hostname.title")}
+      >
+        <div class="card-content">
+          <ha-settings-row>
+            <span slot="heading">Hostname</span>
+            <span slot="description"
+              >The name your instance will have on your network</span
+            >
+            <ha-textfield
+              .disabled=${this._processing}
+              .value=${this._hostname}
+              @change=${this._handleChange}
+              placeholder="homeassistant"
+            >
+            </ha-textfield>
+          </ha-settings-row>
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._save} .disabled=${this._processing}>
+            ${this._processing
+              ? html`<ha-circular-progress active size="small">
+                </ha-circular-progress>`
+              : this.hass.localize("ui.common.save")}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _handleChange(ev) {
+    this._hostname = ev.target.value;
+  }
+
+  private async _save() {
+    this._processing = true;
+    try {
+      await changeHostOptions(this.hass, { hostname: this._hostname });
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.network.hostname.failed_to_set_hostname"
+        ),
+        text: extractApiErrorMessage(err),
+      });
+    } finally {
+      this._processing = false;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        ha-textfield {
+          width: 100%;
+        }
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-hostname": HassioHostname;
+  }
+}