diff --git a/web/src/Service.jsx b/web/src/Service.jsx
index a5f4953..2d6e449 100644
--- a/web/src/Service.jsx
+++ b/web/src/Service.jsx
@@ -27,21 +27,8 @@ function Service(props) {
   const configMapWidgets = configMaps(service.pods, service.svc.metadata.namespace, capacitorClient)
   const secretWidgets = secrets(service.pods, service.svc.metadata.namespace, capacitorClient)
 
-  const svcPort = service.svc.spec.ports[0].port
-  let hostPort = "<host-port>"
-  if (svcPort) {
-    if (svcPort <= 99) {
-      hostPort = "100" + svcPort
-    } else if (svcPort <= 999) {
-      hostPort = "10" + svcPort
-    } else {
-      hostPort = svcPort
-    }
-
-    if (hostPort === "10080") { // Connections to HTTP, HTTPS or FTP servers on port 10080 will fail. This is a mitigation for the NAT Slipstream 2.0 attack.
-      hostPort = "10081"
-    }
-  }
+  const appPort = getAppPort(service.svc.spec.ports) ?? "<app-port>";
+  const hostPort = getHostPort(service.svc.spec.ports) ?? "<host-port>";
 
   return (
     <>
@@ -167,7 +154,7 @@ function Service(props) {
                     <div className='absolute right-0 top-0'>
                       <CopyBtn
                         title='Port-forward command'
-                        textToCopy={`kubectl port-forward deploy/${deployment.metadata.name} -n ${deployment.metadata.namespace} ${hostPort}:${svcPort}`}
+                        textToCopy={`kubectl port-forward deploy/${deployment.metadata.name} -n ${deployment.metadata.namespace} ${hostPort}:${appPort}`}
                       />
                     </div>
                     </div>
@@ -185,7 +172,7 @@ function Service(props) {
                       </p>
                       ) : null
                     }
-                    {svcPort &&
+                    {service.svc.spec.ports &&
                         <>
                           <a href={'http://127.0.0.1:' + hostPort} target="_blank" rel="noopener noreferrer">http://127.0.0.1:{hostPort}
                             <svg xmlns="http://www.w3.org/2000/svg"
@@ -242,6 +229,41 @@ function Service(props) {
 
 export default Service;
 
+export function getAppPort(ports) {
+  if (!ports) {
+    return
+  }
+
+  const servicePort = getServicePort(ports);
+  return `${servicePort}`;
+}
+
+export function getHostPort(ports) {
+  if (!ports) {
+    return
+  }
+
+  let servicePort = getServicePort(ports);
+
+  if (servicePort <= 99) {
+    if (servicePort === 80) {
+      return "10081" // Connections to HTTP, HTTPS or FTP servers on port 10080 will fail. This is a mitigation for the NAT Slipstream 2.0 attack.
+    }
+    return `100${servicePort}`
+  }
+
+  if (servicePort <= 999) {
+    return `10${servicePort}`
+  }
+
+  return `${servicePort}`;
+}
+
+function getServicePort(ports) {
+  const servicePorts = jp.query(ports, '$..[?(@.port)].port');
+  return servicePorts.length === 1 ? servicePorts[0] : 80;
+}
+
 export function Pod(props) {
   const {pod} = props;
 
diff --git a/web/src/service.test.js b/web/src/service.test.js
new file mode 100644
index 0000000..0dbe8e3
--- /dev/null
+++ b/web/src/service.test.js
@@ -0,0 +1,55 @@
+import { getAppPort, getHostPort } from "./Service"
+
+test('should return undefined for app port', () => {
+  const port = getAppPort(undefined)
+
+  expect(port).toBeUndefined();
+});
+
+test('should return undefined for host port', () => {
+  const port = getHostPort(undefined)
+
+  expect(port).toBeUndefined();
+});
+
+test('should return "80" for app port', () => {
+  const ports = [{}];
+  const port = getAppPort(ports)
+
+  expect(port).toEqual("80");
+});
+
+test('should return "5000" for app port', () => {
+  const ports = [{"port": 5000}];
+  const port = getAppPort(ports)
+
+  expect(port).toEqual("5000");
+});
+
+test('should return "5000" for host port', () => {
+  const ports = [{"port": 5000}];
+  const port = getHostPort(ports)
+
+  expect(port).toEqual("5000");
+});
+
+test('should return "10081" for host port', () => {
+  const ports = [{"port": 80}];
+  const port = getHostPort(ports)
+
+  expect(port).toEqual("10081");
+});
+
+test('should return "10090 for host port', () => {
+  const ports = [{"port": 90}];
+  const port = getHostPort(ports)
+
+  expect(port).toEqual("10090");
+});
+
+test('should return "10200 for host port', () => {
+  const ports = [{"port": 200}];
+  const port = getHostPort(ports)
+
+  expect(port).toEqual("10200");
+});