diff --git a/src/app/components/preferences/common/ports/ports.component.ts b/src/app/components/preferences/common/ports/ports.component.ts
index 504f2a65..1e546f93 100644
--- a/src/app/components/preferences/common/ports/ports.component.ts
+++ b/src/app/components/preferences/common/ports/ports.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PortsMappingEntity } from '../../../../models/ethernetHub/ports-mapping-enity';
 import { BuiltInTemplatesConfigurationService } from '../../../../services/built-in-templates-configuration.service';
+import { ToasterService } from "@services/toaster.service";
 
 @Component({
   selector: 'app-ports',
@@ -12,16 +13,23 @@ export class PortsComponent implements OnInit {
   newPort: PortsMappingEntity = {
     name: '',
     port_number: 0,
+    vlan: 1,
+    type: 'access',
+    ethertype: '0x8100',
   };
 
   portTypes: string[] = [];
   etherTypes: string[] = [];
   displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype', 'action'];
 
-  constructor(private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService) {}
+  constructor(
+    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+    private toasterService: ToasterService,
+  ) {}
 
   ngOnInit() {
     this.getConfiguration();
+    this.newPort.port_number = this.ethernetPorts.length;
   }
 
   getConfiguration() {
@@ -30,13 +38,18 @@ export class PortsComponent implements OnInit {
   }
 
   onAdd() {
-    this.newPort.name = "Ethernet" + this.newPort.port_number;
-    this.ethernetPorts.push(this.newPort);
 
-    this.newPort = {
-      name: '',
-      port_number: 0,
-    };
+    const portExists = this.ethernetPorts.some(p => p.port_number === this.newPort.port_number);
+    if (portExists) {
+      this.toasterService.error(`Port number ${this.newPort.port_number} already exists.`);
+      return;
+    }
+
+    const port: PortsMappingEntity = { ...this.newPort };
+    port.name = "Ethernet" + port.port_number;
+    this.ethernetPorts.push(port);
+    this.ethernetPorts = [].concat(this.ethernetPorts); // this forces the refresh of the table
+    this.newPort.port_number = this.ethernetPorts.length;
   }
 
   delete(port: PortsMappingEntity) {