diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0ad4f1f3..b0eebb3b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -31,6 +31,8 @@ import { CloudNodesTemplateDetailsComponent } from './components/preferences/bui
 import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
 import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
 import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
+import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
+import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
 
 const routes: Routes = [
   {
@@ -58,6 +60,11 @@ const routes: Routes = [
       { path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent },
       { path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id', component: CloudNodesTemplateDetailsComponent },
 
+      //{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent },
+      { path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
+      { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: IosTemplatesComponent },
+      { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplatesComponent },
+
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
       { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bf2d309e..bfad6e47 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -119,6 +119,10 @@ import { CloudNodesTemplateDetailsComponent } from './components/preferences/bui
 import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
 import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
 import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
+import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
+import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
+import { IosService } from './services/ios.service';
+import { SymbolsComponent } from './components/preferences/common/symbols/symbols.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -194,7 +198,10 @@ if (environment.production) {
     CloudNodesTemplateDetailsComponent,
     EthernetSwitchesTemplatesComponent,
     EthernetSwitchesAddTemplateComponent,
-    EthernetSwitchesTemplateDetailsComponent
+    EthernetSwitchesTemplateDetailsComponent,
+    DynamipsPreferencesComponent,
+    IosTemplatesComponent,
+    SymbolsComponent
   ],
   imports: [
     BrowserModule,
@@ -246,7 +253,8 @@ if (environment.production) {
     VpcsService,
     TemplateMocksService,
     VirtualBoxService,
-    BuiltInTemplatesService
+    BuiltInTemplatesService,
+    IosService
   ],
   entryComponents: [
     AddServerDialogComponent,
@@ -257,7 +265,8 @@ if (environment.production) {
     ImportProjectDialogComponent,
     ConfirmationDialogComponent,
     StyleEditorDialogComponent,
-    TextEditorDialogComponent
+    TextEditorDialogComponent,
+    SymbolsComponent
   ],
   bootstrap: [AppComponent]
 })
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 4a35095d..667423a7 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
@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
     <div class="default-header">
         <div class="row">
             <h1 class="col">Cloud configuration</h1>
@@ -30,6 +30,7 @@
                         [(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">
                     <mat-select 
                         placeholder="Category" 
@@ -167,3 +168,14 @@
         </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>
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 504a43bd..f5c95673 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
@@ -18,3 +18,17 @@ th.mat-header-cell {
 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 4dc5cc10..f6e3537e 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
@@ -17,6 +17,8 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
     server: Server;
     cloudNodeTemplate: CloudTemplate;
 
+    isSymbolSelectionOpened: boolean = false;
+
     categories = [["Default", "guest"],
                     ["Routers", "router"],
                     ["Switches", "switch"],
@@ -108,4 +110,12 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
             this.toasterService.success("Changes saved");
         });
     }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.cloudNodeTemplate.symbol = chosenSymbol;
+    }
 }
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 59791272..75e8e4c8 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
@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
     <div class="default-header">
         <div class="row">
             <h1 class="col">Ethernet hub settings</h1>
@@ -27,6 +27,7 @@
                     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" 
@@ -50,3 +51,14 @@
         </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>
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 ceb5950c..c5dd4e33 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
@@ -6,3 +6,17 @@
 .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 7c82172e..dfb7f06d 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
@@ -19,6 +19,8 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
     numberOfPorts: number;
     inputForm: FormGroup;
 
+    isSymbolSelectionOpened: boolean = false;
+
     categories = [["Default", "guest"],
                     ["Routers", "router"],
                     ["Switches", "switch"],
@@ -69,4 +71,12 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
             });
         }
     }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.ethernetHubTemplate.symbol = chosenSymbol;
+    }
 }
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 fde4c5d3..d9441068 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
@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
     <div class="default-header">
         <div class="row">
             <h1 class="col">Ethernet switch configuration</h1>
@@ -34,6 +34,7 @@
                             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" 
@@ -126,3 +127,14 @@
         </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>
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 504a43bd..4bb47d4c 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
@@ -7,6 +7,20 @@
     width: 100%;
 }
 
+.shadowed {
+    display: none;
+    transition: 0.25s;
+}
+
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
+
 th {
     border: 0px!important;
 }
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 b686fa87..67e09945 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
@@ -22,6 +22,8 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     dataSource: PortsMappingEntity[] = [];
     newPort: PortsMappingEntity;
 
+    isSymbolSelectionOpened: boolean = false;
+
     categories = [["Default", "guest"],
                     ["Routers", "router"],
                     ["Switches", "switch"],
@@ -84,4 +86,12 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
             });
         }
     }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.ethernetSwitchTemplate.symbol = chosenSymbol;
+    }
 }
diff --git a/src/app/components/preferences/common/symbols/symbols.component.html b/src/app/components/preferences/common/symbols/symbols.component.html
new file mode 100644
index 00000000..d89d9e3c
--- /dev/null
+++ b/src/app/components/preferences/common/symbols/symbols.component.html
@@ -0,0 +1,31 @@
+<!-- <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>
+    </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>
diff --git a/src/app/components/preferences/common/symbols/symbols.component.scss b/src/app/components/preferences/common/symbols/symbols.component.scss
new file mode 100644
index 00000000..72e59703
--- /dev/null
+++ b/src/app/components/preferences/common/symbols/symbols.component.scss
@@ -0,0 +1,38 @@
+.buttonWrapper {
+    width: 85px;
+    height: 85px;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    outline: none;
+}
+
+.button {
+    background: border-box;
+    border-width: 0px;
+    outline: none;
+}
+
+.buttonSelected {
+    border-width: 3px;
+    border-color: #0097a7;
+}
+
+.image {
+    width: 75px;
+    height: 75px;   
+}
+
+.imageSelected {
+    width: 105px;
+    height: 105px;   
+}
+
+.wrapper {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(5, 1fr);
+    grid-row-gap: 3em;
+    grid-column-gap: 1em;
+}
diff --git a/src/app/components/preferences/common/symbols/symbols.component.spec.ts b/src/app/components/preferences/common/symbols/symbols.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/common/symbols/symbols.component.ts b/src/app/components/preferences/common/symbols/symbols.component.ts
new file mode 100644
index 00000000..3ba0c302
--- /dev/null
+++ b/src/app/components/preferences/common/symbols/symbols.component.ts
@@ -0,0 +1,38 @@
+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';
+
+
+@Component({
+    selector: 'app-symbols',
+    templateUrl: './symbols.component.html',
+    styleUrls: ['./symbols.component.scss']
+})
+export class SymbolsComponent implements OnInit {
+    @Input() server: Server;
+    @Input() symbol: string;
+    @Output() symbolChanged = new EventEmitter<string>();
+    
+    symbols: Symbol[] = [];
+    isSelected: string = '';
+
+    constructor(
+        private route: ActivatedRoute,
+        private symbolService: SymbolService
+    ) {}
+
+    ngOnInit() {
+        this.isSelected = this.symbol;
+
+        this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
+            this.symbols = symbols;
+        });
+    }
+
+    setSelected(symbol_id: string) {
+        this.isSelected = symbol_id;
+        this.symbolChanged.emit(this.isSelected);
+    }
+}
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html
new file mode 100644
index 00000000..2864366e
--- /dev/null
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html
@@ -0,0 +1,12 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Dynamips preferences</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="dynamipsPath" placeholder="Path to Dynamips"/>
+        </mat-form-field>
+    </div>
+</div>
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss
new file mode 100644
index 00000000..93342be4
--- /dev/null
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss
@@ -0,0 +1,8 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.form-field {
+    width: 100%;
+}
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts
new file mode 100644
index 00000000..8efac89d
--- /dev/null
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from "@angular/core";
+import { ServerSettingsService } from '../../../../services/server-settings.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Server } from '../../../../models/server';
+import { switchMap } from 'rxjs/operators';
+import { ServerService } from '../../../../services/server.service';
+
+
+@Component({
+    selector: 'app-dynamips-preferences',
+    templateUrl: './dynamips-preferences.component.html',
+    styleUrls: ['./dynamips-preferences.component.scss']
+})
+export class DynamipsPreferencesComponent implements OnInit {
+    server: Server;
+    dynamipsPath: string;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private serverSettingsService: ServerSettingsService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+        });
+    }
+}
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
new file mode 100644
index 00000000..5c65a2b3
--- /dev/null
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
@@ -0,0 +1,17 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">IOS routers templates</h1>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/addtemplate" mat-raised-button color="primary">Add IOS router template</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-nav-list *ngIf="server">
+                <mat-list-item *ngFor='let template of iosTemplates' routerLink="{{template.template_id}}">
+                    {{template.name}}
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss
new file mode 100644
index 00000000..98f47574
--- /dev/null
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss
@@ -0,0 +1,4 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts
new file mode 100644
index 00000000..e69de29b
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
new file mode 100644
index 00000000..16ba6b98
--- /dev/null
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { IosService } from '../../../../services/ios.service';
+import { IosTemplate } from '../../../../models/templates/ios-template';
+
+
+@Component({
+    selector: 'app-ios-templates',
+    templateUrl: './ios-templates.component.html',
+    styleUrls: ['./ios-templates.component.scss']
+})
+export class IosTemplatesComponent implements OnInit {
+    server: Server;
+    iosTemplates: IosTemplate[];
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iosService: IosService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+
+            this.iosService.getTemplates(this.server).subscribe((templates: IosTemplate[]) => {
+                this.iosTemplates = templates.filter((elem) => elem.template_type === 'dynamips');
+            });
+        });
+    }
+}
diff --git a/src/app/components/preferences/preferences.component.html b/src/app/components/preferences/preferences.component.html
index f82f1a58..ac5f2142 100644
--- a/src/app/components/preferences/preferences.component.html
+++ b/src/app/components/preferences/preferences.component.html
@@ -12,6 +12,11 @@
                         Built-in
                     </button>
                 </mat-list-item>
+                <mat-list-item>
+                    <button mat-button routerLink="/server/{{serverId}}/preferences/dynamips/templates">
+                        Dynamips
+                    </button>
+                </mat-list-item>
                 <mat-list-item>
                     <button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
                         VPCS
diff --git a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
index b0cdc968..a508084a 100644
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
@@ -1,4 +1,4 @@
-<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened }" [ngClass]="{ nonshadowed: !isConfiguratorOpened }">
+<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened}">
     <div class="default-header">
         <div class="row">
             <h1 class="col">QEMU VM configuration</h1>
@@ -21,6 +21,7 @@
                 <mat-form-field class="row">
                     <input matInput type="text" [(ngModel)]="qemuTemplate.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" [(ngModel)]="qemuTemplate.category">
                         <mat-option *ngFor="let category of categories" [value]="category[1]">
@@ -359,3 +360,14 @@
         </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]="qemuTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>
diff --git a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.scss b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.scss
index 309c2d15..89cba97a 100644
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.scss
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.scss
@@ -36,6 +36,15 @@
     transition: 0.25s;
 }
 
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
+
 .nonshadowed {
     opacity: 0;
     transition: 0.25s;
diff --git a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
index eef1e917..878cfafa 100644
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
@@ -18,6 +18,8 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
     server: Server;
     qemuTemplate: QemuTemplate;
 
+    isSymbolSelectionOpened: boolean = false;
+
     consoleTypes: string[] = ['telnet', 'vnc', 'spice', 'spice+agent', 'none'];
     diskInterfaces: string[] = ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'none'];
     networkTypes = [["e1000", "Intel Gigabit Ethernet"],
@@ -129,4 +131,12 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
             this.toasterService.success("Changes saved");
         });
     }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.qemuTemplate.symbol = chosenSymbol;
+    }
 }
diff --git a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
index 55ffc604..2a7d65c2 100644
--- a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
+++ b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { VirtualBoxService } from '../../../../services/virtual-box.service';
-import { VirtualBoxVm } from '../../../../models/virtualbox/virtualboxVm';
+import { VirtualBoxVm } from '../../../../models/virtualBox/virtual-box-vm';
 import { ToasterService } from '../../../../services/toaster.service';
 import { TemplateMocksService } from '../../../../services/template-mocks.service';
 import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
diff --git a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
index 4a187a13..aa0039b3 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
@@ -1,4 +1,4 @@
-<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened }" [ngClass]="{ nonshadowed: !isConfiguratorOpened }">
+<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
     <div class="default-header">
         <div class="row">
             <h1 class="col">VirtualBox VM configuration</h1>
@@ -21,6 +21,7 @@
                 <mat-form-field class="row">
                     <input matInput type="text" [(ngModel)]="virtualBoxTemplate.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" [(ngModel)]="virtualBoxTemplate.category">
                         <mat-option *ngFor="let category of categories" [value]="category[1]">
@@ -138,3 +139,14 @@
         </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]="virtualBoxTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>
diff --git a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.scss b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.scss
index 0dabbd11..88579891 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.scss
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.scss
@@ -23,6 +23,15 @@
     transition: 0.25s;
 }
 
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
+
 .nonshadowed {
     opacity: 0;
     transition: 0.25s;
diff --git a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
index 2b0945e8..389e1a95 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
@@ -18,6 +18,8 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
     server: Server;
     virtualBoxTemplate: VirtualBoxTemplate;
 
+    isSymbolSelectionOpened: boolean = false;
+
     consoleTypes: string[] = ['telnet', 'none'];
     onCloseOptions = [["Power off the VM", "power_off"], 
                     ["Send the shutdown signal (ACPI)", "shutdown_signal"], 
@@ -79,4 +81,12 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
             this.toasterService.success("Changes saved");
         });
     }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.virtualBoxTemplate.symbol = chosenSymbol;
+    }
 }
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 0e30852c..23a2ed6f 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
@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
     <div class="default-header">
         <div class="row">
             <h1 class="col">VPCS device configuration</h1>
@@ -34,6 +34,7 @@
                     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" 
@@ -65,3 +66,15 @@
         </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]="vpcsTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>
diff --git a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.scss b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.scss
index ceb5950c..c20e763d 100644
--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.scss
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.scss
@@ -6,3 +6,17 @@
 .select {
     width: 100%;
 }
+
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.shadowed {
+    display: none;
+    transition: 0.25s;
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
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 7564eab1..3367c8b7 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
@@ -18,6 +18,8 @@ export class VpcsTemplateDetailsComponent implements OnInit {
     vpcsTemplate: VpcsTemplate;
     inputForm: FormGroup;
 
+    isSymbolSelectionOpened: boolean = false;
+
     consoleTypes: string[] = ['telnet', 'none'];
     categories = [["Default", "guest"],
                     ["Routers", "routers"],
@@ -61,4 +63,12 @@ export class VpcsTemplateDetailsComponent implements OnInit {
             });
         }
     }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.vpcsTemplate.symbol = chosenSymbol;
+    }
 }
diff --git a/src/app/material.imports.ts b/src/app/material.imports.ts
index fa54ce85..9dc2260b 100644
--- a/src/app/material.imports.ts
+++ b/src/app/material.imports.ts
@@ -18,7 +18,8 @@ import {
   MatSelectModule,
   MatTooltipModule,
   MatStepperModule,
-  MatRadioModule
+  MatRadioModule,
+  MatGridListModule
 } from '@angular/material';
 
 export const MATERIAL_IMPORTS = [
@@ -41,5 +42,6 @@ export const MATERIAL_IMPORTS = [
   MatSelectModule,
   MatTooltipModule,
   MatStepperModule,
-  MatRadioModule
+  MatRadioModule,
+  MatGridListModule
 ];
diff --git a/src/app/models/symbol.ts b/src/app/models/symbol.ts
index df17351e..a08d1693 100644
--- a/src/app/models/symbol.ts
+++ b/src/app/models/symbol.ts
@@ -1,6 +1,6 @@
 export class Symbol {
-  builtin: boolean;
-  filename: string;
-  symbol_id: string;
-  raw: string;
+    builtin: boolean;
+    filename: string;
+    symbol_id: string;
+    raw: string;
 }
diff --git a/src/app/models/templates/ios-template.ts b/src/app/models/templates/ios-template.ts
new file mode 100644
index 00000000..2c5d1e57
--- /dev/null
+++ b/src/app/models/templates/ios-template.ts
@@ -0,0 +1,35 @@
+export interface IosTemplate {
+    auto_delete_disks: boolean;
+    builtin: boolean;
+    category: string;
+    chassis: string;
+    compute_id: string;
+    console_auto_start: boolean;
+    console_type: string;
+    default_name_format: string;
+    disk0: number;
+    disk1: number;
+    exec_area: number;
+    idlemax: number;
+    idlepc: string;
+    idlesleep: number;
+    image: string;
+    iomem: number;
+    mac_addr: string;
+    mmap: boolean;
+    name: string;
+    nvram: number;
+    platform: string;
+    private_config: string;
+    ram: number;
+    slot0: string;
+    sparsemem: boolean;
+    startup_config: string;
+    symbol: string;
+    system_id: string;
+    template_id: string;
+    template_type: string;
+    usage: string;
+    wic0: string;
+    wic1: string;
+}
diff --git a/src/app/models/virtualBox/virtualBoxVm.ts b/src/app/models/virtualBox/virtual-box-vm.ts
similarity index 100%
rename from src/app/models/virtualBox/virtualBoxVm.ts
rename to src/app/models/virtualBox/virtual-box-vm.ts
diff --git a/src/app/services/ios.service.spec.ts b/src/app/services/ios.service.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/services/ios.service.ts b/src/app/services/ios.service.ts
new file mode 100644
index 00000000..f6ccf18a
--- /dev/null
+++ b/src/app/services/ios.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from "@angular/core";
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Observable } from 'rxjs';
+import { IosTemplate } from '../models/templates/ios-template';
+
+@Injectable()
+export class IosService {
+    constructor(private httpServer: HttpServer) {}
+
+    getTemplates(server: Server): Observable<IosTemplate[]> {
+        return this.httpServer.get<IosTemplate[]>(server, '/templates') as Observable<IosTemplate[]>;
+    }
+
+    getTemplate(server: Server, template_id: string): Observable<IosTemplate> {
+        return this.httpServer.get<IosTemplate>(server, `/templates/${template_id}`) as Observable<IosTemplate>;
+    }
+
+    addTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
+        return this.httpServer.post<IosTemplate>(server, `/templates`, iosTemplate) as Observable<IosTemplate>;
+    }
+
+    saveTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
+        return this.httpServer.put<IosTemplate>(server, `/templates/${iosTemplate.template_id}`, iosTemplate) as Observable<IosTemplate>;
+    }
+}
diff --git a/src/app/services/template-mocks.service.ts b/src/app/services/template-mocks.service.ts
index 98f710f0..dae0ee7d 100644
--- a/src/app/services/template-mocks.service.ts
+++ b/src/app/services/template-mocks.service.ts
@@ -6,6 +6,7 @@ import { VirtualBoxTemplate } from '../models/templates/virtualbox-template';
 import { EthernetHubTemplate } from '../models/templates/ethernet-hub-template';
 import { CloudTemplate } from '../models/templates/cloud-template';
 import { EthernetSwitchTemplate } from '../models/templates/ethernet-switch-template';
+import { IosTemplate } from '../models/templates/ios-template';
 
 @Injectable()
 export class TemplateMocksService {
@@ -155,4 +156,44 @@ export class TemplateMocksService {
 
         return of(template);
     }
+
+    getIosTemplate() : Observable<IosTemplate> {
+        let template: IosTemplate = {
+            auto_delete_disks: true,
+            builtin: false,
+            category: 'router',
+            chassis: '1720',
+            compute_id: 'local',
+            console_auto_start: false,
+            console_type: 'telnet',
+            default_name_format: 'R{0}',
+            disk0: 0,
+            disk1: 0,
+            exec_area: 64,
+            idlemax: 500,
+            idlepc: '',
+            idlesleep: 30,
+            image: '',
+            iomem: 0,
+            mac_addr: '',
+            mmap: true,
+            name: '',
+            nvram: 128,
+            platform: '',
+            private_config: '',
+            ram: 128,
+            slot0: '',
+            sparsemem: true,
+            startup_config: '',
+            symbol: ':/symbols/router.svg',
+            system_id: 'FTX0945W0MY',
+            template_id: '',
+            template_type: 'dynamips',
+            usage: '',
+            wic0: '',
+            wic1: ''
+        }
+
+        return of(template);
+    }
 }
diff --git a/src/app/services/virtual-box.service.ts b/src/app/services/virtual-box.service.ts
index e4946421..cdcb0d7d 100644
--- a/src/app/services/virtual-box.service.ts
+++ b/src/app/services/virtual-box.service.ts
@@ -3,7 +3,7 @@ import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
 import { VirtualBoxTemplate } from '../models/templates/virtualbox-template';
-import { VirtualBoxVm } from '../models/virtualbox/virtualboxVm';
+import { VirtualBoxVm } from '../models/virtualBox/virtual-box-vm';
 
 @Injectable()
 export class VirtualBoxService {