diff --git a/src/renderer/components/+network-services/service-details.tsx b/src/renderer/components/+network-services/service-details.tsx
index 935c74c96c..c7e7ae0721 100644
--- a/src/renderer/components/+network-services/service-details.tsx
+++ b/src/renderer/components/+network-services/service-details.tsx
@@ -63,11 +63,10 @@ export class ServiceDetails extends React.Component<Props> {
         <DrawerItem name={<Trans>Ports</Trans>}>
           <div>
             {
-              service.getPorts().map((port) => {
-                return(
-                  <ServicePortComponent service={service} port={port}/>
-                );
-              })
+              service.getPorts().map((port) => (
+                  <ServicePortComponent service={service} port={port} key={port.toString()}/>
+                )
+              )
             }
           </div>
         </DrawerItem>
diff --git a/src/renderer/components/+network-services/service-port-component.tsx b/src/renderer/components/+network-services/service-port-component.tsx
index d2b932bce6..252bf8eb16 100644
--- a/src/renderer/components/+network-services/service-port-component.tsx
+++ b/src/renderer/components/+network-services/service-port-component.tsx
@@ -35,14 +35,14 @@ export class ServicePortComponent extends React.Component<Props> {
   render() {
     const { port } = this.props;
     return (
-      <p className={cssNames("ServicePortComponent", { waiting: this.waiting })} key={port.toString()}>
+      <div className={cssNames("ServicePortComponent", { waiting: this.waiting })}>
         <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
           {port.toString()}
           {this.waiting && (
             <Spinner />
           )}
         </span>
-      </p>
+      </div>
     );
   }
 }
diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx
index d62630c115..9ebaed4fd7 100644
--- a/src/renderer/components/+workloads-pods/pod-container-port.tsx
+++ b/src/renderer/components/+workloads-pods/pod-container-port.tsx
@@ -13,7 +13,6 @@ import { Spinner } from "../spinner"
 
 interface Props {
   pod: Pod;
-  containerName: string;
   port: {
     name?: string;
     containerPort: number;
@@ -38,19 +37,18 @@ export class PodContainerPort extends React.Component<Props> {
   }
 
   render() {
-    const { containerName, port } = this.props;
+    const { port } = this.props;
     const { name, containerPort, protocol } = port;
-    const key = `${containerName}-port-${containerPort}-${protocol}`
     const text = (name ? name + ': ' : '')+`${containerPort}/${protocol}`
     return (
-      <p className={cssNames("PodContainerPort", { waiting: this.waiting })} key={key}>
+      <div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
         <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
           {text}
           {this.waiting && (
             <Spinner />
           )}
         </span>
-      </p>
+      </div>
     )
   }
 }
diff --git a/src/renderer/components/+workloads-pods/pod-details-container.tsx b/src/renderer/components/+workloads-pods/pod-details-container.tsx
index 733afef908..152a9ed2f9 100644
--- a/src/renderer/components/+workloads-pods/pod-details-container.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-container.tsx
@@ -67,8 +67,9 @@ export class PodDetailsContainer extends React.Component<Props> {
           <div>
             {
               ports.map((port) => {
+                const key = `${container.name}-port-${port.containerPort}-${port.protocol}`
                 return(
-                  <PodContainerPort pod={pod} containerName={container.name} port={port}/>
+                  <PodContainerPort pod={pod} port={port} key={key}/>
                 )
               })
             }