diff --git a/src/client/host_detail.rs b/src/client/host_detail.rs
index 1868291..f8e1587 100644
--- a/src/client/host_detail.rs
+++ b/src/client/host_detail.rs
@@ -170,7 +170,7 @@ pub fn HostDetailPage() -> impl IntoView {
                             // ── Page header ──────────────────────────────────
                             <div class="page-header">
                                 <div class="page-header__left">
-                                    <a class="back-link" href="/hosts">"← Hosts"</a>
+                                    <a class="back-btn" href="/hosts">"← Hosts"</a>
                                     <h1>{move || name_sig.get()}</h1>
                                 </div>
                                 <button
@@ -236,6 +236,7 @@ pub fn HostDetailPage() -> impl IntoView {
 
                                     <div class="form-actions">
                                         <button
+                                            class="btn-primary"
                                             type="button"
                                             on:click=move |_| {
                                             update_action.dispatch(UpdateHost {
@@ -278,6 +279,7 @@ pub fn HostDetailPage() -> impl IntoView {
                                         on:input=move |e| new_port.set(event_target_value(&e))
                                     />
                                     <button
+                                        class="btn-primary"
                                         type="button"
                                         on:click=move |_| {
                                             let raw = new_port.get_untracked();
diff --git a/style/rust-ipam.css b/style/rust-ipam.css
index f52bda1..6af360f 100644
--- a/style/rust-ipam.css
+++ b/style/rust-ipam.css
@@ -1035,23 +1035,33 @@ td.col-actions {
   filter: brightness(0.9);
 }
 
-/* Left cluster inside page header (back link + title) */
+/* Left cluster inside page header: back button stacked above title */
 .page-header__left {
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--size-xs);
+}
+
+.back-btn {
+  display: inline-flex;
   align-items: center;
-  gap: var(--size-md);
-}
-
-.back-link {
-  font-size: var(--font-sm);
+  gap: 4px;
+  font-size: var(--font-xs);
+  font-weight: 500;
   color: var(--text-secondary);
+  background: var(--bg-surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 3px 10px;
   text-decoration: none;
-  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
 }
 
-.back-link:hover {
+.back-btn:hover {
+  background: var(--bg-hover);
   color: var(--text);
-  text-decoration: underline;
 }
 
 /* Delete button inside hosts table */
@@ -1131,18 +1141,16 @@ td.col-actions {
 .port-list {
   display: flex;
   flex-direction: column;
-  gap: var(--size-xs);
   margin-bottom: var(--size-md);
+  border-top: 1px solid var(--border);
 }
 
 .port-row {
   display: flex;
   align-items: center;
   gap: var(--size-md);
-  padding: var(--size-sm) var(--size-sm);
-  border-radius: var(--radius-sm);
-  background: var(--bg);
-  border: 1px solid var(--border);
+  padding: var(--size-sm) var(--size-xs);
+  border-bottom: 1px solid var(--border);
 }
 
 .port-row__number {