diff --git a/src/panels/config/network/ha-config-url-form.ts b/src/panels/config/network/ha-config-url-form.ts
index e75dbe0c3c..41d0660c00 100644
--- a/src/panels/config/network/ha-config-url-form.ts
+++ b/src/panels/config/network/ha-config-url-form.ts
@@ -344,7 +344,8 @@ class ConfigUrlForm extends LitElement {
       }
 
       .card-actions {
-        text-align: right;
+        display: flex;
+        flex-direction: row-reverse;
       }
 
       a {
diff --git a/src/panels/config/network/supervisor-hostname.ts b/src/panels/config/network/supervisor-hostname.ts
index fca07d9720..85dd0bf471 100644
--- a/src/panels/config/network/supervisor-hostname.ts
+++ b/src/panels/config/network/supervisor-hostname.ts
@@ -51,22 +51,23 @@ export class HassioHostname extends LitElement {
       <ha-card
         class="no-padding"
         outlined
-        .header=${this.hass.localize("ui.panel.config.network.hostname.title")}
+        .header=${this.hass.localize(
+          "ui.panel.config.network.supervisor.hostname.title"
+        )}
       >
-        <div>
-          <ha-settings-row .narrow=${this.narrow}>
-            <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 class="card-content">
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.network.supervisor.hostname.description"
+            )}
+          </p>
+          <ha-textfield
+            .disabled=${this._processing}
+            .value=${this._hostname}
+            @change=${this._handleChange}
+            placeholder="homeassistant"
+          >
+          </ha-textfield>
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._save} .disabled=${this._processing}>
@@ -91,7 +92,7 @@ export class HassioHostname extends LitElement {
     } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize(
-          "ui.panel.config.network.hostname.failed_to_set_hostname"
+          "ui.panel.config.network.supervisor.hostname.failed_to_set_hostname"
         ),
         text: extractApiErrorMessage(err),
       });
@@ -110,8 +111,8 @@ export class HassioHostname extends LitElement {
       justify-content: space-between;
       align-items: center;
     }
-    ha-settings-row {
-      border-top: none;
+    .card-content > p {
+      padding-bottom: 1em;
     }
   `;
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index 2650276563..019466e5c9 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -3778,7 +3778,12 @@
             "gateway": "Gateway address",
             "dns_servers": "DNS Servers",
             "unsaved": "You have unsaved changes, these will get lost if you change tabs, do you want to continue?",
-            "failed_to_change": "Failed to change network settings"
+            "failed_to_change": "Failed to change network settings",
+            "hostname": {
+              "title": "Host Name",
+              "description": "The name your instance will have on your network",
+              "failed_to_set_hostname": "Setting hostname failed"
+            }
           }
         },
         "storage": {