diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
index f3595d1e..4a35095d 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
@@ -4,9 +4,164 @@
             <h1 class="col">Cloud configuration</h1>
         </div>
     </div>
-    <div class="default-content" *ngIf="ethernetHubTemplate">
-        <form [formGroup]="inputForm">
-        </form>
+    <div class="default-content" *ngIf="cloudNodeTemplate">
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        General
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="cloudNodeTemplate.name" 
+                        placeholder="Template name">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="cloudNodeTemplate.default_name_format" 
+                        placeholder="Default name format">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="cloudNodeTemplate.symbol" 
+                        placeholder="Symbol">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <mat-select 
+                        placeholder="Category" 
+                        [(ngModel)]="cloudNodeTemplate.category">
+                        <mat-option *ngFor="let category of categories" [value]="category[1]">
+                            {{category[0]}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="select">
+                    <mat-select 
+                        placeholder="Console type" 
+                        [(ngModel)]="cloudNodeTemplate.console_type">
+                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                                {{type}}
+                            </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="cloudNodeTemplate.remote_console_host" 
+                        placeholder="Console host">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="cloudNodeTemplate.remote_console_port" 
+                        placeholder="Console port">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="cloudNodeTemplate.remote_console_http_path" 
+                        placeholder="Console HTTP path">
+                </mat-form-field>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Ethernet interfaces
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <div class="row" *ngFor="let port of ports_mapping_ethernet">
+                    <div class="row">{{port.name}}</div><br/><br/>
+                </div>
+                <mat-form-field class="select">
+                    <mat-select 
+                        placeholder="Ethernet interface" 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="ethernetInterface">
+                            <mat-option *ngFor="let type of " [value]="type">
+                                {{type}}
+                            </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <button mat-raised-button class="row" (click)="onAddEthernetInterface()">Add</button> 
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        TAP interfaces
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <div class="row" *ngFor="let port of ports_mapping_tap">
+                    <div class="row">{{port.name}}</div><br/><br/>
+                </div>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="tapInterface" 
+                        placeholder="TAP interface">
+                </mat-form-field>
+                <button mat-raised-button class="row" (click)="onAddTapInterface()">Add</button> 
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        UDP tunnels
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <table class="table" mat-table [dataSource]="dataSourceUdp">
+                    <ng-container matColumnDef="name">
+                        <th mat-header-cell *matHeaderCellDef> Name </th>
+                        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+                    </ng-container>
+    
+                    <ng-container matColumnDef="rport">
+                        <th mat-header-cell *matHeaderCellDef> Local port </th>
+                        <td mat-cell *matCellDef="let element"> {{element.rport}} </td>
+                    </ng-container>
+    
+                    <ng-container matColumnDef="rhost">
+                        <th mat-header-cell *matHeaderCellDef> Type </th>
+                        <td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="lport">
+                        <th mat-header-cell *matHeaderCellDef> Remote port </th>
+                        <td mat-cell *matCellDef="let element"> {{element.lport}} </td>
+                    </ng-container>
+                    
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table><br/>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="newPort.name" 
+                        placeholder="Name">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="newPort.lport" 
+                        placeholder="Local port">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="newPort.rhost" 
+                        placeholder="Remote host">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="newPort.rport" 
+                        placeholder="Remote port">
+                </mat-form-field>
+                <button mat-raised-button class="row" (click)="onAddUdpInterface()">Add</button>
+            </mat-expansion-panel>
+        </mat-accordion>
         <div class="buttons-bar">
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss
index ceb5950c..504a43bd 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss
@@ -6,3 +6,15 @@
 .select {
     width: 100%;
 }
+
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
index f2ce3247..4dc5cc10 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
@@ -3,9 +3,9 @@ import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
 
 
 @Component({
@@ -16,18 +16,34 @@ import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 export class CloudNodesTemplateDetailsComponent implements OnInit {
     server: Server;
     cloudNodeTemplate: CloudTemplate;
-    inputForm: FormGroup;
+
+    categories = [["Default", "guest"],
+                    ["Routers", "router"],
+                    ["Switches", "switch"],
+                    ["End devices", "end_device"],
+                    ["Security devices", "security_device"]];
+    consoleTypes: string[] = ['telnet', 'none'];
+
+    tapInterface: string = '';
+    ethernetInterface: string = '';
+    ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];
+    ports_mapping_ethernet: PortsMappingEntity[] = [];
+    ports_mapping_tap: PortsMappingEntity[] = [];
+    ports_mapping_udp: PortsMappingEntity[] = [];
+    newPort: PortsMappingEntity;
+    displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport'];
+    dataSourceUdp: PortsMappingEntity[] = [];
 
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
         private builtInTemplatesService: BuiltInTemplatesService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder
+        private toasterService: ToasterService
     ) {
-        this.inputForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required)
-        });
+        this.newPort = {
+            name: '',
+            port_number: 0,
+        };
     }
 
     ngOnInit() {
@@ -38,17 +54,58 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
 
             this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((cloudNodeTemplate: CloudTemplate) => {
                 this.cloudNodeTemplate = cloudNodeTemplate;
+
+                this.ports_mapping_ethernet = this.cloudNodeTemplate.ports_mapping
+                    .filter((elem) => elem.type === 'ethernet');
+
+                this.ports_mapping_tap = this.cloudNodeTemplate.ports_mapping
+                    .filter((elem) => elem.type === 'tap');
+                
+                this.ports_mapping_udp = this.cloudNodeTemplate.ports_mapping
+                    .filter((elem) => elem.type === 'udp');
+                
+                this.dataSourceUdp = this.ports_mapping_udp;
             });
         });
     }
 
-    onSave() {
-        if (this.inputForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.builtInTemplatesService.saveTemplate(this.server, this.cloudNodeTemplate).subscribe((cloudNodeTemplate: CloudTemplate) => {
-                this.toasterService.success("Changes saved");
+    onAddEthernetInterface() {
+        if (this.ethernetInterface) {
+            this.ports_mapping_ethernet.push({
+                interface: this.ethernetInterface,
+                name: this.ethernetInterface,
+                port_number: 0,
+                type: "ethernet"
             });
         }
     }
+
+    onAddTapInterface() {
+        if (this.tapInterface) {
+            this.ports_mapping_tap.push({
+                interface: this.tapInterface,
+                name: this.tapInterface,
+                port_number: 0,
+                type: "tap"
+            });
+        }
+    }
+
+    onAddUdpInterface() {
+        this.ports_mapping_udp.push(this.newPort);
+        this.dataSourceUdp = [...this.ports_mapping_udp];
+        
+        this.newPort = {
+            name: '',
+            port_number: 0,
+        };
+    }
+
+    onSave() {
+        this.cloudNodeTemplate.ports_mapping = [...this.ports_mapping_ethernet, ...this.ports_mapping_tap];
+
+        this.builtInTemplatesService.saveTemplate(this.server, this.cloudNodeTemplate).subscribe((cloudNodeTemplate: CloudTemplate) => {
+            this.toasterService.success("Changes saved");
+        });
+    }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
index 922cde13..b686fa87 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
@@ -38,7 +38,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
         private formBuilder: FormBuilder
-    ) {
+    ){
         this.inputForm = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
             defaultName: new FormControl('', Validators.required),
diff --git a/src/app/models/ethernetHub/ports-mapping-enity.ts b/src/app/models/ethernetHub/ports-mapping-enity.ts
index d95691ec..ba470929 100644
--- a/src/app/models/ethernetHub/ports-mapping-enity.ts
+++ b/src/app/models/ethernetHub/ports-mapping-enity.ts
@@ -1,7 +1,11 @@
 export interface PortsMappingEntity {
     ethertype?: string;
+    interface?: string,
     name: string;
     port_number: number;
     type?: string;
     vlan?: number;
+    rhost?: string;
+    lport?: number;
+    rport?: number;
 }