diff --git a/static/style.css b/static/style.css
index 4ce3518..497c6dd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -121,7 +121,7 @@ th { background: var(--surface); font-weight: 600; }
     transition: border-color 0.15s, background 0.15s;
 }
 .port:hover { border-color: var(--accent); }
-.port.connected { border-color: var(--green); background: #2a4a3a; }
+.port.connected { border-width: 2px; }
 
 /* MODAL */
 .modal-overlay {
diff --git a/templates/_port_list.html b/templates/_port_list.html
index e2f2f94..cbb4ce3 100644
--- a/templates/_port_list.html
+++ b/templates/_port_list.html
@@ -4,7 +4,10 @@
         <h5>Front</h5>
         {{range .Device.Ports}}{{if eq .Side "front"}}
         {{$pid := .ID}}
-        <span class="port {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}"
+        {{$color := "#333"}}{{$bg := ""}}
+        {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
+        <span class="port {{if ne $bg ""}}connected{{end}}"
+              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
               hx-get="/connections/{{.ID}}" 
               hx-target="#modal-content"
               hx-trigger="click"
@@ -18,7 +21,10 @@
         <h5>Back</h5>
         {{range .Device.Ports}}{{if eq .Side "back"}}
         {{$pid := .ID}}
-        <span class="port {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}"
+        {{$color := "#333"}}{{$bg := ""}}
+        {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
+        <span class="port {{if ne $bg ""}}connected{{end}}"
+              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
               hx-get="/connections/{{.ID}}" 
               hx-target="#modal-content"
               hx-trigger="click"
diff --git a/templates/wall_sockets.html b/templates/wall_sockets.html
index df50b23..1185833 100644
--- a/templates/wall_sockets.html
+++ b/templates/wall_sockets.html
@@ -13,7 +13,10 @@
     <td>{{.Comment}}</td>
     <td>
         {{range .Ports}}
-        <span class="port {{$pid := .ID}}{{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}"
+        {{$pid := .ID}}{{$color := "#333"}}{{$bg := ""}}
+        {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
+        <span class="port {{if ne $bg ""}}connected{{end}}"
+              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
               hx-get="/connections/{{.ID}}"
               hx-target="#modal-content"
               hx-trigger="click"