diff --git a/.env b/.env
new file mode 100644
index 00000000..e4a708c0
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+WEBUI_MULTIPLE=false
\ No newline at end of file
diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..e4a708c0
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+WEBUI_MULTIPLE=false
\ No newline at end of file
diff --git a/README.md b/README.md
index ce05b594..6c0aab20 100644
--- a/README.md
+++ b/README.md
@@ -31,3 +31,21 @@ Run `grunt` for building and `grunt serve` for preview.
 ## Testing
 
 Running `grunt test` will run the unit tests with karma.
+
+# Documentation
+
+## Multipe WebUI
+
+Change value in .env file
+
+**Multiple account disabled:**
+
+```
+WEBUI_MULTIPLE=false
+```
+
+**Multipe account enabled:**
+
+```
+WEBUI_MULTIPLE=true
+```
\ No newline at end of file
diff --git a/app/index.ejs b/app/index.ejs
index 5f60d690..d1d89f69 100644
--- a/app/index.ejs
+++ b/app/index.ejs
@@ -48,6 +48,7 @@
                   </span>
                   <span class="connected-status" ng-class="(isConnected()) ? 'label label-success' : 'label label-danger'"
                         ng-bind="isConnected() ? 'Connected' : 'Disconnected'"></span>
+                  <web-ui-select class="hidden-xs"></web-ui-select>       
               </p>
           </div>
 
@@ -56,6 +57,9 @@
           <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
           <div class="collapse navbar-collapse navbar-ex1-collapse">
               <ul class="nav navbar-nav side-nav">
+                  <li class="visible-xs">
+                        <web-ui-select></web-ui-select>       
+                  </li>
                   <li ui-sref-active="active">
                       <a data-toggle="collapse" data-target=".navbar-ex1-collapse" ui-sref="home"><i class="glyphicon glyphicon-cog"></i> Home</a>
                   </li>
diff --git a/app/scripts/app.js b/app/scripts/app.js
index 4d892ed5..4b5b44a6 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -86,6 +86,7 @@ import routingModule from './app.routes';
 
 // Internal components
 import LoginFormModule from './components/loginForm/index';
+import WebUIModule from './components/webUI/index';
 import SvgEditorModule from './components/svgEditor/index';
 
 //-----------------------------------------------------------------------------
@@ -117,6 +118,7 @@ const module = angular
         metaTypeFilterModule,
         dumbTemplateModule,
         LoginFormModule,
+        WebUIModule,
         SvgEditorModule,
 
         ///'toggle-switch',
@@ -302,6 +304,7 @@ const realApp = angular.module('realHomeuiApp', [module.name, mqttServiceModule,
             urlTemplate: '/scripts/i18n/{part}/{lang}.json'
         });
         $translateProvider.preferredLanguage('ru');
+        $translateProvider.usePostCompiling(true);
     }])
     .config(['$compileProvider', function ($compileProvider) {
         $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
diff --git a/app/scripts/app.routes.js b/app/scripts/app.routes.js
index 6f8f7a72..58b7a2ba 100644
--- a/app/scripts/app.routes.js
+++ b/app/scripts/app.routes.js
@@ -1,3 +1,5 @@
+'use strict';
+
 import uiRouter from 'angular-ui-router';
 
 import homeTemplateUrl from 'ngtemplate-loader?relativeTo=/app!../views/home.html';
@@ -45,6 +47,11 @@ function routing($stateProvider,  $locationProvider, $urlRouterProvider) {
           templateUrl: webUITemplateUrl,
           controller: 'WebUICtrl as $ctrl'
       })
+      .state('webUIAdd', {
+        url: '/web-ui/add',
+        templateUrl: webUITemplateUrl,
+        controller: 'WebUICtrl as $ctrl'
+      })
       .state('system', {
           url: '/system',
           templateUrl: systemTemplateUrl,
diff --git a/app/scripts/components/webUI/index.js b/app/scripts/components/webUI/index.js
new file mode 100644
index 00000000..1aad6bfd
--- /dev/null
+++ b/app/scripts/components/webUI/index.js
@@ -0,0 +1,17 @@
+'use strict';
+
+import webUIManageComponent from './manage/webUIManage.component';
+import webUISelectComponent from './select/webUISelect.component';
+import webUIService from './services/webUI.service';
+
+import './webUI.scss';
+
+export default angular
+    .module('HomeuiApp.webUI', [])
+    .config(['$translatePartialLoaderProvider', ($translatePartialLoaderProvider) => {
+        $translatePartialLoaderProvider.addPart('webUI');
+    }])
+    .component('webUiManage', webUIManageComponent)
+    .component('webUiSelect', webUISelectComponent)
+    .factory('webUIService', webUIService)
+    .name;
\ No newline at end of file
diff --git a/app/scripts/components/webUI/manage/webUIManage.component.js b/app/scripts/components/webUI/manage/webUIManage.component.js
new file mode 100644
index 00000000..3f483870
--- /dev/null
+++ b/app/scripts/components/webUI/manage/webUIManage.component.js
@@ -0,0 +1,12 @@
+'use strict';
+
+import template from './webUIManage.html';
+import controller from './webUIManage.controller';
+
+export default {
+    restrict: 'E',
+    bindings: {
+    },
+    template,
+    controller
+};
\ No newline at end of file
diff --git a/app/scripts/components/webUI/manage/webUIManage.controller.js b/app/scripts/components/webUI/manage/webUIManage.controller.js
new file mode 100644
index 00000000..5d1c46b5
--- /dev/null
+++ b/app/scripts/components/webUI/manage/webUIManage.controller.js
@@ -0,0 +1,76 @@
+'use strict';
+
+class WebUIManageController {
+    
+    constructor ($scope, $window, $state, $translate, $ngBootbox, rolesFactory, webUIService) {
+        'ngInject';
+
+        this.$scope = $scope;
+        this.$window = $window;
+        this.$state = $state;
+        this.$translate = $translate;
+        this.$ngBootbox = $ngBootbox;
+        this.rolesFactory = rolesFactory;
+        this.service = webUIService;
+        
+        this.accounts = webUIService.accounts;
+        this.current = webUIService.current;
+        this.editable = null;
+
+        this.isMultiple = process.env.WEBUI_MULTIPLE === 'true';
+        if (!this.isMultiple) {
+            this.editable = this.current;
+        }
+        else if ($state.current.name === 'webUIAdd') {
+            this.create();
+        }
+
+        $scope.$watch('$ctrl.service.getCurrent()', (newValue, oldValue) => {
+            if (newValue !== oldValue) {
+                this.current = newValue;
+            }
+        });
+    }
+
+    create() {
+        this.editable = this.service.create();
+    }
+
+    update(account) {
+        this.editable = account;
+    }
+
+    remove(account) {
+        this.$translate('webUI.manager.prompt.remove', { name: account.name }).then((translation) => {
+            this.$ngBootbox.confirm(translation).then(() => {
+                this.service.remove(account);
+            });
+        });
+    }
+
+    save() {
+        this.service.save(this.editable);
+
+        if (this.editable === this.current) {
+            this.login(this.current);
+        }
+
+        if (this.isMultiple) {
+            this.cancel();
+        }
+    }
+
+    cancel() {
+        this.editable = null;
+
+        if (this.$state.current.name === 'webUIAdd') {
+            this.$state.go('webUI');
+        }
+    }
+
+    login(account) {
+        this.service.login(account);
+    }
+}
+
+export default WebUIManageController;
\ No newline at end of file
diff --git a/app/scripts/components/webUI/manage/webUIManage.html b/app/scripts/components/webUI/manage/webUIManage.html
new file mode 100644
index 00000000..cf6259ca
--- /dev/null
+++ b/app/scripts/components/webUI/manage/webUIManage.html
@@ -0,0 +1,100 @@
+<div class="web-ui-manage">
+    <div class="list" ng-show="!$ctrl.editable">
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead class="hidden-xs">
+                    <tr>
+                        <th>{{'webUI.manager.table.header.name' | translate}}</th>
+                        <th class="hidden-xs">{{'webUI.manager.table.header.host' | translate}}</th>
+                        <th class="hidden-xs">{{'webUI.manager.table.header.port' | translate}}</th>
+                        <th class="hidden-xs">{{'webUI.manager.table.header.user' | translate}}</th>
+                        <th class="hidden-xs">{{'webUI.manager.table.header.prefix' | translate}}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="account in $ctrl.accounts track by $index">
+                        <td class="visible-xs tap" ng-click="$ctrl.update(account)">{{ account.name }}</td>
+                        <td class="hidden-xs">{{ account.name }}</td>
+                        <td class="hidden-xs">{{ account.host }}</td>
+                        <td class="hidden-xs">{{ account.port }}</td>
+                        <td class="hidden-xs">{{ account.user }}</td>
+                        <td class="hidden-xs" width="100"><i class="fa fa-check" ng-show="account.prefix"></i></td>
+                        <td class="hidden-xs" width="200" class="text-right">
+                            <button class="btn btn-sm btn-primary" ng-click="$ctrl.update(account)">
+                                {{'webUI.manager.button.edit' | translate}}
+                            </button>
+                            <button class="btn btn-sm btn-success" ng-click="$ctrl.login(account)" ng-disabled="account === $ctrl.current">
+                                {{'webUI.manager.button.login' | translate}}
+                            </button>
+                            <button class="btn btn-sm btn-danger" ng-click="$ctrl.remove(account)">
+                                {{'webUI.manager.button.remove' | translate}}
+                            </button>
+                        </td>
+                        <td class="visible-xs text-right"><i class="fa fa-check" ng-show="account === $ctrl.current"></i></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div>
+            <button class="btn btn-primary" ng-click="$ctrl.create()">{{'webUI.manager.button.add' | translate}}</button>
+        </div>
+    </div>
+    <div class="edit" ng-if="$ctrl.editable">
+        <form name="account" novalidate autocomplete="off">
+            <div class="form-group">
+                <div class="form-group" ng-class="{'has-error': account.name.$invalid, 'has-success': !account.name.$invalid && account.name.$touched}" ng-show="$ctrl.isMultiple">
+                    <label for="host" class="control-label">{{'webUI.manager.field.name' | translate}}</label>
+                    <input type="text" class="form-control" id="name" name="name" ng-model="$ctrl.editable.name" />
+                    <div class="help-block with-errors" ng-show="account.name.$error.required">{{'webUI.manager.error.name.empty' | translate}}</div>
+                </div>
+                <div class="form-group required" ng-class="{'has-error': account.host.$invalid, 'has-success': !account.host.$invalid && account.host.$touched}">
+                    <label for="host" class="control-label">{{'webUI.manager.field.host' | translate}}</label>
+                    <input type="text" class="form-control" id="host" name="host" ng-model="$ctrl.editable.host" ng-required="account.host.$touched" />
+                    <div class="help-block with-errors" ng-show="account.host.$error.required">{{'webUI.manager.error.host.empty' | translate}}</div>
+                </div>
+                <div class="form-group required" ng-class="{'has-error': account.port.$invalid, 'has-success': !account.port.$invalid && account.port.$touched}">
+                    <label for="port" class="control-label">{{'webUI.manager.field.port' | translate}}</label>
+                    <input type="number" maxlength="5" class="form-control" id="port" name="port" ng-model="$ctrl.editable.port" ng-required="account.port.$touched" />
+                    <div class="help-block with-errors" ng-show="account.port.$error.required">{{'webUI.manager.error.port.empty' | translate}}</div>
+                    <div class="help-block with-errors" ng-show="account.port.$error.number">{{'webUI.manager.error.port.invalid' | translate}}</div>
+                </div>
+                <div class="form-group">
+                    <label for="credentials" class="control-label">
+                        <input type="checkbox" id="credentials" name="credentials" ng-model="$ctrl.editable.credentials" />
+                        {{'webUI.manager.field.credentials' | translate}}
+                    </label>
+                </div>
+                <div ng-show="$ctrl.editable.credentials">
+                    <div class="form-group" ng-class="{'required': $ctrl.editable.credentials, 'has-error': account.user.$invalid, 'has-success': !account.user.$invalid && account.user.$touched}">
+                        <label for="host" class="control-label">{{'webUI.manager.field.user' | translate}}</label>
+                        <input type="text" class="form-control" id="user" name="user" autocomplete="off" ng-model="$ctrl.editable.user" ng-required="$ctrl.editable.credentials && account.user.$touched" />
+                        <div class="help-block with-errors" ng-show="account.user.$error.required">{{'webUI.manager.error.user.empty' | translate}}</div>
+                    </div>
+                    <div class="form-group" ng-class="{'required': $ctrl.editable.credentials, 'has-error': account.password.$invalid, 'has-success': !account.password.$invalid && account.password.$touched}">
+                        <label for="password" class="control-label">{{'webUI.manager.field.password' | translate}}</label>
+                        <input type="password" class="form-control" id="password" name="password" autocomplete="new-password" ng-model="$ctrl.editable.password" ng-required="$ctrl.editable.credentials && account.password.$touched" />
+                        <div class="help-block with-errors" ng-show="account.password.$error.required">{{'webUI.manager.error.password.empty' | translate}}</div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="prefix" class="control-label">
+                        <input type="checkbox" id="prefix" name="prefix" ng-model="$ctrl.editable.prefix" />
+                        {{'webUI.manager.field.prefix' | translate}}
+                    </label>
+                </div>
+            </div>
+        </form>
+        <div class="form-group">
+            <div class="pull-left">
+                <button class="btn btn-primary" ng-click="$ctrl.save()">{{'webUI.manager.button.save' | translate}}</button>
+                <button class="btn btn-default" ng-click="$ctrl.cancel()" ng-if="$ctrl.isMultiple">{{'webUI.manager.button.cancel' | translate}}</button>
+            </div>
+            <div class="pull-right">
+                <button class="btn btn-success" ng-click="$ctrl.login($ctrl.editable)" ng-if="$ctrl.isMultiple" ng-disabled="$ctrl.editable === $ctrl.current">{{'webUI.manager.button.login' | translate}}</button>
+                <button class="btn btn-danger" ng-click="$ctrl.remove($ctrl.editable)" ng-if="$ctrl.isMultiple">{{'webUI.manager.button.remove' | translate}}</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/scripts/components/webUI/select/webUISelect.component.js b/app/scripts/components/webUI/select/webUISelect.component.js
new file mode 100644
index 00000000..a38a12f1
--- /dev/null
+++ b/app/scripts/components/webUI/select/webUISelect.component.js
@@ -0,0 +1,12 @@
+'use strict';
+
+import template from './webUISelect.html';
+import controller from './webUISelect.controller';
+
+export default {
+    restrict: 'E',
+    bindings: {
+    },
+    template,
+    controller
+};
\ No newline at end of file
diff --git a/app/scripts/components/webUI/select/webUISelect.controller.js b/app/scripts/components/webUI/select/webUISelect.controller.js
new file mode 100644
index 00000000..62804301
--- /dev/null
+++ b/app/scripts/components/webUI/select/webUISelect.controller.js
@@ -0,0 +1,57 @@
+'use strict';
+
+class AccountSelectController {
+    
+    constructor ($scope, $element, $state, $location, $translate, rolesFactory, webUIService) {
+        'ngInject';
+
+        this.$scope = $scope;
+        this.$element = $element;
+        this.$translate = $translate;
+        this.$state = $state;
+        this.rolesFactory = rolesFactory;
+        this.service = webUIService;
+        
+        this.accounts = webUIService.accounts;
+        this.current = webUIService.current;
+        
+        this.accountAdd = {
+            'name': 'Add service'
+        };
+
+        this.isMultiple = process.env.WEBUI_MULTIPLE === 'true';
+
+        $scope.$watch('$ctrl.current', (newValue, oldValue) => {
+            if (newValue !== oldValue) {
+                if (oldValue === this.accountAdd) {
+                    return;
+                }
+                else if (newValue === this.accountAdd) {
+                    this.current = webUIService.current;
+                    $state.go('webUIAdd');
+                }
+                else {
+                    this.login(newValue);
+                }
+            }
+        });
+        
+        this.$translate('webUI.select.button.add').then((translation) => {
+            this.accountAdd.name = translation;
+        });
+    }
+
+    items() {
+        return this.accounts.concat(this.accountAdd);
+    }
+
+    login(account) {
+        this.service.login(account);
+    }
+
+    tagHelper(tag) {
+        return null;
+    }
+}
+
+export default AccountSelectController;
\ No newline at end of file
diff --git a/app/scripts/components/webUI/select/webUISelect.html b/app/scripts/components/webUI/select/webUISelect.html
new file mode 100644
index 00000000..d2429f54
--- /dev/null
+++ b/app/scripts/components/webUI/select/webUISelect.html
@@ -0,0 +1,8 @@
+<div ng-if="$ctrl.isMultiple" class="web-ui-select">
+    <ui-select ng-model="$ctrl.current" tagging="$ctrl.tagHandler" theme="bootstrap" title="{{'webUI.select.tip.account' | translate}}" append-to-body="false" search-enabled="false">
+        <ui-select-match placeholder="">{{ $select.selected.name }}</ui-select-match>
+        <ui-select-choices repeat="account in $ctrl.items() | filter: { name: $select.search }">
+            <div ng-bind-html="account.name"></div>
+        </ui-select-choices>
+    </ui-select>
+</div>
\ No newline at end of file
diff --git a/app/scripts/components/webUI/services/webUI.account.js b/app/scripts/components/webUI/services/webUI.account.js
new file mode 100644
index 00000000..d492d038
--- /dev/null
+++ b/app/scripts/components/webUI/services/webUI.account.js
@@ -0,0 +1,22 @@
+'use strict';
+
+class Account {
+    
+    constructor(name, host, port, user, password, prefix, role, current = false) {
+        this.name = name;
+        this.host = host;
+        this.port = port ? parseInt(port) : null;
+        this.user = user;
+        this.password = password;
+        this.prefix = (typeof prefix === 'string') ? (prefix === 'true') : prefix;
+        this.role = role;
+        this.current = current;
+        this.credentials = this.useCredentials;
+    }
+
+    get useCredentials() {
+        return (!!this.user || (!!this.user && !!this.password));
+    }
+}
+
+export default Account;
\ No newline at end of file
diff --git a/app/scripts/components/webUI/services/webUI.service.js b/app/scripts/components/webUI/services/webUI.service.js
new file mode 100644
index 00000000..8ed4fcc2
--- /dev/null
+++ b/app/scripts/components/webUI/services/webUI.service.js
@@ -0,0 +1,135 @@
+'use strict';
+
+import Account from './webUI.account';
+
+function webUIService($rootScope, $location, $window, rolesFactory) {
+    'ngInject';
+
+    let storage = $window.localStorage;
+    let accounts = [];
+    let current = null;
+
+    let defaultHost = $location.host();
+    let defaultPort = 18883;
+    let defaultRole = rolesFactory.ROLE_ONE;
+
+    function load() {
+        accounts = storage.webUI ? JSON.parse(storage.webUI).map(createFromData) : [];
+    }
+
+    function sync() {
+        storage.setItem('webUI', JSON.stringify(accounts));
+    }
+
+    function create() {
+        let account = new Account();
+        account.port = defaultPort;
+        account.role = parseInt(rolesFactory.current.role || defaultRole);
+        return account;
+    }
+
+    function createFromData(data) {
+        return new Account(data.name, data.host, data.port, data.user, data.password, data.prefix, data.role, data.current);
+    }
+
+    function save(account) {
+        if (!account.name) {
+            account.name = account.host;
+        }
+
+        if (!accounts.find(a => a === account)) {
+            accounts.push(account);
+        }
+        sync();
+    }
+
+    function getCurrent() {
+        return accounts.find(a => a.current === true);
+    }
+
+    function setCurrent(account) {
+        accounts.forEach(a => a.current = a === account);
+        current = account;
+        sync();
+    }
+
+    function remove(account) {
+        let isCurrent = account === current;
+
+        accounts.splice(accounts.indexOf(account), 1);
+        sync();
+
+        if (!isCurrent) {
+            return;
+        }
+
+        if (accounts.length) {
+            setCurrent(accounts[accounts.length - 1]);
+        }
+
+        if (current) {
+            login(current);
+        }
+        else {
+            location.reload();
+        }
+    }
+
+    function login(account) {
+        setCurrent(account);
+
+        storage.setItem('host', account.host);
+        storage.setItem('port', account.port);
+        storage.setItem('prefix', account.prefix);
+
+        storage.setItem('user',  (account.useCredentials ? account.user : ''));
+        storage.setItem('password', (account.useCredentials && account.password ? account.password : ''));
+
+        let loginData = {
+            host: account.host,
+            port: account.port,
+            user: account.user,
+            password: account.password,
+            prefix: account.prefix
+        };
+
+        rolesFactory.setRole(account.role);
+        $rootScope.requestConfig(loginData);
+
+        location.reload();
+    }
+
+    function init() {
+        load();
+
+        if (!accounts.length) {
+            let host = storage.host || defaultHost;
+            let port = storage.port || defaultPort;
+            let user = storage.user;
+            let password = storage.password;
+            let prefix = storage.prefix;
+            let role = rolesFactory.current.role || defaultRole;
+
+            let account = new Account('Default', host, port, user, password, prefix, role, true);
+            save(account);
+        }
+
+        current = getCurrent();
+    }
+
+    init();
+
+    return {
+        accounts: accounts,
+        current: current,
+        create: create,
+        save: save,
+        remove: remove,
+        getCurrent: getCurrent,
+        setCurrent: setCurrent,
+        login: login
+    };
+}
+
+export default webUIService;
+
diff --git a/app/scripts/components/webUI/webUI.scss b/app/scripts/components/webUI/webUI.scss
new file mode 100644
index 00000000..333a00ee
--- /dev/null
+++ b/app/scripts/components/webUI/webUI.scss
@@ -0,0 +1,150 @@
+web-ui-manage {
+    .form-group {
+        .required {
+            .control-label {
+                &:after {
+                    content: "*";
+                    color: red;
+                    padding-left: 3px;
+                }
+            }
+        }
+    }
+
+    .tap {
+        cursor: pointer;
+    }
+
+    table {
+        tr:first-child {
+            td {
+                border-top: none;
+            }
+        }
+    }
+}
+
+.visible-xs {
+    web-ui-select {
+        width: 100%;
+        margin: 10px 0px 5px 0px;
+        
+        .open {
+            > .dropdown-menu {
+                animation: none;
+            }
+        }    
+        
+        .ui-select-container {
+            .ui-select-choices {
+                .ui-select-choices-row {
+                    > span {
+                        background: rgba(69, 69, 69, .6);
+                        color:#999;
+                        padding: 10px 15px 10px 38px;
+                        font-size: 14px;
+                    }
+                }
+            } 
+
+            .ui-select-match-text {
+                display: inline-block;
+                font-size: 14px;
+                font-weight: 400;
+                padding-bottom: 10px;
+            }
+
+            .ui-select-choices {
+                position: relative !important;
+                top: 10px;
+                left: 0;
+                right: 0;
+                margin-bottom: 10px;
+                overflow: hidden;
+            }
+        }
+    }
+}
+
+web-ui-select {
+    display: inline-block;
+    vertical-align: middle;
+
+    .ui-select-container {
+        position: relative;
+
+        .ui-select-match {
+
+            &.btn-default-focus {
+                background: none;
+                border: none;
+                color: #fff;
+                box-shadow: none;
+            }
+
+            .ui-select-toggle {
+                background: transparent;
+                border: none;
+                color: #fff;
+        
+                &:hover,
+                &:focus {
+                    background: transparent;
+                    border: none;
+                }
+            }
+        }
+
+        .ui-select-choices {
+            position: absolute;
+            z-index: 100;
+            top: 35px;
+            left: inherit;
+            right: -22px;
+            float: none;
+
+            &.dropdown-menu {
+                background: #222;
+                border: 1px solid #222;
+                box-shadow: none;
+                padding: 0;
+            }
+
+           .ui-select-choices-row {
+                > span {
+                    background: #222;
+                    color: #fff;
+
+                    &:hover {
+                        color: rgba($color: #fff, $alpha: 0.7);
+                    }
+                }
+
+                &.active {
+                    > span {
+                        background: #fff;
+                        color: #222;
+                    }
+                }
+            }
+        }
+
+        .form-control {
+            background: none;
+            border: none;
+            color: #fff;
+
+            height: 19px;
+            padding: 0px 12px;
+        }
+
+        .ui-select-search {
+            width: 1px;
+
+            &.ui-select-search-hidden {
+                display: none;
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/app/scripts/i18n/webUI/ru.json b/app/scripts/i18n/webUI/ru.json
new file mode 100644
index 00000000..9b8b688b
--- /dev/null
+++ b/app/scripts/i18n/webUI/ru.json
@@ -0,0 +1,62 @@
+{
+    "webUI": {
+        "select": {
+            "tip": {
+                "account": "Choose a account"
+            },
+            "button": {
+                "add": "+ Add account"
+            }
+        },
+        "manager": {
+            "field": {
+                "name": "Name",
+                "host": "Host",
+                "port": "Port",
+                "user": "User ID",
+                "password": "Password",
+                "prefix-header": "Use prefix",
+                "prefix": "Enable prefix (/client/user_id/)",
+                "credentials": "Use access credentials"
+            },
+            "table": {
+                "header": {
+                    "name": "Name",
+                    "host": "Host",
+                    "port": "Port",
+                    "user": "User ID",
+                    "prefix": "Use prefix"
+                }
+            },
+            "button": {
+                "add": "Add account",
+                "edit": "Edit",
+                "remove": "Remove",
+                "login": "Login",
+                "save": "Save",
+                "cancel": "Cancel"
+            },
+            "prompt": {
+                "remove": "Are you sure you want to delete <b>{{name}}</b> account?"
+            },
+            "error": {
+                "name": {
+                    "empty": "Empty name is not allowed"
+                },
+                "host": {
+                    "empty": "Empty host is not allowed"
+                },
+                "port": {
+                    "empty": "Empty port is not allowed",
+                    "invalid": "Only number allowed"
+                },
+                "user": {
+                    "empty": "Empty user is not allowed"
+                },
+                "password": {
+                    "empty": "Empty password is not allowed"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/views/web-ui.html b/app/views/web-ui.html
index b1a95c36..273bdba6 100644
--- a/app/views/web-ui.html
+++ b/app/views/web-ui.html
@@ -2,7 +2,17 @@
 <h1 class="page-header">Web UI</h1>
 
 <div class="row">
-    <login-form></login-form>
+
+    <div class="col-lg-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h3 class="panel-title"><i class="glyphicon glyphicon-wrench"></i> Accounts</h3>
+            </div>
+            <div class="panel-body">
+                <web-ui-manage></web-ui-manage>
+            </div>
+        </div>
+    </div>    
 
     <div class="col-lg-12">
         <div class="panel panel-default">
diff --git a/package.json b/package.json
index 7780b752..c305398e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "c3": "^0.4.11",
     "codemirror": "^5.25.0",
     "d3": "^4.7.4",
+    "dotenv": "^8.1.0",
     "jquery": "^3.2.1",
     "ng-file-upload": "^12.2.13",
     "ng-toast": "^2.0.0",
@@ -48,7 +49,8 @@
     "oclazyload": "^1.1.0",
     "sass-loader": "^7.3.1",
     "spectrum-colorpicker": "^1.8.0",
-    "ui-select": "^0.19.6"
+    "ui-select": "^0.19.6",
+    "webpack-dotenv-plugin": "^2.1.0"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.0",
diff --git a/webpack.config.js b/webpack.config.js
index 6254bce2..b76ec189 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,9 +13,15 @@ const WebpackChunkHash = require("webpack-chunk-hash");
 const InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin");
 const InlineChunksManifestPlugin = require('./inline-chunks-manifest');
 
+const dotenv = require('dotenv').config({
+    path: __dirname + '/.env'
+});
+const DotenvPlugin = require('webpack-dotenv-plugin');
+
 const path = require('path');
 
 process.traceDeprecation = true;
+process.noDeprecation = true;
 
 /**
  * Env
@@ -70,8 +76,8 @@ module.exports = function makeWebpackConfig() {
 
             'angular-translate',
             'angular-translate-loader-partial',
+            'ngbootbox',
             'angular-spinkit',
-            'ngbootbox'
         ]
     };
     /**
@@ -243,6 +249,18 @@ module.exports = function makeWebpackConfig() {
      * List: http://webpack.github.io/docs/list-of-plugins.html
      */
     config.plugins = [
+
+    /**
+     * Dotenv
+     * Reference: https://github.com/nwinch/webpack-dotenv-plugin
+     * Add dotenv support
+     */
+        new DotenvPlugin({
+            path: '.env',
+            sample: '.env.example',
+            allowEmptyValues: true,
+        }),
+
     /**
      * Angular annotate
      * Reference: https://github.com/jeffling/ng-annotate-webpack-plugin
@@ -355,6 +373,7 @@ module.exports = function makeWebpackConfig() {
             // Reference: https://github.com/kevlened/copy-webpack-plugin
             new CopyWebpackPlugin([
                 {from: path.join(__dirname, 'app', 'images'), to: 'images'},
+                {from: path.join(__dirname, 'app', 'scripts/i18n'), to: 'scripts/i18n'},
                 {from: path.join(__dirname, 'app', '404.html'), to: '404.html'},
                 {from: path.join(__dirname, 'app', 'favicon.ico'), to: 'favicon.ico'},
                 {from: path.join(__dirname, 'app', 'robots.txt'), to: 'robots.txt'}