diff --git a/kvmd/apps/kvmd/switch/state.py b/kvmd/apps/kvmd/switch/state.py
index 92231791..d68d1383 100644
--- a/kvmd/apps/kvmd/switch/state.py
+++ b/kvmd/apps/kvmd/switch/state.py
@@ -163,7 +163,17 @@ class StateCache:  # pylint: disable=too-many-instance-attributes,too-many-publi
                 },
             }
         if x_summary:
-            state["summary"] = {"active_port": self.__active_port, "synced": self.__synced}
+            state["summary"] = {
+                "active_port": self.__active_port,
+                "active_id": (
+                    "" if self.__active_port < 0 else (
+                        f"{self.__active_port // 4 + 1}.{self.__active_port % 4 + 1}"
+                        if len(self.__units) > 1 else
+                        f"{self.__active_port + 1}"
+                    )
+                ),
+                "synced": self.__synced,
+            }
         if x_edids:
             state["edids"] = {
                 "all": {
@@ -224,6 +234,7 @@ class StateCache:  # pylint: disable=too-many-instance-attributes,too-many-publi
                             "unit": unit,
                             "channel": ch,
                             "name": self.__port_names[port],
+                            "id": (f"{unit + 1}.{ch + 1}" if len(self.__units) > 1 else f"{ch + 1}"),
                             "atx": {
                                 "click_delays": {
                                     "power": self.__atx_cp_delays[port],
diff --git a/web/share/js/kvm/switch.js b/web/share/js/kvm/switch.js
index 46a4e1d1..7a6e47cf 100644
--- a/web/share/js/kvm/switch.js
+++ b/web/share/js/kvm/switch.js
@@ -306,7 +306,7 @@ export function Switch() {
 			if (active < 0 || active >= __state.model.ports.length) {
 				$("switch-active-port").innerText = "N/A";
 			} else {
-				$("switch-active-port").innerText = "p" + __formatPort(__state.model, active);
+				$("switch-active-port").innerText = "p" + summary.active_id;
 			}
 			for (let port = 0; port < __state.model.ports.length; ++port) {
 				__setLedState($(`__switch-port-led-p${port}`), "green", (port === active));
@@ -361,7 +361,7 @@ export function Switch() {
 			content += `
 				<tr>
 					<td>Port:</td>
-					<td class="value">${__formatPort(model, port)}</td>
+					<td class="value">${pa.id}</td>
 					<td>&nbsp;&nbsp;</td>
 					<td>
 						<div class="buttons-row">
@@ -541,7 +541,7 @@ export function Switch() {
 			}
 		};
 
-		wm.modal(`Port ${__formatPort(__state.model, port)} settings`, create_content, true, true).then(function(ok) {
+		wm.modal(`Port ${__state.model.ports[port].id} settings`, create_content, true, true).then(function(ok) {
 			if (ok) {
 				let params = {
 					"port": port,
@@ -557,14 +557,6 @@ export function Switch() {
 		});
 	};
 
-	var __formatPort = function(model, port) {
-		if (model.units.length > 1) {
-			return `${model.ports[port].unit + 1}.${model.ports[port].channel + 1}`;
-		} else {
-			return `${port + 1}`;
-		}
-	};
-
 	var __setLedState = function(el, color, on) {
 		el.classList.toggle(`led-${color}`, on);
 		el.classList.toggle("led-gray", !on);