diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.html b/src/app/components/project-map/node-select-interface/node-select-interface.component.html
index 23c5bab7..54b44e31 100644
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.html
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.html
@@ -1,9 +1,15 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
   <span [matMenuTriggerFor]="selectInterfaceMenu"></span>
   <mat-menu [style.min-height]="0" #selectInterfaceMenu="matMenu" class="context-menu-items">
-    <button mat-menu-item *ngFor="let port of availablePorts" (click)="chooseInterface(port)">
-      <mat-icon>add_circle_outline</mat-icon>
-      <span>{{ port.name }}</span>
+    <button mat-menu-item *ngFor="let port of ports" (click)="chooseInterface(port)" [disabled]="!port.available">
+      <svg *ngIf="port.available" width="10" height="10">
+        <rect class="status" x="0" y="0" width="10" height="10" fill="green"></rect>
+      </svg>
+      <svg *ngIf="!port.available" width="10" height="10">
+        <rect class="status" x="0" y="0" width="10" height="10" fill="red"></rect>
+      </svg>
+      <!-- <mat-icon>add_circle_outline</mat-icon> -->
+      <span class="port">{{ port.name }}</span>
     </button>
   </mat-menu>
 </div>
diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.scss b/src/app/components/project-map/node-select-interface/node-select-interface.component.scss
index c0b01e33..5ca0ac3f 100644
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.scss
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.scss
@@ -5,3 +5,11 @@
 .context-menu-items {
   min-height: 0px!important;
 }
+
+.status {
+  margin-right: 10px;
+}
+
+.port {
+  margin-left: 10px;
+}
diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.ts b/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
index 0ad0aca0..17cbcf41 100644
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
@@ -20,7 +20,7 @@ export class NodeSelectInterfaceComponent implements OnInit {
   protected topPosition;
   protected leftPosition;
   public node: Node;
-  public availablePorts: Port[];
+  public ports: Port[];
 
   constructor(
     private sanitizer: DomSanitizer, 
@@ -54,11 +54,14 @@ export class NodeSelectInterfaceComponent implements OnInit {
       });
     });
 
-    this.availablePorts = [];
+    this.ports = [];
     this.node.ports.forEach((port: Port) => {
-      if(linkNodes.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length === 0){
-        this.availablePorts.push(port);
+      if (linkNodes.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length === 0) {
+        port.available = true;
+      } else {
+        port.available = false;
       }
+      this.ports.push(port);
     });
   }
 
diff --git a/src/app/models/port.ts b/src/app/models/port.ts
index 6b8c4429..ade1466a 100644
--- a/src/app/models/port.ts
+++ b/src/app/models/port.ts
@@ -5,4 +5,5 @@ export class Port {
   name: string;
   port_number: number;
   short_name: string;
+  available?: boolean;
 }