diff --git a/api/liberouterapi/bootstrap.py b/api/liberouterapi/bootstrap.py
index 6ef5421..24fb554 100644
--- a/api/liberouterapi/bootstrap.py
+++ b/api/liberouterapi/bootstrap.py
@@ -104,6 +104,13 @@ def setup():
 		raise ApiException("API is already setup")
 	settings = request.get_json()
 	db = dbConnector()
+
+	if len(settings['username']) == 0:
+		raise ApiException("Missing username")
+
+	if len(settings['password']) == 0:
+		raise ApiException("Missing password")
+
 	try:
 		# Insert user to database via user module
 		from .modules.users import unprotected_add_user
diff --git a/api/liberouterapi/modules/configuration.py b/api/liberouterapi/modules/configuration.py
new file mode 100644
index 0000000..c52a517
--- /dev/null
+++ b/api/liberouterapi/modules/configuration.py
@@ -0,0 +1,148 @@
+"""
+Configuration REST API
+
+Configuration is separated into documents where each document is identified by
+name of the module, where 'liberoutergui' module is reserved for future use
+in case we need something globally configurable in the Liberouter GUI.
+
+When inserting a configuration 'name' must be unique.
+"""
+
+from flask import request
+
+from liberouterapi import auth, dbConnector
+from liberouterapi.error import ApiException
+from .module import Module
+from bson import json_util as json
+from pymongo import ReturnDocument
+
+class ConfError(ApiException):
+	status_code = 400
+
+# Initialize connector to the configuration collection
+connector = dbConnector()
+conf_db = connector.db["configuration"]
+
+conf = Module('configuration', __name__, url_prefix='/configuration', no_version = True)
+
+@conf.route('', methods=['GET'])
+#@auth.required()
+def get_conf():
+	res = list(conf_db.find())
+	return (json.dumps(res))
+
+def unprotected_get_module_conf(module):
+	"""
+	Get module's configuration specified by the module's name
+
+	Prevent from storing module liberoutergui (reserved for future use).
+
+	Each module name is converted to lowercase
+	"""
+	if module == 'liberoutergui':
+		raise ConfError("'liberoutergui' module name is reserved", status_code=409)
+
+	res = conf_db.find_one({
+		'name' : module.lower()
+		})
+
+	if not res:
+		raise ConfError("Module '%s' not found" % module, status_code=404)
+
+	return(res)
+
+
+@conf.route('/<string:module>', methods=['GET'])
+def get_module_conf(module):
+	"""
+	Get module by its name using the unprotected function
+	"""
+	return (json.dumps(unprotected_get_module_conf(module)))
+
+@conf.route('/<string:module>', methods=['PUT'])
+def update_conf(module):
+	"""
+	Update a module's configuration specified by its name
+
+	'name' mustn't be specified in data and data must be non-empty
+	"""
+
+	data = request.get_json()
+
+	if not data:
+		raise ConfError("Nothing to update")
+
+	if "name" in data:
+		del data["name"]
+
+	if "_id" in data:
+		del data["_id"]
+
+	res = conf_db.find_one_and_update({
+		"name" : str(module).lower()
+		},
+		{
+			"$set" : data
+		},
+		return_document=ReturnDocument.AFTER)
+
+	if not res:
+		raise ConfError("Can't update module '%s'" % str(module).lower())
+
+	return(json.dumps(res))
+
+@conf.route('', methods=['POST'])
+def insert_conf():
+	"""
+	Insert module's configuration, the configuration name mustn't be present in
+	the collection
+
+	'name' is a mandatory key
+	"""
+
+	conf = request.get_json()
+	res = {}
+
+	if 'name' not in conf:
+		raise ConfError("'name' must be specified in configuration")
+
+	try:
+		# We expect it to raise ConfError (config not found)
+		res = unprotected_get_module_conf(conf['name'])
+	except ConfError:
+		# Name must be lowercase
+		conf['name'] = conf['name'].lower()
+
+		res = conf_db.insert_one(conf)
+
+		try:
+			res = conf_db.find_one({
+				"_id" : res.inserted_id
+				})
+		except Exception as e:
+			raise ConfError(str(e))
+	else:
+		raise ConfError("Configuration with name '%s' already exists" % conf['name'])
+
+	return(json.dumps(res))
+
+@conf.route('/<string:module>', methods=['DELETE'])
+def remove_conf(module):
+	"""
+	Remove specified module from db
+
+	Module is identified by its name in lowercase
+	"""
+
+	# Get the original document
+	orig_config = unprotected_get_module_conf(module)
+
+	res = conf_db.delete_one({
+		'name' : str(module).lower()
+		})
+
+	if res.deleted_count != 1:
+		raise ConfError("Module '%s' wasn't deleted" % module, status_code=404)
+
+	return(json.dumps(orig_config))
+
diff --git a/api/liberouterapi/modules/nemea-reporter-rest b/api/liberouterapi/modules/nemea-reporter-rest
new file mode 120000
index 0000000..36cfd0b
--- /dev/null
+++ b/api/liberouterapi/modules/nemea-reporter-rest
@@ -0,0 +1 @@
+../../../modules/Nemea-Dashboard/api/modules/nemea/reporter-rest
\ No newline at end of file
diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index 8d85015..4b1aa0a 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit 8d85015253c459c77784435b4b0d366b532c2413
+Subproject commit 4b1aa0a81ce9aa308b5486189e6cab8af1602f9e
diff --git a/www/.angular-cli.json b/www/.angular-cli.json
new file mode 100644
index 0000000..3a76d08
--- /dev/null
+++ b/www/.angular-cli.json
@@ -0,0 +1,68 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"project": {
+		"version": "0.2.0",
+		"name": "liberouter-gui"
+	},
+	"apps": [
+		{
+			"root": "src",
+			"outDir": "dist",
+			"assets": [
+				"assets",
+				"favicon.ico",
+				".htaccess",
+				"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
+			],
+			"index": "index.html",
+			"main": "main.ts",
+			"polyfills": "polyfills.ts",
+			"test": "test.ts",
+			"tsconfig": "tsconfig.app.json",
+			"testTsconfig": "tsconfig.spec.json",
+			"prefix": "app",
+			"styles": [
+				"styles/main.scss",
+				"../node_modules/bootstrap/dist/css/bootstrap.min.css",
+				"../node_modules/codemirror/lib/codemirror.css"
+			],
+			"scripts": [],
+			"environmentSource": "environments/environment.ts",
+			"environments": {
+				"dev": "environments/environment.ts",
+				"prod": "environments/environment.prod.ts"
+			}
+		}
+	],
+	"sassCompiler" : {
+		"includePaths": ["src/styles"]
+	},
+	"e2e": {
+		"protractor": {
+			"config": "./protractor.conf.js"
+		}
+	},
+	"lint": [
+		{
+			"project": "src/tsconfig.app.json"
+		},
+		{
+			"project": "src/tsconfig.spec.json"
+		},
+		{
+			"project": "e2e/tsconfig.e2e.json"
+		}
+	],
+	"test": {
+		"karma": {
+			"config": "./karma.conf.js"
+		}
+	},
+	"defaults": {
+		"styleExt": "scss",
+		"component": {
+			"inlineTemplate": false,
+			"spec": true
+		}
+	}
+}
diff --git a/www/.editorconfig b/www/.editorconfig
index 6e87a00..2e8b0ef 100644
--- a/www/.editorconfig
+++ b/www/.editorconfig
@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
diff --git a/www/.gitignore b/www/.gitignore
index fe6f8a7..35c5fee 100644
--- a/www/.gitignore
+++ b/www/.gitignore
@@ -38,3 +38,5 @@ testem.log
 #System Files
 .DS_Store
 Thumbs.db
+
+config.json
diff --git a/www/.htaccess b/www/.htaccess
index 4081df4..e7e7a52 100644
--- a/www/.htaccess
+++ b/www/.htaccess
@@ -1,9 +1,9 @@
 <IfModule mod_rewrite.c>
   RewriteEngine On
-  RewriteRule ^$ /liberouter-gui/www/dist [L]
+  RewriteRule ^$ / [L]
   RewriteBase /dist
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
-  RewriteRule . /liberouter-gui/www/dist/index.html [L]
+  RewriteRule . /index.html [L]
 </IfModule>
diff --git a/www/README.md b/www/README.md
index 14b91d4..86fb151 100644
--- a/www/README.md
+++ b/www/README.md
@@ -22,6 +22,9 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
 
-## Further help
+## Building production Liberouter GUI
+Because of some weird bug in Angular CLI or TypeScript one has to build the production version of Liberouter GUI like this:
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+1. run `ng build --prod --bh="/liberouter-gui/www/dist/" --aot=false -w` This will give you an error `ERROR in AppModule is not an NgModule`
+2. Trigger the watch routine of Angular CLI (i.e. open and save some file inside the src folder).
+3. Build finishes sucessfully.
diff --git a/www/angular-cli.json b/www/angular-cli.json
deleted file mode 100644
index 32872b3..0000000
--- a/www/angular-cli.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "version": "1.0.0-beta.31",
-    "name": "www"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.json",
-      "prefix": "app",
-      "styles": [
-        "styles/main.scss",
-        "../node_modules/font-awesome/css/font-awesome.css",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
-      ],
-      "scripts": [],
-      "environments": {
-        "source": "environments/environment.ts",
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "addons" : [
-	"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
-  ],
-  "sassCompiler" : {
-	"includePaths": ["src/styles"]
-  },
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "files": "src/**/*.ts",
-      "project": "src/tsconfig.json"
-    },
-    {
-      "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
-  }
-}
diff --git a/www/karma.conf.js b/www/karma.conf.js
index 437f2d0..1685601 100644
--- a/www/karma.conf.js
+++ b/www/karma.conf.js
@@ -8,29 +8,21 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
@@ -39,3 +31,4 @@ module.exports = function (config) {
     singleRun: false
   });
 };
+
diff --git a/www/package.json b/www/package.json
index fa03587..793db03 100644
--- a/www/package.json
+++ b/www/package.json
@@ -1,52 +1,66 @@
 {
-  "name": "Liberouter GUI",
-  "version": "0.2.0-beta",
+  "name": "liberouter-gui",
+  "version": "0.3.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "scss": "node-sass --include-path scss src/styles/base.scss src/styles/main.css -o dist",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/cli": "^1.0.0-beta.31",
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
+    "@angular/animations": "^4.0.0",
+    "@angular/cli": "^1.1.2",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
+    "@swimlane/ngx-charts": "^5.3.1",
+    "angular2-grid": "^2.0.2",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
+    "d3": "^4.9.1",
     "font-awesome": "^4.7.0",
-    "node-sass": "^4.5.0",
-    "rxjs": "^5.0.1",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.2"
+    "ng2-codemirror": "^1.1.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-beta.31",
-    "@angular/compiler-cli": "^2.4.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.42",
-    "codelyzer": "~2.0.0-beta.1",
-    "jasmine-core": "2.5.2",
-    "jasmine-spec-reporter": "2.5.0",
-    "karma": "1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "protractor": "~5.1.0",
-    "ts-node": "1.2.1",
-    "tslint": "^4.3.0",
-    "typescript": "~2.0.0"
-  }
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@types/jasmine": "2.5.45",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "^2.2.2"
+  },
+  "description": "Web interface for Liberouter GUI. Built using webpack.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CESNET/liberouter-gui.git"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/CESNET/liberouter-gui/issues"
+  },
+  "homepage": "https://github.com/CESNET/liberouter-gui#readme"
 }
diff --git a/www/protractor.conf.js b/www/protractor.conf.js
index ffded70..1891703 100644
--- a/www/protractor.conf.js
+++ b/www/protractor.conf.js
@@ -1,8 +1,7 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-/*global jasmine */
-var SpecReporter = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
@@ -20,13 +19,11 @@ exports.config = {
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
-  useAllAngular2AppRoots: true,
-  beforeLaunch: function() {
+  onPrepare() {
     require('ts-node').register({
-      project: 'e2e'
+      project: 'e2e/tsconfig.e2e.json'
     });
-  },
-  onPrepare: function() {
-    jasmine.getEnv().addReporter(new SpecReporter());
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
 };
+
diff --git a/www/src/app/app.component.html b/www/src/app/app.component.html
index 22631bc..643309c 100644
--- a/www/src/app/app.component.html
+++ b/www/src/app/app.component.html
@@ -2,13 +2,13 @@
 	<div class="sidebar" *ngIf="!isLoginPage">
 
 		<h1 class="user-area">
-			<img src="assets/logo.png" alt="Liberouter GUI">
+			<img src="assets/img/logo.png" alt="Liberouter GUI">
 		</h1>
 
 		<div class="user-area ">
 			<div ngbDropdown class="d-flex flex-column align-content-center">
 				<a class="user" id="dropdownMenu1" ngbDropdownToggle>
-					{{ user.user.username }}
+					{{ user?.user?.username }}
 				</a>
 				<div class="dropdown-menu" aria-labelledby="userActions">
 					<button class="dropdown-item">Action - 1</button>
diff --git a/www/src/app/app.component.ts b/www/src/app/app.component.ts
index 75bf1f6..b2c926c 100644
--- a/www/src/app/app.component.ts
+++ b/www/src/app/app.component.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import { AuthService } from './services';
+import { AuthService, ConfigService } from './services';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  providers : [AuthService]
+  providers : [AuthService, ConfigService]
 })
 export class AppComponent {
 	isLoginPage : boolean = false;
@@ -14,9 +14,13 @@ export class AppComponent {
 	modules : Array<Object> = [];
 	children : Array<Object>= [];
 
-	constructor(private router : Router, private route:ActivatedRoute, private auth : AuthService) {}
+	constructor(private router : Router,
+				private route:ActivatedRoute,
+				private auth : AuthService,
+				private config : ConfigService) {}
 
 	ngOnInit() {
+		this.config.load();
 		this.router.events.subscribe(val => {
 			/* the router will fire multiple events */
 			/* we only want to react if it's the final active route */
diff --git a/www/src/app/app.module.ts b/www/src/app/app.module.ts
index 52c4754..7102e9e 100644
--- a/www/src/app/app.module.ts
+++ b/www/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule, Http, Request, XHRBackend, RequestOptions} from '@angular/http';
 import { RouterModule, Routes, Router } from '@angular/router';
 
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/';
@@ -13,13 +13,15 @@ import { LogoutComponent } from './components/';
 import { SetupComponent } from './components/';
 import { NullComponent } from './components/';
 
-import { AuthGuard } from './utils/index';
-import { HttpInterceptor } from './utils/index';
+import { AuthGuard, HttpInterceptor } from './utils';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
 import { modules } from './modules';
 
-export const appRoutes: Routes = [
+/**
+  * Basic routes of the application
+  */
+const appRoutes: Routes = [
 	{
 		path : 'login',
 		component : LoginComponent
@@ -44,40 +46,50 @@ export const appRoutes: Routes = [
 	}
 ];
 
-export function setFactory (xhrBackend: XHRBackend,
-				requestOptions: RequestOptions,
-				router: Router) {
-	return new HttpInterceptor(xhrBackend, requestOptions, router);
-}
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    LoginComponent,
-    LogoutComponent,
-    SetupComponent,
-    NullComponent
-  ],
-  imports: [
-	modules,
-	SafePipeModule,
-    BrowserModule,
-	FormsModule,
-	HttpModule,
-	NgbModule.forRoot(),
-	RouterModule.forRoot(appRoutes)
-  ],
-  providers: [
-	AuthGuard,
-	SafePipe,
+/**
+  * Initialization function for the whole application
+  *
+  * Used because we need the config before HttpInterceptor is created
+  * Inspired by: https://stackoverflow.com/questions/40909822/how-to-use-httpinterceptor-and-configservice-both-at-the-same-time-in-angular2
+  */
+export function initApp(config : any) {
+	@NgModule({
+	  declarations: [
+		AppComponent,
+		HomeComponent,
+		LoginComponent,
+		LogoutComponent,
+		SetupComponent,
+		NullComponent
+	  ],
+	  imports: [
+		modules,
+		SafePipeModule,
+		BrowserModule,
+		FormsModule,
+		HttpModule,
+		NgbModule.forRoot(),
+		RouterModule.forRoot(appRoutes)
+	  ],
+	  providers: [
+		AuthGuard,
+		SafePipe,
+		{
+			provide : config,
+			useValue : config
+		},
 		{
 			provide : Http,
-			useFactory: setFactory,
-			deps: [XHRBackend, RequestOptions, Router]
+			useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions,
+				router: Router, config : string) => {
+					return new HttpInterceptor(xhrBackend, requestOptions, router, config);
+				},
+			deps: [XHRBackend, RequestOptions, Router, config]
 		}
+	  ],
+	  bootstrap: [AppComponent]
+	})
+	class AppModule { }
 
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+	return AppModule;
+}
diff --git a/www/src/app/components/login/login.component.html b/www/src/app/components/login/login.component.html
index 1b02608..8c75e27 100644
--- a/www/src/app/components/login/login.component.html
+++ b/www/src/app/components/login/login.component.html
@@ -2,7 +2,7 @@
 	<section class="login box">
 		<h2>
 			<span>Liberouter GUI</span>
-			<img src="assets/logo.png" alt="Liberouter logo" />
+			<img src="assets/img/logo.png" alt="Liberouter logo" />
 		</h2>
 
 		<form>
diff --git a/www/src/app/components/setup/setup.component.html b/www/src/app/components/setup/setup.component.html
index 90e5967..ba62998 100644
--- a/www/src/app/components/setup/setup.component.html
+++ b/www/src/app/components/setup/setup.component.html
@@ -3,23 +3,31 @@ <h2>Liberouter GUI Setup</h2>
 
 	<p>You need to setup an administrator account to access Liberouter GUI</p>
 
-	<form (ngSubmit)="onSubmit()">
+	<form (ngSubmit)="onSubmit()" #setupForm="ngForm" novalidate>
 		<div class="form-group">
-			<label for="username">Username</label>
-			<input type="text" name="username" id="username" class="form-control" placeholder="admin" [(ngModel)]="admin.username">
+			<label for="username">Username *</label>
+			<input type="text" name="username" id="username" class="form-control" placeholder="admin" [(ngModel)]="admin.username" required>
 		</div>
 
 		<div class="form-group">
-			<label for="password">Password</label>
-			<input type="password" name="password" id="password" class="form-control" placeholder="password" [(ngModel)]="admin.password">
+			<label for="password">Password *</label>
+			<input type="password" name="password" id="password" class="form-control" placeholder="password" [(ngModel)]="admin.password" required>
 		</div>
 
 		<div class="form-group">
-			<label for="password2">Password Confirmation</label>
-			<input type="password" name="password2" id="password2" class="form-control" placeholder="password" [(ngModel)]="admin.password2">
+			<label for="password2">Password Confirmation *</label>
+			<input type="password" name="password2" id="password2" class="form-control" placeholder="password" [(ngModel)]="admin.password2" required>
 			<small>Re-enter the same password as above to make sure you haven't mispelled it</small>
 		</div>
 
-		<button type="submit" class="btn btn-primary" [disabled]="admin.password != admin.password2 || admin.password == ''">Create</button>
+		<button type="submit"
+			class="btn btn-primary"
+			[disabled]="admin.password != admin.password2 || !setupForm.form.valid">
+			Create
+		</button>
+
+		<span class="alert alert-danger" role="alert" *ngIf="error != ''">
+			{{ error }}
+		</span>
 	</form>
 </section>
diff --git a/www/src/app/components/setup/setup.component.ts b/www/src/app/components/setup/setup.component.ts
index abb4fd4..2b385da 100644
--- a/www/src/app/components/setup/setup.component.ts
+++ b/www/src/app/components/setup/setup.component.ts
@@ -16,6 +16,8 @@ export class SetupComponent implements OnInit {
 		password2 : ""
 	};
 
+	error = "";
+
 	constructor( private authService : AuthService
                , private router : Router
                ) { }
@@ -27,6 +29,9 @@ export class SetupComponent implements OnInit {
 		this.authService.admin(this.admin).subscribe(
 		    data => {
 		        this.router.navigate(["/login"]);
+		    },
+		    err => {
+				this.error = err;
 		    }
 		)
 	}
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
new file mode 100644
index 0000000..c493b9b
--- /dev/null
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
@@ -0,0 +1,77 @@
+<div class="modal-header">
+	<h4 class="modal-title">FTAS Settings</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">URL</label>
+			<input type="text"
+				class="form-control col"
+				name="url"
+				placeholder="FTAS URL"
+				[(ngModel)]="backup.url" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Full URL</label>
+			<input type="text"
+				class="form-control col"
+				name="fullUrl"
+				placeholder="Full URL"
+				[(ngModel)]="backup.fullUrl" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Output</label>
+			<input type="number"
+				class="form-control col"
+				name="output"
+				placeholder="0"
+				required
+				[(ngModel)]="backup.output"/>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-4">Generated URL</label>
+			<div class="btn-group" data-toggle="buttons">
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 1}"
+						title="Show">
+						<input type="radio" data-toggle="tooltip"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="1"
+							[(ngModel)]="backup.showUrl">
+						Show
+					</label>
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 0}"
+						title="Hide">
+						<input type="radio"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="0"
+							[(ngModel)]="backup.showUrl">
+						Hide
+					</label>
+				</div>
+
+		</div>
+
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">
+		Cancel
+	</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
+
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.scss b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts
new file mode 100644
index 0000000..4834f14
--- /dev/null
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FtasModalComponent } from './ftas-modal.component';
+
+describe('FtasModalComponent', () => {
+  let component: FtasModalComponent;
+  let fixture: ComponentFixture<FtasModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FtasModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FtasModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
new file mode 100644
index 0000000..3035843
--- /dev/null
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-ftas-modal',
+  templateUrl: './ftas-modal.component.html',
+  styleUrls: ['./ftas-modal.component.scss']
+})
+export class FtasModalComponent implements OnInit {
+
+	// Model data
+	data;
+
+	// Backup of model data detached from ngModel
+	private backup;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		this.activeModal.dismiss(result);
+	}
+}
diff --git a/www/src/app/modules/ftas/ftas.component.html b/www/src/app/modules/ftas/ftas.component.html
index 9dbf48c..6c46812 100644
--- a/www/src/app/modules/ftas/ftas.component.html
+++ b/www/src/app/modules/ftas/ftas.component.html
@@ -1,9 +1,15 @@
 <section class="box">
     <h4 *ngIf="ftasMsg.length > 0">{{ ftasMsg }}</h4>
-    <iframe [src]="url | safe" class="frame" (load)="iframeLoaded()"></iframe>
+    <iframe [src]="url | safe" class="frame" (onload)="iframeLoaded()" *ngIf="url">
+		<div class="alert alert-danger">
+			Your browser doesn't support iframes
+		</div>
+	</iframe>
 </section>
 
-<section class="box">
+<section class="box" *ngIf="config?.showUrl == 1">
     <em> Generated URL:</em> <input type="text" [(value)] ="url">
     <small>If an error occurs, you can use this URL to access ftas directly</small>
 </section>
+
+<button class="btn btn-primary" (click)="openSettings()">Settings</button>
diff --git a/www/src/app/modules/ftas/ftas.component.ts b/www/src/app/modules/ftas/ftas.component.ts
index 3bd480c..2f01138 100644
--- a/www/src/app/modules/ftas/ftas.component.ts
+++ b/www/src/app/modules/ftas/ftas.component.ts
@@ -1,9 +1,26 @@
+/**
+  * FTAS as an iframe module with configuration
+  *
+  * Config items:
+  * 'url' : simple URL (without protocol) to FTAS instance
+  * 'fullUrl' : Full URL to filtering script (usually "example.com/ftas/stat.pl")
+  * Specify URL without URL (https is forced)
+  *		If this option is not set, url must be.
+  *		If both are set, fullUrl is used.
+  * 'output' : Specify which output machines will be used
+  * Can be a list (as string): "1,2,5,10"
+  */
+
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { URLSearchParams } from '@angular/http';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
-import { environment } from 'environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { ConfigService } from 'app/services';
+
+import { FtasModalComponent } from './ftas-modal/ftas-modal.component'
 
 
 @Component({
@@ -12,63 +29,119 @@ import { environment } from 'environments/environment';
   styleUrls : ['./ftas.component.scss']
 })
 export class FtasComponent implements OnInit {
+	// FTAS URL for iframe
+    baseUrl : string;
 
-    baseUrl : string = "https://";  // FTAS URL for iframe
-    url: SafeResourceUrl;           // Sanitizied URL for iframe
-    filter : string;                // Advanced filter field for FTAS
-    iframeInit : Boolean = false;   // Flag for iframe initialization routine
-    ftasMsg : string = "";          // The loading message
+    // Sanitizied URL for iframe
+    url: SafeResourceUrl;
 
-    /**
-      * Construct the FTAS URL from environment variables
-      */
-    constructor( private route : ActivatedRoute ) {
-        /**
-          * Environment can set full url of the FTAS instance
-          */
-        if (environment.ftas.fullUrl) {
-            this.baseUrl = environment.ftas.fullUrl
-        } else if (environment.ftas.url) {
-            this.baseUrl += environment.ftas.url + "/ftas/stat.pl";
-        } else {
-            console.warn("FTAS URL isn't set.");
-        }
-    }
+    // Advanced filter field for FTAS
+    filter : string;
+
+    // Flag for iframe initialization routine
+    iframeInit : Boolean = false;
+    // The loading message
+    ftasMsg : string = "";
+
+    // URL parameters
+    params : Object;
+
+    // Configuration fetched froms backend
+    config : Object;
+
+    // Output ID
+    output : number;
+
+    // Reference to modal window
+    modalRef;
+
+    constructor(private route : ActivatedRoute,
+    		   private configService : ConfigService,
+    		   private modalService : NgbModal) {}
 
     /**
-      * Get URL params and prepare the advanced query field for FTAS iframe
+      * Get configruation and URL params and prepare the advanced query field
+      * for FTAS iframe
       */
     ngOnInit() {
-        this.route.params.subscribe(params => {
+    	this.configService.getModule('ftas').subscribe(
+    		config => {
+    			this.config = config;
+    			this.fetchParams();
+    		},
+			error => {
+				// Config for module doesn't exist
+				if (error.status == 404) {
+					console.log(error);
+					this.openSettings(false);
+				}
+			}
+		);
+    }
+
+	/**
+	  * Fetch parameters from the route and create filter from them
+	  *
+	  * Then set URL for iframe
+	  */
+    private fetchParams() {
+		this.route.params.subscribe(params => {
+        	this.params = params;
             for (var key in params) {
-                if (this.filter == undefined) {
-                    this.filter = key + "=" + params[key];
-                }
-                else {
-                    this.filter += "and " + key + '=' + params[key];
-                }
+            	if (key != 'first' && key != 'last') {
+					if (this.filter == undefined) {
+						this.filter = key + "=" + params[key];
+					}
+					else {
+						this.filter += " and " + key + '=' + params[key];
+					}
+				}
             }
+			this.setUrl();
+        });
+    }
 
-            /**
-              * Setup FTAS URL
-              * If params are set we can do some filtering
-              */
-            if (this.filter == undefined)
-                this.url = this.baseUrl;
-            else {
-                this.url = this.baseUrl + '?'
-                    + this.generateQueryBase()
-                    + "&advanced_query="
-                    + encodeURIComponent(this.filter);
-            }
+	/**
+	  * Set FTAS URL
+	  * If params are set we can do some filtering
+	  *
+	  * Fall-through model for setting the baseUrl where preferred method
+	  * is fullUrl -> url -> show modal with settings
+	  */
+    private setUrl() {
+    	this.baseUrl = "https://";
+    	if (this.config['fullUrl']) {
+			this.baseUrl = this.config['fullUrl']
+		} else if (this.config['url']) {
+            this.baseUrl += this.config['url'] + "/ftas/stat.pl";
+        }
 
-        });
+        this.output = +this.config['output'] || -1;
+
+        if (this.output == -1 || this.baseUrl == "https://") {
+            console.warn("FTAS output or URL isn't set.");
+
+			// Open modal window
+            this.openSettings();
+        } else {
+        	// Set URL params
+			if (this.filter == undefined)
+				this.url = this.baseUrl;
+			else {
+				this.url = this.baseUrl + '?'
+					+ this.generateQueryBase()
+					+ "&advanced_query="
+					+ encodeURIComponent(this.filter);
+			}
+		}
     }
 
     /**
       * Outputs loading message if iframe is loaded but not its contents
       * (load) fires two times: first time when iframe element is loaded
       * and second time when its content is loaded.
+      *
+      * Not used in current setup, because (load) is fired nondeterministically
       */
     iframeLoaded() {
         if (!this.iframeInit) {
@@ -80,21 +153,61 @@ export class FtasComponent implements OnInit {
         this.iframeInit = !this.iframeInit;
     }
 
+	/**
+	  * open modal window with settings
+	  *
+	  * on close, save settings and regenerate URL
+	  * on dismissal do nothing
+	  */
+    openSettings(update : boolean = true) {
+		this.modalRef = this.modalService.open(FtasModalComponent);
+		this.modalRef.componentInstance.data = this.config;
+		this.modalRef.result.then(
+			(result) => {
+				if (update) {
+					// The modal was closed, save settings
+					this.configService.update('ftas', this.config).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+							if (error.status == 404) {
+								this.openSettings(false);
+							}
+						});
+				} else {
+					let newconfig = Object.assign({}, this.config);
+					newconfig["name"] = "ftas";
+					this.configService.add(newconfig).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+						});
+				}
+			},
+			(reason) => {
+				// dismissal, do nothing
+			});
+    }
+
     /**
       * Set filtering parameters base for FTAS
       * Filtering something in FTAS requires a lot of parameters to set.
-      *
-      * TODO: Reflect correctly time in "first" and "last" fields
       */
     private generateQueryBase() : URLSearchParams {
         let queryBase = new URLSearchParams();
 
-        queryBase.set("select_output", environment.ftas.output);
+        queryBase.set("select_output", String(this.output));
         queryBase.set("select_output-use", "yes");
         queryBase.set("query_style", "advanced");
         //this.query.set("advanced_query", "dst_ip%3D193.170.227.139");
-        queryBase.set("first", "today 8:00");
-        queryBase.set("last", "today 10:00");
+        queryBase.set("first", this.params["first"]);
+        queryBase.set("last", this.params["last"]);
         queryBase.set("use_all_fields", "1");
         queryBase.set("query", "yes");
         queryBase.set("run_query", "yes");
@@ -125,7 +238,6 @@ export class FtasComponent implements OnInit {
         queryBase.append("viewer_requested_fields", "last");
 
         return queryBase;
-
     }
 
 }
diff --git a/www/src/app/modules/ftas/ftas.module.ts b/www/src/app/modules/ftas/ftas.module.ts
index 18664f6..d0143c9 100644
--- a/www/src/app/modules/ftas/ftas.module.ts
+++ b/www/src/app/modules/ftas/ftas.module.ts
@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
+import { FormsModule }		from '@angular/forms';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
-import { FtasComponent } from './ftas.component'
+import { FtasComponent } from './ftas.component';
+import { FtasModalComponent } from './ftas-modal/ftas-modal.component'
 
 const ftasRoutes : Routes = [{
     path : 'ftas',
@@ -14,7 +18,7 @@ const ftasRoutes : Routes = [{
     data : {
         role : 10,
         name : "FTAS",
-        description : "The mighty FTAS!",
+        description : "Flow-based Traffic Analysis System",
         icon : "fa-first-order"
     }
 }]
@@ -22,14 +26,20 @@ const ftasRoutes : Routes = [{
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     SafePipeModule,
+    NgbModule.forRoot(),
     RouterModule.forChild(ftasRoutes)
   ],
   declarations: [
-    FtasComponent
+    FtasComponent,
+    FtasModalComponent
   ],
   providers : [
     SafePipe
+  ],
+  entryComponents : [
+	FtasModalComponent
   ]
 })
 export class FtasModule { }
diff --git a/www/src/app/modules/nemea/dashboard/box.service.spec.ts b/www/src/app/modules/nemea/dashboard/box.service.spec.ts
new file mode 100644
index 0000000..b569978
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/box.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { BoxService } from './box.service';
+
+describe('BoxService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [BoxService]
+    });
+  });
+
+  it('should ...', inject([BoxService], (service: BoxService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/www/src/app/modules/nemea/dashboard/box.service.ts b/www/src/app/modules/nemea/dashboard/box.service.ts
new file mode 100644
index 0000000..262ef01
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/box.service.ts
@@ -0,0 +1,98 @@
+import { Injectable } from '@angular/core';
+import { Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
+
+@Injectable()
+export class BoxService {
+
+	constructor(private http : Http) {}
+
+	piechart(box) {
+		let requestOptions = new RequestOptions();
+
+		let params: URLSearchParams = new URLSearchParams();
+
+		/**
+		  * Set time window
+		  * The difference in capitalization is because of backward compatibility
+		  */
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+
+		params.set('metric', box['metric']);
+		params.set('type', 'piechart');
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/aggregate', requestOptions).map(
+			(response : Response) => {
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+	barchart(box) {
+		let requestOptions = new RequestOptions();
+
+		let params: URLSearchParams = new URLSearchParams();
+
+		/**
+		  * Set time window
+		  * The difference in capitalization is because of backward compatibility
+		  */
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+
+		params.set('window', box['window'] ? box['window'] : 60);
+		params.set('type', 'barchart');
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/aggregate', requestOptions).map(
+			(response : Response) => {
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+	count(box) {
+		let requestOptions = new RequestOptions();
+		let params: URLSearchParams = new URLSearchParams();
+
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+		params.set('category', "any");
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/count', requestOptions).map(
+			(response : Response) => {
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+	top(box) {
+		let requestOptions = new RequestOptions();
+		let params: URLSearchParams = new URLSearchParams();
+
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/top', requestOptions).map(
+			(response : Response) => {
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+
+	private handleError(err : Response | any) {
+		return Promise.reject(err);
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/box.ts b/www/src/app/modules/nemea/dashboard/box.ts
new file mode 100644
index 0000000..4cde1ec
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/box.ts
@@ -0,0 +1,40 @@
+export interface Box {
+	/**
+	  * Configuration of the box itself
+	  */
+	config : any;
+	/**
+	  * Title of the box
+	  */
+	title : string;
+	/**
+	  * Content which to display below data
+	  */
+	content : string;
+	/**
+	  * Define type of the box
+	  * Value: chart|top|number
+	  */
+	type : string;
+	/**
+	  * Options for the graph
+	  */
+	options : Object;
+	/**
+	  * time from which to analyze events
+	  */
+	beginTime : number;
+	/**
+	  * ending time for analyzing events, usually now
+	  * TODO: add time offset for history views
+	  */
+	endTime : number;
+	/**
+	  * Time window size in hours
+	  */
+	period : number;
+	/**
+	  * metric for analysis
+	  */
+	metric : string;
+}
diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
new file mode 100644
index 0000000..c67ae03
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
@@ -0,0 +1,72 @@
+<div class="modal-header">
+	<h4 class="modal-title">Editing "{{ backup.title }}"</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Title</label>
+			<input type="text"
+				class="form-control col"
+				name="title"
+				placeholder="Box title"
+				[(ngModel)]="backup.title" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Content</label>
+			<input type="text"
+				class="form-control col"
+				name="content"
+				placeholder="Box content"
+				[(ngModel)]="backup.content" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Period [hours]</label>
+			<input type="text"
+				class="form-control col"
+				name="period"
+				placeholder="Period in hours"
+				[(ngModel)]="backup.period" />
+		</div>
+
+		<div class="form-group row"
+			*ngIf="backup.type == 'barchart'">
+			<label class="col-form-label col-sm-2">Window [minutes]</label>
+			<input type="text"
+				class="form-control col"
+				name="window"
+				placeholder="60"
+				[(ngModel)]="backup.window"/>
+		</div>
+
+
+		<div class="form-group row"
+			*ngIf="backup.type == 'piechart' || backup.type == 'barchart'">
+			<label class="col-form-label col-sm-2">Metric</label>
+			<input type="text"
+				class="form-control col"
+				name="metric"
+				placeholder="Metric"
+				[(ngModel)]="backup.metric"
+				[ngbTypeahead]="searchMetric" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Type</label>
+			<select class="custom-select form-control col" [(ngModel)]="backup.type" name="type">
+				<option *ngFor="let type of types" [value]="type.value">{{ type.name }}</option>
+			</select>
+		</div>
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">Cancel</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.scss b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.spec.ts
new file mode 100644
index 0000000..9646570
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DashItemComponent } from './dash-item.component';
+
+describe('DashItemComponent', () => {
+  let component: DashItemComponent;
+  let fixture: ComponentFixture<DashItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
new file mode 100644
index 0000000..44e6b1f
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+const metrics = ['Category', 'Node.Name', 'Node.SW', 'Target.IP4', 'Source.IP4']
+
+@Component({
+  selector: 'app-dash-item',
+  templateUrl: './dash-box-modal.component.html',
+  styleUrls: ['./dash-box-modal.component.scss']
+})
+export class DashBoxModalComponent implements OnInit {
+
+	@Input() data : Object;
+
+	// Array of options for type selector
+	private types = [
+		{
+			value : 'piechart',
+			name : 'Piechart'
+		},
+		{
+			value : 'barchart',
+			name : 'Barchart'
+		},
+		{
+			value : 'top',
+			name : 'Top N'
+		},
+		{
+			value : 'count',
+			name : 'Count'
+		}
+	]
+
+	private backup;
+	private modal;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		// Save current model as backup
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Typeahead lookup
+	  */
+	searchMetric = (term : Observable<string>) => {
+		return term
+			.debounceTime(200)
+			.distinctUntilChanged()
+			.map(term => term.length < 2 ? []
+				: metrics.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0,10));
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		console.log(result);
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		console.log(result);
+		this.activeModal.dismiss(result);
+	}
+
+}
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
new file mode 100644
index 0000000..ff06b8e
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -0,0 +1,112 @@
+<div class="box"
+	[(ngGridItem)]="box.config"
+	(onResizeStop)="resize($event)"
+	(onDragStop)="itemChange($event)">
+	<div class="handle">
+		<div class="row">
+			<h3 class="col h4">{{ box.title}}</h3>
+
+			<div ngbDropdown>
+				<a class="" id="dMenu" ngbDropdownToggle></a>
+				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dMenu">
+					<button class="dropdown-item" (click)="edit()">Edit</button>
+					<!--a class="dropdown-item" (click)="duplicate()">Duplicate</a-->
+					<a class="dropdown-item" (click)="remove()">Delete</a>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<section class="body" [ngSwitch]="box.type" *ngIf="data.length; else nodata">
+
+		<div *ngSwitchCase="'piechart'">
+			<ngx-charts-pie-chart #piechart
+			 [results]="data"
+			 [labels]="true"
+			 [legend]="true"
+			 [doughnut]="true"
+			 (select)="onSelect($event)">
+			</ngx-charts-pie-chart>
+		</div>
+
+		<div *ngSwitchCase="'barchart'">
+			<ngx-charts-area-chart-stacked
+				#areachart
+				[results]="data"
+				[xAxis]="true"
+				[yAxis]="true"
+				[timeline]="true"
+				[xAxisTickFormatting]="xAxis"
+				(select)="onSelect($event)">
+
+					<!--
+						This one shows when hovering above the whole chart
+						and represents the whole column with all values
+						in given tick.
+					-->
+					<ng-template #seriesTooltipTemplate let-model="model">
+						{{ model[0].name }}
+						<div class="tooltip-item" *ngFor="let item of model">
+							<span class="tooltip-item-color"
+								[style.background-color]="item.color">
+							</span> {{ item.series }}: {{ item.value }}
+						</div>
+						<!--pre style="color: #fff">{{ model | json }}</pre-->
+					</ng-template>
+
+					<!--
+						Tooltip for one specific point in chart
+					-->
+					<ng-template #tooltipTemplate let-model="model">
+						<div class="tooltip-item">
+							<p>{{ model.series }} | {{ model.name | date: 'dd/MM HH:MM:ss' }}</p>
+							<h5 class="text-center">{{ model.value }}</h5>
+						</div>
+					</ng-template>
+				</ngx-charts-area-chart-stacked>
+
+		</div>
+
+		<div *ngSwitchCase="'top'">
+			<ul class="list-group top-events">
+				<a [routerLink]="['../events', { 'id' : event.id.$oid}]"
+					*ngFor="let event of data"
+					class="list-group-item d-flex flex-row justify-content-center">
+					<span>
+						<i class="fa fa-tag" aria-hidden="true"></i>
+						{{ event?._id }}
+					</span>
+					<span>
+						<i class="fa fa-bar-chart" aria-hidden="true"></i>
+						{{ event?.FlowCount }}
+					</span>
+					<span>
+						<i class="fa fa-clock-o" aria-hidden="true"></i>
+						{{ event?.DetectTime.$date | date: 'dd/MM/yy hh:mm:ss' }}
+					</span>
+				</a>
+			</ul>
+		</div>
+
+		<div *ngSwitchCase="'count'" class="d-flex justify-content-center flex-column">
+			<h2 class="align-self-center">{{ data }}</h2>
+		</div>
+
+		<div *ngSwitchDefault>
+			No type of box is defined
+		</div>
+
+		<p class="text-center box-text">{{ box.content }}</p>
+
+	</section>
+
+	<ng-template #nodata>
+		<section class="body d-flex justify-content-center flex-column">
+				<h5 class="align-self-center" *ngIf="box.type != 'count'">No data to display</h5>
+				<h2 class="align-self-center" *ngIf="box.type == 'count'">{{ data }}</h2>
+			<span class="text-center">{{ box.content }}</span>
+		</section>
+	</ng-template>
+</div>
+
+<ng-template ngbModalContainer class="item-detail"></ng-template>
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
new file mode 100644
index 0000000..fa929f4
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
@@ -0,0 +1,79 @@
+.grid-item {
+	border: solid 1px #ccc;
+
+	.body {
+		width: 100%;
+		height: calc(100% - 50px);	// Height of handle element must be subtracted
+		background: #FFF;
+		overflow-x: hidden;
+
+		div {
+			width: calc(100% - 1em);
+			height: 100%;
+			margin: 0 0.5em;
+			display: block;
+		}
+
+		.box-text {
+			position: absolute;
+			bottom: -0.5em;
+			width: 100%;
+			padding: 0 0.5em;
+			background: #FFF;
+		}
+
+	}
+
+	&.moving {
+		box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
+			0px 7px 10px 1px rgba(0, 0, 0, 0.14),
+			0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+		z-index: 999;
+
+		.body div {
+			opacity: 0.25;
+		}
+	}
+
+	.handle {
+		width: 100%;
+		height: 50px;
+		background: #eee;
+		color: black;
+		font-weight: 500;
+		padding: 15px;
+		box-sizing: border-box;
+
+		.dropdown {
+			cursor: pointer;
+			margin-right: 1em;
+			font-size: 1.25em;
+			top: -0.25em;
+
+			&.show {
+				color: #999;
+			}
+
+			.dropdown-menu {
+				box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25);
+			}
+		}
+	}
+
+	.top-events {
+		padding-top: 0.5em;
+		a {
+			color: #000;
+
+			&:hover {
+				background-color: #f0f0f0;
+			}
+
+			span {
+				margin-right: 1em;
+			}
+
+		}
+	}
+}
+
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts
new file mode 100644
index 0000000..769a6d1
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DashBoxComponent } from './dash-box.component';
+
+describe('DashBoxComponent', () => {
+  let component: DashBoxComponent;
+  let fixture: ComponentFixture<DashBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
new file mode 100644
index 0000000..027217e
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -0,0 +1,226 @@
+import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DashBoxModalComponent } from '../dash-box-modal/dash-box-modal.component';
+
+
+import { BoxService } from '../box.service';
+import { Box } from '../box';
+
+/**
+  * Dashboard Box component
+  *
+  * It encapsulates a box which can of several types:
+  *		- piechart
+  *		- barchart
+  *		- sum
+  *		- top
+  *
+  * For displaying charts ngx-charts library is used. Before you say I should
+  * use nvd3 it is very buggy in Angular 4 (ng2-nvd3 and angular-nvd3).
+  */
+@Component({
+  selector: 'dash-box',
+  templateUrl: './dash-box.component.html',
+  styleUrls: ['./dash-box.component.scss'],
+  providers : [BoxService]
+})
+export class DashBoxComponent {
+
+	@Input() box;
+
+	// Keeps the original model
+	private backup;
+
+	@Input() index;
+
+	// Time offset
+	@Input() offset = 0;
+
+	/**
+	  * We use event emitter for parent interaction which holds the boxes array
+	  *
+	  * It might look that this should be in the dashboard component but
+	  * this component really operates only on itself.
+	  */
+	@Output() onDelete = new EventEmitter<Object>();
+	@Output() onDuplicate = new EventEmitter<Object>();
+	@Output() onSave = new EventEmitter<Object>();
+
+	@ViewChild("piechart")
+	private piechart;
+
+	@ViewChild("areachart")
+	private areachart;
+
+	private data = [];
+	private modalRef : any;
+
+	constructor(private boxService : BoxService,
+			   private modalService: NgbModal) {
+	}
+
+	/**
+	  * Shift time and fetch data on init
+	  */
+	ngOnInit() {
+		// Shift time for fetching correct data
+		this.timeShift();
+
+		switch (this.box.type) {
+			case "piechart":
+				// Fetch data
+				this.boxService.piechart(this.box).subscribe(
+					(data) => { this.data = data },
+					(err) => { console.error(err) }
+				);
+				break;
+			case "barchart":
+				// Fetch data
+				this.boxService.barchart(this.box).subscribe(
+					(data) => { this.data = data; this.processDates(); },
+					(err) => { console.error(err) }
+				);
+				break;
+
+			case "count":
+				this.boxService.count(this.box).subscribe(
+					(data) => { this.data = data },
+					(err) => { console.error(err) }
+				);
+				break;
+
+			case "top":
+				this.boxService.top(this.box).subscribe(
+					(data) => { this.data = data },
+					(err) => { console.error(err) }
+				);
+				break;
+
+			default:
+				console.warn("unknown type '%s'", this.box.type);
+				break;
+		}
+	}
+
+	/**
+	  * Set beginTime and endTime in given box of the period size
+	  *
+	  * These times serve as a window in which to look in the events.
+	  * period is the size of time window
+	  */
+	timeShift() {
+		let now = new Date();
+
+        this.box.beginTime = Math.floor((now.getTime() - this.box["period"]*60*60*1000 - this.offset * 60 * 60 * 1000)/1000);
+        this.box.endTime = Math.floor((Number(now) - this.offset * 60 * 60 * 1000)/1000);
+    }
+
+	/**
+	  * Convert dates to Date class so ngx charts can detect it is a date
+	  * and create the timeline below a chart
+	  */
+    processDates() {
+		this.data = this.data.map(category => {
+			category.series = category.series.map(item => {
+				item.date = item.name;
+				item.name = new Date(item.name*1000);
+				return item;
+			})
+
+			return category;
+		})
+    }
+
+	/**
+	  * Custom format of X axis ticks
+	  * unfortunately it cannot display hours/minutes becuase ngx sends just date
+	  */
+    xAxis = function(d) {
+    	let day = d.getDate();
+    	let month = d.getMonth();
+    	let hours = d.getHours();
+    	let minutes = d.getMinutes();
+		return day + '/' + month;
+	};
+
+	/**
+	  * Update the chart
+	  * Calls child method update()
+	  * More info here: https://github.com/swimlane/ngx-charts/blob/master/src/pie-chart/pie-chart.component.ts
+	  */
+    update() {
+    	console.log(this.piechart);
+    	console.log(this.areachart);
+
+    	if (this.piechart != undefined)
+			this.piechart.update();
+		else if(this.areachart != undefined)
+			this.areachart.update();
+    }
+
+	/**
+	  * Trigger a modal window which can edit the given box
+	  */
+	edit() {
+		// Create a backup of current model
+		this.backup = Object.assign({}, this.box);
+
+		// Open the modal and check results
+		this.modalRef = this.modalService.open(DashBoxModalComponent)
+		this.modalRef.componentInstance.data = this.box;
+		this.modalRef.result.then(
+			(result) => {
+				/**
+				  * Closed with a button, replace current model with the new one
+				  * Also would be nice to reload data
+				  */
+
+				this.save();
+
+				this.ngOnInit();
+			},
+			(reason) => {
+				// Dismissal of the modal, do nothing
+				console.debug("Modal dismissed");
+			}
+		);
+	}
+
+	/**
+	  * Remove this box from the array of boxes
+	  */
+	remove() {
+		console.debug("Deleting box");
+		this.onDelete.emit({"box" : this.box, "index" : this.index });
+	}
+
+	/**
+	  * Duplicate this box in the boxes array
+	  */
+	duplicate() {
+		this.onDuplicate.emit(this.box);
+	}
+
+	save() {
+		this.onSave.emit({});
+	}
+
+	resize(event) {
+		this.update();
+		this.save();
+	}
+
+	/**
+	  * Called when onDragStop is emitted to save the change
+	  */
+	itemChange(event) {
+		this.update();
+
+		// Must wait with saving, the change is not propagated fash enough
+		setTimeout(_ => { this.save() }, 100);
+	}
+
+	onSelect(event) {
+		console.log(event);
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html
new file mode 100644
index 0000000..46fa73f
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html
@@ -0,0 +1,34 @@
+<div class="modal-header">
+	<h4 class="modal-title">Editing "{{ backup.title }}"</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Title</label>
+			<input type="text"
+				class="form-control col"
+				name="title"
+				placeholder="Dashboard title"
+				[(ngModel)]="backup.title" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Offset [hours]</label>
+			<input type="text"
+				class="form-control col"
+				name="period"
+				placeholder="Offset in hours"
+				[(ngModel)]="backup.offset" />
+		</div>
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">Cancel</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.scss b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts
new file mode 100644
index 0000000..7b7e565
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashModalComponent } from './dash-modal.component';
+
+describe('DashModalComponent', () => {
+  let component: DashModalComponent;
+  let fixture: ComponentFixture<DashModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts
new file mode 100644
index 0000000..63140d6
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-dash-modal',
+  templateUrl: './dash-modal.component.html',
+  styleUrls: ['./dash-modal.component.scss']
+})
+export class DashModalComponent implements OnInit {
+
+	@Input() data : Object;
+
+	private backup;
+
+	constructor(private activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		console.log(result);
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		console.log(result);
+		this.activeModal.dismiss(result);
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
new file mode 100644
index 0000000..d9f07b7
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
@@ -0,0 +1,17 @@
+<div [ngGrid]="gridConfig">
+	<div *ngIf="boxes == []">You should add box</div>
+
+	<dash-box
+		[box]="box"
+		[index]="index"
+		[offset]="dashboard.offset"
+		(onDelete)="deleteBox($event)"
+		(onDuplicate)="duplicateBox($event)"
+		(onSave)="save()"
+		*ngFor="let box of boxes">
+	</dash-box>
+
+</div>
+
+<button (click)="addCleanBox()" class="btn btn-primary">Add Box</button>
+
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.scss b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts
new file mode 100644
index 0000000..4bd2b4c
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardViewComponent } from './dashboard-view.component';
+
+describe('DashboardViewComponent', () => {
+  let component: DashboardViewComponent;
+  let fixture: ComponentFixture<DashboardViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts
new file mode 100644
index 0000000..343c35a
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts
@@ -0,0 +1,127 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent } from 'angular2-grid';
+
+import { Box } from '../box';
+
+@Component({
+  selector: 'dashboard-view',
+  templateUrl: './dashboard-view.component.html',
+  styleUrls: ['./dashboard-view.component.scss']
+})
+export class DashboardViewComponent implements OnInit {
+
+	@Input() dashboard;
+	private boxes;
+
+	@Output() onSave = new EventEmitter<Object>();
+
+	constructor() { }
+
+	ngOnInit() {
+		this.boxes = this.dashboard["boxes"];
+	}
+	/**
+	  * Grid configuration taken from: https://github.com/BTMorton/angular2-grid/blob/master/demo-dashboard/app/app.component.ts
+	  */
+  	private gridConfig: NgGridConfig = <NgGridConfig>{
+		'margins': [5],
+		'draggable': true,
+		'resizable': true,
+		'max_cols': 0,
+		'max_rows': 0,
+		'visible_cols': 0,
+		'visible_rows': 0,
+		'min_cols': 1,
+		'min_rows': 1,
+		'col_width': 20,
+		'row_height': 20,
+		'cascade': 'left',
+		'min_width': 5,
+		'min_height': 5,
+		'fix_to_grid': false,
+		'auto_style': true,
+		'auto_resize': false,
+		'maintain_ratio': false,
+		'prefer_new': false,
+		'zoom_on_drag': false,
+		'limit_to_screen': true
+	};
+
+	/**
+	  * Add default box to boxes array
+	  */
+	addCleanBox() {
+		console.log("should add box");
+
+		let box = {
+			config : {
+				'dragHandle': '.handle',
+				'sizex': 10,
+				'sizey': 10,
+				'col': 1,
+				'row': 1,
+				'resizeHandle': null,
+				'borderSize': 15,
+				'fixed': false,
+				'draggable': true,
+				'resizable': true,
+				'payload': null,
+				'maxCols': 0,
+				'minCols': 0,
+				'maxRows': 0,
+				'minRows': 0,
+				'minWidth': 0,
+				'minHeight': 0,
+			},
+			title : "New Box",
+			content : "",
+			options : null,
+			type : "piechart",
+			beginTime : -1,
+			endTime : -1,
+			period : 240,
+			metric : "Category"
+		}
+
+		this.boxes.push(box);
+
+		// Save the new box to local storage
+		this.save();
+
+	}
+
+	addBox(box : Box) {
+		this.boxes.push(box);
+	}
+
+	/**
+	  * Remove a box from boxes array and save it
+	  */
+	deleteBox(box) {
+		console.log("should delete: ", box.box, box.index);
+
+		let index = this.boxes.indexOf(box.box, 0);
+
+		if (index > -1) {
+			this.boxes.splice(index, 1);
+			this.save();
+		}
+	}
+
+	/**
+	  * Duplicates given box and adds it to boxes array
+	  *
+	  * TODO: this causes the browser to freeze, don't know why
+	  */
+	duplicateBox(box : Box) {
+		console.log("duplicating")
+		let newbox = Object.assign({}, box);
+		newbox["title"] = "Duplicate of " + newbox["title"];
+		this.boxes.push(newbox);
+	}
+
+
+	save() {
+		this.onSave.emit();
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.html b/www/src/app/modules/nemea/dashboard/dashboard.component.html
new file mode 100644
index 0000000..87f4aeb
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.html
@@ -0,0 +1,47 @@
+<ngb-tabset type="pills" [destroyOnHide]="false" #tabs="ngbTabset" (tabChange)="change($event)">
+	<ngb-tab *ngFor="let dashboard of dashboards">
+		<ng-template ngbTabTitle>
+			{{ dashboard.title }}
+			<div ngbDropdown class="d-inline-block">
+				<span ngbDropdownToggle></span>
+
+				 <div class="dropdown-menu">
+					<a class="dropdown-item" (click)="editDashboard(dashboard)">Edit</a>
+					<a class="dropdown-item" (click)="deleteDashboard(dashboard, $event)">Delete</a>
+				</div>
+
+			</div>
+
+		</ng-template>
+		<ng-template ngbTabContent>
+
+			<dashboard-view
+				[dashboard]="dashboard"
+				(onSave)="save($event)">
+			</dashboard-view>
+		</ng-template>
+	</ngb-tab>
+	<ngb-tab>
+		<ng-template ngbTabTitle #title>+ Add new</ng-template>
+		<ng-template ngbTabContent #content>
+			<form novalidate
+				(ngSubmit)="addDashboard(dashTitle.value, offset.value)"
+				#dashform="ngForm"
+				class="form">
+				<div class="form-group">
+					<label>Dashboard Title</label>
+					<input type="text" #dashTitle name="title" placeholder="Dashboard title" required class="form-control">
+				</div>
+
+				<div class="form-group">
+					<label>Offset Time [hours]</label>
+					<input type="number" #offset name="offset" placeholder="0" class="form-control">
+				</div>
+
+				<button class="btn btn-primary" type="submit">Add</button>
+			</form>
+		</ng-template>
+	</ngb-tab>
+</ngb-tabset>
+
+<ng-template ngbModalContainer class="dash-modal"></ng-template>
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.scss b/www/src/app/modules/nemea/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.scss
@@ -0,0 +1 @@
+
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..a29783c
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..c0d775e
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -0,0 +1,158 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { DashModalComponent } from './dash-modal/dash-modal.component';
+
+import { UsersService } from 'app/modules/users/users.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+  providers : [ UsersService ]
+})
+export class DashboardComponent implements OnInit {
+
+	private dashboards : Array<any>;
+
+	// LocalStorage currentUser
+	private user : Object;
+	private modalRef;
+
+	@ViewChild('tabs')
+	private tabs;
+
+	constructor(private usersService : UsersService,
+			   private modalService: NgbModal) {}
+
+	/**
+	  * Get dashboard config from local storage
+	  *
+	  * If no box is there add a clean box (empty dashboard is a sad dashboard)
+	  */
+	ngOnInit() {
+		this.user = JSON.parse(localStorage["currentUser"]);
+
+		// Load settings for dashboard (boxes configuration)
+		try {
+			this.dashboards = this.user["user"]["settings"]["nemea"]["dashboard"];
+		} catch (e) {
+			console.log(e);
+			this.addCleanDashboard();
+		}
+	}
+
+	addCleanDashboard() {
+		this.dashboards = [{
+			title : "Untitled Dashboard",
+			offset : 0,
+			boxes : []
+		}]
+
+		this.save();
+	}
+
+	addDashboard(title : string, offset = 0) {
+		if (title.length) {
+			let dash = {
+				"title" : title,
+				"boxes" : [],
+				"offset" : Number(offset)
+			}
+
+			this.dashboards.push(dash)
+			this.save();
+		}
+	}
+
+	/**
+	  * Save settings of the dashboard to localStorage
+	  *
+	  * Reload the component in case of offset change
+	  *
+	  * This looks really bad but we can't be sure what is inside localStorage
+	  */
+	save($event = {}, reload = false) : void {
+
+		let user = JSON.parse(localStorage.getItem("currentUser"));
+
+		if (user['user']['settings'] == null)
+			user['user']["settings"] = { "nemea" : { "dashboard" : this.dashboards } };
+		else {
+			if ('nemea' in user['user']['settings']) {
+				if ('dashboard' in user['user']['settings']['nemea']) {
+					user['user']["settings"]["nemea"]["dashboard"] = this.dashboards;
+				} else {
+					user['user']["settings"]["nemea"] = { "dashboard" : this.dashboards };
+				}
+			} else {
+				user['user']["settings"] = { "nemea" : { "dashboard" : this.dashboards } };
+			}
+		}
+
+		this.usersService.update(user['user']['_id']['$oid'], user['user']).subscribe(
+			data => {
+				user['user'] = data;
+				localStorage.setItem("currentUser", JSON.stringify(user));
+				if (reload) {
+					this.ngOnInit();
+				}
+			},
+			error => {
+				console.log(error);
+				// Save local copy anyway
+				localStorage.setItem("currentUser", JSON.stringify(user));
+
+				if (reload) {
+					this.ngOnInit();
+				}
+
+			}
+		)
+	}
+
+	editDashboard(dashboard) {
+		const offset = dashboard["offset"]
+
+		this.modalRef = this.modalService.open(DashModalComponent);
+		this.modalRef.componentInstance.data = dashboard;
+
+		this.modalRef.result.then(
+			(result) => {
+				/**
+				  * Closed with a button, replace current model with the new one
+				  * Also would be nice to reload data
+				  */
+
+				this.save({}, dashboard['offset'] != offset);
+
+			},
+			(reason) => {
+				// Dismissal of the modal, do nothing
+				console.debug("Modal dismissed");
+			}
+		);
+	}
+
+	/**
+	  * Remove a dashboard from dashboard array and save it
+	  */
+	deleteDashboard(dashboard, $event) {
+
+		$event.preventDefault();
+
+		this.tabs.select('ngb-tab-1');
+
+		let index = this.dashboards.indexOf(dashboard, 0);
+
+		if (index > -1) {
+			this.dashboards.splice(index, 1);
+			this.save();
+		}
+	}
+
+	change($event) {
+		console.log($event);
+	}
+
+}
diff --git a/www/src/app/modules/nemea/events/event-detail/event-detail.component.html b/www/src/app/modules/nemea/events/event-detail/event-detail.component.html
index 9f80437..baa774c 100644
--- a/www/src/app/modules/nemea/events/event-detail/event-detail.component.html
+++ b/www/src/app/modules/nemea/events/event-detail/event-detail.component.html
@@ -8,9 +8,9 @@ <h4 class="modal-title">Event detail</h4>
 	<div [outerHTML]="data | idea" style="width: 50%"></div>
 </div>
 <div class="modal-footer">
-    <a [routerLink]="[nerdUrl, nerdUrlParams]" class="btn btn-primary">NERD</a>
-    <a [routerLink]="[scUrl, scUrlParams]" class="btn btn-primary">SecurityCloud</a>
-    <a [routerLink]="[ftasUrl, ftasUrlParams]" class="btn btn-primary">FTAS</a>
+    <button class="btn btn-primary" (click)="nerd()">NERD</button>
+    <button class="btn btn-primary" (click)="scgui()">SecurityCloud</button>
+	<button class="btn btn-primary" (click)="ftas()">FTAS</button>
 	<!--button type="button" class="btn btn-primary" (click)="activeModal.close()" disabled>
 		Source IP
 	</button>
diff --git a/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts b/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts
index b5a7405..1c9d9b9 100644
--- a/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts
+++ b/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts
@@ -1,62 +1,69 @@
 import { Component, OnInit, Input } from '@angular/core';
-import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'event-detail',
-  templateUrl: './event-detail.component.html',
-  styleUrls: ['./event-detail.component.scss']
+	selector: 'event-detail',
+	templateUrl: './event-detail.component.html',
+	styleUrls: ['./event-detail.component.scss']
 })
 export class EventDetailComponent implements OnInit {
-  @Input() data : Object;
+	@Input() data : Object;
 
-  ftasUrl : string = "/ftas";
-  ftasUrlParams : Object = {};
+	ftasUrl : string = "/ftas";
+	ftasUrlParams : Object = {};
 
-  scUrl : string = "/security-cloud";
-  scUrlParams : Object = {};
+	scUrl : string = "/security-cloud";
+	scUrlParams : Object = {};
 
-  nerdUrl : string = "/nerd";
-  nerdUrlParams : Object = {};
+	nerdUrl : string = "/nerd";
+	nerdUrlParams : Object = {};
 
-  constructor(public activeModal: NgbActiveModal) {}
+	constructor(public activeModal: NgbActiveModal,
+				private router : Router) {}
 
-  ngOnInit() {
-    this.generateFtasUrl();
-    this.generateScUrl();
-    this.generateNerdUrl();
-  }
+	ngOnInit() {
+	}
 
-  generateFtasUrl() {
-    console.log(this.data);
+	ftas() {
+		// Add source IP to query
+		if (this.data["Source"] != undefined &&
+				this.data["Source"][0]["IP4"] != undefined) {
+			this.ftasUrlParams["src_ip"] = this.data["Source"][0]["IP4"][0];
+			console.log("adding src IP")
+		}
 
-    if (this.data["Source"] != undefined && this.data["Source"][0]["IP4"] != undefined) {
-        this.ftasUrlParams["src_ip"] = this.data["Source"][0]["IP4"][0];
-        console.log("adding src IP")
-    }
+		// Add target IP to query
+		if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
+			this.ftasUrlParams["dst_ip"] = this.data["Target"][0]["IP4"][0];
+			console.log("adding dst IP")
+		}
 
-    if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
-        this.ftasUrlParams["dst_ip"] = this.data["Target"][0]["IP4"][0];
-        console.log("adding dst IP")
-    }
+		// Add time to query
+		this.ftasUrlParams["first"] = Math.floor(this.data["DetectTime"]["$date"]/1000) - 600;
+		this.ftasUrlParams["last"] = Math.floor(Date.now()/1000);
 
-    console.log(this.ftasUrl)
-  }
+		console.log(this.ftasUrlParams);
 
-  generateScUrl() {
-    console.log(this.data);
-    let time = new Date(this.data["DetectTime"]["$date"])
-    this.scUrlParams = {"eventtime" : Math.floor(time.getTime()/1000)}
+		this.activeModal.close([this.ftasUrl, this.ftasUrlParams]);
+	}
 
-    console.log(this.scUrlParams)
-  }
+	scgui() {
+		console.log(this.data);
+		let time = new Date(this.data["DetectTime"]["$date"])
+		this.scUrlParams = {"eventtime" : Math.floor(time.getTime()/1000)}
 
-  generateNerdUrl() {
-    if (this.data["Source"] != undefined && this.data["Source"][0]["IP4"] != undefined) {
-        this.nerdUrlParams["ip"] = this.data["Source"][0]["IP4"][0];
-    } else if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
-        this.nerdUrlParams["ip"] = this.data["Target"][0]["IP4"][0];
-    }
+		console.log(this.scUrlParams)
+		this.activeModal.close([this.scUrl, this.scUrlParams]);
+	}
 
-  }
+	nerd() {
+		if (this.data["Source"] != undefined && this.data["Source"][0]["IP4"] != undefined) {
+			this.nerdUrlParams["ip"] = this.data["Source"][0]["IP4"][0];
+		} else if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
+			this.nerdUrlParams["ip"] = this.data["Target"][0]["IP4"][0];
+		}
 
+		this.activeModal.close([this.nerdUrl, this.nerdUrlParams]);
+	}
 }
diff --git a/www/src/app/modules/nemea/events/event-item/event-item.component.html b/www/src/app/modules/nemea/events/event-item/event-item.component.html
index fdb5e24..2e3f110 100644
--- a/www/src/app/modules/nemea/events/event-item/event-item.component.html
+++ b/www/src/app/modules/nemea/events/event-item/event-item.component.html
@@ -16,7 +16,7 @@
 	<button [routerLink]="['.']" [queryParams]="{id : item._id.$oid }" class="btn btn-primary btn-sm">Expand</button>
 </td>
 
-<template ngbModalContainer class="item-detail"></template>
+<ng-template ngbModalContainer class="item-detail"></ng-template>
 
 <!--
 	Source: <span *ngIf="item.Source[0]">{{ item.Source[0].IP4[0] }} | {{ item.Source[0].Proto[0] }}</span>
diff --git a/www/src/app/modules/nemea/events/event-item/event-item.component.ts b/www/src/app/modules/nemea/events/event-item/event-item.component.ts
index ef9bafc..05b5d41 100644
--- a/www/src/app/modules/nemea/events/event-item/event-item.component.ts
+++ b/www/src/app/modules/nemea/events/event-item/event-item.component.ts
@@ -23,16 +23,25 @@ export class EventItemComponent implements OnInit {
 			params => {
 	            this.params = params;
 
-	            if (this.params['id'] && this.params['id'] == this.item['_id']['$oid']) {
-	            	if (!this.modalRef) {
-						this.modalRef = this.modalService.open(EventDetailComponent);
-						this.modalRef.componentInstance.data = this.item;
-					}
-
-					// We can ditch the parameter since it is always null
-					this.modalRef.result
-						.then(p => {this.unsetId(this.router, this.params)})
-						.catch(p => {this.unsetId(this.router, this.params)});
+	            if (this.params['id'] &&
+						this.params['id'] == this.item['_id']['$oid'] &&
+						!this.modalRef) {
+					this.modalRef = this.modalService.open(EventDetailComponent);
+					this.modalRef.componentInstance.data = this.item;
+					this.modalRef.result.then(
+						(result) => {
+							// The modal was closed and we shall redirect
+							if (result != undefined) {
+								console.log('should redirect', result);
+								this.router.navigate(result);
+							} else {
+								this.unsetId(this.router, this.params)
+							}
+						},
+						(reason) => {
+							//dismissal
+							this.unsetId(this.router, this.params)
+						});
 				}
 		});
 	}
@@ -45,6 +54,4 @@ export class EventItemComponent implements OnInit {
 		p['id'] = undefined;
 		r.navigate(['nemea/events'], {queryParams : p});
 	}
-
-	//@HostListener('click')
 }
diff --git a/www/src/app/modules/nemea/events/events.component.html b/www/src/app/modules/nemea/events/events.component.html
index 00e403e..2bc03aa 100644
--- a/www/src/app/modules/nemea/events/events.component.html
+++ b/www/src/app/modules/nemea/events/events.component.html
@@ -8,50 +8,119 @@ <h2>
 	<form (ngSubmit)="runQuery()" name="query_form" class="query box">
 		<div class="d-flex flex-row">
 			<div class="row-space">
-				<ngb-datepicker [(ngModel)]="query.date" (navigate)="date = $event.next" name="datepicker"></ngb-datepicker>
-			</div>
+				<div class="form-group">
+					<label for="timeFrom">Time from</label>
+						<ngb-timepicker [(ngModel)]="query.from"
+							name="timeFrom"
+							[spinners]="false">
+						</ngb-timepicker>
 
-			<div class="d-flex flex-column row-space">
+					<div class="input-group">
+						<input class="form-control"
+							placeholder="{{ query.date.year}}-{{query.date.month}}-{{query.date.day}}"
+							name="dp"
+							ngbDatepicker
+							[(ngModel)]="query.date"
+							#d="ngbDatepicker"
+							name="datepicker">
+						<div class="input-group-addon" (click)="d.toggle()">
+							<i class="fa fa-calendar-o" aria-hidden="true"></i>
+						</div>
+					</div>
+				</div>
 
-				<label for="timeFrom">Time from</label>
-				<input [(ngModel)]="query.from" type="text" placeholder="12:00" [ngModelOptions]="{ debounce: 100 }" validate-format name="timeTo">
-				<p *ngIf="False">Bad time format</p>
+				<div class="form-group">
+					<label>Time To</label>
+					<ngb-timepicker [(ngModel)]="query.to"
+						name="timeTo"
+						[spinners]="false">
+					</ngb-timepicker>
 
-				<label>To</label>
-				<input [(ngModel)]="query.to" type="text" placeholder="13:00" validate-format validate-hours [ngModelOptions]="{ debounce: 100 }" name="timeFrom">
-				<p *ngIf="False">Bad time format or "TO" time sooner than "FROM" time</p>
+					<div class="input-group">
+						<input class="form-control"
+							placeholder="{{ query.date.year}}-{{query.date.month}}-{{query.date.day}}"
+							name="dp"
+							ngbDatepicker
+							[(ngModel)]="query.date"
+							#d="ngbDatepicker"
+							name="datepicker">
+						<div class="input-group-addon" (click)="d.toggle()">
+							<i class="fa fa-calendar-o" aria-hidden="true"></i>
+						</div>
+					</div>
+
+				</div>
+			</div>
 
-				<label>Category</label>
-				<input [(ngModel)]="query.category" name="Category">
+			<div class="d-flex flex-column row-space">
 
-				<label>Description</label>
-				<input [(ngModel)]="query.description" name="Description">
+				<div class="form-group">
+					<label>Category</label>
+					<input [(ngModel)]="query.category" name="Category" class="form-control">
+				</div>
 
-				<label>Limit</label>
-				<input [(ngModel)]="query.limit" name="Limit">
+				<div class="form-group">
+					<label>Description</label>
+					<input [(ngModel)]="query.description" name="Description" class="form-control">
+				</div>
 			</div>
 
 			<div class="d-flex flex-column row-space">
-				<label>Order by</label>
-				<input type="text" [(ngModel)]="query.orderby" name="OrderBy">
+				<div class="form-group">
+					<label>Limit</label>
+					<input [(ngModel)]="query.limit" name="Limit" class="form-control">
+				</div>
+
+				<div class="form-group">
+					<label>Order by</label>
+					<input type="text" [(ngModel)]="query.orderby" name="OrderBy" class="form-control">
+				</div>
 
 				<label>Direction</label>
 				<div class="btn-group" data-toggle="buttons">
-					<label class="btn btn-primary" [ngClass]="{'active' : query.dir == 1}">
-						<input type="radio" name="options" id="option1"
-							autocomplete="off" [value]="1" [(ngModel)]="query.dir"> Ascending
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : query.dir == 1}"
+						title="Earliest first">
+						<input type="radio" data-toggle="tooltip"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="1"
+							[(ngModel)]="query.dir">
+						Ascending
 					</label>
-					<label class="btn btn-primary" [ngClass]="{'active' : query.dir == -1}">
-						<input type="radio" name="options" id="option1" 
-							autocomplete="off" [value]="-1" [(ngModel)]="query.dir"> Descending
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : query.dir == -1}"
+						title="Latest first">
+						<input type="radio"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="-1"
+							[(ngModel)]="query.dir">
+						Descending
 					</label>
 				</div>
+			</div>
+			<div class="d-flex flex-column row-space">
+				<div class="form-group">
+					<label>Source IP</label>
+					<input type="text" [(ngModel)]="query.srcip" name="srcip" class="form-control">
+				</div>
 
-				<label>Source IP</label>
-				<input type="text" [(ngModel)]="query.srcip" name="srcip">
+				<div class="form-group">
+					<label>Destination IP</label>
+					<input type="text" [(ngModel)]="query.dstip" name="dstip" class="form-control">
+				</div>
+
+				<div class="form-group">
 
-				<label>Destination IP</label>
-				<input type="text" [(ngModel)]="query.dstip" name="dstip">
+					<label class="custom-control custom-checkbox">
+						<input type="checkbox" class="custom-control-input" [(ngModel)]="hideWhitelisted" name="whitelisted">
+						<span class="custom-control-indicator"></span>
+						<span class="custom-control-description">Hide whitelisted items ({{ totalWhitelisted }})</span>
+					</label>
+				</div>
 			</div>
 
 			<div class="d-flex flex-column row-space">
@@ -98,7 +167,7 @@ <h3 class="text-center" *ngIf="loadBtn == 'LOADING...'">{{ loadBtn }}</h3>
 					<h3 class="text-center" *ngIf="loadBtn != 'LOADING...'"><em>No events match given criteria.</em></h3>
 				</td>
 			</tr>
-			<tr nemea-event *ngFor="let event of events" [item]="event">
+            <tr nemea-event *ngFor="let event of events" [item]="event" [ngClass]="{'whitelisted' : event?._CESNET?.Whitelisted == 'True', 'hidden' : hideWhitelisted}">
 			</tr>
 		</tbody>
 		<tfoot>
@@ -111,7 +180,7 @@ <h3 class="text-center" *ngIf="loadBtn != 'LOADING...'"><em>No events match give
 						Load next <span *ngIf="remaining?.total > 0">
 							{{ query.limit < remaining?.total ? query.limit : remaining?.total }}</span>
 							<span *ngIf="remaining?.total == -1">{{ query.limit }}</span> items<br/>
-							<small *ngIf="remaining?.total > 0">{{ remaining.total }}<span *ngIf="remaining.total == 10000">+</span> remaining</small>
+							<small *ngIf="remaining?.total > 0">{{ remaining.total - 1}}<span *ngIf="remaining.total > query.limit">+</span> remaining</small>
 					</button>
 				</td>
 			</tr>
diff --git a/www/src/app/modules/nemea/events/events.component.scss b/www/src/app/modules/nemea/events/events.component.scss
index 75b11fc..e70b6d4 100644
--- a/www/src/app/modules/nemea/events/events.component.scss
+++ b/www/src/app/modules/nemea/events/events.component.scss
@@ -2,3 +2,13 @@
 	margin: 1em auto 0 auto;
     display: block;
 }
+
+tr {
+    &.whitelisted {
+        color: #AAA;
+        background: #fbfbfb;;
+        &.hidden {
+            display: none;
+        }
+    }
+}
diff --git a/www/src/app/modules/nemea/events/events.component.ts b/www/src/app/modules/nemea/events/events.component.ts
index c6046d1..ed51f9c 100644
--- a/www/src/app/modules/nemea/events/events.component.ts
+++ b/www/src/app/modules/nemea/events/events.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
 import { EventsService } from './events.service';
 
 import { EventItemComponent } from './event-item/event-item.component';
 
-const now = new Date();
-
 @Component({
 	selector: 'nemea-events',
 	templateUrl: './events.component.html',
@@ -15,50 +13,73 @@ const now = new Date();
 })
 export class EventsComponent implements OnInit {
 
-	events : Array<Object>;
-	remaining : Object = {total : (-1)};
-	query : Object = {
-        from : "12:00",
-        to : "",
-		date : {
-			year: now.getFullYear(),
-			month: now.getMonth() + 1,
-			day: now.getDate()
-		},
-        description : "",
-        category : "",
-        orderby : "DetectTime",
-        dir : 1,
-        limit : 100,
-        srcip : "",
-        dstip : ""
+	events : any;
+	remaining : Object = {
+		total : -1
 	}
+
+	private now = new Date();
+
+	query : Object;
+
 	loadBtn = "LOAD";
 	error;
+	totalWhitelisted = 0;
 
-	constructor(private eventsService : EventsService, private router : Router) { }
+	constructor(private eventsService : EventsService,
+				private router : Router,
+				private route : ActivatedRoute) { }
 
 	ngOnInit() {
+		this.reset();
 		this.loadBtn = "LOADING...";
-		this.eventsService.last_events(100).subscribe(
-			(data) => { this.events = data; this.loadBtn = "LOAD" },
-			(error : Object) => this.processError(error)
-		);
-		this.selectToday();
+
+		this.route.queryParams.subscribe((params : Params) => {
+
+			if (!Object.keys(params).length) {
+				console.debug('should load default');
+
+				this.eventsService.last_events(100).subscribe(
+					(data) => {
+						this.events = data;
+						this.loadBtn = "LOAD";
+						this.countWhitelisted();
+					},
+					(error : Object) => this.processError(error)
+				);
+
+			} else {
+				console.debug('should load by params')
+				console.log(params);
+
+				for(let key in params) {
+					console.log(key, params[key])
+					try {
+						this.query[key] = params[key];
+					} catch (e) {
+						console.log(e);
+						continue;
+					}
+				}
+
+			}
+		});
 	}
 
 	private processData(data : any) {
 		this.remaining = data.pop();
 		this.events = data;
 		this.loadBtn = "LOAD";
-		this.setParams();
+		//this.setParams();
+		this.countWhitelisted();
 	}
 
 	private appendData(data : any) {
 		this.remaining = data.pop();
 		this.events = this.events.concat(data);
 		this.loadBtn = "LOAD";
-		this.setParams();
+		//this.setParams();
+		this.countWhitelisted();
 	}
 
 
@@ -69,72 +90,97 @@ export class EventsComponent implements OnInit {
 		this.setParams();
 	}
 
-	private setParams() {
+	/**
+	  * generate params to query and route, this includes navigating to same route which
+	  * doesn't trigger reloading of the route
+	  *
+	  * The dates are kept in miliseconds since we are working in JS and only
+	  * when going to the API they are floored to seconds
+	  */
+	private params() {
 		console.log('setting params');
-		this.router.navigate(['nemea/events'], {queryParams : this.query});
+
+		let fromDate = new Date(this.query['date']['year'],
+						   this.query['date']['month'],
+						   this.query['date']['day'],
+						   this.query['from']['hour'],
+						   this.query['from']['minute']);
+
+		let toDate = new Date(this.query['date']['year'],
+						   this.query['date']['month'],
+						   this.query['date']['day'],
+						   this.query['to']['hour'],
+						   this.query['to']['minute']);
+
+		// Date is ommitted and will be deducted from the 'from' field
+		return {
+			from : fromDate.getTime(),
+			to : toDate.getTime(),
+			description : this.query['description'] || null,
+			category : this.query['category'] || null,
+			orderby : this.query['orderby'] || null,
+			dir : this.query['dir'],
+			limit : this.query['limit'],
+			scrip : this.query['srcip'] || null,
+			dstip : this.query['dstip'] || null
+		}
+
 	}
 
-	selectToday() {
-		this.query['date'] = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
+	/**
+	  * Navigate to same route which doesn't trigger reloading of the route
+	  */
+	private setParams() {
+		this.router.navigate(['nemea/events'], {queryParams : this.params()});
 	}
 
 	reset() {
+		let now = new Date();
 		this.query = {
-			from : "12:00",
-			to : "",
+			from : {
+				hour: (now.getHours() - 1),
+				minute: now.getMinutes()
+			},
+			to : {
+				hour: now.getHours(),
+				minute: now.getMinutes()
+			},
 			date : {
 				year: now.getFullYear(),
-				month: now.getMonth() + 1,
+				month: now.getMonth(),
 				day: now.getDate()
 			},
 			description : "",
 			category : "",
 			orderby : "DetectTime",
-			dir : 1,
+			dir : -1,
 			limit : 100,
 			srcip : "",
 			dstip : ""
 		}
 	}
 
-	private parseHours(time : any) : number {
-		if ((typeof time == "number" && time > 0) || time == undefined)
-			return time;
-
-		if (typeof time == "string" && time == "")
-			return Math.floor(Date.now() / 1000);
-
-		let sTime = time.split(':');
-		let hours = new Date(this.query['date']['year'],
-			this.query['date']['month'] - 1 ,this.query['date']['day']);
-		hours.setHours(Number(sTime[0]));
-		hours.setMinutes(Number(sTime[1]));
-
-		return Math.floor(hours.getTime() / 1000);
-	}
-
 	runQuery(append = false) {
 		this.loadBtn = "LOADING...";
 
-		let queryParams = {
-			from : this.parseHours(this.query['from']),
-			to : this.parseHours(this.query['to']),
-			limit : this.query['limit'],
-			dir : this.query['dir'],
-			orderby : this.query['orderby']
-		}
+		let queryParams = this.params();
+		console.log(queryParams)
+
+		// Convert to unix timestamp (second)
+		queryParams["to"] = Math.floor(queryParams["to"]/1000)
+		queryParams["from"] = Math.floor(queryParams["from"]/1000)
 
 		// Inital load of events and we need deeper history
-		if (this.remaining['total'] == -1 && append) {
-			this.query['to'] = this.query['from'];
-			this.query['from'] = undefined;
+		if (append) {
 			queryParams['dir'] = (-1);
+			queryParams['from'] = null;
 		}
 
 		console.log(queryParams);
 
 		this.eventsService.query(queryParams).subscribe(
 			(data) => {
+			console.log(data[100]);
 				if (append)
 					this.appendData(data);
 				else
@@ -144,8 +190,27 @@ export class EventsComponent implements OnInit {
 	}
 
 	getNext(time : number) {
-		console.info(time);
-		this.query['from'] = Math.floor((time)/1000);
+		console.log("getnext")
+		let date = new Date(time);
+		this.query['date'] = {
+				year: date.getFullYear(),
+				month: date.getMonth(),
+				day: date.getDate()
+			}
+
+		this.query['to']['hour'] = date.getHours();
+		this.query['to']['minute'] = date.getMinutes();
 		this.runQuery(true);
 	}
+
+	private countWhitelisted() {
+	    for (let item of this.events) {
+	        try {
+	            if (item["_CESNET"]["Whitelisted"] == "True")
+	                this.totalWhitelisted += 1;
+            } catch(e) {
+                continue;
+            }
+	    }
+	}
 }
diff --git a/www/src/app/modules/nemea/events/events.service.ts b/www/src/app/modules/nemea/events/events.service.ts
index 4744879..5ccea66 100644
--- a/www/src/app/modules/nemea/events/events.service.ts
+++ b/www/src/app/modules/nemea/events/events.service.ts
@@ -9,7 +9,6 @@ export class EventsService {
 	last_events(items : number) {
 		return this.http.get('/nemea/events/' + String(items)).map(
 			(response : Response) => {
-				console.log(response);
 				let body : Object = response.json();
 				return body;
 			})
@@ -23,7 +22,6 @@ export class EventsService {
 		}
 		return this.http.get('/nemea/events/query', {search : params}).map(
 			(response : Response) => {
-				console.log(response);
 				let body = response.json();
 				return body;
 			})
diff --git a/www/src/app/modules/nemea/nemea.component.ts b/www/src/app/modules/nemea/nemea.component.ts
index 1a61a9b..e081390 100644
--- a/www/src/app/modules/nemea/nemea.component.ts
+++ b/www/src/app/modules/nemea/nemea.component.ts
@@ -13,14 +13,29 @@ export class nemeaBase {};
 		<section class="box">
 			<h2>
 				<a routerLink='status'>
-					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Status
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Status
 				</a>
 			</h2>
 		</section>
 		<section class="box">
 			<h2>
 				<a routerLink='events'>
-					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Events
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Events
+				</a>
+			</h2>
+		</section>
+
+		<section class="box">
+			<h2>
+				<a routerLink='dashboard'>
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Dashboard
+				</a>
+			</h2>
+		</section>
+		<section class="box">
+			<h2>
+				<a routerLink='reporters'>
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Reporter Configuration
 				</a>
 			</h2>
 		</section>
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index d609f48..0fd8382 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -3,16 +3,49 @@ import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
 import { FormsModule }		from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { nemeaBase, nemeaComponent } from './nemea.component';
-import { nemeaStatusComponent } from './status/nemea_status.component'
-import { EventsComponent } from './events/events.component'
+
+import { NgGridModule } from 'angular2-grid';
+
+import { CodemirrorModule } from 'ng2-codemirror';
+
+/**
+  * ngx charts
+  */
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { IdeaPipe } from './events/idea.pipe';
+
+import { nemeaBase, nemeaComponent } from './nemea.component';
+
+/**
+  * NEMEA Events
+  */
+import { EventsComponent } from './events/events.component';
 import { EventItemComponent } from './events/event-item/event-item.component';
 import { EventDetailComponent } from './events/event-detail/event-detail.component';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
+/**
+  * NEMEA Dashboard
+  */
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashBoxComponent } from './dashboard/dash-box/dash-box.component';
+import { DashBoxModalComponent } from './dashboard/dash-box-modal/dash-box-modal.component';
+
+/**
+  * NEMEA Reporter Configuration
+  */
+import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
+
+/**
+  * NEMEA Status
+  */
+import { nemeaStatusComponent } from './status/nemea_status.component';
+import { DashboardViewComponent } from './dashboard/dashboard-view/dashboard-view.component';
+import { DashModalComponent } from './dashboard/dash-modal/dash-modal.component';
+
 const nemeaRoutes : Routes = [
 	{
 		path : 'nemea',
@@ -50,18 +83,44 @@ const nemeaRoutes : Routes = [
 				data : {
 					role : 10
 				}
+			},
+			{
+				path : 'dashboard',
+				component : DashboardComponent,
+				canActivate : [AuthGuard],
+				data : {
+					role : 255
+				}
+			},
+			{
+				path : 'reporters',
+				component: nemeaReporterConfComponent,
+				canActivate : [AuthGuard],
+				data : {
+					role : 10
+				}
+			},
+            {
+				path : 'reporters/:id',
+				component: nemeaReporterConfComponent,
+				canActivate : [AuthGuard],
+				data : {
+					role : 10
+				}
 			}
 		]
 	}
 ];
 
-//export const dummyRouting = RouterModule.forChild(dummyRoutes);
-
 @NgModule({
 	imports : [
 		CommonModule,
 		FormsModule,
 		SafePipeModule,
+		CodemirrorModule,
+		NgGridModule,
+		BrowserAnimationsModule,
+		NgxChartsModule,
 		NgbModule.forRoot(),
 		RouterModule.forChild(nemeaRoutes)
 	],
@@ -70,11 +129,22 @@ const nemeaRoutes : Routes = [
 		nemeaBase,
 		nemeaComponent,
 		nemeaStatusComponent,
+		nemeaReporterConfComponent,
 		EventsComponent,
 		EventItemComponent,
-		EventDetailComponent],
+		EventDetailComponent,
+		DashboardComponent,
+		DashBoxModalComponent,
+		DashBoxComponent,
+		DashboardViewComponent,
+		DashModalComponent
+		],
 	exports : [],
 	providers : [SafePipe],
-	entryComponents : [EventDetailComponent]
+	entryComponents : [
+		EventDetailComponent,
+		DashBoxModalComponent,
+		DashModalComponent
+	]
 })
 export class nemeaModule {};
diff --git a/www/src/app/modules/nemea/reporter/reporter.service.spec.ts b/www/src/app/modules/nemea/reporter/reporter.service.spec.ts
new file mode 100644
index 0000000..f7d207d
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { ReporterService } from './reporter.service';
+
+describe('ReporterService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ReporterService]
+    });
+  });
+
+  it('should ...', inject([ReporterService], (service: ReporterService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/www/src/app/modules/nemea/reporter/reporter.service.ts b/www/src/app/modules/nemea/reporter/reporter.service.ts
new file mode 100644
index 0000000..39eebd8
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter.service.ts
@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+let test_conf = [["hoststats2idea", {"idx": 12, "status": "running", "CPU-u": 0, "MEM-rss": 24502272, "MEM-vms": 209367040, "config": "/etc/nemea/reporters/config.yaml", "CPU-s": 0, "outputs": [], "inputs": [{"messages": 1, "type": "t", "is-conn": 1, "ID": "12002", "buffers": 1}], "path": "python", "params": "/usr/bin/nemea/hoststats2idea.py --name=cz.cesnet.nemea.hoststats --config=/etc/nemea/reporters/config.yaml --verbose=1"}], ["haddrscan2idea", {"idx": 13, "status": "stopped", "CPU-u": 1, "MEM-rss": 15761408, "MEM-vms": 122785792, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/haddrscan2idea.py", "params": "--name=cz.cesnet.nemea.haddrscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["vportscan2idea", {"idx": 14, "status": "stopped", "CPU-u": 1, "MEM-rss": 15761408, "MEM-vms": 122785792, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/vportscan2idea.py", "params": "--name=cz.cesnet.nemea.vportscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["bruteforce2idea", {"idx": 15, "status": "stopped", "CPU-u": 1, "MEM-rss": 15503360, "MEM-vms": 122511360, "CPU-s": 0, "outputs": [], "inputs": [], "path": "python", "params": "/usr/bin/nemea/bruteforce2idea.py --name=cz.cesnet.nemea.bruteforce_detector --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["amplification2idea", {"idx": 16, "status": "stopped", "CPU-u": 1, "MEM-rss": 15769600, "MEM-vms": 122761216, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/amplification2idea.py", "params": "--name=cz.cesnet.nemea.amplification_detection --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["ipblacklist2idea", {"idx": 17, "status": "stopped", "CPU-u": 1, "MEM-rss": 15785984, "MEM-vms": 122806272, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/ipblacklist2idea.py", "params": "--name=cz.cesnet.nemea.ipblacklistfilter --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["voipfraud2idea", {"idx": 22, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/voipfraud2idea.py", "params": "--name=org.tf-csirt.nemea.voipfraud_detection --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["sipbf2idea", {"idx": 25, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/sipbf2idea.py", "params": "--name=org.tf-csirt.nemea.sip_bf_detector --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["haddrscan2idea2", {"idx": 27, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/haddrscan2idea.py", "params": "--name=org.tf-csirt.nemea.haddrscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["vportscan2idea2", {"idx": 28, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/vportscan2idea.py", "params": "--name=org.tf-csirt.nemea.vportscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["hoststats2idea2", {"idx": 34, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "python", "params": "/usr/bin/nemea/hoststats2idea.py --name=org.tf-csirt.nemea.hoststats --mongodb=nemeadb --mongodb-coll=alerts_new"}]];
+
+let test_rep_config = `custom_actions:
+- id: warden1
+  type: warden
+  warden:
+    url: https://warden1
+- id: mongo1
+  type: mongo
+  host: localhost
+  #port: 1234
+  db: nemea_test
+  collection: alerts
+- id: marktest
+  type: mark
+  mark:
+    path: Mark
+    value: test
+- id: markwhitelisted
+  type: mark
+  mark:
+    path: _CESNET.Whitelisted
+    value: 'True'
+addressgroups:
+- id: main_whitelist
+  file: "whitelists/whitelist1"
+- id: whitelist2
+  list:
+  - 1.1.0.0/24
+  - 1.2.3.4
+rules:
+- id: 1
+  condition: Source.IP4 in main_whitelist or Target.IP4 in main_whitelist
+  actions:
+  - markwhitelisted
+  - mongo1
+  elseactions:
+  - mongo1`
+
+
+@Injectable()
+export class ReporterService {
+
+    constructor(private http : Http) { }
+
+    reporters_dummy() {
+        return test_conf;
+    }
+
+    reporters() {
+        return this.http.get('/nemea/reporters').map(
+            (response : Response) => {
+                return response.json();
+            })
+            .catch(this.handleError);
+    }
+
+    config_dummy(idx) {
+        if (idx < 0)
+            throw "Index not set";
+
+        console.debug("Should get id " + idx)
+        return test_rep_config;
+    }
+
+    save(idx : number, conf : string) {
+        if (idx < 0)
+            throw "Index not set";
+
+        if (conf == '')
+            throw "Configuration is empty"
+
+        console.log(idx);
+        console.log(conf);
+    }
+
+    private handleError(err : Response | any) {
+        return Promise.reject(err);
+    }
+
+}
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.component.ts b/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
new file mode 100644
index 0000000..9fb7c41
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
@@ -0,0 +1,98 @@
+import { Component, Pipe, PipeTransform } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ReporterService } from './reporter.service';
+
+//import { nConfService } from './exporter_configuration.service';
+
+@Component({
+	selector : 'nemea-reporter-conf',
+	templateUrl : './reporter_conf.html',
+	styleUrls : ['./reporter_conf.scss'],
+	providers : [ReporterService]
+})
+export class nemeaReporterConfComponent {
+
+    reporters = [];
+    error : string = '';
+    selectedConfig : string = '';
+    activeConfig = -1;
+
+    config = {
+        lineNumbers: true,
+        mode : "x-yaml",
+        gutter : true
+    };
+
+	constructor(private router : Router, private reporterService : ReporterService) {}
+
+	ngOnInit() {
+	    /*this.reporterService.reporters().subscribe(
+			(data) => { this.reporters = data; },
+			(error : Object) => this.processError(error)
+		);*/
+
+	   this.reporters = this.reporterService.reporters_dummy();
+	}
+
+	ngOnDestroy() {
+	}
+
+	selectReporter(reporter : number) {
+	    console.log(reporter);
+	    this.activeConfig = reporter['idx'];
+	    try {
+    	    this.getConfig(reporter["config"])
+        } catch (err) {
+            this.error = err;
+        }
+
+	    this.router.navigate(["nemea/reporters", reporter['idx']])
+	}
+
+	getConfig(path : string) {
+	    if (path == undefined) {
+	        this.error = "Config file for this reporter doesn't exist";
+	        this.selectedConfig = '';
+	        return;
+	    }
+	    this.error = '';
+	    console.log("should get " + path)
+
+	    this.selectedConfig = this.reporterService.config_dummy(this.activeConfig);
+	}
+
+	private processError(error : Object) {
+		console.log(error);
+		this.error = "Something went wrong";
+	}
+
+	saveConfig() {
+	    try {
+	        this.reporterService.save(this.activeConfig, this.selectedConfig);
+        } catch (err) {
+            console.log(err)
+            this.error = err;
+
+        }
+	    /*
+	    for (let rep of this.reporters) {
+	        if (rep[1]['idx'] == this.activeConfig) {
+	            console.log(rep)
+	            return;
+            }
+	    }
+
+        console.error("Couldnt find the exporter")
+        */
+	}
+
+	onBlur() {
+	    console.log("onblur");
+	}
+
+	onFocus() {
+	    console.log("onfocus");
+	}
+
+}
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.html b/www/src/app/modules/nemea/reporter/reporter_conf.html
new file mode 100644
index 0000000..81158d6
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.html
@@ -0,0 +1,49 @@
+<h2>
+	<a routerLink='/nemea'>
+		<i class="fa fa-chevron-left" aria-hidden="true"></i> Nemea
+	</a>
+</h2>
+
+
+
+
+<div id="content" class="container-fluid">
+    <div class="row">
+        <div class="reporter-list col-4">
+            <section class="box reporter" [ngClass]="{'active' : activeConfig == rep[1]['idx']}" *ngFor="let rep of reporters" (click)="selectReporter(rep[1])">
+                <h3>
+                    {{ rep[0] }}
+                    <span class="status {{ rep[1]['status'] }}" [class]="">{{ rep[1]['status'] }}</span>
+                </h3>
+                <p>Memory Usage: {{ rep[1]["MEM-vms"] / 1048576 | number : '1.3-3' }} MB</p>
+                <!--p>Parameters: {{ rep[1]["params"] }}</p-->
+                <p>Config path: {{ rep[1]["config"] }}</p>
+                <!--{{ rep | json }}-->
+            </section>
+        </div>
+
+        <div class="config col-8">
+            <section class="box">
+                <div class="alert alert-danger" role="alert" *ngIf="error != ''">
+                    {{ error }}
+                </div>
+
+                <div *ngIf="selectedConfig == '' && error == ''">
+                    <div class="alert alert-info">
+                        Please select a reporter
+                    </div>
+                </div>
+
+                <div *ngIf="selectedConfig != '' || activeConfig >= 0">
+                    <codemirror [(ngModel)]="selectedConfig"
+                        [config]="config"
+                        (focus)="onFocus()"
+                        (blur)="onBlur()">
+                    </codemirror>
+
+                </div>
+            </section>
+            <button class="btn btn-primary" value="Save config" (click)="saveConfig()" [disabled]="activeConfig < 0">Save config</button>
+        </div>
+    </div>
+</div>
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.scss b/www/src/app/modules/nemea/reporter/reporter_conf.scss
new file mode 100644
index 0000000..57851d3
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.scss
@@ -0,0 +1,40 @@
+$light-grey : #EEE;
+
+h3 {
+    span {
+        font-size: 0.5em;
+        font-weight: normal;
+        background-color: $light-grey;
+        padding: 0.25em 0.5em;
+        position: relative;
+        bottom: 0.45em;
+        &.running {
+            color: green;
+        }
+
+        &.stopped {
+            color: red;
+        }
+    }
+}
+
+.config {
+    height: 100%;
+    display: block;
+    position: relative;
+    right: 1em;
+
+    .box {
+        //height: 90vh;
+    }
+
+    textarea {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.active {
+    border: 1px solid #CCC;
+    background: #EEE;
+}
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.service.ts b/www/src/app/modules/nemea/reporter/reporter_conf.service.ts
new file mode 100644
index 0000000..cf7470c
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class nConfService {
+	constructor(private http : Http) {}	
+}
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html
new file mode 100644
index 0000000..b8ff504
--- /dev/null
+++ b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html
@@ -0,0 +1,67 @@
+<div class="modal-header">
+	<h4 class="modal-title">NERD Settings</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">URL</label>
+			<input type="text"
+				class="form-control col"
+				name="url"
+				placeholder="NERD URL"
+				[(ngModel)]="backup.url" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Full URL</label>
+			<input type="text"
+				class="form-control col"
+				name="fullUrl"
+				placeholder="Full URL"
+				[(ngModel)]="backup.fullUrl" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-4">Generated URL</label>
+			<div class="btn-group" data-toggle="buttons">
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 1}"
+						title="Show">
+						<input type="radio" data-toggle="tooltip"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="1"
+							[(ngModel)]="backup.showUrl">
+						Show
+					</label>
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 0}"
+						title="Hide">
+						<input type="radio"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="0"
+							[(ngModel)]="backup.showUrl">
+						Hide
+					</label>
+				</div>
+
+		</div>
+
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">
+		Cancel
+	</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
+
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.scss b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts
new file mode 100644
index 0000000..90ed742
--- /dev/null
+++ b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NerdModalComponent } from './nerd-modal.component';
+
+describe('NerdModalComponent', () => {
+  let component: NerdModalComponent;
+  let fixture: ComponentFixture<NerdModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NerdModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NerdModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts
new file mode 100644
index 0000000..b8601cf
--- /dev/null
+++ b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-nerd-modal',
+  templateUrl: './nerd-modal.component.html',
+  styleUrls: ['./nerd-modal.component.scss']
+})
+export class NerdModalComponent implements OnInit {
+
+	// Model data
+	data;
+
+	// Backup of model data detached from ngModel
+	private backup;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		this.activeModal.dismiss(result);
+	}
+}
diff --git a/www/src/app/modules/nerd/nerd.component.html b/www/src/app/modules/nerd/nerd.component.html
index 2725474..8227188 100644
--- a/www/src/app/modules/nerd/nerd.component.html
+++ b/www/src/app/modules/nerd/nerd.component.html
@@ -1,9 +1,15 @@
 <section class="box">
     <h4 *ngIf="msg.length > 0">{{ msg }}</h4>
-    <iframe [src]="url | safe" class="frame" (load)="iframeLoaded()"></iframe>
+    <iframe *ngIf="url" [src]="url | safe" class="frame">
+		<div class="alert alert-danger">
+			Your browser doesn't support iframes
+		</div>
+	</iframe>
 </section>
 
-<section class="box">
+<section class="box" *ngIf="config?.showUrl == 1">
     <em> Generated URL:</em> <input type="text" [(value)] ="url">
     <small>If an error occurs, you can use this URL to access ftas directly</small>
 </section>
+
+<button class="btn btn-primary" (click)="openSettings()">Settings</button>
diff --git a/www/src/app/modules/nerd/nerd.component.ts b/www/src/app/modules/nerd/nerd.component.ts
index acc5d65..6d6ad64 100644
--- a/www/src/app/modules/nerd/nerd.component.ts
+++ b/www/src/app/modules/nerd/nerd.component.ts
@@ -1,9 +1,23 @@
+/**
+  * simple URL (without protocol) to NERD instance
+  * url : "nerd.cesnet.cz/nerd",
+  *
+  * 'fullUrl': Full URL to filtering script (usually "example.com/nerd")
+  * Specify URL without URL (https is forced)
+  * If this option is not set, url must be.
+  * If both are set, fullUrl is used.
+  */
+
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { URLSearchParams } from '@angular/http';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
-import { environment } from 'environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { ConfigService } from 'app/services';
+
+import { NerdModalComponent } from './nerd-modal/nerd-modal.component'
 
 
 @Component({
@@ -13,46 +27,93 @@ import { environment } from 'environments/environment';
 })
 export class NerdComponent implements OnInit {
 
-    baseUrl : string = "https://";  // FTAS URL for iframe
-    url: SafeResourceUrl;           // Sanitizied URL for iframe
-    filter : string;                // Advanced filter field for FTAS
-    iframeInit : Boolean = false;   // Flag for iframe initialization routine
-    msg : string = "";          // The loading message
+    // NERD URL for iframe
+    baseUrl : string;
+
+    // Sanitizied URL for iframe
+    url: SafeResourceUrl;
+
+    // Flag for iframe initialization routine
+    iframeInit : Boolean = false;
+    // The loading message
+    msg : string = "";
+
+    // URL parameters
+    params : Object;
+
+    // Configuration fetched froms backend
+    config : Object = {};
+
+    // Reference to modal window
+    modalRef;
 
     /**
       * Construct the FTAS URL from environment variables
       */
-    constructor( private route : ActivatedRoute ) {
-        /**
-          * Environment can set full url of the FTAS instance
-          */
-        if (environment.nerd.fullUrl) {
-            this.baseUrl = environment.nerd.fullUrl
-        } else if (environment.nerd.url) {
-            this.baseUrl += environment.nerd.url;
-        } else {
-            console.warn("NERD URL isn't set.");
-        }
+    constructor(private route : ActivatedRoute,
+				private configService : ConfigService,
+				private modalService : NgbModal) {
     }
 
     /**
-      * Get URL params and prepare the advanced query field for FTAS iframe
+      * Get URL params and prepare the advanced query field for NERD iframe
       */
     ngOnInit() {
-        this.route.params.subscribe(params => {
-            /**
-              * Setup NERD URL
-              * If params are set we can do some filtering
-              */
-            if (params["ip"] == undefined)
-                this.url = this.baseUrl;
-            else {
-                this.url = this.baseUrl + "/ip/" + params["ip"];
-            }
+    	this.configService.getModule('nerd').subscribe(
+    		config => {
+    			this.config = config;
+    			this.fetchParams();
+    		},
+			error => {
+				// Config for module doesn't exist
+				if (error.status == 404) {
+					console.log(error);
+					this.openSettings(false);
+				}
+			}
+		);
+    }
 
+	/**
+	  * Fetch parameters from the route and create filter from them
+	  *
+	  * Then set URL for iframe
+	  */
+    private fetchParams() {
+		this.route.params.subscribe(params => {
+        	this.params = params;
+			this.setUrl();
         });
     }
 
+	/**
+	  * Set NERD URL
+	  * If params are set we can do IP filtering
+	  *
+	  * Fall-through model for setting the baseUrl where preferred method
+	  * is fullUrl -> url -> show modal with settings
+	  */
+    private setUrl() {
+    	this.baseUrl = "https://";
+
+   		if (this.config['fullUrl']) {
+			this.baseUrl = this.config['fullUrl']
+		} else if (this.config['url']) {
+            this.baseUrl += this.config['url'];
+        }
+
+        if (this.baseUrl == 'https://') {
+			this.openSettings();
+        }
+
+		if (!this.params["ip"])
+			this.url = this.baseUrl;
+		else {
+			this.url = this.baseUrl + "/ip/" + this.params["ip"];
+		}
+    }
+
+
     /**
       * Outputs loading message if iframe is loaded but not its contents
       * (load) fires two times: first time when iframe element is loaded
@@ -67,4 +128,48 @@ export class NerdComponent implements OnInit {
 
         this.iframeInit = !this.iframeInit;
     }
+
+	/**
+	  * open modal window with settings
+	  *
+	  * on close, save settings and regenerate URL
+	  * on dismissal check if the HTTP Status is 404, which means the config
+	  * for such module doesn't exist, in that case reopen with new params.
+	  */
+    openSettings(update : boolean = true) {
+		this.modalRef = this.modalService.open(NerdModalComponent);
+		this.modalRef.componentInstance.data = this.config;
+		this.modalRef.result.then(
+			(result) => {
+				// The modal was closed, save settings
+				if (update) {
+					this.configService.update('nerd', this.config).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+							if (error.status == 404) {
+								this.openSettings(false);
+							}
+						});
+				} else {
+					let newconfig = Object.assign({}, this.config);
+					newconfig["name"] = "nerd";
+					this.configService.add(newconfig).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+						});
+				}
+			},
+			(reason) => {
+				// dismissal, do nothing
+			});
+    }
+
 }
diff --git a/www/src/app/modules/nerd/nerd.module.ts b/www/src/app/modules/nerd/nerd.module.ts
index e7953fc..0f386bb 100644
--- a/www/src/app/modules/nerd/nerd.module.ts
+++ b/www/src/app/modules/nerd/nerd.module.ts
@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
+import { FormsModule }		from '@angular/forms';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
-import { NerdComponent } from './nerd.component'
+import { NerdComponent } from './nerd.component';
+import { NerdModalComponent } from './nerd-modal/nerd-modal.component'
 
 const routes : Routes = [{
     path : 'nerd',
@@ -14,7 +18,7 @@ const routes : Routes = [{
     data : {
         role : 10,
         name : "NERD",
-        description : "There is nothing nerdy about NERD.",
+        description : "Network Entity Reputation Database",
         icon : "fa-user-secret"
     }
 }]
@@ -22,14 +26,20 @@ const routes : Routes = [{
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     SafePipeModule,
+    NgbModule.forRoot(),
     RouterModule.forChild(routes)
   ],
   declarations: [
-    NerdComponent
+    NerdComponent,
+    NerdModalComponent
   ],
   providers : [
     SafePipe
+  ],
+  entryComponents : [
+	NerdModalComponent
   ]
 })
 export class NerdModule { }
diff --git a/www/src/app/modules/security-cloud/sc.component.html b/www/src/app/modules/security-cloud/sc.component.html
index 2725474..a024337 100644
--- a/www/src/app/modules/security-cloud/sc.component.html
+++ b/www/src/app/modules/security-cloud/sc.component.html
@@ -1,6 +1,6 @@
 <section class="box">
     <h4 *ngIf="msg.length > 0">{{ msg }}</h4>
-    <iframe [src]="url | safe" class="frame" (load)="iframeLoaded()"></iframe>
+    <iframe [src]="url | safe" class="frame"></iframe>
 </section>
 
 <section class="box">
diff --git a/www/src/app/modules/security-cloud/sc.module.ts b/www/src/app/modules/security-cloud/sc.module.ts
index ddfa2e4..be21be8 100644
--- a/www/src/app/modules/security-cloud/sc.module.ts
+++ b/www/src/app/modules/security-cloud/sc.module.ts
@@ -14,7 +14,7 @@ const routes : Routes = [{
     data : {
         role : 10,
         name : "Security Cloud",
-        description : "Let's be secure, in cloud!",
+        description : "Distributed, highly available IP flow record collector.",
         icon : "fa-cloud"
     }
 }]
diff --git a/www/src/app/modules/users/users-add.html b/www/src/app/modules/users/users-add.html
index b51ef5d..5803ce6 100644
--- a/www/src/app/modules/users/users-add.html
+++ b/www/src/app/modules/users/users-add.html
@@ -1,78 +1,86 @@
-<h2><a routerLink='/users'><i class="fa fa-chevron-left" aria-hidden="true"></i></a> Add new user</h2>
-
-<form class="example-form">
-	<div class="flex-container"
-		fxLayout="column"
-		fxLayoutAlign="center left">
-			<input
-				placeholder="Username"
-				[(ngModel)]="user.username"
-				required
-				name="username">
+<div class="container">
+	<h2>
+		<a routerLink='/users'><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+		Add new user
+	</h2>
+<form class="example-form" (ngSubmit)="addUser()" novalidate #userForm="ngForm">
+	<div class="row">
+		<div class="form-group col">
+			<label for="username">Username *</label>
+			<input placeholder="Username" class="form-control" required
+				[(ngModel)]="user.username"	name="username" id="username">
+		</div>
 
+		<div class="form-group col">
+			<label for="email">E-mail</label>
 			<input
 				placeholder="E-mail"
 				[(ngModel)]="user.email"
-				required
 				name="email"
-				type="email">
+				type="email"
+				id="email"
+				class="form-control">
+		</div>
 	</div>
 
-	<div class="flex-container">
-			<input
-				placeholder="Password"
-				[(ngModel)]="user.password"
-				required
-				name="password"
-				type="password">
-
-			<input
-				placeholder="Password verification"
-				required
-				[(ngModel)]="passwordValidation"
-				name="password_validation"
-				type="password">
-
-		<div class="pw-verify flex-item" *ngIf="passwordValidation">
-			<span *ngIf="passwordValidation == user.password">
-				<i class="fa fa-check" aria-hidden="true"></i>
-			</span>
-			<span *ngIf="passwordValidation != user.password">
-				<i class="fa fa-times" aria-hidden="true"></i>
-			</span>
+	<div class="row">
+		<div class="form-group col">
+			<label for="first_name">First Name</label>
+			<input placeholder="First name" [(ngModel)]="user.first_name"
+				name="first_name" id="first_name" class="form-control">
+		</div>
+		<div class="form-group col">
+			<label for="last_name">Last Name</label>
+			<input placeholder="Last name" [(ngModel)]="user.last_name"
+				name="last_name" id="last_name" class="form-control">
 		</div>
 	</div>
 
-	<div class="flex-container">
-			<input
-				placeholder="First name"
-				[(ngModel)]="user.first_name"
-				name="first_name">
+	<!-- PASSWORD -->
+	<div class="row">
+		<div class="form-group col">
+			<label for="password">Password *</label>
+			<input placeholder="Password" [(ngModel)]="user.password" required
+				name="password" type="password" id="password" class="form-control">
+		</div>
 
-			<input
-				placeholder="Last name"
-				[(ngModel)]="user.last_name"
-				name="last_name">
-	</div>
+		<div class="form-group col">
+			<label for="password_validation">Password validation *</label>
+			<input placeholder="Password verification" required
+				[(ngModel)]="passwordValidation" name="password_validation"
+				class="form-control" type="password">
 
-	<div class="flex-container">
-		<select placeholder="Role" [(ngModel)]="user.role" name="role" class="custom-select">
-		<option *ngFor="let role of roles" [value]="role.value">
-		  {{role.viewValue}}
-		</option>
-	  </select>
+			<div class="pw-verify flex-item" *ngIf="passwordValidation">
+				<span *ngIf="passwordValidation == user.password">
+					<i class="fa fa-check" aria-hidden="true"></i>
+				</span>
+				<span *ngIf="passwordValidation != user.password">
+					<i class="fa fa-times" aria-hidden="true"></i>
+				</span>
+			</div>
+		</div>
+	</div>
 
+	<!-- ROLE selection -->
+	<div class="form-group">
+		<label for="user_role">Select Role *</label>
+		<select placeholder="Role" [(ngModel)]="user.role" name="role"
+			class="custom-select form-control" id="user_role">
+			<option *ngFor="let role of roles" [value]="role.value">
+				{{role.viewValue}}
+			</option>
+		</select>
 	</div>
 
 	<div class="flex-item">
-		<button
-			name="last_name"
-			type="submit"
-			class="btn btn-primary"
-		   (click)="addUser()">Add user</button>
+		<button name="last_name" type="submit" class="btn btn-primary btn-lg"
+			[disabled]="!userForm.form.valid">
+			Add User
+		</button>
+
+		<a routerLink='/users' class="btn btn-outline-danger">Cancel</a>
 
 		<span *ngIf="error">Error: {{ error }}</span>
 	</div>
 </form>
-
-{{ user | json }}
+</div>
diff --git a/www/src/app/modules/users/users-add/users-add.component.html b/www/src/app/modules/users/users-add/users-add.component.html
new file mode 100644
index 0000000..ee9321e
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.html
@@ -0,0 +1,87 @@
+<div class="container">
+	<h2>
+		<a routerLink='/users'><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+		Add new user
+	</h2>
+<form class="example-form" (ngSubmit)="addUser()" novalidate #userForm="ngForm">
+	<div class="row">
+		<div class="form-group col">
+			<label for="username">Username *</label>
+			<input placeholder="Username" class="form-control" required
+				[(ngModel)]="user.username"	name="username" id="username">
+		</div>
+
+		<div class="form-group col">
+			<label for="email">E-mail</label>
+			<input
+				placeholder="E-mail"
+				[(ngModel)]="user.email"
+				name="email"
+				type="email"
+				id="email"
+				class="form-control">
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="form-group col">
+			<label for="first_name">First Name</label>
+			<input placeholder="First name" [(ngModel)]="user.first_name"
+				name="first_name" id="first_name" class="form-control">
+		</div>
+		<div class="form-group col">
+			<label for="last_name">Last Name</label>
+			<input placeholder="Last name" [(ngModel)]="user.last_name"
+				name="last_name" id="last_name" class="form-control">
+		</div>
+	</div>
+
+	<!-- PASSWORD -->
+	<div class="row">
+		<div class="form-group col">
+			<label for="password">Password *</label>
+			<input placeholder="Password" [(ngModel)]="user.password" required
+				name="password" type="password" id="password" class="form-control">
+		</div>
+
+		<div class="form-group col">
+			<label for="password_validation">Password validation *</label>
+			<input placeholder="Password verification" required
+				[(ngModel)]="passwordValidation" name="password_validation"
+				class="form-control" type="password">
+
+			<div class="pw-verify flex-item" *ngIf="passwordValidation">
+				<span *ngIf="passwordValidation == user.password">
+					<i class="fa fa-check" aria-hidden="true"></i>
+				</span>
+				<span *ngIf="passwordValidation != user.password">
+					<i class="fa fa-times" aria-hidden="true"></i>
+				</span>
+			</div>
+		</div>
+	</div>
+
+	<!-- ROLE selection -->
+	<div class="form-group">
+		<label for="user_role">Select Role *</label>
+		<select placeholder="Role" [(ngModel)]="user.role" name="role"
+			class="custom-select form-control" id="user_role">
+			<option *ngFor="let role of roles" [value]="role.value">
+				{{role.viewValue}}
+			</option>
+		</select>
+	</div>
+
+	<div class="flex-item">
+		<button name="last_name" type="submit" class="btn btn-primary btn-lg"
+			[disabled]="!userForm.form.valid">
+			Add User
+		</button>
+
+		<a routerLink='/users' class="btn btn-outline-danger">Cancel</a>
+
+		<span *ngIf="error">Error: {{ error }}</span>
+	</div>
+</form>
+</div>
+
diff --git a/www/src/app/modules/users/users-add/users-add.component.scss b/www/src/app/modules/users/users-add/users-add.component.scss
new file mode 100644
index 0000000..5f205e8
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.scss
@@ -0,0 +1,10 @@
+.pw-verify {
+	position: absolute;
+	right: -0.5em;
+	top: 2.5em;
+	color: green;
+
+	.fa-times {
+		color: red;
+	}
+}
diff --git a/www/src/app/modules/users/users-add/users-add.component.spec.ts b/www/src/app/modules/users/users-add/users-add.component.spec.ts
new file mode 100644
index 0000000..bbf3307
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersAddComponent } from './users-add.component';
+
+describe('UsersAddComponent', () => {
+  let component: UsersAddComponent;
+  let fixture: ComponentFixture<UsersAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/users/users-add/users-add.component.ts b/www/src/app/modules/users/users-add/users-add.component.ts
new file mode 100644
index 0000000..f95591b
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { UsersService } from '../users.service';
+
+@Component({
+	selector: 'users-add',
+	templateUrl: './users-add.component.html',
+	styleUrls: ['./users-add.component.scss'],
+	providers : [UsersService]
+})
+export class UsersAddComponent implements OnInit {
+
+	returnUrl = "/users";
+
+	// Default user model
+	user = {
+		first_name : "",
+		last_name : "",
+		username : "",
+		email : "",
+		password : "",
+		role : 10
+	}
+
+	// Default role model
+	roles = [
+		{value: 0, viewValue: 'Administrator'},
+		{value: 10, viewValue: 'User'},
+		{value: 255, viewValue: 'Guest'}
+	];
+
+	error = "";
+	// Store password from validation
+	passwordValidation : string = "";
+
+	constructor(private usersService: UsersService,
+				 private router : Router) {}
+
+	ngOnInit() {
+	}
+
+	addUser() {
+		// Check if all required fields are set
+		// Check password verification
+		if ((this.user.username == "" ||
+			this.user.email == ""	||
+			this.user.password == "" ||
+			this.passwordValidation == "") &&
+			this.passwordValidation == this.user.password) {
+			this.error = "Required fields are missing.";
+			return;
+		} else {
+			this.usersService.add(this.user).subscribe(
+			data => {
+				// Successfully created user, redirect to users listing
+				this.router.navigate([this.returnUrl]);
+			},
+			error => {
+				// Handle error response and display it as error
+				let response = JSON.parse(error['_body']);
+				this.error = response['message'];
+			})
+		}
+	}
+}
diff --git a/www/src/app/modules/users/users-edit.html b/www/src/app/modules/users/users-edit/users-edit.component.html
similarity index 97%
rename from www/src/app/modules/users/users-edit.html
rename to www/src/app/modules/users/users-edit/users-edit.component.html
index f92c3c6..7ab0797 100644
--- a/www/src/app/modules/users/users-edit.html
+++ b/www/src/app/modules/users/users-edit/users-edit.component.html
@@ -56,7 +56,3 @@ <h2>
 		<span *ngIf="error">Error: {{ error }}</span>
 	</div>
 </form>
-
-
-{{ user | json }}
-{{ user_original | json }}
diff --git a/www/src/app/modules/users/users-edit/users-edit.component.scss b/www/src/app/modules/users/users-edit/users-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/users/users-edit/users-edit.component.spec.ts b/www/src/app/modules/users/users-edit/users-edit.component.spec.ts
new file mode 100644
index 0000000..d649f1b
--- /dev/null
+++ b/www/src/app/modules/users/users-edit/users-edit.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersEditComponent } from './users-edit.component';
+
+describe('UsersEditComponent', () => {
+  let component: UsersEditComponent;
+  let fixture: ComponentFixture<UsersEditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/users/users-edit/users-edit.component.ts b/www/src/app/modules/users/users-edit/users-edit.component.ts
new file mode 100644
index 0000000..e17e518
--- /dev/null
+++ b/www/src/app/modules/users/users-edit/users-edit.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { UsersService } from '../users.service';
+
+@Component({
+	selector: 'app-users-edit',
+	templateUrl: './users-edit.component.html',
+	styleUrls: ['./users-edit.component.scss'],
+	providers : [UsersService]
+})
+export class UsersEditComponent implements OnInit {
+	userId : String;
+	error : String;
+	passwordValidation = "";
+	user : Object = {
+		first_name : "",
+		last_name : "",
+		username : "",
+		email : "",
+		password : "",
+		role : -1
+	}
+	user_original : Object;
+
+	roles = [
+		{value: 0, viewValue: 'Administrator'},
+		{value: 10, viewValue: 'User'},
+		{value: 255, viewValue: 'Guest'}
+	];
+
+	constructor(private usersService : UsersService, private route : ActivatedRoute, private router : Router) {}
+
+	ngOnInit() {
+		this.route.params.subscribe(data => {
+			this.userId = data['id'];
+
+			this.usersService.get(this.userId).subscribe(
+				(data : Object) => {
+					console.log(data);
+					this.user = data;
+					this.user_original = JSON.parse(JSON.stringify(data));
+				},
+				error => {
+					console.log(error);
+					this.error = "This user doesn't exist";
+				}
+			);
+		});
+	}
+
+	updateUser() {
+		// Create a diff between user and user_original
+		let diff_user : Object = {};
+		for (var key in this.user) {
+			if (key != "_id" && key != 'settings' &&
+				this.user_original[key] != this.user[key])
+			{
+				diff_user[key] = this.user[key]
+			}
+		}
+
+		// Update only if there is something to update
+		if (Object.keys(diff_user).length > 0) {
+			this.usersService.update(this.userId, diff_user).subscribe(
+				data => {
+					this.router.navigate(['/users']);
+				},
+				error => {
+					console.log(error);
+					this.error = "Something went wrong";
+				});
+		}
+	}
+}
diff --git a/www/src/app/modules/users/users-list/users-list.component.html b/www/src/app/modules/users/users-list/users-list.component.html
new file mode 100644
index 0000000..978dfe7
--- /dev/null
+++ b/www/src/app/modules/users/users-list/users-list.component.html
@@ -0,0 +1,57 @@
+<h2>Users management</h2>
+<section class="box d-flex flex-row">
+	<table class="table table-hover">
+		<thead>
+		<tr>
+			<th>Username</th>
+			<th>E-mail</th>
+			<th>First Name</th>
+			<th>Last Name</th>
+			<th>Role</th>
+			<th>Action</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr *ngFor="let user of users; let i = '0'">
+			<td>{{ user.username }}</td>
+			<td>{{ user.email }}</td>
+			<td>{{ user.first_name }}</td>
+			<td>{{ user.last_name }}</td>
+			<td>{{ roles[user.role] }}</td>
+			<td>
+				<button class="btn btn-secondary" routerLink="{{user.id.$oid}}">View user</button>
+				<button class="btn btn-danger"
+					title="Remove user"
+					*ngIf="currentUser.user.username != user.username"
+					[ngbPopover]="deleteConfirmation"
+					popoverTitle="Are you sure?"
+					#popover="ngbPopover"
+					(click)="confirmDelete(user)">
+					{{ deleteBtn[popover.isOpen() ? 1 : 0] }}
+				</button>
+				<ng-template #deleteConfirmation>
+					<p>Delete user <strong>{{ user.username }}</strong>? This action can't be taken back.</p>
+					<button class="btn btn-danger btn-block"
+						title="Remove user"
+						(click)="removeUser(user)">
+						Yes, delete them!
+					</button>
+				</ng-template>
+
+			</td>
+
+		</tr>
+		</tbody>
+		<tfoot>
+			<tr>
+				<td colspan="5">
+					<button class="btn btn-primary"
+						routerLink="add"
+						routerLinkActive="active-link">
+						Add new user
+					</button>
+				<td>
+			</tr>
+		</tfoot>
+	</table>
+</section>
diff --git a/www/src/app/modules/users/users-list/users-list.component.scss b/www/src/app/modules/users/users-list/users-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/users/users-list/users-list.component.spec.ts b/www/src/app/modules/users/users-list/users-list.component.spec.ts
new file mode 100644
index 0000000..8c1ac3e
--- /dev/null
+++ b/www/src/app/modules/users/users-list/users-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersListComponent } from './users-list.component';
+
+describe('UsersListComponent', () => {
+  let component: UsersListComponent;
+  let fixture: ComponentFixture<UsersListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/users/users-list/users-list.component.ts b/www/src/app/modules/users/users-list/users-list.component.ts
new file mode 100644
index 0000000..6b68cb2
--- /dev/null
+++ b/www/src/app/modules/users/users-list/users-list.component.ts
@@ -0,0 +1,62 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+
+import { UsersService } from '../users.service';
+
+enum Roles {
+	"Administrator" = 0,
+	"User" = 10,
+	"Guest" = 255
+}
+
+@Component({
+  selector: 'users-list',
+  templateUrl: './users-list.component.html',
+  styleUrls: ['./users-list.component.scss'],
+  providers : [UsersService]
+})
+export class UsersListComponent implements OnInit {
+
+	users : Array<Object> = [];
+	currentUser = JSON.parse(localStorage.getItem('currentUser'));
+	roles = Roles;
+	user = {};
+	deleteBtn = ["Delete", "Cancel"];
+
+	constructor (private usersService : UsersService) {}
+
+	ngOnInit() {
+		console.log("trying to list users")
+		this.listUsers();
+	}
+
+	private listUsers() {
+		this.usersService.list().subscribe(
+			data => {
+				console.log(data);
+				this.users = data;
+			},
+			error => {
+				console.log(error)
+			}
+		);
+	}
+
+	public confirmDelete(user) {
+		this.user = user;
+	}
+
+	removeUser(user:Object) {
+		console.log(user['id']['$oid']);
+		this.usersService.remove(user['id']['$oid']).subscribe(
+			data => {
+				console.log(data);
+				this.listUsers();
+			},
+			error => {
+				console.log(error);
+			}
+		)
+	}
+
+}
diff --git a/www/src/app/modules/users/users.component.ts b/www/src/app/modules/users/users.component.ts
index 2202d20..655a412 100644
--- a/www/src/app/modules/users/users.component.ts
+++ b/www/src/app/modules/users/users.component.ts
@@ -5,220 +5,8 @@ import { Observable } from 'rxjs/Observable';
 
 import { UsersService } from './users.service';
 
-//import { HttpService } from '../../services/index';
-
 @Component({
 	selector : 'users',
 	template : `<router-outlet></router-outlet>`
 })
-export class usersComponent {};
-
-@Component({
-	//moduleId : module.id.replace("/dist/", "/"),
-	selector : 'users-add',
-	templateUrl : './users-add.html',
-	providers : [UsersService]
-})
-export class usersAddComponent {
-	returnUrl = "/users";
-
-	user = {
-		first_name : "",
-		last_name : "",
-		username : "",
-		email : "",
-		password : "",
-		role : 10
-	}
-
-	error = "";
-	passwordValidation : string = "";
-
-	roles = [
-		{value: 0, viewValue: 'Administrator'},
-		{value: 10, viewValue: 'User'},
-		{value: 255, viewValue: 'Guest'}
-	];
-
-	constructor (private usersService: UsersService, private router : Router) {}
-
-	ngOnInit() {
-	}
-
-	addUser() {
-		// Check if all required fields are set
-		// Check password verification
-		if ((this.user.username == "" ||
-			this.user.email == ""	||
-			this.user.password == "" ||
-			this.passwordValidation == "") &&
-			this.passwordValidation == this.user.password) {
-			this.error = "Required fields are missing.";
-			return;
-		} else {
-			this.usersService.add(this.user).subscribe(
-			data => {
-				// Successfully created user, redirect to users listing
-				this.router.navigate([this.returnUrl]);
-			},
-			error => {
-				// Handle error response and display it as error
-				let response = JSON.parse(error['_body']);
-				this.error = response['message'];
-			})
-		}
-	}
-};
-
-@Component({
-	selector : 'users-list',
-	template : `
-	<h2>Users management</h2>
-	<section class="box d-flex flex-row">
-		<table class="table table-hover">
-			<thead>
-			<tr>
-				<th>Username</th>
-				<th>E-mail</th>
-				<th>First Name</th>
-				<th>Last Name</th>
-				<th>Role</th>
-				<th>Action</th>
-			</tr>
-			</thead>
-			<tbody>
-			<tr *ngFor="let user of users">
-				<td>{{ user.username }}</td>
-				<td>{{ user.email }}</td>
-				<td>{{ user.first_name }}</td>
-				<td>{{ user.last_name }}</td>
-				<td>{{ user.role }}</td>
-				<td>
-					<button class="btn btn-secondary"routerLink="{{user.id.$oid}}">View user</button>
-					<button class="btn btn-danger" title="Remove user" (click)="removeUser(user)"
-					*ngIf="currentUser.user.username != user.username">Delete user</button>
-				</td>
-			</tr>
-			</tbody>
-			<tfoot>
-				<tr>
-					<td colspan="5"><button type="button" class="btn btn-primary" routerLink="add" routerLinkActive="active-link">Add new user</button>
-					<td>
-				</tr>
-			</tfoot>
-		</table>
-	</section>
-
-		`,
-	providers : [UsersService]
-
-})
-export class usersListComponent {
-	users : Array<Object> = [];
-	currentUser = JSON.parse(localStorage.getItem('currentUser'));
-
-	constructor (private usersService : UsersService) {}
-
-	ngOnInit() {
-		console.log("trying to list users")
-		this.listUsers();
-	}
-
-	private listUsers() {
-		this.usersService.list().subscribe(
-			data => {
-				console.log(data);
-				this.users = data;
-			},
-			error => {
-				console.log(error)
-			}
-		);
-	}
-
-	removeUser(user:Object) {
-		console.log(user['id']['$oid']);
-		this.usersService.remove(user['id']['$oid']).subscribe(
-			data => {
-			console.log(data);
-			this.listUsers();
-			},
-			error => {
-				console.log(error);
-			}
-		)
-	}
-
-};
-
-@Component({
-	//moduleId : module.id.replace("/dist/", "/"),
-	selector : 'edit-user',
-	templateUrl : './users-edit.html',
-	providers : [UsersService]
-})
-export class usersEditComponent {
-	userId : String;
-	error : String;
-	passwordValidation = "";
-	user : Object = {
-		first_name : "",
-		last_name : "",
-		username : "",
-		email : "",
-		password : "",
-		role : -1
-	}
-	user_original : Object;
-
-	roles = [
-		{value: 0, viewValue: 'Administrator'},
-		{value: 10, viewValue: 'User'},
-		{value: 255, viewValue: 'Guest'}
-	];
-
-	constructor(private usersService : UsersService, private route : ActivatedRoute, private router : Router) {}
-
-	ngOnInit() {
-		this.route.params.subscribe(data => {
-			this.userId = data['id'];
-
-			this.usersService.get(this.userId).subscribe(
-				(data : Object) => {
-					console.log(data);
-					this.user = data;
-					this.user_original = JSON.parse(JSON.stringify(data));
-				},
-				error => {
-					console.log(error);
-					this.error = "This user doesn't exist";
-				}
-			);
-			//console.log(this.userId;)
-		});
-	}
-
-	updateUser() {
-		// Create a diff between user and user_original
-		let diff_user : Object = {};
-		for (var key in this.user) {
-			if (key != "_id" && key != 'settings' &&
-				this.user_original[key] != this.user[key])
-			{
-				diff_user[key] = this.user[key]
-			}
-		}
-
-		// Update only if there is something to update
-		if (Object.keys(diff_user).length > 0) {
-			this.usersService.update(this.userId, diff_user).subscribe(
-				data => {
-					this.router.navigate(['/users']);
-				},
-				error => {
-					console.log(error);
-					this.error = "Something went wrong";
-				});
-		}
-	}
-}
+export class UsersComponent {};
diff --git a/www/src/app/modules/users/users.module.ts b/www/src/app/modules/users/users.module.ts
index 9e3ff74..8bd7b0a 100644
--- a/www/src/app/modules/users/users.module.ts
+++ b/www/src/app/modules/users/users.module.ts
@@ -2,20 +2,20 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
 import { FormsModule }		from '@angular/forms';
-//import { HttpService } from '../../services/http.service';
-import {
-	usersComponent,
-	usersAddComponent,
-	usersListComponent,
-	usersEditComponent
-	} from './users.component';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { UsersComponent } from './users.component';
+import { UsersAddComponent } from './users-add/users-add.component';
+import { UsersListComponent } from './users-list/users-list.component';
+import { UsersEditComponent } from './users-edit/users-edit.component';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 
 const usersRoutes : Routes = [
 	{
 		path : 'users',
-		component : usersComponent,
+		component : UsersComponent,
 		canActivate : [AuthGuard],
 		data : {
 			basepath : true,
@@ -27,7 +27,7 @@ const usersRoutes : Routes = [
 		children : [
 			{
 				path : '',
-				component: usersListComponent,
+				component: UsersListComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 0
@@ -35,7 +35,7 @@ const usersRoutes : Routes = [
 			},
 			{
 				path : 'add',
-				component : usersAddComponent,
+				component : UsersAddComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 0,
@@ -44,7 +44,7 @@ const usersRoutes : Routes = [
 			},
 			{
 				path : ':id',
-				component : usersEditComponent,
+				component : UsersEditComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 0,
@@ -55,16 +55,22 @@ const usersRoutes : Routes = [
 	}
 ];
 
-//export const dummyRouting = RouterModule.forChild(dummyRoutes);
-
 @NgModule({
 	imports : [
 		CommonModule,
 		FormsModule,
+		NgbModule.forRoot(),
 		RouterModule.forChild(usersRoutes)
 	],
-	declarations : [usersComponent, usersAddComponent, usersListComponent, usersEditComponent],
-	exports : [usersComponent, usersAddComponent, usersEditComponent, RouterModule],
-	//	providers : [HttpService]
+	declarations : [
+		UsersComponent,
+		UsersListComponent,
+		UsersAddComponent,
+		UsersEditComponent
+	],
+	exports : [
+		UsersComponent,
+		RouterModule
+	]
 })
 export class usersModule {};
diff --git a/www/src/app/modules/users/users.service.ts b/www/src/app/modules/users/users.service.ts
index c4058f3..cc46d88 100644
--- a/www/src/app/modules/users/users.service.ts
+++ b/www/src/app/modules/users/users.service.ts
@@ -15,7 +15,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
@@ -28,7 +27,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
@@ -47,7 +45,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
@@ -60,7 +57,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
diff --git a/www/src/app/services/config.service.spec.ts b/www/src/app/services/config.service.spec.ts
new file mode 100644
index 0000000..a20d4ba
--- /dev/null
+++ b/www/src/app/services/config.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ConfigService } from './config.service';
+
+describe('ConfigService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ConfigService]
+    });
+  });
+
+  it('should be created', inject([ConfigService], (service: ConfigService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/www/src/app/services/config.service.ts b/www/src/app/services/config.service.ts
new file mode 100644
index 0000000..c79e78e
--- /dev/null
+++ b/www/src/app/services/config.service.ts
@@ -0,0 +1,72 @@
+import { Inject, Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+import { environment } from 'environments/environment';
+
+@Injectable()
+export class ConfigService {
+
+    private config: Object = null;
+    private baseUrl : string = "/configuration";
+
+    constructor(private http: Http) {}
+
+    /**
+     * Load configuration of modules from the database.
+     *
+     * Note: The assets/config.json file is used only in the HTTP communication
+     *		and therefore it is unnecessary anywhere else
+     *
+     */
+    public load() {
+        return new Promise((resolve, reject) => {
+            this.http.get(this.baseUrl)
+				.map( res => res.json() )
+            	.catch((error: any):any => {
+					console.log(`Configuration could not be read`);
+					reject(true);
+					return Observable.throw(error.json().error || 'Server error');
+				})
+				.subscribe( (response) => {
+					this.config = response;
+					console.log(this.config)
+					resolve(true);
+				});
+        });
+    }
+
+    public getModule(name : string) {
+		return this.http.get(this.baseUrl + '/' + name)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public get() {
+		return this.http.get(this.baseUrl)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public update(name : string, data : Object) {
+    	console.log(data);
+		return this.http.put(this.baseUrl + '/' + name, data)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public add(data : Object) {
+		return this.http.post(this.baseUrl, data)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public remove(name : string) {
+		return this.http.delete(this.baseUrl + '/' + name)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    private handleError(err : Response | any) {
+		return Promise.reject(err);
+	}
+}
diff --git a/www/src/app/services/index.ts b/www/src/app/services/index.ts
index 2a719d1..54213b9 100644
--- a/www/src/app/services/index.ts
+++ b/www/src/app/services/index.ts
@@ -1 +1,2 @@
 export * from './auth.service';
+export * from './config.service';
diff --git a/www/src/app/utils/http.interceptor.ts b/www/src/app/utils/http.interceptor.ts
index 1b7d8f7..106ec30 100644
--- a/www/src/app/utils/http.interceptor.ts
+++ b/www/src/app/utils/http.interceptor.ts
@@ -1,8 +1,19 @@
+/**
+  * HTTP Interceptor class for liberouterapi backend communication
+  *
+  * The interceptor adds to every request the Authorization header with session
+  * ID (if present) and prefixes each request with API URL (if set)
+  *
+  * Author: Petr Stehlik <stehlik@cesnet.cz>
+  * Date: 15/06/2017
+  */
+
 import { Injectable } from '@angular/core';
 import { Request,
 	XHRBackend,
 	RequestOptions,
 	RequestOptionsArgs,
+	RequestMethod,
 	URLSearchParams,
 	Response,
 	Http,
@@ -15,26 +26,32 @@ import 'rxjs/add/observable/throw';
 
 @Injectable()
 export class HttpInterceptor extends Http {
-	currentUser : Object;
-	headers : Headers = new Headers({ 'Content-Type': 'application/json' });
-	prefixUrl : string = environment.apiUrl;
+	private currentUser : Object;
+	private headers : Headers = new Headers({ 'Content-Type': 'application/json' });
+    private configPath : string = environment.configPath;
+	private prefixUrl : string;
+	private api : Object = {};
+	private promise;
 
 	constructor(backend: XHRBackend,
 		defaultOptions: RequestOptions,
-		private router: Router
-		//private authService: AuthService
-		)
+		private router: Router,
+		private config : Object)
 	{
 		super(backend, defaultOptions);
-		this.prefixUrl = environment.apiUrl;
+		this.api = this.config["api"];
 	}
 
-	// During each request append Authorization header if session is present
+	/**
+	  * For each request add:
+	  *		- Authorization header if session is present
+	  *		- API URL prefix
+	  */
 	request(url: Request,
 		options?: RequestOptionsArgs): Observable<Response>
 	{
-		// Prefix the URL with environment prefix
-		url.url = this.prefixUrl + url.url;
+		// Prefix the URL with environment prefix if set
+		url.url = this.buildUrl(url.url);
 		this.currentUser = this.getCurrentUser();
 
 		if (this.currentUser != undefined) {
@@ -52,6 +69,16 @@ export class HttpInterceptor extends Http {
 		return super.request(url, options).catch(this.catchErrors());
 	}
 
+	/**
+	  * Original GET method caller
+	  * Use only if you know you don't need:
+	  *		- Authorization header added automatically
+	  *		- API URL prefix
+	  */
+	public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
+        return super.get(url, options);
+    }
+
 	private catchErrors() {
 		return (res : Response) => {
 			if (res.status == 401) {
@@ -73,4 +100,17 @@ export class HttpInterceptor extends Http {
 	private getCurrentUser() : Object {
 		return JSON.parse(localStorage.getItem('currentUser'));
 	}
+
+	/**
+	  * Create URL string for the request based on local configuration
+	  */
+	private buildUrl(url : string) {
+		let urlString = "";
+
+		urlString += this.api["proto"] || "";
+		urlString += this.api["host"] || "";
+		urlString += this.api["port"] ? ":" + this.api["port"] : "";
+		urlString += this.api["url"] || environment.apiUrl || "";
+		return urlString + url;
+	}
 }
diff --git a/www/src/assets/config-sample.json b/www/src/assets/config-sample.json
new file mode 100644
index 0000000..1a4278d
--- /dev/null
+++ b/www/src/assets/config-sample.json
@@ -0,0 +1,8 @@
+{
+	"api" : {
+		"url" : "/libapi",
+		"host" : null,
+		"port" : null,
+		"proto" : null
+	}
+}
diff --git a/www/src/assets/logo.png b/www/src/assets/img/logo.png
similarity index 100%
rename from www/src/assets/logo.png
rename to www/src/assets/img/logo.png
diff --git a/www/src/assets/logo_old.png b/www/src/assets/img/logo_old.png
similarity index 100%
rename from www/src/assets/logo_old.png
rename to www/src/assets/img/logo_old.png
diff --git a/www/src/assets/spin.gif b/www/src/assets/img/spin.gif
similarity index 100%
rename from www/src/assets/spin.gif
rename to www/src/assets/img/spin.gif
diff --git a/www/src/environments/environment.prod.ts b/www/src/environments/environment.prod.ts
index 152be96..afb2324 100644
--- a/www/src/environments/environment.prod.ts
+++ b/www/src/environments/environment.prod.ts
@@ -1,37 +1,13 @@
 export const environment = {
   production: false,
+  /**
+  	* Path to configuration file
+  	*/
+  configPath : "assets/config.json",
+  /**
+  	* Used only when fetching config.json failed
+  	*/
   apiUrl : "/libapi",
-  ftas : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "ftas.cesnet.cz",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-    /**
-      * Specify which output machines will be used
-      * Can be a list (as string): "1,2,5,10"
-      */
-    output : "1402"
-  },
-  nerd : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "nerd.cesnet.cz/nerd",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-  },
   securityCloud : {
     /**
       * simple URL (without protocol) to FTAS instance
diff --git a/www/src/environments/environment.ts b/www/src/environments/environment.ts
index 943a27b..80e9a0a 100644
--- a/www/src/environments/environment.ts
+++ b/www/src/environments/environment.ts
@@ -5,38 +5,14 @@
 
 export const environment = {
   production: false,
+  /**
+  	* Path to configuration file
+  	*/
+  configPath : "assets/config.json",
+  /**
+  	* Used only when fetching config.json failed
+  	*/
   apiUrl : "/libapi",
-  ftas : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "ftas.cesnet.cz",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-    /**
-      * Specify which output machines will be used
-      * Can be a list (as string): "1,2,5,10"
-      */
-    output : "1402"
-  },
-  nerd : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "nerd.cesnet.cz/nerd",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-  },
   securityCloud : {
     /**
       * simple URL (without protocol) to FTAS instance
diff --git a/www/src/main.ts b/www/src/main.ts
index 46c1c73..b650363 100644
--- a/www/src/main.ts
+++ b/www/src/main.ts
@@ -1,10 +1,37 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 import { environment } from './environments/environment';
-import { AppModule } from './app/app.module';
+
+import { initApp } from './app/app.module';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+/**
+  * Retrieve config.json from a path specified in environment
+  *
+  * This cannot use the Angular HTTP module, therefore uses good old XMLHttpRequest
+  */
+export function main() {
+	return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.open("GET", environment.configPath);
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(xhr.response);
+            } else {
+                reject(xhr.statusText);
+            }
+        };
+        xhr.onerror = () => reject(xhr.statusText);
+        xhr.send();
+    });
+}
+
+// Fetch the config before bootstraping the app
+main().then((data : string) => {
+	platformBrowserDynamic().bootstrapModule(initApp(JSON.parse(data)));
+});
+
+
diff --git a/www/src/styles/main.scss b/www/src/styles/main.scss
index 7575140..3d9d929 100644
--- a/www/src/styles/main.scss
+++ b/www/src/styles/main.scss
@@ -1,3 +1,6 @@
+$fa-font-path: "../../node_modules/font-awesome/fonts";
+@import "../../node_modules/font-awesome/scss/font-awesome.scss";
+
 @import "variables";
 @import "typography";
 //@import "mixins";
@@ -142,3 +145,14 @@ nemea-events .modal-dialog {
 .row-space {
 	margin: 1em;
 }
+
+
+.CodeMirror {
+  border: 1px solid #eee;
+  height: calc(90vh - 2em)!important;
+}
+
+.grid-placeholder {
+	border: 2px dashed $gray!important;
+	background: rgba(0,0,0,0.05)!important;
+}
diff --git a/www/src/tsconfig.app.json b/www/src/tsconfig.app.json
new file mode 100644
index 0000000..9062fb7
--- /dev/null
+++ b/www/src/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "lib": [
+      "es2016",
+      "dom"
+    ],
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ],
+	"angularCompilerOptions" : {
+		"entryModule" : "./app/app.module#AppModule"
+	}
+}
diff --git a/www/e2e/tsconfig.json b/www/src/tsconfig.e2e.json
similarity index 65%
rename from www/e2e/tsconfig.json
rename to www/src/tsconfig.e2e.json
index 94da47a..72a2d6d 100644
--- a/www/e2e/tsconfig.json
+++ b/www/src/tsconfig.e2e.json
@@ -1,19 +1,19 @@
 {
-  "compileOnSave": false,
   "compilerOptions": {
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [
       "es2016"
     ],
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc-e2e",
-    "sourceMap": true,
-    "target": "es6",
-    "typeRoots": [
-      "../node_modules/@types"
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
     ]
   }
 }
diff --git a/www/src/tsconfig.spec.json b/www/src/tsconfig.spec.json
new file mode 100644
index 0000000..a474b12
--- /dev/null
+++ b/www/src/tsconfig.spec.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016",
+      "dom"
+    ],
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/www/src/tsconfig.json b/www/tsconfig.json
similarity index 68%
rename from www/src/tsconfig.json
rename to www/tsconfig.json
index 40fe5c0..a35a8ee 100644
--- a/www/src/tsconfig.json
+++ b/www/tsconfig.json
@@ -1,21 +1,20 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "",
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
     "lib": [
       "es2016",
       "dom"
-    ],
-    "mapRoot": "./",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
-    "sourceMap": true,
-    "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
     ]
   }
 }
diff --git a/www/tslint.json b/www/tslint.json
index 86bc184..dd117b3 100644
--- a/www/tslint.json
+++ b/www/tslint.json
@@ -3,6 +3,7 @@
     "node_modules/codelyzer"
   ],
   "rules": {
+    "arrow-return-shorthand": true,
     "callable-types": true,
     "class-name": true,
     "comment-format": [
@@ -12,7 +13,10 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs"],
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
     "import-spacing": true,
     "indent": [
       true,
@@ -42,16 +46,22 @@
     ],
     "no-construct": true,
     "no-debugger": true,
-    "no-duplicate-variable": true,
+    "no-duplicate-super": true,
     "no-empty": false,
     "no-empty-interface": true,
     "no-eval": true,
-    "no-inferrable-types": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
     "no-shadowed-variable": true,
     "no-string-literal": false,
     "no-string-throw": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
     "no-unused-expression": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
@@ -97,9 +107,18 @@
       "check-separator",
       "check-type"
     ],
-
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,