From 30ede76507cc5093431e3ea2d2ef50603a9a1c55 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Fri, 15 Feb 2019 06:17:27 -0800
Subject: [PATCH] Fixes after review

BuilInTemplates,
EthernetHubs
EthernetSwitches,
CloudNodes modificated, back and cancel buttons added
---
 src/app/app.module.ts                         |  6 +-
 .../built-in-preferences.component.html       | 19 ++--
 .../built-in-preferences.component.ts         |  6 +-
 .../cloud-nodes-add-template.component.html   | 11 ++-
 .../cloud-nodes-add-template.component.scss   |  3 -
 .../cloud-nodes-add-template.component.ts     | 21 +++-
 ...loud-nodes-template-details.component.html | 58 +++++------
 ...loud-nodes-template-details.component.scss | 34 -------
 .../cloud-nodes-template-details.component.ts | 12 ++-
 .../cloud-nodes-templates.component.html      | 10 +-
 .../cloud-nodes-templates.component.scss      | 12 ---
 .../cloud-nodes-templates.component.ts        |  7 +-
 .../ethernet-hubs-add-template.component.html | 17 ++--
 .../ethernet-hubs-add-template.component.scss |  3 -
 .../ethernet-hubs-add-template.component.ts   | 27 ++++--
 ...ernet-hubs-template-details.component.html | 97 +++++++++----------
 ...ernet-hubs-template-details.component.scss | 22 -----
 ...thernet-hubs-template-details.component.ts | 13 ++-
 .../ethernet-hubs-templates.component.html    | 10 +-
 .../ethernet-hubs-templates.component.scss    | 12 ---
 .../ethernet-hubs-templates.component.ts      |  7 +-
 ...ernet-switches-add-template.component.html | 14 +--
 ...ernet-switches-add-template.component.scss |  3 -
 ...thernet-switches-add-template.component.ts | 23 +++--
 ...t-switches-template-details.component.html | 29 ++----
 ...t-switches-template-details.component.scss | 34 -------
 ...net-switches-template-details.component.ts | 12 ++-
 ...ethernet-switches-templates.component.html | 10 +-
 ...ethernet-switches-templates.component.scss | 12 ---
 .../ethernet-switches-templates.component.ts  |  7 +-
 .../empty-templates-list.component.html       |  3 +
 .../empty-templates-list.component.scss       |  3 +
 .../empty-templates-list.component.spec.ts    |  0
 .../empty-templates-list.component.ts         | 11 +++
 .../symbols-menu/symbols-menu.component.html  | 12 +++
 .../symbols-menu/symbols-menu.component.scss  |  0
 .../symbols-menu.component.spec.ts            |  0
 .../symbols-menu/symbols-menu.component.ts    | 28 ++++++
 .../common/symbols/symbols.component.html     | 38 ++------
 .../common/symbols/symbols.component.scss     | 10 +-
 .../common/symbols/symbols.component.ts       |  1 -
 .../docker-templates.component.html           |  3 +-
 .../ios-templates.component.html              |  3 +-
 .../ios-templates/ios-templates.component.ts  |  2 +-
 .../iou-templates.component.html              |  3 +-
 .../preferences/preferences.component.html    | 48 +++------
 .../preferences/preferences.component.scss    | 57 +++++++++++
 .../qemu-vm-templates.component.html          |  3 +-
 .../virtual-box-templates.component.html      |  3 +-
 .../vmware-templates.component.html           |  3 +-
 .../vpcs-template-details.component.html      |  3 +-
 .../vpcs-template-details.component.ts        |  9 +-
 .../vpcs-templates.component.html             |  3 +-
 53 files changed, 395 insertions(+), 402 deletions(-)
 create mode 100644 src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html
 create mode 100644 src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss
 create mode 100644 src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.spec.ts
 create mode 100644 src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts
 create mode 100644 src/app/components/preferences/common/symbols-menu/symbols-menu.component.html
 create mode 100644 src/app/components/preferences/common/symbols-menu/symbols-menu.component.scss
 create mode 100644 src/app/components/preferences/common/symbols-menu/symbols-menu.component.spec.ts
 create mode 100644 src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6d66fb1a..f9c19cd3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -159,6 +159,8 @@ import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-
 import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
 import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
+import { EmptyTemplatesListComponent } from './components/preferences/common/empty-templates-list/empty-templates-list.component';
+import { SymbolsMenuComponent } from './components/preferences/common/symbols-menu/symbols-menu.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -257,7 +259,9 @@ if (environment.production) {
     CopyQemuVmTemplateComponent,
     CopyIosTemplateComponent,
     CopyIouTemplateComponent,
-    CopyDockerTemplateComponent
+    CopyDockerTemplateComponent,
+    EmptyTemplatesListComponent,
+    SymbolsMenuComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/preferences/built-in/built-in-preferences.component.html b/src/app/components/preferences/built-in/built-in-preferences.component.html
index 9ebc4f8b..df4cf45a 100644
--- a/src/app/components/preferences/built-in/built-in-preferences.component.html
+++ b/src/app/components/preferences/built-in/built-in-preferences.component.html
@@ -2,25 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Built-in preferences</h1>
+            <button class="top-button" class="cancel-button" routerLink="/server/{{serverId}}/preferences" mat-button>Back</button>
         </div>
     </div>
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
-                        Ethernet hubs
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
+                    Ethernet hubs
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
-                        Ethernet switches
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
+                    Ethernet switches
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
-                        Cloud nodes
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
+                    Cloud nodes
                 </mat-list-item>
             </mat-nav-list>
         </div>
diff --git a/src/app/components/preferences/built-in/built-in-preferences.component.ts b/src/app/components/preferences/built-in/built-in-preferences.component.ts
index 6dfc75f6..c4701b8c 100644
--- a/src/app/components/preferences/built-in/built-in-preferences.component.ts
+++ b/src/app/components/preferences/built-in/built-in-preferences.component.ts
@@ -1,13 +1,11 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ServerService } from '../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
 
 
 @Component({
     selector: 'app-built-in-preferences',
     templateUrl: './built-in-preferences.component.html',
-    styleUrls: ['./built-in-preferences.component.scss']
+    styleUrls: ['./built-in-preferences.component.scss', '../preferences.component.scss']
 })
 export class BuiltInPreferencesComponent implements OnInit {
     public serverId: string = "";
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
index 38a65cf4..8698837f 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
@@ -5,10 +5,15 @@
         </div>
     </div>
     <div class="default-content">
-        <mat-form-field class="row">
-            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
-        </mat-form-field>
+        <mat-card class="matCard">
+            <form [formGroup]="formGroup">
+                <mat-form-field class="form-field">
+                    <input formControlName="templateName" matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+                </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
             <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
         </div>
     </div>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.scss b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.scss
index 00630795..e69de29b 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.scss
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.scss
@@ -1,3 +0,0 @@
-.row {
-    width: 100%;
-}
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
index f66ed852..962a5cc2 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
@@ -7,16 +7,18 @@ import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
     selector: 'app-cloud-nodes-add-template',
     templateUrl: './cloud-nodes-add-template.component.html',
-    styleUrls: ['./cloud-nodes-add-template.component.scss']
+    styleUrls: ['./cloud-nodes-add-template.component.scss', '../../../preferences.component.scss']
 })
 export class CloudNodesAddTemplateComponent implements OnInit {
     server: Server;
     templateName: string = '';
+    formGroup: FormGroup;
     
     constructor(
         private route: ActivatedRoute,
@@ -24,8 +26,13 @@ export class CloudNodesAddTemplateComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private router: Router,
         private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService
-    ) {}
+        private templateMocksService: TemplateMocksService,
+        private formBuilder: FormBuilder
+    ) {
+        this.formGroup = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -34,8 +41,12 @@ export class CloudNodesAddTemplateComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+    }
+
     addTemplate() {
-        if (this.templateName) {
+        if (!this.formGroup.invalid) {
             let cloudTemplate: CloudTemplate;
 
             this.templateMocksService.getCloudNodeTemplate().subscribe((template: CloudTemplate) => {
@@ -46,7 +57,7 @@ export class CloudNodesAddTemplateComponent implements OnInit {
             cloudTemplate.name = this.templateName;
 
             this.builtInTemplatesService.addTemplate(this.server, cloudTemplate).subscribe((cloudNodeTemplate) => {
-                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+                this.goBack();
             });
         } else {
             this.toasterService.error(`Fill all required fields`);
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 5ae30912..f9aea8f0 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
@@ -12,26 +12,26 @@
                         General
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.name" 
                         placeholder="Template name">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.default_name_format" 
                         placeholder="Default name format">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.symbol" 
                         placeholder="Symbol">
                 </mat-form-field>
-                <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                <mat-form-field class="row">
+                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                <mat-form-field class="form-field">
                     <mat-select 
                         placeholder="Category" 
                         [(ngModel)]="cloudNodeTemplate.category">
@@ -49,19 +49,19 @@
                             </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.remote_console_host" 
                         placeholder="Console host">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.remote_console_port" 
                         placeholder="Console port">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.remote_console_http_path" 
@@ -74,8 +74,8 @@
                         Ethernet interfaces
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="row" *ngFor="let port of portsMappingEthernet">
-                    <div class="row">{{port.name}}</div><br/><br/>
+                <div class="form-field" *ngFor="let port of portsMappingEthernet">
+                    <div class="form-field">{{port.name}}</div><br/><br/>
                 </div>
                 <mat-form-field class="select">
                     <mat-select 
@@ -87,7 +87,7 @@
                             </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAddEthernetInterface()">Add</button> 
+                <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button> 
             </mat-expansion-panel>
             <mat-expansion-panel>
                 <mat-expansion-panel-header>
@@ -95,16 +95,16 @@
                         TAP interfaces
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="row" *ngFor="let port of portsMappingTap">
-                    <div class="row">{{port.name}}</div><br/><br/>
+                <div class="form-field" *ngFor="let port of portsMappingTap">
+                    <div class="form-field">{{port.name}}</div><br/><br/>
                 </div>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="tapInterface" 
                         placeholder="TAP interface">
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAddTapInterface()">Add</button> 
+                <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button> 
             </mat-expansion-panel>
             <mat-expansion-panel>
                 <mat-expansion-panel-header>
@@ -112,7 +112,7 @@
                         UDP tunnels
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <table class="table" mat-table [dataSource]="dataSourceUdp">
+                <table *ngIf="dataSourceUdp.length" 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>
@@ -135,47 +135,39 @@
                     
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                </table><br/>
-                <mat-form-field class="row">
+                </table>
+                <br *ngIf="dataSourceUdp.length"/>
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="newPort.name" 
                         placeholder="Name">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.lport" 
                         placeholder="Local port">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="newPort.rhost" 
                         placeholder="Remote host">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.rport" 
                         placeholder="Remote port">
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAddUdpInterface()">Add</button>
+                <button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
             </mat-expansion-panel>
         </mat-accordion>
         <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
-</div>
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && cloudNodeTemplate" [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
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 f5c95673..e69de29b 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
@@ -1,34 +0,0 @@
-.row {
-    width: 100%;
-    margin-left: 0px;
-}
-
-.select {
-    width: 100%;
-}
-
-th {
-    border: 0px!important;
-}
-
-th.mat-header-cell {
-    padding-bottom: 15px;
-}
-
-td.mat-cell {
-    padding-top: 15px;
-}
-
-.shadowed {
-    display: none;
-    transition: 0.25s;
-}
-
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.symbolSelectionButton {
-    width: 100%;
-}
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 4a69bf5a..7705c46b 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
@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
@@ -12,7 +12,7 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 @Component({
     selector: 'app-cloud-nodes-template-details',
     templateUrl: './cloud-nodes-template-details.component.html',
-    styleUrls: ['./cloud-nodes-template-details.component.scss']
+    styleUrls: ['./cloud-nodes-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class CloudNodesTemplateDetailsComponent implements OnInit {
     server: Server;
@@ -38,7 +38,8 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
         private serverService: ServerService,
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+        private router: Router
     ) {
         this.newPort = {
             name: '',
@@ -70,6 +71,10 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+    }
+
     getConfiguration() {
         this.categories = this.builtInTemplatesConfigurationService.getCategoriesForCloudNodes();
         this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
@@ -120,6 +125,7 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
     }
 
     symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
         this.cloudNodeTemplate.symbol = chosenSymbol;
     }
 }
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html
index 08726efd..bae3b664 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html
@@ -2,18 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Cloud nodes templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/cloud-nodes/addtemplate" mat-raised-button color="primary">Add cloud node template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="cloudNodesTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of cloudNodesTemplates'>
-                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                <div class="list-item" *ngFor='let template of cloudNodesTemplates'>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
                     <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
                         <mat-icon>delete</mat-icon>
                     </button>
-                </mat-list-item>
+                </div>
             </mat-nav-list>
         </div>
     </div>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss
index e6125a7a..e69de29b 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss
@@ -1,12 +0,0 @@
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.name {
-    width: 90%;
-}
-
-.delete-button {
-    width: 10%;
-}
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
index 6fe2e18a..870899f6 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
@@ -11,11 +10,11 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 @Component({
     selector: 'app-cloud-nodes-templates',
     templateUrl: './cloud-nodes-templates.component.html',
-    styleUrls: ['./cloud-nodes-templates.component.scss']
+    styleUrls: ['./cloud-nodes-templates.component.scss', '../../../preferences.component.scss']
 })
 export class CloudNodesTemplatesComponent implements OnInit {
     server: Server;
-    cloudNodesTemplates: CloudTemplate[];
+    cloudNodesTemplates: CloudTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
index fea86257..42448de0 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
@@ -5,13 +5,18 @@
         </div>
     </div>
     <div class="default-content">
-        <mat-form-field class="row">
-            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
-        </mat-form-field>
-        <mat-form-field class="row">
-            <input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
-        </mat-form-field>
+        <mat-card class="matCard">
+            <form [formGroup]="formGroup">
+                <mat-form-field class="form-field">
+                    <input formControlName="templateName" matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input formControlName="numberOfPorts" matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
+                </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
             <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
         </div>
     </div>
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.scss b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.scss
index 00630795..e69de29b 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.scss
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.scss
@@ -1,3 +0,0 @@
-.row {
-    width: 100%;
-}
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
index a7de1835..3bdc7eba 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
@@ -1,24 +1,25 @@
 import { Component, OnInit } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
     selector: 'app-ethernet-hubs-add-template',
     templateUrl: './ethernet-hubs-add-template.component.html',
-    styleUrls: ['./ethernet-hubs-add-template.component.scss']
+    styleUrls: ['./ethernet-hubs-add-template.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetHubsAddTemplateComponent implements OnInit {
     server: Server;
     numberOfPorts: number;
     templateName: string = '';
+    formGroup: FormGroup;
     
     constructor(
         private route: ActivatedRoute,
@@ -26,8 +27,14 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private router: Router,
         private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService
-    ) {}
+        private templateMocksService: TemplateMocksService,
+        private formBuilder: FormBuilder 
+    ) {
+        this.formGroup = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required),
+            numberOfPorts: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -36,8 +43,12 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+    }
+
     addTemplate() {
-        if (this.templateName && this.numberOfPorts) {
+        if (!this.formGroup.invalid) {
             let ethernetHubTemplate: EthernetHubTemplate;
 
             this.templateMocksService.getEthernetHubTemplate().subscribe((template: EthernetHubTemplate) => {
@@ -54,8 +65,8 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
                 });
             }
 
-            this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe((ethernetHubTemplate) => {
-                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+            this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe(() => {
+                this.goBack();
             });
         } else {
             this.toasterService.error(`Fill all required fields`);
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html
index 75e8e4c8..1a75e798 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html
@@ -5,60 +5,53 @@
         </div>
     </div>
     <div class="default-content" *ngIf="ethernetHubTemplate">
-        <form [formGroup]="inputForm">
-            <mat-form-field class="row">
-                <input 
-                    matInput type="text" 
-                    [(ngModel)]="ethernetHubTemplate.name" 
-                    formControlName="templateName"
-                    placeholder="Template name">
-            </mat-form-field>
-            <mat-form-field class="row">
-                <input 
-                    matInput type="text" 
-                    [(ngModel)]="ethernetHubTemplate.default_name_format" 
-                    formControlName="defaultName"
-                    placeholder="Default name format">
-            </mat-form-field>
-            <mat-form-field class="row">
-                <input 
-                    matInput type="text" 
-                    [(ngModel)]="ethernetHubTemplate.symbol" 
-                    formControlName="symbol"
-                    placeholder="Symbol">
-            </mat-form-field>
-            <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-            <mat-form-field class="row">
-                <mat-select 
-                    placeholder="Category" 
-                    [ngModelOptions]="{standalone: true}" 
-                    [(ngModel)]="ethernetHubTemplate.category">
-                    <mat-option *ngFor="let category of categories" [value]="category[1]">
-                        {{category[0]}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field class="row">
-                <input 
-                    matInput type="number" 
-                    [(ngModel)]="numberOfPorts" 
-                    [ngModelOptions]="{standalone: true}"
-                    placeholder="Number of ports">
-            </mat-form-field>
-        </form>
+        <mat-card>
+            <form [formGroup]="inputForm">
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="ethernetHubTemplate.name" 
+                        formControlName="templateName"
+                        placeholder="Template name">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="ethernetHubTemplate.default_name_format" 
+                        formControlName="defaultName"
+                        placeholder="Default name format">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="ethernetHubTemplate.symbol" 
+                        formControlName="symbol"
+                        placeholder="Symbol">
+                </mat-form-field>
+                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                <mat-form-field class="form-field">
+                    <mat-select 
+                        placeholder="Category" 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="ethernetHubTemplate.category">
+                        <mat-option *ngFor="let category of categories" [value]="category[1]">
+                            {{category[0]}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="numberOfPorts" 
+                        [ngModelOptions]="{standalone: true}"
+                        placeholder="Number of ports">
+                </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
-</div>
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetHubTemplate" [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.scss b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.scss
index c5dd4e33..e69de29b 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.scss
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.scss
@@ -1,22 +0,0 @@
-.row {
-    width: 100%;
-    margin-left: 0px;
-}
-
-.select {
-    width: 100%;
-}
-
-.shadowed {
-    display: none;
-    transition: 0.25s;
-}
-
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.symbolSelectionButton {
-    width: 100%;
-}
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
index 2d2bc595..cf30ac85 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
@@ -12,14 +12,13 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 @Component({
     selector: 'app-ethernet-hubs-template-details',
     templateUrl: './ethernet-hubs-template-details.component.html',
-    styleUrls: ['./ethernet-hubs-template-details.component.scss']
+    styleUrls: ['./ethernet-hubs-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetHubsTemplateDetailsComponent implements OnInit {
     server: Server;
     ethernetHubTemplate: EthernetHubTemplate;
     numberOfPorts: number;
     inputForm: FormGroup;
-
     isSymbolSelectionOpened: boolean = false;
 
     categories = [];
@@ -30,7 +29,8 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
         private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+        private router: Router
     ) {
         this.inputForm = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
@@ -53,6 +53,10 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+    }
+
     onSave() {
         if (this.inputForm.invalid || ! this.numberOfPorts) {
             this.toasterService.error(`Fill all required fields`);
@@ -76,6 +80,7 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
     }
 
     symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
         this.ethernetHubTemplate.symbol = chosenSymbol;
     }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html
index 31ca7ee2..89c9a66c 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html
@@ -2,18 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Ethernet hubs templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-hubs/addtemplate" mat-raised-button color="primary">Add Ethernet hub template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="ethernetHubsTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of ethernetHubsTemplates'>
-                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                <div class="list-item" *ngFor='let template of ethernetHubsTemplates'>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
                     <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
                         <mat-icon>delete</mat-icon>
                     </button>
-                </mat-list-item>
+                </div>
             </mat-nav-list>
         </div>
     </div>
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.scss b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.scss
index e6125a7a..e69de29b 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.scss
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.scss
@@ -1,12 +0,0 @@
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.name {
-    width: 90%;
-}
-
-.delete-button {
-    width: 10%;
-}
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
index 973f6646..35f85846 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
@@ -11,11 +10,11 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 @Component({
     selector: 'app-ethernet-hubs-templates',
     templateUrl: './ethernet-hubs-templates.component.html',
-    styleUrls: ['./ethernet-hubs-templates.component.scss']
+    styleUrls: ['./ethernet-hubs-templates.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetHubsTemplatesComponent implements OnInit {
     server: Server;
-    ethernetHubsTemplates: EthernetHubTemplate[];
+    ethernetHubsTemplates: EthernetHubTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
index a2e3dd28..c76fc116 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
@@ -5,13 +5,15 @@
         </div>
     </div>
     <div class="default-content">
-        <mat-form-field class="row">
-            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
-        </mat-form-field>
-        <mat-form-field class="row">
-            <input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
-        </mat-form-field>
+        <mat-card class="matCard">
+            <form [formGroup]="formGroup">
+                <mat-form-field class="form-field">
+                    <input formControlName="templateName" matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+                </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
             <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
         </div>
     </div>
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.scss b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.scss
index 00630795..e69de29b 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.scss
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.scss
@@ -1,3 +0,0 @@
-.row {
-    width: 100%;
-}
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
index 7e3bffd9..f5126369 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
@@ -1,24 +1,25 @@
 import { Component, OnInit } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
     selector: 'app-ethernet-switches-add-template',
     templateUrl: './ethernet-switches-add-template.component.html',
-    styleUrls: ['./ethernet-switches-add-template.component.scss']
+    styleUrls: ['./ethernet-switches-add-template.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesAddTemplateComponent implements OnInit {
     server: Server;
     numberOfPorts: number;
     templateName: string = '';
+    formGroup: FormGroup;
     
     constructor(
         private route: ActivatedRoute,
@@ -26,8 +27,14 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private router: Router,
         private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService
-    ) {}
+        private templateMocksService: TemplateMocksService,
+        private formBuilder: FormBuilder
+    ) {
+        this.formGroup = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required),
+            numberOfPorts: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -36,6 +43,10 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+    }
+
     addTemplate() {
         if (this.templateName && this.numberOfPorts) {
             let ethernetSwitchTemplate: EthernetSwitchTemplate;
@@ -58,7 +69,7 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
             }
 
             this.builtInTemplatesService.addTemplate(this.server, ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate) => {
-                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+                this.goBack();
             });
         } else {
             this.toasterService.error(`Fill all required fields`);
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
index d9441068..0a794acf 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
@@ -13,29 +13,29 @@
                     </mat-panel-title>
                 </mat-expansion-panel-header>
                 <form [formGroup]="inputForm">
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <input 
                             matInput type="text" 
                             [(ngModel)]="ethernetSwitchTemplate.name" 
                             formControlName="templateName"
                             placeholder="Template name">
                     </mat-form-field>
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <input 
                             matInput type="text" 
                             [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
                             formControlName="defaultName"
                             placeholder="Default name format">
                     </mat-form-field>
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <input 
                             matInput type="text" 
                             [(ngModel)]="ethernetSwitchTemplate.symbol" 
                             formControlName="symbol"
                             placeholder="Symbol">
                     </mat-form-field>
-                    <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="row">
+                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                    <mat-form-field class="form-field">
                         <mat-select 
                             placeholder="Category" 
                             [ngModelOptions]="{standalone: true}" 
@@ -87,13 +87,13 @@
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table><br/>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.port_number" 
                         placeholder="Port">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.vlan" 
@@ -119,22 +119,13 @@
                             </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAdd()">Add</button>
+                <button mat-button class="form-field" (click)="onAdd()">Add</button>
             </mat-expansion-panel>
         </mat-accordion>
         <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
-</div>
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetSwitchTemplate" [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.scss b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.scss
index 4bb47d4c..e69de29b 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.scss
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.scss
@@ -1,34 +0,0 @@
-.row {
-    width: 100%;
-    margin-left: 0px;
-}
-
-.select {
-    width: 100%;
-}
-
-.shadowed {
-    display: none;
-    transition: 0.25s;
-}
-
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.symbolSelectionButton {
-    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/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 6ef861ff..f3a33a97 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
@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
@@ -13,7 +13,7 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 @Component({
     selector: 'app-ethernet-switches-template-details',
     templateUrl: './ethernet-switches-template-details.component.html',
-    styleUrls: ['./ethernet-switches-template-details.component.scss']
+    styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     server: Server;
@@ -37,7 +37,8 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
         private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+        private router: Router
     ){
         this.inputForm = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
@@ -83,6 +84,10 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
         };
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+    }
+
     onSave() {
         if (this.inputForm.invalid) {
             this.toasterService.error(`Fill all required fields`);
@@ -98,6 +103,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     }
 
     symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
         this.ethernetSwitchTemplate.symbol = chosenSymbol;
     }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html
index a91689a8..8b52fd57 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html
@@ -2,18 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Ethernet switches templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-switches/addtemplate" mat-raised-button color="primary">Add Ethernet switch template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="ethernetSwitchesTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of ethernetSwitchesTemplates'>
-                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                <div class="list-item" *ngFor='let template of ethernetSwitchesTemplates'>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
                     <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
                         <mat-icon>delete</mat-icon>
                     </button>
-                </mat-list-item>
+                </div>
             </mat-nav-list>
         </div>
     </div>
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss
index e6125a7a..e69de29b 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss
@@ -1,12 +0,0 @@
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.name {
-    width: 90%;
-}
-
-.delete-button {
-    width: 10%;
-}
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
index 7d9c605a..985aa4aa 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
@@ -11,11 +10,11 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 @Component({
     selector: 'app-ethernet-switches-templates',
     templateUrl: './ethernet-switches-templates.component.html',
-    styleUrls: ['./ethernet-switches-templates.component.scss']
+    styleUrls: ['./ethernet-switches-templates.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesTemplatesComponent implements OnInit {
     server: Server;
-    ethernetSwitchesTemplates: EthernetSwitchTemplate[];
+    ethernetSwitchesTemplates: EthernetSwitchTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html
new file mode 100644
index 00000000..c7ca2df8
--- /dev/null
+++ b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html
@@ -0,0 +1,3 @@
+<h6 class="header">
+    {{emptyTemplatesListMessage}}
+</h6>
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss
new file mode 100644
index 00000000..96fef383
--- /dev/null
+++ b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss
@@ -0,0 +1,3 @@
+.header {
+    text-align: center;
+}
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.spec.ts b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts
new file mode 100644
index 00000000..b6cac8c4
--- /dev/null
+++ b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+    selector: 'app-empty-templates-list',
+    templateUrl: './empty-templates-list.component.html',
+    styleUrls: ['./empty-templates-list.component.scss']
+})
+export class EmptyTemplatesListComponent {
+    emptyTemplatesListMessage: string = 'Empty templates list';
+}
diff --git a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html
new file mode 100644
index 00000000..4bd37758
--- /dev/null
+++ b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html
@@ -0,0 +1,12 @@
+<div class="content" class="configurator">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Symbol selection</h1>
+            <button class="top-button" class="cancel-button" (click)="cancelChooseSymbol()" mat-button>Cancel</button>
+            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Choose symbol</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>
diff --git a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.scss b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.spec.ts b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts
new file mode 100644
index 00000000..0b01fc92
--- /dev/null
+++ b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Server } from '../../../../models/server';
+
+
+@Component({
+    selector: 'app-symbols-menu',
+    templateUrl: './symbols-menu.component.html',
+    styleUrls: ['./symbols-menu.component.scss', '../../preferences.component.scss']
+})
+export class SymbolsMenuComponent {
+    @Input() server: Server;
+    @Input() symbol: string;
+    @Output() symbolChangedEmitter = new EventEmitter<string>();
+    
+    chosenSymbol: string = '';
+
+    symbolChanged(chosenSymbol: string) {
+        this.chosenSymbol = chosenSymbol;
+    }
+
+    chooseSymbol() {
+        this.symbolChangedEmitter.emit(this.chosenSymbol);
+    }
+
+    cancelChooseSymbol() {
+        this.symbolChangedEmitter.emit(this.symbol);
+    }
+}
diff --git a/src/app/components/preferences/common/symbols/symbols.component.html b/src/app/components/preferences/common/symbols/symbols.component.html
index d89d9e3c..3eb0f2cb 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.html
+++ b/src/app/components/preferences/common/symbols/symbols.component.html
@@ -1,31 +1,9 @@
-<!-- <mat-selection-list *ngIf="symbols">
-    <mat-radio-group class="option">
-        <mat-radio-button *ngFor="let symbol of symbols" value="symbol.symbol_id" class="radio-button" (click)="set(symbol.symbol_id)">
-            <img src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </mat-radio-button>
-    </mat-radio-group>
-</mat-selection-list> -->
-
-<!-- <div class="grid-container" *ngIf="symbols">
-    <div class="button" *ngFor="let symbol of symbols">
-        <button (click)="set(symbol.symbol_id)">
-            <img src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </button>
+<mat-card>
+    <div class="wrapper">
+        <div class="buttonWrapper" *ngFor="let symbol of symbols">
+            <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
+                <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
+            </button>
+        </div>
     </div>
-</div> -->
-
-<!-- <mat-grid-list cols="5" rowHeight="1:1">
-    <div class="button" *ngFor="let symbol of symbols">
-        <button (click)="set(symbol.symbol_id)">
-            <img src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </button>
-    </div>
-</mat-grid-list> -->
-
-<div class="wrapper">
-    <div class="buttonWrapper" *ngFor="let symbol of symbols">
-        <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
-            <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </button>
-    </div>
-</div>
+</mat-card>
diff --git a/src/app/components/preferences/common/symbols/symbols.component.scss b/src/app/components/preferences/common/symbols/symbols.component.scss
index 72e59703..432de757 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.scss
+++ b/src/app/components/preferences/common/symbols/symbols.component.scss
@@ -17,22 +17,22 @@
 .buttonSelected {
     border-width: 3px;
     border-color: #0097a7;
+    width: 77px;
 }
 
 .image {
-    width: 75px;
-    height: 75px;   
+    width: 65px;
+    height: 65px;   
 }
 
 .imageSelected {
-    width: 105px;
-    height: 105px;   
+    margin-left: -3px;
 }
 
 .wrapper {
     display: grid;
     grid-template-rows: auto;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(7, 1fr);
     grid-row-gap: 3em;
     grid-column-gap: 1em;
 }
diff --git a/src/app/components/preferences/common/symbols/symbols.component.ts b/src/app/components/preferences/common/symbols/symbols.component.ts
index 6f4811cd..c9ea926c 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.ts
+++ b/src/app/components/preferences/common/symbols/symbols.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
 import { SymbolService } from '../../../../services/symbol.service';
 import { Server } from '../../../../models/server';
-import { ActivatedRoute } from '@angular/router';
 import { Symbol } from '../../../../models/symbol';
 
 
diff --git a/src/app/components/preferences/docker/docker-templates/docker-templates.component.html b/src/app/components/preferences/docker/docker-templates/docker-templates.component.html
index de7e3506..3d2b2a88 100644
--- a/src/app/components/preferences/docker/docker-templates/docker-templates.component.html
+++ b/src/app/components/preferences/docker/docker-templates/docker-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/docker/addtemplate" mat-raised-button color="primary">Add Docker container template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!dockerTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="dockerTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of dockerTemplates'>
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
index 38eb0005..469cb57f 100644
--- a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/templates/addtemplate" mat-raised-button color="primary">Add IOS router template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!iosTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="iosTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of iosTemplates'>
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
index b66285f2..ce785331 100644
--- a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
@@ -16,7 +16,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 })
 export class IosTemplatesComponent implements OnInit {
     server: Server;
-    iosTemplates: IosTemplate[];
+    iosTemplates: IosTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
diff --git a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
index 9654e842..c065be30 100644
--- a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
+++ b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/iou/addtemplate" mat-raised-button color="primary">Add IOU device template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!iouTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="iouTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of iouTemplates'>
diff --git a/src/app/components/preferences/preferences.component.html b/src/app/components/preferences/preferences.component.html
index 93e35a0c..f3b99334 100644
--- a/src/app/components/preferences/preferences.component.html
+++ b/src/app/components/preferences/preferences.component.html
@@ -7,45 +7,29 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin">
-                        Built-in
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin">
+                    Built-in
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/dynamips/templates">
-                        Dynamips
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/dynamips/templates">
+                    Dynamips
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/iou/templates">
-                        IOS on Unix
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/iou/templates">
+                    IOS on Unix
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
-                        VPCS
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/vpcs/templates">
+                    VPCS
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/qemu/templates">
-                        QEMU
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/qemu/templates">
+                    QEMU
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/virtualbox/templates">
-                        VirtualBox
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/virtualbox/templates">
+                    VirtualBox
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/vmware/templates">
-                        VMware
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/vmware/templates">
+                    VMware
                 </mat-list-item>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/docker/templates">
-                        Docker
-                    </button>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/docker/templates">
+                    Docker
                 </mat-list-item>
             </mat-nav-list>
         </div>
diff --git a/src/app/components/preferences/preferences.component.scss b/src/app/components/preferences/preferences.component.scss
index e69de29b..48286ae5 100644
--- a/src/app/components/preferences/preferences.component.scss
+++ b/src/app/components/preferences/preferences.component.scss
@@ -0,0 +1,57 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.choose-symbol-button {
+    height: 36px;
+    margin-top: 22px;
+}
+
+.cancel-button {
+    height: 36px;
+    margin-top: 22px;
+    margin-right: 10px;
+}
+
+.form-field {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
+.shadowed {
+    display: none;
+    transition: 0.25s;
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
+
+.list-item {
+    display: flex;
+}
+
+.template-name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+    outline: none;
+}
+
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}
diff --git a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html
index db62a42e..e3ed16dc 100644
--- a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html
+++ b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/addtemplate" mat-raised-button color="primary">Add QEMU VM template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!qemuTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="qemuTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of qemuTemplates'>
diff --git a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html
index 5531e1a6..0607f12c 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html
+++ b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/virtualbox/addtemplate" mat-raised-button color="primary">Add Virtual Box VM template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!virtualBoxTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="virtualBoxTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of virtualBoxTemplates'>
diff --git a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
index 3247a12f..e41f5d98 100644
--- a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
+++ b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/vmware/addtemplate" mat-raised-button color="primary">Add VMware template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!vmwareTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="vmwareTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of vmwareTemplates'>
diff --git a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
index 23a2ed6f..08009d7e 100644
--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
@@ -71,7 +71,8 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
+            <button class="top-button" class="cancel-button" (click)="cancelChooseSymbol()" mat-raised-button color="primary">Cancel</button>
+            <button class="top-button" class="choose-symbol-button" (click)="chooseSymbol()" mat-raised-button color="primary">Choose symbol</button>
         </div>
     </div>
     <div class="default-content">
diff --git a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
index 24409586..281d1b3b 100644
--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
@@ -12,7 +12,7 @@ import { VpcsConfigurationService } from '../../../../services/vpcs-configuratio
 @Component({
     selector: 'app-vpcs-template-details',
     templateUrl: './vpcs-template-details.component.html',
-    styleUrls: ['./vpcs-template-details.component.scss']
+    styleUrls: ['./vpcs-template-details.component.scss','../../preferences.component.scss']
 })
 export class VpcsTemplateDetailsComponent implements OnInit {
     server: Server;
@@ -20,6 +20,7 @@ export class VpcsTemplateDetailsComponent implements OnInit {
     inputForm: FormGroup;
 
     isSymbolSelectionOpened: boolean = false;
+    copyOfSymbol: string;
 
     consoleTypes: string[] = [];
     categories = [];
@@ -69,9 +70,15 @@ export class VpcsTemplateDetailsComponent implements OnInit {
     }
 
     chooseSymbol() {
+        this.copyOfSymbol = this.vpcsTemplate.symbol;
         this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
     }
 
+    cancelChooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+        this.vpcsTemplate.symbol = this.copyOfSymbol;
+    }
+
     symbolChanged(chosenSymbol: string) {
         this.vpcsTemplate.symbol = chosenSymbol;
     }
diff --git a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
index da9da0c4..dfb847a4 100644
--- a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
+++ b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/vpcs/addtemplate" mat-raised-button color="primary">Add VPCS template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!vpcsTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="vpcsTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of vpcsTemplates'>