diff --git a/package-lock.json b/package-lock.json
index b86040d..25e929f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3858,9 +3858,9 @@
       }
     },
     "frontblock-generic": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.15.0.tgz",
-      "integrity": "sha512-ec5ep0U45+y6e1FXMvxE1RvC78E7xRbUFTwY/9u9prxhQYNe79vu/E0vGCX/PLdbqAmkMfSbIOr1+zCHImoiQQ==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.17.0.tgz",
+      "integrity": "sha512-5l5w5gnn5RpwzLmI4icdQI/yueoQQDhbH56pRsfVV+opNMRa8cvW9DJ3FXo0CgZ5BEKA6EHqF4iDIFsgYyPPpA==",
       "requires": {
         "@types/node": "^12.7.1",
         "bsock": "^0.1.9",
diff --git a/package.json b/package.json
index 6b6202e..74fedf8 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "bsock": "^0.1.9",
     "easy-unzip": "^1.1.0",
     "express": "^4.16.4",
-    "frontblock-generic": "^0.15.0",
+    "frontblock-generic": "^0.17.0",
     "hdkey": "^1.1.1",
     "http": "0.0.0",
     "key-file-storage": "^2.2.4",
diff --git a/src/frontend/dashboard/package-lock.json b/src/frontend/dashboard/package-lock.json
index da96387..02c21ce 100644
--- a/src/frontend/dashboard/package-lock.json
+++ b/src/frontend/dashboard/package-lock.json
@@ -4294,9 +4294,9 @@
       }
     },
     "frontblock-generic": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.15.0.tgz",
-      "integrity": "sha512-ec5ep0U45+y6e1FXMvxE1RvC78E7xRbUFTwY/9u9prxhQYNe79vu/E0vGCX/PLdbqAmkMfSbIOr1+zCHImoiQQ==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.17.0.tgz",
+      "integrity": "sha512-5l5w5gnn5RpwzLmI4icdQI/yueoQQDhbH56pRsfVV+opNMRa8cvW9DJ3FXo0CgZ5BEKA6EHqF4iDIFsgYyPPpA==",
       "requires": {
         "@types/node": "^12.7.1",
         "bsock": "^0.1.9",
diff --git a/src/frontend/dashboard/package.json b/src/frontend/dashboard/package.json
index 7a529d9..593d91b 100644
--- a/src/frontend/dashboard/package.json
+++ b/src/frontend/dashboard/package.json
@@ -23,7 +23,7 @@
     "@clr/icons": "^2.1.1",
     "@clr/ui": "^2.1.1",
     "@webcomponents/custom-elements": "^1.0.0",
-    "frontblock-generic": "^0.15.0",
+    "frontblock-generic": "^0.17.0",
     "key-file-storage": "^2.2.4",
     "rxjs": "~6.5.2",
     "systemjs": "^0.21.3",
diff --git a/src/frontend/dashboard/src/app/apiclient-dev/apiclient-dev.component.ts b/src/frontend/dashboard/src/app/apiclient-dev/apiclient-dev.component.ts
new file mode 100644
index 0000000..0c0e0fc
--- /dev/null
+++ b/src/frontend/dashboard/src/app/apiclient-dev/apiclient-dev.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+declare const fb
+@Component({
+  selector: 'apiclient', //!!!!
+  template: `
+  <div class="clr-row">
+    <div class="clr-col">
+        <div class="card">
+            <div class="card-header">
+                Configuration
+            </div>
+            <div class="card-block">
+                <div class="card-title">
+                    Settings
+                </div>
+                <div class="card-text">
+                  <settings></settings>
+                </div>
+            </div>
+            <div class="card-footer">
+              <button class="btn btn-success" onclick="">Save</button>
+            </div>
+        </div>
+    </div>
+  </div>
+  `
+})
+export class ApiclientDevComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}
diff --git a/src/frontend/dashboard/src/app/apiclient-dev/apiclient-settings-form.component.ts b/src/frontend/dashboard/src/app/apiclient-dev/apiclient-settings-form.component.ts
new file mode 100644
index 0000000..f49efa2
--- /dev/null
+++ b/src/frontend/dashboard/src/app/apiclient-dev/apiclient-settings-form.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'settings',
+  template: `
+  <form clrForm clrLayout="vertical">
+
+    <clr-input-container>
+        <label>API key</label>
+        <input clrInput type="text" name="apikey" required />
+        <clr-control-error>We need your first name for legal compliance</clr-control-error>
+    </clr-input-container>
+
+    <clr-select-container>
+        <label>API address</label>
+        <select [(ngModel)]="data.address" (change)="updatePort($event)" clrSelect name="apihost" required>
+            <option value="api.testnet.frontblock.me">api.testnet.frontblock.me</option>
+            <option value="api.frontblock.me">api.frontblock.me</option>
+        </select>
+        <clr-control-error>This field is required!</clr-control-error>
+    </clr-select-container>
+    
+    <clr-checkbox-wrapper>
+        <input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
+        <label>Use TLS</label>
+    </clr-checkbox-wrapper>
+    
+    <clr-input-container>
+        <label>Port</label>
+        <input [(ngModel)]="data.port" clrInput type="number" name="lastName" required />
+        <clr-control-error>Valid range 1024 - 65536 
+        </clr-control-error>
+    </clr-input-container>
+    
+    
+  </form>
+  `
+})
+export class ApiclientFormComponent implements OnInit {
+
+    data:any = {}
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    updatePort(obj){
+        console.log(obj, this.data)
+        switch (this.data.address) {
+            case "api.testnet.frontblock.me":
+                this.data.port = 10001
+                break;
+            case "api.frontblock.me":
+                this.data.port = 10000
+                break;
+                
+            default:
+                console.log("wee woo")
+                break;
+        }
+        console.log(this.data)
+    }
+
+}
diff --git a/src/frontend/dashboard/src/app/app-routing.module.ts b/src/frontend/dashboard/src/app/app-routing.module.ts
index 1fd68e6..efabd45 100644
--- a/src/frontend/dashboard/src/app/app-routing.module.ts
+++ b/src/frontend/dashboard/src/app/app-routing.module.ts
@@ -3,11 +3,15 @@ import { Routes, RouterModule, Route } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ErrorDisplayComponent } from './error-display/error-display.component';
 import { PluginmanagerDevComponent } from './pluginmanager-dev/pluginmanager-dev.component';
+import { ApiclientDevComponent } from './apiclient-dev/apiclient-dev.component';
 
 
 const routes: Routes = [{
   path: "dev/pluginmanager",
   component: PluginmanagerDevComponent
+},{
+  path: "dev/apiclient",
+  component: ApiclientDevComponent
 },{
   path: "",
   component: HomeComponent
diff --git a/src/frontend/dashboard/src/app/app.module.ts b/src/frontend/dashboard/src/app/app.module.ts
index 73652f4..97053a3 100644
--- a/src/frontend/dashboard/src/app/app.module.ts
+++ b/src/frontend/dashboard/src/app/app.module.ts
@@ -7,7 +7,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
 import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
-
+import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { MainComponent } from './main/main.component';
@@ -16,6 +16,8 @@ import { HomeComponent } from './home/home.component';
 import { ErrorDisplayComponent } from './error-display/error-display.component';
 import { PluginmanagerDevComponent } from './pluginmanager-dev/pluginmanager-dev.component';
 import { HeaderBarComponent } from './header-bar/header-bar.component';
+import { ApiclientDevComponent } from './apiclient-dev/apiclient-dev.component';
+import { ApiclientFormComponent } from './apiclient-dev/apiclient-settings-form.component';
 
 export function createCompiler(fn: CompilerFactory): Compiler {
   return fn.createCompiler();
@@ -32,9 +34,12 @@ const entryComps = []
     HomeComponent,
     ErrorDisplayComponent,
     PluginmanagerDevComponent,
-    HeaderBarComponent
+    HeaderBarComponent,
+    ApiclientDevComponent,
+    ApiclientFormComponent
   ],
   imports: [
+    FormsModule,
     BrowserModule,
     BrowserAnimationsModule,
     ClarityModule,
diff --git a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
index 613bc3e..964a24e 100644
--- a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
+++ b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
@@ -86,12 +86,12 @@ export class DynamicLoaderComponent implements AfterViewInit {
         const m:SidebarEntries = <SidebarEntries>entry
 
         m.links = m.links.map(link => {
-          return {text: link.text, route: m.text + "/"  + link.route }
+          return {text: link.text, route: m.parentRoute + "/"  + link.route }
         })
 
         this.sidebar.multientires.push(m)
         rc.unshift({
-          path: m.text,
+          path: m.parentRoute,
           loadChildren: async () => module['PluginModule']
         })
 
diff --git a/src/frontend/dashboard/src/app/sidebar/sidebar.component.html b/src/frontend/dashboard/src/app/sidebar/sidebar.component.html
index 8f723f5..605e573 100644
--- a/src/frontend/dashboard/src/app/sidebar/sidebar.component.html
+++ b/src/frontend/dashboard/src/app/sidebar/sidebar.component.html
@@ -11,6 +11,7 @@
             </a>
         </clr-vertical-nav-group-children>
     </clr-vertical-nav-group>
+    
     <a *ngFor="let entry of entries" clrVerticalNavLink routerLinkActive="active" [routerLink]="entry.route">
         <clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon>
         {{entry.text}}
diff --git a/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts b/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
index 999d0e1..f3528ec 100644
--- a/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
+++ b/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
@@ -9,16 +9,19 @@ import { SidebarEntries, SidebarEntry } from 'frontblock-generic/Plugin';
 export class SidebarComponent implements OnInit {
 
   entries:SidebarEntry[] = [{
-    type: "single",
     icon: "wrench",
     route: "dev/pluginmanager",
     text: "DEV Plugin manager",
+  },{
+    icon: "wrench",
+    route: "dev/apiclient",
+    text: "DEV ApiClient",
   }]
 
   multientires:SidebarEntries[] = [{
-    type: "multi",
     icon: "times",
     text: "HELP",
+    parentRoute: "oops",
     links: [{
       route: "xd",
       text: "XD"    
diff --git a/src/frontend/widget/widget/module.ts b/src/frontend/widget/widget/module.ts
index f846938..93e82f7 100644
--- a/src/frontend/widget/widget/module.ts
+++ b/src/frontend/widget/widget/module.ts
@@ -22,8 +22,8 @@ export class PluginModule implements FrontendPlugin{
   getSidebarEntry(): SidebarEntries {
     return {
       icon: 'cog', 
-      text: 'pluginmanager', 
-      type: "multi", 
+      text: 'Plugin Manager', 
+      parentRoute: 'pluginmanager',
       links: [{
         route: 'debug',
         text: 'DEBUG'